/* ─────────────────────────────────────────────────────────────────────────────
   neeos.ai — quiet ground (brand v2.1).
   Consumes tokens.css. Same class vocabulary as the previous skin so the blog
   inherits the reskin with no markup changes. No sky, no stars, no glow:
   the one gradient on this site is inside the mark.
   ───────────────────────────────────────────────────────────────────────────── */
@import url("/assets/tokens.css");

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
body {
  background:var(--ground); color:var(--body-text); min-height:100vh; overflow-x:clip;
  font-family:var(--body); -webkit-font-smoothing:antialiased; line-height:1.65;
}
a { color:var(--accent-text); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
img { display:block; max-width:100%; }
h1,h2,h3,h4 { font-family:var(--display); color:var(--text); letter-spacing:-0.02em; text-wrap:balance; }

.wrap { max-width:1120px; margin:0 auto; padding:0 1.5rem; }
.wrap-narrow { max-width:720px; margin:0 auto; padding:0 1.5rem; }

/* ── Nav ── */
nav.top { position:sticky; top:0; z-index:20; backdrop-filter:saturate(140%) blur(14px); background:color-mix(in srgb, var(--ground) 78%, transparent); border-bottom:1px solid var(--line); transition:transform .28s ease; }
nav.top.nav-hidden { transform:translateY(-100%); }
nav.top .row { display:flex; align-items:center; justify-content:space-between; padding:.85rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--rounded); font-weight:650; font-size:1.2rem; letter-spacing:-0.01em; color:var(--text); }
.brand img, .brand svg { width:32px; height:32px; }
nav.top .links { display:flex; align-items:center; gap:1.6rem; }
nav.top .links a.navlink { color:var(--secondary); font-size:.92rem; font-weight:500; }
nav.top .links a.navlink:hover { color:var(--text); text-decoration:none; }
nav.top .links a.navlink.active { color:var(--text); }

/* ── Buttons: the two capsules ── */
.btn { display:inline-flex; align-items:center; gap:.5rem; border-radius:var(--r-button); font-family:var(--display); font-weight:650; font-size:.92rem; padding:.62rem 1.25rem; border:1px solid transparent; white-space:nowrap; }
.btn:hover { text-decoration:none; }
.btn-filled { background:var(--accent); color:var(--accent-ink); }
.btn-filled:hover { filter:brightness(1.06); }
.btn-tinted { background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent-text); border-color:color-mix(in srgb, var(--accent) 24%, transparent); }
.btn-tinted:hover { background:color-mix(in srgb, var(--accent) 20%, transparent); }

/* ── Hero ── */
.hero { padding:5rem 0 3.5rem; }
.badge { position:relative; z-index:1; }
.badge { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line-2); background:var(--card); color:var(--secondary); font-size:.8rem; font-weight:600; letter-spacing:.02em; padding:.4rem .8rem .4rem .65rem; border-radius:var(--r-button); }
.badge .pulse { width:7px; height:7px; border-radius:50%; background:var(--moss-soft); }
.hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center; margin-top:2rem; }
h1 { font-size:clamp(2.6rem,5vw,3.9rem); font-weight:750; letter-spacing:-0.033em; line-height:1.04; margin-top:1.1rem; }
.lede { color:var(--body-text); margin-top:1.15rem; font-size:1.12rem; max-width:54ch; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.hero-note { margin-top:1rem; color:var(--faint); font-size:.85rem; }
.hero-note a { color:var(--secondary); text-decoration:underline; text-underline-offset:2px; }
.hero-art { display:flex; align-items:center; justify-content:center; }
.hero-art img, .hero-art svg { width:min(280px,70%); height:auto; aspect-ratio:1/1; }

/* ── Sections ── */
section { padding:4.25rem 0; }
section[id] { scroll-margin-top:84px; }
.eyebrow { font-size:.76rem; text-transform:uppercase; letter-spacing:.2em; color:var(--secondary); font-weight:700; }
h2.h { font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:700; margin-top:.6rem; max-width:40ch; }
.section-lede { color:var(--body-text); margin-top:.85rem; max-width:64ch; font-size:1.02rem; }
.k { color:var(--text); font-weight:600; }

/* Pull-quote / the argument */
.pull { border-left:3px solid var(--moss-soft); padding:.2rem 0 .2rem 1.2rem; margin-top:1.6rem; font-family:var(--display); font-size:clamp(1.15rem,2vw,1.45rem); color:var(--text); font-weight:650; max-width:32ch; }

/* ── Cards & grids ── */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:2rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:1.35rem 1.4rem; transition:border-color .2s ease, transform .2s ease; }
.card:hover { border-color:var(--line-2); transform:translateY(-2px); }
.card .dot { width:10px; height:10px; border-radius:50%; margin-bottom:.85rem; }
.card b { color:var(--text); font-family:var(--display); font-weight:650; font-size:1.02rem; display:block; }
.card span { display:block; color:var(--body-text); font-size:.92rem; margin-top:.4rem; line-height:1.55; }

/* Question cards — the ask examples */
.q-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:1.4rem 1.5rem; }
.q-card .q { font-family:var(--display); font-weight:650; font-size:1.08rem; color:var(--text); }
.q-card .a { margin-top:.6rem; font-size:.93rem; color:var(--body-text); line-height:1.6; }
.q-card .a .src-note { display:block; margin-top:.55rem; font-family:var(--mono); font-size:.72rem; color:var(--faint); }

/* Numbered steps — a real sequence */
.steps { counter-reset:step; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; margin-top:2rem; }
.step { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:1.35rem 1.4rem; }
.step::before { counter-increment:step; content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; border-radius:50%; background:color-mix(in srgb, var(--sky) 14%, transparent); color:var(--sky); font-family:var(--rounded); font-weight:700; font-size:.95rem; margin-bottom:.8rem; }
.step p { font-size:.94rem; line-height:1.6; }

/* Two-column precision lists */
.cols2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem; margin-top:2rem; }
.feedlist { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:1.4rem 1.5rem; }
.feedlist h3 { font-size:1rem; font-weight:650; }
.feedlist ul { list-style:none; margin-top:.9rem; }
.feedlist li { padding-left:1.5rem; position:relative; margin-top:.55rem; font-size:.93rem; line-height:1.55; }
.feedlist li::before { content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--moss-soft); }
.feedlist.direct li::before { background:var(--sky-soft); }
.feedlist .fine { margin-top:.9rem; font-size:.8rem; color:var(--faint); }

/* Roadmap strip — plainly fenced */
.roadmap { border:1px dashed var(--line-2); border-radius:var(--r-card); padding:1.5rem 1.6rem; margin-top:2rem; }
.roadmap ul { list-style:none; margin-top:.8rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.roadmap li { border:1px solid var(--line); background:var(--card-2); color:var(--body-text); border-radius:var(--r-chip); padding:.35rem .75rem; font-size:.86rem; }

/* A single illustrative example for a NOT-YET-BUILT capability (Atlas)  —
   deliberately dashed and tagged so it can never be mistaken for a live
   demo. Reuses .q-card's own .q/.a type styling. */
.q-card-future { border-style:dashed; border-color:var(--line-2); background:var(--card-2); opacity:.88; }
.q-card-future-tag { display:inline-block; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); border:1px solid var(--line-2); border-radius:var(--r-chip); padding:.2rem .6rem; margin-bottom:.8rem; }

/* Beta CTA band */
.cta-band { border:1px solid var(--line); background:var(--card); border-radius:var(--r-hero); padding:3rem 2.25rem; margin-top:1rem; text-align:center; }
.cta-band .eyebrow, .cta-band h2.h { text-align:center; }
.cta-band h2.h { max-width:none; margin:.6rem auto 0; }
.cta-band .section-lede { margin-left:auto; margin-right:auto; }
.cta-band .hero-ctas { justify-content:center; margin-top:1.75rem; }

/* ── Footer ── */
footer { margin-top:1rem; padding:2.25rem 0 3rem; border-top:1px solid var(--line); color:var(--faint); font-size:.85rem; }
footer .row { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between; }
footer .links { display:flex; flex-wrap:wrap; gap:1.35rem; }
footer a { color:var(--faint); }
footer a:hover { color:var(--secondary); }
footer .brand-lockup { display:flex; align-items:center; gap:.5rem; color:var(--secondary); }
footer .brand-lockup img, footer .brand-lockup svg { width:18px; height:18px; }

/* ── Blog ── */
.page-head { padding:3.5rem 0 1rem; }
.page-head h1 { font-size:clamp(2rem,4vw,2.7rem); }
.post-list { display:flex; flex-direction:column; gap:1rem; margin-top:2.25rem; }
.post-card { display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:1.6rem 1.75rem; transition:border-color .2s ease, transform .2s ease; color:inherit; }
.post-card:hover { border-color:var(--line-2); transform:translateY(-2px); text-decoration:none; }
.post-date { font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:var(--secondary); font-weight:700; }
.post-card h3 { font-size:1.25rem; font-weight:700; color:var(--text); margin-top:.5rem; letter-spacing:-0.01em; }
.post-card p { color:var(--body-text); font-size:.96rem; margin-top:.5rem; line-height:1.6; max-width:70ch; }
.post-card .read-more { display:inline-block; margin-top:.85rem; color:var(--secondary); font-size:.86rem; font-weight:600; }

.post-head { padding:3rem 0 0; }
.post-head .post-date { font-size:.82rem; letter-spacing:.16em; }
.post-head h1 { margin-top:.75rem; font-size:clamp(1.9rem,4.2vw,2.8rem); }
.post-head .post-dek { color:var(--body-text); margin-top:1rem; font-size:1.08rem; max-width:62ch; }
.back-link { display:inline-flex; align-items:center; gap:.4rem; color:var(--secondary); font-size:.88rem; font-weight:600; }
.back-link:hover { color:var(--text); text-decoration:none; }

.prose { max-width:68ch; margin-top:2.25rem; padding-bottom:2rem; color:var(--body-text); font-size:1.05rem; }
.prose p { margin-top:1.15rem; }
.prose h2 { font-size:1.35rem; font-weight:700; margin-top:2.4rem; letter-spacing:-0.01em; }
.prose h3 { font-size:1.12rem; font-weight:650; margin-top:1.8rem; }
.prose ul, .prose ol { margin-top:1.1rem; padding-left:1.3rem; }
.prose li { margin-top:.5rem; line-height:1.6; }
.prose code { background:var(--card-2); border:1px solid var(--line); border-radius:5px; padding:.1rem .35rem; font-size:.9em; font-family:var(--mono); }
.prose blockquote { border-left:3px solid var(--sky-soft); padding-left:1.1rem; margin-top:1.3rem; color:var(--secondary); font-style:italic; }
.prose strong { color:var(--text); }
.prose hr { border:none; border-top:1px solid var(--line); margin:2.5rem 0; }

.post-footer { border-top:1px solid var(--line); margin-top:1rem; padding:2.25rem 0; }
.post-nav { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

@media (max-width:820px) {
  .hero-grid { grid-template-columns:1fr; gap:2rem; }
  .hero-art { order:-1; }
  .hero-art img, .hero-art svg { width:170px; }
}

/* ── Mobile nav: hamburger drawer. The site now has enough pages (About,
      Architecture, Blog, legal pages) that hiding them outright below 820px
      was a real discoverability loss — this replaces that with a toggle. ── */
/* Sized and colored to stand in for the "Join the beta" button it replaces
   on mobile (same accent fill, same pill radius, comparable footprint) —
   not a bare icon button off to the side. */
.nav-toggle { display:none; background:var(--accent); color:var(--accent-ink); border:none; border-radius:var(--r-button); padding:.62rem .95rem; align-items:center; justify-content:center; gap:.45rem; cursor:pointer; font-family:var(--display); font-weight:650; font-size:.9rem; }
.nav-toggle svg { pointer-events:none; flex-shrink:0; }
.nav-toggle .icon-close { display:none; }
.nav-toggle .label::after { content:"Menu"; }
nav.top.nav-open .nav-toggle .icon-open { display:none; }
nav.top.nav-open .nav-toggle .icon-close { display:block; }
nav.top.nav-open .nav-toggle .label::after { content:"Close"; }

@media (max-width:820px) {
  nav.top .row { flex-wrap:wrap; }
  .nav-toggle { display:flex; }
  nav.top .links { display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:.3rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
  nav.top.nav-open .links { display:flex; }
  nav.top .links .navlink { display:block; padding:.65rem .3rem; font-size:1rem; }
  /* The CTA moves INTO the drawer on mobile — the toggle is what occupies
     its old spot in the bar, so showing both would be two competing calls
     to action in one header. */
  nav.top .links .btn.btn-filled { display:flex; justify-content:center; margin-top:.5rem; }
}

/* ── Comparison — actors as rows, dimensions as columns. Tight. ── */
.compare-section { padding:2rem 0 3rem; }
.ct { border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--card); margin-top:2rem; }
.ct-row { display:grid; grid-template-columns:1.1fr 1fr 1fr 1.15fr 1fr; }
.ct-row > div { padding:.8rem 1.05rem; }
.ct-head { background:var(--card-2); border-bottom:1px solid var(--line); }
.ct-dim { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); display:flex; align-items:flex-end; }
.ct-label { font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--text); display:flex; align-items:center; }
.ct-generic { color:var(--body-text); font-size:.88rem; }
.ct-generic .ct-label { color:var(--faint); }
.ct-neeos { border-top:1px solid var(--line); background:color-mix(in srgb, var(--accent) 6%, transparent); color:var(--text); font-weight:600; font-size:.88rem; }
.ct-cell::before { display:none; content:attr(data-dim); }
.compare-fine { margin-top:1.1rem; font-size:.86rem; color:var(--faint); max-width:64ch; }

/* ── The live demo — scroll-driven, built from the real bubble/chip tokens ──
   Bubble radius 16, chip radius 10, accent fill on the user bubble: pulled
   directly from ios/Sources/Conversations/MessageBubble.swift and
   ProjectsView.swift's ChatFileChip, not invented for the page. */
.demo-section { padding:1rem 0 3.5rem; }
.demo-track { height:250vh; position:relative; }
.demo-stage-outer { position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.demo-stage { width:min(560px,92vw); }
.demo-window { background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-hero); box-shadow:0 30px 60px -20px rgba(0,0,0,.25); overflow:hidden; }
.demo-window-head { display:flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line); font-family:var(--rounded); font-weight:650; font-size:.9rem; color:var(--text); }
.demo-window-head img { width:18px; height:18px; }
.demo-window-body { padding:1.3rem 1.3rem 1rem; min-height:340px; display:flex; flex-direction:column; }
.demo-messages { flex:1; display:flex; flex-direction:column; gap:.65rem; }

.demo-bubble { max-width:82%; padding:12px; border-radius:16px; font-size:.92rem; line-height:1.5; opacity:0; transform:translateY(14px); will-change:transform,opacity; }
.demo-bubble-user { align-self:flex-end; background:var(--accent); color:var(--accent-ink); }
.demo-bubble-assistant { align-self:flex-start; background:var(--card-2); color:var(--body-text); border:1px solid var(--line); }

.demo-reading { align-self:flex-start; opacity:0; height:0; overflow:visible; transition:none; }
.demo-orbit { display:flex; align-items:center; gap:.6rem; }
.demo-orbit svg { flex-shrink:0; }
.demo-orbit .orbit-node { opacity:.28; transform-origin:center; transform-box:fill-box; }
.demo-reading-label { font-size:.82rem; color:var(--faint); font-style:italic; }

.demo-sources { align-self:flex-start; display:flex; flex-direction:column; gap:.5rem; width:78%; }
.demo-source-preview { opacity:0; transform:translateX(-16px); background:var(--card-2); border:1px dashed var(--line-2); border-radius:var(--r-card-s); padding:.6rem .8rem; will-change:transform,opacity; }
.demo-src-kind { display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--sky); }
.demo-src-line { display:block; font-size:.82rem; color:var(--body-text); margin-top:.25rem; font-style:italic; }

.demo-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.demo-chip { display:inline-flex; align-items:center; gap:.4rem; background:color-mix(in srgb, var(--card) 70%, transparent); border:1px solid var(--line); border-radius:10px; padding:7px 10px; font-size:.74rem; font-weight:500; color:var(--text); opacity:0; transform:translateY(8px); will-change:transform,opacity; }
.demo-chip svg { color:var(--sky); flex-shrink:0; }
.demo-chip em { font-style:normal; color:var(--faint); margin-left:.15rem; }

.demo-input-row { margin-top:1rem; border-top:1px solid var(--line); padding-top:.85rem; font-size:.92rem; color:var(--text); min-height:1.3em; }
.demo-caret { display:inline-block; width:2px; height:1em; background:var(--accent); vertical-align:-2px; animation:demo-blink 1s step-end infinite; }
@keyframes demo-blink { 50% { opacity:0; } }

/* A note being edited in place — demo 2 (write-back from other context). */
.demo-note { opacity:0; transform:translateY(14px); will-change:transform,opacity; align-self:stretch; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.demo-note-head { display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border-bottom:1px solid var(--line); font-weight:650; font-size:.85rem; color:var(--text); }
.demo-note-head svg { color:var(--sky); flex-shrink:0; }
.demo-note-body { padding:.85rem .9rem; font-size:.85rem; line-height:1.7; color:var(--body-text); }
.demo-note-line { display:block; color:var(--faint); }
.demo-note-newline { display:block; margin-top:.4rem; padding:.35rem .55rem; border-radius:8px; background:color-mix(in srgb, var(--moss) 14%, transparent); color:var(--text); font-weight:500; }
.demo-note-meta { padding:0 .9rem .8rem; font-size:.74rem; color:var(--moss); display:flex; align-items:center; gap:.35rem; }

/* A proactive aside inside an answer — demo 3 (Neeos notices something else). */
.demo-proactive { opacity:0; transform:translateY(10px); will-change:transform,opacity; margin-top:.8rem; padding:.7rem .85rem; border-left:3px solid var(--sky-soft); background:color-mix(in srgb, var(--sky) 8%, transparent); border-radius:0 10px 10px 0; font-size:.87rem; line-height:1.55; }
.demo-proactive-tag { display:block; font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--sky); margin-bottom:.25rem; }

.demo-footnote { margin-top:1.5rem; font-size:.8rem; color:var(--faint); }
.demo-eyebrow-row { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:.7rem; }
.demo-tag { font-family:var(--mono); font-size:.7rem; color:var(--faint); border:1px solid var(--line); border-radius:var(--r-chip); padding:.22rem .55rem; opacity:.85; }

@media (prefers-reduced-motion: reduce) {
  .demo-track { height:auto; }
  .demo-stage-outer { position:relative; height:auto; padding:2rem 0; }
  [data-in] { opacity:1 !important; transform:none !important; }
  .demo-reading { display:none; }
  .demo-caret { display:none; }
}

@media (max-width:640px) {
  .demo-track { height:220vh; }
  .demo-window-body { min-height:300px; padding:1.1rem 1.1rem .9rem; }
  .compare-table { grid-template-columns:1fr; }
  .compare-cell-head, .compare-cell-head-neeos { border-top:1px solid var(--line); }
}

/* No-JS fallback: same static end-state as reduced-motion. */
.no-js [data-in] { opacity:1; transform:none; }
.no-js .demo-reading { display:none; }
.no-js .demo-caret { display:none; }

/* ═════════════════════════════════════════════════════════════════════════════
   Design elevation — fullness pass.
   Device mockups are CSS-drawn frames holding RECREATED app UI built from the
   same real tokens as the scroll demos (bubble r16, chip r10, accent fill,
   rounded numerals). Illustrative screens, never real user data, and not
   screenshots of the mid-rebuild Mac app.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Full-bleed surface band: breaks the single-ground monotony. Works from
      inside a centered .wrap via the negative-margin trick. ── */
.band { margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%); background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band .card, .band .q-card, .band .feedlist { background:var(--ground); }
.band .q-card-future { background:var(--card-2); }

/* ── Proof numbers — §9-cleared, rounded numerals per brand law ── */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2rem; }
.stat b { font-family:var(--rounded); font-variant-numeric:tabular-nums; font-size:clamp(2.1rem,4vw,2.7rem); font-weight:750; letter-spacing:-0.02em; color:var(--text); display:block; line-height:1.1; }
.stat span { display:block; margin-top:.35rem; color:var(--secondary); font-size:.92rem; font-weight:600; }
.stat small { display:block; margin-top:.3rem; color:var(--faint); font-size:.78rem; line-height:1.5; }
.stats-fine { margin-top:1.8rem; font-size:.78rem; color:var(--faint); }

/* ── Device frames ── */
.dev-shadow { box-shadow:0 18px 40px -14px rgba(8,12,24,.28), 0 4px 12px -6px rgba(8,12,24,.14); }

/* macOS window */
.dev-mac { background:var(--card); border:1px solid var(--line-2); border-radius:12px; overflow:hidden; }
.dev-mac-bar { display:flex; align-items:center; gap:6px; padding:11px 13px; border-bottom:1px solid var(--line); background:var(--card-2); }
.dev-dot { width:11px; height:11px; border-radius:50%; }
.dev-dot-r { background:#FF5F57; } .dev-dot-y { background:#FEBC2E; } .dev-dot-g { background:#28C840; }
.dev-mac-title { margin-left:.5rem; font-size:.72rem; color:var(--faint); font-weight:600; }
.dev-mac-body { display:grid; grid-template-columns:148px 1fr; min-height:264px; }
.dev-side { border-right:1px solid var(--line); background:var(--card-2); padding:.65rem .5rem; display:flex; flex-direction:column; gap:2px; }
.dev-side-row { display:flex; align-items:center; gap:.5rem; padding:.4rem .55rem; border-radius:7px; font-size:.74rem; color:var(--body-text); }
.dev-side-row .sdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dev-side-row.on { background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--text); font-weight:600; }
.dev-main { padding:.9rem 1rem; display:flex; flex-direction:column; gap:.6rem; }

/* iPhone */
.dev-iphone { width:100%; max-width:250px; aspect-ratio:9/19; border-radius:42px; border:7px solid #14161C; background:var(--ground); overflow:hidden; position:relative; }
.dev-island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:78px; height:23px; border-radius:13px; background:#14161C; z-index:2; }
.dev-iphone-screen { position:absolute; inset:0; padding:44px 12px 14px; display:flex; flex-direction:column; gap:.55rem; overflow:hidden; }
.dev-iphone-title { font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--text); padding:0 .2rem; }

/* iPad (landscape) */
.dev-ipad { width:100%; max-width:520px; aspect-ratio:4/3; border-radius:24px; border:9px solid #14161C; background:var(--ground); overflow:hidden; position:relative; }
.dev-ipad-screen { position:absolute; inset:0; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.7rem; }

/* ── Recreated mini-UI, same tokens as the demos, scaled to device size ── */
.mini .demo-bubble { font-size:.76rem; padding:8px 11px; border-radius:13px; max-width:88%; opacity:1; transform:none; }
.mini .demo-chip { opacity:1; transform:none; font-size:.66rem; padding:5px 8px; }
.mini-input { margin-top:auto; display:flex; align-items:center; gap:.5rem; border:1px solid var(--line-2); border-radius:999px; padding:.45rem .8rem; font-size:.74rem; color:var(--faint); background:var(--card); }
.mini-input .mic { margin-left:auto; width:22px; height:22px; border-radius:50%; background:var(--accent); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.mini-input .mic svg { color:var(--accent-ink); }

/* Health tiles + week bars (rounded numerals — where warmth lives) */
.health-tiles { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.health-tile { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.6rem .7rem; }
.health-tile b { font-family:var(--rounded); font-variant-numeric:tabular-nums; font-size:1.15rem; font-weight:750; color:var(--text); display:block; }
.health-tile span { font-size:.62rem; color:var(--faint); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.health-chart { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.7rem; }
.health-chart .lbl { font-size:.62rem; color:var(--faint); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.bars { display:flex; gap:5px; align-items:flex-end; height:54px; margin-top:.5rem; }
.bars i { flex:1; border-radius:4px 4px 2px 2px; background:color-mix(in srgb, var(--sky) 45%, var(--card)); }
.bars i.hot { background:var(--sky); }

/* Vault rows (Mac devices art) */
.vault-list { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.vault-row { display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-bottom:1px solid var(--line); font-size:.78rem; color:var(--text); font-weight:500; }
.vault-row:last-child { border-bottom:none; }
.vault-row svg { color:var(--sky); flex-shrink:0; }
.vault-row .sz { margin-left:auto; color:var(--faint); font-size:.7rem; font-weight:400; }
.vault-tag { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.66rem; color:var(--moss); background:color-mix(in srgb, var(--moss) 10%, transparent); border-radius:7px; padding:.3rem .55rem; align-self:flex-start; }
.vault-hint { font-size:.72rem; color:var(--faint); border:1px dashed var(--line-2); border-radius:9px; padding:.5rem .7rem; text-align:center; }

/* iPad word processor */
.pad-toolbar { display:flex; align-items:center; gap:.45rem; }
.pad-pill { border:1px solid var(--line); background:var(--card); border-radius:7px; padding:.25rem .55rem; font-size:.68rem; font-weight:600; color:var(--body-text); }
.pad-page { flex:1; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.55rem; }
.sk { height:8px; border-radius:4px; background:var(--line); }
.sk-h { height:13px; width:55%; background:var(--line-2); }

/* ── Devices section: alternating art/copy rows ── */
.dev-row { display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; margin-top:3.5rem; }
.dev-row:first-of-type { margin-top:2.5rem; }
.dev-row.flip .dev-art { order:2; }
.dev-copy h3 { font-size:1.15rem; font-weight:650; color:var(--secondary); }
.dev-copy .who { display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,3.2vw,2.1rem); letter-spacing:-0.015em; text-transform:none; color:var(--accent-text); margin-bottom:.4rem; }
.dev-points { list-style:none; margin-top:1rem; }
.dev-points li { padding-left:1.5rem; position:relative; margin-top:.6rem; font-size:.95rem; line-height:1.6; }
.dev-points li::before { content:""; position:absolute; left:0; top:.52em; width:8px; height:8px; border-radius:50%; background:var(--sky-soft); }
.dev-art { display:flex; justify-content:center; }

/* ── Hero cluster: Mac window + overlapping iPhone ── */
.hero-cluster { position:relative; padding:0 1rem 2.2rem 0; }
.hero-cluster::before { content:""; position:absolute; inset:-8% -4%; background:radial-gradient(closest-side, color-mix(in srgb, var(--sky) 8%, transparent), transparent 72%); z-index:0; pointer-events:none; }
.hero-cluster .dev-mac { position:relative; z-index:1; }
.illustrative-note { margin-top:1rem; font-size:.72rem; color:var(--faint); text-align:right; }

/* ── Footer, columned ── */
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; padding:3rem 0 2.4rem; }
.foot-brand p { margin-top:.85rem; color:var(--faint); font-size:.9rem; max-width:30ch; line-height:1.6; }
.foot-col h4 { font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--secondary); font-weight:700; }
.foot-col a { display:block; margin-top:.65rem; color:var(--faint); font-size:.9rem; }
.foot-col a:hover { color:var(--secondary); }
.foot-bottom { border-top:1px solid var(--line); padding:1.4rem 0 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:var(--faint); font-size:.82rem; }

/* ── Reveal-on-scroll (added by JS only when motion is allowed; no-JS and
      reduced-motion both see everything immediately) ── */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
  .rv.rv-in { opacity:1; transform:none; }
}

@media (max-width:880px) {
  .dev-row, .dev-row.flip { grid-template-columns:1fr; gap:1.8rem; }
  .dev-row.flip .dev-art { order:0; }
  .hero-cluster { padding:0; margin-top:.5rem; }
  .hero-cluster .dev-side { display:none; }
  .hero-cluster .dev-mac-body { grid-template-columns:1fr; }
  .hero-cluster::before { inset:0; }
  .illustrative-note { text-align:center; }
  .foot-grid { grid-template-columns:1fr 1fr; gap:2rem; }
}

/* ── Mobile compare: the two actors become two stacked cards, each listing
      its four answers with a tiny dimension label above each line. ── */
@media (max-width:640px) {
  .ct { border:none; background:none; border-radius:0; overflow:visible; display:grid; gap:.8rem; }
  .ct-row.ct-head { display:none; }
  .ct-row { display:block; border:1px solid var(--line); border-radius:16px; background:var(--card); padding:1.1rem 1.2rem .6rem; }
  .ct-row > div { padding:0; }
  .ct-neeos { border-top:1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-color:color-mix(in srgb, var(--accent) 26%, var(--line)); background:color-mix(in srgb, var(--accent) 7%, var(--card)); }
  .ct-label { font-size:1rem; padding-bottom:.35rem; }
  .ct-generic .ct-label { color:var(--secondary); }
  .ct-cell { padding:.55rem 0 .6rem; border-top:1px solid var(--line); }
  .ct-cell::before { display:block; font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:.2rem; }
}

/* ── "What Neeos is" — three moves, big type, a real sequence so the numbers
      carry information. The antidote to wall-of-text-with-tiny-titles. ── */
.moves { counter-reset:move; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; margin-top:2.4rem; }
.move { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:1.8rem 1.7rem; }
.move::before { counter-increment:move; content:counter(move); display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); font-family:var(--rounded); font-weight:750; font-size:1.15rem; }
.move h3 { font-size:1.35rem; font-weight:700; margin-top:1rem; letter-spacing:-0.015em; }
.move p { margin-top:.6rem; font-size:.97rem; line-height:1.6; }

/* Compare table now sits under its own headline */
.compare-section .compare-table { margin-top:2rem; }

/* Hero iPhone — mobile's hero art. Hidden on desktop, where the Mac window leads. */
.hero-iphone { display:none; }

@media (max-width:880px) {
  .hero-cluster .dev-mac { display:none; }
  .hero-iphone { display:block; margin:0 auto; max-width:250px; }
  .hero-iphone .dev-iphone-screen { padding:42px 11px 12px; gap:.5rem; }
}

/* ── Mobile breathing room: more side padding everywhere, roomier demo stage ── */
@media (max-width:640px) {
  .wrap, .wrap-narrow { padding:0 1.9rem; }
  .demo-stage { width:min(560px,89vw); }
  h2.h { font-size:clamp(1.7rem,6vw,2.1rem); }
  .move h3 { font-size:1.25rem; }
  .hero { padding-top:2.75rem; }
}

/* ── Mini app exchanges — a claim, shown as the app would show it ── */
.qx-user { display:block; align-self:flex-end; margin-left:auto; width:fit-content; max-width:95%; background:var(--accent); color:var(--accent-ink); font-size:.82rem; line-height:1.45; padding:8px 11px; border-radius:13px; }
.qx-asst { display:block; margin-top:.6rem; background:var(--card-2); border:1px solid var(--line); color:var(--body-text); font-size:.84rem; line-height:1.5; padding:9px 11px; border-radius:13px; }
.band .qx-asst { background:var(--ground); }
.qx-asst .demo-chips { margin-top:.5rem; }
.qx-asst .demo-chip { opacity:1; transform:none; }
.qx-note { display:block; margin-top:.7rem; font-family:var(--mono); font-size:.7rem; color:var(--faint); }

/* Micro-visuals in the three moves */
.move-art { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; min-height:44px; margin-bottom:1rem; }
.move-art .demo-chip { font-size:.68rem; padding:5px 8px; }
.move-art-caption { font-family:var(--mono); font-size:.66rem; color:var(--faint); line-height:1.5; max-width:200px; }
.move-art-chat { flex-direction:column; align-items:flex-start; gap:.35rem; }
.move-art-chat .qx-user { margin-left:0; align-self:flex-start; }
.move-art-chat .qx-asst { margin-top:0; }
.move::before { margin-bottom:1rem; }

/* ── iPad + Magic Keyboard, with a real document mid-edit ── */
.ipad-kb-set { display:flex; flex-direction:column; align-items:center; width:100%; max-width:540px; }
.pad-pageno { margin-left:auto; font-family:var(--mono); font-size:.62rem; color:var(--faint); }
.pad-doc { display:block; overflow:hidden; }
.doc-title { font-family:var(--display); font-size:1.05rem; font-weight:750; color:var(--text); letter-spacing:-0.01em; margin-bottom:.5rem; }
.doc-p { font-size:.72rem; line-height:1.65; color:var(--body-text); margin-top:.45rem; }
.doc-caret { display:inline-block; width:2px; height:.95em; background:var(--accent); vertical-align:-2px; margin-left:1px; animation:demo-blink 1s step-end infinite; }

.magic-kb { width:88%; margin-top:-6px; position:relative; z-index:1; }
.kb-hinge { width:34%; height:7px; margin:0 auto; background:#23262E; border-radius:0 0 6px 6px; }
.kb-deck { background:#1D2027; border:1px solid #2A2E38; border-radius:10px; padding:9px 11px 10px; box-shadow:0 16px 32px -14px rgba(8,12,24,.4); }
.kb-keys { display:grid; grid-template-columns:repeat(14,1fr); gap:3px; }
.kb-keys i { display:block; aspect-ratio:1.35; background:#2A2E37; border-radius:3px; }
.kb-keys .k2 { grid-column:span 2; aspect-ratio:auto; }
.kb-keys .kspace { grid-column:span 6; aspect-ratio:auto; }
.kb-trackpad { width:34%; height:26px; margin:7px auto 0; background:#23262E; border:1px solid #2E323C; border-radius:6px; }

@media (max-width:880px) {
  .magic-kb .kb-trackpad { height:20px; }
}

/* ── The roadmap, tiered: active development vs (cheerfully admitted) vaporware ── */
.rm-tier { display:flex; align-items:center; gap:.6rem; margin-top:2.6rem; font-size:1.08rem; font-weight:700; color:var(--text); }
.rm-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.rm-dot-live { background:var(--accent); }
.rm-dot-vapor { background:transparent; border:2px dashed var(--faint); }
.rm-status { display:inline-block; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--accent-text); background:color-mix(in srgb, var(--accent) 10%, transparent); border-radius:var(--r-chip); padding:.3rem .6rem; margin-bottom:.8rem; }
.rm-ask { margin-top:3rem; background:var(--ground); border:1px solid var(--line-2); border-radius:var(--r-card); padding:1.8rem 1.9rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.band .rm-ask { background:var(--ground); }
.rm-ask h3 { font-size:1.15rem; font-weight:700; }
.rm-ask p { margin-top:.5rem; font-size:.95rem; line-height:1.65; max-width:56ch; }
.rm-ask .btn { flex-shrink:0; }