/* Base: tokens, header, footer, homepage sections and shared components.
   Layout: sticky header; hero on a 12-column grid, words in columns 1–5, a layered product scene in 6–12 on a soft tinted stage. */
:root {
  color-scheme:light;
  --paper:#FFFFFF; --mist:#F5F6F9; --frost:#EBEDF3; --line:#E2E5EC; --line-control:#8A90A2;
  --ink:#0B0D17; --ink-muted:#535A6D; --ink-subtle:#656B7F;
  --signal:#3D3DF5; --signal-hover:#2B2BD6; --signal-soft:#EEEEFF; --on-signal:#FFFFFF;
  --tint-rose:#FCE8F3; --tint-iris:#ECEBFF; --tint-sky:#E5EEFF; --tint-aqua:#DDF6F7;
  --rose-ink:#A3155F; --iris-ink:#3D3DF5; --sky-ink:#1F55D6; --aqua-ink:#0A6E73;
  --deep:#16144D; --deep-raised:#211F63; --deep-line:#34327A; --on-deep:#F4F3FF; --on-deep-muted:#B9B7E6; --signal-on-deep:#A9B0FF; --glow:#9FE8EE; --deep-gain:#7BE0BC;
  --gain:#0B7A5A; --gain-soft:#E3F4EE; --risk:#A64B07; --risk-soft:#FDF0E3;
  --stage:#EEEDFF; --stage-shape:#E3E2FF; --stage-shape-2:#DCE8FF; --stage-dot:#D3D1FA; --stage-edge:#E1DFFD;
  --shadow-card:0 1px 2px rgba(11,13,23,.04), 0 8px 24px rgba(11,13,23,.06);
  --shadow-float:0 2px 6px rgba(11,13,23,.05), 0 32px 72px -24px rgba(11,13,23,.22);
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r-sm:10px; --r-md:16px; --r-lg:28px; --page:1200px;
}
*, *::before, *::after { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--paper); }
a { color:inherit; }
:focus-visible { outline:2px solid var(--signal); outline-offset:2px; border-radius:6px; }
.wrap { max-width:calc(var(--page) + 96px); margin:0 auto; padding-left:max(48px, env(safe-area-inset-left,0px)); padding-right:max(48px, env(safe-area-inset-right,0px)); }

/* header */
.hdr { position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.hdr.scrolled { border-bottom-color:var(--line); }
.hdr .wrap { display:flex; align-items:center; gap:40px; height:76px; }
.logo img { display:block; height:24px; width:auto; }
.nav { display:flex; gap:4px; }
.nav a { padding:8px 12px; border-radius:8px; font-size:15px; font-weight:500; color:var(--ink-muted); text-decoration:none; transition:color .16s, background-color .16s; }
.nav a:hover { color:var(--ink); background:var(--mist); }
.hdr-end { margin-left:auto; display:flex; align-items:center; gap:20px; }
.signin { font-size:15px; font-weight:500; color:var(--ink-muted); text-decoration:none; }
.signin:hover { color:var(--ink); }
.btn { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 20px; border:0; border-radius:var(--r-sm); background:var(--signal); color:var(--on-signal); font:inherit; font-size:15px; font-weight:600; letter-spacing:-.005em; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color .16s; }
.btn:hover { background:var(--signal-hover); }
.btn-sm { height:38px; padding:0 16px; font-size:14px; }
.menu { display:none; height:38px; padding:0 14px; border:1px solid var(--line-control); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); font:inherit; font-size:14px; font-weight:600; }

/* hero */
.hero { padding-block:72px 120px; }
.hero .wrap { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; align-items:center; }
.words { grid-column:1 / span 6; display:flex; flex-direction:column; gap:28px; }
h1 { margin:0; max-width:12.5ch; font-size:clamp(46px, 5.2vw, 76px); line-height:.98; font-weight:500; letter-spacing:-.04em; text-wrap:balance; }
.sub { margin:0; max-width:30ch; font-size:21px; line-height:31px; color:var(--ink-muted); letter-spacing:-.005em; text-wrap:pretty; }
.capture { margin-top:8px; max-width:480px; }
.bar { display:flex; align-items:center; gap:8px; padding:6px 6px 6px 20px; background:var(--paper); border:1px solid var(--line-control); border-radius:999px; box-shadow:var(--shadow-card); transition:border-color .16s; }
.bar:focus-within { border-color:var(--signal); }
.bar input { flex:1; min-width:0; height:42px; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:16px; }
.bar input::placeholder { color:var(--ink-subtle); }
.bar .btn { border-radius:999px; }
.help { margin:12px 0 0 20px; font-size:14px; line-height:21px; color:var(--ink-subtle); }
.help.err { color:var(--risk); } .help.ok { color:var(--gain); }
.capture.bad .bar { border-color:var(--risk); }
.second { margin-top:-14px; font-size:15px; font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-control); text-underline-offset:5px; text-decoration-thickness:1px; align-self:flex-start; margin-left:20px; }
.second:hover { text-decoration-color:var(--ink); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* scene */
.scene { grid-column:7 / span 6; position:relative; aspect-ratio: 1 / 1.02; max-width:100%; }
.stage { position:absolute; inset:0 0 9% 7%; border-radius:var(--r-lg); background-color:var(--stage); background-image:radial-gradient(circle at 1px 1px, var(--stage-dot) 1px, transparent 1.5px); background-size:22px 22px; background-position:11px 11px; overflow:hidden; }
.stage::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--stage-edge); }
.stage svg { position:absolute; inset:0; width:100%; height:100%; }
.stage .s1 { fill:var(--stage-shape); } .stage .s2 { fill:var(--stage-shape-2); }

.win { position:absolute; left:0; top:7%; width:80%; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-card); overflow:hidden; }
.win-top { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:13px; font-weight:600; }
.win-top img { width:16px; height:16px; }
.win-top .crumb { color:var(--ink-subtle); font-weight:500; }
@media (min-width: 1081px) and (max-width: 1299px) { .win th.age, .win td.age { display:none; } }  /* the window is too narrow for the Age column here; hide it rather than cut it */
.tabs { display:flex; gap:18px; padding:12px 16px 0; font-size:12.5px; color:var(--ink-subtle); border-bottom:1px solid var(--line); }
.tabs span { padding-bottom:10px; border-bottom:2px solid transparent; }
.tabs .on { color:var(--ink); font-weight:600; border-color:var(--ink); }
.tabs b { font-weight:600; font-variant-numeric:tabular-nums; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th { text-align:left; font-weight:500; color:var(--ink-subtle); padding:10px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:11px 16px; border-bottom:1px solid var(--line); white-space:nowrap; color:var(--ink-muted); }
tr:last-child td { border-bottom:0; }
td.id { font-family:var(--mono); font-size:12px; color:var(--ink); }
td.age { font-variant-numeric:tabular-nums; text-align:right; } th.age { text-align:right; }
.chip { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:600; background:var(--frost); color:var(--ink-muted); transition:background-color .4s, color .4s; }
.chip.gain { background:var(--gain-soft); color:var(--gain); }
.chip.risk { background:var(--risk-soft); color:var(--risk); }
.chip svg { width:8px; height:8px; }
tr.flip td { transition:background-color .6s; }
tr.flip.lit td { background:var(--signal-soft); }

.card { position:absolute; right:-2%; bottom:0; width:62%; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-float); overflow:hidden; }
.card-top { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--line); font-size:13px; font-weight:600; }
.pill { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; background:var(--gain-soft); color:var(--gain); font-size:12px; font-weight:600; }
.pill svg { width:8px; height:8px; }
.card-body { padding:16px 18px 14px; display:flex; flex-direction:column; gap:12px; }
.metric { margin:0; font-size:13px; color:var(--ink-muted); font-weight:500; }
.figs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.fig b { display:block; font-size:clamp(22px, 2.4vw, 32px); line-height:1; font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.fig span { display:block; margin-top:6px; font-size:12px; color:var(--ink-subtle); }
.fig.now b { color:var(--signal); }
.chart { display:block; width:100%; height:auto; }
.chart .grid { stroke:var(--line); }
.chart .plan { fill:none; stroke:var(--ink-subtle); stroke-width:1.5; stroke-dasharray:4 5; }
.chart .actual { fill:none; stroke:var(--signal); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.chart .area { fill:var(--signal); opacity:.08; }
.chart .dot { fill:var(--paper); stroke:var(--signal); stroke-width:2.5; }
.chart .tick { fill:var(--ink-subtle); font-family:var(--sans); font-size:11px; }
.chart .target { stroke:var(--signal); stroke-width:1; opacity:.35; }
.card-foot { padding:10px 18px; border-top:1px solid var(--line); background:var(--mist); font-size:12px; color:var(--ink-subtle); display:flex; justify-content:space-between; gap:12px; }

.toast { position:absolute; right:-2%; top:2%; display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-float); font-size:13px; line-height:18px; max-width:300px; }
.toast i { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--gain-soft); color:var(--gain); }
.toast i svg { width:14px; height:14px; }
.toast b { display:block; font-weight:600; color:var(--ink); }
.toast span { color:var(--ink-subtle); }

/* the one orchestrated moment */
.play .actual { stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw 1.6s cubic-bezier(.4,0,.2,1) .5s forwards; }
.play .area, .play .dot { opacity:0; animation:fade .5s ease 1.9s forwards; }
.play .area { animation-name:fadeArea; }
.play .toast { opacity:0; transform:translateY(-8px); animation:drop .5s cubic-bezier(.2,.8,.2,1) 2.3s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes fade { to { opacity:1; } }
@keyframes fadeArea { to { opacity:.08; } }
@keyframes drop { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .play .actual, .play .area, .play .dot, .play .toast { animation:none; opacity:1; transform:none; stroke-dashoffset:0; } .play .area { opacity:.08; } }

.sample { position:absolute; left:7%; bottom:3%; margin:0; font-size:12px; color:var(--ink-subtle); }

@media (max-width: 1080px) {
  .nav, .signin { display:none; } .menu { display:inline-flex; align-items:center; }
  .hdr .wrap { gap:16px; }
  .hero .wrap { grid-template-columns:1fr; row-gap:56px; }
  .words, .scene { grid-column:1 / -1; }
  .scene { width:100%; max-width:720px; }
  .sub { max-width:36ch; }
}
@media (max-width: 640px) {
  .wrap { padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); }
  .hdr .btn-sm { display:none; }
  .hero { padding-block:40px 88px; }
  .sub { font-size:18px; line-height:28px; }
  .bar { flex-direction:column; align-items:stretch; border-radius:var(--r-md); padding:6px; }
  .bar input { padding:0 12px; }
  .bar .btn { border-radius:var(--r-sm); }
  .help, .second { margin-left:4px; }
  .scene { aspect-ratio:auto; display:flex; flex-direction:column; gap:16px; padding:20px 16px 24px; }
  .stage { inset:0; }
  .card { right:auto; }
  .win, .card, .toast { position:relative; inset:auto; width:auto; max-width:none; }
  .win { display:none; }
  .toast { order:2; }
  .sample { position:relative; order:3; margin:0 4px; }
}

/* problem: the three questions a CFO asks of any AI program */
.problem { padding-block:128px 136px; background:var(--mist); }
.problem-head { display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center; }
.problem h2 { max-width:13ch; margin:0; font-size:clamp(44px, 6.4vw, 92px); line-height:.98; font-weight:500; letter-spacing:-.032em; text-wrap:balance; }
.problem-lead { max-width:44ch; margin:0; font-size:20px; line-height:30px; color:var(--ink-muted); text-wrap:pretty; }
.qs { margin-top:96px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--ink); }
.q { display:flex; flex-direction:column; gap:20px; padding:28px 32px 8px 0; }
.q + .q { padding-left:32px; border-left:1px solid var(--line-soft, var(--line)); }
.q h3 { margin:0; font-size:22px; line-height:28px; font-weight:500; letter-spacing:-.014em; text-wrap:balance; }
.q-fig { font-size:clamp(52px, 5vw, 72px); line-height:1; font-weight:500; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.dots { display:grid; grid-template-columns:repeat(20, 1fr); gap:5px; max-width:280px; }
.dots i { aspect-ratio:1; border-radius:50%; background:var(--line); }
.dots i.on { background:var(--ink); }
.q p { margin:0; max-width:34ch; font-size:16px; line-height:25px; color:var(--ink-muted); }
.q cite { margin-top:auto; padding-top:8px; font-style:normal; font-size:13px; line-height:19px; color:var(--ink-subtle); }
.q cite a { text-decoration:underline; text-decoration-color:var(--line-control); text-underline-offset:3px; }
.q cite a:hover { color:var(--ink); }
.turn { margin-top:80px; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; align-items:baseline; }
.turn p { grid-column:1 / span 8; margin:0; font-size:clamp(24px, 2.4vw, 32px); line-height:1.3; font-weight:500; letter-spacing:-.02em; text-wrap:pretty; }
.turn p span { color:var(--ink-muted); }
.turn a { grid-column:10 / span 3; justify-self:end; font-size:15px; font-weight:600; text-decoration:underline; text-decoration-color:var(--line-control); text-underline-offset:5px; }
.turn a:hover { text-decoration-color:var(--ink); }
.research-note { margin:28px 0 0; font-size:13px; color:var(--ink-subtle); }
@media (max-width: 1080px) {
  .qs { grid-template-columns:1fr; border-top:0; margin-top:48px; }
  .q, .q + .q { padding:28px 0 32px; border-left:0; border-top:1px solid var(--ink); }
  .q h3 { min-height:0; }
  .turn p, .turn a { grid-column:1 / -1; justify-self:start; }
  .turn a { margin-top:20px; }
}
@media (max-width: 640px) { .problem { padding-block:80px 88px; } .turn { margin-top:56px; } }

/* answer: the deep band and the signature diagram */
.answer { padding-block:24px 24px; background:var(--mist); }
.band { position:relative; max-width:calc(var(--page) + 96px); margin:0 auto; padding:112px 48px 104px; background:var(--deep); color:var(--on-deep); border-radius:var(--r-lg); overflow:hidden; isolation:isolate; }
.band-in { max-width:var(--page); margin:0 auto; }
.answer-head { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; align-items:end; }
.answer h2 { grid-column:1 / span 7; margin:0; font-size:clamp(36px, 4vw, 56px); line-height:1.04; font-weight:500; letter-spacing:-.032em; color:var(--on-deep); text-wrap:balance; }
.answer-lead { grid-column:9 / span 4; margin:0; font-size:18px; line-height:28px; color:var(--on-deep-muted); }

.switch { margin-top:56px; display:inline-flex; gap:4px; padding:4px; border:1px solid var(--deep-line); border-radius:999px; }
.switch button { height:36px; padding:0 16px; white-space:nowrap; border:0; border-radius:999px; background:transparent; color:var(--on-deep-muted); font:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:background-color .2s, color .2s; }
.switch button:hover { color:var(--on-deep); }
.switch button[aria-pressed="true"] { background:var(--on-deep); color:var(--deep); }
.switch button:focus-visible { outline:2px solid var(--glow); outline-offset:2px; }

.flow { margin-top:28px; display:grid; grid-template-columns:minmax(0,1fr) 96px minmax(0,1.35fr) 96px minmax(0,1fr); align-items:stretch; }
.col-label { margin:0 0 14px; font-size:13px; font-weight:500; color:var(--on-deep-muted); }
.systems { display:flex; flex-direction:column; justify-content:space-between; }
.sys-list { display:grid; grid-template-rows:repeat(5, 1fr); gap:10px; flex:1; }
.sys { display:flex; align-items:center; gap:10px; padding:0 14px; min-height:46px; border:1px solid var(--deep-line); border-radius:12px; background:var(--deep-raised); font-size:14px; color:var(--on-deep); }
.sys i { width:7px; height:7px; border-radius:50%; background:var(--signal-on-deep); box-shadow:0 0 0 4px rgba(169,176,255,.12); }
.wire { position:relative; margin-top:31px; }
.wire svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wire .rail { fill:none; stroke:var(--deep-line); stroke-width:1.25; vector-effect:non-scaling-stroke; }
.wire .pulse { fill:none; stroke:var(--glow); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:8 160; stroke-dashoffset:168; animation:run 2.8s linear infinite; }
.wire .pulse:nth-of-type(2n) { animation-delay:.7s; } .wire .pulse:nth-of-type(3n) { animation-delay:1.4s; } .wire .pulse:nth-of-type(5n) { animation-delay:2.1s; }
@keyframes run { from { stroke-dashoffset:168; } to { stroke-dashoffset:0; } }

.core { display:flex; flex-direction:column; }
.trust { position:relative; flex:1; display:flex; flex-direction:column; gap:10px; padding:44px 14px 14px; border:1px solid var(--signal-on-deep); border-radius:20px; background:rgba(169,176,255,.06); }
.trust-tag { position:absolute; top:14px; left:16px; right:16px; display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--on-deep-muted); }
.trust-tag b { color:var(--on-deep); font-weight:600; }
.layer { flex:1; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:14px 16px; border-radius:12px; background:var(--deep-raised); border:1px solid var(--deep-line); }
.layer b { font-size:16px; font-weight:600; color:var(--on-deep); }
.layer span { font-size:13.5px; line-height:19px; color:var(--on-deep-muted); }
.layer.run { border-color:rgba(159,232,238,.45); }

.outcome { display:flex; flex-direction:column; }
.num { flex:1; display:flex; flex-direction:column; gap:14px; padding:20px; border:1px solid var(--deep-line); border-radius:20px; background:var(--deep-raised); }
.num-metric { font-size:14px; color:var(--on-deep); font-weight:500; }
.num-move { display:flex; align-items:baseline; gap:10px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.num-from { font-size:22px; color:var(--on-deep-muted); letter-spacing:-.02em; }
.num-arrow { color:var(--on-deep-muted); }
.num-to { font-size:clamp(40px, 4vw, 56px); line-height:1; font-weight:500; letter-spacing:-.04em; color:var(--glow); }
.num-unit { font-size:14px; color:var(--on-deep-muted); }
.spark { width:100%; height:64px; display:block; margin-top:auto; }
.spark .plan { fill:none; stroke:var(--on-deep-muted); stroke-width:1.25; stroke-dasharray:3 4; opacity:.6; vector-effect:non-scaling-stroke; }
.spark .act { fill:none; stroke:var(--glow); stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.num-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--on-deep-muted); }
.deep-pill { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; background:rgba(123,224,188,.14); color:var(--deep-gain); font-size:12px; font-weight:600; }
.deep-pill svg { width:8px; height:8px; }

.answers { margin-top:72px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--deep-line); }
.a { padding:28px 32px 0 0; display:flex; flex-direction:column; gap:12px; }
.a + .a { padding-left:32px; border-left:1px solid var(--deep-line); }
.a small { font-size:13px; color:var(--on-deep-muted); }
.a h3 { margin:0; font-size:22px; line-height:28px; font-weight:500; letter-spacing:-.014em; color:var(--on-deep); }
.a p { margin:0; max-width:36ch; font-size:16px; line-height:25px; color:var(--on-deep-muted); }
.band-note { margin:40px 0 0; font-size:13px; color:var(--on-deep-muted); }

@media (max-width: 1080px) {
  .band { padding:80px 32px 72px; margin-inline:24px; }
  .answer h2, .answer-lead { grid-column:1 / -1; }
  .answer-lead { margin-top:20px; max-width:52ch; }
  .flow { grid-template-columns:1fr; gap:0; }
  .wire { height:40px; margin:0; }
  .wire svg { display:none; }
  .wire::before { content:""; position:absolute; left:50%; top:6px; bottom:6px; border-left:1.25px dashed var(--deep-line); }
  .sys-list { display:flex; flex-wrap:wrap; gap:8px; }
  .sys { min-height:40px; }
  .trust { padding-top:52px; }
  .answers { grid-template-columns:1fr; border-top:0; }
  .a, .a + .a { padding:24px 0 28px; border-left:0; border-top:1px solid var(--deep-line); }
}
@media (max-width: 640px) {
  .answer { padding-block:16px; }
  .band { margin-inline:12px; padding:64px 20px 56px; border-radius:22px; }
  .switch { display:flex; flex-wrap:wrap; border-radius:16px; }
  .switch button { flex:1; padding:0 10px; }
  .trust-tag { position:static; flex-direction:column; gap:2px; margin:0 2px 4px; }
  .trust { padding-top:16px; }
}
@media (prefers-reduced-motion: reduce) { .wire .pulse { animation:none; stroke-dasharray:none; opacity:.5; } }
/* outcome apps: four tinted cards, one number each */
.apps { padding-block:136px 128px; }
.apps-head { display:flex; flex-direction:column; gap:20px; }
.apps h2 { max-width:15ch; margin:0; font-size:clamp(36px, 4.4vw, 60px); line-height:1.04; font-weight:500; letter-spacing:-.032em; text-wrap:balance; }
.apps-lead { max-width:52ch; margin:0; font-size:19px; line-height:29px; color:var(--ink-muted); }
.cards { margin-top:64px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.app { --t:var(--tint-iris); --ti:var(--iris-ink); display:flex; flex-direction:column; gap:18px; min-height:400px; padding:28px 26px 24px; border-radius:var(--r-md); background:var(--t); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-card); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.app.rose { --t:var(--tint-rose); --ti:var(--rose-ink); } .app.sky { --t:var(--tint-sky); --ti:var(--sky-ink); } .app.aqua { --t:var(--tint-aqua); --ti:var(--aqua-ink); } .app.iris { --t:var(--tint-iris); --ti:var(--iris-ink); }
.app:hover { transform:translateY(-4px); box-shadow:var(--shadow-float); }
.app:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }
.app-name { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ti); }
.app-name::before { content:""; width:8px; height:8px; border-radius:2px; background:var(--ti); }
.app-because { margin:0; font-size:23px; line-height:29px; font-weight:500; letter-spacing:-.016em; text-wrap:pretty; }
.app-for { margin:0; font-size:15px; line-height:23px; color:var(--ink-muted); }
.app-foot { margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-top:18px; border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.app-moves { display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:18px; color:var(--ink-muted); }
.app-moves b { min-height:40px; font-size:14.5px; line-height:20px; font-weight:600; color:var(--ink); }
.circle { flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--paper); transition:background-color .25s, transform .25s; }
.circle svg { width:17px; height:17px; }
.app:hover .circle { background:var(--ti); transform:translateX(3px); }
.apps-more { margin-top:36px; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px; padding-top:24px; border-top:1px solid var(--line); }
.apps-more p { margin:0; font-size:16px; line-height:25px; color:var(--ink-muted); }
.apps-more a { font-size:15px; font-weight:600; text-decoration:underline; text-decoration-color:var(--line-control); text-underline-offset:5px; }
.apps-more a:hover { text-decoration-color:var(--ink); }
@media (max-width: 1180px) { .cards { grid-template-columns:repeat(2, minmax(0,1fr)); } .app { min-height:340px; } }
@media (max-width: 640px) { .apps { padding-block:88px 80px; } .cards { grid-template-columns:1fr; margin-top:40px; } .app { min-height:0; } }
@media (prefers-reduced-motion: reduce) { .app, .circle { transition:none; } }
/* hold us to: founder note and commitments */
.hold { padding-block:136px; background:var(--mist); }
.hold .wrap { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; row-gap:56px; }
.note { grid-column:1 / span 6; margin:0; display:flex; flex-direction:column; gap:32px; }
.note blockquote { margin:0; font-size:clamp(28px, 3vw, 40px); line-height:1.2; font-weight:400; letter-spacing:-.022em; text-wrap:pretty; }
.note blockquote::before { content:""; display:block; width:48px; height:3px; margin-bottom:32px; border-radius:2px; background:var(--signal); }
.note figcaption { display:flex; align-items:center; gap:14px; font-size:15px; line-height:21px; color:var(--ink-muted); }
.note figcaption img { width:40px; height:40px; }
.note figcaption b { display:block; color:var(--ink); font-weight:600; }
.promises { grid-column:8 / span 5; display:flex; flex-direction:column; }
.promises h2 { margin:0 0 8px; font-size:15px; font-weight:600; color:var(--ink); }
.promise { display:grid; grid-template-columns:28px 1fr; gap:4px 12px; padding:22px 0; border-top:1px solid var(--line); }
.promise:last-child { border-bottom:1px solid var(--line); }
.promise svg { grid-row:1 / span 2; width:20px; height:20px; margin-top:3px; color:var(--signal); }
.promise b { font-size:18px; line-height:26px; font-weight:600; letter-spacing:-.01em; }
.promise span { font-size:15.5px; line-height:24px; color:var(--ink-muted); }

/* resources row */
.reads { padding-block:128px 120px; }
.reads-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px 32px; flex-wrap:wrap; }
.reads h2 { margin:0; font-size:clamp(30px, 3vw, 40px); line-height:1.1; font-weight:500; letter-spacing:-.025em; }
.reads-head a { font-size:15px; font-weight:600; text-decoration:underline; text-decoration-color:var(--line-control); text-underline-offset:5px; }
.reads-head a:hover { text-decoration-color:var(--ink); }
.read-grid { margin-top:40px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.read { --t:var(--tint-iris); --ti:var(--iris-ink); display:flex; flex-direction:column; gap:12px; padding:26px 26px 24px 28px; border-radius:var(--r-md); background:var(--t); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-card); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.read.sky { --t:var(--tint-sky); --ti:var(--sky-ink); } .read.aqua { --t:var(--tint-aqua); --ti:var(--aqua-ink); } .read.iris { --t:var(--tint-iris); --ti:var(--iris-ink); }
.read:hover { transform:translateY(-4px); box-shadow:var(--shadow-float); }
.read:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }
.read-kind { font-size:14px; font-weight:600; color:var(--ti); }
.read-row { display:flex; align-items:center; gap:16px; }
.read-row h3 { flex:1; min-width:0; margin:0; font-size:22px; line-height:28px; font-weight:500; letter-spacing:-.014em; text-wrap:balance; }
.read p { margin:0; font-size:15px; line-height:23px; color:var(--ink-muted); }
.read small { margin-top:auto; padding-top:6px; font-size:13.5px; color:var(--ink-muted); }
.read:hover .circle { background:var(--ti); transform:translateX(3px); }

/* closing band */
.close { padding-block:0 24px; }
.close .band { padding:128px 48px 120px; text-align:center; }
.close-shapes { position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.close-shapes .s1 { fill:#221F66; } .close-shapes .s2 { fill:#2D2A82; }
.close h2 { margin:0 auto; max-width:14ch; font-size:clamp(40px, 5.4vw, 76px); line-height:1; font-weight:500; letter-spacing:-.036em; color:var(--glow); text-wrap:balance; }
.close-lead { margin:28px auto 0; max-width:44ch; font-size:19px; line-height:29px; color:var(--on-deep); }
.close .capture { margin:40px auto 0; }
.close .bar { background:var(--deep-raised); border-color:var(--deep-line); box-shadow:none; }
.close .bar:focus-within { border-color:var(--signal-on-deep); }
.close .bar input { color:var(--on-deep); }
.close .bar input::placeholder { color:var(--on-deep-muted); }
.close .bar .btn { background:var(--on-deep); color:var(--deep); }
.close .bar .btn:hover { background:var(--tint-iris); }
.close .help { margin-left:0; color:var(--on-deep-muted); }
.close .help.err { color:#FFB067; } .close .help.ok { color:var(--deep-gain); }
.close .capture.bad .bar { border-color:#FFB067; }

/* footer */
.foot { padding-block:88px 40px; background:var(--mist); }
.foot-top { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(5, minmax(0,1fr)); gap:32px; }
.foot-brand { display:flex; flex-direction:column; gap:16px; }
.foot-brand img { height:24px; width:auto; align-self:flex-start; }
.foot-brand p { margin:0; max-width:24ch; font-size:15px; line-height:23px; color:var(--ink-muted); }
.foot h3 { margin:0 0 14px; font-size:14px; font-weight:600; }
.foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot li a { font-size:14.5px; color:var(--ink-muted); text-decoration:none; }
.foot li a:hover { color:var(--ink); }
.foot-base { margin-top:72px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; font-size:13.5px; color:var(--ink-subtle); }
.foot-base nav { display:flex; gap:24px; }
.foot-base a { color:inherit; text-decoration:none; }
.foot-base a:hover { color:var(--ink); }

@media (max-width: 1080px) {
  .note, .promises { grid-column:1 / -1; }
  .read-grid { grid-template-columns:1fr; }
  .close .band { margin-inline:24px; padding:96px 28px 88px; }
  .foot-top { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .foot-brand { grid-column:1 / -1; }
}
@media (max-width: 640px) {
  .hold { padding-block:88px; } .reads { padding-block:88px 80px; }
  .close { padding-block:0 12px; } .close .band { margin-inline:12px; padding:80px 20px 72px; }
  .foot-top { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { .read { transition:none; } }
.lg-dark { display:none !important; }
/* motion: one easing for everything, press feedback, cursor light, sliding switch, reveal sequences */
:root { --ease:cubic-bezier(.2,.8,.2,1); }
.btn { transition:background-color .16s, transform .14s var(--ease); }
.btn:active { transform:scale(.97); }
.app, .read { position:relative; overflow:hidden; }
.app > *, .read > * { position:relative; }
.app::before, .read::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.6), transparent 62%); opacity:0; transition:opacity .35s var(--ease); pointer-events:none; }
.app:hover::before, .read:hover::before { opacity:1; }
.switch { position:relative; }
.switch .thumb { position:absolute; top:4px; left:0; height:36px; border-radius:999px; background:var(--on-deep); transition:transform .5s var(--ease), width .5s var(--ease); }
.switch.js button { position:relative; z-index:1; }
.switch.js button[aria-pressed="true"] { background:transparent; }
.flow.armed .sys, .flow.armed .layer, .flow.armed .num, .flow.armed .trust-tag { opacity:.28; transform:translateY(6px); }
.flow.armed .rail { stroke-dasharray:100; stroke-dashoffset:100; }
.flow.armed .pulse { opacity:0; }
.flow .sys, .flow .layer, .flow .num, .flow .trust-tag { transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--d, 0) * 1ms); }
.flow .rail { transition:stroke-dashoffset 1s var(--ease) .45s; }
.flow .pulse { transition:opacity .6s ease 1.7s; }
.flow.lit .sys, .flow.lit .layer, .flow.lit .num, .flow.lit .trust-tag { opacity:1; transform:none; }
.flow.lit .rail { stroke-dashoffset:0; }
.qs.armed .dots i.on { background:var(--line); }
.qs .dots i { transition:background-color .3s ease; transition-delay:calc(var(--i, 0) * 32ms + 250ms); }
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform:none; }
  .switch .thumb, .flow .sys, .flow .layer, .flow .num, .flow .trust-tag, .flow .rail, .flow .pulse, .qs .dots i { transition:none; }
}