/* Ethnè landing page.
 *
 * Same product as the app: the colour tokens below are 06_App/index.html's
 * :root, the faces are the app's (Cormorant Garamond for the voice, Inter for
 * everything you read quickly), and the wordmark is the app's own drawing.
 *
 * House rules this file keeps (see .claude/skills/ethne-ship/SKILL.md):
 *  - The turquoise accent fills only the thing the page wants you to do.
 *    State is shown with ink, mist and sage, never with an accent fill.
 *    Errors are the app's error red (--err on light, --err-l on dark), the
 *    one warm colour on the page, so an error reads as an error.
 *  - Nothing under 12px. Body text 16px and up.
 *  - Every control is at least 44px and at least 8px from its neighbour.
 *  - No inline style="" anywhere: the CSP is style-src 'self', which blocks
 *    them. Use a class.
 *  - Text colours are chosen for 4.5:1 against what they actually sit on;
 *    the pairs are noted where it is close.
 *
 * Colour round, October 2026: the warm ink and metal accent became the
 * app's turquoise, green and blue (the shared palette contract). The accent
 * family was renamed, every var() use with it; the error tone became the
 * app's --err family; the landing-only tokens were mapped to cool values
 * that keep at least the contrast they had (was -> now, measured WCAG ratios):
 *
 *   renamed   the accent fill      -> --accent    #1fb0ab  ink on it 5.62 (contract value; was 6.11)
 *             the accent hover     -> --accent-h  #45c8c2  ink on it 7.36 (was 7.22)
 *             the light accent     -> --accent-l  #a9e7e2  on ink 10.89 (contract value)
 *             the accent as text   -> --accent-t  #0f6866  parch 5.95, parch-d 5.35 (was 5.18), dawn 6.34 (was 6.23)
 *             the error tone       -> --err-l     #ffb4ab  ink 8.85 (was 9.36), ink-2 8.10 (was 8.76), error box 6.60 (was 7.61);
 *                                                          the app's value, every error here is on the dark form card
 *   mapped    --ink-2     #11313b  the form card on ink; parch on it 12.45
 *             --ink-line  #264650  hairline on ink 1.48 (was 1.45), decorative
 *             --ink-edge  #6f8e96  field edge, ink-2 3.92 (was 3.57), ink 4.28 (was 3.82)
 *             --ink-b     #304c55  body grey on parch-d 7.45 (was 7.14)
 *             --ink-s     #9bb5bb  fine print, ink 6.96 (was 6.58), ink-2 6.37 (was 6.16),
 *                                  under the hero light 5.21 (was 5.09); = the app's --ink-m-dark
 *             --text      #122d36  reading text, parch 13.07 (was 12.51), parch-d 11.74 (was 11.43),
 *                                  dawn 13.91 (was 13.74)
 *             --sage-d    #c0eacf  success text, ink 11.38 (was 10.95), ink-2 10.42 (was 10.24)
 *   contract  --ink #0e2a33, --ink-m #4a6770 (parch 5.48, parch-d 4.93; was 4.63),
 *             --ink-f #b7ccd1 (here only ever on ink: 8.99, ink-2 8.24), --parch #eef5f4,
 *             --parch-d #dfeae8, --dawn #f6fcfb, --sage #2f6f51, --mid #06171d
 *   derived   --sheet #d6e5e2 (the second sheet under the story page, the same 1.25 step
 *             below dawn as before); rgba() washes use the token they came from:
 *             accent 31,176,171; accent-l 169,231,226; accent-t 15,104,102;
 *             ink 14,42,51; love 43,97,154 (the app's --love #2b619a, only the crossed-out
 *             thought in "the day", which was pink by decoration); err-l 255,180,171 (the
 *             error box tint on dark at .1, its border and the plan cards at .55).
 *   errors    --err #b3261e, --err-l #ffb4ab, --err-f #fde7e5: the app's tokens.
 *   focus     --accent-t on light (5.35 and up), --accent-l on dark, as before.
 */

/* The display face, self-hosted and preloaded by every page. One variable
   file covers upright 300 to 500, which is every heading and price. Google's
   stylesheet now asks only for the italics and Inter, so this is the only
   upright Cormorant on the page. Latin subset: every Afrikaans letter
   (ê ë é è ô ö î ï û ü) and ’ are in it. Licence: assets/fonts/OFL.txt. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0e2a33;          /* deep ocean: dark grounds, and text on light */
  --ink-2: #11313b;        /* the form card on ink */
  --ink-line: #264650;
  --ink-edge: #6f8e96;     /* 3.9:1 on --ink-2, a visible field edge */
  --ink-m: #4a6770;        /* 5.48:1 on parch, 4.93:1 on parch-d */
  --ink-b: #304c55;        /* body grey for the parch-d bands, 7.45:1 */
  --ink-f: #b7ccd1;        /* secondary text on ink, 8.99:1 (never text on light) */
  --ink-s: #9bb5bb;        /* fine print on ink, 6.96:1 */
  --text: #122d36;         /* reading text on parch */
  --parch: #eef5f4;        /* sea mist */
  --parch-d: #dfeae8;
  --dawn: #f6fcfb;
  --sheet: #d6e5e2;        /* the second sheet under the story page */
  --mid: #06171d;          /* the deepest dark: the phone frame */
  --accent: #1fb0ab;       /* turquoise: the CTA fill (ink on it 5.62:1), dots, rules */
  --accent-h: #45c8c2;     /* the CTA hover, ink on it 7.36:1 */
  --accent-l: #a9e7e2;     /* light turquoise on dark grounds, 10.89:1 on ink */
  --accent-t: #0f6866;     /* turquoise as TEXT on light grounds, 5.95:1 */
  --err: #b3261e;          /* error text and borders on light, 5.91:1 on parch (none on this page yet) */
  --err-l: #ffb4ab;        /* error text and borders on dark, 8.85:1 on ink, 8.10:1 on ink-2 */
  --err-f: #fde7e5;        /* faint error box on light, --err on it 5.52:1 */
  --sage: #2f6f51;
  --sage-d: #c0eacf;       /* success text on ink */
  --line: rgba(14, 42, 51, .14);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gut: 20px;
  --max: 1120px;
  --sec: clamp(72px, 11vw, 128px);
}
@media (max-width: 359px) { :root { --gut: 16px; } }
@media (min-width: 600px) { :root { --gut: 32px; } }
@media (min-width: 1024px) { :root { --gut: 48px; } }

/* ---------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
}
body {
  margin: 0;
  background: var(--parch);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  /* Cormorant's default figures are oldstyle: its 1 reads as I, its 0 as o.
     Every price on this page is set in it. */
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
a, button, summary, label, input { -webkit-tap-highlight-color: transparent; }
button, .btn, summary, .lang button, .bill button { -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }
h1, h2, h3, summary { text-wrap: balance; }
p, li { text-wrap: pretty; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ic { width: 20px; height: 20px; flex: none; }

:focus-visible { outline: 2px solid var(--accent-t); outline-offset: 3px; }
.top :focus-visible, .hero :focus-visible, .sec-reg :focus-visible,
.foot :focus-visible, .plan-pro :focus-visible { outline-color: var(--accent-l); }
#main:focus, #reg-h:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: 12px; top: -120px; z-index: 20;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 99px; background: var(--parch); color: var(--ink);
  font-weight: 500; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gut));
  margin: 0 auto;
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}

/* ------------------------------------------------------------- shared --- */
.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.005em;
  max-width: 18em;
}
.h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
}
.lede { font-size: 18px; line-height: 1.65; color: var(--ink-m); margin-top: 16px; max-width: 36em; }
.sec { padding: var(--sec) 0; }
.sec-head { margin-bottom: clamp(40px, 6vw, 64px); }
.fine { font-size: 14px; line-height: 1.6; color: var(--ink-m); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 13px 28px;
  border: 0; border-radius: 99px;
  background: var(--accent); color: var(--ink);
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .01em;
  line-height: 1.3; text-align: center; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31, 176, 171, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-color .18s ease;
}
.btn:hover { background: var(--accent-h); }
.btn:active { transform: translateY(1px); }
.btn-block { display: flex; width: 100%; padding-left: 20px; padding-right: 20px; }
.btn[aria-busy="true"] { cursor: progress; }

.tlink {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font-size: 15px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.tlink-dark { color: var(--parch); }
.tlink:hover { text-decoration-thickness: 2px; }

/* -------------------------------------------------------------- header --- */
.top { background: var(--ink); color: var(--parch); }
.top-in {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 72px; padding-top: 8px; padding-bottom: 8px;
}
.brand {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px;
  color: var(--accent); text-decoration: none;
}
.wm { height: 24px; width: auto; aspect-ratio: 536 / 160; fill: currentColor; }
.top-nav { display: none; }
.top-nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  color: var(--ink-f); font-size: 15px; text-decoration: none;
}
.top-nav a:hover { color: var(--parch); }
.top-act { display: flex; align-items: center; gap: 12px; }
.lang { display: flex; gap: 8px; }
.lang button {
  min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--ink-line); border-radius: 99px;
  background: transparent; color: var(--ink-f);
  font-size: 13px; font-weight: 500; letter-spacing: .06em;
  cursor: pointer; transition: background-color .18s, color .18s;
}
.lang button:hover { border-color: var(--ink-edge); }
.lang button[aria-pressed="true"] { background: var(--parch); color: var(--ink); border-color: var(--parch); }
.signin {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--ink-edge); border-radius: 99px;
  color: var(--parch); font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.signin:hover { border-color: var(--parch); }
@media (min-width: 880px) {
  .top-nav { display: flex; gap: 28px; margin-left: auto; margin-right: 20px; }
}

/* ---------------------------------------------------------------- hero --- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--parch); }
/* A turquoise light, the accent at 17%, off to the right. verify.js composites
   this stop under the hero text, so change both together. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 78% 38%, rgba(31, 176, 171, .17), rgba(31, 176, 171, 0) 70%);
}
.hero-in {
  position: relative; isolation: isolate;
  display: grid; gap: 64px;
  padding-top: clamp(32px, 7vw, 88px);
  padding-bottom: clamp(80px, 11vw, 136px);
}
.hero-t {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(60px, 15vw, 116px);
  line-height: .96; letter-spacing: -.012em;
  color: var(--parch);
}
.hero-t .ln { display: block; }
.hero-t em { font-style: italic; color: var(--accent-l); }
.hero-lede { font-size: 18px; line-height: 1.65; color: var(--ink-f); max-width: 32em; margin-top: 28px; }
.hero-lede strong { color: var(--parch); font-weight: 500; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }
.hero-note { font-size: 15px; color: var(--ink-s); margin-top: 16px; }

/* The story page. Paper on the ink, with a second sheet under it. The sheet
   hangs off .hero-art rather than .page: while .page animates it becomes a
   stacking context, and a z-index:-1 child of it would paint OVER its paper. */
.hero-art { position: relative; isolation: isolate; width: 100%; max-width: 520px; }
.hero-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sheet); border-radius: 3px;
  transform: rotate(-1.6deg) translate(-4px, 10px);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .7);
}
.page {
  position: relative;
  padding: 36px 28px 30px;
  background: var(--dawn); color: var(--ink);
  border-radius: 3px;
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .8), 0 14px 28px -16px rgba(0, 0, 0, .55);
}
.page-cap { font-size: 14px; color: var(--ink-m); }
.page-t {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3vw, 31px); line-height: 1.2; margin-top: 12px;
}
.page-x {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(19px, 2.1vw, 22px); line-height: 1.6;
  color: var(--text); margin-top: 18px;
}
.page-x::first-letter {
  float: left; font-size: 3.4em; line-height: .8;
  padding: .07em .09em 0 0; color: var(--accent-t);
}
.page-aff {
  font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.45;
  margin-top: 24px;
}
.page-aff::before {
  content: ""; display: block; width: 48px; height: 1px;
  background: var(--accent); margin-bottom: 20px;
}
.page-note { font-size: 14px; color: var(--ink-m); margin-top: 20px; }

@media (min-width: 960px) {
  .hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 72px; }
  .hero-art { justify-self: end; }
  .hero-art::before { transform: rotate(-2.4deg) translate(-10px, 12px); }
  .page { padding: 48px 44px 40px; }
}

/* A phone on its side has ~375px of height. Three stacked 100px lines would
   be the whole first screen with the button below it, so the headline runs
   on as one line of text there. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero-t { font-size: clamp(44px, 8vw, 64px); line-height: 1.02; }
  .hero-t .ln { display: inline; }
  .hero-in { padding-top: 20px; gap: 48px; }
  .hero-lede { margin-top: 18px; }
  .hero-act { margin-top: 24px; }
}

/* ------------------------------------------------------- what it is --- */
.sec-what { background: var(--parch); }
.what-in { display: grid; gap: 32px; }
.what-h { max-width: 13em; }
.what-p p { font-size: 18px; line-height: 1.75; color: var(--text); max-width: 34em; }
.what-p p + p { margin-top: 20px; }
@media (min-width: 900px) {
  .what-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .what-p { padding-top: 10px; }
}

/* ---------------------------------------------------------- the app --- */
/* Three real screens in a plain phone frame. On a phone they sit in a row
   that swipes sideways (the next one peeks in, so it is clear there is more);
   from 900px they stand side by side and nothing scrolls. The row is a
   scroll container, so the page itself never scrolls sideways. */
.sec-shots { background: var(--ink); color: var(--parch); }
.sec-shots .lede { color: var(--ink-f); }
.shots {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--gut), env(safe-area-inset-left));
  padding: 4px max(var(--gut), env(safe-area-inset-right)) 20px max(var(--gut), env(safe-area-inset-left));
  scrollbar-width: thin; scrollbar-color: var(--ink-line) transparent;
}
.shots:focus-visible { outline: 2px solid var(--accent-l); outline-offset: -2px; }
.shot {
  flex: 0 0 min(70vw, 280px);
  scroll-snap-align: start;
  display: grid; gap: 18px; align-content: start;
  margin: 0;
}
.phone {
  padding: 8px;
  border-radius: 40px;
  background: var(--mid);
  border: 1px solid rgba(169, 231, 226, .28);
  box-shadow: 0 36px 60px -36px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.phone picture { display: block; aspect-ratio: 600 / 1298; }
.phone img {
  display: block; width: 100%; height: auto;
  border-radius: 32px;
  background: var(--parch);
}
/* The screens come in two languages (site.js swaps them with the page). A
   browser that runs scripts fetches neither set until site.js has chosen:
   a lazy image that is not displayed is never loaded, so a visitor who
   arrives in English never downloads the Afrikaans screens as well. The
   frame keeps its size meanwhile (aspect-ratio above), so nothing moves when
   they appear. Without scripts, the Afrikaans screens in the HTML show. */
@media (scripting: enabled) {
  .phone picture:not(.is-lang) img { display: none; }
}
.shot figcaption { display: grid; gap: 4px; padding: 0 4px; }
.shot-t { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--parch); }
.shot-p { font-size: 15px; line-height: 1.55; color: var(--ink-f); }
.shots-note { margin-top: 20px; max-width: 46em; color: var(--ink-s); }
@media (min-width: 900px) {
  .shots {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
    overflow: visible; scroll-snap-type: none;
    max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto;
    padding: 4px var(--gut) 0;
  }
  .shot { max-width: 300px; justify-self: center; width: 100%; }
  .shots-note { margin-top: 40px; }
}

/* ------------------------------------------------------------ the day --- */
.sec-day { background: var(--parch-d); }
.sec-day .lede { color: var(--ink-b); }
.day { max-width: 900px; }
.day-i { position: relative; display: grid; gap: 4px; padding: 0 0 44px 32px; }
.day-i:last-child { padding-bottom: 0; }
/* the thread through the day */
.day-i::before {
  content: ""; position: absolute; left: 4px; top: 18px; bottom: -14px;
  width: 1px; background: rgba(15, 104, 102, .38);
}
.day-i:last-child::before { display: none; }
.day-i::after {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--parch-d);
}
.day-when { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--accent-t); }
.day-b p { margin-top: 8px; color: var(--ink-b); max-width: 36em; }
.rf {
  margin-top: 18px; max-width: 30em;
  padding: 18px 20px;
  background: var(--dawn); border: 1px solid rgba(14, 42, 51, .08); border-radius: 12px;
}
.day-b .rf p { margin-top: 0; }
.rf-o { font-size: 16px; color: var(--ink-m); }
.rf-o s { text-decoration-color: rgba(43, 97, 154, .7); text-decoration-thickness: 1.5px; }
.day-b .rf .rf-l { margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--accent-t); }
.day-b .rf .rf-n { margin-top: 2px; font-family: var(--serif); font-size: 23px; line-height: 1.35; color: var(--ink); }
@media (min-width: 720px) {
  .day-i { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding-left: 44px; }
}

/* ------------------------------------------------------ what you get --- */
.sec-feat { background: var(--parch); }
.feat { display: grid; column-gap: 56px; margin-top: clamp(36px, 5vw, 56px); }
.feat li { border-top: 1px solid var(--line); padding: 24px 0 32px; }
.feat p { margin-top: 8px; color: var(--ink-m); max-width: 30em; }
@media (min-width: 720px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .feat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ----------------------------------------------------------- pricing --- */
.sec-price { background: var(--parch-d); }
.sec-price .lede { color: var(--ink-b); }
.bill {
  display: inline-flex; gap: 8px; padding: 4px; margin-bottom: 28px;
  background: var(--parch); border: 1px solid var(--line); border-radius: 99px;
}
.bill button {
  min-height: 44px; padding: 0 22px;
  border: 0; border-radius: 99px; background: transparent;
  color: var(--ink-m); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background-color .18s, color .18s;
}
.bill button[aria-pressed="true"] { background: var(--ink); color: var(--parch); }
.plans { display: grid; gap: 20px; }
.plan { display: flex; flex-direction: column; padding: 32px 24px; border-radius: 20px; min-width: 0; }
.plan-free { background: var(--dawn); border: 1px solid var(--line); }
.plan-pro {
  background: var(--ink); color: var(--parch);
  border: 1px solid rgba(31, 176, 171, .5);
  box-shadow: 0 34px 60px -40px rgba(14, 42, 51, .7);
}
.plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.plan-n { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; }
.badge {
  font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--accent-l);
  border: 1px solid rgba(169, 231, 226, .45); border-radius: 99px; padding: 4px 12px;
}
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 18px; }
.amt { font-family: var(--serif); font-weight: 300; font-size: 64px; line-height: 1; letter-spacing: -.01em; }
.per { font-size: 16px; color: var(--ink-m); }
.plan-meta { margin-top: 10px; font-size: 15px; color: var(--ink-m); max-width: 30em; }
.plan-pro .per, .plan-pro .plan-meta { color: var(--ink-f); }
.ticks-h { margin-top: 28px; font-size: 15px; font-weight: 500; color: var(--accent-l); }
.ticks { display: grid; gap: 12px; margin-top: 24px; }
.ticks-h + .ticks { margin-top: 14px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; }
.ticks .ic { margin-top: 2px; color: var(--sage); }
.plan-pro .ticks .ic { color: var(--accent); }
.soon {
  display: inline-block; margin-left: 2px; padding: 0 9px;
  border: 1px solid rgba(169, 231, 226, .45); border-radius: 99px;
  font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--accent-l);
  white-space: nowrap; vertical-align: 1px;
}
.soon-note { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--ink-f); }
.plan-act { display: grid; gap: 12px; margin-top: auto; padding-top: 32px; }
.plan-alt { justify-content: center; }
.pay-off {
  font-size: 15px; line-height: 1.55; color: var(--parch);
  background: rgba(31, 176, 171, .12); border-left: 2px solid var(--accent);
  border-radius: 8px; padding: 12px 14px;
}
.price-fine { margin-top: 28px; max-width: 46em; color: var(--ink-b); }
@media (min-width: 600px) { .plan { padding: 40px 36px; } }
@media (min-width: 800px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

/* ----------------------------------------------------------- register --- */
.sec-reg { background: var(--ink); color: var(--parch); }
.sec-reg .lede { color: var(--ink-f); }
.reg-in { display: grid; gap: 40px; }
.next-h { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.3; margin-top: 40px; }
.next { counter-reset: n; display: grid; gap: 14px; margin-top: 16px; }
.next li {
  counter-increment: n;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline;
  color: var(--ink-f);
}
.next li::before { content: counter(n); font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--accent); }
.next-paid { margin-top: 18px; font-size: 15px; color: var(--ink-f); padding-left: 34px; }
@media (min-width: 960px) {
  .reg-in { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 80px; align-items: start; }
  .reg-intro { position: sticky; top: 32px; }
}

.reg {
  position: relative;
  display: grid; gap: 24px;
  padding: 28px 20px;
  background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: 20px;
}
@media (max-width: 359px) { .reg { padding: 24px 16px; } }
@media (min-width: 600px) { .reg { padding: 40px; } }
.fld { display: grid; gap: 8px; min-width: 0; }
.fld > label, .plan-pick legend { font-size: 15px; font-weight: 500; color: var(--parch); }
.opt { font-weight: 400; color: var(--ink-f); }
.in {
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: var(--ink); color: var(--parch);
  border: 1px solid var(--ink-edge); border-radius: 12px;
  font-size: 16px;  /* 16, not less: iOS zooms the page on focus otherwise */
  outline: none; transition: border-color .18s, box-shadow .18s;
}
.in:focus { border-color: var(--accent-l); box-shadow: 0 0 0 1px var(--accent-l); }
.in[aria-invalid="true"] { border-color: var(--err-l); }
.pw { position: relative; }
.in-pw { padding-right: 88px; }
.peek {
  position: absolute; top: 4px; right: 4px; bottom: 4px;
  min-width: 76px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-f); font-size: 14px; font-weight: 500; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}
.peek:hover { color: var(--parch); }
.hint { font-size: 14px; color: var(--ink-s); }
.ferr { font-size: 15px; line-height: 1.5; color: var(--err-l); }

.plan-pick { display: grid; gap: 10px; padding: 0; border: 0; min-width: 0; }
.plan-pick legend { padding: 0; margin-bottom: 12px; }
.pr {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  min-height: 64px; padding: 14px 16px;
  background: var(--ink); border: 1px solid var(--ink-line); border-radius: 14px;
  cursor: pointer; transition: border-color .18s;
}
.pr:hover { border-color: var(--ink-edge); }
.pr:has(input:checked) { border-color: var(--accent-l); box-shadow: inset 0 0 0 1px var(--accent-l); }
.pr-dot {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  border: 1.5px solid var(--ink-edge); border-radius: 50%;
  background: var(--ink);
}
.pr input:checked ~ .pr-dot { border-color: var(--accent-l); background: var(--accent-l); box-shadow: inset 0 0 0 4px var(--ink); }
.pr input:focus-visible ~ .pr-dot { outline: 2px solid var(--accent-l); outline-offset: 3px; }
.pr-b { display: grid; gap: 2px; min-width: 0; }
.pr-t { font-weight: 500; color: var(--parch); line-height: 1.4; }
.pr-d { font-size: 14px; line-height: 1.5; color: var(--ink-f); }
.pr.is-off { cursor: not-allowed; border-style: dashed; }
.pr.is-off:hover { border-color: var(--ink-line); }
.pr.is-off .pr-dot { border-style: dashed; }
.plan-pick.has-err .pr { border-color: rgba(255, 180, 171, .55); }

.chk {
  display: flex; align-items: flex-start; gap: 14px;
  min-height: 44px; padding: 10px 0;
  font-size: 15px; line-height: 1.55; color: var(--parch);
  cursor: pointer;
}
.cb {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 24px; height: 24px; margin: 0;
  background: var(--ink) center / 16px 16px no-repeat;
  border: 1.5px solid var(--ink-edge); border-radius: 6px;
  cursor: pointer;
}
.cb:checked {
  border-color: var(--accent-l);
  background-color: var(--accent-l);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2a33' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.cb:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 3px; }
.cb[aria-invalid="true"] { border-color: var(--err-l); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-left: 38px; }
.legal-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--parch); font-size: 15px;
  text-decoration: underline; text-decoration-color: var(--ink-edge); text-underline-offset: 5px;
}
.legal-links a:hover { text-decoration-color: var(--parch); }

.hp {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.btn-go { margin-top: 4px; }

.status { font-size: 15px; line-height: 1.55; border-radius: 10px; }
/* Empty, it must still exist (a live region added at the moment it speaks is
   often not announced), but it must not hold a grid gap open. */
.status:empty { margin-top: -24px; }
.status-info { color: var(--ink-f); }
.status-ok { color: var(--sage-d); }
.status-err {
  color: var(--err-l);
  background: rgba(255, 180, 171, .1);
  border: 1px solid rgba(255, 180, 171, .55);
  padding: 12px 14px;
}
.status-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
  color: var(--parch); font-weight: 500;
  text-decoration: underline; text-underline-offset: 5px;
}
.reg-fine { color: var(--ink-s); }

/* Sign up in the app instead: shown in place of the form when the app's
   landing API cannot be reached from here. Same card as the form. */
.reg-alt { gap: 16px; }
.reg-alt:focus { outline: none; }
.reg-alt:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 3px; }
.alt-lead {
  font-size: 15px; line-height: 1.55; color: var(--err-l);
  background: rgba(255, 180, 171, .1); border: 1px solid rgba(255, 180, 171, .55);
  border-radius: 10px; padding: 12px 14px;
}
.alt-h { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--parch); }
.alt-p { font-size: 16px; line-height: 1.6; color: var(--ink-f); }
.alt-go { margin-top: 8px; }
.alt-fine { color: var(--ink-s); }

/* ---------------------------------------------------------------- FAQ --- */
.sec-faq { background: var(--parch); }
.faq-in { display: grid; gap: 32px; }
.faq details { border-top: 1px solid var(--line); padding: 6px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 56px; padding: 10px 0;
  font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.3;
  list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--accent-t), var(--accent-t)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--accent-t), var(--accent-t)) center / 1.5px 14px no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 2px 0 22px; max-width: 40em; }
.faq-a p { color: var(--text); }
.faq-a p + p { margin-top: 12px; }
@media (min-width: 960px) {
  .faq-in { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
}

/* Share: one line and one link under the answers. */
.share { padding-top: 8px; }
.share-t { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.35; color: var(--ink); }
.share-a { margin-top: 4px; }
@media (min-width: 960px) { .share { grid-column: 2; } }

/* ------------------------------------------------------------- footer --- */
.foot { background: var(--ink); color: var(--ink-f); padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); }
.foot-in { display: grid; gap: 28px; }
.foot-tag { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-f); margin-top: 6px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--parch); font-size: 15px; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.foot-legal { font-size: 14px; color: var(--ink-s); border-top: 1px solid var(--ink-line); padding-top: 24px; }
@media (min-width: 800px) {
  .foot-in { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .foot-legal { grid-column: 1 / -1; }
}

/* ------------------------------------------------- documents and 404 --- */
.doc-main { background: var(--parch); padding: clamp(48px, 8vw, 96px) 0 var(--sec); }
.doc { max-width: 680px; }
.doc h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 7vw, 64px); line-height: 1.05; }
.doc .updated { margin-top: 14px; font-size: 15px; color: var(--ink-m); }
.doc .intro { margin-top: 28px; font-size: 18px; line-height: 1.7; color: var(--text); }
.doc h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.2; margin-top: 52px; }
.doc h3 { font-size: 17px; font-weight: 500; line-height: 1.4; margin-top: 28px; }
.doc p, .doc li { color: var(--text); }
.doc p { margin-top: 14px; }
.doc ul.dots { display: grid; gap: 8px; margin-top: 14px; padding-left: 22px; list-style: disc; }
.doc ul.dots li::marker { color: var(--accent-t); }
.doc strong { font-weight: 500; color: var(--ink); }
.rows { margin-top: 18px; border-top: 1px solid var(--line); }
.row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.row-k { font-weight: 500; color: var(--ink); }
.doc .row p { margin-top: 4px; }
.row-w { font-size: 15px; color: var(--ink-m); }
.doc .row .row-w { margin-top: 6px; }
.doc-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; }
.doc-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--accent-t); text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.doc-back { margin-top: 56px; }

.nf { background: var(--ink); color: var(--parch); min-height: 70vh; display: flex; align-items: center; }
.nf-in { padding-top: 64px; padding-bottom: 96px; }
.nf h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 9vw, 80px); line-height: 1.05; max-width: 12em; }
.nf p { margin-top: 18px; font-size: 18px; color: var(--ink-f); max-width: 30em; }
.nf .btn { margin-top: 32px; }

/* ------------------------------------------------------------- motion --- */
/* One moment, on arrival: the headline sets itself and the page settles.
   Nothing else on the page moves on its own. */
@media (prefers-reduced-motion: no-preference) {
  .hero-t .ln, .hero-lede, .hero-act, .hero-note {
    animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
  }
  .hero-t .ln:nth-child(2) { animation-delay: .08s; }
  .hero-t .ln:nth-child(3) { animation-delay: .16s; }
  .hero-lede { animation-delay: .3s; }
  .hero-act { animation-delay: .38s; }
  .hero-note { animation-delay: .44s; }
  .hero-art { animation: settle 1.2s .3s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }