/* ---------- Tokens ----------
     One family per job. Forest is the deep ground and the button fill;
     accent is the same family stepped up until it reads as green rather
     than black, and it matches Theme.accent in the Mac app exactly. Lime
     is the single highlight. Wax belongs to the seal motif and nothing
     else. There is no fourth hue — the restraint is the argument. */
  :root {
    color-scheme: light;
    --paper: #FFFFFF;
    --mist: #F5F6F1;          /* warm-green off-white for banded sections */
    --ink: #0E1512;
    --body: #4A544E;
    --line: #E3E7DF;
    --line-strong: rgba(14, 21, 18, .16);
    --forest: #0A2A21;        /* buttons, dark sections */
    --forest-2: #113329;      /* raised surfaces on dark */
    --forest-deep: #061C16;   /* footer */
    --forest-hover: #0F3A2C;
    --accent: #14513C;        /* = Theme.accent (light) in the app */
    --accent-hover: #1B6B4F;
    --lime: #D3F36B;
    --lime-soft: #EFFAD8;
    --wax: #C9503C;
    --r-btn: 12px;            /* pills are for tabs; buttons are 12px */
    --r-card: 14px;
    --r-band: 28px;
    --r-pill: 999px;
    --maxw: 1120px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  }

  /* ---------- Base ---------- */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font: 16px/1.62 var(--font);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--lime); color: var(--ink); }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
  [id] { scroll-margin-top: 84px; }
  a { color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  /* Size plus tight tracking carries the weight, not boldness: 600 at
     these sizes reads considered where 700 reads like shouting. */
  h1, h2, h3 { font-weight: 600; letter-spacing: -0.026em; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--forest); color: #fff; border: 1.5px solid var(--forest);
    text-decoration: none; font-weight: 600; font-size: 15.5px;
    padding: 13px 24px; border-radius: var(--r-btn); cursor: pointer;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
    min-height: 48px;
  }
  .btn:hover { background: var(--forest-hover); border-color: var(--forest-hover); transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn.small { padding: 8px 18px; min-height: 40px; font-size: 14.5px; }
  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
  .btn.ghost:hover { background: var(--mist); border-color: var(--ink); }
  .btn.lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
  .btn.lime:hover { background: #DFF88B; border-color: #DFF88B; }
  .btn .tag { font-weight: 500; font-size: 13px; opacity: .8; }

  /* ---------- Header ---------- */
  header.site {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .bar { display: flex; align-items: center; gap: 20px; padding-top: 11px; padding-bottom: 11px; }
  .brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -0.024em; }
  .brand img { width: 30px; height: 30px; display: block; }
  nav.links { display: flex; gap: 2px; margin: 0 auto; }
  nav.links a {
    color: var(--body); text-decoration: none; font-size: 14.5px; font-weight: 500;
    padding: 9px 13px; border-radius: 8px;
  }
  nav.links a:hover { color: var(--ink); background: var(--mist); }

  /* ---------- Hero ---------- */
  /* Hero and the app stage are one section now: white at the headline, easing
     into the band's mist by the time the screenshot sits on it. The band keeps
     its own solid fill, so the gradient only has to cover the copy above it. */
  .heroband { background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 26%, var(--mist) 62%, var(--mist) 100%); }
  /* The band's own fill is dropped rather than kept: painted solid it sat on
     top of the gradient and put back the hard edge the gradient exists to
     remove. The hairline under it stays — that one separates two sections. */
  .heroband .band { border-top: 0; background: transparent; }
  .hero {
    padding: 76px 0 56px;
    /* Both tracks are bounded: an `auto` right-hand column takes the image's
       own width as its minimum, so between 900px and about 1200px the seal
       pushed its tail off the right edge of the viewport. */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    align-items: center; gap: 40px;
  }
  .hero-copy { min-width: 0; }
  .hero-seal { width: 100%; max-width: 410px; height: auto; justify-self: end; }
  /* In the middle band the headline is already wrapping to three lines, so the
     seal gives ground before the copy does. */
  @media (max-width: 1200px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 32px; } }
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 8px; }
    .hero-seal { justify-self: center; width: min(260px, 62vw); order: -1; }
  }
  .hero h1 {
    font-size: clamp(40px, 6.4vw, 72px); line-height: 1.02; margin: 0 0 22px;
    max-width: 15ch; letter-spacing: -0.030em; text-wrap: balance;
  }
  .hero h1 .hl {
    display: inline-block; background: var(--lime); border-radius: 14px;
    padding: 0 14px 3px; margin: 2px 0;
  }
  .hero .sub { font-size: 19px; color: var(--body); max-width: 52ch; margin: 0 0 30px; line-height: 1.6; }
  .hero .cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .trustrow { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 24px; color: var(--body); font-size: 13.5px; }
  .trustrow span { display: inline-flex; align-items: center; gap: 7px; }
  .trustrow svg { width: 14px; height: 14px; color: var(--accent); flex: none; }

  /* ---------- Product band ---------- */
  .band { background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; }
  .stage-wrap { position: relative; max-width: 980px; margin: 0 auto; }

  /* Architectural proof rather than usage stats — we collect no telemetry,
     so these are the only numbers we can honestly put on a screenshot. */
  .proof {
    position: absolute; z-index: 3;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 14px;
    box-shadow: 0 18px 36px -20px rgba(7, 31, 25, .55);
  }
  .proof b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .proof span { display: block; font-size: 11.5px; color: var(--body); margin-top: 1px; }
  /* Hung off the frame edges rather than laid over the UI. Placed against
     the mockup's measured empty zones: the sidebar clears 116px above its
     bottom, the transcript 143px, and the control bar is inset 403px from
     each side — so these three land on background, not on text. */
  .proof.p1 { left: -80px; bottom: 40px; }
  .proof.p2 { right: -76px; bottom: 64px; }
  .proof.p3 { left: 210px; bottom: -26px; }

  /* ---------- App mockup ----------
     These are the app's real tokens (Sources/Theme.swift, dark appearance),
     not a prettier forest repaint. If the app's palette moves, this moves. */
  .app {
    position: relative; border-radius: 16px;
    border: 1px solid rgba(14, 21, 18, .22);
    box-shadow: 0 44px 90px -42px rgba(7, 31, 25, .5), 0 12px 30px -18px rgba(7, 31, 25, .3);
    overflow: hidden; text-align: left;
    background: var(--a-bg);
    --a-bg: #0C0F0E; --a-side: #0F1211; --a-surface: #161A18; --a-inset: #0F1312;
    --a-line: rgba(255, 255, 255, .10);
    --a-text: #ECF0EA; --a-muted: #939E9A; --a-accent: #D3F36B; --a-onaccent: #0E1512;
    --a-sel: #1E5C46; --a-green: #53B57F; --a-red: #EB5757;
    font-size: 13px; line-height: 1.55; color: var(--a-text);
  }
  .app .tbar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--a-side); border-bottom: 1px solid var(--a-line); }
  .app .tbar i { width: 11px; height: 11px; border-radius: 50%; }
  .app .tl-r { background: #FF5F57; } .app .tl-y { background: #FEBC2E; } .app .tl-g { background: #28C840; }
  .app .ttl { flex: 1; text-align: center; font-size: 12px; color: var(--a-muted); padding-right: 44px; }
  .app .cols { display: grid; grid-template-columns: 192px 1fr 288px; min-height: 372px; }
  .app .side { background: var(--a-side); border-right: 1px solid var(--a-line); padding: 12px 10px 70px; }
  .app .recrow {
    display: flex; align-items: center; gap: 8px;
    background: rgba(235, 87, 87, .12); border: 1px solid rgba(235, 87, 87, .25);
    border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600;
  }
  .app .recrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a-red); animation: pulse 1.7s ease-in-out infinite; }
  .app .recrow em { font-style: normal; margin-left: auto; color: var(--a-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
  .app .slabel { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--a-muted); margin: 16px 6px 6px; }
  .app .mrow { padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app .mrow.sel { background: var(--a-sel); color: #FFFFFF; }
  .app .main { padding: 18px 22px 76px; min-width: 0; }
  .app .plabel { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--a-muted); margin-bottom: 12px; }
  .app .nrow { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 13.5px; animation: rise .5s ease-out var(--d) backwards; }
  .app .nrow .nt { font-size: 11px; color: var(--a-accent); font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
  .app .nrow b { font-weight: 600; }
  .app .nrow .cb { flex: none; width: 13px; height: 13px; border: 1.5px solid var(--a-accent); border-radius: 4px; position: relative; top: 1px; }
  .app .tx { background: var(--a-inset); border-left: 1px solid var(--a-line); padding: 18px 18px 76px; }
  .app .tx p { margin: 0 0 12px; font-size: 12.5px; color: var(--a-muted); }
  .app .tx p.line { animation: rise .5s ease-out var(--d) backwards; }
  .app .who { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; }
  .app .who.you { color: var(--a-accent); }
  .app .who.other { color: var(--a-green); }
  .app .w { display: inline-block; animation: appear .3s ease-out var(--d) backwards; }
  .app .caret {
    display: inline-block; width: 2px; height: 12px; margin-left: 3px; position: relative; top: 2px;
    background: var(--a-accent); animation: caretb 1.1s steps(2, start) 10.6s infinite;
  }
  .app .cbar {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px;
    background: rgba(22, 26, 24, .92); border: 1px solid var(--a-line); border-radius: 999px;
    padding: 8px 10px 8px 16px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .app .cbar svg { width: 13px; height: 13px; display: block; color: var(--a-muted); }
  .app .time { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--a-text); }
  .app .time .colon { animation: blinkc 1.2s steps(1) infinite; }
  .app .cbar .rdot { width: 8px; height: 8px; border-radius: 50%; background: var(--a-red); animation: pulse 1.7s ease-in-out infinite; }
  .app .stop { font-size: 12px; font-weight: 600; color: var(--a-red); background: rgba(235, 87, 87, .14); border-radius: 999px; padding: 5px 13px; }

  /* single-pane mockups used inside the tabbed module */
  .app.mini { box-shadow: 0 26px 54px -30px rgba(7, 31, 25, .45); }
  .app.mini .pane { padding: 18px 20px; min-height: 268px; }
  .app.mini .askbar {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--a-accent); color: var(--a-onaccent);
    border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-weight: 600;
  }
  .app.mini .bubble {
    background: rgba(211, 243, 107, .13); border: 1px solid rgba(211, 243, 107, .25);
    border-radius: 10px; padding: 10px 13px; font-size: 12.5px; margin-bottom: 10px;
  }
  .app.mini .reply { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: var(--a-muted); }
  .app.mini .reply b { color: var(--a-text); font-weight: 600; }
  .app.mini .meter { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 11.5px; color: var(--a-muted); }
  .app.mini .meter i { display: block; height: 4px; border-radius: 2px; flex: 1; background: rgba(255,255,255,.09); position: relative; overflow: hidden; }
  .app.mini .meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--lvl); border-radius: 2px; background: var(--c); }

  /* ---------- Statement ---------- */
  .statement { padding: 96px 0 40px; text-align: center; }
  .statement p {
    margin: 0 auto; max-width: 760px;
    font-size: clamp(23px, 3.3vw, 33px); line-height: 1.32; font-weight: 600; letter-spacing: -0.022em;
    text-wrap: balance;
  }
  /* One highlight colour, not three. The old coral/blue/purple keywords
     were a fourth, fifth and sixth hue doing a job the lime already does. */
  /* Tight horizontal padding: any more and the highlight opens a visible
     gap between the phrase and the comma that follows it. */
  .statement .kw { background: var(--lime-soft); border-radius: 6px; padding: 0 3px 2px; }
  .statement .kw-strong { color: var(--accent); }
  .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 880px; margin: 56px auto 0; text-align: left; }
  .pillar { border-top: 1.5px solid var(--ink); padding-top: 16px; }
  .pillar svg { width: 20px; height: 20px; color: var(--accent); margin-bottom: 10px; }
  .pillar b { display: block; font-size: 15.5px; margin-bottom: 4px; letter-spacing: -0.014em; font-weight: 600; }
  .pillar p { margin: 0; color: var(--body); font-size: 14px; line-height: 1.55; }

  /* ---------- Section scaffolding ---------- */
  section { padding: 88px 0; }
  .shead-l { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 600; letter-spacing: .107em; text-transform: uppercase;
    color: var(--body); margin-bottom: 14px;
  }
  .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 2.5px; background: var(--lime); border: 1px solid rgba(14,21,18,.2); flex: none; }
  .eyebrow.on-dark { color: rgba(255, 255, 255, .72); }
  .eyebrow.on-dark::before { border-color: transparent; }
  h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; margin: 0; letter-spacing: -0.026em; text-wrap: balance; }
  .shead-l .lede { color: var(--body); margin: 14px 0 0; max-width: 58ch; font-size: 16.5px; }
  .sidelink { white-space: nowrap; font-weight: 600; font-size: 15px; text-decoration: none; padding-bottom: 4px; border-bottom: 1.5px solid var(--lime); color: var(--ink); }
  .sidelink:hover { border-bottom-color: var(--accent); }

  /* ---------- Tabbed capability module ---------- */
  .tablist { display: none; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
  .tabs.js .tablist { display: flex; }
  .tablist button {
    font: 600 15px/1 var(--font); color: var(--accent);
    background: var(--lime-soft); border: 1px solid transparent;
    border-radius: var(--r-pill); padding: 12px 20px; cursor: pointer;
    transition: background .16s ease, color .16s ease;
  }
  .tablist button:hover { background: #E4F5C4; }
  .tablist button[aria-selected="true"] { background: var(--forest); color: #fff; }
  .tpanel { display: grid; grid-template-columns: 1fr 1.25fr; gap: 34px; align-items: center; }
  /* `display: grid` above outranks the UA stylesheet's [hidden] rule, so the
     attribute alone would not hide anything. This is what actually switches. */
  .tpanel[hidden] { display: none; }
  .tabs.js .tpanel + .tpanel { margin-top: 0; }
  .tpanel + .tpanel { margin-top: 48px; }
  .tpanel h3 { font-size: 25px; margin: 0 0 10px; letter-spacing: -0.026em; text-wrap: balance; }
  .tpanel > div > p { color: var(--body); margin: 0 0 20px; font-size: 15.5px; }
  .tpanel ul { list-style: none; margin: 0; padding: 0; }
  .tpanel li { position: relative; padding: 7px 0 7px 27px; font-size: 15px; }
  .tpanel li::before {
    content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px;
    border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
    transform: rotate(-45deg);
  }
  .tpanel li .pro { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); background: var(--lime-soft); border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: 1px; }

  /* ---------- Dark privacy section ----------
     Inset and rounded with a half-pixel light along the top edge: the
     detail that makes a dark block read as an object on the page rather
     than a stripe printed through it. */
  .darkwrap { padding: 0 28px; }
  .dark {
    background: var(--forest); color: #fff;
    max-width: var(--maxw); margin: 0 auto;
    border-radius: var(--r-band); padding: 84px 0;
    box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .28);
  }
  .dark .wrap { padding: 0 56px; }
  .dark h2 { color: #fff; }
  .dark .lede { color: #B5C4BC; }
  .dark .shead-c { text-align: center; max-width: 680px; margin: 0 auto 48px; }
  .dark .shead-c .lede { margin: 16px auto 0; font-size: 16.5px; }
  /* This section's heading takes an illustration beside it: the seal holding
     the notes, which is what the whole flow below is about keeping on your
     Mac. Two columns while there's room, stacked and centred when there isn't. */
  .privacy-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 36px; margin-bottom: 48px; }
  .dark .privacy-head .shead-c { text-align: left; margin: 0; max-width: 620px; }
  .dark .privacy-head .shead-c .lede { margin-left: 0; margin-right: 0; }
  .notes-seal { width: clamp(180px, 25vw, 310px); height: auto; }
  @media (max-width: 900px) {
    .privacy-head { grid-template-columns: 1fr; justify-items: center; gap: 18px; margin-bottom: 36px; }
    .dark .privacy-head .shead-c { text-align: center; }
    .notes-seal { width: min(250px, 60vw); }
  }
  .flow { display: flex; align-items: stretch; justify-content: center; gap: 14px; }
  .fnode { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
  .chip {
    display: flex; align-items: center; gap: 10px;
    background: var(--forest-2); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
    padding: 12px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; color: #fff;
  }
  .chip svg { width: 18px; height: 18px; color: var(--lime); flex: none; }
  .arr { align-self: center; flex: none; width: 44px; height: 22px; color: var(--lime); }
  .arr svg { width: 100%; height: 100%; display: block; }
  .macnode {
    position: relative; background: var(--forest-2); border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--r-card); padding: 18px 22px 16px; text-align: center; max-width: 250px;
  }
  .macnode .mini { width: 132px; height: 62px; margin: 0 auto 12px; background: var(--forest-deep); border-radius: 8px; padding: 8px 10px; text-align: left; border: 1px solid rgba(255,255,255,.08); }
  .macnode .mini i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); margin-bottom: 6px; }
  .macnode .mini i:nth-child(1) { width: 70%; background: rgba(211, 243, 107, .5); }
  .macnode .mini i:nth-child(2) { width: 92%; }
  .macnode .mini i:nth-child(3) { width: 58%; }
  .macnode b { display: block; font-size: 15.5px; margin-bottom: 2px; color: #fff; font-weight: 600; }
  .macnode span { display: block; font-size: 13px; color: #B5C4BC; line-height: 1.45; }
  .nocloud {
    position: absolute; top: -46px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: #B5C4BC;
    border: 1.5px dashed rgba(255, 255, 255, .3); border-radius: 999px; padding: 6px 13px;
  }
  .nocloud svg { width: 16px; height: 16px; color: #B5C4BC; opacity: .9; }
  .notenode { position: relative; text-align: center; }
  .doc {
    position: relative; width: 148px; margin: 0 auto 12px;
    background: #FFFDF6; border: 1px solid rgba(14, 21, 18, .25); border-radius: 10px;
    padding: 20px 16px 26px;
  }
  .doc::before {
    content: ""; position: absolute; top: 0; right: 0;
    border-style: solid; border-width: 0 22px 22px 0;
    border-color: var(--forest) var(--forest) #EFE9DA #EFE9DA;
    border-radius: 0 10px 0 8px;
  }
  .doc i { display: block; height: 6px; border-radius: 3px; background: rgba(14, 21, 18, .18); margin-bottom: 9px; }
  .doc i:nth-child(1) { width: 62%; background: rgba(14, 21, 18, .4); }
  .doc i:nth-child(2) { width: 88%; }
  .doc i:nth-child(3) { width: 74%; }
  .doc i:nth-child(4) { width: 82%; margin-bottom: 0; }
  .doc .stamp { position: absolute; right: -18px; bottom: -18px; width: 62px; height: 62px; transform: rotate(-9deg); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
  .notenode b { display: block; font-size: 15.5px; margin-bottom: 2px; color: #fff; font-weight: 600; }
  .notenode > span { display: block; font-size: 13px; color: #B5C4BC; max-width: 190px; margin: 0 auto; line-height: 1.45; }
  .arr.down { display: none; }

  /* ---------- Compare ---------- */
  .cmp-scroll { max-width: 880px; margin: 0 auto; overflow-x: auto; }
  table.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
  .cmp caption { caption-side: bottom; font-size: 13px; color: var(--body); padding-top: 16px; }
  .cmp th, .cmp td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
  .cmp thead th { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--body); border-bottom: 1px solid var(--line-strong); padding-top: 0; }
  .cmp tbody th { font-weight: 600; font-size: 14.5px; color: var(--ink); width: 34%; }
  .cmp td { color: var(--body); }
  .cmp .sealcol { background: var(--lime-soft); color: var(--ink); font-weight: 600; }
  .cmp thead .sealcol { color: var(--accent); border-radius: 12px 12px 0 0; }
  .cmp tbody tr:last-child .sealcol { border-radius: 0 0 12px 12px; }
  .cmp td.sealcol { border-bottom-color: rgba(14, 21, 18, .08); }
  .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }

  /* ---------- Pricing ---------- */
  .plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; max-width: 880px; margin: 0 auto; align-items: start; }
  .plan { background: var(--paper); border: 1px solid var(--line-strong); border-radius: 18px; padding: 30px 28px; display: flex; flex-direction: column; }
  .plan .pname { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; flex-wrap: wrap; }
  .plan .chip-eb {
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    background: var(--lime); color: var(--ink); border-radius: 999px; padding: 3px 10px;
  }
  .price { font-size: 50px; font-weight: 600; letter-spacing: -0.035em; margin: 14px 0 2px; line-height: 1; font-variant-numeric: tabular-nums; }
  .price .was { font-size: 18px; font-weight: 500; color: var(--body); text-decoration: line-through; margin-left: 9px; letter-spacing: 0; }
  .price .per { font-size: 15px; font-weight: 500; color: var(--body); margin-left: 6px; letter-spacing: 0; }
  .plan .terms { color: var(--body); font-size: 13.5px; margin: 6px 0 18px; line-height: 1.55; }
  .plan ul { list-style: none; margin: 0 0 24px; padding: 0; font-size: 14.5px; }
  .plan li { padding: 5.5px 0 5.5px 26px; position: relative; }
  .plan li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 12px; height: 7px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
  .plan .foot { margin-top: auto; }
  .plan .foot .btn { width: 100%; }
  .plan.pro { background: var(--forest); border-color: var(--forest); color: #fff; box-shadow: inset 0 .5px 0 rgba(255,255,255,.26), 0 30px 70px -40px rgba(7, 31, 25, .8); }
  .plan.pro .price .was, .plan.pro .price .per, .plan.pro .terms { color: #B5C4BC; }
  .plan.pro li::before { border-color: var(--lime); }
  .plan.pro .note { color: #B5C4BC; }
  .lifetime { display: block; text-align: center; margin-top: 14px; font-size: 14.5px; color: var(--lime); }
  .plan .note { color: var(--body); font-size: 13px; margin: 16px 0 0; line-height: 1.55; }
  .strip { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; color: var(--body); font-size: 13.5px; margin: 36px auto 0; max-width: 820px; }
  .strip span { display: flex; align-items: center; gap: 8px; }
  .strip svg { width: 13px; height: 13px; color: var(--accent); flex: none; }

  /* ---------- FAQ ---------- */
  .faq { max-width: 700px; margin: 56px auto 0; }
  .faq details { border-top: 1px solid var(--line); }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; padding: 17px 36px 17px 2px; list-style: none; position: relative; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
    font-size: 21px; font-weight: 400; color: var(--accent); transition: rotate .2s ease;
  }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq p { color: var(--body); font-size: 14.5px; margin: 0 0 18px; padding: 0 2px; }

  /* ---------- Footer band ---------- */
  .footband { background: var(--forest-deep); color: #fff; padding: 88px 0 40px; margin-top: 88px; }
  .footband .top { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 70px; }
  .footband h2 { font-size: clamp(32px, 4.6vw, 52px); max-width: 16ch; }
  .footband .top p { color: #B5C4BC; margin: 14px 0 0; font-size: 16px; max-width: 460px; }
  /* The seal with the shield closes the page, in place of the wax stamp that
     used to sit here — the stamp still appears once, inside the flow diagram
     above, where it means "your note, sealed". Bigger than the stamp was,
     because it is a character rather than a mark. */
  .footband .shieldimg { width: clamp(180px, 24vw, 300px); height: auto; flex: none; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .45)); }
  @media (max-width: 900px) { .footband .shieldimg { width: min(230px, 56vw); } }
  .footband .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
  .footgrid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 36px; }
  .footgrid .fbrand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; }
  .footgrid .fbrand img { width: 26px; height: 26px; display: block; }
  .footgrid .fbrand + p { color: #8FA69A; font-size: 13px; margin: 10px 0 0; max-width: 300px; line-height: 1.6; }
  .fcols { display: flex; gap: 64px; flex-wrap: wrap; }
  .fcol b { display: block; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #8FA69A; margin-bottom: 12px; font-weight: 600; }
  .fcol a { display: block; color: #DCE7E0; text-decoration: none; font-size: 14.5px; padding: 5px 0; }
  .fcol a:hover { color: var(--lime); }
  .legal { color: #8FA69A; font-size: 12.5px; margin-top: 44px; }

  /* ---------- Release-notes signup (footer band) ---------- */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .notify {
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px 40px; flex-wrap: wrap;
    margin: 70px 0 0; padding: 30px 34px;
    background: var(--forest-2); border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
  }
  .notify-copy { flex: 1 1 340px; max-width: 52ch; }
  /* .footband h2 is the 52px display size capped at 16ch — neither belongs on
     a heading this small, and the cap alone would break it across two lines. */
  .notify h2 { font-size: 22px; letter-spacing: -0.02em; max-width: none; }
  .notify p { color: #B5C4BC; font-size: 14.5px; line-height: 1.6; margin: 8px 0 0; }
  .notify-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
  .notify-form input {
    min-width: 260px; min-height: 48px; padding: 10px 16px;
    font: inherit; font-size: 15px; color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 12px;
  }
  .notify-form input::placeholder { color: #7F978B; }
  .notify-form input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-color: transparent; }
  .notify-form input:disabled { opacity: .5; }
  /* Takes the full row under the field so a message never resizes the card. */
  .notify-status { flex-basis: 100%; margin: 0; font-size: 13.5px; min-height: 1.2em; }
  .notify-status:empty { display: none; }
  .notify-status.ok { color: var(--lime); }
  .notify-status.bad { color: #F3B0A0; }
  @media (max-width: 760px) {
    .notify { padding: 26px 22px; }
    .notify-form, .notify-form input { width: 100%; }
    .notify-form .btn { width: 100%; justify-content: center; }
  }

  /* ---------- Motion ---------- */
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }
  @keyframes appear { from { opacity: 0; transform: translateY(3px); } }
  @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .7; } }
  @keyframes blinkc { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }
  @keyframes caretb { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .app .caret { display: none; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1200px) {
    .proof.p1 { left: 10px; }
    .proof.p2 { right: 10px; }
  }
  @media (max-width: 980px) {
    .tpanel { grid-template-columns: 1fr; gap: 24px; }
    .dark .wrap { padding: 0 32px; }
  }
  @media (max-width: 880px) {
    section { padding: 64px 0; }
    .proof { display: none; }
    .app .cols { grid-template-columns: 1fr 264px; }
    .app .side { display: none; }
    .pillars { grid-template-columns: 1fr; gap: 26px; }
    .dark { padding: 64px 0; border-radius: 20px; }
  }
  @media (max-width: 720px) {
    .flow { flex-direction: column; align-items: center; gap: 18px; }
    .fnode { flex-direction: row; }
    .arr.across { display: none; }
    .arr.down { display: block; width: 22px; height: 34px; }
    .nocloud { position: static; transform: none; margin: 0 auto 14px; width: fit-content; }
    .plans { grid-template-columns: 1fr; }
    .shead-l { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 640px) {
    /* The hidden nav was what pushed the button right (margin: 0 auto),
       so the button has to take over the job. */
    nav.links { display: none; }
    .bar .btn.small { margin-left: auto; }
    .hero { padding-top: 48px; }
    .darkwrap { padding: 0 18px; }
    .dark .wrap { padding: 0 22px; }
    .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
    .cmp tbody tr {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px;
      background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
      padding: 16px 16px 14px; margin-bottom: 12px;
    }
    .cmp tbody th, .cmp td { border: none; padding: 0; }
    .cmp tbody th { grid-column: 1 / -1; width: auto; margin-bottom: 10px; font-size: 14.5px; }
    .cmp td { font-size: 14px; }
    .cmp td::before {
      display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
      margin-bottom: 3px; color: var(--body);
    }
    .cmp td.sealcol { background: none; }
    /* Stacked cards lose the header row, so each cell reprints its column
       name. A table that compares something else overrides these two on
       the element: style="--col-a: 'Seal'; --col-b: 'Granola'". */
    .cmp td.sealcol::before { content: var(--col-a, "Seal"); color: var(--accent); }
    .cmp td:last-child::before { content: var(--col-b, "Cloud tools"); }
  }
  @media (max-width: 600px) {
    .app .cols { grid-template-columns: 1fr; }
    .app .tx { display: none; }
    .band { padding: 36px 0; }
  }
  @media (max-width: 430px) {
    .wrap { padding: 0 18px; }
    .btn.small { padding: 8px 14px; }
  }

  /* ---------- Article pages ----------
     The landing page argues in bands; a written page argues in
     paragraphs. Same tokens, same restraint — a narrower measure, and
     a hero that starts a sentence rather than shouting a slogan. */
  .crumbs { font-size: 14px; color: var(--body); padding: 26px 0 0; }
  .crumbs a { color: var(--body); text-decoration: none; border-bottom: 1px solid var(--line); }
  .crumbs a:hover { color: var(--ink); border-bottom-color: var(--accent); }
  .crumbs span { margin: 0 8px; opacity: .5; }

  .page-hero { padding: 40px 0 8px; max-width: 46rem; }
  .page-hero h1 {
    font-size: clamp(34px, 5vw, 54px); line-height: 1.06; margin: 0;
    letter-spacing: -0.03em; text-wrap: balance;
  }
  .page-hero h1 .hl {
    background: linear-gradient(transparent 62%, var(--lime) 62%);
    padding: 0 2px;
  }
  .page-hero .sub { color: var(--body); font-size: 19px; margin: 20px 0 0; max-width: 42rem; }
  .page-hero .meta { font-size: 14px; color: var(--body); margin: 22px 0 0; }

  /* The measure is the point: ~68 characters keeps long-form readable. */
  .prose { max-width: 46rem; padding-bottom: 8px; }
  .prose h2 { font-size: clamp(25px, 3vw, 33px); line-height: 1.15; margin: 56px 0 0; }
  .prose h3 { font-size: 20px; line-height: 1.3; margin: 36px 0 0; }
  .prose p { color: var(--body); margin: 16px 0 0; font-size: 16.5px; }
  .prose ul, .prose ol { color: var(--body); margin: 16px 0 0; padding-left: 0; list-style: none; }
  .prose ol { counter-reset: step; }
  .prose li { position: relative; padding-left: 26px; margin-top: 9px; font-size: 16.5px; }
  .prose ul > li::before {
    content: ""; position: absolute; left: 4px; top: .62em;
    width: 7px; height: 7px; border-radius: 2px; background: var(--lime);
    border: 1px solid rgba(14,21,18,.2);
  }
  .prose ol > li::before {
    counter-increment: step; content: counter(step) ".";
    position: absolute; left: 0; top: 0; font-weight: 600; color: var(--accent);
  }
  .prose strong { color: var(--ink); font-weight: 600; }
  .prose a { color: var(--accent); text-underline-offset: 3px; }
  .prose > :first-child { margin-top: 0; }

  /* A quiet aside — used for the caveats that keep a claim honest. */
  .callout {
    margin: 32px 0 0; padding: 20px 22px; background: var(--mist);
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 0 var(--r-card) var(--r-card) 0;
  }
  .callout p { margin: 0; font-size: 15.5px; }
  .callout p + p { margin-top: 10px; }
  .callout b { color: var(--ink); }

  /* The one-line answer, stated before the argument that earns it. */
  .verdict {
    margin: 28px 0 0; padding: 24px 26px; border-radius: var(--r-card);
    background: var(--forest); color: #fff;
  }
  .verdict b { display: block; font-size: 13px; letter-spacing: .107em; text-transform: uppercase; color: var(--lime); margin-bottom: 8px; }
  .verdict p { margin: 0; color: rgba(255,255,255,.86); font-size: 16.5px; }

  .prose .cmp-scroll { margin-top: 28px; }
  .prose .faq { margin-top: 28px; }

  /* Next-step links at the foot of a page, so no page is a dead end. */
  .readnext { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 26px; }
  .readnext a {
    display: block; padding: 18px 20px; border: 1px solid var(--line);
    border-radius: var(--r-card); text-decoration: none; background: var(--paper);
    transition: border-color .18s ease, transform .18s ease;
  }
  .readnext a:hover { border-color: var(--accent); transform: translateY(-1px); }
  .readnext b { display: block; color: var(--ink); font-weight: 600; font-size: 16px; }
  .readnext span { display: block; color: var(--body); font-size: 14.5px; margin-top: 5px; }

  /* The download rail that closes every article page. */
  .endcta { margin: 56px 0 0; padding: 34px; border-radius: var(--r-band); background: var(--mist); border: 1px solid var(--line); }
  .endcta h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 32px); }
  .endcta p { margin: 0 0 20px; color: var(--body); max-width: 46ch; }
  .endcta .cta { display: flex; flex-wrap: wrap; gap: 12px; }

  @media (max-width: 640px) {
    .page-hero { padding-top: 26px; }
    .prose h2 { margin-top: 44px; }
    .endcta { padding: 26px 22px; }
  }