@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-600.woff2?v=5c046bbcb7") format("woff2");font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:"Inter";src:url("/fonts/inter-400.woff2?v=f035ed3d2d") format("woff2");font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"Inter";src:url("/fonts/inter-500.woff2?v=275e6536c0") format("woff2");font-weight:500;font-style:normal;font-display:optional}
/* Stand-ins while those arrive: Arial and Georgia, sized to take the same room, so nothing moves. */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");font-weight:400;size-adjust:107.34%;ascent-override:90.25%;descent-override:22.47%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");font-weight:500;size-adjust:108.33%;ascent-override:89.43%;descent-override:22.27%;line-gap-override:0%}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia Bold"),local("Georgia-Bold");font-weight:600;size-adjust:93.61%;ascent-override:104.47%;descent-override:27.24%;line-gap-override:0%}
:root{--sans:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--serif:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif}

:root,[data-palette="evergreen"]{
  --bg:#F6F3EC;--surface:#FCFBF7;--surface-2:#FFFFFF;--line:#E4DFD2;--line-soft:#ECE8DC;
  --ink:#22271F;--muted:#5C6156;--heading:#0F2C23;--brand:#163A2F;--brand-2:#1D4A3C;--on-brand:#F6F3EC;
  --accent:#C08A2E;--accent-ink:#8D6522;--accent-soft:#F3E6CC;--chip:#DCE6DE;--chip-ink:#163A2F;--band:#0F2C23;--band-ink:#F6F3EC;--band-muted:#B9C8BF;
  --shadow:rgba(15,44,35,.28);color-scheme:light}
[data-palette="midnight"]{
  --bg:#F2F3F7;--surface:#FBFBFD;--surface-2:#FFFFFF;--line:#D2D5DE;--line-soft:#E5E7ED;
  --ink:#14151D;--muted:#4F5267;--heading:#16204D;--brand:#1F2D6B;--brand-2:#2F4187;--on-brand:#F2F3F7;
  --accent:#B6814C;--accent-ink:#8F653A;--accent-soft:#F1E3D4;--chip:#D2DAF1;--chip-ink:#1F2D6B;--band:#0D1530;--band-ink:#F2F3F7;--band-muted:#A8B6E2;
  --shadow:rgba(13,21,48,.28)}
[data-palette="clay"]{
  --bg:#FAF6EB;--surface:#FFFCF5;--surface-2:#FFFFFF;--line:#E0D8C0;--line-soft:#F0EBD9;
  --ink:#181612;--muted:#5A5446;--heading:#4E2213;--brand:#6F321C;--brand-2:#8A4126;--on-brand:#FAF6EB;
  --accent:#6E7A4A;--accent-ink:#687446;--accent-soft:#E6E9D8;--chip:#F2D3C5;--chip-ink:#6F321C;--band:#2E140C;--band-ink:#FAF6EB;--band-muted:#E8AE96;
  --shadow:rgba(46,20,12,.28)}
[data-mode="dark"],[data-mode="dark"][data-palette="evergreen"]{
  --bg:#12150F;--surface:#1A1E16;--surface-2:#222720;--line:#2E342A;--line-soft:#252A21;
  --ink:#ECE9E0;--muted:#B0ADA3;--heading:#ECE9E0;--brand:#6FB893;--brand-2:#8CC9A8;--on-brand:#12150F;
  --accent:#D9A45C;--accent-ink:#D9A45C;--accent-soft:#3A2F1C;--chip:#22332A;--chip-ink:#9FD3B6;--band:#0B0D09;--band-ink:#ECE9E0;--band-muted:#B0ADA3;
  --shadow:rgba(0,0,0,.55);color-scheme:dark}
[data-mode="dark"][data-palette="midnight"]{
  --bg:#0B0E1B;--surface:#14182A;--surface-2:#1C2235;--line:#2C3146;--line-soft:#1F2438;
  --ink:#E6E8F0;--muted:#AFB3C7;--heading:#E6E8F0;--brand:#8C9DDB;--brand-2:#A8B6E2;--on-brand:#0B0E1B;
  --accent:#D8A36F;--accent-ink:#D8A36F;--accent-soft:#3A2C20;--chip:#1F2A4F;--chip-ink:#C2CCF0;--band:#070912;--band-ink:#E6E8F0;--band-muted:#AFB3C7}
[data-mode="dark"][data-palette="clay"]{
  --bg:#1A130F;--surface:#221915;--surface-2:#2C211C;--line:#3E2F27;--line-soft:#2E231D;
  --ink:#ECE5DA;--muted:#B5AC9C;--heading:#ECE5DA;--brand:#D88B65;--brand-2:#E8AE96;--on-brand:#1A130F;
  --accent:#A7B47B;--accent-ink:#A7B47B;--accent-soft:#2C3020;--chip:#3A241B;--chip-ink:#F2D3C5;--band:#100B08;--band-ink:#ECE5DA;--band-muted:#B5AC9C}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background-color:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;overflow-x:hidden}
/* WR11 / W7: on a Mac, Fraunces and Inter turn heavy on dark backgrounds unless smoothed; light ones keep the system's own rendering. */
[data-mode="dark"] body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media (min-width:901px){.hero{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px;width:100%}
.narrow{max-width:820px}
.eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.kicker{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);font-weight:500}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--heading);letter-spacing:-.01em}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.95rem;font-weight:500;text-decoration:none;border-radius:999px;padding:11px 22px;border:1px solid transparent;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s}
.btn-primary{background:var(--brand);color:var(--on-brand)}
@media (hover:hover){.btn-primary:hover{background:var(--brand-2)}}
.btn-ghost{background:transparent;color:var(--heading);border-color:var(--line)}
@media (hover:hover){.btn-ghost:hover{border-color:var(--brand)}}
.btn-sm{padding:8px 16px;font-size:.88rem}

/* WR6 / S1 — the header: a flat, full-width bar in the page's surface colour with a 1 px line under it,
   stuck to the top. Inside, the page's width (1180 px) in three columns: the name on the left, the links
   in the exact centre of the bar, the theme switch and the main action ("Get the app" today) on the right. The page or section
   being read gets a thin underline in the theme's accent (amber in Evergreen), and nothing else; hover
   only darkens a link. Where the links would come within 24 px of either side, they hide and the menu
   button shows instead (.compact, from assets/site.js, and always at 979 px and less). */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.site-head .bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;max-width:1180px;min-height:72px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.wordmark{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--heading);text-decoration:none;display:flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap}
.site-head .wordmark{font-size:1.1875rem}
.site-head .wordmark{justify-self:start;min-width:0}
.logo .tile{fill:var(--brand)}
.logo .page{fill:var(--on-brand)}
.logo .fold{stroke:var(--brand)}
.logo .mark{fill:var(--accent)}
.nav{display:flex;gap:4px;justify-self:center}
.nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:.9375rem;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .2s ease}
@media (hover:hover){.nav a:hover{color:var(--ink)}}
.nav a[aria-current="page"],.nav a.is-here{color:var(--ink)}
.nav a[aria-current="page"]::after,.nav a.is-here::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:1px;background:var(--accent)}
.head-end{display:flex;align-items:center;justify-content:flex-end;gap:12px;justify-self:end;min-width:0}
.site-head .btn-sm{height:44px;padding:0 18px;font-size:.875rem}
.head-cta{justify-content:center}
/* Round 8 — the page the visitor is on: its own item in the bar, the menu and the footer looks the same
   but is no link (no address, nothing to hover, press or click). */
a[aria-current="page"]:not([href]){cursor:default;pointer-events:none}
/* WR12 / Q6: with the phone menu open, the homepage's own name still takes a tap: it closes the menu and goes back to the top. */
.sheet-open .site-head .bar .wordmark{cursor:pointer;pointer-events:auto}

/* Round 9, B6 — the theme switch: one round button, a 40 px ring in the line colour and no fill, in the bar
   and in the phone menu (its tap area is 48 px, as every control in the menu). It shows what a tap gives:
   the moon in the light look, the sun in the dark one, crossing over in 150 ms. Light and dark only, within
   the palette picked in Themes (WR9F / F2). */
.mode-btn{position:relative;display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.mode-btn::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid var(--line);transition:background-color .12s ease}
.mode-btn .icon{grid-area:1/1;position:relative;width:20px;height:20px;transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}
.mode-btn .i-sun,[data-mode="dark"] .mode-btn .i-moon{opacity:0}
.mode-btn .i-sun{transform:rotate(-180deg)}
[data-mode="dark"] .mode-btn .i-moon{transform:rotate(180deg)}
[data-mode="dark"] .mode-btn .i-sun{opacity:1;transform:none}
@media (hover:hover){.mode-btn:hover::before{background:var(--line-soft)}}
.mode-btn:active::before{background-color:color-mix(in srgb,currentColor 15%,transparent)}
/* WR12 / Q7: the palette switch beside the light/dark button: the same round button, a four-dot mark, and a small
   list under it, one row per palette (its colours and name), the one in use marked. */
.pal{position:relative;flex:none}
.pal-btn{position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.pal-btn::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid var(--line);transition:background-color .12s ease}
.pal-btn .icon{position:relative;width:20px;height:20px;fill:currentColor;stroke:none}
@media (hover:hover){.pal-btn:hover::before{background:var(--line-soft)}}
.pal-btn:active::before,.pal-btn[aria-expanded="true"]::before{background-color:color-mix(in srgb,currentColor 15%,transparent)}
.pal-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:grid;gap:2px;min-width:220px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 18px 40px -20px var(--shadow)}
.pal-pop[hidden]{display:none}
.pal-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:.9375rem;font-weight:500;text-align:left;cursor:pointer}
@media (hover:hover){.pal-row:hover{background:var(--line-soft)}}
.pal-row:active{background:color-mix(in srgb,currentColor 12%,transparent)}
.pal-row[aria-pressed="true"]{background:var(--line-soft);color:var(--heading)}
.pal-row[aria-pressed="true"]::after{content:"";margin-left:auto;width:12px;height:7px;border:solid var(--brand);border-width:0 0 2px 2px;transform:translateY(-2px) rotate(-45deg)}
.pal-row:focus-visible{outline-offset:-2px}
.pal-row{white-space:nowrap}
.pal-row .dots{display:flex;flex:none}
/* WR13 / P2 (tsv's choice): in the phone menu, under "Palette", three tiles in a row, each a small screen drawn in its
   palette's colours for the look in use (never a picture): its page as the ground, a bar in its brand colour, a card in
   its surface colour with two placeholder lines, a pill in its accent; the palette's name under it. The one in use has
   a 2 px brand-colour line, the others 1 px in the line colour. */
.sheet-palette{display:grid;gap:10px;padding:14px 0 18px;border-top:1px solid var(--line);color:var(--muted);font-size:.9375rem;font-weight:500}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{display:grid;align-content:start;gap:8px;min-width:0;min-height:44px;padding:0;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;text-align:center;cursor:pointer}
.tile-draw{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--b-bg)}
.tile[aria-pressed="true"] .tile-draw{border:2px solid var(--brand);padding:9px}
.tile-bar{display:block;height:6px;border-radius:3px;background:var(--b-brand)}
.tile-card{display:grid;align-content:center;gap:4px;height:22px;padding:0 6px;border:1px solid var(--b-line);border-radius:4px;background:var(--b-surface)}
.tile-card span{display:block;width:70%;height:2px;border-radius:1px;background:var(--b-line)}
.tile-card span+span{width:45%}
.tile-pill{display:block;justify-self:center;width:50%;height:8px;border-radius:999px;background:var(--b-accent)}
.tile-name{font-size:13px;line-height:1.3;font-weight:500;overflow-wrap:break-word}
.tile:active{background:color-mix(in srgb,currentColor 12%,transparent)}
.tile:focus-visible{outline-offset:2px}

/* WR6 / S1 — the compact bar: the name and a menu button (a rounded square, 44 px, three lines that
   turn into a cross while the menu is open). The links, the theme switch and the main action are in
   the menu then. WR7 / R1: on a phone the bar is 60 px, the brand and the button 16 px from the edges;
   below 360 px the name is a little smaller, never cut. */
.menu-btn{display:none;position:relative;width:48px;height:48px;margin-right:-4px;place-items:center;padding:0;border:0;border-radius:12px;background:transparent;color:var(--heading);cursor:pointer}
.menu-btn::before{content:"";position:absolute;inset:4px;border-radius:12px;border:1px solid var(--line);transition:background-color .12s ease}
.menu-btn .icon{position:relative}
@media (hover:hover){.menu-btn:hover::before{background:var(--line-soft)}}
.site-head.compact .bar{grid-template-columns:minmax(0,1fr) auto}
.site-head.compact .nav,.site-head.compact .bar .mode-btn,.site-head.compact .bar .pal,.site-head.compact .head-cta{display:none}
.site-head.compact .menu-btn{display:grid}
@media (max-width:979px){
  .site-head .bar{grid-template-columns:minmax(0,1fr) auto}
  .site-head .nav,.site-head .bar .mode-btn,.site-head .bar .pal,.site-head .head-cta{display:none}
  .site-head .menu-btn{display:grid}
}
.menu-btn .i-x,.menu-btn[aria-expanded="true"] .i-lines{display:none}
.menu-btn[aria-expanded="true"] .i-x{display:inline}
:root{--bar-h:72px}
@media (max-width:640px){
  :root{--bar-h:60px}
  .site-head .bar{min-height:var(--bar-h);height:var(--bar-h)}
}
@media (max-width:359px){.site-head .wordmark{font-size:1.0625rem;gap:8px}}

/* Round 9, B5 — the menu (style 1, the plain list): a sheet under the bar, which stays, in the page's own
   colours, from the bar to the bottom of the screen. Five rows in one list (Inside the app, Journey,
   Questions, Contact and the main action, "Get the app" today) in the display font at 22 px, left-aligned,
   each with a thin line under it and nothing after it; the page you are on, and a row being pressed, in
   mint. At the bottom, behind a thin line, "Theme" and the round theme button. It fades in and out in
   200 ms (at once with less motion asked for); while it is open the page behind does not scroll and the
   keyboard stays in it and on the menu button (assets/site.js). Every control in it is 48 px or more. */
:root,[data-mode="light"]{--mint:#2A7653}
[data-mode="dark"]{--mint:#6FB893}
.sheet{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--bar-h) + 1px);left:0;right:0;bottom:0;z-index:60;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);padding:0 0 max(8px,env(safe-area-inset-bottom)) 0;overflow-y:auto;overscroll-behavior:contain;opacity:0}
.sheet.open{opacity:1}
@media (prefers-reduced-motion:no-preference){.sheet{transition:opacity .2s ease}}
.sheet-nav,.sheet-end{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.sheet-nav{display:flex;flex-direction:column;padding-top:8px}
.sheet-nav a{display:flex;align-items:center;min-height:56px;padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:600;font-size:1.375rem;line-height:1.25;color:var(--ink);text-align:left;text-decoration:none}
.sheet-nav a[aria-current="page"],.sheet-nav a.is-here,.sheet-nav a:active{color:var(--mint)}
@media (hover:hover){.sheet-nav a:hover{color:var(--mint)}}
.sheet-end{margin-top:auto;padding-top:24px}
.sheet-theme{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;border-top:1px solid var(--line);color:var(--muted);font-size:.9375rem;font-weight:500}
/* Round 9: the root alone is held still, and the body stays an ordinary box (its overflow-x would make it a
   scroller of its own once the root is held): otherwise the sticky bar went back to the top of the page,
   out of sight, while the menu was open under it. */
html.sheet-open{overflow:hidden}
html.sheet-open body{overflow:visible}

.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-box{width:44px;height:44px;border-radius:12px;background:var(--chip);color:var(--chip-ink);display:grid;place-items:center;flex:none}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px}

/* The footer: the name and its line, then the link groups (Product; Legal once a legal page is on),
   side by side on a computer, one under the other on a phone. Every link 44 px tall or more. */
.site-foot{border-top:1px solid var(--line);margin-top:24px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:minmax(150px,max-content);gap:28px clamp(32px,6vw,80px);padding:48px 0 32px}
.foot-grid p{color:var(--muted);font-size:.92rem;max-width:300px;margin-top:6px}
.foot-grid h2{font-family:inherit;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:12px 0 4px}
.foot-grid ul{list-style:none}
.foot-grid a{font-size:.94rem;color:var(--ink);text-decoration:none}
.foot-grid ul a,.foot-contact a{display:inline-flex;align-items:center;min-height:44px;vertical-align:top}
.foot-contact a{max-width:100%}
/* WR11 / W8: an address (no spaces) may break anywhere, so enlarged text never pushes the page sideways. */
.foot-grid .wordmark{font-size:1.06rem;width:fit-content}
/* Round 9, B12: the social icons, only for the profiles that are set. */
.social{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.foot-grid .social a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);color:var(--muted)}
.social .icon{width:20px;height:20px}
@media (hover:hover){.foot-grid .social a:hover{color:var(--brand)}}
@media (hover:hover){.foot-grid a:hover{color:var(--brand)}}
.foot-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding:20px 0 32px;font-size:.84rem;color:var(--muted)}
/* WR9F: with the Newsletter row on (B13), the footer goes to two columns below 1024 px, the row across both,
   so its field and button fit on one line; without it, Round 8's columns as they were. */
/* WR11 / W8: with the Newsletter column, four columns of their own on a computer, so the name, its line and
   the addresses are never squeezed into the next column. */
@media (min-width:1024px){.foot-grid:has(.foot-news){grid-auto-flow:row;grid-template-columns:minmax(0,1.2fr) max-content max-content minmax(320px,1fr);column-gap:clamp(32px,4vw,56px)}}
@media (max-width:1023px){.foot-grid:has(.foot-news){grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid:has(.foot-news) .foot-brand,.foot-grid:has(.foot-news) .foot-news{grid-column:1/-1}}
@media (max-width:760px){.foot-grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand,.foot-news{grid-column:1/-1}}
@media (max-width:560px){.foot-grid,.foot-grid:has(.foot-news){grid-template-columns:minmax(0,1fr)}}

/* WR14 / I5: hidden for the fade-in only where scripts run (they show it); with scripts off it is simply there. */
@media (scripting:enabled){.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}body{transition:none}}


/* Homepage */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--heading);border:1px solid var(--line);background:var(--surface);padding:6px 14px;border-radius:999px}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* WR6 / S2 — the hero: the app's video fills the full width under the header, min(86vh, 760px) tall,
   cropped to fill (object-fit: cover) with the dashboard kept in view. The words sit on it, left-aligned
   in the page's column, in light text over a dark shade from the left and the bottom, which keeps them
   readable over any frame (checked against the poster and the film's frames). The video is always on a
   dark ground, so its buttons take the theme's colour for dark screens. Phones (640 px and less): the
   video is a full-bleed block at the top (62vh, at least 380 px), the phone-shaped clip, and the words
   sit under it over a fade, the button full width. A click or tap on the picture, not on the words or
   the buttons, pauses and plays it again; there is no button for it (assets/site.js). */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:min(86vh,760px);min-height:min(86svh,760px);background:#0D120F;color:#F6F3EC;--hero-cta:#6FB893;--hero-cta-ink:#12150F;--hero-dot:#D9A45C}
[data-palette="midnight"] .hero{--hero-cta:#8C9DDB;--hero-cta-ink:#0B0E1B;--hero-dot:#D8A36F}
[data-palette="clay"] .hero{--hero-cta:#D88B65;--hero-cta-ink:#1A130F;--hero-dot:#A7B47B}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0D120F}
.hero-poster,.hero-poster img,.hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:70% 22%}
.hero-video{opacity:0}
/* WR7 / R7 — a see-through layer over the video: the mouse is never over the video itself, so no
   browser draws its own buttons on it; a click on the layer pauses and plays the video (site.js). */
.hero-cover{position:absolute;inset:0;z-index:1;pointer-events:auto}
.hero-video.shown{opacity:1}
@media (prefers-reduced-motion:no-preference){.hero-video{transition:opacity .4s ease}}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(9,14,11,.9) 0%,rgba(9,14,11,.84) 30%,rgba(9,14,11,.74) 50%,rgba(9,14,11,.42) 66%,rgba(9,14,11,.08) 86%),linear-gradient(0deg,rgba(9,14,11,.5),rgba(9,14,11,0) 50%)}
@media (max-width:1023px){.hero-shade{background:linear-gradient(90deg,rgba(9,14,11,.9) 0%,rgba(9,14,11,.8) 55%,rgba(9,14,11,.5) 75%,rgba(9,14,11,.15) 100%),linear-gradient(0deg,rgba(9,14,11,.6),rgba(9,14,11,0) 60%)}}
.hero-in{width:100%;max-width:1180px;margin:0 auto;padding:96px max(16px,env(safe-area-inset-right)) 72px max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:flex-start;gap:18px;pointer-events:none}
.hero-in>*{pointer-events:auto}
.hero .pill{color:#F6F3EC;background:rgba(246,243,236,.12);border-color:rgba(246,243,236,.25);font-size:.8125rem;font-weight:500;letter-spacing:.14em;padding:7px 14px}
.hero .pill .dot{background:var(--hero-dot)}
.hero h1{color:#F6F3EC;font-size:clamp(2.5rem,6.4vw,5.25rem);line-height:1.02;letter-spacing:-.015em;overflow-wrap:break-word}
.hero .sub{max-width:46ch;font-size:clamp(1rem,1.6vw,1.1875rem);color:rgba(246,243,236,.85)}
.hero .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px}
/* WR11 / W1: the one button under the words, left with them, a 48 px pill; for the newsletter a small line under it. */
.hero .ctas .btn{min-height:48px}
@media (max-width:360px){.hero h1{font-size:2.25rem}}
@media (max-width:340px){.hero h1{font-size:2rem}}
.cta-note{flex:1 1 100%;margin:0;font-size:.84rem;line-height:1.5;color:rgba(246,243,236,.72)}
.hero .btn{font-size:.9375rem;font-weight:600;padding:13px 22px}
.hero .btn-primary{background:var(--hero-cta);color:var(--hero-cta-ink)}
@media (hover:hover){.hero .btn-primary:hover{background:color-mix(in srgb,var(--hero-cta) 86%,#fff)}}
.hero .btn-ghost{background:rgba(246,243,236,.12);color:#F6F3EC;border-color:rgba(246,243,236,.35)}
@media (hover:hover){.hero .btn-ghost:hover{border-color:#F6F3EC}}
.hero :focus-visible{outline-color:#D9A54A}
/* WR12 / Q3 — phones and tablets held upright (900 px and less), like the desktop: the video runs edge to
   edge, the screen's width and its own height (never cropped: its own shape, shown whole), with no frame;
   the pill, the heading and the line sit over its lower part on a dark shade, in white. The wide clip up
   to 900 px, the tall phone clip at 640 px and less. No button in the hero here: the newsletter row right
   under the video is the one action, with the line "One mail on opening day. No spam." */
@media (max-width:900px){
  .hero{display:block;min-height:0}
  .hero-media{position:relative;inset:auto;width:100%;aspect-ratio:1600 / 900}
  .hero-poster,.hero-poster img,.hero-video{object-fit:contain}
  .hero-shade{background:linear-gradient(0deg,rgba(9,14,11,.6) 0%,rgba(9,14,11,0) 70%)}
  /* The words carry their own shade, dark behind every line and fading out above the pill. */
  .hero-in{position:absolute;left:0;right:0;bottom:0;padding:64px max(16px,env(safe-area-inset-right)) 28px max(16px,env(safe-area-inset-left));gap:12px;background:linear-gradient(0deg,rgba(9,14,11,.9) 0%,rgba(9,14,11,.88) calc(100% - 64px),rgba(9,14,11,0) 100%)}
  /* While the main action is the newsletter's: the row under the video is that action. */
  .hero .ctas:has(> [data-event="notify"]){display:none}
}
@media (max-width:640px){
  .hero-media{aspect-ratio:720 / 1558}
}
@media (max-height:620px) and (min-width:901px){.hero-in{padding-top:56px;padding-bottom:40px}}
section.block{padding:88px 0 0}
.s-head{text-align:center;max-width:600px;margin:0 auto 40px}
.s-head h2{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.12;margin-top:10px}
.s-head p{color:var(--muted);margin-top:12px}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.principle{padding:28px}
.principle h3{font-size:1.2rem;margin:18px 0 6px}
.principle p{color:var(--muted);font-size:.95rem}
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.module{padding:22px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
/* WR7 / R9 — a module card is only something to click while the demo is on (then it is a link into it). */
:where(a).module{display:block;color:inherit;text-decoration:none}
@media (hover:hover){a.module:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 18px 36px -24px var(--shadow)}}
a.module:active{border-color:var(--brand)}
.module h3{font-size:1.08rem;margin:16px 0 4px}
.module p{font-size:.9rem;color:var(--muted);line-height:1.5}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t-card{padding:0;overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:transform .2s ease,border-color .2s ease}
@media (hover:hover){.t-card:hover{transform:translateY(-3px)}}
.t-card[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
/* WR9F / F2 — the app's Dashboard in that theme (Round 9's stills, its top left), the dark one while the page
   is dark, in the place and size of Round 8's small sketch. */
.t-shot{position:relative;display:block;height:150px;overflow:hidden;background:var(--surface)}
.t-shot picture,.t-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
/* WR13 / H3: both pictures in place, one over the other; the look in use shows its own (by opacity, so they cross-fade). */
.t-shot picture{position:absolute;inset:0}
.t-shot .t-dark,[data-mode="dark"] .t-shot .t-light{opacity:0}
[data-mode="dark"] .t-shot .t-dark{opacity:1}
.t-meta{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line)}
.t-meta b{font-family:var(--serif);font-weight:600;color:var(--heading)}
.t-meta span span{font-size:.82rem;color:var(--muted)}
.dots{display:flex;gap:4px}
.dots i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.themes-note{text-align:center;color:var(--muted);font-size:.9rem;margin-top:18px}
.news{max-width:680px;margin:0 auto}
.tl{list-style:none;border-left:2px solid var(--line);margin-left:8px}
.tl li{position:relative;padding:0 0 26px 28px}
.tl li:last-child{padding-bottom:4px}
.tl li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--brand)}
.tl li:first-child::before{background:var(--accent);border-color:var(--accent)}
.tl time{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tl b{display:block;font-family:var(--serif);font-weight:600;color:var(--heading);font-size:1.12rem;margin-top:2px}
.tl p{font-size:.95rem;color:var(--muted);margin-top:4px}
.more{display:inline-flex;margin:22px 0 0 36px;color:var(--brand);font-weight:500;text-decoration:none}
@media (hover:hover){.more:hover{text-decoration:underline}}
.band{background:var(--band);color:var(--band-ink);margin-top:96px;padding:80px 0;text-align:center;scroll-margin-top:68px}
.band .eyebrow{color:var(--band-muted)}
.clock{display:flex;justify-content:center;gap:14px;margin-top:34px}
.clock div{min-width:96px;border:1px solid color-mix(in srgb,var(--band-ink) 18%,transparent);border-radius:16px;padding:16px 8px}
.clock b{display:block;font-family:var(--serif);font-weight:600;font-size:2.4rem;line-height:1.05;font-variant-numeric:tabular-nums}
.clock span{font-size:.78rem;color:var(--band-muted)}
.closing{text-align:center;padding:72px 0 48px}
.closing h2{font-size:clamp(1.6rem,3.6vw,2.2rem)}
@media (max-width:900px){.modules{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.principles,.themes{grid-template-columns:1fr}section.block{padding-top:64px}.clock{gap:8px}.clock div{min-width:70px}.clock b{font-size:1.8rem}.band{padding:60px 0}}
@media (max-width:420px){.modules{grid-template-columns:1fr}}
#themes{scroll-margin-top:80px}
/* Round 8 / E7 — the questions near the bottom of the homepage: a plain list in two columns (one on a
   phone), each question over its answer, no accordion. */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;max-width:880px;margin:0 auto;border-top:1px solid var(--line)}
.faq>div{padding:18px 0;border-bottom:1px solid var(--line)}
.faq dt{font-family:var(--serif);font-weight:600;font-size:1.12rem;line-height:1.3;color:var(--heading)}
.faq dd{margin-top:4px;color:var(--muted)}
@media (max-width:760px){.faq{grid-template-columns:minmax(0,1fr)}}
.t-evergreen{--p-bg:#F6F3EC;--p-side:#163A2F;--p-acc:#C08A2E}
.t-midnight{--p-bg:#F2F3F7;--p-side:#1F2D6B;--p-acc:#B6814C}
.t-clay{--p-bg:#FAF6EB;--p-side:#6F321C;--p-acc:#6E7A4A}
.dots i:nth-child(1){background:var(--p-side)}
.dots i:nth-child(2){background:var(--p-acc)}
.dots i:nth-child(3){background:var(--p-bg)}
/* Round 9, B2: /questions/, the homepage's list on a page of its own. */
.questions-page{padding:72px 0 88px}
.questions-page .s-head h1{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.12}
@media (max-width:760px){.questions-page{padding:48px 0 64px}}
/* Round 9, B14: /security/, a few lines in one column. */
.security-page{padding:72px 0 88px}
.security-page h1{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.12}
.security-page p{margin-top:16px;max-width:60ch}
.security-page p{color:var(--muted)}
.security-page .sec-report{color:var(--ink)}
.sec-report a{color:var(--brand);font-weight:500;text-underline-offset:3px}
@media (max-width:760px){.security-page{padding:48px 0 64px}}

/* Journey page */
.intro{padding:72px 0 8px}
.intro h1{font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.06;letter-spacing:-.02em;margin-top:12px}
.intro p{max-width:560px;margin-top:16px;font-size:1.14rem;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.stat b{display:block;font-family:var(--serif);font-weight:600;font-size:1.9rem;line-height:1.1;color:var(--heading);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:4px;font-size:.85rem;line-height:1.4;color:var(--muted)}
.chapter{padding-top:64px}
.c-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.c-head h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15}
.c-n{font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;font-weight:500;color:var(--accent-ink)}
.c-head>span{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chapter .tl li:first-child::before{background:var(--bg);border-color:var(--brand)}
.next .tl{border-left-style:dashed}
.tl li.ahead::before{border-style:dashed;border-color:var(--accent)}
.end{text-align:center;padding:88px 0 72px}
.tagline{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.2rem);line-height:1.2;color:var(--heading);margin-bottom:26px}
@media (max-width:760px){.intro{padding-top:48px}.stats{grid-template-columns:repeat(2,1fr)}.chapter{padding-top:48px}.end{padding:64px 0 48px}}

/* Round 8 / E2 — /app/, "Get the app", and the not-found page. On the left the pill, the heading, the
   clock (small) and three rows, each a small label over its line with a thin rule between them; on the
   right the phone-shaped still from the capture, framed like the hero's phone video. One column below
   820 px, the still under the rows. */
.page-app,.page-404{min-height:100vh;display:flex;flex-direction:column}
.get-page{flex:1;padding:72px 0 88px}
/* WR9F / F1: Round 8's text column (its rows 560 px wide on a computer); the two devices (Round 9) in the rest. */
.get{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,368px);gap:64px;align-items:center}
.get-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.get-head h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.1;letter-spacing:-.015em;max-width:16ch}
.mini{display:flex;gap:8px;width:100%;max-width:340px}
.mini div{flex:1;text-align:center;border:1px solid var(--line);border-radius:12px;padding:10px 4px;background:var(--surface-2)}
.mini b{display:block;font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--heading);font-variant-numeric:tabular-nums;line-height:1.1}
.mini span{font-size:.72rem;color:var(--muted)}
.get-rows{margin-top:36px;max-width:560px;border-top:1px solid var(--line)}
.get-rows>div{padding:14px 0;border-bottom:1px solid var(--line)}
.get-rows dt{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.get-rows dd{margin-top:4px}
.get-rows a{color:var(--brand);font-weight:500;text-underline-offset:3px;white-space:nowrap}
.get .signup{margin:24px 0 0}
/* Round 9, B8 — both devices: the computer (the wide poster in a dark frame) and the phone (the phone
   poster in a phone frame) over its lower right corner; under the words on phones. */
.get-devices{position:relative;justify-self:center;width:100%;padding:0 0 4%}
.dev-phone{margin:0}
.dev-laptop{margin:0 12% 0 0}
.dev-laptop picture{display:block;border:6px solid #0B0F0C;border-radius:12px;background:#0B0F0C;overflow:hidden}
.dev-laptop img{display:block;width:100%;height:auto}
.dev-phone{position:absolute;right:0;bottom:0;width:20%}
.dev-phone picture{display:block;border:5px solid #0B0F0C;border-radius:18px;background:#0B0F0C;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.dev-phone img{display:block;width:100%;height:auto}
@media (max-width:820px){.get{grid-template-columns:minmax(0,1fr);gap:40px}.get-devices{max-width:520px}}
@media (max-width:760px){.get-page{padding:48px 0 64px}}
.nf{flex:1;display:grid;place-items:center;text-align:center;padding:96px 0}
.nf h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:28px}

/* Keyboard: a skip link and a clear focus ring on whatever has focus, in every theme */
/* WR6 / S7 — "Skip to content" takes no room and shows nothing until it has the keyboard's focus; then
   it opens as a strip above the header bar (never over the name) and closes again when focus leaves.
   A mouse click or a page load never shows it. */
/* WR12 / Q4: the skip link waits above the window, out of the page's flow, and comes in only on keyboard focus,
   as a small pill at the top left (never a bar), above the header bar: the bar moves down for it, so it never
   covers the name (WR6 / S7). */
.skip{position:fixed;left:12px;top:12px;z-index:200;transform:translateY(calc(-100% - 24px));height:40px;padding:0 18px;border-radius:999px;transition:none;background:var(--brand);color:var(--on-brand);font-size:.95rem;font-weight:500;line-height:40px;white-space:nowrap;text-decoration:none}
.skip:focus-visible{position:relative;left:auto;top:auto;display:inline-block;align-self:flex-start;margin:8px 12px;transform:none;outline-offset:-4px;outline-color:var(--on-brand)}
main{scroll-margin-top:72px}
main:focus{outline:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* WR9F / F3 — a change of palette or of light and dark fades over 250 ms: background, text, lines,
   shadows and icons, on every element. The class is on the root only while a change happens (site.js),
   never as the page loads; with less motion asked for it is never added. */
/* WR13 / H3 (tsv): a slower, complete fade: 450 ms on every element's colours, nothing snapping. */
html.theme-fading,html.theme-fading *,html.theme-fading *::before,html.theme-fading *::after{transition:background-color .45s cubic-bezier(.4,0,.2,1),color .45s cubic-bezier(.4,0,.2,1),border-color .45s cubic-bezier(.4,0,.2,1),outline-color .45s cubic-bezier(.4,0,.2,1),fill .45s cubic-bezier(.4,0,.2,1),stroke .45s cubic-bezier(.4,0,.2,1),box-shadow .45s cubic-bezier(.4,0,.2,1)!important}
/* The Themes stills: the light and the dark picture lie one over the other and cross-fade. */
html.theme-fading .t-shot picture{transition:opacity .45s cubic-bezier(.4,0,.2,1)!important}
/* The sun and the moon turn half a circle and cross-fade, in 300 ms. */
html.theme-fading .mode-btn .icon{transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)!important}

/* Visitors who ask their system for less motion get none */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*:focus-visible{transition:none!important}}

/* Design pass (October 2026): depth, rhythm, phones and big screens */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.wrap{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.wordmark,.btn{white-space:nowrap}
/* WR14 / I5: with text made twice as large on a 320 px screen, the bar's name and the button of the short pages (not
   found, on the list, confirmed) wrap rather than run under the menu button or past the window; at the size they are
   drawn at, they fit on one line, as before. */
.site-head .wordmark,.nf .btn{white-space:normal}
.nf .btn{max-width:100%}
/* The same: the countdown's boxes go onto a second row rather than squeezing their words past their edges, and a word
   too long for its line (a timeline entry's, with twice the text) breaks rather than pushing the page sideways. */
.clock,.mini{flex-wrap:wrap}
@media (max-width:560px){.clock div{min-width:min-content}}
main{overflow-wrap:break-word}

section.block.tint{background:var(--surface);border-block:1px solid var(--line-soft);padding:88px 0;margin-top:88px}
section.block.tint + section.block{padding-top:88px}
.tint .card{background:var(--bg)}
.principle .ic-box,.module .ic-box{transition:transform .2s ease}
@media (hover:hover){a.module:hover .ic-box{transform:scale(1.06)}}

.band{position:relative;overflow:hidden;isolation:isolate}
.band::before,.band::after{content:"";position:absolute;z-index:-1;border-radius:50%;border:1px solid color-mix(in srgb,var(--band-ink) 12%,transparent);pointer-events:none}
.band::before{width:440px;height:440px;left:-170px;top:-190px;box-shadow:0 0 0 52px color-mix(in srgb,var(--band-ink) 3%,transparent),0 0 0 104px color-mix(in srgb,var(--band-ink) 2%,transparent)}
.band::after{width:360px;height:360px;right:-140px;bottom:-170px;box-shadow:0 0 0 44px color-mix(in srgb,var(--band-ink) 3%,transparent),0 0 0 88px color-mix(in srgb,var(--band-ink) 2%,transparent)}

.closing{padding:88px 0 64px}
.closing .logo{display:block;margin:0 auto 18px}

.intro{position:relative;isolation:isolate}
.intro::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-60px;height:520px;background:radial-gradient(min(520px,70%) 50% at 25% 50%,color-mix(in srgb,var(--accent-soft) 80%,transparent),transparent);pointer-events:none}

.page-app,.page-404{min-height:100vh;min-height:100dvh}

@media (pointer:coarse){
  .more{padding:11px 0}
  .btn{min-height:44px}
}

@media (max-width:760px){
  .themes{grid-template-columns:repeat(3,1fr);gap:10px}
  section.block.tint{padding:64px 0;margin-top:64px}
  section.block.tint + section.block{padding-top:64px}
}
@media (max-width:560px){
  .principles,.modules{grid-template-columns:1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .tint .modules{background:var(--bg)}
  .principles .card,.modules .card{background:none;border:0;border-radius:0;box-shadow:none}
  .principle,.module{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;padding:18px}
  .principle + .principle,.module + .module{border-top:1px solid var(--line-soft)}
  .principle .ic-box,.module .ic-box{grid-row:span 2}
  .principle h3,.module h3{margin:1px 0 2px;font-size:1.06rem}
  .principle p,.module p{font-size:.92rem;line-height:1.5}
  @media (hover:hover){a.module:hover{transform:none;box-shadow:none}}
  .t-shot{height:92px}
  .t-meta{padding:10px 10px 12px}
  .t-meta b{font-size:.84rem;line-height:1.25;display:block}
  .t-meta br,.t-meta span span,.dots{display:none}
  .clock{gap:6px}.clock div{min-width:0;flex:1;max-width:78px;padding:12px 4px}
  .band::before{width:300px;height:300px;left:-150px;top:-150px}
  .band::after{width:240px;height:240px;right:-120px;bottom:-130px}
}
/* Each palette's own colours in the look in use (its page, surface, brand, accent and line), for what is drawn in
   them: the palette tiles in the phone menu (WR13 / P2). They are the palettes' tokens at the top of this file. */
.t-evergreen{--b-bg:#F6F3EC;--b-surface:#FCFBF7;--b-brand:#163A2F;--b-accent:#C08A2E;--b-line:#E4DFD2}
.t-midnight{--b-bg:#F2F3F7;--b-surface:#FBFBFD;--b-brand:#1F2D6B;--b-accent:#B6814C;--b-line:#D2D5DE}
.t-clay{--b-bg:#FAF6EB;--b-surface:#FFFCF5;--b-brand:#6F321C;--b-accent:#6E7A4A;--b-line:#E0D8C0}
[data-mode="dark"] .t-evergreen{--b-bg:#12150F;--b-surface:#1A1E16;--b-brand:#6FB893;--b-accent:#D9A45C;--b-line:#2E342A}
[data-mode="dark"] .t-midnight{--b-bg:#0B0E1B;--b-surface:#14182A;--b-brand:#8C9DDB;--b-accent:#D8A36F;--b-line:#2C3146}
[data-mode="dark"] .t-clay{--b-bg:#1A130F;--b-surface:#221915;--b-brand:#D88B65;--b-accent:#A7B47B;--b-line:#3E2F27}
/* WR13 / T2 (tsv's choice) — phones (below 640 px): the three themes stacked, no swiping. Each card is that palette's
   real still in the look in use (the desktop's, whole), 78 % of the column (220 px at the least), its name under it;
   the palette in use outlined in the brand colour as on the desktop; a tap on the card or the name picks it. */
@media (max-width:639px){
  .themes{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:center}
  .themes>.t-card{width:max(78%,220px);max-width:100%;padding:0;border:0;border-radius:16px;background:none;box-shadow:none;overflow:visible;text-align:center}
  .themes>.t-card[aria-pressed="true"]{border:0;box-shadow:none}
  .t-shot{height:auto;aspect-ratio:1440 / 900;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
  .t-card[aria-pressed="true"] .t-shot{outline:2px solid var(--brand);outline-offset:2px}
  .t-shot picture,.t-shot img{object-position:0 0}
  .t-meta{display:block;padding:8px 0 0;border:0}
  .t-meta b{display:block;font-size:15px;line-height:1.3}
  .t-meta br,.t-meta span span,.t-meta .dots{display:none}
}
h1,h2,h3,.tagline{text-wrap:balance}
.hero .sub,.s-head p,.intro p{text-wrap:pretty}
@media (min-width:1500px){
  .wrap{max-width:1240px}
}

/* Room for the bar above a section reached by its link (the hero sits right under it) */
#themes,.band,#notify{scroll-margin-top:88px}
#inside{scroll-margin-top:72px}

/* Sign-up form and the /subscribed/ page (on the site only once site.config.json has signup.action) */
.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}
/* WR11 / W2 — the newsletter row: one box of a fixed height (52 px under the hero, 44 px in the footer),
   the field taking the width that is left and the button keeping its own. Every state lives inside that
   box or in the line under it, whose room is kept even when it is empty, so nothing below ever moves:
   sending (the button's words change), done (the thanks with a tick in the box, a mint line round it),
   an error (in the line under the box). The states change with a 150 ms cross-fade (none with less
   motion). A long address scrolls inside the field. */
.signup{max-width:460px;margin:30px auto 0;text-align:left}
.signup-row{position:relative;display:flex;align-items:stretch;height:52px;border-radius:999px}
/* WR12 / Q2: one joined pill, its ring on the whole control (keyboard focus inside it), following its shape. */
.signup-row:has(:focus-visible){outline:2px solid var(--mint);outline-offset:2px}
.signup-input{box-sizing:border-box;flex:1 1 auto;min-width:0;height:100%;margin:0;font:inherit;font-size:1rem;padding:0 14px 0 22px;border:1px solid var(--line);border-right:0;border-radius:999px 0 0 999px;background:var(--surface-2);color:var(--ink);transition:opacity .15s ease}
.signup-input::placeholder{color:var(--muted);opacity:1}
.signup-input:focus,.signup-input:focus-visible{outline:none}
.signup .btn{box-sizing:border-box;flex:none;height:100%;min-height:0;margin:0 0 0 1px;padding:0 24px 0 20px;white-space:nowrap;border-radius:0 999px 999px 0;transition:opacity .15s ease,background-color .15s ease}
.signup .btn:focus,.signup .btn:focus-visible{outline:none}
/* WR12F / F2: "You're already on the list." takes the thanks' box exactly, mint line, no tick. */
.signup-done,.signup-already{position:absolute;inset:0;z-index:1;display:flex;align-items:center;gap:10px;margin:0;padding:0 22px;border:1px solid var(--mint);border-radius:999px;background:var(--surface-2);font-size:.95rem;font-weight:500;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s}
.signup-done[hidden],.signup-already[hidden]{display:flex}
.signup-done svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--mint);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.signup[data-state="done"] .signup-done,.signup[data-state="already"] .signup-already{opacity:1;visibility:visible}
.signup[data-state="done"] .signup-input,.signup[data-state="done"] .btn,.signup[data-state="already"] .signup-input,.signup[data-state="already"] .btn{opacity:0;visibility:hidden}
.signup-msg{min-height:1.5em;margin:6px 0 0;font-size:.84rem;line-height:1.5;color:var(--muted)}
.signup[data-state="error"] .signup-msg{color:var(--heading);font-weight:500}
.signup-msg a{color:inherit}
.signup-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* Under the hero: "Newsletter" and its line on the left, the box on the right, in the page's 1180 px
   column; on a phone the words above the box, the box full width. */
.hero + .signup{max-width:none;margin:0;padding:32px max(16px,calc((100% - 1148px) / 2));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;border-bottom:1px solid var(--line)}
/* Under the hero the message line sits in the row's bottom padding (its room kept there), so the padding is the
   same above and below and the control is centred with its words. */
.hero + .signup .signup-field{position:relative}
.hero + .signup .signup-msg{position:absolute;left:0;right:0;top:100%;margin:4px 0 0}
/* WR12 / Q3: on phones and tablets the hero has no button, so its line "One mail on opening day. No spam." is
   here, under the box, in the room kept for the message line (which then sits in the row, not its padding). */
.hero + .signup .signup-hint{display:none}
@media (max-width:900px){
  .hero + .signup .signup-field{flex:1 1 100%}
  .hero + .signup .signup-msg{position:static;margin:6px 0 0}
  .hero + .signup .signup-hint:not([hidden]){display:inline}
}
.signup-label{flex:1 1 300px;min-width:0}
.signup-title{margin:0;font-family:var(--serif);font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--heading)}
.signup-line{margin:2px 0 0;font-size:.9rem;line-height:1.5;color:var(--muted)}
.signup-line a{color:inherit}
.signup-field{flex:0 1 520px;min-width:0}
@media (max-width:760px){.signup-field{flex-basis:100%}}
.nf .lead{color:var(--muted);margin:-12px auto 28px;max-width:420px}
/* W3 — the footer's row: the same box one size smaller (44 px), full width on phones; its line under it
   is the hint "One mail on opening day. No spam." until an error takes its place. */
.foot-news .signup{max-width:440px;margin:6px 0 0}
.foot-news .signup-row{height:44px}
.foot-news .signup-input{font-size:1rem;padding:0 12px 0 18px}
/* The hint in the field one size smaller, so it fits whole in the footer's narrower row; what is typed stays at 16 px (an iPhone zooms in on smaller). */
.foot-news .signup-input::placeholder{font-size:.875rem}
.foot-news .signup .btn{padding:0 20px 0 16px;font-size:.94rem}
.foot-news .signup-done,.foot-news .signup-already{max-width:none;margin:0;font-size:.9rem}
@media (max-width:760px){.foot-news .signup{max-width:none}}
/* The narrowest phones: a little less padding, so the placeholder fits whole beside the button. */
@media (max-width:359px){.foot-news .signup-input{padding:0 10px 0 14px}.foot-news .signup .btn{padding:0 14px 0 12px;font-size:.875rem}}

/* Legal pages, from the owner's own texts in legal-src/ (npm run apply) */
.legal-page{padding:72px 0 88px}
.legal h1{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.12;letter-spacing:-.02em}
.legal .updated{margin:12px 0 36px;font-size:.9rem;color:var(--muted)}
/* WR16 / L1: the holding pages' link to Contact, a plain link with a tap area of 44 px. */
.holding-contact a{display:inline-flex;align-items:center;min-height:44px}
.legal h2{font-size:1.4rem;margin:40px 0 10px}
.legal h3{font-size:1.12rem;margin:28px 0 8px}
.legal p,.legal li,.legal blockquote{overflow-wrap:anywhere}
.legal h1,.legal h2,.legal h3{overflow-wrap:break-word}
.legal p,.legal li,.legal blockquote{max-width:72ch}
.legal p{margin:0 0 16px}
.legal ul,.legal ol{margin:0 0 16px 22px}
.legal li{margin:4px 0}
.legal a{color:var(--brand)}
/* Round 9, B15: a table in the owner's text fits the column on a phone, its words wrapping in their cells
   (the words themselves are never changed). */
.legal table{border-collapse:collapse;margin:0 0 16px;font-size:.95rem;width:100%;max-width:72ch;table-layout:fixed}
.legal th,.legal td{overflow-wrap:anywhere;hyphens:auto}
.legal th,.legal td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.legal blockquote{border-left:3px solid var(--line);padding-left:16px;color:var(--muted);margin:0 0 16px}
.legal hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.legal code{font-size:.92em;background:var(--line-soft);padding:1px 5px;border-radius:5px}
@media (max-width:760px){.legal-page{padding:48px 0 64px}.legal table{font-size:.88rem}.legal th,.legal td{padding:6px 8px}}


/* Large text on a phone: the journey numbers wrap instead of overflowing */
.stat{min-width:0}
.stat b{overflow-wrap:break-word}
@media (min-width:360px) and (max-width:560px){.t-meta>span{min-width:0}}
.t-meta b{overflow-wrap:break-word}

/* Pressing: round, calm and the same on every page. A tap never flashes the browser's own grey
   or blue rectangle; instead every kind of control has a pressed look in its own shape. (Hover
   rules above apply only where a mouse exists, so a tap never leaves a hover behind.) */
html,a,button{-webkit-tap-highlight-color:transparent}
/* Pills: the same pill, a shade lighter in light themes and darker in dark ones, 1 px lower. */
.btn{transition:background-color .12s ease,border-color .2s,transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary:active,.skip:active{background:color-mix(in srgb,var(--brand) 84%,var(--on-brand))}
.btn-ghost:active{background:color-mix(in srgb,var(--heading) 9%,transparent);border-color:var(--brand)}
/* Text links: a soft, rounded background appears behind the words, with a little room around
   them (drawn as a shadow, so nothing moves). Links that already have a pill shape keep it. */
:where(a:not(.btn):not(.skip)){transition:background-color .12s ease,box-shadow .12s ease}
:where(a:not(.btn):not(.skip)):active{background-color:color-mix(in srgb,currentColor 12%,transparent);box-shadow:0 0 0 5px color-mix(in srgb,currentColor 12%,transparent);border-radius:6px}
.site-head .nav a:active,.sheet-nav a:active{background-color:color-mix(in srgb,currentColor 14%,transparent);box-shadow:none}
/* Icon buttons: a round tint of their own colour (the theme button tints its ring, above). */
.menu-btn:active::before{background-color:color-mix(in srgb,currentColor 15%,transparent)}
/* Cards that act as buttons: a touch smaller, the same corners. */
.t-card{transition:transform .12s ease,border-color .12s ease,background-color .12s ease}
.t-card:active{transform:scale(.98);border-color:var(--brand);background-color:color-mix(in srgb,var(--surface) 90%,var(--heading))}
/* Less motion: pressing changes colour only. */
@media (prefers-reduced-motion:reduce){.btn:active,.t-card:active{transform:none}}

/* Design review (Round 3). Small print is 13 px or more, everywhere. */
.eyebrow,.kicker,.pill,.tl time,.c-n,.c-head>span,.clock span,.mini span,.get-rows dt,.foot-grid h2,.sheet-theme span{font-size:.8125rem}
/* Phones: body text at 16 px, the journey's dates under their chapter titles, and the same
   section spacing as everywhere else on a phone. */
@media (max-width:560px){
  .principle p,.module p,.tl p,.themes-note,.foot-grid p{font-size:1rem}
  .c-head{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:760px){
  .band{margin-top:64px}
  .closing{padding:64px 0 48px}
}

/* Printing: dark text on white, no buttons, menus or decoration; the journey prints as a clean list */
@media print{
  :root,[data-palette],[data-mode],[data-mode][data-palette]{--bg:#fff;--surface:#fff;--surface-2:#fff;--ink:#000;--muted:#333;--heading:#000;--brand:#000;--line:#bbb;--line-soft:#ddd;--accent:#000;--accent-ink:#000;--band:#fff;--band-ink:#000;--band-muted:#333;--shadow:transparent}
  body{font-size:12pt;line-height:1.5;background:#fff;color:#000}
  .site-head,.site-foot,.skip,.mode-btn,.sheet,.menu-btn,.head-cta,.btn,.signup,.end,.closing,.band,.reveal::before,.hero-media,.hero-shade,.intro::before,.get-devices,.foot-grid{display:none!important}
  .hero{display:block;min-height:0;background:none;color:#000}
  .hero h1,.hero .sub,.hero .pill{color:#000}
  .wrap{max-width:none;padding:0}
  main,.intro{padding-top:0}
  .reveal{opacity:1!important;transform:none!important}
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat,.card{box-shadow:none;border:1px solid #bbb}
  .chapter{padding-top:24pt;break-inside:avoid}
  .tl{border-left-color:#bbb}
  .tl li::before{background:#fff;border-color:#000}
  .tl li:first-child::before{background:#000}
  h1,h2,h3{color:#000;break-after:avoid}
  .legal a::after{content:" (" attr(href) ")";font-size:.9em;color:#333}
  @page{margin:18mm}
}

/* WR6 / S4 — the contact page */
/* /contact/, there only once site.config.json sets an address or turns the contact form on (npm run
   apply). The addresses on the left, the form in a card on the right; one under the other below
   820 px, as in the approved preview. Fields sit on the page's own background with a 1 px line and
   12 px corners, and every field, box and button is 48 px tall or more. Every rule here starts with
   a contact class, so no other page changes. */
.contact-page{padding:72px 0 88px}
.contact-page h1{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.15;margin-top:10px}
.contact-lede{color:var(--muted);max-width:60ch;margin-top:10px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;align-items:start;margin-top:36px}
/* WR12F / F1: no address list beside the form any more: the form alone, centred, at the width it had beside the
   list (13 of 23 parts of the column after the 40 px gap; the whole column at 820 px and less). */
.contact-grid>:only-child{grid-column:1/-1;width:calc((100% - 40px) * 13 / 23);margin:0 auto}
.contact-form{position:relative;display:flex;flex-direction:column;background-color:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px}
.contact-form>*+*{margin-top:16px}
.contact-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.contact-field{display:flex;flex-direction:column;gap:6px}
.contact-form label{font-size:.8125rem;font-weight:500;color:var(--muted)}
.contact-form input:not([type=checkbox]),.contact-form select,.contact-form textarea{width:100%;min-width:0;min-height:48px;font:inherit;font-size:1rem;font-weight:400;line-height:1.4;color:var(--ink);background-color:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.contact-form select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 21px) 50%,calc(100% - 16px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
/* WR12 / Q5: the message box keeps one size (no handle) and scrolls inside, with a thin bar in the site's colours:
   the WebKit rules for Chrome's and Safari's engines (6 px, rounded), scrollbar-color where those do not exist. */
.contact-form textarea{height:132px;min-height:0;resize:none;overflow-y:auto}
.contact-form textarea::-webkit-scrollbar{width:6px}
.contact-form textarea::-webkit-scrollbar-track{background:var(--line);border-radius:999px}
.contact-form textarea::-webkit-scrollbar-thumb{background:var(--muted);border-radius:999px}
@supports not selector(::-webkit-scrollbar){.contact-form textarea{scrollbar-width:thin;scrollbar-color:var(--muted) var(--line)}}
.contact-form input:not([type=checkbox]):focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* The consent box: a 48 px target with a 22 px box drawn in its middle, ticked in the brand colour. */
/* WR11 / W4: the consent box, plain: 22 px, 4 px corners, a 2 px border (the muted colour, so the box stands at
   3:1 or more against the page in every palette), see-through until checked, then the brand colour with a tick
   in the brand's ink; nothing round it, the site's ring on keyboard focus only. The words beside it, centred
   on it, take the tap too (at least 48 px tall). */
.contact-consent{display:flex;align-items:center;gap:12px}
.contact-form .contact-consent label{display:block;padding:12px 0;min-height:48px;line-height:1.5;cursor:pointer}
.contact-consent input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-content:center;width:22px;height:22px;margin:0;border:2px solid var(--muted);border-radius:4px;background:transparent;box-shadow:none;cursor:pointer}
.contact-consent input::before{content:"";width:12px;height:12px;background:var(--on-brand);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform:scale(0)}
.contact-consent input:checked{background:var(--brand);border-color:var(--brand)}
.contact-consent input:checked::before{transform:scale(1)}
.contact-form .contact-consent input:focus{outline:none}
.contact-form .contact-consent input:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.contact-consent a{color:inherit}
/* The bot trap: off the screen, out of the Tab order and hidden from screen readers. */
.contact-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-form .cf-turnstile{min-height:140px}
.contact-send{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 16px}
.contact-send small{color:var(--muted);font-size:.8125rem}
.contact-send .btn{min-height:48px;padding:0 24px;justify-content:center}
.contact-form>.contact-status{margin-top:0}
.contact-status p{margin-top:16px;font-weight:500}
.contact-ok{color:var(--brand)}
.contact-error{color:var(--heading)}
@media (max-width:820px){.contact-grid{grid-template-columns:minmax(0,1fr);gap:32px}.contact-grid>:only-child{width:100%}}
/* WR13 / C4 (tsv's choice): on a computer (901 px and up) the page opens on a band in the brand colour (the hero's own
   dark in dark mode) across the whole window, "Contact" in the page's cream at the hero heading's size and the line
   under it; the form card, 640 px wide, floats over the band's lower edge (110 px up), 72 px above the footer (48 px
   here and the footer's own 24).
   "Get in touch" stays the page's heading for screen readers. Below 901 px the page is as it was. */
@media (min-width:901px){
  .contact-page{padding:0 0 48px}
  .contact-band{background:var(--brand);padding:64px 0 150px;text-align:center}
  .contact-band:is([data-mode="dark"] *){background:#0D120F}
  .contact-band .kicker{font-family:var(--serif);font-size:clamp(2.5rem,6.4vw,5.25rem);font-weight:600;line-height:1.02;letter-spacing:-.015em;text-transform:none;color:var(--on-brand)}
  .contact-band h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .contact-band .contact-lede{max-width:none;margin:14px auto 0;font-size:19px;color:var(--on-brand);opacity:.85}
  .contact-band:is([data-mode="dark"] *) .kicker,.contact-band:is([data-mode="dark"] *) .contact-lede{color:#F6F3EC}
  .contact-grid{position:relative;z-index:1;margin-top:-110px}
  .contact-grid>:only-child{width:640px;max-width:100%;box-shadow:0 24px 60px color-mix(in srgb,var(--brand) 18%,transparent)}
  .contact-grid:is([data-mode="dark"] *)>:only-child{box-shadow:0 24px 60px rgba(0,0,0,.4)}
}
@media (max-width:760px){.contact-page{padding:48px 0 64px}}
@media (max-width:520px){.contact-form{padding:20px}.contact-two{grid-template-columns:minmax(0,1fr)}.contact-send .btn{flex:1 1 100%}}
/* WR7 / R4 — until the form can send: its fields switched off (not dimmed past reading), and "The form
   opens soon." in the muted colour where the button would be. */
.contact-form :disabled{cursor:not-allowed}
.contact-soon{margin:0;color:var(--muted);font-size:.9375rem;font-weight:500;min-height:48px;display:flex;align-items:center}
/* end of WR6 / S4 */