/* slowmind.app, "Daylight Glass" as in the app (docs/design/DESIGN.md;
   tokens from lib/config/app_colors.dart, app_hue.dart, app_dimens.dart and
   the type roles in app_typography.dart). One warm paper under every page;
   colour arrives as light: a wash at the top that fades into the paper, a
   glow behind a picture, and the plates the round pictures sit on. Content
   sits on white porcelain cards lifted by the page's tinted shadow, never a
   border. Glass only on what floats (the header, the phone's floating bar).
   Deep plum is the one main action. The system font everywhere: SF Pro on
   Apple devices, as in the app; no web fonts load. */

:root {
  color-scheme: light;

  /* Base */
  --paper: #F7F4EE;
  --surface: #FFFFFF;
  --sunk: #F1EDE5;
  --sunk-press: #E9E4DA;
  --ink: #1A1E22;
  --ink-soft: #585C63;
  --muted: #6A655B;       /* only on paper, white and sunk */
  --on-ink: #FFFDF8;
  --line: #E7E1D6;        /* progress tracks, never a divider */
  --field-line: #8F887D;  /* the one hairline: around text fields, 3:1 */

  /* Deep plum, the one accent */
  --brand: #191130;
  --brand-lift: #2A2150;
  --on-brand: #F7F4EE;

  /* The page's hue (lilac, the brand hue, unless a .hue-* class says
     otherwise): wash, plate, the plate's lighter top, glow and shade (the
     tint of shadows, as RGB). */
  --hue: #8B7BD1;
  --wash: #E6E0F6;
  --plate: #DCD4F2;
  --plate-top: #E8E3F7;
  --glow: #B3A3E6;
  --glow-opacity: .5;
  --shade: 46 42 61;

  --font: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 24px;         /* AppRadii.porcelain */
  --radius-sunk: 18px;
  --radius-lg: 32px;
  --gutter: 16px;
  --max: 1080px;
  --column: 720px;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }

/* One hue per page: a test's own colour (AppHue.fromColour). */
.hue-big5 { --hue: #E9B23C; --wash: #FBF2DE; --plate: #FAEED4; --plate-top: #FCF4E3; --glow: #F1CD80; --shade: 58 44 15; --glow-opacity: .45; }
.hue-enneagram { --hue: #3F5BA9; --wash: #DEE3F0; --plate: #D5DBEC; --plate-top: #E4E8F3; --glow: #8294C7; --shade: 16 23 42; --glow-opacity: .45; }
.hue-values { --hue: #8EA046; --wash: #ECEFE0; --plate: #E6EAD6; --plate-top: #EFF1E4; --glow: #B6C187; --shade: 36 40 18; --glow-opacity: .45; }
.hue-eq { --hue: #5B9BD5; --wash: #E3EEF8; --plate: #DBE9F6; --plate-top: #E8F1F9; --glow: #94BEE4; --shade: 23 39 53; --glow-opacity: .45; }
.hue-attachment { --hue: #E2614F; --wash: #FAE4E1; --plate: #F9DCD8; --plate-top: #FBE8E6; --glow: #EC988D; --shade: 56 24 20; --glow-opacity: .45; }
.hue-love { --hue: #E07FA3; --wash: #FAE9EF; --plate: #F8E3EB; --plate-top: #FAEDF2; --glow: #EBACC3; --shade: 56 32 41; --glow-opacity: .45; }
.hue-apology { --hue: #C97B4A; --wash: #F6E9E0; --plate: #F3E2D7; --plate-top: #F7ECE5; --glow: #DCA989; --shade: 50 31 18; --glow-opacity: .45; }
.hue-friendship { --hue: #4FA77A; --wash: #E1F0E8; --plate: #D8ECE2; --plate-top: #E6F3EC; --glow: #8DC6A9; --shade: 20 42 30; --glow-opacity: .45; }
.hue-locus { --hue: #2B958F; --wash: #DBEDEC; --plate: #D0E8E6; --plate-top: #E0F0EF; --glow: #75BAB6; --shade: 11 37 36; --glow-opacity: .45; }
.hue-decision { --hue: #9361A8; --wash: #EDE4F0; --plate: #E7DCEC; --plate-top: #EFE8F3; --glow: #B998C6; --shade: 37 24 42; --glow-opacity: .45; }
.hue-conflict { --hue: #EE8A3A; --wash: #FCEBDE; --plate: #FBE5D4; --plate-top: #FCEEE3; --glow: #F4B37F; --shade: 60 34 14; --glow-opacity: .45; }
.hue-lovecompat { --hue: #C2416F; --wash: #F5DFE7; --plate: #F2D5DF; --plate-top: #F6E4EB; --glow: #D784A1; --shade: 48 16 28; --glow-opacity: .45; }
.hue-ptype { --hue: #1FA3C6; --wash: #D9EFF5; --plate: #CEEBF2; --plate-top: #E0F2F7; --glow: #6DC3DA; --shade: 8 41 50; --glow-opacity: .45; }
.hue-aura { --hue: #B65CC9; --wash: #F3E3F6; --plate: #EFDBF3; --plate-top: #F5E8F7; --glow: #D095DC; --shade: 46 23 50; --glow-opacity: .45; }
.hue-honest { --hue: #8DBF3A; --wash: #ECF4DE; --plate: #E6F1D4; --plate-top: #EFF6E3; --glow: #B5D57F; --shade: 35 48 14; --glow-opacity: .45; }
.hue-career { --hue: #3B7A57; --wash: #DEE8E2; --plate: #D4E2DA; --plate-top: #E4ECE7; --glow: #80A992; --shade: 15 30 22; --glow-opacity: .45; }
.hue-christmas { --hue: #B8323A; --wash: #F3DCDE; --plate: #EFD2D4; --plate-top: #F5E2E3; --glow: #D17A7F; --shade: 46 12 14; --glow-opacity: .45; }
.hue-word { --hue: #4B57C9; --wash: #E0E2F6; --plate: #D7DAF3; --plate-top: #E6E7F7; --glow: #8A92DC; --shade: 19 22 50; --glow-opacity: .45; }
.hue-newyear { --hue: #C9A24A; --wash: #F6EFE0; --plate: #F3EBD7; --plate-top: #F7F2E6; --glow: #DCC389; --shade: 50 40 18; --glow-opacity: .45; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  margin: 0;
  min-height: 100vh;
  /* The wash: the page's colour at the top, gone by 46% of the screen
     height (PageWash: full, .78, .30, 0 at 0, 28%, 66%, 100%). */
  background:
    linear-gradient(180deg,
      var(--wash) 0,
      color-mix(in srgb, var(--wash) 78%, var(--paper)) calc(max(46vh, 420px) * .28),
      color-mix(in srgb, var(--wash) 30%, var(--paper)) calc(max(46vh, 420px) * .66),
      var(--paper) max(46vh, 420px)) no-repeat,
    var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;   /* body, 17 */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  body { background: linear-gradient(180deg, var(--wash) 0, var(--paper) max(46vh, 420px)) no-repeat, var(--paper); }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
ul, ol { margin: 0; }
strong { font-weight: 600; color: var(--ink); }

/* ---------- type roles (AppTypography) ---------- */
h1, .large-title { font-size: 2.125rem; font-weight: 700; line-height: 1.12; letter-spacing: -.012em; }
h2, .title2 { font-size: 1.375rem; font-weight: 600; line-height: 1.22; letter-spacing: -.008em; }
h3, .headline { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.title3 { font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -.006em; }
.callout { font-size: 1rem; }
.subheadline { font-size: .9375rem; }
.footnote { font-size: .8125rem; line-height: 1.45; }
.label { font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.caption { font-size: .75rem; line-height: 1.4; }
.lead { font-size: 1.0625rem; color: var(--ink-soft); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.soft { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }
@media (min-width: 760px) {
  h2.section-title, .section-head h2 { font-size: 1.75rem; line-height: 1.18; }
  .lead { font-size: 1.25rem; line-height: 1.45; }
}

:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 12px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.column { width: 100%; max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- surfaces ---------- */
/* Porcelain: a white card lifted by the page's three-layer tinted shadow. */
.card, .porcelain {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow:
    0 1px 2px rgb(var(--shade) / .05),
    0 4px 12px rgb(var(--shade) / .05),
    0 12px 32px -4px rgb(var(--shade) / .06);
}
/* A surface inside a card sinks and drops its shadow. */
.sunk { background: var(--sunk); border-radius: var(--radius-sunk); }
.floating {
  box-shadow:
    0 2px 4px rgb(var(--shade) / .06),
    0 8px 20px rgb(var(--shade) / .07),
    0 24px 48px -8px rgb(var(--shade) / .09);
}

/* ---------- pictures ---------- */
/* A round test picture on its plate (the art has the plate baked in; the
   plate shows while it loads). */
.art {
  display: block; position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, var(--plate-top), var(--plate));
}
.art img { width: 100%; height: 100%; object-fit: cover; }
/* A picture standing in its own light (GlowingArt): a blurred disc 1.35
   times its size in the glow colour, full down to its centre and gone just
   below its foot, so text under it never sits on colour. */
.lit { position: relative; isolation: isolate; }
.lit > .glow {
  position: absolute; inset: -60%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent calc(72.7% + 12px));
  mask-image: linear-gradient(180deg, #000 50%, transparent calc(72.7% + 12px));
}
.lit > .glow::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 61.4%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--glow); opacity: var(--glow-opacity);
  filter: blur(clamp(22px, 5vw, 36px));
}
@media (prefers-reduced-motion: no-preference) {
  .lit > .glow::before { animation: lamp .72s ease-out both; }
}
@keyframes lamp { from { opacity: 0; } }
/* Pages with a glow keep it from widening the page on a phone. */
.hero-band { overflow-x: hidden; overflow-x: clip; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 999px;
  font-family: var(--font); font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s cubic-bezier(.3, .7, .4, 1), background-color .2s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; }
/* The deep-plum capsule: the one main action (PrimaryButton). */
.btn-primary, .btn-deep {
  color: var(--on-brand); background: var(--brand);
  box-shadow: 0 2px 4px rgb(26 30 34 / .06), 0 8px 20px rgb(25 17 48 / .22), 0 24px 48px -8px rgb(25 17 48 / .10);
}
.btn-primary:hover, .btn-deep:hover { background: var(--brand-lift); }
/* Everyday actions: white pills on the page (SoftPill), sunk pills in a card. */
.btn-soft {
  color: var(--ink); background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shade) / .05), 0 4px 12px rgb(var(--shade) / .05), 0 12px 32px -4px rgb(var(--shade) / .06);
}
.btn-soft:hover { background: #FFFDF9; }
.btn-sunk { color: var(--ink); background: var(--sunk); }
.btn-sunk:hover { background: var(--sunk-press); }
/* The app and the stores: ink, never a test colour. */
.btn-ink { color: var(--on-ink); background: var(--ink); }
.btn-ink:hover { background: #2C3137; }
.btn-block { display: flex; width: 100%; }
.btn-small { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1.5px; background: none; border: 0; cursor: pointer;
}
.text-link:hover { text-decoration-thickness: 2.5px; }

/* The two stores: ink capsules, side by side. */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 56px; min-width: 176px; padding: 8px 26px 9px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); text-decoration: none; line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s cubic-bezier(.3, .7, .4, 1), background-color .2s ease;
}
.store:hover { background: #2C3137; }
.store:active { transform: scale(.97); }
.store small { font-size: .75rem; font-weight: 500; color: rgb(255 253 248 / .82); }
.store span { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }

/* ---------- header: a floating capsule of warm glass ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: 10px var(--gutter) 0; }
.site-header .nav {
  max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto;
  height: 56px; padding: 0 8px 0 10px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgb(255 253 248 / .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 2px 4px rgb(43 38 32 / .05), 0 8px 20px rgb(43 38 32 / .06), 0 24px 48px -12px rgb(43 38 32 / .10);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header .nav { background: rgb(255 253 248 / .97); }
}
@media (prefers-contrast: more) { .site-header .nav { background: #fff; } }
.logo {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 6px;
  text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; border-radius: 12px;
}
.logo img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--ink);
}
.nav-links a:hover { background: rgb(241 237 229 / .9); }
.nav-right { display: flex; align-items: center; gap: 4px; }
.tp-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap;
}
.tp-link:hover { background: rgb(241 237 229 / .9); }
.tp-link svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 759px) { .nav-links { display: none; } }
/* At 320 the home page's Trustpilot ask needs the wordmark's room. */
@media (max-width: 359px) { .nav-home .logo span { display: none; } }

/* ---------- sections ---------- */
main { display: block; }
.section { padding: 64px 0; }
.section-tight { padding: 32px 0; }
section[id], [id].anchor { scroll-margin-top: 88px; }
.section-head { max-width: 40em; margin-bottom: 28px; }
.section-head p { margin-top: 10px; color: var(--ink-soft); }
@media (min-width: 760px) {
  .section { padding: 88px 0; }
  .section-head { margin-bottom: 40px; }
  .section-head p { font-size: 1.125rem; }
}

/* ---------- home: hero ---------- */
.hero { padding: 36px 0 56px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero .label { color: var(--ink-soft); margin-bottom: 12px; }
.hero h1 { margin-bottom: 16px; }
.hero .lead { max-width: 32em; }
.hero .stores { margin-top: 28px; }
.hero .see-how { margin-top: 14px; }
@media (min-width: 900px) {
  .hero { padding: 64px 0 88px; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; }
  .hero h1 { font-size: 3.5rem; line-height: 1.05; letter-spacing: -.02em; }
}
@media (max-width: 480px) {
  .hero .stores { flex-direction: column; align-items: stretch; }
  .hero .store { align-items: center; }
}

/* The app's own screens, in a plain rounded phone of white porcelain. */
.phone {
  width: 100%; max-width: 300px; margin: 0 auto; padding: 6px; border-radius: 44px;
  background: var(--surface);
  box-shadow: 0 2px 4px rgb(var(--shade) / .06), 0 10px 24px rgb(var(--shade) / .08), 0 30px 60px -12px rgb(var(--shade) / .16);
}
.phone img { width: 100%; border-radius: 38px; background: var(--paper); }
.hero .phone { max-width: 320px; }
@media (max-width: 899px) { .hero .phone { max-width: 260px; } }

.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
.shot { display: flex; flex-direction: column; align-items: center; text-align: center; }
.shot h3 { margin-top: 18px; }
.shot p { margin-top: 4px; font-size: .9375rem; color: var(--ink-soft); max-width: 20em; }
@media (max-width: 599px) {
  .shots .phone { padding: 4px; border-radius: 30px; }
  .shots .phone img { border-radius: 26px; }
  .shot h3 { font-size: 1rem; margin-top: 14px; }
  .shot p { font-size: .8125rem; }
}
@media (min-width: 900px) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; } }

/* The shift: words on paper, two columns when there is room. */
.split { display: grid; gap: 16px; }
.split .lead { color: var(--ink-soft); }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; } .split .lead { padding-top: 6px; } }

/* How it works: one white card, three steps told apart by space. */
.steps-card { padding: 28px 24px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: step; }
.step { display: grid; grid-template-columns: 36px 1fr; gap: 4px 14px; }
.step::before {
  counter-increment: step; content: counter(step);
  grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sunk); font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums;
}
.step h3 { padding-top: 6px; }
.step p { color: var(--ink-soft); font-size: 1rem; }
@media (min-width: 900px) {
  .steps-card { padding: 40px 40px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .step::before { grid-row: auto; margin-bottom: 8px; }
  .step h3 { padding-top: 0; }
}

/* The test shelves, as on the Tests tab: round pictures two to a row on a
   phone, more on a wider screen, each opening its guide. */
.shelves { display: grid; gap: 40px; }
.shelf h3 { font-size: 1.25rem; margin-bottom: 16px; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; } }
.tile { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; border-radius: 20px; padding: 4px 4px 8px; }
.tile .art { width: 100%; max-width: 188px; transition: transform .25s cubic-bezier(.3, .7, .4, 1); }
@media (hover: hover) { .tile:hover .art { transform: scale(1.03); } }
.tile-name { margin-top: 12px; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.tile-about { margin-top: 4px; font-size: .875rem; color: var(--ink-soft); max-width: 17em; }
.tile-meta { margin-top: 4px; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.shelf-note { margin-top: 32px; color: var(--muted); font-size: .9375rem; }

/* What you'll discover: two white cards, each with a sunk surface inside. */
.pair { display: grid; gap: 16px; }
@media (min-width: 900px) { .pair { grid-template-columns: 1fr 1fr; gap: 24px; } }
.feature { padding: 28px 24px; }
.feature h3 { font-size: 1.25rem; margin-bottom: 8px; }
.feature p { color: var(--ink-soft); font-size: 1rem; }
.feature .sunk { margin-top: 22px; padding: 18px 20px; }
.quote { font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.player { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.player .art { width: 64px; }
.player .t { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.player .bar { height: 4px; margin-top: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.player .bar i { display: block; width: 42%; height: 100%; background: var(--ink); border-radius: 999px; }
.player .m { display: flex; justify-content: space-between; margin-top: 6px; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .feature { padding: 36px 34px; } }

/* Premium: the list, the plans as white cards, one plum action. */
.premium-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .premium-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; } }
.premium .section-head { margin-bottom: 22px; }
.premium-list { list-style: none; padding: 0; display: grid; gap: 14px; max-width: 34em; }
.premium-list li { color: var(--ink-soft); font-size: 1rem; }
.premium-list strong { display: block; color: var(--ink); font-size: 1.0625rem; }
.plans { display: flex; flex-direction: column; gap: 12px; }
/* As on the app's paywall: the yearly plan floats white with an ink check,
   the monthly one sinks into the page with an empty ring. */
.plan {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 2px 14px; align-items: baseline;
  min-height: 44px; padding: 18px 22px 18px 18px; border-radius: var(--radius); text-decoration: none;
  background: var(--sunk);
  transition: transform .2s cubic-bezier(.3, .7, .4, 1), background-color .2s ease;
}
.plan::before {
  content: ''; grid-row: 1; align-self: center; width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--field-line);
}
.plan:hover { background: var(--sunk-press); }
.plan:active { transform: scale(.985); }
.plan-main, .plan-main:hover {
  background: var(--surface);
  box-shadow: 0 2px 4px rgb(var(--shade) / .06), 0 8px 20px rgb(var(--shade) / .07), 0 24px 48px -8px rgb(var(--shade) / .09);
}
.plan-main::before {
  box-shadow: none;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.plan-note { grid-column: 2 / -1; }
.plan-name { font-weight: 600; font-size: 1.0625rem; }
.plan-price { font-weight: 600; font-size: 1.0625rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-price small { font-weight: 400; font-size: .8125rem; color: var(--ink-soft); }
.plan-note { font-size: .9375rem; color: var(--ink-soft); }
.plan-fine { font-size: .8125rem; color: var(--muted); line-height: 1.5; }
/* A link inside a line of small text: a 44px tall hit area that doesn't
   change the line it sits in. */
.plan-fine a, .footer-bottom a, .inline-hit {
  color: var(--ink); text-underline-offset: 2px;
  display: inline-block; padding: 12px 2px; margin: -12px -2px; line-height: 20px;
}
.premium-cta { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 6px; }
.premium-cta .btn-deep { width: 100%; min-height: 54px; }
.premium-cta .text-link { align-self: center; }
@media (max-width: 359px) { .plan { padding: 16px; gap: 2px 10px; } }

/* Questions: white cards separated by space. */
.faq { display: grid; gap: 10px; max-width: 760px; }
.faq details, details.qa {
  background: var(--surface); border-radius: 20px;
  box-shadow: 0 1px 2px rgb(var(--shade) / .05), 0 4px 12px rgb(var(--shade) / .04);
}
.faq summary, details.qa summary {
  cursor: pointer; list-style: none; position: relative; min-height: 56px; display: flex; align-items: center;
  padding: 16px 54px 16px 22px; border-radius: 20px; font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker, details.qa summary::-webkit-details-marker { display: none; }
.faq summary::after, details.qa summary::after {
  content: ''; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after, details.qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .a, details.qa > p { padding: 0 22px 20px; color: var(--ink-soft); font-size: 1rem; max-width: 46em; }
.faq .a a, details.qa a { color: var(--ink); font-weight: 600; }

/* Closing: the app icon and the stores, centred on paper. */
.closing { text-align: center; }
.closing img { width: 72px; height: 72px; border-radius: 17px; margin: 0 auto 22px; }
.closing p { margin-top: 10px; color: var(--ink-soft); }
.closing .stores { justify-content: center; margin-top: 26px; }

/* ---------- footer ---------- */
.site-footer { padding: 56px 0 40px; color: var(--muted); font-size: .9375rem; }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.2fr 1.6fr 1fr; gap: 32px; } }
.footer-brand .logo { color: var(--ink); }
.footer-brand p { margin-top: 8px; max-width: 24em; }
.footer-title { font-weight: 600; font-size: .8125rem; color: var(--ink-soft); margin-bottom: 4px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; }
.footer-guides { grid-template-columns: 1fr 1fr; column-gap: 16px; }
@media (min-width: 760px) { .footer-guides { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); column-gap: 20px; } }
.footer-links a, .footer-links button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; font-weight: 500; color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; line-height: 1.3;
}
.footer-links a:hover, .footer-links button:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { margin-top: 28px; font-size: .8125rem; }

/* ---------- guides, quizzes and documents ---------- */
/* The page's picture, large on its glow, then the title. */
.page-hero { padding-top: 24px; padding-bottom: 8px; }
.page-hero .lit { width: min(220px, 56vw); margin: 0 auto 28px; }
.page-hero .art { width: 100%; }
.page-hero .eyebrow { margin-top: 10px; color: var(--ink-soft); font-size: .9375rem; }
.page-hero .lead { margin-top: 18px; }
@media (min-width: 760px) { .page-hero { padding-top: 40px; } .page-hero .lit { width: 240px; } }

.doc { padding-top: 8px; padding-bottom: 24px; }
.doc > * + * { margin-top: 14px; }
.doc h2 { margin-top: 48px; }
.doc h3 { margin-top: 28px; }
.doc h2 + *, .doc h3 + * { margin-top: 10px; }
.doc p, .doc li { color: #33373D; }
.doc ul, .doc ol { padding-left: 1.25em; }
.doc li + li { margin-top: 8px; }
.doc a:not(.btn):not(.store) { color: var(--ink); text-underline-offset: 3px; }
.doc a:not(.btn):not(.store):hover { text-decoration-thickness: 2px; }
.doc em { font-style: italic; }
.doc code { font-family: var(--mono); font-size: .86em; background: var(--sunk); padding: 1px 5px; border-radius: 6px; }
.eyebrow { color: var(--ink-soft); font-size: .9375rem; }
.updated { color: var(--ink-soft); font-size: .9375rem; }
@media (min-width: 760px) { .doc h2 { font-size: 1.5rem; } }
/* A note, a sample, a short version: one white card. */
.doc .callout, .note-card { padding: 20px 22px; background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(var(--shade) / .05), 0 4px 12px rgb(var(--shade) / .05), 0 12px 32px -4px rgb(var(--shade) / .06); }
.doc .callout p + p { margin-top: 10px; }
.doc .shot-wrap, .doc .phone { margin-top: 32px; margin-bottom: 18px; }
.doc .phone { max-width: 280px; }
.doc .shot-caption { text-align: center; color: var(--ink-soft); font-size: .875rem; margin-top: 0; }
/* The way into the app: a white card, the stores in ink. */
.doc .cta { margin-top: 40px; padding: 28px 24px; text-align: center; }
.doc .cta h2 { margin-top: 0; }
.doc .cta p { color: var(--ink-soft); margin: 10px auto 0; max-width: 32em; }
.pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.doc .pills .store { align-items: center; }
@media (max-width: 480px) { .doc .pills { flex-direction: column; align-items: stretch; } }
.doc details.qa { margin-top: 10px; }
.doc details.qa > p { margin-top: 0; color: var(--ink-soft); }
.doc h2 + details.qa { margin-top: 16px; }

/* More guides: one white card of rows with their small pictures. */
.related { margin-top: 48px; }
.related > h2 { margin: 0 0 14px; }
.related-list { list-style: none; padding: 8px; margin: 0; }
.related-list a {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; min-height: 60px;
  padding: 8px 12px; border-radius: 16px; text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--ink);
}
.related-list a:hover { background: var(--sunk); }
.related-list .art { width: 44px; }
.doc .related a { text-decoration: none; }

/* Tables: a white card, rows told apart by a sunk fill, no lines. */
.table-card { padding: 6px; margin: 14px 0 20px; }
.doc table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 14px; color: #33373D; }
.doc th { font-weight: 600; color: var(--ink); }
.doc tr:nth-child(odd) > * { background: var(--sunk); }
.doc tr > :first-child { border-radius: 12px 0 0 12px; }
.doc tr > :last-child { border-radius: 0 12px 12px 0; }
.doc tr > :only-child { border-radius: 12px; }
.doc table.facts th { width: 128px; }
.doc table.stack thead th { background: none; font-size: .8125rem; color: var(--ink-soft); padding-top: 8px; padding-bottom: 6px; }
/* Documents: the title on the page's wash, then the text. */
.doc.legal { padding-top: 32px; }
.doc.legal h1 + .updated { margin-top: 10px; }
.doc.legal .updated + * { margin-top: 28px; }
@media (min-width: 760px) { .doc.legal { padding-top: 56px; } }
@media (max-width: 599px) {
  .doc th, .doc td { padding: 9px 10px; }
  .doc table.facts th { width: 92px; }
  .doc table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* Wide tables become one block per row: no sideways scrolling. */
  .doc table.stack, .doc table.stack tbody, .doc table.stack tr, .doc table.stack td, .doc table.stack th { display: block; width: 100%; }
  .doc table.stack tr { border-radius: 12px; padding: 6px 0; }
  .doc table.stack tr:nth-child(odd) { background: var(--sunk); }
  .doc table.stack tr > * { background: none !important; border-radius: 0 !important; padding: 3px 12px; }
  .doc table.stack td[data-label]::before { content: attr(data-label); display: block; font-weight: 600; color: var(--ink); font-size: .8125rem; }
}
.tablewrap { overflow-x: auto; }

/* ---------- the free quizzes ---------- */
.quiz { padding: 26px 22px; margin-top: 24px; scroll-margin-top: 84px; }
@media (min-width: 600px) { .quiz { padding: 34px 34px; } }
.quiz h2 { margin: 0 0 8px; }
.quiz p { color: var(--ink-soft); }
.quiz p:not([class]), .quiz .r-desc p { font-size: 1rem; }
.quiz p + p, .quiz p + .btn, .quiz noscript + .btn { margin-top: 14px; }
#q-intro > p:not(.fine) { margin-bottom: 20px; }
.fine, .quiz .fine { font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.quiz .fine { margin-top: 14px; }
.quiz .fine a { color: var(--ink); text-underline-offset: 2px; }
.kicker, .quiz .kicker { font-size: .8125rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px; }
.count, .quiz .count { font-size: .8125rem; font-weight: 600; color: var(--ink-soft); margin: 0; font-variant-numeric: tabular-nums; }
.progress { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 10px 0 24px; }
.progress i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 999px; transition: width .25s ease; }
.quiz .statement { font-size: 1.375rem; font-weight: 600; line-height: 1.3; letter-spacing: -.006em; color: var(--ink); margin: 0 0 20px; min-height: 2.6em; }
@media (min-width: 600px) { .quiz .statement { font-size: 1.75rem; line-height: 1.25; } }
.quiz .statement:focus { outline: none; }
.opts { display: grid; gap: 10px; }
/* Answers: sunk capsules in the card with an empty ring; the chosen one
   floats white with an ink check (a selected option). */
.opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px; padding: 12px 16px 12px 20px; border: 0; border-radius: 18px;
  background: var(--sunk); color: var(--ink); text-align: left;
  font-size: 1.0625rem; font-weight: 400; line-height: 1.3; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.opt::after {
  content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--field-line); background: transparent;
}
@media (hover: hover) { .opt:hover { background: var(--sunk-press); } }
.opt[aria-pressed='true'] {
  background: var(--surface); font-weight: 600;
  box-shadow: 0 2px 4px rgb(var(--shade) / .08), 0 8px 20px rgb(var(--shade) / .10), 0 16px 32px -8px rgb(var(--shade) / .12);
}
.opt[aria-pressed='true']::after {
  box-shadow: none;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.step-foot { display: flex; align-items: center; margin-top: 12px; min-height: 44px; }
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 4px; border: 0; background: none; cursor: pointer;
  font-weight: 600; font-size: .9375rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.r-title { font-size: 1.375rem; }
@media (min-width: 600px) { .r-title { font-size: 1.75rem; } }
.r-title:focus { outline: none; }
.r-desc { margin-top: 12px; }
.r-desc p + p { margin-top: 10px; }
.quiz h3 { margin: 26px 0 10px; font-size: 1.0625rem; }
.bars { list-style: none; padding: 18px 18px 6px; margin: 0; background: var(--sunk); border-radius: var(--radius-sunk); }
.bars li { margin: 0 0 14px; }
.bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; color: var(--ink); }
.bar-head .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.bars li.top .bar-head span:first-child { font-weight: 600; }
.bar-track { height: 6px; margin-top: 6px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--hue); border-radius: 999px; }
.note { margin-top: 12px; font-size: .9375rem; }
/* The hand-off to the app: a sunk surface in the result card. */
.r-cta { margin: 24px 0 6px; padding: 22px 20px; background: var(--sunk); border-radius: var(--radius-sunk); }
.r-cta h3 { margin: 0 0 8px; font-size: 1.25rem; }
.r-cta p { color: var(--ink-soft); }
.r-cta .btn { margin-top: 16px; }
.r-cta .fine { margin-top: 10px; }
.perks { list-style: none; padding: 0; margin: 12px 0 4px; display: grid; gap: 10px; }
.perks li { color: var(--ink-soft); font-size: .9375rem; }
.perks + p { margin-top: 10px; }
.perks strong { color: var(--ink); }
.r-premium { margin: 14px 0 0; }
.r-premium a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.r-share { margin: 26px 0 4px; }
.r-share h3 { margin: 0 0 6px; }
.r-share .btn { margin-top: 14px; }
.share-link {
  display: block; width: 100%; margin-top: 10px; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--field-line); border-radius: 14px; background: var(--surface); color: var(--ink);
  font-size: 16px; font-weight: 500;
}
.share-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.again { margin-top: 12px; }
@media (max-width: 599px) { .r-cta .btn, .r-share .btn { display: flex; width: 100%; } }
@media (max-width: 360px) { .quiz { padding: 22px 16px; } .r-cta { padding: 18px 14px; } }

/* A quiz page on a wide screen: the picture beside the title, so Start
   shows on the first screen. */
@media (min-width: 760px) {
  .quiz-hero { display: grid; grid-template-columns: 1fr 200px; column-gap: 40px; align-items: center; }
  .quiz-hero > .lit { grid-column: 2; grid-row: 1 / span 3; width: 200px; margin: 0; }
  .quiz-hero > :not(.lit) { grid-column: 1; }
}

/* Opened from an ad: the quiz first, the guide below it. */
.from-ad .page-hero .lead { display: none; }
.from-ad .page-hero .lit { display: none; }
.from-ad .page-hero .ad-art { display: block; }
/* On a phone, Start has to show on the first screen, even at 320 by 568. */
@media (max-width: 759px) {
  .from-ad .site-header { position: relative; padding-top: 6px; }
  .from-ad .site-header .nav { height: 48px; }
  .from-ad .logo img { width: 30px; height: 30px; border-radius: 8px; }
  .from-ad .page-hero { padding-top: 10px; }
  .from-ad .page-hero .lit { display: none; }
  .from-ad .page-hero .ad-art { display: block; }
  .from-ad .page-hero h1 { font-size: 1.5rem; }
  .from-ad .page-hero .eyebrow { margin-top: 4px; font-size: .8125rem; }
  .from-ad .quiz { margin-top: 12px; padding: 18px 18px 20px; }
  .from-ad .quiz h2 { font-size: 1.25rem; margin-bottom: 6px; }
  .from-ad #q-intro > p:not(.fine) { font-size: .9375rem; line-height: 1.5; margin-bottom: 14px; }
}
@media (max-width: 370px) { .from-ad .page-hero .ad-art { display: none !important; } }
.ad-art { display: none; }
.title-row { display: flex; align-items: center; gap: 12px; }
.title-row .art { width: 44px; flex: none; }

/* ---------- the store page (/get) and a lost page ---------- */
.solo { min-height: calc(100vh - 76px); display: flex; flex-direction: column; justify-content: center; padding: 32px 0 24px; }
.foot-mini { padding: 4px var(--gutter) 24px; text-align: center; font-size: .8125rem; color: var(--muted); }
.foot-mini ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 20px; }
.foot-mini a, .foot-mini button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.solo-card { width: 100%; max-width: 440px; margin: 0 auto; padding: 32px 24px; text-align: center; }
.solo-card img.icon { width: 76px; height: 76px; border-radius: 18px; margin: 0 auto 20px; }
.solo-card p { color: var(--ink-soft); margin-top: 10px; }
.solo-card .stores { flex-direction: column; margin-top: 24px; }
.solo-card .store { align-items: center; }
.lost { text-align: center; padding-bottom: 72px; min-height: calc(100vh - 150px); }
.lost .lead { margin-left: auto; margin-right: auto; max-width: 26em; }
.lost-actions { margin-top: 28px; }

/* ---------- the consent card (made by /js/measure.js) ---------- */
html .sm-consent { border: 0; border-radius: var(--radius); padding: 18px 20px; font-family: var(--font); }
html .sm-consent.sm-fixed {
  background: var(--surface);
  box-shadow: 0 2px 4px rgb(43 38 32 / .06), 0 8px 20px rgb(43 38 32 / .08), 0 24px 48px -8px rgb(43 38 32 / .16);
}
html .sm-consent.sm-inline {
  margin: 16px 0 4px; background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shade) / .05), 0 4px 12px rgb(var(--shade) / .05);
}
html .card .sm-consent.sm-inline, html .quiz .sm-consent.sm-inline { background: var(--sunk); box-shadow: none; border-radius: var(--radius-sunk); }
html .sm-consent .sm-title { font-size: 1.0625rem; font-weight: 600; }
html .sm-consent p { font-size: .9375rem; color: var(--ink-soft); }
html .sm-consent .sm-status { color: var(--ink); font-weight: 500; }
html .sm-consent a { color: var(--ink); font-weight: 600; }
html .sm-consent .sm-actions { gap: 10px; margin-top: 4px; }
html .sm-consent .sm-actions button {
  border: 0; min-height: 48px; border-radius: 999px; font-weight: 600; font-size: .9375rem;
  background: var(--sunk); color: var(--ink);
}
html .sm-consent .sm-actions button:hover { background: var(--sunk-press); }
html .card .sm-consent .sm-actions button, html .quiz .sm-consent .sm-actions button { background: var(--surface); }
html .sm-consent .sm-actions button.sm-close { background: none; }
html .sm-consent a:focus-visible, html .sm-consent button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Reduce Motion: no movement (the glow's lamp-on is already off then). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .btn:active, .store:active, .plan:active { transform: none; }
}