/* site.css — the landing surface's stylesheet, shared by / and /download.
   Staged into web-dist/landing/ by build-landing.sh (never obfuscated: the
   obfuscator is for JS, and a stylesheet gives away nothing). */
:root {
    /* Accent: the app's default GREEN palette, as theme.css defines it. */
    --accent: oklch(50% 0.13 152);
    --accent-hover: oklch(44% 0.14 152);
    --accent-soft: oklch(50% 0.13 152 / 0.09);

    /* SURFACES: white, and ACHROMATIC — `oklch(L 0 none)`, the same spelling
       theme.css uses for the app's own surfaces, and the same reason: hue 0 is
       RED, and `none` is the only way to say "no hue at all" that survives a
       color-mix (which interpolates hue in polar space, and will happily walk a
       grey through pink on its way somewhere). Colour lives in the accent; the
       ground carries none of it.
       --bg is the page, --bg-2 the bands and the recessed fills; panels stay
       pure white, so a card on a band reads by its own value and a card on the
       page reads by its hairline. */
    --bg: #ffffff;
    --bg-2: oklch(97.3% 0 none);
    --panel: #ffffff;
    --ink: #1f2023;      /* near-black, not black: black on white is a glare */
    --ink-2: #474a51;
    --muted: #6b6f76;
    --faint: #989ba1;
    --line: oklch(91% 0 none);
    --line-2: oklch(94.8% 0 none);

    /* TYPEFACES. One family, Inter, for headings and text alike — the scheme the
       apps this page is measured against all run: Obsidian self-hosts Inter,
       Notion ships it as "NotionInter", Evernote pairs Figtree with Inter, and
       none of them sets a headline in a serif. The page used Georgia for every
       heading, which read as a magazine sitting on top of a piece of software.
       Weight and tracking do the work a second family used to: 700 and tight
       negative letter-spacing at display sizes, 600 further down.
       Only the woff2 we already ship is used (400-700 variable, roman only) —
       no italic file, so nothing on this page asks for one and gets a
       synthesised slant. --serif stays defined for the ONE thing that still
       wants it: rendered maths. */
    --serif: Georgia, "Iowan Old Style", "Songti SC", "Times New Roman", serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, "PingFang SC", "Microsoft YaHei UI", Arial, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* TYPE SCALE — one ladder for the whole page. The redesign pulled the
       section headings DOWN a step (h2 tops out at 34px, was 38) and the body
       copy in the proof sections to --fs-sm: the old page shouted every claim
       in display type next to a full-bleed screenshot, and four of those in a
       row read as four adverts rather than as one product. */
    --fs-display: clamp(40px, 5.6vw, 62px);
    --fs-h2:      clamp(27px, 3.2vw, 36px);
    --fs-h3:      21px;
    --fs-lede:    19px;
    --fs-body:    17px;
    --fs-sm:      15px;
    --fs-xs:      13.5px;
    --fs-micro:   12px;
    --fs-mono:    11.5px;

    --lh-display: 1.06;
    --lh-h2:      1.15;
    --lh-h3:      1.3;
    --lh-body:    1.6;
    --lh-tight:   1.45;

    --w-med:  500;
    --w-semi: 600;
    --w-bold: 700;

    --maxw: 1080px;
  }

  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("landing/fonts/inter-latin.b4f9d47d.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body);
    font-synthesis-weight: none;   /* Inter carries 400-700; never fake one */
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; }
  b, strong { font-weight: var(--w-semi); }
  .stat b, .note-doc b { font-weight: 400; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { color: var(--accent-hover); }
  h1, h2, h3, h4 { font-family: var(--sans); margin: 0; }
  h1 { font-weight: 700; letter-spacing: -0.035em; }
  h2 { font-weight: 700; letter-spacing: -0.028em; }
  h3 { font-weight: 650; letter-spacing: -0.022em; }
  p { margin: 0; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

  /* ---------- nav ----------
     The whole account UI lives here. Signed out it is Pricing / Sign in /
     Download; signed in it is a menu, and every item in that menu leads to
     /account. */
  /* OPAQUE, and it gets out of the way. It was 85% of the page colour with a
     blur behind it — a good trick over a photograph, a bad one over a white
     page full of hairlines and bar charts, where the content smeared through
     and read as dirt around the links.
     Now it also MOVES: at the top of the page it sits flush with no border, so
     the hero starts at the top of the window instead of under a rule; once you
     have scrolled past it, it carries a hairline and a soft shadow; and while
     you scroll DOWN it lifts away entirely, coming back the moment you scroll
     up. A sticky bar that is always there spends 64px of every screen on
     navigation nobody is using while they read. Class flips are in landing.js;
     the transition is on transform, which the compositor can animate without
     laying the page out again. */
  header.nav {
    position: sticky; top: 0; z-index: 50; background: var(--bg);
    border-bottom: 1px solid transparent;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), border-color .2s, box-shadow .2s;
  }
  header.nav.stuck { border-bottom-color: var(--line); }
  /* Under a sticky bar, whatever is scrolling past gets CUT at the bar's edge —
     the hero's descenders and the dot of its full stop were being sliced into a
     row of green stubs an inch under the wordmark, which reads as a rendering
     fault rather than as scrolling. A short scrim under the bar dissolves the
     cut instead: the text fades into the page colour on its way under.
     It is a child of the bar, so it travels with it when the bar hides. */
  header.nav::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px;
    background: linear-gradient(var(--bg) 0%, var(--bg) 34%, color-mix(in oklab, var(--bg) 0%, transparent) 100%);
    opacity: 0; transition: opacity .2s; pointer-events: none;
  }
  header.nav.stuck::after { opacity: 1; }
  header.nav.away { transform: translateY(-100%); }
  @media (prefers-reduced-motion: reduce) { header.nav { transition: none; } }
  .nav-inner { display: flex; align-items: center; height: 64px; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: var(--w-semi); font-size: var(--fs-body); letter-spacing: -0.015em; color: var(--ink); }
  .brand:hover { color: var(--ink); }
  .logo { width: 27px; height: 27px; border-radius: 7px; display: block; box-shadow: 0 1px 2px rgba(20, 30, 50, 0.18); }
  /* The middle of the bar is the page's table of contents. It carried two links
     and a button, which told a first-time reader nothing about what was below
     the fold. */
  .nav-links { margin-left: 38px; display: flex; align-items: center; gap: 26px; }
  .nav-links a { font-size: var(--fs-sm); color: var(--muted); }
  .nav-links a:hover { color: var(--ink); }
  .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .nav-right .plain { color: var(--muted); font-size: var(--fs-sm); font-family: var(--sans); }
  .nav-right .plain:hover { color: var(--ink); }
  .nav-right button.plain { background: none; border: 0; padding: 0; cursor: pointer; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--sans); font-weight: var(--w-semi); font-size: var(--fs-sm); border-radius: 9px;
    padding: 9px 16px; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
    transition: filter .12s, background .12s, border-color .12s;
  }
  .btn-primary { background: var(--accent); color: #fff; }
  .btn-primary:hover { background: var(--accent-hover); color: #fff; }
  .btn-ghost { color: var(--ink); border-color: var(--line); background: transparent; }
  .btn-ghost:hover { border-color: var(--muted); color: var(--ink); }

  /* the signed-in menu */
  .acct { position: relative; }
  .acct-btn {
    display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: var(--fs-sm);
    color: var(--ink); background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; padding: 5px 13px 5px 5px; cursor: pointer; max-width: 210px;
  }
  .acct-btn:hover { border-color: var(--muted); }
  .acct-btn .av {
    width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
    display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--w-semi); flex: 0 0 auto;
  }
  .acct-btn .em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-btn .car { color: var(--faint); font-size: 10px; flex: 0 0 auto; }
  .acct-menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 246px; background: var(--panel);
    border: 1px solid var(--line); border-radius: 13px; padding: 6px; z-index: 60;
    box-shadow: 0 18px 44px -18px rgba(40, 50, 70, .3), 0 3px 10px -6px rgba(0, 0, 0, .18);
  }
  .acct-menu .head { padding: 9px 11px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 5px; }
  .acct-menu .head b { display: block; font-size: var(--fs-xs); word-break: break-all; }
  .acct-menu .head span { font-size: var(--fs-micro); color: var(--faint); }
  .acct-menu a, .acct-menu button {
    display: block; width: 100%; text-align: left; font-family: var(--sans); font-size: var(--fs-sm);
    color: var(--ink); background: none; border: 0; border-radius: 9px; padding: 9px 11px; cursor: pointer;
  }
  .acct-menu a:hover, .acct-menu button:hover { background: var(--bg-2); color: var(--ink); }
  .acct-menu a small { display: block; font-size: var(--fs-micro); color: var(--faint); }

  /* ---------- hero ----------
     Raised (was 92px of air above a mono eyebrow) and stripped to headline,
     one paragraph and three measured facts. The buttons that used to sit here
     are the two in the nav, four lines up the screen. */
  .hero { padding: 54px 0 34px; text-align: center; }
  .hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.025em; max-width: 15ch; margin: 0 auto; }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .hero .lede { margin: 22px auto 0; font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--ink-2); max-width: 56ch; }
  /* The facts, not adjectives: a measured install size, the platforms, the paid
     capability and the agent surface. A caption under the product shot — one
     line, hairline-separated, no pills and no buttons: it is read after the
     picture, not before it. */
  .facts {
    display: flex; justify-content: center; flex-wrap: wrap; margin: 18px auto 0;
    font-size: var(--fs-xs); color: var(--muted);
  }
  .facts span { padding: 0 18px; border-left: 1px solid var(--line); line-height: 1.5; }
  .facts span:first-child { border-left: none; }
  .facts span b { color: var(--ink); font-weight: var(--w-semi); }
  @media (max-width: 700px) {
    .facts span { border-left: none; padding: 2px 12px; }
  }

  /* ---------- the live editor ---------- */
  .demo { padding: 8px 0 84px; }
  .window {
    border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line);
    box-shadow: 0 1px 1px rgba(30, 20, 10, .04), 0 28px 64px -26px rgba(40, 60, 90, .32), 0 8px 20px -12px rgba(0, 0, 0, .12);
  }
  .window .bar {
    height: 36px; background: linear-gradient(#fbfbfc, #f4f5f7); border-bottom: 1px solid var(--line-2);
    display: flex; align-items: center; gap: 7px; padding: 0 13px;
  }
  .window .bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
  .dot-r { background: #ec6a5e; } .dot-y { background: #f4bf50; } .dot-g { background: #61c554; }
  .window .bar .title { font-family: var(--mono); font-size: var(--fs-mono); color: var(--faint); margin-left: 10px; }
  .window iframe { display: block; width: 100%; height: 760px; border: 0; background: #fff; }
  .demo-missing { display: none; padding: 60px 24px; text-align: center; color: var(--muted); font-family: var(--mono); font-size: var(--fs-xs); }
  .window.unbuilt iframe { display: none; }
  .window.unbuilt .demo-missing { display: block; }

  section { padding: 84px 0; }
  .sec-head { max-width: 660px; }
  .sec-head h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.021em; }
  .sec-head p { margin-top: 14px; font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--muted); }

  /* ---------- the four proofs ----------
     One claim, one picture, alternating sides. Deliberately NOT the old 2×2
     pillar grid: three of these four (size, voice, the palette) only land as a
     picture, and a card grid has nowhere to put one. The visuals are small on
     purpose — a 1000px screenshot per claim made the page a slideshow. */
  .proof + .proof { margin-top: 64px; }
  .proof-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 52px; align-items: center; }
  .proof.flip .proof-grid { direction: rtl; }
  .proof.flip .proof-grid > * { direction: ltr; }
  .proof h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.021em; }
  .proof .lede { margin-top: 14px; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-2); }
  .points { margin: 18px 0 0; padding: 0; list-style: none; }
  /* NOT a flex container: these lines carry <b>, <kbd> and <span class="mono">
     inline, and under display:flex each of those becomes its own flex ITEM —
     the sentence comes apart into columns with gaps in it. Block line, marker
     positioned absolutely. */
  .points li { position: relative; padding: 6px 0 6px 17px; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-tight); }
  .points li::before {
    content: ""; position: absolute; left: 0; top: 14px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  }
  /* Just a glyph in the heading. It flew — first on a timer, then bound to the
     scroll — and both readings were worse than the thing standing still, so it
     stands still. */
  .proof h3 .rocket { font-family: var(--sans); font-size: .78em; margin-right: 10px; vertical-align: 2px; }
  .aside-note { margin-top: 16px; font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-body); }
  .shot { border-radius: 12px; }
  .shot img { display: block; width: 100%; height: auto; }

  /* ---- the size chart ----
     Real numbers, one method, stated under the chart: `du -sm` over the
     installed .app on this author's Mac. A marketing bar chart with no method
     under it is a drawing; this one can be re-run in a line of shell. */
  .bars { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 24px 18px; }
  /* Two measures of the same claim — how big it is, and how long you wait for
     it. One chart with a switch rather than two charts stacked: they answer the
     same question and only one of them is worth reading at a time. */
  .chart-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
  .chart-tabs button {
    font-family: var(--sans); font-size: var(--fs-xs); color: var(--muted); background: transparent;
    border: 1px solid transparent; border-radius: 8px; padding: 5px 12px; cursor: pointer;
  }
  .chart-tabs button:hover { color: var(--ink); }
  .chart-tabs button.on { color: var(--ink); background: var(--bg-2); border-color: var(--line); }
  .barset { display: none; }
  .barset.on { display: block; }
  .bar-row { display: grid; grid-template-columns: 92px 1fr 62px; align-items: center; gap: 12px; padding: 5px 0; }
  .bar-row .who { font-size: var(--fs-xs); color: var(--ink-2); text-align: right; }
  .bar-row .track { height: 15px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
  .bar-row .fill { display: block; height: 100%; width: 0; background: #cfc9bd; border-radius: 4px; transition: width .9s cubic-bezier(.2,.8,.2,1); }
  .bar-row .mb { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
  .bar-row.us .who { color: var(--ink); font-weight: var(--w-semi); }
  .bar-row.us .fill { background: var(--accent); }
  .bar-row.us .mb { color: var(--accent); }
  .bars .method { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-2); font-size: var(--fs-micro); color: var(--muted); line-height: var(--lh-body); }
  /* the Markdown features, as chips */
  /* Feature chips read as PROSE, not as code: they were a wall of monospace
     pills, which made a list of ordinary words look like API identifiers. Sans,
     one hairline, no fill. The labels are plain English too — "GFM tables" and
     "GitHub alerts" are the spec's names for them, not the reader's. */
  .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
  .chips span {
    font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-2);
    border: 1px solid var(--line); border-radius: 8px; padding: 4px 11px; background: var(--panel);
  }

  /* ---- comparison tables ----
     Used twice: how search is BUILT, and what a sync plan actually gives you.
     Rows are mechanism and published numbers — things that can be checked —
     never adjectives about someone else's product. */
  .vs { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .vs .vs-head, .vs .vs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); }
  .vs .vs-head > *, .vs .vs-row > * { background: var(--panel); padding: 11px 16px; }
  .vs .vs-head { border-bottom: 1px solid var(--line); }
  .vs .vs-head b { font-size: var(--fs-xs); }
  .vs .vs-head .ours { color: var(--accent); }
  .vs .k { grid-column: 1 / -1; background: var(--bg-2); font-size: var(--fs-micro); font-weight: var(--w-semi); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding: 9px 16px; }
  .vs .vs-row div { font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--ink-2); }
  .vs .vs-row div.ours { color: var(--ink); }
  .vs .foot { border-top: 1px solid var(--line); padding: 10px 16px; font-size: var(--fs-micro); color: var(--faint); line-height: var(--lh-tight); }
  /* Four columns at full width — the row label stops being a band across the
     table and becomes what it is, the first column. */
  .vs.three .vs-head, .vs.three .vs-row { grid-template-columns: 1.05fr 1fr 1fr 1fr; }
  .vs.three .vs-head { grid-template-rows: auto; }
  .vs.three .vs-head .spacer { background: var(--bg); }
  .vs.three .vs-row .k { grid-column: auto; background: var(--panel); text-transform: none; font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0; color: var(--ink); padding: 11px 16px; }
  .vs .vs-head b { font-size: var(--fs-xs); }
  .vs .vs-head small { display: block; font-weight: 400; color: var(--faint); font-size: var(--fs-micro); margin-top: 1px; }

  /* ---- the agent surface, as a list of what it can actually call ----
     Tool names ARE monospace: unlike the feature chips above, these are
     identifiers an agent types. */
  .tools { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .tool-head { display: flex; align-items: baseline; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line-2); font-size: var(--fs-xs); font-weight: var(--w-semi); }
  .tool-head .cnt { margin-left: auto; font-size: var(--fs-micro); color: var(--faint); font-weight: 400; }
  /* THE SYSTEM: every client that can drive this vault, on ONE orbit around it.
     One ring, not three: three rings drew a solar system, and the point is not
     that these clients are at different distances — they are the same distance,
     which is the whole argument. Eight logos evenly spaced on one ellipse by
     nothing but a negative animation-delay each.
     Depth is faked, not rendered: each planet rides an ELLIPSE (a circle seen at
     an angle), and a second animation on the same clock scales it up and lifts
     its z-index on the near half of the pass, shrinks and dims it on the far
     half. That is what sells 3D — a thing that gets bigger as it comes toward
     you and goes BEHIND the sun on the way back. `offset-path` carries the
     position and `offset-rotate: 0deg` keeps every logo upright, so no logo is
     ever read upside down.
     The two animations MUST share duration and delay or the depth cue slides
     out of phase with the position and the whole thing reads as a wobble. */
  /* The motion paths are absolute pixels (offset-path takes no container
     units), so the box CANNOT reflow — a narrower column left the planets
     orbiting straight out through the panel wall. It stays 640px wide and is
     SCALED to whatever room it has, by landing.js off a ResizeObserver; the
     wrapper reserves the scaled height so nothing below it moves. */
  .system-wrap { width: 100%; overflow: hidden; }
  .system {
    position: relative; width: 640px; height: 372px; margin: 2px 0 0;
    /* top LEFT, not top centre: the unscaled box is 640px wide and the column
       is narrower, so `margin: auto` computes to 0 and the box is already
       left-aligned — scaling about its centre then threw the right-hand planets
       out through the wall. Scaled from the left corner by exactly
       (column ÷ 640), the box lands flush on both sides. */
    transform: scale(var(--s, 1)); transform-origin: top left;
  }
  .system .rings { position: absolute; inset: 0; width: 100%; height: 100%; }
  .system .rings ellipse { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 7; }
  .system .sun {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center;
    background: var(--panel); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, var(--line)),
                0 0 0 12px color-mix(in oklab, var(--accent) 7%, transparent),
                0 10px 30px -12px rgba(20, 60, 40, .35);
  }
  .system .sun img { width: 56px; height: 56px; border-radius: 14px; display: block; }
  .planet {
    position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; background: var(--panel);
    border: 1px solid var(--line-2); box-shadow: 0 4px 14px -8px rgba(20, 30, 50, .35);
    offset-path: path("M 62 186 a 258 92 0 1 1 516 0 a 258 92 0 1 1 -516 0"); offset-rotate: 0deg; offset-distance: 0%;
    animation: travel 34s linear infinite, depth 34s linear infinite;
    animation-delay: var(--d), var(--d);
  }
  .planet svg { width: 21px; height: 21px; display: block; }
  @keyframes travel { to { offset-distance: 100%; } }
  /* 0% is the left of the ellipse, 25% the FAR side, 75% the NEAR side. */
  @keyframes depth {
    0%   { transform: scale(.86); opacity: .9;  z-index: 1; }
    25%  { transform: scale(.62); opacity: .45; z-index: 0; }
    50%  { transform: scale(.86); opacity: .9;  z-index: 1; }
    75%  { transform: scale(1.14); opacity: 1;  z-index: 3; }
    100% { transform: scale(.86); opacity: .9;  z-index: 1; }
  }
  .orbit-cap { margin-top: 6px; padding: 0 18px 4px; text-align: center; font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-tight); }
  /* Motion off: the planets stop where they are, which is still a picture of
     "many clients, one vault". Without this the page animates nine elements
     forever for someone who asked it not to. */
  @media (prefers-reduced-motion: reduce) {
    .planet { animation: none; offset-distance: 62%; opacity: 1; }
  }
  .tool-cli { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: none; }
  .tool-cli .bar { height: 30px; }

  /* ---- velocity mode: the ⌘P palette, drawn as the app draws it ---- */
  .pal { background: #fff; }
  .pal .q {
    display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--line-2);
  }
  .pal .q .typed { font-size: var(--fs-sm); color: var(--ink); }
  .pal .q .caret { width: 1.5px; height: 17px; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .pal .q .hint { margin-left: auto; font-family: var(--mono); font-size: var(--fs-mono); color: var(--faint); }
  .pal .res { padding: 6px; }
  .pal .r { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: var(--fs-xs); color: var(--ink-2); }
  .pal .r.sel { background: var(--accent-soft); color: var(--ink); }
  .pal .r .kind { font-family: var(--mono); font-size: var(--fs-mono); color: var(--faint); width: 15px; flex: 0 0 auto; }
  .pal .r em { font-style: normal; color: var(--accent); }
  .pal .r .where { margin-left: auto; font-family: var(--mono); font-size: var(--fs-mono); color: var(--faint); }
  .pal .r.new { color: var(--accent); }
  .pal .keys { border-top: 1px solid var(--line-2); padding: 8px 15px; font-family: var(--mono); font-size: var(--fs-mono); color: var(--faint); display: flex; gap: 14px; flex-wrap: wrap; }
  kbd {
    font-family: var(--mono); font-size: var(--fs-mono); border: 1px solid var(--line); border-bottom-width: 2px;
    border-radius: 5px; padding: 1px 5px; background: var(--bg); color: var(--ink-2);
  }

  /* ---------- the agent section ----------
     Its own band, and the widest thing on the page after the demo: an agent
     writing into your vault is why this app exists. */
  .band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; align-items: start; }
  .agent-grid .window { border-radius: 12px; }
  /* three small proofs of what lands in the vault */
  .exgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
  .ex .window { border-radius: 12px; box-shadow: 0 10px 26px -20px rgba(40, 60, 90, .45); }
  .ex .note-doc { padding: 12px 14px 13px; min-height: 132px; }
  .ex > b { display: block; margin-top: 13px; font-size: var(--fs-sm); font-weight: var(--w-semi); }
  .ex > span { display: block; margin-top: 5px; font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--muted); }
  .ex .mono { font-family: var(--mono); font-size: var(--fs-mono); background: var(--bg-2); border-radius: 4px; padding: 1px 4px; }
  .ex pre.term { min-height: 132px; }
  .backlinks { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line-2); }
  .backlinks b { display: block; font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; font-weight: var(--w-med); }
  .backlinks span { display: block; font-size: var(--fs-micro); color: var(--accent); line-height: 1.7; }
  table.mini { width: 100%; border-collapse: collapse; font-size: var(--fs-micro); margin-bottom: 10px; }
  table.mini th, table.mini td { border: 1px solid var(--line); padding: 3px 7px; text-align: left; }
  table.mini th { background: var(--bg); font-weight: var(--w-semi); }
  /* The flowchart is the SHAPE a mermaid fence renders to, drawn small enough to
     sit in a card — the real renderer is in the app and in the demo above. */
  .flow { width: 100%; height: auto; }
  .flow rect { fill: var(--accent-soft); stroke: color-mix(in oklab, var(--accent) 45%, var(--line)); }
  .flow line, .flow polygon { stroke: var(--muted); fill: var(--muted); }
  .flow text { font-family: var(--mono); font-size: 9px; fill: var(--ink-2); text-anchor: middle; }
  .mathline { margin-top: 9px; font-family: var(--serif); font-size: var(--fs-xs); color: var(--ink-2); }
  .mathline i { font-style: italic; }

  /* the three recipes, as buttons that open a dialog */
  .deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
  .rcard {
    display: block; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line);
    border-radius: 13px; padding: 16px 18px 15px; cursor: pointer; font-family: var(--sans);
    transition: border-color .12s, transform .12s, box-shadow .12s;
  }
  .rcard:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 10px 26px -18px rgba(30, 60, 45, .5); }
  .rcard .n { font-size: var(--fs-micro); font-weight: var(--w-semi); letter-spacing: .04em; color: var(--accent); }
  .rcard b { display: block; margin-top: 7px; font-size: var(--fs-sm); font-weight: var(--w-semi); color: var(--ink); }
  /* DIRECT children only: an inline <span class="mono"> inside the description
     matched this too, so `get_context` became its own block and split the
     sentence across three lines. */
  .rcard > span { display: block; margin-top: 4px; font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--muted); }
  .rcard .mono { font-family: var(--mono); font-size: var(--fs-mono); background: var(--bg-2); border-radius: 4px; padding: 1px 5px; }
  .rcard .go { display: inline-block; margin-top: 10px; font-size: var(--fs-xs); font-weight: var(--w-med); color: var(--accent); }

  /* ---------- import: everything converges on one vault ----------
     Was a grey trapezoid with monospace words falling through it, and it looked
     like a diagram of a hopper. This is the same argument drawn as CONVERGENCE:
     the sources sit on an arc, a line runs from each one down into the vault
     mark, and a lit dash travels that line. One SVG holds the tiles AND the
     lines, so nothing can drift out of alignment when the box resizes.

     The marks are drawn here, not copied: a brand tile is its colour plus its
     initial. Shipping nine companies' actual logo files off our own origin is a
     licensing question we do not need to answer to make this point, and at
     34px a real logo is unreadable anyway. */
  .funnel {
    position: relative; display: block; width: 100%; background: var(--panel); border: 1px solid var(--line);
    border-radius: 16px; padding: 26px 22px 20px; cursor: pointer; font-family: var(--sans);
    transition: border-color .12s, box-shadow .12s;
  }
  .funnel:hover { border-color: var(--accent); box-shadow: 0 16px 40px -26px rgba(30, 60, 45, .55); }
  .conv { display: block; width: 100%; height: auto; }
  /* Brand marks are the REAL ones — Simple Icons' CC0 SVG paths, inlined (the
     page ships self-contained, so nothing is fetched at runtime). Each logo is
     drawn in its own brand colour on a white tile. Nominative use: this is a
     list of what we import from. */
  .conv .tile rect { fill: #fff; stroke: rgba(20, 20, 25, .12); }
  .conv .lbl { font-family: var(--sans); font-size: 11px; font-weight: 500; fill: var(--muted); text-anchor: middle; }
  /* The rails, and the things that ride them: an app travels its own curve,
     shrinks, and is absorbed by the vault at the bottom. animateMotion + <mpath>
     rather than CSS offset-path — one source of truth for the geometry (the
     <path> the eye already sees) instead of the same bezier written twice. */
  .conv .ray { fill: none; stroke: color-mix(in oklab, var(--accent) 20%, transparent); stroke-width: 1.1; }
  .conv .halo { fill: none; stroke: color-mix(in oklab, var(--accent) 55%, transparent); stroke-width: 1.4; }
  .conv .vault-ring { fill: var(--panel); stroke: color-mix(in oklab, var(--accent) 40%, var(--line)); stroke-width: 1.2; }
  .catch { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
  .catch b { font-size: var(--fs-sm); font-weight: var(--w-semi); }
  .catch span { font-size: var(--fs-xs); color: var(--muted); }
  .funnel .cta { display: block; text-align: center; margin-top: 14px; font-size: var(--fs-xs); font-weight: var(--w-med); color: var(--accent); }
  @media (prefers-reduced-motion: reduce) {
    /* SMIL ignores this query, so the travelling marks are hidden rather than
       paused. The tiles and the rails still say the same thing standing still. */
    .conv .mover, .conv .halo { display: none; }
    .pal .q .caret { animation: none; }
  }

  /* ---------- cloud sync ----------
     The picture is the app's own Sync pane plus the three places a vault shows
     up. Everything stated here is what SYNC.md describes: optimistic push with
     a per-doc rev, a client-side 3-way rebase when the hub rejects, tombstones
     for deletes, and a conflict that cannot be merged kept ON THE DEVICE and
     shown to you. No end-to-end-encryption claim appears anywhere — the hub
     stores the documents, and saying otherwise would be a lie that sells. */
  .sync-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; }
  .devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
  .dev {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 13px 14px 12px; text-align: center;
  }
  .dev .ico { font-size: 19px; line-height: 1; }
  .dev b { display: block; margin-top: 7px; font-size: var(--fs-xs); font-weight: var(--w-semi); }
  .dev span { display: block; margin-top: 2px; font-size: var(--fs-micro); color: var(--muted); }
  .dev .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 5px; vertical-align: 1px; }
  .sync-pane .prow:first-of-type { border-top: none; }
  .sync-pane .val { color: var(--muted); }
  .sync-pane .ok { color: var(--accent); }

  /* ---------- pricing ----------
     Three cards, rendered by landing.js from GET /billing/plans. The markup
     below the cards is the feature list, which is prose about entitlements and
     does not carry a price. */
  /* The section lost its `band` class when it moved below "Why VelocityNote":
     two grey bands in a row read as one band with a seam. It gets a rule
     instead, and the cards carry themselves against white. */
  #pricing { border-top: 1px solid var(--line); }
  .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; align-items: stretch; }
  .plan {
    display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line);
    border-radius: 16px; padding: 24px 24px 26px;
  }
  .plan.best { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .plan .pname { font-size: var(--fs-h3); font-weight: var(--w-bold); letter-spacing: -0.02em; }
  .plan .tagline { margin-top: 5px; font-size: var(--fs-xs); font-weight: var(--w-med); color: var(--accent); }
  .plan .price { margin: 16px 0 2px; font-size: 40px; font-weight: var(--w-bold); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
  .plan .per { font-size: var(--fs-xs); color: var(--muted); }
  .plan .blurb { margin-top: 14px; font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--muted); }
  .plan ul { margin: 16px 0 0; padding: 0; list-style: none; }
  /* Same rule as .points li above — inline <span class="mono"> inside a flex
     item would be torn out into its own column. */
  .plan li { position: relative; padding: 5px 0 5px 19px; font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--ink-2); }
  .plan li::before { content: "✓"; position: absolute; left: 0; top: 5px; color: var(--accent); }
  .plan li.no { color: var(--faint); }
  .plan li.no::before { content: "·"; color: var(--faint); }
  .plan .buy { margin-top: auto; padding-top: 20px; }
  .plan-more {
    display: block; width: 100%; margin-top: 10px; padding: 6px 0; cursor: pointer;
    background: none; border: 0; font-family: var(--sans); font-size: var(--fs-xs);
    font-weight: var(--w-med); color: var(--muted);
  }
  .plan-more:hover { color: var(--accent); }
  .plan .buy .btn { width: 100%; }
  .plans-note { margin-top: 16px; font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-body); }
  /* the feature list under the plans */
  .matrix { margin-top: 34px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
  .mrow { display: grid; grid-template-columns: 1.6fr repeat(3, .8fr); gap: 1px; background: var(--line-2); }
  .mrow > * { background: var(--panel); padding: 12px 18px; font-size: var(--fs-xs); }
  /* The second line of a feature row is a SENTENCE about the feature, so it is
     set in the text face. It used to be monospace, which made every row look
     like it was quoting a config file — and the words in it were spec names
     ("GFM", "KaTeX", "Mermaid") rather than the things they draw. */
  .mrow.h > * { background: var(--bg); font-weight: var(--w-semi); font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .mrow .c { text-align: center; color: var(--accent); font-weight: var(--w-med); }
  .mrow .c.off { color: var(--faint); font-weight: 400; }
  .mrow .f { color: var(--ink); }
  .mrow .f small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-micro); line-height: var(--lh-tight); }

  /* ---------- dialogs ----------
     <dialog>, so Esc closes it, focus is trapped and the backdrop is the
     browser's — no scroll-lock hack and no focus-trap library on a page that
     ships self-contained. */
  dialog.sheet {
    width: min(880px, calc(100vw - 32px)); max-height: min(88vh, 900px); padding: 0; border: 1px solid var(--line);
    border-radius: 16px; background: var(--panel); color: var(--ink); overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(25, 35, 55, .5);
  }
  dialog.sheet.narrow { width: min(430px, calc(100vw - 32px)); }
  dialog.sheet.wide { width: min(1000px, calc(100vw - 32px)); }
  /* The column you asked about, lit. `.mrow > *` is label, Free, Lifetime,
     Cloud Sync in order, so the plan name maps to an nth-child and nothing has
     to be marked up per cell. */
  #dlg-plan[data-focus="free"] .mrow > *:nth-child(2),
  #dlg-plan[data-focus="local_lifetime"] .mrow > *:nth-child(3),
  #dlg-plan[data-focus="cloud_sync"] .mrow > *:nth-child(4) { background: var(--accent-soft); }
  dialog.sheet::backdrop { background: rgba(28, 26, 22, .42); backdrop-filter: blur(2px); }
  .sheet-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line-2); }
  .sheet-head h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-semi); }
  .sheet-head p { margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-body); }
  .sheet-x {
    margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--bg); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
  }
  .sheet-x:hover { color: var(--ink); border-color: var(--muted); }
  .sheet-body { padding: 20px 24px 24px; overflow: auto; max-height: calc(88vh - 96px); display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; }
  .sheet-body.one { grid-template-columns: 1fr; }
  .steps { margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--line-2); }
  .steps li {
    counter-increment: step; position: relative; padding: 10px 0 10px 36px;
    border-bottom: 1px solid var(--line-2); font-size: var(--fs-sm); line-height: var(--lh-tight); color: #3f4249;
  }
  .steps li::before {
    content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 12px;
    font-size: var(--fs-micro); font-weight: var(--w-semi); color: var(--accent);
  }
  .sheet-body .mono, .ptxt .mono {
    font-family: var(--mono); font-size: var(--fs-xs); background: var(--bg-2); border-radius: 5px; padding: 1px 5px; white-space: nowrap;
  }
  .sheet-note { margin-top: 14px; font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-body); }
  .stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .stage .window { width: 100%; display: flex; flex-direction: column; border-radius: 12px; box-shadow: none; }

  /* ---- the conversation, as a terminal ----
     Claude Code IS a terminal; drawn as chat bubbles it read like a support
     widget. `›` is the user, `⏺` a tool call, `⎿` its result — the shapes the
     client itself prints. ONE <pre>: newlines between block elements would each
     render as a real blank line and no line-height could fix it. */
  .window.term-win { border-color: #2a2d33; }
  .window.term-win .bar { background: #2a2d33; border-bottom-color: #3a3e45; }
  .window.term-win .bar .title { color: #8b919b; }
  pre.term {
    margin: 0; background: #1b1d21; color: #c9cdd4; font-family: var(--mono);
    font-size: var(--fs-mono); line-height: 1.55; padding: 14px 16px 15px;
    white-space: pre-wrap; word-break: break-word; overflow-x: auto;
  }
  .term .u { color: #e8eaed; }
  .term .u b { color: #6fb6ea; font-weight: 400; }
  .term .call b { color: #b79df0; font-weight: 400; }
  .term .out { color: #7f8792; }
  .term .ok { color: #7ccf9a; }
  .term .warn { color: #d8a657; }
  .term .say { color: #c9cdd4; }

  /* ---- the note the agent wrote ---- */
  .note-doc { padding: 13px 15px 14px; }
  .note-doc h4 { font-size: var(--fs-h3); font-weight: var(--w-semi); line-height: var(--lh-h3); margin: 0; letter-spacing: -0.02em; }
  .note-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 9px; }
  .note-meta span {
    font-family: var(--mono); font-size: var(--fs-mono); color: var(--muted);
    border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; background: var(--bg);
  }
  .note-meta span.ai { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
  .note-body { font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--ink-2); border-top: 1px solid var(--line-2); padding-top: 9px; }
  .note-body h5 { font-family: var(--sans); font-size: var(--fs-mono); font-weight: var(--w-semi); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin: 9px 0 4px; }
  .note-body h5:first-child { margin-top: 0; }
  .note-body ul { margin: 0; padding-left: 17px; }
  .note-body li { margin: 2px 0; }
  .note-body ul.tasks { list-style: none; padding-left: 0; }
  .note-body ul.tasks li { display: flex; gap: 8px; align-items: flex-start; }
  .note-body ul.tasks i { width: 12px; height: 12px; border: 1px solid var(--muted); border-radius: 3px; margin-top: 4px; flex: 0 0 auto; }
  .note-body ul.tasks li.done i { background: var(--accent); border-color: var(--accent); }
  .note-body ul.tasks li.done { color: var(--faint); text-decoration: line-through; }
  .note-body .wiki { color: var(--accent); border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); }

  /* ---- the app's own panes ---- */
  .pane { padding: 16px 18px 18px; font-size: var(--fs-xs); }
  .pane .lab { font-weight: var(--w-semi); font-size: var(--fs-xs); margin-bottom: 7px; }
  .pane .note { color: var(--muted); font-size: var(--fs-micro); line-height: var(--lh-tight); margin: 6px 0 12px; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
  .icard { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--panel); }
  .icard.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .icard b { display: block; font-size: var(--fs-xs); font-weight: var(--w-semi); }
  .icard span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-micro); }
  .prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: var(--fs-xs); }
  .chip { border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: var(--fs-micro); background: var(--panel); }
  .sw { width: 32px; height: 19px; border-radius: 20px; background: var(--accent); position: relative; flex: 0 0 auto; }
  .sw::after { content: ""; position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 4px 0 10px; }
  .stat { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--bg); }
  .stat b { display: block; font-size: var(--fs-lede); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
  .stat span { color: var(--muted); font-size: var(--fs-mono); }
  .cmd {
    font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-2); background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; white-space: pre-wrap; word-break: break-all;
  }
  .btnrow { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
  .b-ghost { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: var(--fs-xs); background: var(--panel); color: var(--ink); }
  .b-primary { border: 1px solid transparent; border-radius: 8px; padding: 6px 12px; font-size: var(--fs-xs); background: var(--accent); color: #fff; font-weight: 600; }
  .fineprint { margin-top: 18px; font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-body); }

  /* ---- a returned context bundle, as a document ---- */
  .bundle { padding: 14px 16px 16px; font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.6; color: var(--ink-2); }
  .bundle div { white-space: pre-wrap; }
  .bundle .h { color: var(--accent); }
  .bundle .m { color: var(--faint); }
  .bundle hr { border: none; border-top: 1px solid var(--line-2); margin: 9px 0; }
  .bundle .foot { color: var(--faint); border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 8px; }

  /* ---------- get started ---------- */
  /* White, because the closing CTA now follows the "Why VelocityNote" band and
     two grey bands with a hairline between them read as one long band with a
     seam in it. The rule above it does the separating. */
  .start { background: var(--bg); border-top: 1px solid var(--line); }
  /* One column: the hand-off to /download is all this band does now. The OS
     buttons themselves live on that page, and the rule stays here because the
     page shares this stylesheet. */
  .start-grid { max-width: 720px; margin: 0 auto; text-align: center; }
  .start-grid p { margin-left: auto; margin-right: auto; max-width: 56ch; }
  .start-cta { display: flex; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
  .os-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; text-align: left; }
  .os-btn {
    display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 12px; padding: 15px 20px; transition: border-color .12s, transform .12s;
  }
  a.os-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
  .os-btn .os-ico { width: 26px; height: 26px; color: var(--ink); flex: 0 0 auto; }
  .os-btn .os-t b { display: block; font-weight: var(--w-semi); font-size: var(--fs-sm); color: var(--ink); }
  .os-btn .os-t span { font-size: var(--fs-xs); color: var(--muted); }
  .os-btn.soon { opacity: .55; }
  .os-btn.soon .os-t b { color: var(--muted); }

  .card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; }
  .card h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-bottom: 8px; }
  .card .sub { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
  .gbtn { display: flex; justify-content: center; margin: 20px 0 0; min-height: 44px; }
  /* Sign in with Apple. Apple's HIG mandates the black button with the logo and
     label in white, sized to sit level with Google's pill — brand colours, not
     site tokens, and at least as prominent as the other provider (guideline 4.8). */
  .abtn { display: flex; justify-content: center; margin: 12px 0 4px; }
  .apple-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 22px; border-radius: 20px; background: #000; color: #fff;
    font-family: inherit; font-size: 14px; font-weight: var(--w-med); text-decoration: none;
  }
  .apple-btn:hover { background: #1c1c1e; }
  /* The local door. Deliberately plain — it is scaffolding, and it should not
     look like a third way to sign in to the product. */
  .dev-signin { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
  .dev-signin label { display: block; font-size: var(--fs-xs); font-weight: var(--w-semi); color: var(--ink-2); }
  .dev-signin label span { font-weight: 400; color: var(--faint); margin-left: 6px; }
  .dev-row { display: flex; gap: 8px; margin-top: 8px; }
  .dev-row input {
    flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink);
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px;
  }
  .dev-row input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
  .apple-btn svg { width: 17px; height: 17px; flex: 0 0 17px; }
  .row { margin-top: 14px; }
  .muted { color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-tight); }
  .err { color: #be222a; font-size: var(--fs-xs); margin-top: 12px; }
  .hidden { display: none; }

  /* ---------- why this one ----------
     Four claims in a 2×2, each with a stroked glyph in the accent. Not the
     `.pillar` grid the page opened with in its first draft: those were four
     cards of prose with nothing to look at, and these have a mark, a heading
     and a paragraph that is allowed to be a paragraph. */
  .why { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 44px; margin-top: 44px; }
  .why-ico { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .why-item h3 { margin-top: 14px; font-size: var(--fs-h3); font-weight: var(--w-semi); letter-spacing: -0.02em; }
  .why-item p { margin-top: 9px; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--muted); }
  .why-item .mono { font-family: var(--mono); font-size: var(--fs-mono); background: var(--panel); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; }

  /* ---------- footer ---------- */
  footer { background: var(--bg); padding: 46px 0 40px; border-top: 1px solid var(--line); }
  .foot-bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: var(--fs-xs); color: var(--muted); flex-wrap: wrap;
  }
  .foot-bottom a { color: var(--muted); }

  @media (max-width: 900px) {
    .hero { padding-top: 40px; }
    .proof-grid, .agent-grid, .sheet-body, .sync-grid { grid-template-columns: 1fr; }
    .os-list { grid-template-columns: 1fr; }
    .proof.flip .proof-grid { direction: ltr; }
    .deck, .plans, .exgrid, .why { grid-template-columns: 1fr; }
    .tool-grid { grid-template-columns: 1fr; }
    .window iframe { height: 620px; }
    section { padding: 58px 0; }
    .nav-right { gap: 12px; }
    .nav-links { display: none; }
    .acct-btn .em { display: none; }
    .acct-btn { padding: 4px; }
    /* "Open my notes" is the first item of the account menu two taps away, and
       as a nav button it wrapped to two lines and sat on top of the wordmark. */
    #nav-in .btn-ghost { display: none; }
    /* The convergence graphic is one SVG with a viewBox, so it scales down on
       its own — only the caption under it needs stacking. */
    .catch { flex-direction: column; gap: 3px; text-align: center; }
    /* The matrix is the one thing here that cannot reflow into one column and
       still mean anything — three plan columns ARE the content. It scrolls
       inside its own box; the page never scrolls sideways. */
    .matrix { overflow-x: auto; }
    .mrow { grid-template-columns: 180px repeat(3, 110px); min-width: 510px; }
  }