/*
  ONA - site styles. Words live in src/locales, never here.

  Mobile first: the base rules are the phone (the Terms and Privacy links in
  the app open in Safari's sheet), and wider screens add columns on top.

  Values come from the app's design system (app/packages/design_system):
  tokens.dart, blob_field.dart, glass_panel.dart, gel_surface.dart. Where the
  web needs something the app doesn't have (long-form line height, blob sizes
  on a wide screen), it says so next to the rule.
*/

/* Each face is split in two by unicode-range: a Latin file every page downloads,
   and the rest of the font (Central European letters), fetched only by a page
   that uses them. Instrument Sans is pinned to its normal width. */
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-Squashed-latin.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-Squashed-ext.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0107,U+010A-0113,U+0116-011B,U+011E-0123,U+0126-0127,U+012A-012B,U+012E-0130,U+0132-0133,U+0136-0137,U+0139-013E,U+0141-0148,U+014A-014D,U+0150-0151,U+0154-015B,U+015E-0161,U+0164-0165,U+016A-017E,U+01CD-01CE,U+0218-021B,U+0237,U+02C7,U+02D8-02D9,U+02DB,U+02DD,U+0300-0303,U+0306-0307,U+030A-030C,U+0312,U+0326-0328,U+1E80-1E85,U+1E9E,U+1EF2-1EF3;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-SquashedItalic-latin.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  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+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-SquashedItalic-ext.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-0107,U+010A-0113,U+0116-011B,U+011E-0123,U+0126-0127,U+012A-012B,U+012E-0130,U+0132-0133,U+0136-0137,U+0139-013E,U+0141-0148,U+014A-014D,U+0150-0151,U+0154-015B,U+015E-0161,U+0164-0165,U+016A-017E,U+01CD-01CE,U+0218-021B,U+0237,U+02C7,U+02D8-02D9,U+02DB,U+02DD,U+0300-0303,U+0306-0307,U+030A-030C,U+0312,U+0326-0328,U+1E80-1E85,U+1E9E,U+1EF2-1EF3;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-latin.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-ext.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0107,U+010A-0113,U+0116-011B,U+011E-0123,U+0126-0127,U+012A-012B,U+012E-0130,U+0132-0133,U+0136-0137,U+0139-013E,U+0141-0148,U+014A-014D,U+0150-0151,U+0154-015B,U+015E-0161,U+0164-0165,U+016A-017E,U+01CD-01CE,U+0218-021B,U+0237,U+02C7,U+02D8-02D9,U+02DB,U+02DD,U+0300-0303,U+0306-0307,U+030A-030C,U+0312,U+0326-0328,U+1E80-1E85,U+1E9E,U+1EF2-1EF3,U+2194-2199;
}
@font-face {
  font-family: "Nothing You Could Do";
  src: url("/assets/fonts/NothingYouCouldDo.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
  Stand-ins for alphabets the three fonts above don't have. They're only used
  where a :lang() rule further down asks for them, so English pages never
  download them, and each file holds one alphabet (unicode-range), so a
  Russian page loads the Cyrillic file and nothing else. Sizes are tuned to sit
  like the font each one stands in for.

    Manrope             for Instrument Sans: Cyrillic, Greek, Vietnamese. Same width and cap height.
    Noto Serif Display  for Instrument Serif, at its narrowest width like the squashed cut.
    Caveat              for Nothing You Could Do in Central European, Baltic, Turkish and Cyrillic.
    Playpen Sans        for Nothing You Could Do in Greek and Vietnamese.

  All four are SIL Open Font License, from Fontsource 5.3.0; the licences are in fonts/fallback/.
*/
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/fallback/manrope-cyrillic-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/fallback/manrope-cyrillic-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/fallback/manrope-greek-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/fallback/manrope-vietnamese-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/fallback/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("/assets/fonts/fallback/noto-serif-display-cyrillic-ext-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 62.5%;
  size-adjust: 94%;
  font-display: swap;
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("/assets/fonts/fallback/noto-serif-display-cyrillic-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 62.5%;
  size-adjust: 94%;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("/assets/fonts/fallback/noto-serif-display-greek-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 62.5%;
  size-adjust: 94%;
  font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("/assets/fonts/fallback/noto-serif-display-vietnamese-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 62.5%;
  size-adjust: 94%;
  font-display: swap;
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("/assets/fonts/fallback/noto-serif-display-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 62.5%;
  size-adjust: 94%;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("/assets/fonts/fallback/noto-serif-display-cyrillic-ext-wdth-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-stretch: 62.5%;
  size-adjust: 94%;
  font-display: swap;
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("/assets/fonts/fallback/noto-serif-display-cyrillic-wdth-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-stretch: 62.5%;
  size-adjust: 94%;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("/assets/fonts/fallback/noto-serif-display-greek-wdth-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-stretch: 62.5%;
  size-adjust: 94%;
  font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("/assets/fonts/fallback/noto-serif-display-vietnamese-wdth-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-stretch: 62.5%;
  size-adjust: 94%;
  font-display: swap;
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("/assets/fonts/fallback/noto-serif-display-latin-wdth-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-stretch: 62.5%;
  size-adjust: 94%;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/fallback/caveat-cyrillic-ext-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  size-adjust: 114%;
  font-display: swap;
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/fallback/caveat-cyrillic-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  size-adjust: 114%;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/fallback/caveat-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  size-adjust: 114%;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/fallback/caveat-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  size-adjust: 114%;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Playpen Sans";
  src: url("/assets/fonts/fallback/playpen-sans-greek-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  size-adjust: 88%;
  font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Playpen Sans";
  src: url("/assets/fonts/fallback/playpen-sans-vietnamese-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  size-adjust: 88%;
  font-display: swap;
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Playpen Sans";
  src: url("/assets/fonts/fallback/playpen-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  size-adjust: 88%;
  font-display: swap;
  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 {
  color-scheme: light;

  /* Colour */
  --ground: #EDE7F5;
  --ink: #241C33;
  --muted: #6E6383;
  --label: #8C857A;
  --pink-ink: #7A2148;
  --action: #C23E70;
  --paper-top: #FFFBF4;
  --paper-bottom: #F7ECDD;
  --hairline: rgb(110 99 131 / 0.2);

  /* Materials */
  --glass: rgb(255 255 255 / 0.55);
  --glass-strong: rgb(255 255 255 / 0.6);
  --e1: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --e2: 0 12px 26px -18px rgb(60 40 90 / 0.55);
  --e3: 0 16px 32px -14px rgb(60 40 90 / 0.7);
  --shadow-paper: 0 14px 26px -14px rgb(60 40 90 / 0.6);
  --gel-career: linear-gradient(180deg, #FFB2D3, #E0538A 58%, #C23E70);
  --gel-inset: inset 0 1px 1px rgb(255 255 255 / 0.7), inset 0 -2px 3px rgb(0 0 0 / 0.06);

  /* Radii */
  --r-sheet: 28px;
  --r-hero: 26px;
  --r-panel: 22px;
  --r-tile: 20px;
  --r-row: 16px;
  --r-chip: 14px;
  --r-photo: 12px;

  /* Motion: one quick curve for everything you touch, and a gentler one for
     blocks gliding into place, which look like a glitch on the quick one */
  --ease: cubic-bezier(0.2, 0.9, 0.2, 1);
  --ease-arrive: cubic-bezier(0.33, 1, 0.68, 1);

  /* Type. The serif is the app's squashed cut; a stock fallback sets taller. */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hand: "Nothing You Could Do", "Bradley Hand", cursive;

  --gutter: clamp(20px, 6vw, 24px);
}

/*
  Languages the site's fonts can't write fully. When you add a language to
  the site, add its code to every list here that matches its alphabet:
  Cyrillic (Russian, Ukrainian, ...), Greek, Vietnamese, or Latin letters the
  handwriting lacks (Polish ą ę, Czech and Slovak ď ť, Croatian đ, Romanian
  ș ț, Turkish ı, Latvian and Lithuanian long vowels). Western European
  languages need nothing. Scripts not listed (Arabic, Hebrew, Hindi, Thai,
  Chinese, Japanese, Korean and the rest) fall back to the phone's own fonts.
*/
:lang(ru, uk, be, bg, sr, mk, kk, el) {
  --serif: "Instrument Serif", "Noto Serif Display", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:lang(ru, uk, be, bg, sr, mk, kk, pl, cs, sk, hr, bs, ro, tr, az, lv, lt) {
  --hand: "Caveat", "Bradley Hand", cursive;
}

:lang(el) {
  --hand: "Playpen Sans", "Bradley Hand", cursive;
}

/* Vietnamese: the site's fonts have its base letters but not its accents, so it switches whole. */
:lang(vi) {
  --serif: "Noto Serif Display", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hand: "Playpen Sans", "Bradley Hand", cursive;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--pink-ink);
  text-decoration-line: underline;
  text-decoration-color: rgb(194 62 112 / 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

a:hover {
  text-decoration-color: var(--action);
}

/* An email address never breaks at its hyphen, where it would read as two. */
a[href^="mailto:"] {
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection {
  background: #FFB2D3;
  color: var(--ink);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: max(12px, env(safe-area-inset-top));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- The blob field ----------
   blob_field.dart: #EDE7F5 and three blurred radial blobs. The app places
   them on a 390 x 844 frame; here each keeps the same share of itself on
   screen at any width, and grows on wide screens so it still reads. */

.field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--ground);
}

.field::before,
.field::after,
.field i {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}

.field::before {
  --d: clamp(420px, 44vw, 760px);
  width: var(--d);
  left: 0;
  top: 0;
  translate: -28% -12%;
  background: radial-gradient(circle at 35% 35%, #FFB7D5, transparent 70%);
  filter: blur(calc(var(--d) * 0.0714));
}

.field i {
  --d: clamp(380px, 40vw, 690px);
  width: var(--d);
  right: 0;
  top: 26%;
  translate: 36% 0;
  background: radial-gradient(circle at 50% 50%, #9FE8F0, transparent 70%);
  filter: blur(calc(var(--d) * 0.0895));
}

.field::after {
  --d: clamp(400px, 42vw, 720px);
  width: var(--d);
  left: 0;
  bottom: 0;
  translate: -24% 25%;
  background: radial-gradient(circle at 50% 40%, #C9B6FF, transparent 70%);
  filter: blur(calc(var(--d) * 0.09));
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.wrap.narrow {
  max-width: 760px;
}

/* ---------- Header ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: 6px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  box-shadow: var(--e2);
}

/* The ONA wordmark. The rest of the name joins it underneath once the header
   has room for it next to the nav. */
.brand-name {
  display: grid;
  gap: 4px;
}

.brand-name span {
  font: 400 28px/1 var(--serif);
  letter-spacing: 0.02em;
}

.brand-name small {
  display: none;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 440px) {
  .brand-name span {
    font-size: 22px;
  }

  .brand-name small {
    display: block;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

/* On the narrow pages (pricing, delete) the five links sit closer, so the
   brand's subtitle stays on one line. */
.wrap.narrow .nav a {
  padding: 0 10px;
}

.nav a:hover {
  color: var(--ink);
}

.nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--glass);
  box-shadow: var(--e1), var(--e2);
}

.nav .wide {
  display: none;
}

@media (min-width: 680px) {
  .nav .wide {
    display: inline-flex;
  }
}

/* Where the whole nav first shows, the name's second line gives it the room. */
@media (min-width: 680px) and (max-width: 819.98px) {
  .brand-name small {
    display: none;
  }
}

/* ---------- Small parts ---------- */

.label {
  font: 500 12px/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 680px) {
  .label {
    font-size: 13px;
  }
}

.glass {
  background: var(--glass);
  border-radius: var(--r-panel);
  box-shadow: var(--e1), var(--e2);
}

/* A gel ball: gel_surface.dart's `circle at 32% 26%` highlight. */
.gel-dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff, var(--l) 30%, var(--m) 78%, var(--d));
}

/* Each area's ramp. --s is the chip surface, halfway from light to mid, as
   AreaChip.surfaceOf has it; ink reads on all eight (6.6:1 to 13.1:1). */
.area-career { --l: #FFB2D3; --s: #F082AE; --m: #E0538A; --d: #C23E70; }
.area-health { --l: #CFF6F9; --s: #87DBE0; --m: #3FBFC7; --d: #1E7A80; }
.area-wealth { --l: #D6D8FA; --s: #B0B3F1; --m: #8A8FE8; --d: #4A4FA8; }
.area-relationships { --l: #FFCBB0; --s: #F89E7D; --m: #F0704A; --d: #A83D1F; }
.area-growth { --l: #D8F3D0; --s: #AADE8D; --m: #7BC94A; --d: #4C8A2A; }
.area-fun { --l: #F3F7B8; --s: #E4EE7A; --m: #D6E63B; --d: #A3B520; }
.area-self-image { --l: #E5D4FA; --s: #CDA8F1; --m: #B57CE8; --d: #7D3FB0; }
.area-home { --l: #CFE3F5; --s: #9FC5E9; --m: #6FA8DC; --d: #3A6E9E; }

/* The primary button: a gel fill in the Career ramp, full width on a phone. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--gel-career);
  box-shadow: var(--gel-inset), 0 18px 40px -12px rgb(194 62 112 / 0.5);
  color: #fff;
  font: 600 18px/1 var(--sans);
  text-decoration: none;
  text-shadow: 0 1px 1px rgb(122 33 72 / 0.35);
  transition: scale 260ms var(--ease);
}

.btn:hover {
  color: #fff;
}

.btn:active {
  scale: 0.98;
}

@media (min-width: 680px) {
  .btn {
    display: inline-flex;
    width: auto;
  }
}

/* An in-app path, drawn as the chips it names. */
.path {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  vertical-align: baseline;
}

.path span {
  position: relative;
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-chip);
  background: rgb(255 255 255 / 0.7);
  box-shadow: var(--e1), 0 6px 14px -10px rgb(60 40 90 / 0.55);
  font: 600 14px/1.5 var(--sans);
  color: var(--ink);
  white-space: nowrap;
}

/* The last chip and the punctuation after the path, kept together so a comma or
   full stop never wraps onto a line of its own. */
.path .end {
  display: inline-flex;
  align-items: center;
  font-weight: inherit;
  white-space: nowrap;
}

/* The arrow between two chips: text in the page, so the path reads right without CSS. */
.path .sep {
  width: 18px;
  margin: 0 -3px;
  color: var(--muted);
  font: 400 14px/1.5 var(--sans);
  text-align: center;
}

/* ---------- Landing ---------- */

.hero {
  display: grid;
  gap: 32px;
  padding-block: 18px 8px;
}

.hero-copy .label {
  color: var(--pink-ink);
}

.hero h1 {
  margin-top: 14px;
  font-size: clamp(42px, 12vw, 76px);
  line-height: 1.02;
}

.hero h1 em {
  font-style: italic;
}

.dot {
  color: var(--action);
}

.lede {
  margin-top: 18px;
  max-width: 34ch;
  font-size: 18px;
  line-height: 1.45;
}

/* Pick one: a radio group drawn as the app's area chips. */
.areas {
  min-width: 0;
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.areas legend {
  margin-bottom: 10px;
  padding: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips label {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: var(--e1), var(--e2);
  color: var(--ink);
  font: 500 12px/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: translate 260ms var(--ease);
}

/* The chip's colour lives on a layer, so picking fades it in. */
.chips label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--s);
  box-shadow: var(--gel-inset), 0 10px 20px -10px var(--d);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

/* The radios sit fixed in the viewport, so tapping a slice while the chips are
   scrolled away doesn't pull the page back up to them. Their order in the
   page is unchanged, so arrow keys and screen readers work as before. */
.chips input {
  position: fixed;
  top: 0;
  left: 0;
}

/* A slim chip with a taller finger target: 4px more above and below, inside
   the 8px gap between rows. */
.chips label::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

.chips .gel-dot {
  transition: background 300ms var(--ease);
}

.chips input:checked + label {
  animation: chip-pop 420ms var(--ease);
}

.chips input:checked + label::before {
  opacity: 1;
}

.chips input:checked + label .gel-dot {
  background: radial-gradient(circle at 32% 26%, #fff, #fff 45%, rgb(255 255 255 / 0.7));
}

.chips input:focus-visible + label {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

@media (hover: hover) {
  .chips label:hover {
    translate: 0 -1px;
  }
}

@keyframes chip-pop {
  45% {
    scale: 1.06;
  }
}

.art {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding-bottom: 12px;
  container-type: inline-size;
}

.wheel {
  width: 88%;
  height: auto;
  margin-left: auto;
  overflow: visible;
}

.wheel .ring {
  fill: none;
  stroke: rgb(255 255 255 / 0.75);
  stroke-width: 1;
}

.wheel .ring.outer {
  stroke: rgb(110 99 131 / 0.35);
  stroke-dasharray: 3 6;
}

.wheel .spokes {
  stroke: rgb(255 255 255 / 0.6);
  stroke-width: 1;
}

.wheel .w {
  fill: var(--m);
  fill-opacity: 0.42;
  stroke: var(--m);
  stroke-opacity: 0.55;
  stroke-width: 1;
}

/* The picked slice slides out along its own bisector (--ox, --oy) while its
   gel fades in. --on is 1 for the picked area and 0 for the rest. */
.wheel .slice {
  --on: 0;
  --peek: 0;
  translate: calc(var(--ox) * min(1, var(--on) + var(--peek))) calc(var(--oy) * min(1, var(--on) + var(--peek)));
  transition: translate 500ms var(--ease);
}

.wheel .w {
  transition: fill-opacity 300ms var(--ease);
}

/* Each slice is a tap target too: a label for the same radio as its chip,
   clipped to the whole 45-degree sector out to the dashed ring. */
.wheel .hit label {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .wheel .slice:hover {
    --peek: 0.35;
  }

  .wheel .slice:hover .w {
    fill-opacity: 0.6;
  }
}

.wheel .gel {
  opacity: var(--on);
  stroke: rgb(255 255 255 / 0.85);
  stroke-width: 1.5;
  filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--d) 35%, transparent));
  transition: opacity 400ms var(--ease);
}

.wheel .hub {
  fill: rgb(255 255 255 / 0.6);
  stroke: rgb(255 255 255 / 0.95);
}

.wheel .hub-n {
  font: italic 400 44px var(--serif);
  fill: var(--ink);
}

.wheel .hub-l {
  font: 500 15px var(--sans);
  letter-spacing: 0.1em;
  fill: var(--muted);
}

/* Paper: anything she keeps. Always tilted; a flat paper card is a bug. */
.paper {
  position: relative;
  background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
  border-radius: var(--r-photo);
  box-shadow: var(--shadow-paper);
}

.paper > * {
  position: relative;
  z-index: 1;
}

.paper::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Pinned over the wheel's lower left. Its place in the flow (-10%) clears
   every slice, and is where it stays without container queries; --lift then
   raises it by a share of the artwork's width. The negative bottom margin
   gives back the space the lift frees. */
.chapter {
  width: 68%;
  max-width: 290px;
  margin-top: -10%;
  margin-bottom: -14%;
  padding: 22px 18px 18px;
  rotate: var(--tilt, -3deg);
  translate: 0 calc(var(--lift, 18) * -1cqw);
  transition: rotate 600ms var(--ease), translate 600ms var(--ease);
}

.chapter .pin {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  translate: -50% 0;
  background: radial-gradient(circle at 32% 26%, #fff, var(--pick-l) 30%, var(--pick-m) 78%, var(--pick-d));
  box-shadow: 0 6px 10px -4px color-mix(in srgb, var(--pick-d) 55%, transparent);
}

.chapter .label {
  color: var(--label);
}

/* Eight notes share one cell, so the card keeps the tallest one's height and
   never jumps when the pick changes. */
.notes {
  display: grid;
}

.note {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  --on: 0;
  opacity: var(--on);
  translate: 0 calc((1 - var(--on)) * 8px);
  visibility: hidden;
  transition: opacity 200ms var(--ease), translate 300ms var(--ease), visibility 0s linear 200ms;
}

.note .tag {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--s);
  box-shadow: var(--gel-inset);
  color: var(--ink);
  font: 600 12px/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The hand is hers alone: Nothing You Could Do at the app's 0.82 scale. */
.hand {
  margin-top: 10px;
  font-family: var(--hand);
  font-size: calc(26px * 0.82);
  line-height: 1.3;
  color: var(--ink);
}

.chapter hr {
  height: 1px;
  margin: 14px 0 12px;
  border: 0;
  background: rgb(140 133 122 / 0.3);
}

.chapter .thing {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.35;
}

/* A short goal leaves its room under the handwriting, not at the foot of the
   card: the goal sits at the top, today's one thing on the bottom line. */
.note .hand {
  margin-bottom: 14px;
}

.note hr {
  align-self: stretch;
  margin-top: auto;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 56px;
    padding-block: 56px 24px;
  }

  .art {
    max-width: 480px;
  }
}

/* ---------- Picking an area ----------
   No script: the chips are radios, and :has() carries the pick to the wheel
   and the note. Health is the default, and it's what a browser without
   :has() keeps. The pick's colours are registered so the pin can blend
   between them instead of jumping. */

@property --pick-l {
  syntax: "<color>";
  inherits: true;
  initial-value: #CFF6F9;
}

@property --pick-m {
  syntax: "<color>";
  inherits: true;
  initial-value: #3FBFC7;
}

@property --pick-d {
  syntax: "<color>";
  inherits: true;
  initial-value: #1E7A80;
}

.hero {
  --pick-l: #CFF6F9;
  --pick-m: #3FBFC7;
  --pick-d: #1E7A80;
  --tilt: -3deg;
  --lift: 18;
  transition: --pick-l 500ms var(--ease), --pick-m 500ms var(--ease), --pick-d 500ms var(--ease);
}

.slice.area-health,
.note.area-health {
  --on: 1;
  visibility: visible;
}

/* Paper is always tilted, 0.6 to 4 degrees; each area leans its own way.
   --lift is how far the note rises over the wheel, in % of the artwork's
   width. It stays high for every area; only Growth, which sits right under
   the note, dips a little so its slice is covered by half at most. */
.hero:has(#pick-career:checked) { --pick-l: #FFB2D3; --pick-m: #E0538A; --pick-d: #C23E70; --tilt: -2.2deg; --lift: 18; }
.hero:has(#pick-health:checked) { --pick-l: #CFF6F9; --pick-m: #3FBFC7; --pick-d: #1E7A80; --tilt: -3deg; --lift: 18; }
.hero:has(#pick-wealth:checked) { --pick-l: #D6D8FA; --pick-m: #8A8FE8; --pick-d: #4A4FA8; --tilt: -1.6deg; --lift: 18; }
.hero:has(#pick-relationships:checked) { --pick-l: #FFCBB0; --pick-m: #F0704A; --pick-d: #A83D1F; --tilt: -3.4deg; --lift: 18; }
.hero:has(#pick-growth:checked) { --pick-l: #D8F3D0; --pick-m: #7BC94A; --pick-d: #4C8A2A; --tilt: -2.6deg; --lift: 12; }
.hero:has(#pick-fun:checked) { --pick-l: #F3F7B8; --pick-m: #D6E63B; --pick-d: #A3B520; --tilt: -1.2deg; --lift: 18; }
.hero:has(#pick-self-image:checked) { --pick-l: #E5D4FA; --pick-m: #B57CE8; --pick-d: #7D3FB0; --tilt: -2.8deg; --lift: 18; }
.hero:has(#pick-home:checked) { --pick-l: #CFE3F5; --pick-m: #6FA8DC; --pick-d: #3A6E9E; --tilt: -1.8deg; --lift: 18; }

/* Once a pick is known, every slice and note starts from off... */
.hero:has(.chips input:checked) :is(.slice, .note) {
  --on: 0;
}

.hero:has(.chips input:checked) .note {
  visibility: hidden;
  transition: opacity 200ms var(--ease), translate 300ms var(--ease), visibility 0s linear 200ms;
}

/* ...and the picked area comes on. */
.hero:has(#pick-career:checked) :is(.slice, .note).area-career,
.hero:has(#pick-health:checked) :is(.slice, .note).area-health,
.hero:has(#pick-wealth:checked) :is(.slice, .note).area-wealth,
.hero:has(#pick-relationships:checked) :is(.slice, .note).area-relationships,
.hero:has(#pick-growth:checked) :is(.slice, .note).area-growth,
.hero:has(#pick-fun:checked) :is(.slice, .note).area-fun,
.hero:has(#pick-self-image:checked) :is(.slice, .note).area-self-image,
.hero:has(#pick-home:checked) :is(.slice, .note).area-home {
  --on: 1;
}

/* The new note waits for the old one to leave, then rises into place. */
.hero:has(#pick-career:checked) .note.area-career,
.hero:has(#pick-health:checked) .note.area-health,
.hero:has(#pick-wealth:checked) .note.area-wealth,
.hero:has(#pick-relationships:checked) .note.area-relationships,
.hero:has(#pick-growth:checked) .note.area-growth,
.hero:has(#pick-fun:checked) .note.area-fun,
.hero:has(#pick-self-image:checked) .note.area-self-image,
.hero:has(#pick-home:checked) .note.area-home {
  visibility: visible;
  transition: opacity 360ms var(--ease) 160ms, translate 500ms var(--ease) 160ms, visibility 0s linear 0s;
}

/* Support */

.support {
  margin-top: 28px;
  padding: 26px 20px 22px;
  scroll-margin-top: 16px;
}

@media (min-width: 900px) {
  .support {
    margin-top: 48px;
  }
}

.support h2 {
  margin-top: 10px;
  font-size: clamp(32px, 8.4vw, 52px);
  line-height: 1.08;
}

.support p {
  margin-top: 12px;
  max-width: 54ch;
}

.support .btn {
  margin-top: 22px;
}

.support .email {
  margin-top: 14px;
  font-size: 16px;
  color: var(--muted);
}

@media (min-width: 680px) {
  .support {
    padding: 40px 44px 40px;
  }
}

.tiles {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.tile {
  padding: 22px 20px;
  border-radius: var(--r-tile);
}

.tile h3 {
  font-size: 22px;
  line-height: 1.2;
}

.tile p {
  margin-top: 8px;
}

@media (min-width: 820px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  .tile {
    padding: 26px 24px;
  }
}

/* FAQ: native <details>, so it opens without a script. The questions and
   answers are built from _build/facts.json, the same text as the FAQPage data. */

.faq {
  margin-top: 12px;
  padding: 26px 20px 10px;
  scroll-margin-top: 16px;
}

.faq h2 {
  margin-top: 10px;
  font-size: clamp(32px, 8.4vw, 52px);
  line-height: 1.08;
}

.faq-list {
  margin-top: 14px;
}

.faq-item {
  border-top: 1px solid var(--hairline);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  font: 400 21px/1.25 var(--serif);
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  rotate: 45deg;
  transition: rotate 260ms var(--ease), margin 260ms var(--ease);
}

.faq-item[open] summary::after {
  rotate: 225deg;
  margin-top: 4px;
}

.faq-item p {
  max-width: 60ch;
  padding-bottom: 18px;
}

@media (min-width: 680px) {
  .faq {
    padding: 40px 44px 24px;
  }

  .faq-item summary {
    font-size: 24px;
  }
}

/* Store badges: the stores' official artwork, drawn 48px tall and never
   restyled (Apple's and Google's rules). They appear once src/data/site.json
   says the app is live: in the hero, under the pricing intro, and in the
   "get the app" card at the end of the content pages. */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.badge {
  display: block;
  border-radius: 8px;
}

.badge img {
  display: block;
  width: auto;
  height: 48px;
}

/* In the hero the badges follow the pitch, above the area chips, so the chips
   stay next to the wheel they turn. */
.stores {
  margin-top: 24px;
}

.stores + .areas {
  margin-top: 32px;
}

.intro-badges {
  margin-top: 20px;
}

/* ---------- Document pages: an issue of the magazine ---------- */

.mast {
  padding-block: 22px 18px;
  border-bottom: 1px solid var(--hairline);
}

.mast-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

/* The date sits beside the heading, and drops below it only when the heading's
   longest word leaves it no room (CONSISTENT on a 320px phone). */
.mast h1 {
  flex: 1 1 0;
  font-size: clamp(46px, 13.4vw, 76px);
  line-height: 0.96;
  text-transform: uppercase;
}

.issue {
  flex: none;
  margin-inline-start: auto;
  padding-bottom: 4px;
  text-align: right;
}

.issue time {
  display: block;
  margin-top: 2px;
  color: var(--ink);
}

.intro {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.45;
  max-width: 40ch;
}

.short {
  margin-top: 24px;
  padding: 22px 20px 22px;
}

.short ul {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.short li {
  position: relative;
  padding-left: 24px;
}

.short li .gel-dot {
  position: absolute;
  left: 0;
  top: 0.45em;
}

@media (min-width: 680px) {
  .short {
    padding: 30px 36px;
  }
}

/* Contents: folded on a phone, a sidebar on a wide screen. */

.contents {
  margin-top: 16px;
}

.contents summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--r-row);
  background: var(--glass);
  box-shadow: var(--e1), var(--e2);
  cursor: pointer;
  list-style: none;
}

.contents summary::-webkit-details-marker {
  display: none;
}

.contents summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  rotate: 45deg;
  transition: rotate 260ms var(--ease), margin 260ms var(--ease);
}

.contents[open] summary::after {
  rotate: 225deg;
  margin-top: 4px;
}

.toc {
  margin: 8px 0 0;
  padding: 0 4px;
  list-style: none;
}

.toc li {
  border-bottom: 1px solid var(--hairline);
}

.toc a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 46px;
  padding: 12px 2px 10px;
  color: var(--ink);
  font: 400 19px/1.2 var(--serif);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.toc a:hover {
  color: var(--pink-ink);
}

/* The italic serif counts it. */
.n {
  flex: none;
  min-width: 1.5em;
  font-family: var(--serif);
  font-style: italic;
  color: var(--action);
}

.toc .n {
  font-size: 17px;
}

.side {
  display: none;
}

.col {
  max-width: 760px;
}

.doc {
  margin-top: 8px;
}

.doc section {
  padding-top: 30px;
  scroll-margin-top: 12px;
}

.doc section + section {
  margin-top: 30px;
  border-top: 1px solid var(--hairline);
}

.doc h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(27px, 7vw, 32px);
  line-height: 1.15;
}

.doc h2 .n {
  font-size: 0.72em;
}

.doc h3 {
  margin-top: 22px;
  font-size: 22px;
  line-height: 1.2;
}

.doc p {
  margin-top: 12px;
}

.doc ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.doc ul li {
  position: relative;
  padding-left: 20px;
}

.doc ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action);
  opacity: 0.8;
}

.doc strong {
  font-weight: 600;
}

@media (min-width: 680px) {
  .doc {
    position: relative;
    z-index: 0;
    margin-top: 24px;
    padding: 12px 44px 48px;
  }

  /* The card is drawn behind the sections, so it can arrive as a block of its
     own while each section arrives on its own too. */
  .doc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--glass);
    border-radius: var(--r-hero);
    box-shadow: var(--e1), var(--e2);
  }

  .doc section {
    padding-top: 36px;
  }

  .doc p,
  .doc li {
    font-size: 17px;
  }
}

@media (min-width: 1040px) {
  .reading {
    display: grid;
    grid-template-columns: 240px minmax(0, 760px);
    gap: 48px;
    align-items: start;
  }

  .contents {
    display: none;
  }

  .side {
    display: block;
    position: sticky;
    top: 24px;
    margin-top: 24px;
  }

  .side .toc a {
    min-height: 38px;
    padding: 8px 0 7px;
    font-size: 17px;
  }

  .side .toc .n {
    font-size: 15px;
  }
}

/* Steps on the delete page */

.steps {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.step {
  padding: 24px 20px 22px;
  border-radius: var(--r-panel);
}

.step h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(27px, 7vw, 32px);
  line-height: 1.15;
}

.step h2 .n {
  font-size: 0.72em;
}

.step p,
.step ul {
  margin-top: 12px;
}

.step .path {
  margin-top: 14px;
}

.step ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.step ul li {
  position: relative;
  padding-left: 20px;
}

.step ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action);
  opacity: 0.8;
}

.split {
  display: grid;
  gap: 18px;
  margin-top: 6px;
}

.split h3 {
  font-size: 22px;
  line-height: 1.2;
  margin-top: 10px;
}

@media (min-width: 680px) {
  .step {
    padding: 34px 40px 34px;
  }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* ---------- App screens ----------
   A screenshot in an iPhone frame: the rounded screen of an iPhone 16 Pro in
   a thin black bezel and a titanium band, with its side buttons. The
   screenshot brings its own status bar and Dynamic Island. Sizes are in cqi,
   hundredths of the figure's width, so the frame scales with the phone. */

.shot {
  flex: none;
  width: min(66vw, 250px);
  margin: 0;
  container-type: inline-size;
}

.phone {
  position: relative;
  padding: 2.8cqi;
  border-radius: 17.5cqi;
  background: #0E0C12;
  box-shadow:
    0 0 0 0.6cqi #8D8794,
    0 0 0 1.1cqi #2C2831,
    0 40px 60px -30px rgb(60 40 90 / 0.55),
    0 18px 30px -18px rgb(60 40 90 / 0.4);
}

/* The action button and volume keys on the left, the side button on the right. */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 1.2cqi;
  border-radius: 2px;
  background: #6E6875;
}

.phone::before {
  left: -2.1cqi;
  top: 22%;
  height: 7%;
  box-shadow: 0 13cqi 0 #6E6875, 0 -7.5cqi 0 #6E6875;
}

.phone::after {
  right: -2.1cqi;
  top: 29%;
  height: 11%;
}

.phone picture {
  display: block;
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 14.8cqi;
}

.shot figcaption {
  margin-top: 18px;
  text-align: center;
  text-wrap: balance;
}

/* ---------- How it works ---------- */

.answer {
  margin-top: 24px;
  padding: 22px 20px;
}

.answer p {
  margin-top: 10px;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.5;
}

.how-step {
  display: grid;
  gap: 28px;
  padding-block: 44px;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 12px;
}

.how-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.how-step h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.08;
}

.how-step h2 .n {
  font-size: 0.6em;
}

.how-text p {
  margin-top: 14px;
  max-width: 54ch;
  font-size: 17px;
}

.answer p,
.lw-intro,
.how-text p,
.faq-item p {
  text-wrap: pretty;
}

.how-text strong,
.how-cards strong {
  font-weight: 600;
}

.how-text .label {
  margin-top: 26px;
}

/* The eight areas, each on its colour. */
.area-list {
  display: grid;
  gap: 8px;
  max-width: 54ch;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.area-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--r-row);
  background: var(--glass);
  box-shadow: var(--e1), var(--e2);
  color: var(--muted);
  line-height: 1.4;
}

.area-list .gel-dot {
  translate: 0 1px;
}

.area-list b {
  color: var(--ink);
  font-weight: 600;
}

/* The screens: on a phone, a row that scrolls sideways when they don't fit,
   centred when they do. */
.shots {
  display: flex;
  gap: 20px;
  /* Room for the phones' shadow inside the scrolling row, which would clip it,
     given back below so the spacing stays the same. */
  margin: 0 calc(var(--gutter) * -1) -36px;
  padding: 8px var(--gutter) 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.shots::-webkit-scrollbar {
  display: none;
}

.shots .shot {
  scroll-snap-align: start;
}

.shots .shot:first-child {
  margin-left: auto;
}

.shots .shot:last-child {
  margin-right: auto;
}

.how-cards {
  display: grid;
  gap: 12px;
  margin-top: 56px;
}

.how-cards .step ul {
  margin: 14px 0 0;
}

.more {
  margin-top: 12px;
}

@media (min-width: 680px) {
  .answer {
    padding: 30px 36px;
  }

  /* The cards at the end share the FAQ's inside margins, so their words line up. */
  .how-cards .step,
  .more,
  .better,
  .sources,
  .get-app {
    padding: 40px 44px;
  }
}

/* Three phones fit side by side from here, a little smaller until 900px. */
@media (min-width: 680px) {
  .shots {
    gap: 20px;
    margin-inline: 0;
    margin-bottom: 0;
    padding-inline: 0;
    padding-bottom: 12px;
    overflow: visible;
  }

  .shots .shot {
    width: min(250px, calc((100vw - 2 * var(--gutter) - 40px) / 3));
  }
}

@media (min-width: 900px) {
  .how-step {
    padding-block: 64px;
  }

  .how-step:last-child {
    padding-bottom: 0;
  }

  .shots {
    gap: 32px;
    padding-bottom: 0;
  }

  .shots .shot {
    width: 250px;
  }

  /* Phones under the words start on the same line as them. */
  .shots .shot:first-child {
    margin-left: 0;
  }

  .how-cards {
    grid-template-columns: 1fr 1fr;
    margin-top: 64px;
  }
}

/* Wide enough for the words beside one or two phones. The phones' column is
   always two phones wide, so the words line up from step to step. */
@media (min-width: 1040px) {
  .how-beside {
    grid-template-columns: minmax(0, 1fr) 532px;
    gap: 56px;
    align-items: center;
  }

  .how-beside.how-flip {
    grid-template-columns: 532px minmax(0, 1fr);
  }

  .how-beside.how-flip .how-text {
    order: 2;
  }

  /* A single phone sits in the middle of its column. */
  .how-beside .shots .shot:first-child {
    margin-left: auto;
  }
}

/* ---------- The wheel of life page ---------- */

/* The card is a container, so the scorer inside can size itself to it. */
.lw-card {
  margin-top: 12px;
  padding: 24px 20px 20px;
  scroll-margin-top: 12px;
  container-type: inline-size;
}

.lw-card h2 {
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.08;
}

.lw-intro {
  margin: 10px 0 22px;
  max-width: 54ch;
  font-size: 17px;
}

.lw-scale-note {
  margin: -12px 0 22px;
  max-width: 54ch;
  color: var(--muted);
}

.lw-order {
  margin: -12px 0 18px;
  color: var(--muted);
  font-size: 15px;
}

.lw-note {
  margin-top: 16px;
}

/* The eight areas, each with a question to score it by. The list is as wide
   as the 17px paragraphs around it. */
.area-list.asks {
  max-width: calc(54ch * 17 / 16);
}

.area-list.asks i {
  display: block;
  margin-top: 4px;
  font: italic 400 19px/1.3 var(--serif);
  letter-spacing: 0.01em;
  color: var(--ink);
}

.essay + .faq {
  margin-top: 56px;
}

/* After the FAQ (and "Get ONA"), the sources and the last card each take the full width. */
.faq + .how-cards,
.get-app + .how-cards {
  margin-top: 12px;
}

@media (min-width: 900px) {
  .essay + .faq {
    margin-top: 64px;
  }

  .faq + .how-cards,
  .get-app + .how-cards {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 680px) {
  .lw-card {
    padding: 40px 44px 32px;
  }
}

/* On a wide screen each section reads like a magazine page: the question on
   the left, the answer beside it, and any screens underneath. */
@media (min-width: 1040px) {
  .essay .how-text {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }

  /* The question stays in view while its answer scrolls past. */
  .essay .how-text > h2 {
    position: sticky;
    top: 24px;
    grid-row: 1 / span 20;
  }

  /* Screens under a spread sit in the middle of it. */
  .essay .shots .shot:first-child {
    margin-left: auto;
  }

  .essay .how-text > :not(h2) {
    grid-column: 2;
  }

  .essay .how-text > h2 + p {
    margin-top: 6px;
  }

  .essay .how-text > .label {
    margin-top: 22px;
  }

}

/* ---------- Use cases ---------- */

/* The label above a use case's title is the way back to the hub: pink, so it
   reads as a link and stays legible over the pink glow, with a taller tap area
   that doesn't move anything. The arrow is decoration, hidden from screen readers. */
.crumb {
  padding-block: 14px;
  color: var(--pink-ink);
  text-decoration: none;
}

.crumb::before {
  content: "\2190";
  content: "\2190" / "";
  margin-right: 8px;
}

.crumb:hover {
  text-decoration: underline;
}

/* A step's list: the practical part, set as ticks in the area's pink. */
.checks {
  display: grid;
  gap: 10px;
  max-width: calc(54ch * 17 / 16);
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  text-wrap: pretty;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.25em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gel-career);
  box-shadow: var(--gel-inset);
}

.checks li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(0.25em + 4px);
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  rotate: 45deg;
}

.checks strong {
  font-weight: 600;
}

.better {
  margin-top: 56px;
}

.better ul,
.sources ul {
  margin-bottom: 0;
}

/* A guide's sources, between its questions and "Get ONA". */
.sources {
  margin-top: 12px;
}

/* "Get ONA": the store badges at the end of a content page. */
.get-app {
  margin-top: 12px;
}

.next + .get-app {
  margin-top: 40px;
}

.get-app .badges {
  margin-top: 20px;
}

.essay + .better + .faq,
.better + .faq {
  margin-top: 12px;
}

/* Pages to read next: cards that are links, two or three across on a wide screen. */
.next {
  margin-top: 40px;
}

.next.hub {
  margin-top: 28px;
}

/* These labels sit on the bare page, over the glow, so they take the darker pink. */
.next > .label {
  color: var(--pink-ink);
}

.next-list {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.next-card {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: 22px 22px 24px;
  border-radius: var(--r-tile);
  color: var(--ink);
  text-decoration: none;
  transition: translate 260ms var(--ease);
}

.next-card b {
  font: 400 24px/1.15 var(--serif);
  letter-spacing: 0.02em;
}

.next-card span {
  color: var(--muted);
  text-wrap: pretty;
}

.next-card:hover {
  color: var(--ink);
}

@media (hover: hover) {
  .next-card:hover {
    translate: 0 -2px;
  }
}

@media (min-width: 680px) {
  .next-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* No half-empty rows: an odd last card spans the row in two columns; in three,
   two cards take two columns, and the hub's first guide spans two, so five
   guides make two full rows. */
@media (min-width: 680px) and (max-width: 1039.98px) {
  .next-list > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1040px) {
  .next-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .next-list:has(> li:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }

  .next.hub .next-list > li:first-child {
    grid-column: span 2;
  }

  .better {
    margin-top: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .next-card {
    transition: none;
  }
}

/* High contrast drops the glass, so each card gets an edge of its own. */
@media (forced-colors: active) {
  .next-card {
    border: 1px solid LinkText;
  }
}

/* Printed checklists keep their ticks. */
@media print {
  .checks li::before {
    print-color-adjust: exact;
  }

  .checks li {
    break-inside: avoid;
  }
}

/* ---------- Comparisons ---------- */

/* The table of every app, /compare. Inside its card it scrolls sideways on a
   phone, with each app's name held at the left edge; the ONA row is tinted. */
.compare {
  margin-top: 24px;
  padding: 22px 0 4px;
}

.compare > .label,
.compare > h2 {
  padding-inline: 20px;
}

.compare > h2 {
  margin-top: 8px;
  font-size: clamp(27px, 7vw, 32px);
  line-height: 1.15;
}

.table-scroll {
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.compare-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.4;
}

.compare-table th,
.compare-table td {
  padding: 12px 14px;
  vertical-align: top;
  text-align: left;
  border-top: 1px solid var(--hairline);
}

.compare-table thead th {
  padding-top: 0;
  border-top: 0;
  font: 500 12px/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* The first column, heading included, stays put while the rest scrolls, so it
   needs a solid colour: the card's glass over the page's ground. */
.compare-table thead th:first-child,
.compare-table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 150px;
  padding-left: 20px;
  background: #F7F4FA;
  box-shadow: 8px 0 12px -10px rgb(60 40 90 / 0.35);
}

.compare-table th[scope="row"] {
  font: 400 21px/1.15 var(--serif);
  letter-spacing: 0.02em;
}

.compare-table th[scope="row"] a {
  color: inherit;
  text-decoration: none;
}

.compare-table th[scope="row"] a:hover {
  text-decoration: underline;
}

.compare-table td {
  min-width: 190px;
}

.compare-table td:last-child {
  min-width: 0;
  padding-right: 20px;
  white-space: nowrap;
}

.compare-table .is-ona td {
  background: rgb(255 255 255 / 0.5);
}

.compare-table .is-ona th[scope="row"] {
  background: #FBFAFD;
}

@media (min-width: 680px) {
  .compare {
    padding: 30px 0 8px;
  }

  .compare > .label,
  .compare > h2 {
    padding-inline: 36px;
  }

  .compare-table thead th:first-child,
  .compare-table th[scope="row"] {
    padding-left: 36px;
  }

  .compare-table td:last-child {
    padding-right: 36px;
  }
}

/* One comparison's at-a-glance table, /compare/<slug>: the app and ONA side
   by side. On a phone each row becomes a block, its cells named by the app
   they describe (data-app), and the column headings go to screen readers only. */
.vs {
  margin-top: 24px;
  padding: 22px 20px 6px;
}

.vs-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}

.vs-table th,
.vs-table td {
  padding: 12px 0 14px;
  vertical-align: top;
  text-align: left;
  border-top: 1px solid var(--hairline);
}

.vs-table thead th,
.vs-table thead td {
  padding-top: 0;
  border-top: 0;
  font: 400 22px/1.15 var(--serif);
  letter-spacing: 0.02em;
}

.vs-table th[scope="row"] {
  padding-top: 15px;
  font: 500 12px/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.vs-table td::before {
  content: attr(data-app);
  display: none;
  font-weight: 600;
}

@media (max-width: 679.98px) {
  .vs-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .vs-table tbody,
  .vs-table tr,
  .vs-table th,
  .vs-table td {
    display: block;
  }

  .vs-table tr {
    padding: 14px 0 16px;
    border-top: 1px solid var(--hairline);
  }

  .vs-table th,
  .vs-table td {
    padding: 0;
    border-top: 0;
  }

  .vs-table td {
    margin-top: 8px;
  }

  .vs-table td::before {
    display: block;
  }
}

@media (min-width: 680px) {
  .vs {
    padding: 30px 36px 14px;
  }

  .vs-table {
    font-size: 17px;
  }

  .vs-table th[scope="row"] {
    width: 128px;
    padding-right: 16px;
  }

  .vs-table td,
  .vs-table thead th {
    padding-left: 24px;
  }
}

/* "Pick X if" and "Pick ONA if": two lists in one card, after the sections. */
.pick {
  margin-top: 56px;
}

.pick .split {
  margin-top: 4px;
}

.pick .split h3 {
  margin-top: 18px;
}

.pick + .faq {
  margin-top: 12px;
}

@media (min-width: 680px) {
  .pick {
    padding: 40px 44px;
  }
}

@media (min-width: 1040px) {
  .pick {
    margin-top: 64px;
  }
}

/* ---------- Scoring the wheel ----------
   WheelScorer.astro: a row of ten radio buttons per area, drawn as bars, and a
   wheel whose slices reach as far as each area's checked score. The checked
   radio sets --score (1 to 10) on everything after it in its row: the empty
   bars, the number and the slice, which is drawn full size and clipped to a
   circle of that radius. The numbers match the component's drawing: 560 by
   480 units with the wheel's centre in the middle, the hub at 52 and a score
   of 10 at 178, so the disc is 356 across. --unit is screen pixels per unit.
   --room is the width inside the card the scorer sits in. */

.lw {
  --room: 100cqi;
  /* On a phone the disc takes the width, less a little so nothing is trimmed,
     and the rows below name the areas. From 680px the names around it fit. */
  --unit: calc(min(var(--room) - 8px, 400px) / 356);
  position: relative;
  padding-top: calc(var(--unit) * 356 + 20px);
}

.lw-base,
.lw-slice {
  position: absolute;
  top: calc(var(--unit) * -62);
  left: 50%;
  width: calc(var(--unit) * 560);
  max-width: none;
  height: auto;
  translate: -50% 0;
  overflow: visible;
  pointer-events: none;
}

.lw-name {
  display: none;
}

/* On a phone the drawing's empty margins reach past the screen, so the scorer
   trims them, or the phone would zoom the page out to fit. */
@media (max-width: 679.98px) {
  .lw {
    overflow-x: clip;
  }

  /* The descriptions are in the list further down; here each row is kept to a
     name and its bars, so more of them fit under the wheel. */
  .lw-desc {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 680px) {
  .lw {
    --unit: calc(min(var(--room), 560px) / 560);
    padding-top: calc(var(--unit) * 480 + 12px);
  }

  .lw-base,
  .lw-slice {
    top: 0;
  }

  .lw-name {
    display: inline;
  }

  .lw-order {
    display: none;
  }
}

.lw-disc {
  fill: rgb(255 255 255 / 0.35);
  stroke: rgb(110 99 131 / 0.35);
  stroke-dasharray: 3 6;
}

.lw-ring {
  fill: none;
  stroke: rgb(255 255 255 / 0.8);
  stroke-width: 1;
}

.lw-ring.half {
  stroke: rgb(110 99 131 / 0.25);
}

.lw-spokes {
  stroke: rgb(255 255 255 / 0.8);
  stroke-width: 1;
}

.lw-hub {
  fill: rgb(255 255 255 / 0.6);
  stroke: rgb(255 255 255 / 0.95);
}

.lw-name {
  font: 500 15px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--muted);
  dominant-baseline: middle;
}

.lw-area {
  min-width: 0;
  margin: 0;
  padding: 10px 0 12px;
  border: 0;
  border-top: 1px solid var(--hairline);
}

.lw-area:first-of-type {
  border-top: 0;
}

/* Floated, the legend is an ordinary line inside its fieldset, so the rule
   above each area runs clear of it. */
.lw-area legend {
  float: left;
  width: 100%;
  padding: 0;
  color: var(--muted);
  line-height: 1.35;
}

.lw-area legend .gel-dot {
  margin-right: 8px;
  translate: 0 1px;
}

.lw-area legend b {
  color: var(--ink);
  font-weight: 600;
}

.lw-scale {
  --score: 0;
  display: flex;
  clear: both;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
}

.lw-bar[value="1"]:checked ~ * { --score: 1; }
.lw-bar[value="2"]:checked ~ * { --score: 2; }
.lw-bar[value="3"]:checked ~ * { --score: 3; }
.lw-bar[value="4"]:checked ~ * { --score: 4; }
.lw-bar[value="5"]:checked ~ * { --score: 5; }
.lw-bar[value="6"]:checked ~ * { --score: 6; }
.lw-bar[value="7"]:checked ~ * { --score: 7; }
.lw-bar[value="8"]:checked ~ * { --score: 8; }
.lw-bar[value="9"]:checked ~ * { --score: 9; }
.lw-bar[value="10"]:checked ~ * { --score: 10; }

/* Ten bars, filled up to the score, like the app's scoring rows. */
.lw-bar {
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 26px;
  margin: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--l), var(--m));
  box-shadow: var(--gel-inset);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms var(--ease), scale 200ms var(--ease);
}

.lw-bar:checked ~ .lw-bar {
  background: rgb(255 255 255 / 0.6);
  box-shadow: inset 0 0 0 1.5px rgb(110 99 131 / 0.5);
}

.lw-bar:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

@media (hover: hover) {
  .lw-bar:hover {
    scale: 1.08;
  }
}

@media (max-width: 359.98px) {
  .lw-scale {
    gap: 2px;
  }
}

.lw-score {
  flex: none;
  width: 2.2ch;
  margin-left: 8px;
  font: italic 400 24px/1 var(--serif);
  text-align: right;
  color: var(--ink);
}

.lw-score::after {
  counter-reset: score var(--score);
  content: counter(score);
}

.lw-slice path {
  stroke: rgb(255 255 255 / 0.85);
  stroke-width: 1.5;
}

.lw-slice {
  clip-path: circle(calc(var(--unit) * (52 + 12.6 * var(--score))) at 50% 50%);
  transition: clip-path 450ms var(--ease-arrive);
}

.lw-reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--glass-strong);
  box-shadow: var(--e1), var(--e2);
  color: var(--ink);
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.lw-reset:hover {
  color: var(--pink-ink);
}

@media (min-width: 1040px) {
  .lw {
    --unit: calc(500px / 560);
    min-height: calc(var(--unit) * 480);
    padding-top: 0;
    padding-left: calc(var(--unit) * 560 + 40px);
  }

  .lw-base,
  .lw-slice {
    top: 50%;
    left: 0;
    translate: 0 -50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lw-slice,
  .lw-bar {
    transition: none;
  }
}

/* High contrast: the bars keep a visible edge and a filled or empty state. */
@media (forced-colors: active) {
  .lw-bar {
    forced-color-adjust: none;
    background: Highlight;
    box-shadow: inset 0 0 0 1px CanvasText;
  }

  .lw-bar:checked ~ .lw-bar {
    background: Canvas;
    box-shadow: inset 0 0 0 1px CanvasText;
  }

  .lw-bar:focus-visible {
    outline-color: Highlight;
  }

  .lw-name {
    fill: CanvasText;
  }
}

/* On paper: the colours print, and the wheel and each row stay whole. */
@media print {
  .lw-bar,
  .lw-slice {
    print-color-adjust: exact;
  }

  .lw,
  .lw-area {
    break-inside: avoid;
  }

  .lw-reset {
    display: none;
  }
}

/* ---------- Not found ---------- */

.lost {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding-block: 12vh 40px;
}

.lost .big {
  font: italic 400 clamp(96px, 30vw, 180px)/0.9 var(--serif);
  color: var(--action);
  letter-spacing: 0.02em;
}

.lost h1 {
  font-size: clamp(34px, 9vw, 52px);
  line-height: 1.08;
}

.lost .btn {
  margin-top: 12px;
}

/* ---------- Footer ----------
   Three columns under small labels: the app, the guides, the legal pages. On a
   phone, the app and the legal pages share the left column and the guides take
   the right. Below them: the support address, the languages when there's more
   than one, and the small print. */

.foot {
  margin-top: 56px;
  padding-top: 32px;
  padding-bottom: max(30px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 14px;
}

.foot-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "app guides"
    "legal guides";
  gap: 26px 20px;
  margin-bottom: 12px;
}

.foot-app {
  grid-area: app;
}

.foot-guides {
  grid-area: guides;
}

.foot-legal {
  grid-area: legal;
}

.foot-group h2 {
  margin: 0 0 4px;
  /* On the bare page, over the glow: the darker pink, like the other bare labels. */
  color: var(--pink-ink);
}

.foot-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-group a,
.foot-mail a,
.foot .langs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.foot-group a {
  line-height: 1.3;
  text-wrap: pretty;
}

.foot a:hover {
  color: var(--pink-ink);
}

.foot .langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

/* The page you're on, and the language you're reading: a pink dot in the margin,
   like the one that ends the home page's headline, so the column stays aligned. */
.foot a[aria-current="page"],
.foot .langs a[aria-current="true"] {
  position: relative;
}

.foot a[aria-current="page"]::before,
.foot .langs a[aria-current="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--action);
}

@media (forced-colors: active) {
  .foot a[aria-current="page"]::before,
  .foot .langs a[aria-current="true"]::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

@media (min-width: 680px) {
  .foot-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "app guides legal";
    gap: 32px;
  }

  .foot-group a {
    min-height: 38px;
  }
}

.foot small {
  font-size: 14px;
  color: var(--muted);
}

/* The stores' trademark line, shown with their badges. */
.foot .marks {
  max-width: 72ch;
  font-size: 12px;
  line-height: 1.5;
}

/*
  ---------- Motion: things arrive, they don't loop ----------
  Blocks and text never fade in. They're there from the first frame and glide
  32px into place: fading a whole page in on every visit, block by block, was
  hard on the eyes, and a shorter, quicker move looked like a glitch.
  Everything on screen when a page opens moves together, once, never one after
  another. Only blocks you scroll to arrive one by one, as they come into view.
*/

@keyframes arrive {
  from {
    translate: 0 32px;
  }
}

@keyframes grow {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

/* .doc::before is the legal pages' card, a block like the ones around it. */
.rise,
.doc::before {
  animation: arrive 800ms var(--ease-arrive) backwards;
}

/*
  Blocks further down arrive when they come into view. Screens only: a printed
  page shows every block in place. The legal pages' card and each section in
  it are separate blocks, never one inside the other, so nothing moves twice.

  Chrome 145+ plays the arrival once, when a block is 80px into the screen, so
  a block already on screen plays it as the page opens. It replaces .rise
  there, so a block never gets both.

  Safari can't start an animation that way yet, so there a block follows the
  scroll instead, settling over its first 160px into the screen. It moves
  `transform`, not the `translate` of .rise, so a .rise.reveal block on screen
  when the page opens still gets its arrival at load. Other browsers keep the
  arrival at load.
*/
@keyframes reveal {
  from {
    transform: translateY(32px);
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  @supports (timeline-trigger: --reveal view()) {
    .reveal {
      animation: arrive 800ms var(--ease-arrive) both;
      animation-trigger: --reveal play-once;
      timeline-trigger: --reveal view() entry 80px exit 100%;
      trigger-scope: --reveal;
    }

    .doc {
      timeline-trigger: --card view() entry 80px exit 100%;
      trigger-scope: --card;
    }

    .doc::before {
      animation: arrive 800ms var(--ease-arrive) both;
      animation-trigger: --card play-once;
    }
  }

  @supports (animation-timeline: view()) and (not (timeline-trigger: --reveal view())) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 160px;
    }

    .rise.reveal {
      animation: arrive 800ms var(--ease-arrive) backwards, reveal linear both;
      animation-timeline: auto, view();
      animation-range: normal, entry 0% entry 160px;
    }

    .doc {
      view-timeline: --card;
    }

    .doc::before {
      animation: arrive 800ms var(--ease-arrive) backwards, reveal linear both;
      animation-timeline: auto, --card;
      animation-range: normal, entry 0% entry 160px;
    }
  }
}

.wheel .slice {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: grow 600ms var(--ease) backwards;
  animation-delay: calc(240ms + var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .rise,
  .doc::before {
    animation: none;
  }

  .wheel .slice {
    animation: fade 120ms linear backwards;
    animation-delay: 0ms;
  }

  .btn,
  .contents summary::after,
  .faq-item summary::after,
  .chips label,
  .chapter,
  .wheel .slice {
    transition: none;
  }

  .chips input:checked + label {
    animation: none;
  }

  .wheel .slice:hover {
    --peek: 0;
  }

  /* Picking still cross-fades, briefly. Nothing slides or tilts. */
  .note,
  .wheel .gel,
  .chips label::before {
    transition-duration: 120ms !important;
    transition-delay: 0s !important;
  }

  .note {
    translate: none !important;
  }
}