/* Home page (November 2026 redesign, concept B with grafts from A and C).
   Tokens follow the Terminal's own (packages/anchor-ui/src/tokens.css).
   Light is the default for every visitor, whatever the system setting
   (founder, 11 Nov); dark only comes from the visitor's own choice with the
   toggle (data-theme, set by home-2026-theme.js). Layout uses logical properties throughout so the
   page can be mirrored for Arabic by setting dir="rtl" on <html>. */

/* ---------- Tokens: light (default) ---------- */
:root {
  --bg: #ffffff; --panel: #f6f7f9; --panel-2: #eef0f3; --raise: #e6e9ee; --strip: #eef0f3;
  --line: #e2e6ec; --line-2: #d2d8e0; --field-line: #8a93a0;
  --text: #131722; --muted: #5d6675; --faint: #646d7c;
  --accent: #1a64d4; --accent-fill: #1a64d4; --accent-hover: #1557bb; --teal: #00a39a;
  --bear: #c62828; --on-bear: #ffffff; --warn: #8a5c00; --neutral: #6b7484;
  --candle-ink: #3b4452;
  --grid-line: rgba(19, 23, 34, .05);
  --pool: radial-gradient(1200px 520px at 70% 0%, rgba(26, 100, 212, .06), transparent 60%);
  --shadow: 0 16px 48px rgba(19, 23, 34, .12);
  --plan-fill: rgba(26, 100, 212, .12); --plan-line: rgba(26, 100, 212, .55);
  --radius-sm: 2px; --radius: 4px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-zh: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", var(--font);
  --font-ar: "Geeza Pro", "Noto Sans Arabic", "Segoe UI", "Arial", var(--font);
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --gutter: 32px; --maxw: 1248px; --header-h: 60px;
  color-scheme: light;
}

/* ---------- Tokens: dark ---------- */
:root[data-theme="dark"] {
  --bg: #0a0d12; --panel: #0f131a; --panel-2: #141922; --raise: #1a2029; --strip: #141922;
  --line: #1e2530; --line-2: #2a3240; --field-line: #626b78;
  --text: #dfe4ea; --muted: #8b95a2; --faint: #808a97;
  --accent: #2f8cff; --accent-fill: #1c6be0; --accent-hover: #1a5fc8; --teal: #00b3a7;
  --bear: rgb(242, 92, 89); --on-bear: #0a0d12; --warn: rgb(240, 180, 41); --neutral: rgb(138, 148, 166);
  --candle-ink: #cdd4dd;
  --grid-line: rgba(138, 148, 166, .07);
  --pool: radial-gradient(1200px 520px at 70% 0%, rgba(47, 140, 255, .07), transparent 60%);
  --shadow: 0 16px 48px rgba(0, 0, 0, .5);
  --plan-fill: rgba(47, 140, 255, .16); --plan-line: rgba(47, 140, 255, .55);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font: 400 15px/1.6 var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* ---------- Instrument frame: rails + 12-column hairline grid ---------- */
.frame { position: relative; max-width: var(--maxw); margin-inline: auto; border-inline: 1px solid var(--line); }
.frame::before { content: ""; position: absolute; inset: 0 var(--gutter); pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px calc(100% / 12));
  border-inline-end: 1px solid var(--grid-line); }
.frame > * { position: relative; z-index: 1; }

/* ---------- Header, footer, buttons ----------
   In site-chrome.css, loaded before this file: the header and footer (with
   .wrap, .mono, .skip, .sprite and the .btn family) are shared with the blog
   and the calculator, so they live in one stylesheet. */

/* ---------- Section scaffolding ---------- */
.sec { border-top: 1px solid var(--line); padding-block: 96px; }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-bottom: 48px; }
.coord { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.coord b { font-weight: 500; color: var(--accent); }
.sec-head .coord { grid-column: 1 / span 3; }
.sec-head .titles { grid-column: 4 / span 9; }
h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: -.015em; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { letter-spacing: 0; }
h2 { font-size: 32px; line-height: 1.15; max-width: 24ch; }
h3 { font-size: 17px; line-height: 1.35; letter-spacing: -.005em; }
h1, h2 { text-wrap: balance; }
.lede { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 62ch; margin: 14px 0 0; }
.tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 3px 6px; white-space: nowrap; }
.tag-sample::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-inline-end: 6px; vertical-align: 1px; }

/* ---------- Panels (product surfaces) ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--strip); }
.pbar .mono { color: var(--muted); }
.kv { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.kv dt, .kv dd { padding: 9px 0; border-bottom: 1px solid var(--line); margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
/* A second line under its label on purpose ("Invalidation" / "wrong below"), at every width. */
.kv dt small { display: block; color: var(--faint); font-size: 11.5px; line-height: 1.3; white-space: nowrap; }
.kv dd { text-align: end; font-variant-numeric: tabular-nums; font-weight: 500; padding-inline-start: 12px; }
.kv dd small { display: block; color: var(--faint); font-weight: 400; font-size: 12px; white-space: nowrap; }
.sw { width: 18px; height: 0; border-top: 2px solid var(--accent); flex: none; }
.sw.inv { border-top: 2px dashed var(--bear); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.checks-top { align-content: start; padding-top: 8px; }
.ck { flex: none; width: 16px; height: 16px; border-radius: 2px; display: grid; place-items: center; margin-top: 1px; border: 1px solid var(--accent); color: var(--accent); }
.ck svg { width: 10px; height: 10px; }
.ck.no { border-color: var(--warn); color: var(--warn); }
figcaption.cap { margin-top: 10px; color: var(--faint); display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }

/* ---------- Hero ---------- */
.hero { padding-block: 72px 0; background: var(--pool); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.hero-copy { grid-column: 1 / span 5; padding-top: 12px; }
.hero-fig { grid-column: 6 / span 7; margin: 0; }
.eyebrow { color: var(--muted); display: flex; align-items: center; gap: 10px; margin: 0; }
.eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--accent); border-radius: 1px; }
h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.028em; margin-top: 22px; font-weight: 600; }
h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
h1 .w > span { display: inline-block; }
.measure { margin-top: 26px; position: relative; }
.measure .ml { height: 1px; background: var(--text); transform-origin: left center; }
[dir="rtl"] .measure .ml { transform-origin: right center; }
.labels { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--muted); font-size: 10.5px; }
.labels span { position: relative; padding-top: 13px; }
.labels span::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; height: 7px; border-inline-start: 1px solid var(--text); }
.labels span:last-child::before { inset-inline-start: auto; inset-inline-end: 0; border-inline-start: 0; border-inline-end: 1px solid var(--text); }
.hero-lede { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 28px 0 0; max-width: 46ch; }
.hero-lede strong { color: var(--text); font-weight: 500; }
.isnot { margin-top: 22px; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); }
.isnot .mono { color: var(--warn); padding-top: 2px; }
.isnot p { margin: 0; font-size: 14px; line-height: 1.55; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; align-items: center; }
.ctas .mono { color: var(--faint); flex-basis: 100%; margin-top: 4px; }

.th { box-shadow: var(--shadow); }
.th-body { display: grid; grid-template-columns: 1.5fr 1fr; }
.th-chart { border-inline-end: 1px solid var(--line); padding: 8px 0; background: var(--bg); display: flex; align-items: center; }
.th-chart svg { width: 100%; height: auto; }
.th-chart svg, .rv-chart svg, .calc-words svg { direction: ltr; }
.th-side { padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.th-side .kv dt, .th-side .kv dd { padding: 8px 0; font-size: 13px; }
.sl { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px; font-size: 12.5px; line-height: 1.5; background: var(--panel-2); }
.sl .mono { color: var(--muted); display: block; margin-bottom: 4px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.status i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--accent); }
.replay { margin-inline-start: auto; background: none; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--muted); cursor: pointer; font: inherit; padding: 0 12px; min-height: 36px; }
.replay:hover { color: var(--text); border-color: var(--field-line); }
.replay[aria-disabled="true"] { opacity: .5; cursor: default; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 64px 0 0; border-top: 1px solid var(--line); list-style: none; padding: 0; }
.step { position: relative; padding-block: 22px 30px; padding-inline: 0 20px; border-inline-end: 1px solid var(--line); }
.step:not(:first-child) { padding-inline-start: 20px; }
.step:last-child { border-inline-end: 0; }
.step::before { content: ""; position: absolute; top: -1px; inset-inline: 0; height: 2px; background: var(--accent); transform: scaleX(1); transform-origin: left; transition: transform .6s var(--ease-out-cubic); }
[dir="rtl"] .step::before { transform-origin: right; }
.step .mono { color: var(--accent); }
.step h3 { margin-top: 8px; font-size: 16px; }
.step p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Hero motion: only while <html> has .anim (set before first paint by
   home-2026-theme.js when motion is allowed). The final state is the default,
   so the page is complete with no script, with a failed script, or with
   reduced motion. */
.anim .hero .x-eye, .anim .hero .x-copy { opacity: 0; }
.anim .hero h1 .w > span { transform: translateY(108%); }
.anim .hero .measure .ml { transform: scaleX(0); }
.anim .hero .labels span { color: transparent; }
.anim .hero .labels span::before { opacity: 0; }
.anim .hero .x-panel { opacity: 0; }
.anim .hero .x-f1, .anim .hero .x-f2, .anim .hero .x-f3, .anim .hero .x-f4, .anim .hero .x-f5, .anim .hero .x-f6 { opacity: 0; }
.anim .hero .g-entry, .anim .hero .g-inv { transform: scaleX(0); }
.anim .hero .g-br, .anim .hero .g-open { opacity: 0; }
.anim .hero .step::before { transform: scaleX(0); }
.anim .hero .step .mono { color: var(--faint); }
.hero.on-eye .x-eye { opacity: 1; transition: opacity .2s linear; }
.hero.on-h1 h1 .w > span { transform: none; transition: transform .4s var(--ease); }
.hero.on-h1 h1 .w:nth-child(2) > span { transition-delay: 60ms; }
.hero.on-h1 h1 .w:nth-child(3) > span { transition-delay: 120ms; }
.hero.on-h1 h1 .w:nth-child(4) > span { transition-delay: 180ms; }
.hero.on-h1 h1 .w:nth-child(5) > span { transition-delay: 240ms; }
.hero.on-h1 h1 .w:nth-child(6) > span { transition-delay: 300ms; }
.hero.on-h1 h1 .w:nth-child(7) > span { transition-delay: 360ms; }
.hero.on-h1 h1 .w:nth-child(8) > span { transition-delay: 420ms; }
.hero.on-h1 h1 .w:nth-child(9) > span { transition-delay: 480ms; }
.hero.on-measure .measure .ml { transform: none; transition: transform .8s var(--ease-out-cubic); }
.hero.on-measure .labels span::before { opacity: 1; transition: opacity .2s linear 150ms; }
.hero.on-measure .labels span:nth-child(2)::before { transition-delay: 270ms; }
.hero.on-measure .labels span:nth-child(3)::before { transition-delay: 390ms; }
.hero.on-measure .labels span:nth-child(4)::before { transition-delay: 510ms; }
.hero.on-measure .labels span:nth-child(5)::before { transition-delay: 630ms; }
.hero.on-copy .x-copy { opacity: 1; transition: opacity .3s linear; }
.hero.on-copy .labels span { color: var(--muted); transition: color .3s linear; }
.hero.on-panel .x-panel { opacity: 1; transition: opacity .5s linear; }
.hero.on-panel .g-open { opacity: 1; transition: opacity .5s linear .3s; }
.g-entry, .g-inv { transform-box: fill-box; transform-origin: left center; }
.hero.on-s1 .g-entry { transform: none; transition: transform .7s var(--ease-out-cubic); }
.hero.on-s1 .x-f1 { opacity: 1; transition: opacity .25s linear .35s; }
.hero.on-s2 .g-inv { transform: none; transition: transform .7s var(--ease-out-cubic); }
.hero.on-s2 .x-f2 { opacity: 1; transition: opacity .25s linear .35s; }
.hero.on-s3 .g-br, .hero.on-s3 .x-f3 { opacity: 1; transition: opacity .35s linear; }
.hero.on-s4 .x-f4 { opacity: 1; transition: opacity .35s linear; }
.hero.on-s5 .x-f5 { opacity: 1; transition: opacity .35s linear; }
.hero.on-s6 .x-f6 { opacity: 1; transition: opacity .35s linear; }
.hero.on-s1 .step[data-n="1"]::before, .hero.on-s4 .step[data-n="2"]::before, .hero.on-s5 .step[data-n="3"]::before, .hero.on-s6 .step[data-n="4"]::before { transform: none; }
.hero.on-s1 .step[data-n="1"] .mono, .hero.on-s4 .step[data-n="2"] .mono, .hero.on-s5 .step[data-n="3"] .mono, .hero.on-s6 .step[data-n="4"] .mono { color: var(--accent); transition: color .3s linear; }

/* ---------- 01 Tour ----------
   .tour-frame is the slot, and its size is the slot's size: 16:9, phones 4:5 (below). Today it
   holds the picture tour (home-2026/partials/tour-pictures.html); the video replaces that partial
   later and keeps this frame. Everything under .tour-pics belongs to the picture tour only. */
.tour-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line-2); border-radius: var(--radius); background: radial-gradient(900px 420px at 50% 40%, var(--panel-2), var(--bg) 70%); overflow: hidden; container: tour / size; }
.tour-cap { margin: 10px 0 0; color: var(--faint); display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }

.tour-pics { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
/* Without the script every step is on one strip that scrolls sideways; with it (.is-live) one shows at a time. */
.tour-stage { min-height: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.tour-pics.is-live .tour-stage { overflow: hidden; }
/* Without the script, the next step peeks in at the edge and the scrollbar shows, so the other steps can be found. */
.tour-pics:not(.is-live) .tour-stage { scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
.tour-pics:not(.is-live) .tour-panel { flex-basis: 88%; border-inline-end: 1px solid var(--line); }
.tour-pics:not(.is-live) .tour-panel:last-child { border-inline-end: 0; }
.tour-panel { flex: 0 0 100%; min-width: 0; min-height: 0; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: center; padding: 40px 48px; }
.tour-panel[hidden] { display: none; }
.tour-panel:focus-visible { outline-offset: -4px; }
.tour-pics.is-live .tour-panel { animation: tour-in .35s var(--ease) both; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } }
.tour-copy .mono { color: var(--accent); }
.tour-copy h3 { font-size: 24px; line-height: 1.25; margin-top: 12px; text-wrap: balance; }
.tour-copy p { margin: 12px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 40ch; }
.tour-view { min-width: 0; min-height: 0; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.tv { width: 100%; max-width: 680px; box-shadow: var(--shadow); }
.tv-today { max-width: 520px; }
.tv .rv-chart { margin-bottom: 4px; }
/* The chart's two labels as text, for phones, where the chart's own text is too small to read. */
.tv .rv-sum { display: none; margin: 0 0 6px; color: var(--muted); font-size: 11px; line-height: 1.5; letter-spacing: .04em; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; }
.tv .rv-sum > span { display: inline-flex; align-items: center; gap: 6px; }
.tv .rv-sum .sw { width: 14px; }
.tv .sl-plan, .tv .sl-crit { padding: 16px; }
.tv .crit li { padding: 10px 12px; font-size: 13.5px; }

.tour-bar { height: 56px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding-inline: 12px; background: color-mix(in srgb, var(--bg) 80%, transparent); }
.tour-bar[hidden] { display: none; }
.tour-btn { flex: none; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg); color: var(--text); font: 500 13px/1 var(--font); cursor: pointer; }
.tour-btn:hover { border-color: var(--field-line); }
.tour-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.tour-btn[hidden] { display: none; }
[dir="rtl"] .tour-prev svg, [dir="rtl"] .tour-next svg { transform: scaleX(-1); }
.tour-play .i-play, .tour-play.is-paused .i-pause { display: none; }
.tour-play.is-paused .i-play { display: block; }
.tour-tabs { flex: 1; min-width: 0; height: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.tour-tab { position: relative; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--faint); font: 500 11px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; text-align: start; }
.tour-tab .n { flex: none; }
.tour-tab .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-tab:hover { color: var(--text); background: var(--panel-2); }
.tour-tab:focus-visible { outline-offset: -2px; }
.tour-tab[aria-selected="true"] { color: var(--text); }
.tour-tab[aria-selected="true"] .n { color: var(--accent); }
/* Chapter marks along the top of the tabs. While the tour plays, the current one fills over the step's time. */
.tour-tick { position: absolute; inset-inline: 10px; top: 4px; height: 2px; background: var(--line-2); overflow: hidden; }
.tour-tab[aria-selected="true"] .tour-tick { background: var(--accent); }
.tour-tick::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .tour-tick::after { transform-origin: right; }
.tour-pics.is-playing .tour-tab[aria-selected="true"] .tour-tick { background: var(--line-2); }
.tour-pics.is-playing .tour-tab[aria-selected="true"] .tour-tick::after { animation: tour-fill var(--tour-step, 6s) linear forwards; }
.tour-pics.is-held .tour-tick::after { animation-play-state: paused; opacity: .45; }
@keyframes tour-fill { to { transform: none; } }

/* Shorter frames (narrow laptops, tablets): less padding, the longest lists shortened. */
@container tour (max-height: 600px) {
  .tour-panel { padding: 24px 32px; column-gap: 32px; }
  .tour-copy h3 { font-size: 21px; }
  .tour-copy p { font-size: 14.5px; }
  .tv-ticket .tk-actions, .tv-review .q li:nth-child(n+3), .tv-second .crit li:nth-child(n+3) { display: none; }
}
/* An upright frame (the 4:5 frame below 900 px: tablets in portrait, phones) is laid out by its shape:
   one column, the caption above the view, both centred at the width of a readable view. */
@container tour (max-aspect-ratio: 1 / 1) {
  .tour-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, max-content); align-content: center; justify-items: center; row-gap: 28px; }
  .tour-copy, .tour-view { width: 100%; max-width: 560px; }
  .tour-view { justify-content: flex-start; } /* a narrower view (Today) lines up with the caption */
  .tour-copy p { max-width: none; }
}
/* Phones (the 4:5 frame at 640 or less): the caption above the view, the view cropped softly at the foot. */
@container tour (max-width: 640px) {
  .tour-panel { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; align-items: start; justify-items: stretch; row-gap: 14px; padding: 18px 16px 0; }
  .tour-copy, .tour-view { max-width: none; }
  .tour-copy .mono, .tv-second .sl-plan > .mono { display: none; }
  .tour-copy h3 { font-size: 17px; }
  .tv .kv dd small { display: inline; margin-inline-start: 6px; }
  .tour-copy p { font-size: 13.5px; line-height: 1.5; margin-top: 6px; }
  .tour-view { align-items: flex-start; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); }
  .tv { box-shadow: none; }
  .tv .pbar .tag { display: none; }
  .tv-ticket .checks, .tv-ticket .tk-actions, .tv-second .sl-crit > .mono, .tv-second .crit li:nth-child(n+2), .tv-review .q li:nth-child(n+3) { display: none; }
  .tv .pbar { padding: 7px 10px; }
  .tv .pbar .mono { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
  .tv .pbody { padding: 10px 12px; }
  .tv .kv dt, .tv .kv dd { padding: 6px 0; }
  /* The Ticket's four values as a 2 x 2 grid, label over value, so the warning below stays in view.
     The Risk row's small 1.5R goes: the warning gives it. */
  .tv-ticket .kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; border-bottom: 1px solid var(--line); }
  .tv-ticket .kv dt, .tv-ticket .kv dd { border-bottom: 0; }
  .tv-ticket .kv dt { padding: 8px 0 0; font-size: 12px; }
  .tv-ticket .kv dd { padding: 2px 0 8px; text-align: start; }
  .tv-ticket .kv dt:nth-of-type(odd), .tv-ticket .kv dd:nth-of-type(odd) { grid-column: 1; }
  .tv-ticket .kv dt:nth-of-type(even), .tv-ticket .kv dd:nth-of-type(even) { grid-column: 2; }
  .tv-ticket .kv dt:nth-of-type(-n+2) { grid-row: 1; }
  .tv-ticket .kv dd:nth-of-type(-n+2) { grid-row: 2; }
  .tv-ticket .kv dt:nth-of-type(n+3) { grid-row: 3; border-top: 1px solid var(--line); }
  .tv-ticket .kv dd:nth-of-type(n+3) { grid-row: 4; }
  .tv-ticket .kv dd small { display: none; }
  .tv .warnrow { margin-top: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; }
  .tv .rules li { padding: 7px 0; font-size: 12.5px; }
  .tv .sl-plan { padding: 10px 12px; }
  .tv .sl-crit { padding: 10px 12px; }
  .tv .sl-plan blockquote { font-size: 13px; line-height: 1.5; margin-top: 0; padding-inline-start: 10px; }
  .tv .crit { margin-top: 0; }
  .tv .crit li { padding: 8px 10px; font-size: 12.5px; gap: 8px; }
  .tv .crit li p + p { font-size: 12px; }
  .tv .q li { padding: 7px 0; font-size: 12.5px; }
  .tv-review .rv-chart text { display: none; }
  .tv .rv-sum { display: flex; }
  .tour-bar { gap: 6px; padding-inline: 8px; }
  .tour-tabs { gap: 2px; }
  .tour-tab { justify-content: center; padding-inline: 4px; }
  .tour-tab .l, .tour-play-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tour-tick { inset-inline: 6px; }
}
/* The smallest phones (360 wide): a little less type, the Review as its in and out line and one answer, and the Ticket's
   entry, invalidation and size on one line so its warning stays in view. Its Risk value goes; the
   warning gives the risk (1.5R against the 1.0R limit). */
@container tour (max-width: 340px) {
  .tour-copy p { font-size: 13px; }
  .tv-review .q li:nth-child(n+2), .tv-review .rv-chart { display: none; } /* the in and out line above carries the chart */
  .tv-ticket .kv { grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: 10px; }
  .tv-ticket .kv dt { font-size: 11.5px; gap: 6px; }
  .tv-ticket .kv .sw { width: 12px; }
  .tv-ticket .kv dt:nth-of-type(1), .tv-ticket .kv dd:nth-of-type(1) { grid-column: 1; }
  .tv-ticket .kv dt:nth-of-type(2), .tv-ticket .kv dd:nth-of-type(2) { grid-column: 2; }
  .tv-ticket .kv dt:nth-of-type(3), .tv-ticket .kv dd:nth-of-type(3) { grid-column: 3; }
  .tv-ticket .kv dt:nth-of-type(3) { grid-row: 1; border-top: 0; }
  .tv-ticket .kv dd:nth-of-type(3) { grid-row: 2; }
  .tv-ticket .kv dt:nth-of-type(4), .tv-ticket .kv dd:nth-of-type(4) { display: none; }
}

/* ---------- 02 What it is ---------- */
.def { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.def-sheet { grid-column: 4 / span 9; border-top: 1px solid var(--line-2); margin: 0; }
.def-row { display: grid; grid-template-columns: 3fr 9fr; column-gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.def-row dt { color: var(--muted); padding-top: 2px; }
.def-row dd { margin: 0; font-size: 16px; line-height: 1.55; }
.buying { grid-column: 4 / span 9; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); border-radius: var(--radius); }
.buying > div { padding: 20px 22px; }
.buying > div + div { border-inline-start: 1px solid var(--line-2); background: var(--panel); }
.buy-yes { color: var(--accent); }
.buy-no { color: var(--bear); }
.buying ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; }
.buying li { display: flex; gap: 10px; }
.buying li::before { content: ""; flex: none; width: 10px; height: 1px; background: var(--accent); margin-top: 11px; }
.buying .neg li::before { background: none; height: 0; border-top: 1.5px dashed var(--bear); }

/* ---------- 03 How it works ---------- */
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); margin: 0; padding: 0; }
.how > li { list-style: none; padding: 24px 22px; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
@supports (grid-template-rows: subgrid) {
  .how { grid-template-rows: repeat(4, auto); }
  .how > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
  .how > li .plain { margin-top: 0; }
}
.how > li:last-child { border-inline-end: 0; }
.how .mono { color: var(--accent); }
.how p { margin: 0; color: var(--muted); font-size: 14.5px; }
.plain { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 13.5px; color: var(--text); }
.plain .mono { display: block; color: var(--faint); margin-bottom: 4px; }
.change { margin-top: 16px; display: grid; grid-template-columns: 3fr 5fr 4fr; gap: 24px; align-items: start; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.change > .mono { color: var(--accent); padding-top: 3px; }
.change p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.change .plain { margin-top: 0; padding-top: 0; border-top: 0; padding-inline-start: 16px; border-inline-start: 1px dashed var(--line-2); }
.calc { margin-top: 32px; display: grid; grid-template-columns: 5fr 7fr; }
.calc-in { padding: 22px; border-inline-end: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; margin: 0; }
.calc-in h3, .calc-sub, .calc-hint, .field-wide { grid-column: 1 / -1; }
.calc-sub { margin: -8px 0 0; color: var(--muted); font-size: 13.5px; }
.calc-hint { margin: -6px 0 0; color: var(--faint); font-size: 12.5px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field label small { color: var(--bear); font-size: 12px; }
.field input:not([type="range"]):not([type="checkbox"]) { width: 100%; height: 44px; background: var(--bg); border: 1px solid var(--field-line); border-radius: var(--radius); color: var(--text); font: 500 15px var(--font); font-variant-numeric: tabular-nums; padding: 0 12px; }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--bear); }
input[type="range"] { width: 100%; height: 32px; accent-color: var(--accent-fill); margin: 0; }
.calc-out { padding: 22px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; background: var(--bg); }
.readout { display: grid; gap: 14px; }
.readout div { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.readout .mono { color: var(--muted); }
.readout output { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.readout small { color: var(--faint); font-size: 12.5px; }
.calc-words { display: grid; gap: 10px; }
.sentence { margin: 0; font-size: 14.5px; line-height: 1.6; padding: 12px 14px; border-inline-start: 2px solid var(--accent); background: var(--panel); }
.calc-msg { color: var(--warn); font-size: 13px; min-height: 1.4em; margin: 0; }

/* ---------- 04 Inside the Terminal ---------- */
.day { padding: 28px 32px 28px; margin-bottom: 24px; }
.day-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.day-head .mono { color: var(--muted); margin: 0; }
.lanes { position: relative; margin-top: 44px; }
.lane { position: relative; height: 44px; border-top: 1px solid var(--line); }
.lane:last-of-type { border-bottom: 1px solid var(--line); }
.lane-name { position: absolute; inset-inline-start: 0; top: 13px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); width: 110px; }
.track { position: absolute; inset-inline-start: 120px; inset-inline-end: 0; top: 0; bottom: 0; }
.seg { position: absolute; top: 10px; height: 24px; border-radius: var(--radius-sm); font-size: 12px; line-height: 22px; padding-inline: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent; }
/* Positions are fractions of a 16-hour window that starts 4.5 hours before
   the New York open: the same in every time zone. */
.s-pre { inset-inline-start: 0; width: 28.125%; background: repeating-linear-gradient(135deg, var(--panel-2) 0 6px, var(--raise) 6px 7px); color: var(--muted); }
.s-reg { inset-inline-start: 28.125%; width: 40.625%; background: var(--raise); border-color: var(--line-2); color: var(--text); }
.s-post { inset-inline-start: 68.75%; width: 25%; background: repeating-linear-gradient(135deg, var(--panel-2) 0 6px, var(--raise) 6px 7px); color: var(--muted); }
.s-plan { inset-inline-start: 9.375%; width: 15.625%; background: var(--plan-fill); border-color: var(--plan-line); color: var(--text); }
.s-rules { inset-inline-start: 28.125%; width: 12.5%; border: 1px dashed var(--line-2); color: var(--muted); }
.s-review { inset-inline-start: 84.375%; width: 9.375%; background: var(--panel-2); border-color: var(--field-line); color: var(--text); }
.overlay { position: absolute; inset-inline-start: 120px; inset-inline-end: 0; top: -26px; bottom: -8px; pointer-events: none; z-index: 1; }
.mark-line { position: absolute; top: 0; bottom: 0; width: 0; border-inline-start: 1px solid var(--accent); }
.mark-line > span { position: absolute; top: 0; inset-inline-start: 6px; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--accent); }
.at-open { inset-inline-start: 28.125%; }
.rule-line { position: absolute; top: 72px; bottom: 2px; width: 0; border-inline-start: 1px dashed var(--muted); }
.at-rule { inset-inline-start: 40.625%; }
.ticks { position: relative; height: 32px; margin-inline-start: 120px; }
.ticks span { position: absolute; top: 8px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
[dir="rtl"] .ticks span { transform: translateX(50%); }
.tk0 { inset-inline-start: 0; } .tk1 { inset-inline-start: 12.5%; } .tk2 { inset-inline-start: 25%; } .tk3 { inset-inline-start: 37.5%; } .tk4 { inset-inline-start: 50%; }
.tk5 { inset-inline-start: 62.5%; } .tk6 { inset-inline-start: 75%; } .tk7 { inset-inline-start: 87.5%; } .tk8 { inset-inline-start: 100%; }
/* Wide screens draw the lanes (aria-hidden); the same times stay readable to screen readers in this list. */
.day-list { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.day-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
.day-notes p { font-size: 14px; color: var(--muted); margin: 0; }
.day-notes b { display: block; color: var(--text); font-weight: 500; margin-bottom: 4px; }

/* Cards keep their own height (no stretched, half-empty panels beside a taller neighbour). */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.moment { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.moment .panel { flex: 1; }
.m-ticket { grid-column: span 7; } .m-today { grid-column: span 5; } .m-review { grid-column: span 5; } .m-markets { grid-column: span 7; } .m-second { grid-column: span 12; }
.m-head { margin-bottom: 12px; }
.m-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; max-width: 60ch; }
.pbody { padding: 16px; }
.warnrow { display: flex; gap: 10px; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: var(--radius); padding: 10px 12px; font-size: 13.5px; margin-top: 14px; }
.warnrow svg { flex: none; color: var(--warn); margin-top: 2px; }
.tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tk-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rules li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rules li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; text-align: end; }
.rules li.carried { border-inline-start: 2px solid var(--accent); padding-inline-start: 10px; margin-top: 6px; background: var(--plan-fill); }
.rules li.carried span:last-child { color: var(--text); padding-inline-end: 8px; }
.q { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.q li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.q li::before { counter-increment: q; content: "0" counter(q); font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 2px; grid-row: span 2; }
.q b { font-weight: 500; }
.q span { color: var(--muted); }
.rv-chart { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); margin-bottom: 12px; }
.tbl-wrap { overflow-x: auto; }
.tbl-wrap:focus-visible { outline-offset: -2px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: var(--strip); }
td:first-child { font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pill i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--neutral); }
.pill.drafted i { border-color: var(--accent); background: var(--accent); }
.pill.waiting i { border-color: var(--accent); }
.struct { display: inline-flex; align-items: center; gap: 8px; }
.struct svg { color: var(--muted); flex: none; }
.credit { padding: 10px 12px; color: var(--faint); font-size: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sl-grid { display: grid; grid-template-columns: 5fr 7fr; }
.sl-plan { padding: 18px; border-inline-end: 1px solid var(--line); background: var(--bg); }
.sl-plan blockquote { margin: 10px 0 0; font-size: 15px; line-height: 1.6; border-inline-start: 2px solid var(--line-2); padding-inline-start: 14px; }
.sl-plan .kv { margin-top: 14px; }
.sl-crit { padding: 18px; }
.crit { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.crit li { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); font-size: 14px; }
.crit li .mono { color: var(--muted); padding-top: 2px; }
.crit li p { margin: 0; }
.crit li p + p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.sl-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 18px; margin: 0; list-style: none; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.sl-foot li { display: inline-flex; gap: 8px; align-items: center; }
.sl-foot li::before { content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 1px; }

/* ---------- 05 Who it is for ---------- */
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.who > div { padding-block: 24px 0; padding-inline: 0 24px; }
.who > div + div { padding-inline-start: 24px; border-inline-start: 1px solid var(--line); }
.who h3 { margin-top: 8px; }
.who p { color: var(--muted); margin: 10px 0 0; font-size: 14.5px; }
.who .mono { color: var(--accent); }
.notfor { margin-top: 40px; display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.notfor .mono { color: var(--warn); }
.notfor p { margin: 0; color: var(--muted); }

/* ---------- 06 Languages ---------- */
.lang { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.lang-list { grid-column: 1 / span 5; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.lang-list li { border-bottom: 1px solid var(--line); }
.lang-list button { box-sizing: border-box; width: 100%; min-height: 52px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; cursor: pointer; border-radius: var(--radius); background: none; border: 0; color: inherit; font: inherit; text-align: start; }
.lang-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lang-list button:hover { background: var(--panel); }
.lang-list button[aria-pressed="true"] { background: var(--panel-2); }
.lang-list button[aria-pressed="true"] .code { color: var(--accent); }
.lang-list .code { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .07em; text-transform: uppercase; }
.lang-list .nm { font-size: 17px; font-weight: 500; }
.lang-list .nm[lang="zh"] { font-family: var(--font-zh); }
.lang-list .nm[lang="ar"] { font-family: var(--font-ar); }
.lang-list .en { color: var(--muted); font-size: 13px; text-align: end; }
.lang-demo { grid-column: 7 / span 6; }
.ld-card[lang="zh"] { font-family: var(--font-zh); }
.ld-card[lang="ar"] { font-family: var(--font-ar); }
.ld-card[lang="ar"] .mono { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 12px; }
.ld-body { padding: 20px; }
.ld-title { font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; }
.ld-rule { height: 1px; background: var(--text); margin: 16px 0 10px; }
.ld-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 16px; }
.ld-fields div { padding: 10px 12px; border-inline-end: 1px solid var(--line); }
.ld-fields div:last-child { border-inline-end: 0; }
.ld-fields span { display: block; color: var(--muted); font-size: 12.5px; }
.ld-fields b { font-weight: 500; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.ld-line { margin: 16px 0 0; color: var(--muted); }
.ld-meta { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }

/* ---------- 07 Data and method ---------- */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); }
.trust > article { padding: 24px; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.trust > article:last-child { border-inline-end: 0; }
.trust .mono { color: var(--accent); }
.trust p { margin: 0; color: var(--muted); font-size: 14.5px; }
.trust .kv dt, .trust .kv dd { font-size: 13px; padding: 8px 0; }
.trust .kv dd { font-weight: 400; }
.more { margin-top: auto; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--text); display: inline-flex; gap: 6px; align-items: center; padding-top: 8px; min-height: 44px; }
.more:hover { color: var(--accent); }
[dir="rtl"] .more svg, [dir="rtl"] .resin-link svg { transform: scaleX(-1); }
.page-note { margin: 24px 0 0; color: var(--muted); font-size: 14px; }
.page-note .mono { margin-right: 8px; }

/* ---------- 08 AlphaResin ---------- */
.resin { display: grid; grid-template-columns: 5fr 7fr; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.resin-copy { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.resin-copy p { margin: 0; color: var(--muted); }
.resin-copy p b { color: var(--text); font-weight: 500; }
.resin-copy .facts { display: flex; flex-wrap: wrap; gap: 8px; }
.resin-link { align-self: flex-start; margin-top: 6px; }
.resin-code { background: var(--bg); border-inline-start: 1px solid var(--line-2); display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.code-cols { display: grid; grid-template-columns: 1fr 1fr; }
.code-cols pre { margin: 0; padding: 16px; font: 400 12.5px/1.7 var(--mono); color: var(--muted); overflow: auto; direction: ltr; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-cols pre + pre { border-inline-start: 1px solid var(--line); }
.code-cols .k { color: var(--accent); }
.code-cols .c { color: var(--faint); }
.code-cols .ok { color: var(--text); }
.code-cols .left { color: var(--warn); }
/* Why AlphaResin: a full-width row under the copy and the report, ruled like the who-it's-for row. */
.resin-why { grid-column: 1 / -1; border-top: 1px solid var(--line-2); padding: 24px 28px 28px; }
.resin-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.resin-why-grid > div { padding-inline: 0 20px; }
.resin-why-grid > div + div { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.resin-why-grid .mono { color: var(--accent); }
.resin-why-grid h3 { margin-top: 8px; font-size: 15.5px; }
.resin-why-grid p { color: var(--muted); margin: 8px 0 0; font-size: 14px; }

/* ---------- 09 Learn ---------- */
.learn { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; }
.course { padding: 24px; }
.course-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.course h3 { font-size: 22px; margin-top: 10px; }
.course > p { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.course ol { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.course li { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.course .n { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.reads { display: grid; gap: 12px; }
.reads > .mono { color: var(--faint); }
.card { border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; text-decoration: none; color: inherit; background: var(--panel); }
.card:hover { border-color: var(--field-line); }
.card:hover h3 { color: var(--accent); }
.card p { margin: 0; color: var(--muted); font-size: 14px; }
.learn-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; flex-wrap: wrap; gap: 12px; }

/* ---------- 10 Plans ---------- */
.plans-note { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--radius); margin-bottom: 24px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); }
.plan { padding: 26px 24px; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.plan:last-child { border-inline-end: 0; }
.plan.mid { background: var(--panel); }
.plan .ph { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan h3 { font-size: 22px; }
.plan .for { color: var(--muted); font-size: 14px; margin: 0; }
.plan .avail { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plans-foot { margin: 14px 0 0; color: var(--faint); font-size: 13px; }
.legacy { margin-top: 40px; padding: 16px 18px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); font-size: 13.5px; }
.legacy .mono { color: var(--faint); display: block; margin-bottom: 6px; }
.legacy p { margin: 0; }
.legacy p + p { margin-top: 4px; }

/* ---------- 11 Founding list ---------- */
.found { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.found-copy { grid-column: 1 / span 6; }
.found-copy .coord { flex-direction: row; gap: 12px; margin-bottom: 14px; }
.found-why { margin: 14px 0 0; color: var(--text); max-width: 56ch; }
.found-copy ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.found-copy li { display: flex; gap: 10px; color: var(--muted); }
.found-copy li::before { content: ""; flex: none; width: 10px; height: 1px; background: var(--accent); margin-top: 12px; }
.found-panel { grid-column: 8 / span 5; padding: 24px; }
form .field { margin-bottom: 16px; }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent-fill); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--bear); outline-offset: 2px; }
.form-help { font-size: 12.5px; color: var(--faint); margin: 12px 0 0; }
.form-err { color: var(--bear); font-size: 13.5px; min-height: 1.3em; margin: 10px 0 0; }
.form-err:empty { margin: 0; }
.done:focus { outline: none; }
.done-ico { width: 40px; height: 40px; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center; color: var(--accent); margin-bottom: 14px; }
.done h3 { font-size: 19px; }
.done p { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.done-steps { margin: 14px 0 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 14px; }

/* ---------- 12 FAQ ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.faq-list { grid-column: 4 / span 9; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 4px; font-weight: 500; font-size: 16px; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-inline-end: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { margin: 0 4px 20px; color: var(--muted); max-width: 70ch; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .frame { border-inline: 0; }
  .frame::before { background-image: repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px calc(100% / 4)); }
  .sec { padding-block: 64px; }
  .sec-head { display: block; margin-bottom: 32px; }
  .sec-head .coord { flex-direction: row; gap: 12px; margin-bottom: 14px; }
  h2 { font-size: 26px; }
  .hero { padding-top: 40px; }
  .hero-copy, .hero-fig { grid-column: 1 / -1; }
  .hero-fig { margin-top: 40px; }
  .th-body { grid-template-columns: 1fr; }
  .th-chart { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .step, .step:not(:first-child) { padding: 18px 14px 22px; border-bottom: 1px solid var(--line); }
  .step:nth-child(2n) { border-inline-end: 0; }
  .def-sheet, .buying { grid-column: 1 / -1; }
  .def-row { grid-template-columns: 1fr; row-gap: 4px; }
  .buying { grid-template-columns: 1fr; }
  .buying > div + div { border-inline-start: 0; border-top: 1px solid var(--line-2); }
  .how { grid-template-columns: 1fr; }
  .how > li { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .how > li:last-child { border-bottom: 0; }
  .change { grid-template-columns: 1fr; gap: 10px; }
  .change .plain { padding-inline-start: 0; border-inline-start: 0; padding-top: 12px; border-top: 1px dashed var(--line-2); }
  .calc { grid-template-columns: 1fr; }
  .calc-in { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .calc-out { grid-template-columns: 1fr; }
  .day { padding: 20px 16px; }
  .lanes, .ticks { display: none; }
  .day-list { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: grid; gap: 0; list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
  .day-list li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .day-list .num { font-family: var(--mono); font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
  .day-notes { grid-template-columns: 1fr; gap: 14px; }
  .bento > * { grid-column: 1 / -1; }
  .tk-grid { grid-template-columns: 1fr; }
  .sl-grid { grid-template-columns: 1fr; }
  .sl-plan { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .who { grid-template-columns: 1fr; }
  .who > div, .who > div + div { padding: 20px 0; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .lang-list, .lang-demo { grid-column: 1 / -1; }
  .lang-demo { margin-top: 24px; }
  .ld-fields { grid-template-columns: 1fr 1fr; }
  .ld-fields div:nth-child(2) { border-inline-end: 0; }
  .ld-fields div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .trust { grid-template-columns: 1fr; }
  .trust > article { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .trust > article:last-child { border-bottom: 0; }
  .resin { grid-template-columns: 1fr; }
  .resin-code { border-inline-start: 0; border-top: 1px solid var(--line-2); }
  .resin-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .resin-why-grid > div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .code-cols { grid-template-columns: 1fr; }
  .code-cols pre + pre { border-inline-start: 0; border-top: 1px solid var(--line); }
  .learn { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .plan:last-child { border-bottom: 0; }
  .found-copy, .found-panel { grid-column: 1 / -1; }
  .found-panel { margin-top: 32px; padding: 20px; }
  .faq-list { grid-column: 1 / -1; }
  .tour-frame { aspect-ratio: 4 / 5; }
  .labels { font-size: 9.5px; gap: 4px; }
}
/* Phones: My markets fits the screen. The range column goes (the table is a sample), the plan wraps. */
@media (max-width: 600px) {
  .m-markets th:nth-child(3), .m-markets td:nth-child(3) { display: none; }
  .m-markets th, .m-markets td { padding-inline: 8px; }
  .m-markets th:last-child, .m-markets td:last-child { white-space: normal; }
  .resin-why-grid { grid-template-columns: 1fr; row-gap: 0; margin-top: 8px; }
  .resin-why-grid > div, .resin-why-grid > div + div { padding: 16px 0; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .resin-why-grid > div:last-child { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 420px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-inline-end: 0; }
  .calc-in { grid-template-columns: 1fr; }
  .readout output { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}