/* Fluidora — landing page
   Tokens from the Fluidora design system (tokens.json). Light and dark are both first-class.
   Motif: the Slab tiles (radius-lg corners, space-2 gaps) and the quarter-circle arcs (space-12) cut into their corners. */

:root {
  --s0: #f7f5f0; --s1: #ffffff; --s2: #eeeae2;
  --ink: #1c2a2e; --muted: #566366; --faint: #8a9497;
  --line: #d9d4ca; --line-strong: #817c75;
  --brand: #0f6b6f; --brand-strong: #0b5256; --brand-soft: #d8eaea; --on-brand: #ffffff;
  --accent: #d98a1e; --accent-strong: #e39a2f; --on-accent: #1c2a2e; --accent-text: #8f5608;
  --success: #2c7a4e; --success-soft: #dcefe3; --warning: #9a5d0a; --warning-soft: #f8e8cc; --danger: #b53f2e;
  --focus: #0f6b6f; --tint: rgba(28, 42, 46, 0.06);
  --shadow-md: 0 4px 12px rgba(28, 42, 46, 0.10), 0 1px 2px rgba(28, 42, 46, 0.06);
  --sans: "Public Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --content: 1120px; --gutter: 48px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ground: var(--s0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s0: #14191b; --s1: #1c2326; --s2: #242d30;
    --ink: #ecebe6; --muted: #a5aeb0; --faint: #6f7a7c;
    --line: #2f3a3d; --line-strong: #6f7d84;
    --brand: #4fb3b6; --brand-strong: #6cc5c7; --brand-soft: #1b3a3d; --on-brand: #0f1719;
    --accent: #e9a13f; --accent-strong: #f0b45e; --on-accent: #1c2a2e; --accent-text: #e9a13f;
    --success: #5fbf85; --success-soft: #1d3a2a; --warning: #e0a03a; --warning-soft: #3d2f14; --danger: #e5705f;
    --focus: #4fb3b6; --tint: rgba(236, 235, 230, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  --s0: #14191b; --s1: #1c2326; --s2: #242d30;
  --ink: #ecebe6; --muted: #a5aeb0; --faint: #6f7a7c;
  --line: #2f3a3d; --line-strong: #6f7d84;
  --brand: #4fb3b6; --brand-strong: #6cc5c7; --brand-soft: #1b3a3d; --on-brand: #0f1719;
  --accent: #e9a13f; --accent-strong: #f0b45e; --on-accent: #1c2a2e; --accent-text: #e9a13f;
  --success: #5fbf85; --success-soft: #1d3a2a; --warning: #e0a03a; --warning-soft: #3d2f14; --danger: #e5705f;
  --focus: #4fb3b6; --tint: rgba(236, 235, 230, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--s0); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
abbr { text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.mono { font-family: var(--mono); }
.wrap { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
section[id], footer[id] { scroll-margin-top: 72px; }

/* type scale */
.display-xl { font-size: 64px; line-height: 68px; font-weight: 700; letter-spacing: -0.03em; }
.display-l  { font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.02em; }
.display-m  { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; }
.heading-1  { font-size: 24px; line-height: 30px; font-weight: 600; }
.heading-2  { font-size: 20px; line-height: 26px; font-weight: 600; }
.heading-3  { font-size: 16px; line-height: 22px; font-weight: 600; }
.body-l     { font-size: 17px; line-height: 26px; }
.body-s     { font-size: 13px; line-height: 18px; }
.caption    { font-size: 12px; line-height: 16px; color: var(--muted); }
.data-s     { font-family: var(--mono); font-size: 12px; line-height: 16px; }
.muted      { color: var(--muted); }

.kicker { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 20px; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease) 120ms; }
.in .kicker::before, .kicker.in::before { transform: scaleX(1); }

.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic-16 { width: 16px; height: 16px; }
.ic-12 { width: 12px; height: 12px; }

/* ---------- the Slab mark ---------- */
.slab { flex: none; }
.slab .s-brand { fill: var(--brand); }
.slab .s-ground { fill: var(--s0); }
.slab .s-accent { fill: var(--accent); }
.slab .s-ink { fill: var(--ink); }
.slab .s-soft { fill: var(--brand-soft); }
.slab .s-arc { transform-box: fill-box; transform-origin: var(--ox) var(--oy); animation: arcin 520ms var(--ease) both; animation-delay: 700ms; }
.brand:hover .slab .s-arc { animation: arcpop 520ms var(--ease); }
@keyframes arcin { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes arcpop { 0% { transform: scale(1); } 40% { transform: scale(0); } 100% { transform: scale(1); } }

/* arcs on HTML tiles: a quarter disc centred on a corner */
.arc { position: absolute; width: 48px; height: 48px; pointer-events: none; transform: scale(0); transition: transform 640ms var(--ease) 240ms; z-index: 0; }
.arc.br { right: 0; bottom: 0; border-top-left-radius: 100%; transform-origin: 100% 100%; }
.arc.bl { left: 0; bottom: 0; border-top-right-radius: 100%; transform-origin: 0 100%; }
.arc.tl { left: 0; top: 0; border-bottom-right-radius: 100%; transform-origin: 0 0; }
.arc.tr { right: 0; top: 0; border-bottom-left-radius: 100%; transform-origin: 100% 0; }
.a-ground { background: var(--ground); }
.a-brand { background: var(--brand); }
.a-soft { background: var(--brand-soft); }
.a-accent { background: var(--accent); }
.in .arc, .in.arc { transform: scale(1); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 15px; line-height: 22px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; }
.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-brand:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { background: var(--tint); color: var(--ink); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; line-height: 18px; }
.btn-inverse { background: var(--s0); color: var(--ink); }
.btn-inverse:hover { background: var(--s2); color: var(--ink); }
.btn-inverse-line { background: transparent; color: var(--s0); border-color: var(--line-strong); }
.btn-inverse-line:hover { background: rgba(255, 255, 255, 0.08); color: var(--s0); }
.btn .ic { transition: transform 160ms var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn:hover .ic.down { transform: translateY(3px); }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 13px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.badge-soft { background: var(--brand-soft); color: var(--brand); }
.badge-plain { background: var(--s2); color: var(--muted); }
.badge-ok { background: var(--success-soft); color: var(--success); }
.badge-accent { background: var(--accent); color: var(--on-accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-ok { color: var(--ink); } }
:root[data-theme="dark"] .badge-ok { color: var(--ink); }

/* announcement line */
.announce { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--brand); }
.announce .pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); position: relative; flex: none; }
.announce .pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 1px solid var(--brand); animation: ring 2.4s var(--ease) infinite; }
.announce.inverse { color: var(--s0); }
.announce.inverse .pulse { background: var(--accent); }
.announce.inverse .pulse::after { border-color: var(--accent); }
@keyframes ring { 0% { transform: scale(0.4); opacity: 0.9; } 70% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(1.2); opacity: 0; } }

/* textures */
.grain { position: absolute; inset: 0; opacity: 0.05; pointer-events: none; mix-blend-mode: multiply; }
.dots { position: absolute; inset: 0; left: 50%; opacity: 0.25; pointer-events: none; background-image: radial-gradient(circle, var(--line-strong) 1.5px, transparent 1.6px); background-size: 24px 24px; background-position: 0 calc(var(--sp, 0) * -72px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grain { mix-blend-mode: screen; } }
:root[data-theme="dark"] .grain { mix-blend-mode: screen; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--s0); border-bottom: 1px solid transparent; transition: border-color 200ms ease-out; }
.nav.scrolled { border-bottom-color: var(--line); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--brand); transform: scaleX(var(--scroll, 0)); transform-origin: left; transition: transform 80ms linear; }
.nav-inner { height: 64px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-name { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav-link { color: var(--ink); font-size: 13px; line-height: 16px; font-weight: 500; padding: 8px 10px; border-radius: var(--radius-sm); }
.nav-link:hover { color: var(--ink); background: var(--tint); }
.nav-spacer { flex-grow: 1; }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.lang { font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); padding: 8px 10px; border-radius: var(--radius-sm); }
.lang:hover { color: var(--ink); background: var(--tint); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; align-items: center; justify-content: center; cursor: pointer; }
.nav-menu { display: none; }

/* slogan line in the final block */
.cover-tag.inverse { color: var(--line); font-family: var(--mono); font-size: 12px; line-height: 16px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-inner { padding-top: 96px; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: start; position: relative; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero h1 { max-width: 14ch; }
.hero h1 .em { color: var(--brand); }
.hero .lead { font-size: 17px; line-height: 26px; color: var(--muted); max-width: 56ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: 13px; line-height: 18px; color: var(--muted); max-width: 52ch; }
.w { display: inline-block; }

/* plan figure */
.plan { background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 88px; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plan-title { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.plan-grid { display: grid; grid-template-columns: 72px repeat(8, minmax(0, 1fr)); gap: 8px; align-items: center; }
.plan-grid.head { align-items: end; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.plan-grid .wk { font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--muted); }
.plan-grid .wk.now { color: var(--ink); font-weight: 500; display: flex; flex-direction: column; align-items: flex-start; }
.now-pin { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--accent-text); margin-bottom: 4px; white-space: nowrap; }
.now-pin::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.plan-grid .who { font-weight: 500; font-size: 14px; }
.bar { display: block; height: 8px; border-radius: 3px; background: var(--s2); overflow: hidden; transition: box-shadow 600ms ease-out; }
.bar i { display: block; height: 100%; width: min(var(--w), 100%); background: var(--brand); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 640ms var(--ease), width 700ms var(--ease), background-color 300ms ease-out; transition-delay: var(--d, 0ms); }
.bar i.over { background: var(--warning); }
.in .bar i, .bars-in .bar i { transform: scaleX(1); }
.bar.changed { box-shadow: 0 0 0 3px var(--brand-soft); transition: box-shadow 300ms ease-out; }
.plan-foot { padding-top: 6px; font-size: 13px; line-height: 18px; color: var(--muted); display: flex; gap: 12px; align-items: baseline; }
.plan-foot .plan-step { color: var(--brand); flex: none; font-size: 12px; }
.plan-foot [data-plan-foot] { transition: opacity 260ms ease-out, transform 260ms var(--ease); }
.plan-foot.swap [data-plan-foot] { opacity: 0; transform: translateY(4px); }

/* ---------- sections ---------- */
.section { position: relative; --ground: var(--s0); }
.section-inner { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 56px; }
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.section-head p { font-size: 17px; line-height: 26px; color: var(--muted); }
.section.tone-1 { background: var(--s1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); --ground: var(--s1); }
.rule { height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease); }
.rule.in { transform: scaleX(1); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.split.top { align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-s { display: flex; flex-direction: column; gap: 12px; }

/* bites: the logo's quarter circle, cut into a band's corner */
.bite-tl::before, .bite-tr::before, .bite-bl::before { content: ""; position: absolute; width: 96px; height: 96px; background: var(--s0); transform: scale(0); transition: transform 800ms var(--ease) 100ms; z-index: 1; pointer-events: none; }
.bite-tl::before { left: 0; top: -1px; border-bottom-right-radius: 100%; transform-origin: 0 0; }
.bite-tr::before { right: 0; top: -1px; border-bottom-left-radius: 100%; transform-origin: 100% 0; }
.bite-bl::before { left: 0; bottom: -1px; border-top-right-radius: 100%; transform-origin: 0 100%; }
.bite-tl.in::before, .bite-tr.in::before, .bite-bl.in::before { transform: scale(1); }

/* ladder: numbered rows, no cards */
.ladder { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.vrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) 280px; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--line); transition: opacity 320ms ease-out; }
.vrow.dim { opacity: 0.72; }
.vnum { font-size: 32px; line-height: 38px; color: var(--line-strong); transition: color 320ms ease-out, transform 320ms var(--ease); }
.vrow.active .vnum { color: var(--brand); transform: translateX(4px); }
.vbody { display: flex; flex-direction: column; gap: 10px; }
.vbody p { color: var(--muted); max-width: 64ch; }
.vagainst { font-size: 13px; line-height: 18px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.vagainst .lbl { font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--accent-text); }
.ladder.tight .vrow { grid-template-columns: 48px minmax(0, 1fr); padding: 28px 0; }
.ladder.tight .vnum { font-size: 24px; line-height: 30px; }

/* scenes */
.scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.scene { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.scene .when { color: var(--accent-text); font-weight: 500; }
.scene .ask { font-size: 20px; line-height: 28px; font-weight: 600; }
.scene .ans { color: var(--muted); }
.scene .via { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 8px; }

/* chain diagram */
.chain { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr; gap: 12px; align-items: stretch; }
.chain .node { position: relative; background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 8px; transition: transform 300ms var(--ease), border-color 300ms ease-out, box-shadow 300ms ease-out; }
.chain .node > *:not(.arc) { position: relative; z-index: 1; }
.chain .node .arc { z-index: 0; }
.chain .node .t { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.chain .node .t .fr { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 400; }
.chain .node p { color: var(--muted); font-size: 13px; line-height: 18px; }
.chain .node .ex { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--brand); background: var(--brand-soft); border-radius: var(--radius-xs); padding: 4px 6px; align-self: flex-start; }
.chain .arrow { display: flex; align-items: center; justify-content: center; color: var(--line-strong); transition: transform 300ms var(--ease), color 300ms ease-out; }
.chain .node.out { background: var(--warning-soft); }
.chain .node.out .ex { background: var(--s1); color: var(--warning); }
.chain .node.lit { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 0 0 3px var(--brand-soft); }
.chain .node.out.lit { border-color: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.chain .arrow.lit { color: var(--brand); transform: translateX(3px); }

/* definitions */
.defs { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); }
.def { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.def dt { font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.def dt .fr { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 400; }
.def dd { color: var(--muted); font-size: 14px; line-height: 20px; }
.def dd b { color: var(--ink); font-weight: 500; }

/* projections */
.proj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-bottom: 1px solid var(--line); }
.proj li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.proj li .t { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.proj li .t .ic { color: var(--brand); }
.proj li p { color: var(--muted); font-size: 13px; line-height: 18px; }

/* ---------- switchboard ---------- */
.sw { height: 2800px; }
.sw-sticky { position: sticky; top: 64px; height: 720px; display: flex; align-items: center; }
.steps { display: flex; flex-direction: column; gap: 20px; }
.step { border-left: 2px solid var(--line); padding-left: 16px; display: flex; flex-direction: column; gap: 4px; opacity: 0.75; transition: border-color 200ms ease-out, opacity 200ms ease-out; }
.step .t { font-weight: 600; }
.step .d { color: var(--muted); }
.sw .step-0 { opacity: 1; border-left-color: var(--brand); }
.sw.s1 .step-0 { opacity: 0.75; border-left-color: var(--line); }
.sw.s1 .step-1 { opacity: 1; border-left-color: var(--brand); }
.sw.s2 .step-1 { opacity: 0.75; border-left-color: var(--line); }
.sw.s2 .step-2 { opacity: 1; border-left-color: var(--brand); }
.sw.s3 .step-2 { opacity: 0.75; border-left-color: var(--line); }
.sw.s3 .step-3 { opacity: 1; border-left-color: var(--brand); }
.sub-line { font-family: var(--mono); font-size: 14px; line-height: 20px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 8px; }
.sub-line .on { color: var(--brand); }
.need-1, .need-2, .need-3 { opacity: 0; transform: translateY(6px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); transition-delay: var(--d, 0ms); }
.sw.s1 .need-1, .sw.s2 .need-2, .sw.s3 .need-3 { opacity: 1; transform: none; }
.until-1, .until-2, .until-3 { transition: opacity 200ms ease-out; }
.sw.s1 .until-1, .sw.s2 .until-2, .sw.s3 .until-3 { opacity: 0; pointer-events: none; position: absolute; }
.sw.s1 .over-1, .sw.s2 .over-2 { background: var(--warning-soft); }
.sw.s1 .bar i { transform: scaleX(1); }
.board { background: var(--s0); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.board-mods { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.board-mod { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: var(--muted); }
.board-grid { display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr)) 64px; gap: 12px; align-items: center; position: relative; }
.board-grid.head { align-items: end; padding: 8px 0; border-bottom: 1px solid var(--line); }
.board-grid .wk { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); }
.board-grid .wk.now { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.board-grid .wk.now::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.board-grid .who { font-weight: 500; }
.cellv { display: flex; flex-direction: column; gap: 4px; border-radius: var(--radius-sm); padding: 4px; margin: -4px; }
.cellv .n { font-family: var(--mono); font-size: 12px; line-height: 16px; display: flex; align-items: center; gap: 4px; position: relative; white-space: nowrap; }
.cellv .n .w2 { color: var(--warning); display: inline-flex; align-items: center; gap: 4px; }
.cellv .n .sp { color: var(--muted); }
.bar2 { display: block; height: 4px; border-radius: 2px; background: var(--s2); overflow: hidden; }
.bar2 i { display: block; height: 100%; width: min(var(--w), 100%); background: var(--line-strong); border-radius: 2px; }
.cap { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); text-align: right; position: relative; }
.cap .real { color: var(--ink); }
.board-foot { position: relative; min-height: 36px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--muted); }
.tg { display: inline-flex; width: 32px; height: 18px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line-strong); padding: 2px; flex: none; transition: background-color 120ms ease-out, border-color 120ms ease-out; }
.tg i { display: block; width: 12px; height: 12px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line-strong); transition: transform 180ms var(--ease); }
.tg.on, .sw.s1 .tg-1, .sw.s2 .tg-2, .sw.s3 .tg-3 { background: var(--brand); border-color: var(--brand); }
.tg.on i, .sw.s1 .tg-1 i, .sw.s2 .tg-2 i, .sw.s3 .tg-3 i { transform: translateX(14px); background: var(--on-brand); border-color: var(--brand); }
.tg.lock { background: var(--brand-soft); border-color: var(--line); }
.tg.lock i { transform: translateX(14px); background: var(--brand); border-color: var(--brand); }

/* ---------- statement + ruler ---------- */
.statement { padding-top: 112px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 32px; }
.statement h2 { font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.03em; max-width: 880px; }
.statement h2 .dim { color: var(--muted); }
.statement .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; max-width: 1000px; }
.statement .cols p { font-size: 17px; line-height: 26px; color: var(--muted); }
.wipe { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease); transition-delay: var(--d, 0ms); }
.rv.in .wipe { clip-path: inset(0 -2% 0 0); }
.ruler-wrap { overflow: hidden; padding-bottom: 96px; }
.ruler { --sp: 0; width: 1800px; margin-left: calc(50% - 560px); transform: translateX(calc(-160px * var(--sp))); display: flex; flex-direction: column; gap: 12px; }
.ruler .ticks { display: grid; grid-template-columns: repeat(12, 150px); border-top: 1px solid var(--line-strong); padding-top: 8px; }
.ruler .ticks span { font-family: var(--mono); font-size: 14px; line-height: 20px; color: var(--muted); border-left: 1px solid var(--line-strong); padding-left: 8px; }
.ruler .ticks span.now { color: var(--ink); font-weight: 500; border-left: 2px solid var(--accent); }
.ruler .lanes { display: grid; grid-template-columns: repeat(12, 150px); gap: 8px 0; align-content: start; }
.ruler .seg { height: 36px; border-radius: var(--radius-sm); background: var(--brand-soft); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; gap: 10px; font-size: 13px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.ruler .seg .r { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--brand); font-weight: 400; }
.ruler .seg.plain { background: var(--s1); }
.ruler .seg.warn { background: var(--warning-soft); }
.ruler .seg.warn .r { color: var(--warning); }
.rv-x { transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease); transition-delay: var(--d, 0ms); }
.rv-x.in { transform: scaleX(1); }

/* ---------- intelligence demo ---------- */
.ai-demo { background: var(--s0); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; }
.demo-tag { align-self: flex-start; }
.chat { display: flex; flex-direction: column; gap: 16px; }
.chat-row { display: flex; flex-direction: column; gap: 6px; }
.chat-who { font-size: 12px; line-height: 16px; color: var(--muted); }
.chat-bubble { background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; font-size: 15px; line-height: 22px; display: inline-block; max-width: 100%; }
.chat-row.user .chat-bubble { border-top-left-radius: var(--radius-xs); min-height: 46px; min-width: 60%; }
.chat-row.sys .chat-bubble { background: var(--s2); border-color: transparent; }
.chat-bubble.small { font-size: 12px; line-height: 16px; color: var(--muted); }
.caret { display: inline-block; width: 1px; height: 1em; background: var(--ink); margin-left: 2px; vertical-align: -0.15em; opacity: 0; }
.ai-demo.typing .caret { opacity: 1; animation: blink 900ms steps(2, start) infinite; }
@keyframes blink { to { opacity: 0; } }
.cands { display: flex; flex-direction: column; gap: 8px; }
.cand { display: grid; grid-template-columns: 28px minmax(0, 1fr) 80px auto; gap: 12px; align-items: center; justify-items: start; background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; }
.cand .rank { font-size: 12px; line-height: 16px; color: var(--muted); width: 22px; height: 22px; border-radius: 999px; background: var(--s2); display: inline-flex; align-items: center; justify-content: center; }
.cand:first-child .rank { background: var(--brand-soft); color: var(--brand); }
.cand-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cand-name { font-weight: 600; }
.cand-why { font-size: 12px; line-height: 16px; color: var(--muted); }
.score { display: block; height: 6px; border-radius: 3px; background: var(--s2); overflow: hidden; }
.score i { display: block; height: 100%; width: var(--w); background: var(--brand); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease) 200ms; }
.chat-note { font-size: 12px; line-height: 16px; color: var(--muted); padding-top: 4px; }
.ai-demo [data-ai-step] { opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
.ai-demo [data-ai-step].on { opacity: 1; transform: none; }
.ai-demo [data-ai-step].on .score i { transform: scaleX(1); }

/* ---------- modules mosaic ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; line-height: 18px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.legend .sw-soft { background: var(--brand-soft); }
.legend .sw-brand { background: var(--brand); }
.legend .sw-ink { background: var(--ink); }
.legend .sw-ghost { border: 1px dashed var(--line-strong); }
.mosaic-map { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 8px; }
.mtile { position: relative; border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; transition: transform 200ms var(--ease), opacity 520ms var(--ease); }
.mtile:hover { transform: translateY(-2px); }
.mtile > *:not(.arc) { position: relative; z-index: 1; }
.mtile .arc { z-index: 0; }
.mtile .mt { font-weight: 600; font-size: 16px; line-height: 22px; }
.mtile .md { font-size: 12px; line-height: 16px; }
.mtile.wide { grid-column: span 2; }
.mtile.big { grid-column: span 2; grid-row: span 2; padding: 20px; }
.mtile.big .mt { font-size: 24px; line-height: 30px; }
.mtile.big .md { font-size: 14px; line-height: 20px; }
.mtile.big .badge { align-self: flex-start; margin-top: auto; }
.t-soft { background: var(--brand-soft); color: var(--ink); }
.t-soft .md { color: var(--ink); opacity: 0.8; }
.t-brand { background: var(--brand); color: var(--on-brand); }
.t-brand .md { color: var(--on-brand); opacity: 0.85; }
.t-ink { background: var(--ink); color: var(--s0); }
.t-ink .md { color: var(--s0); opacity: 0.75; }
.t-accent { background: var(--accent); color: var(--on-accent); }
.t-ghost { border: 1px dashed var(--line-strong); color: var(--muted); justify-content: center; }
.t-ghost .mt { font-weight: 500; font-size: 15px; }

/* ---------- foundation diagram ---------- */
.found { display: flex; flex-direction: column; }
.found .top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.found .top .node { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--s0); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.found .top .node .t { font-weight: 600; }
.found .top .node .id { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); }
.found .wires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; height: 72px; }
.found .wires > div { position: relative; }
.found .wires > div::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); transform: scaleY(0); transform-origin: top; transition: transform 700ms var(--ease); }
.found .wires.in > div::before { transform: scaleY(1); }
.found .wires > div::after { content: ""; position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3px; border-radius: 999px; background: var(--brand); opacity: 0; }
.found .wires.in > div::after { animation: travel 2.6s var(--ease) infinite; animation-delay: var(--td, 0ms); }
.found .wires.in > div:nth-child(1)::after { --td: 600ms; }
.found .wires.in > div:nth-child(2)::after { --td: 1400ms; }
.found .wires.in > div:nth-child(3)::after { --td: 2200ms; }
@keyframes travel { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 48% { top: calc(100% - 7px); opacity: 1; } 60% { opacity: 0; } 61% { top: calc(100% - 7px); opacity: 0; } 70% { opacity: 1; } 96% { top: 0; opacity: 1; } 100% { top: 0; opacity: 0; } }
.found .wires .lbl { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); padding: 0 8px; background: var(--s1); font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity 400ms ease-out 500ms; }
.found .wires.in .lbl { opacity: 1; }
.found .base { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--brand-soft); padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; overflow: hidden; }
.found .base .node { position: relative; z-index: 1; background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.found .base .node .t { font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.found .base .node .id { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); }
.found .base .node p { color: var(--muted); font-size: 13px; line-height: 18px; }

/* rules */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-bottom: 1px solid var(--line); }
.rulec { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.rulec .num { font-size: 14px; line-height: 20px; color: var(--brand); flex: none; width: 28px; padding-top: 2px; }
.rulec h3 { font-size: 17px; line-height: 24px; font-weight: 600; margin-bottom: 6px; }
.rulec p { color: var(--muted); }

/* principles */
.princ { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.prin { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.prin p { color: var(--muted); }
.prin .ex { font-size: 12px; line-height: 16px; color: var(--muted); border-left: 2px solid var(--line-strong); padding-left: 10px; margin-top: auto; }
.ornament { position: relative; width: 56px; height: 56px; border-radius: var(--radius-lg); display: block; overflow: hidden; transition: transform 300ms var(--ease); }
.ornament .arc { width: 32px; height: 32px; }
.prin:hover .ornament { transform: rotate(-6deg); }

/* ---------- timeline ---------- */
.timeline { --sp: 0; position: relative; display: flex; flex-direction: column; gap: 28px; }
.track { position: relative; height: 2px; background: var(--line); }
.track .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--brand); transform: scaleX(var(--sp)); transform-origin: left; transition: transform 120ms linear; }
.stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.stop { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; opacity: 0.8; transform: translateY(6px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.stop.on { opacity: 1; transform: none; }
.stop .dot { position: absolute; left: 0; top: -37px; width: 14px; height: 14px; border-radius: 999px; background: var(--s0); border: 2px solid var(--line-strong); transition: background-color 200ms ease-out, border-color 200ms ease-out, transform 200ms var(--ease); }
.stop.on .dot { background: var(--brand); border-color: var(--brand); transform: scale(1.15); }
.stop[data-stop="1"].on .dot { background: var(--accent); border-color: var(--accent); }
.stop-when { font-size: 12px; line-height: 16px; color: var(--muted); }
.stop p { color: var(--muted); }
.stop .btn, .stop .badge { align-self: flex-start; margin-top: 4px; }

/* faq */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; font-size: 17px; line-height: 26px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--muted); transition: transform 200ms ease-out; }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq .a { padding: 0 0 24px; color: var(--muted); max-width: 70ch; overflow: hidden; }

/* cta */
.cta { background: var(--ink); color: var(--s0); }
.cta .section-inner { gap: 0; }
.cta .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cta h2 { font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.03em; max-width: 640px; }
.cta p { font-size: 17px; line-height: 26px; color: var(--line); max-width: 520px; }
.cta .actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.receipt { font-family: var(--mono); font-size: 14px; line-height: 24px; color: var(--line); border-left: 1px solid var(--line-strong); padding-left: 24px; display: flex; flex-direction: column; gap: 4px; white-space: pre; }
.receipt .ln { display: block; opacity: 0; transform: translateX(-6px); transition: opacity 360ms var(--ease), transform 360ms var(--ease); transition-delay: var(--d, 0ms); }
.receipt.in .ln { opacity: 1; transform: none; }
.receipt .on { color: var(--s0); }
.receipt .lit { color: var(--accent); }
.receipt .off { color: var(--faint); }

/* footer */
.footer { padding: 32px 0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; line-height: 16px; font-weight: 500; }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes wordin { from { opacity: 0; transform: translateY(0.55em); } to { opacity: 1; transform: none; } }
@keyframes pin { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.h-in { opacity: 0; animation: rise 560ms var(--ease) both; animation-delay: var(--d, 0ms); }
.w { opacity: 0; animation: wordin 620ms var(--ease) both; animation-delay: var(--d, 0ms); }
.h-pin { opacity: 0; animation: pin 420ms var(--ease) both; animation-delay: var(--d, 0ms); }
.rv { opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .h-in, .w, .h-pin, .slab .s-arc { animation: none; opacity: 1; transform: none; }
  .rv, .rv-x, .rule, .wipe { opacity: 1; transform: none; transition: none; clip-path: none; }
  .bar i, .score i { transform: scaleX(1); transition: none; }
  .ruler { transform: none; }
  .arc, .bite-tl::before, .bite-tr::before, .bite-bl::before { transform: scale(1); transition: none; }
  .announce .pulse::after, .found .wires.in > div::after { animation: none; }
  .found .wires > div::before { transform: none; }
  .found .wires .lbl, .receipt .ln, .ai-demo [data-ai-step], .stop { opacity: 1; transform: none; transition: none; }
  .vrow.dim { opacity: 1; }
  .track .fill { transform: none; }
  .bar.changed { box-shadow: none; }
  .mtile:hover, .chain .node.lit, .chain .arrow.lit, .prin:hover .ornament { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .chain { grid-template-columns: 1fr; }
  .chain .arrow { transform: rotate(90deg); height: 24px; }
  .chain .arrow.lit { transform: rotate(90deg) translateX(3px); }
  .mosaic-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  :root { --gutter: 20px; }
  .display-xl { font-size: 44px; line-height: 48px; }
  .display-l { font-size: 32px; line-height: 38px; }
  .display-m { font-size: 24px; line-height: 30px; }
  .statement h2 { font-size: 36px; line-height: 40px; }
  .cta h2 { font-size: 34px; line-height: 38px; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; gap: 40px; }
  .plan { position: static; padding: 16px; }
  .section-inner { padding-top: 64px; padding-bottom: 64px; gap: 36px; }
  .split, .split.top, .cta .split, .scenes, .princ, .stops, .rules, .proj, .statement .cols { grid-template-columns: 1fr; gap: 32px; }
  .vrow { grid-template-columns: 40px minmax(0, 1fr); }
  .vagainst { grid-column: 2; }
  .vnum { font-size: 24px; line-height: 30px; }
  .def { grid-template-columns: 1fr; gap: 6px; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-menu.open { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 16px; border-top: 1px solid var(--line); }
  .nav-menu.open a { padding: 10px 8px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); border-radius: var(--radius-sm); }
  .plan-grid { grid-template-columns: 56px repeat(8, minmax(0, 1fr)); gap: 5px; }
  .plan-grid .wk { font-size: 10px; }
  .now-pin { font-size: 10px; }
  .sw { height: auto; }
  .sw-sticky { position: static; height: auto; padding: 0; }
  .sw .need-1, .sw .need-2, .sw .need-3 { opacity: 1; transform: none; }
  .sw .until-1, .sw .until-2, .sw .until-3 { display: none; }
  .sw .over-1, .sw .over-2 { background: var(--warning-soft); }
  .sw .bar i { transform: scaleX(1); }
  .sw .tg-1, .sw .tg-2, .sw .tg-3 { background: var(--brand); border-color: var(--brand); }
  .sw .tg-1 i, .sw .tg-2 i, .sw .tg-3 i { transform: translateX(14px); background: var(--on-brand); border-color: var(--brand); }
  .sw .step { opacity: 1; border-left-color: var(--brand); }
  .board-grid { grid-template-columns: 64px repeat(4, minmax(0, 1fr)) 44px; gap: 6px; }
  .cellv .n { white-space: normal; flex-wrap: wrap; }
  .cellv .n .sp { flex-basis: 100%; }
  .ruler { margin-left: calc(50% - 975px); transform: translateX(calc(-100px * var(--sp))); }
  .mtile .arc { width: 32px; height: 32px; }
  .footer-links a { padding: 12px 0; }

  .ai-demo { position: static; }
  .cand { grid-template-columns: 28px minmax(0, 1fr); }
  .cand .score, .cand .btn { grid-column: 2; }
  .cand .score { width: 100%; }
  .mosaic-map { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 112px; }
  .mtile.wide, .mtile.big { grid-column: span 2; }
  .mtile.big { grid-row: span 2; }
  .track { display: none; }
  .stop .dot { display: none; }
  .stop { opacity: 1; transform: none; }
  .receipt { display: none; }
  .bite-tl::before, .bite-tr::before, .bite-bl::before { width: 56px; height: 56px; }
}