/* SealNest website — tokens, base elements and the shared chrome.
   FOUNDATION FILE. Every page links this file FIRST, then its own stylesheet.

   The look: natural and neutral. Warm stone and paper, warm dark ink, and ONE quiet natural
   accent. Anchored on the logo's own colour, "Stone" (assets/mark.svg: oat on warm grey-beige,
   #9A9284 to #7A7265). No coral, no orange: that colour is ReelNest's. No teal, nothing bright.
     - The accent is the colour for actions and for "yours". Grey, washed out, is "them".
     - The site never recolours the logo.

   COLOUR IS IN TWO LAYERS.
     1a. Palettes. Each palette gives every colour twice: its light value (--l-...) and its dark
         value (--d-...). The default palette, "Stone & moss", sits on bare :root. Three more can
         be chosen with ONE attribute on the root element:
             <html data-palette="linen-forest">   Linen & forest
             <html data-palette="oat-bark">       Oat & bark, with sage
             <html data-palette="olive-stone">    Olive & stone
         (data-palette="stone-moss", or no attribute, is the default.)
         To make another palette the default for good: copy its values over the ones on :root.
     1b. The theme switch. The names the pages use (--ground, --ink, --accent ...) point at the
         light values or the dark values. Three states:
             <html data-theme="light">   light, whatever the device says
             <html data-theme="dark">    dark, whatever the device says
             no attribute                the device decides (prefers-color-scheme)
         The pages never set data-theme themselves; a host or a preview may.
   Every palette is checked for contrast by  node tools/check.js  (it reads this file).
   Dark is a warm near-black (the logo's own dark ground), never blue-black.

   Contents
     1. Tokens (1a palettes, 1b the theme switch, 1c type, space, radius, motion)
     2. Base elements
     3. Shared chrome: wrap, buttons, header, footer, bands, chips, checklist, the two-part
        switch, secrets, callout, faq, long-form .prose layout, reveal-on-scroll, helpers
*/

/* ============================== 1. TOKENS ============================== */

/* ---- 1a. PALETTES: every colour, light (--l-) and dark (--d-) ----
   What each name is for:
     ground / surface / surface-2 / surface-3   the page, a card, a soft band, a pressed or deeper fill
     ink / ink-2 / muted                        text (muted is 4.5:1 or better on ground, surface and surface-2)
     line / line-2                              hairlines, and stronger outlines
     them / them-fill                           "not yours yet": washed-out lines and card faces (artwork only)
     accent                                     fills, outlines, artwork (3:1 or better). Never small text.
     accent-ink                                 the accent for TEXT and thin strokes (4.5:1 or better everywhere)
     accent-solid / on-accent                   a button's background, and the words on it
     accent-soft                                a pale wash of the accent: callouts, the app's eye buttons, its
                                                "Change" pill and its chosen category chip
     seal / seal-deep / seal-light              the wax seal
     warn                                       inside the demo phone only: "Expires ... in 3 weeks" (amber)
     danger                                     inside the demo phone only: "Expired ...", "Remove Field" (red)

   The default palette IS the app's. Its values were read off the app's own screens (build of
   2026-10-01, integration-review-screens): page #F4F1EB / #171512, panels #FDFBF7 / #1F1C18, words
   #23201B / #EFEAE0, grey words #686257 / #A39C8E, moss #4C5D37 / #B4C498, filled buttons #4C5D37 /
   #647848 with white words, soft fills #E8E8E0 / #313027, amber #7D5A12 / #D9B45B, red #A8321F / #EE8A7C.
   Change one of those only if the app changes. The other three palettes are offers for Slade to choose
   between; each keeps the same structure (white words on a filled button in light and in dark).     */

/* Stone & moss (the default, and the app's own): the logo's stone for the paper and the seal, moss for the living part */
:root{
  /* light */
  --l-ground:#F4F1EB; --l-surface:#FDFBF7; --l-surface-2:#EAE6DD; --l-surface-3:#DED8CC;
  --l-ink:#23201B; --l-ink-2:#4B463D; --l-muted:#686257;
  --l-line:#DFD9CD; --l-line-2:#C9C1B2; --l-them:#A49F95; --l-them-fill:#E9E5DC;
  --l-accent:#74855A; --l-accent-ink:#4C5D37; --l-accent-solid:#4C5D37; --l-on-accent:#FFFFFF; --l-accent-soft:#E8E8E0;
  --l-seal:#8E8677; --l-seal-deep:#655E51; --l-seal-light:#BDB6A6; --l-warn:#7D5A12; --l-danger:#A8321F;
  /* dark */
  --d-ground:#171512; --d-surface:#1F1C18; --d-surface-2:#25221D; --d-surface-3:#302C26;
  --d-ink:#EFEAE0; --d-ink-2:#CBC4B6; --d-muted:#A39C8E;
  --d-line:#332F28; --d-line-2:#494338; --d-them:#6E685D; --d-them-fill:#2B2722;
  --d-accent:#9CAD80; --d-accent-ink:#B4C498; --d-accent-solid:#647848; --d-on-accent:#FFFFFF; --d-accent-soft:#313027;
  --d-seal:#8E8677; --d-seal-deep:#5E574B; --d-seal-light:#C2BBAB; --d-warn:#D9B45B; --d-danger:#EE8A7C;

  /* the same in every palette: the drawn phone, the shadows, the seal's own shadow, and inside the demo
     phone the app's green for "Strong password" (its own role colour, #1F7A45 / #7FCB95) */
  --l-strong:#1F7A45; --d-strong:#7FCB95;
  /* inside the demo phone: the app's large titles and bold headings are the system's own label colour,
     black in light and white in dark, a shade stronger than its rows (#23201B / #EFEAE0) */
  --l-title:#000000; --d-title:#FFFFFF;
  --l-phone-body:#1B1814; --l-phone-edge:#1B1814;
  --d-phone-body:#2E2923; --d-phone-edge:#6A6052;
  --l-seal-shade:rgba(34,29,20,.42); --d-seal-shade:rgba(0,0,0,.55);
  --l-shadow:0 1px 2px rgba(45,38,25,.05), 0 14px 38px -16px rgba(45,38,25,.22);
  --l-shadow-lg:0 2px 4px rgba(45,38,25,.06), 0 30px 70px -28px rgba(45,38,25,.4);
  --d-shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 46px -18px rgba(0,0,0,.7);
  --d-shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 40px 80px -30px rgba(0,0,0,.85);
  /* things that have a colour of their own, the same in light and dark: the oat of the logo's
     mark, and the stone of the drawn payment card */
  --oat:#EFE7D6; --oat-light:#FBF7EF; --stone-1:#A39B8C; --stone-2:#6B6458;
  /* the drawn iPhone's island is black in light and in dark, as a real one is */
  --island:#0B0A09;
  /* the demo's camera: a photograph of a table under the license, and the app's own guidance band
     (white words on black at 65%), the same in light and dark, as a photograph is */
  --photo-1:#5A5247; --photo-2:#2A2621; --cam-guide:rgba(0,0,0,.65); --cam-guide-ink:#FFFFFF;
  /* the drawn documents in the demo's camera and review screens (a license, a payment card, and their backs):
     physical objects, so the same in light and dark and in every palette; and the corners of the camera's
     frame once it has found one */
  --doc-paper:#FBF8F1; --doc-ink:#2B2620; --doc-2:#8A8274; --doc-band:#4C5D37; --doc-photo-a:#D9D2C3; --doc-photo-b:#BDB4A2;
  --doc-label:#A8321F; --doc-bar:#1E1A15; --doc-sig:#F3EEE3; --doc-chip-a:#E9DFC6; --doc-chip-b:#C4B48F; --cam-found:#B4C498;
}

/* Linen & forest: pale linen, and one deep woodland green */
:root[data-palette="linen-forest"]{
  /* light */
  --l-ground:#F8F4EB; --l-surface:#FFFDF8; --l-surface-2:#EFE9DC; --l-surface-3:#E3DBCA;
  --l-ink:#1D211C; --l-ink-2:#434A40; --l-muted:#63695C;
  --l-line:#E4DDCD; --l-line-2:#CFC6B1; --l-them:#A6A297; --l-them-fill:#ECE8DD;
  --l-accent:#4F7862; --l-accent-ink:#2E4B3A; --l-accent-solid:#2E4B3A; --l-on-accent:#FFFFFF; --l-accent-soft:#DFEAE1;
  --l-seal:#416350; --l-seal-deep:#274232; --l-seal-light:#86A893; --l-warn:#7D5A12; --l-danger:#A8321F;
  /* dark */
  --d-ground:#131613; --d-surface:#1A1E1A; --d-surface-2:#20251F; --d-surface-3:#2A3029;
  --d-ink:#ECEDE4; --d-ink-2:#C4C8BA; --d-muted:#9BA092;
  --d-line:#2C322B; --d-line-2:#414A3F; --d-them:#666C61; --d-them-fill:#252A24;
  --d-accent:#7FA890; --d-accent-ink:#9FC6AD; --d-accent-solid:#3F6B52; --d-on-accent:#FFFFFF; --d-accent-soft:#25332A;
  --d-seal:#4B725C; --d-seal-deep:#2A4534; --d-seal-light:#8FB29D; --d-warn:#D9B45B; --d-danger:#EE8A7C;
}

/* Oat & bark, with sage: warm oat paper, bark brown for words and buttons, sage for the drawings */
:root[data-palette="oat-bark"]{
  /* light */
  --l-ground:#F5EFE3; --l-surface:#FEFAF2; --l-surface-2:#ECE3D2; --l-surface-3:#DFD3BE;
  --l-ink:#2A211A; --l-ink-2:#51443A; --l-muted:#6F6156;
  --l-line:#E2D7C3; --l-line-2:#CDBFA6; --l-them:#A9A093; --l-them-fill:#EAE2D3;
  --l-accent:#72896C; --l-accent-ink:#6A4A35; --l-accent-solid:#6A4A35; --l-on-accent:#FFFFFF; --l-accent-soft:#ECE4D8;
  --l-seal:#7E5843; --l-seal-deep:#573A2B; --l-seal-light:#B8927B; --l-warn:#7D5A12; --l-danger:#A8321F;
  /* dark */
  --d-ground:#17130F; --d-surface:#201A15; --d-surface-2:#27201A; --d-surface-3:#322A22;
  --d-ink:#F1E9DC; --d-ink-2:#D0C4B2; --d-muted:#A89B8A;
  --d-line:#352C24; --d-line-2:#4C4035; --d-them:#70665A; --d-them-fill:#2C2520;
  --d-accent:#9DB094; --d-accent-ink:#D8B699; --d-accent-solid:#8A6248; --d-on-accent:#FFFFFF; --d-accent-soft:#372C24;
  --d-seal:#8A614A; --d-seal-deep:#5B3D2D; --d-seal-light:#C09A83; --d-warn:#D9B45B; --d-danger:#EE8A7C;
}

/* Olive & stone: cooler stone paper, and an earthy olive */
:root[data-palette="olive-stone"]{
  /* light */
  --l-ground:#F0EEE7; --l-surface:#FBFAF6; --l-surface-2:#E5E2D8; --l-surface-3:#D7D3C6;
  --l-ink:#22221C; --l-ink-2:#48483D; --l-muted:#65655A;
  --l-line:#DBD8CC; --l-line-2:#C3BFB0; --l-them:#A3A096; --l-them-fill:#E6E3DA;
  --l-accent:#7F7F45; --l-accent-ink:#56561F; --l-accent-solid:#585822; --l-on-accent:#FFFFFF; --l-accent-soft:#E8E7D0;
  --l-seal:#7A783F; --l-seal-deep:#55532A; --l-seal-light:#AEAC76; --l-warn:#7D5A12; --l-danger:#A8321F;
  /* dark */
  --d-ground:#151510; --d-surface:#1D1D17; --d-surface-2:#23231C; --d-surface-3:#2E2E25;
  --d-ink:#EDECE1; --d-ink-2:#C8C6B6; --d-muted:#A09E8E;
  --d-line:#313128; --d-line-2:#47473A; --d-them:#6C6A5D; --d-them-fill:#292921;
  --d-accent:#AEAC6C; --d-accent-ink:#C8C68A; --d-accent-solid:#6E6C2E; --d-on-accent:#FFFFFF; --d-accent-soft:#313120;
  --d-seal:#7F7D44; --d-seal-deep:#55532A; --d-seal-light:#B3B17B; --d-warn:#D9B45B; --d-danger:#EE8A7C;
}

/* ---- 1b. THE THEME SWITCH: light on bare :root; dark when the device says so (unless the root
   says data-theme="light"); dark again when the root says data-theme="dark".
   The two dark blocks are the same list. Change one, change the other (the checker compares them). */
:root{
  color-scheme:light;
  --ground:var(--l-ground); --surface:var(--l-surface); --surface-2:var(--l-surface-2); --surface-3:var(--l-surface-3);
  --ink:var(--l-ink); --ink-2:var(--l-ink-2); --muted:var(--l-muted);
  --line:var(--l-line); --line-2:var(--l-line-2); --them:var(--l-them); --them-fill:var(--l-them-fill);
  --accent:var(--l-accent); --accent-ink:var(--l-accent-ink); --accent-solid:var(--l-accent-solid); --on-accent:var(--l-on-accent); --accent-soft:var(--l-accent-soft);
  --seal:var(--l-seal); --seal-deep:var(--l-seal-deep); --seal-light:var(--l-seal-light); --seal-shade:var(--l-seal-shade); --warn:var(--l-warn); --danger:var(--l-danger); --strong:var(--l-strong); --title:var(--l-title);
  --phone-body:var(--l-phone-body); --phone-edge:var(--l-phone-edge);
  --shadow:var(--l-shadow); --shadow-lg:var(--l-shadow-lg);
  /* a card that must stand off the band it sits on (the plan cards, the things in the tray) */
  --card:var(--l-surface); --card-line:var(--l-line); --card-soft:var(--l-line-2);
  --app-seg:var(--l-surface);     /* inside the demo phone: the chosen part of a segmented switch */
  /* the demo's camera view and the drawn license */
  --cam:var(--l-phone-body); --paper:var(--l-surface); --paper-ink:var(--l-ink); --paper-2:var(--l-muted); --paper-fill:var(--l-surface-2);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:var(--d-ground); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3);
    --ink:var(--d-ink); --ink-2:var(--d-ink-2); --muted:var(--d-muted);
    --line:var(--d-line); --line-2:var(--d-line-2); --them:var(--d-them); --them-fill:var(--d-them-fill);
    --accent:var(--d-accent); --accent-ink:var(--d-accent-ink); --accent-solid:var(--d-accent-solid); --on-accent:var(--d-on-accent); --accent-soft:var(--d-accent-soft);
    --seal:var(--d-seal); --seal-deep:var(--d-seal-deep); --seal-light:var(--d-seal-light); --seal-shade:var(--d-seal-shade); --warn:var(--d-warn); --danger:var(--d-danger); --strong:var(--d-strong); --title:var(--d-title);
    --phone-body:var(--d-phone-body); --phone-edge:var(--d-phone-edge);
    --shadow:var(--d-shadow); --shadow-lg:var(--d-shadow-lg);
    --card:var(--d-surface-3); --card-line:var(--d-line-2); --card-soft:var(--d-them);
    --app-seg:var(--d-line-2);
    --cam:var(--d-surface); --paper:var(--d-ink); --paper-ink:var(--d-ground); --paper-2:var(--d-line-2); --paper-fill:var(--d-muted);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:var(--d-ground); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3);
  --ink:var(--d-ink); --ink-2:var(--d-ink-2); --muted:var(--d-muted);
  --line:var(--d-line); --line-2:var(--d-line-2); --them:var(--d-them); --them-fill:var(--d-them-fill);
  --accent:var(--d-accent); --accent-ink:var(--d-accent-ink); --accent-solid:var(--d-accent-solid); --on-accent:var(--d-on-accent); --accent-soft:var(--d-accent-soft);
  --seal:var(--d-seal); --seal-deep:var(--d-seal-deep); --seal-light:var(--d-seal-light); --seal-shade:var(--d-seal-shade); --warn:var(--d-warn); --danger:var(--d-danger); --strong:var(--d-strong); --title:var(--d-title);
  --phone-body:var(--d-phone-body); --phone-edge:var(--d-phone-edge);
  --shadow:var(--d-shadow); --shadow-lg:var(--d-shadow-lg);
  --card:var(--d-surface-3); --card-line:var(--d-line-2); --card-soft:var(--d-them);
  --app-seg:var(--d-line-2);
  --cam:var(--d-surface); --paper:var(--d-ink); --paper-ink:var(--d-ground); --paper-2:var(--d-line-2); --paper-fill:var(--d-muted);
}

/* ---- 1c. Everything that is not a colour, and the names built from the colours above ---- */
:root{
  --focus:var(--accent-ink);        /* focus ring (3:1 or better against paper and surfaces) */
  --them-ink:var(--muted);          /* grey text when a "not yours yet" thing carries words */

  /* INSIDE the demo phone: the app's own look. With the default palette these are the app's own
     colours (see 1a); with another palette, the same roles in that palette.
       ground / surface      the page, and the app's panels (no outline: a panel is just lighter)
       ink / ink-2           words, grey words          glyph       moss icons and moss words
       btn / on-btn          a filled button            tile-line   the outline of an icon tile
       soft                  the eye buttons, the "Change" pill, the chosen category chip
       glass                 the floating search bar and its round buttons
       chev                  a row's chevron            dim         the app behind a sheet
       warn / danger         amber "Expires ...", red "Expired ..." and "Remove Field"            */
  --app-ground:var(--ground); --app-surface:var(--surface); --app-surface-2:var(--surface-2);
  --app-ink:var(--ink); --app-ink-2:var(--muted); --app-line:var(--line);
  --app-btn:var(--accent-solid); --app-on-btn:var(--on-accent);
  --app-tile:var(--accent-soft); --app-soft:var(--accent-soft); --app-tile-line:var(--accent-ink); --app-glyph:var(--accent-ink);
  --app-glass:color-mix(in srgb,var(--app-surface) 93%,var(--app-ink));
  --app-chev:color-mix(in srgb,var(--app-ink-2) 55%,var(--app-surface));
  --app-dim:color-mix(in srgb,var(--app-ground) 78%,#000);
  --app-warn:var(--warn); --app-danger:var(--danger); --app-strong:var(--strong); --app-title:var(--title);

  /* the drawn passport on the landing page: a booklet in the palette's own deep accent, the same in light and dark */
  --book-1:var(--l-accent); --book-2:var(--l-accent-ink);

  /* ---- radius ---- */
  --radius:14px; --radius-sm:9px; --radius-lg:22px; --radius-pill:100px;

  /* ---- layout + space (4px base) ---- */
  --maxw:1200px; --prose-w:720px; --gutter:24px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:82px;
  --band-pad:82px;         /* vertical padding of a landing-page band */
  --header-h:62px;

  /* ---- type ---- */
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-slab:Superclarendon,"Bookman Old Style",Rockwell,"Roboto Slab",Georgia,serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-h1:clamp(34px,6.4vw,74px);
  --fs-h2:clamp(28px,4.2vw,46px);
  --fs-h3:19px;
  --fs-lead:20px; --fs-say:19px; --fs-body:17px; --fs-small:15px; --fs-fine:14px; --fs-eyebrow:12px;
  --lh-tight:1.04; --lh-head:1.08; --lh-body:1.6;

  /* ---- motion (one easing family for the whole site) ---- */
  --ease:cubic-bezier(.2,.8,.2,1);          /* everything that arrives or settles */
  --ease-in:cubic-bezier(.55,0,.9,.35);     /* things that leave, and the seal dropping down */
  --ease-spring:cubic-bezier(.3,1.55,.5,1); /* the seal's squash, a tick landing */
  --dur-1:160ms; --dur-2:240ms; --dur-3:400ms; --dur-4:700ms;
}
@media (max-width:640px){
  :root{ --gutter:20px; --band-pad:58px; --fs-lead:18.5px; --fs-say:18px; --fs-body:16.5px; }
}

/* ============================ 2. BASE ELEMENTS ============================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:var(--accent-ink)}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.032em;font-weight:400}
h2{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:-.026em;font-weight:400}
h3{font-size:var(--fs-h3);line-height:1.3;font-weight:600}
p{margin:var(--sp-4) 0 0}
[hidden]{display:none!important}
/* Words that need scripts ("Tap anything.") stay out of the page when scripts are off. */
html:not(.js) .js-only{display:none}
/* .pg-unset marks words gated (data-if) on a config value that is EMPTY or OFF at launch.
   Scripts on: js/site.js removes them, or keeps them once the value is set. Scripts off (or
   before the config has been read) nothing would remove them, so they are hidden here. */
html:not(.cfg-ready) .pg-unset{display:none}
/* Fallback words that only show when a claim is switched OFF stay out of sight until
   js/site.js has read the config (it removes them or keeps them, then adds .cfg-ready). */
html.js:not(.cfg-ready) [data-if-not]{visibility:hidden}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
main:focus{outline:none}   /* "Skip to content" puts focus on the content; the content needs no ring */

/* Motion off: nothing animates, nothing transitions. Because every animated thing's
   DEFAULT style is its finished state (see SPEC.md, "The one motion rule"), the page is
   complete and readable like this. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================ 3. SHARED CHROME ============================ */

/* ---- helpers ---- */
.slab{font-family:var(--font-slab);font-weight:400}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.center{text-align:center}
/* an email address in running text: plain words, not a link (a mail link does nothing on a phone with no
   mail app, and some hosts block them), and one tap selects all of it, ready to copy */
.addr{color:var(--ink);font-weight:500;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent-solid);color:var(--on-accent);padding:12px 18px;z-index:100}
.skip:focus{left:0}
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);font-weight:700;margin:0 0 12px}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2);max-width:30em;margin:22px 0 0}
.say{font-size:var(--fs-say);line-height:1.5;color:var(--ink-2);max-width:32em;margin:16px 0 0}
.fine{font-size:var(--fs-fine);color:var(--muted);margin:14px 0 0}
.center .lead,.center .say,.center .fine{margin-left:auto;margin-right:auto}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
  background:var(--accent-solid);color:var(--on-accent);text-decoration:none;font-weight:600;font-size:16px;line-height:1.2;
  padding:13px 26px;border-radius:var(--radius-pill);border:0;cursor:pointer;
  transition:transform .12s ease,filter .12s ease}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.small{font-size:14px;padding:9px 17px;min-height:38px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);font-weight:500}
.btn.ghost:hover{border-color:var(--ink-2);filter:none}
.btnrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}
.center .btnrow{justify-content:center}
.link-arrow{color:var(--accent-ink);text-decoration:none;font-weight:500;font-size:16px}
.link-arrow:hover{text-decoration:underline}

/* The App Store button. js/site.js sets its words, its link and one of two classes.
   .is-soon  = no App Store address yet: a quiet line of text. Not a link, and it must never
               look like a button, because tapping it does nothing.
   .is-live  = address set in site.config.js: the solid green button. */
.btn.store-btn.is-soon{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:none;
  color:var(--muted);font-weight:500;font-size:15px;line-height:1.4;cursor:default}
.btn.store-btn.is-soon:hover{filter:none;transform:none}
.store-row{margin:14px 0 0}                              /* the line (or, later, the button) and the room above it */
html.store-live .store-row{margin-top:28px}
@media (max-width:640px){ .store-row .btn.is-live{width:100%} }

/* ---- header (markup: partials/header.html) ---- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--ground) 92%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;min-height:var(--header-h);padding:9px var(--gutter);max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand .mark{width:28px;height:28px;flex:0 0 auto}
.brand .wordmark{font-size:20px;letter-spacing:-.02em;font-weight:600;white-space:nowrap}
.brand .wordmark b{font-weight:600;color:var(--accent-ink)}
.nav-links{display:flex;gap:22px;flex:1;justify-content:flex-end}
.nav-links a{color:var(--ink-2);text-decoration:none;font-size:15px;padding:9px 0;border-bottom:2px solid transparent;white-space:nowrap}   /* 44px tall */
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.nav-end{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav-end:empty{display:none}

/* ---- footer (markup: partials/footer.html) ---- */
.site-footer{border-top:1px solid var(--line);padding:44px 0 52px;background:var(--surface-2)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px}
.footer-links a{color:var(--ink-2);text-decoration:none;font-size:15px;padding:10px 0}   /* 44px tall */
.footer-links a:hover,.footer-links a[aria-current="page"]{color:var(--ink);text-decoration:underline}
.footer-powered{margin:0;font-size:var(--fs-fine)}
.footer-powered a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--muted);text-decoration:none}
.footer-powered a:hover{color:var(--ink);text-decoration:underline}
.footer-note{margin:0;font-size:13px;color:var(--muted)}

/* ---- landing-page bands (one idea per band) ---- */
.band{padding:var(--band-pad) 0;border-top:1px solid var(--line)}
.band:first-child{border-top:0}
.band--soft{background:var(--surface-2)}

/* ---- chips (the platforms SealNest runs on). A thing is shown the day it exists, never before. ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:24px 0 0}
.center .chips{justify-content:center}
.chip{font-size:15px;line-height:1.2;padding:9px 16px;border:1px solid var(--line-2);border-radius:var(--radius-pill);color:var(--ink);background:var(--surface)}
.chip--live{border-style:solid;border-color:var(--accent);background:var(--surface);color:var(--ink)}

/* ---- checklist (ticked lines) ---- */
.checklist{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.checklist li{padding-left:27px;position:relative;color:var(--ink-2);font-size:16.5px}
.checklist li::before{content:"";position:absolute;left:3px;top:.55em;width:11px;height:6px;
  border-left:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:rotate(-45deg)}
.center .checklist{display:inline-grid;text-align:left}   /* a centred band keeps its ticks beside its words */

/* ---- the two-part switch: "What you see | What we see" ----
   Markup and behaviour: SealNestSite.seg() in js/site.js. Used by the landing page and the demo. */
.seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;max-width:100%;
  border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--line-2)}
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  border-radius:var(--radius-pill);background:var(--ink);transition:transform var(--dur-2) var(--ease)}
.seg[data-value="we"]::before{transform:translateX(100%)}
.seg-opt{position:relative;z-index:1;min-height:40px;padding:8px 18px;border:0;background:none;
  border-radius:var(--radius-pill);font-size:15px;font-weight:600;line-height:1.2;color:var(--ink-2);
  cursor:pointer;white-space:nowrap;transition:color var(--dur-2) var(--ease)}
.seg-opt[aria-checked="true"]{color:var(--ground)}
.seg-opt::after{content:"";position:absolute;inset:-5px 0}   /* the whole height of the switch (50px) takes the tap */
@media (max-width:380px){ .seg-opt{padding:8px 13px;font-size:14.5px} }

/* ---- secrets: text that SealNestSite.scramble() turns to noise and back ----
   One line, never wraps, never changes the height of its row. Give its parent a width. */
[data-secret]{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;vertical-align:bottom}
.is-noise{font-family:var(--font-mono);letter-spacing:-.02em}

/* ---- callout ---- */
.callout{background:var(--accent-soft);border-radius:var(--radius);padding:22px 26px;margin-top:32px;color:var(--ink)}
.callout p{margin:0}

/* ---- card ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}

/* ---- questions and answers (support page) ---- */
.faq{margin-top:28px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-size:17.5px;font-weight:600;padding:17px 0;list-style:none;
  display:flex;justify-content:space-between;gap:18px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-ink);font-weight:400;font-size:23px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details > :not(summary){margin:0 0 19px;color:var(--ink-2);font-size:16.5px}

/* ---- long-form pages: privacy, terms, support, 404 ----
   <main id="main" class="page"><article class="prose"> ... </article></main>            */
.page{padding:56px var(--gutter) 96px}
.prose{max-width:var(--prose-w);margin:0 auto}
.prose-head{margin-bottom:36px}
.prose-head h1{font-family:var(--font-slab);font-size:clamp(34px,5vw,54px)}
.prose-meta{font-size:var(--fs-fine);color:var(--muted);margin:14px 0 0}
.prose-draft{border:1px dashed var(--them);border-radius:var(--radius-sm);padding:12px 16px;margin:0 0 28px;font-size:var(--fs-small);color:var(--ink-2)}
.prose-summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow);margin:0 0 12px}
.prose-summary h2{margin-top:0}
.prose h2{font-family:var(--font-sans);font-size:24px;line-height:1.25;letter-spacing:-.015em;font-weight:600;margin:44px 0 0}
.prose h3{margin:28px 0 0}
.prose p,.prose li{color:var(--ink-2);line-height:1.65}
.prose p{margin:14px 0 0}
.prose ul,.prose ol{margin:14px 0 0;padding-left:1.25em}
.prose li{margin:6px 0 0}
.prose strong{color:var(--ink);font-weight:600}
.prose a{text-underline-offset:2px}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0 0}
.prose .checklist{margin-top:16px;padding-left:0}
.prose .checklist li{margin:0}
@media (max-width:640px){ .page{padding-top:40px;padding-bottom:72px} .prose h2{font-size:21.5px;margin-top:36px} }

/* ---- reveal on scroll (js/site.js adds .is-in once, the first time it is seen) ----
   Default = visible. Only hidden-then-revealed when scripts run AND motion is allowed. */
html.motion .reveal{transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
html.motion .reveal:not(.is-in){opacity:0;transform:translateY(16px)}

/* ---- responsive chrome ---- */
@media (max-width:900px){
  .nav-end .store-btn{display:none}        /* the hero carries the store button on small screens */
}
@media (max-width:640px){
  .nav{gap:12px}
  .nav-links{gap:18px}
  .btnrow .btn:not(.is-soon){width:100%}
}
@media (max-width:380px){
  .brand .wordmark{font-size:18px}
  .nav-links{gap:14px}
  .nav-links a{font-size:14.5px}
}

/* ---- print: everything shows, nothing waits to be scrolled into view ---- */
@media print{
  .reveal{opacity:1!important;transform:none!important}
}