/* The privacy policy and the terms (public/privacy.html and public/terms.html).
   These two are plain files, not parts of the built page, so they bring their own stylesheet, fonts
   and script. Colour, type, glass, buttons, the bar, the steps and the footer are the home page's
   (src/styles/base.css and closing.css): a change there needs the same change here.

   Each thing the app does is set out the way the app sets out a bottle: a question, the answer in
   plain words, and a label that lists what is in it. */

@font-face { font-family: 'Geist'; src: url('fonts/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* unslop-ignore: the app's typeface */
@font-face { font-family: 'Archivo'; src: url('fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 70%; font-display: swap; }

:root {
  --ink: #1D1D1F;
  --ink-2: #3A3A3C;
  --mute: #6E6E73;
  --line: #E6E8EC;
  --blue: #0A6CFF;
  --blue-ink: #0A4FC2;
  --blue-wash: #EEF4FF;
  --ground: #F4F5F7;
  --paper: #FFFFFF;
  --good-ink: #177A42; --good-wash: #E3F5EA;

  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --key: var(--blue);
  --shade: 20, 40, 90;

  --pad: max(clamp(20px, 4.6vw, 76px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --nav-h: 76px;
  --up: 1px;
  --out: cubic-bezier(0.22, 0.8, 0.2, 1);
  --capsule: 999px; /* unslop-ignore: the app's own buttons and chips are capsules */
  --app-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; /* unslop-ignore: Geist is the app's typeface */
  --label-font: 'Archivo', 'Arial Narrow', sans-serif;
  --voice-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; /* the voice lines use the app's typeface, upright */

  --cast: 0 60px 90px -44px rgba(var(--shade), 0.34), 0 20px 34px -16px rgba(var(--shade), 0.18),
    0 2px 5px -1px rgba(var(--shade), 0.12), 0 0 0 0.5px rgba(var(--shade), 0.08);
  --cast-low: 0 18px 30px -18px rgba(var(--shade), 0.3), 0 2px 5px -1px rgba(var(--shade), 0.1), 0 0 0 0.5px rgba(var(--shade), 0.08);
}
/* A big monitor: the same page, larger, and never wider than the home page gets. */
@media (min-width: 901px) and (min-height: 561px) {
  :root {
    --up: clamp(1px, 0.1svh, 1.5px);
    --pad: max(clamp(20px, 4.6vw, 76px), calc((100vw - 1760 * var(--up)) / 2));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--app-font);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }
/* The home page's film grain. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.next :focus-visible, .foot :focus-visible { outline-color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; }
.skip:focus { top: 16px; }

/* ── Type ─────────────────────────────────────────────────────────────── */
h1, h2 { font-weight: 660; letter-spacing: -0.047em; line-height: 0.98; color: var(--fg); text-wrap: balance; }
h1 { font-size: clamp(44px, min(7.2vw, 13svh), 104 * var(--up)); }
h1 em, h2 em { font-style: normal; color: var(--key); }
/* The coloured half of the title goes to the next line whole, never a word at a time. */
h1 em { display: inline-block; }
/* The reader's own question, in their voice. The answer under it is in the app's. */
.ask { font-family: var(--voice-font); font-weight: 560; font-size: clamp(21px, 1.9vw, 29 * var(--up)); line-height: 1.2; letter-spacing: -0.01em; color: var(--key); }
.lede { font-size: clamp(18px, 1.5vw, 22.5 * var(--up)); line-height: 1.42; letter-spacing: -0.012em; color: var(--fg-2); max-width: 34ch; text-wrap: pretty; }
.fine { font-size: calc(15.5 * var(--up)); line-height: 1.4; color: var(--mute); }
/* The small capitals off the back of a bottle. */
.caps { font-family: var(--label-font); font-stretch: 70%; font-size: calc(13.5 * var(--up)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 0; border-radius: var(--capsule);
  font-size: 15px; font-weight: 620; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color 0.2s, box-shadow 0.25s, scale 0.25s var(--out);
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.3s var(--out); }
.btn--lg { height: calc(58 * var(--up)); padding: 0 calc(28 * var(--up)); font-size: calc(18 * var(--up)); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--white { background: #fff; color: var(--ink); box-shadow: 0 20px 34px -18px rgba(3, 30, 90, 0.7); }
.btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
@media (hover: hover) {
  .btn--ink:hover { background: #000; }
  .btn--white:hover { box-shadow: 0 26px 38px -18px rgba(3, 30, 90, 0.85); }
  .btn--white:hover svg { translate: 3px 0; }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
}
.btn:active { scale: 0.97; }

/* ── The bar ──────────────────────────────────────────────────────────── */
.nav { position: fixed; left: 0; right: 0; top: 14px; z-index: 80; display: flex; justify-content: center; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.nav__bar {
  --shade: 20, 34, 70;
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 4px;
  height: 56px; padding: 0 6px 0 18px; border-radius: 28px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.38) 55%, rgba(255, 255, 255, 0.54) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
  box-shadow: inset 0 1.2px 0 rgba(255, 255, 255, 0.95), inset 1.2px 0 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 0.6px rgba(255, 255, 255, 0.5), 0 18px 40px -22px rgba(var(--shade), 0.5), 0 2px 6px -2px rgba(var(--shade), 0.16);
  transition: background 0.5s, box-shadow 0.5s;
}
.nav__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 18.5px; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); margin-right: 14px; transition: color 0.4s; }
.mark { width: 26px; height: 28px; fill: #63BDEB; stroke: #63BDEB; stroke-width: 6.8; stroke-linecap: round; }
.mark path { fill: none; }
.mark circle { stroke: none; }
.mark path.mark__ink { stroke: #1D3A50; transition: stroke 0.4s; }
.mark circle.mark__ink { fill: #1D3A50; transition: fill 0.4s; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a { padding: 8px 12px; border-radius: var(--capsule); font-size: 14.5px; font-weight: 560; letter-spacing: -0.01em; color: rgba(29, 29, 31, 0.7); transition: color 0.3s, background-color 0.3s; }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); } }
/* The page you are on. */
.nav__links a[aria-current] { color: var(--ink); background: rgba(29, 29, 31, 0.07); }
.nav__cta { margin-left: 8px; }

/* Over the blue close and the footer the bar turns to smoked glass (legal.js). */
.nav--dark .nav__bar { background: linear-gradient(140deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow: inset 0 1.2px 0 rgba(255, 255, 255, 0.36), inset 1.2px 0 0 rgba(255, 255, 255, 0.18), inset 0 0 0 0.6px rgba(255, 255, 255, 0.2), 0 18px 40px -22px rgba(0, 0, 0, 0.7); }
.nav--dark .nav__brand { color: #fff; }
.nav--dark .mark path.mark__ink { stroke: #fff; }
.nav--dark .mark circle.mark__ink { fill: #fff; }
.nav--dark .nav__links a { color: rgba(255, 255, 255, 0.78); }
.nav--dark .nav__links a[aria-current] { color: #fff; background: rgba(255, 255, 255, 0.16); }
.nav--dark .nav__cta { background: #fff; color: var(--ink); }

/* On a phone these two pages keep their own links in the bar: the way to the app is at the end of the page. */
@media (max-width: 560px) {
  .nav__bar { width: 100%; padding: 0 8px 0 16px; }
  .nav__brand { margin-right: auto; }
  .nav__cta { display: none; }
}

/* ── The top: the title, and the short version ────────────────────────── */
.top { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: end; column-gap: clamp(30px, 5vw, 96px); padding: calc(var(--nav-h) + clamp(44px, 9vh, 120px)) var(--pad) clamp(56px, 9vh, 120px); }
.top .ask { margin-bottom: clamp(14px, 1.6vw, 22px); }
.top .lede { margin-top: clamp(18px, 2vw, 28px); }
.top .fine { margin-top: 18px; max-width: 40ch; }

/* The whole page in five lines, for anyone who stops here. */
.short { position: relative; justify-self: end; width: 100%; max-width: calc(640 * var(--up)); padding: 22px clamp(20px, 2.2vw, 30px) 8px; border-radius: 30px; background: var(--paper); box-shadow: var(--cast); }
.short__comfi { position: absolute; right: clamp(18px, 2.4vw, 36px); bottom: 100%; width: clamp(84px, 8vw, 112px); margin-bottom: -7px; }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -6px; } }
.short__comfi img { animation: bob 2.6s ease-in-out infinite alternate; }
.short li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.short li:first-of-type { margin-top: 14px; }
.short b { font-size: clamp(17px, 1.35vw, 20 * var(--up)); font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; }

/* Where a thing lives: on the phone, with us, or wherever the person decides. */
.tag { display: inline-flex; align-items: center; min-height: calc(30 * var(--up)); padding: 4px calc(12 * var(--up)); border-radius: calc(15 * var(--up)); background: #EEF0F3; color: var(--ink-2); font-size: calc(14.5 * var(--up)); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.tag--phone { background: var(--good-wash); color: var(--good-ink); }
.tag--sent { background: var(--blue-wash); color: var(--blue-ink); }

/* ── The document: what is on the page, and the page ──────────────────── */
.doc { display: grid; grid-template-columns: minmax(190px, 0.36fr) minmax(0, 1fr); column-gap: clamp(30px, 5vw, 96px); align-items: start; padding: 0 var(--pad) clamp(70px, 11vh, 150px); }
.toc { position: sticky; top: calc(var(--nav-h) + 22px); padding-top: clamp(44px, 7vh, 84px); }
.toc .caps { display: block; margin-bottom: 12px; }

/* The home page's numbered steps. Here they are the contents, and the one being read is lit (legal.js).
   Without the script every step reads as done. */
.steps { --n: calc(28 * var(--up)); display: grid; }
.steps li { position: relative; }
.steps a { display: flex; align-items: center; gap: 13px; padding: 8px 0; font-size: calc(16 * var(--up)); font-weight: 560; letter-spacing: -0.015em; line-height: 1.2; color: var(--fg); transition: color 0.4s; }
.steps__n { position: relative; z-index: 1; flex-shrink: 0; display: grid; place-items: center; width: var(--n); height: var(--n); border-radius: 50%; font-size: calc(var(--n) * 0.47); font-weight: 700; background: var(--fg); color: var(--ground); transition: background-color 0.4s, color 0.4s, scale 0.4s var(--out); }
.steps li + li::before { content: ''; position: absolute; left: calc(var(--n) / 2 - 1px); top: -8px; width: 2px; height: 16px; background: var(--fg); transition: background-color 0.4s; }
.steps.is-live a { color: color-mix(in srgb, var(--fg) 40%, transparent); }
.steps.is-live .steps__n { background: color-mix(in srgb, var(--fg) 9%, var(--ground)); color: color-mix(in srgb, var(--fg) 50%, transparent); }
.steps.is-live li + li::before { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.steps.is-live li.is-on a, .steps.is-live li.is-done a { color: var(--fg); }
.steps.is-live li.is-on .steps__n { background: var(--blue); color: #fff; scale: 1.08; }
.steps.is-live li.is-done .steps__n { background: var(--fg); color: var(--ground); }
.steps.is-live li.is-on::before, .steps.is-live li.is-done::before { background: var(--fg); }
@media (hover: hover) { .steps.is-live a:hover { color: var(--fg); } }

.doc__body { max-width: calc(760 * var(--up)); }
.sec { padding: clamp(44px, 7vh, 84px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) - 8px); }
.sec:first-child { border-top: 0; }
.sec .ask { margin-bottom: 12px; }
.sec h2 { font-size: clamp(31px, min(4vw, 7.6svh), 54 * var(--up)); }
.sec p:not(.ask) { margin-top: 20px; font-size: clamp(17px, 1.22vw, 19.5 * var(--up)); line-height: 1.55; letter-spacing: -0.008em; color: var(--fg-2); max-width: 58ch; text-wrap: pretty; }
.sec p b { font-weight: 640; color: var(--fg); }
.sec p a, .label a { color: var(--blue-ink); text-decoration: underline; text-decoration-color: rgba(10, 79, 194, 0.35); text-underline-offset: 3px; }
@media (hover: hover) { .sec p a:hover, .label a:hover { text-decoration-color: currentColor; } }

/* A plain list: house rules, small print that is three short things. */
.list { margin-top: 22px; display: grid; gap: 12px; max-width: 58ch; }
.list li { position: relative; padding-left: 26px; font-size: clamp(17px, 1.22vw, 19.5 * var(--up)); line-height: 1.5; letter-spacing: -0.008em; color: var(--fg-2); text-wrap: pretty; }
.list li::before { content: ''; position: absolute; left: 4px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.list b { font-weight: 640; color: var(--fg); }

/* The label: what is in this part of the app, set out like the back of a bottle. */
.label { margin-top: 30px; padding: 4px clamp(18px, 2vw, 26px); border-radius: 22px; background: var(--paper); box-shadow: var(--cast-low); }
.label > div { display: grid; grid-template-columns: 8.6em minmax(0, 1fr); column-gap: 18px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line); }
.label > div:first-child { border-top: 0; }
.label dt { padding-top: 1px; }
.label dd { font-size: calc(16.5 * var(--up)); line-height: 1.45; letter-spacing: -0.008em; color: var(--ink-2); }
.label dd b { font-weight: 640; color: var(--ink); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips li { display: inline-flex; align-items: center; min-height: calc(32 * var(--up)); padding: 5px calc(13 * var(--up)); border-radius: calc(16 * var(--up)); background: var(--ground); font-size: calc(15 * var(--up)); font-weight: 560; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.label .tag { margin-right: 6px; }

/* ── The close, and the footer ────────────────────────────────────────── */
.next { --fg: #fff; --fg-2: rgba(255, 255, 255, 0.86); --key: #BFE0FF; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(80px, 13vh, 150px) var(--pad) clamp(70px, 11vh, 130px); background: var(--blue); color: #fff; border-radius: clamp(44px, 9vw, 150px) clamp(44px, 9vw, 150px) 0 0; }
.next__comfi { width: 92px; margin-bottom: 14px; }
.next__comfi img { animation: bob 2.6s ease-in-out infinite alternate; }
.next .ask { margin-bottom: 12px; }
.next h2 { font-size: clamp(36px, min(5.4vw, 10.4svh), 88 * var(--up)); max-width: 13em; }
.next__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 3.6vw, 48px); }

.foot { background: var(--blue); color: rgba(255, 255, 255, 0.82); padding: 34px var(--pad) 44px; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px 40px; align-items: start; font-size: 14px; line-height: 1.45; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.foot .nav__brand { color: #fff; }
.foot .mark { fill: #BFE3FF; stroke: #BFE3FF; }
.foot .mark path.mark__ink { stroke: #fff; }
.foot .mark circle.mark__ink { fill: #fff; }
.foot p { max-width: 44ch; }
.foot__links { display: flex; flex-direction: column; gap: 6px; white-space: nowrap; }
.foot__links a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 3px; }
@media (hover: hover) { .foot__links a:hover { text-decoration-color: #fff; } }

/* ── Motion ───────────────────────────────────────────────────────────── */
/* The top arrives a line at a time. Each part of the page rises as it is scrolled into view, where
   the browser can tie an animation to the scroll; elsewhere it is simply there. */
@keyframes rise { from { opacity: 0; translate: 0 26px; } }
@media (prefers-reduced-motion: no-preference) {
  .top__copy > *, .short { animation: rise 0.9s var(--out) both; }
  .top__copy > :nth-child(2) { animation-delay: 0.07s; }
  .top__copy > :nth-child(3) { animation-delay: 0.14s; }
  .top__copy > :nth-child(4) { animation-delay: 0.21s; }
  .short { animation-delay: 0.26s; }
  @supports (animation-timeline: view()) {
    .sec > *, .next > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 17%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --nav-h: 80px; }
  .top { grid-template-columns: minmax(0, 1fr); row-gap: clamp(104px, 16vw, 124px); align-items: start; padding-top: calc(var(--nav-h) + 36px); }
  .doc { grid-template-columns: minmax(0, 1fr); }
  /* The contents are five or ten short questions: on a phone the page itself is the list. */
  .toc { display: none; }
  .sec:first-child { border-top: 1px solid var(--line); }
  .foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .short li { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .label > div { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .label dd b { white-space: normal; }
}

/* ── Paper ────────────────────────────────────────────────────────────── */
@media print {
  body::after, .nav, .toc, .next, .short__comfi, .skip { display: none; }
  body { background: #fff; font-size: 11.5pt; }
  *, *::before, *::after { animation: none !important; }
  .top { display: block; padding: 0 0 18pt; }
  .short, .label { box-shadow: none; border: 1px solid var(--line); }
  .short { margin-top: 18pt; }
  .doc { display: block; padding: 0; }
  .sec { padding: 16pt 0; break-inside: avoid; }
  .foot { background: none; color: var(--ink-2); padding: 14pt 0 0; display: block; box-shadow: none; border-top: 1px solid var(--line); }
  .foot .nav__brand, .foot__links a { color: var(--ink); }
}