/* ===========================================================
   Reward Study - reward.study

   The 2026-09 redesign. White page, big rounded colour panels,
   Caprasimo for display and Figtree for text, one violet accent
   with amber as the only second voice.

   Light only. The theme toggle was removed with this redesign:
   the design has one palette and a dark counterpart would have
   been invented rather than designed.

   Self-hosted fonts, no external request of any kind. No inline
   styles or inline script anywhere, because the server sends
   Content-Security-Policy: default-src 'self'; style-src 'self'; script-src 'self'
   and inline would be blocked.

   Class names are carried over from the previous system on
   purpose: the six localized trees are generated from the English
   pages by string replacement, so changing markup costs far more
   than changing style.
   =========================================================== */

/* --------------------------------------------------------- fonts */

/* Caprasimo: display only. One weight, because it has one. */
@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/font/caprasimo-latin-ext.woff2") format('woff2');
  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: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/font/caprasimo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree: 400, 600 and 700 all come from one variable file per subset. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/font/figtree-latin-ext.woff2") format('woff2');
  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: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/font/figtree-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  /* Grounds. The page is white and sections are panels on it. */
  --page:    #FFFFFF;
  --cool:    #F3EFFF;   /* lilac, the default panel */
  --warm:    #FFF6E0;   /* cream, the child's side and second voice */
  --deep:    #1B1338;   /* the dark panel */
  --deep-2:  #2A1D56;   /* a card on the dark panel */

  /* Ink */
  --ink:     #191433;
  --body:    #443E63;
  --mut:     #5C5580;
  --on-deep:     #D8D2F5;
  --on-deep-str: #E4DEFF;
  --on-deep-mut: #ADA4D8;

  /* Accent. One violet. Amber is a highlight, never a link. */
  --acc:      #5B3DF5;
  --acc-deep: #3A21C4;
  --amber:    #FFC534;
  --on-amber: #4A3B00;

  /* The reassurance pills, the only place mint appears. */
  --mint:    #E9FBF7;
  --mint-fg: #0B5F59;

  --rule:     rgba(25, 20, 51, .10);
  --rule-deep:#372A6B;
  --btn-sh:   0 6px 16px rgba(91, 61, 245, .30);
  --shot-sh:  0 14px 34px rgba(25, 20, 51, .24);

  --r-lg: 28px;
  --r-md: 24px;
  --r-sm: 20px;

  --maxw:  1240px;
  --pad-i: clamp(18px, 3.5vw, 40px);
  --pad-b: clamp(30px, 4vw, 60px);
  --panel-p: clamp(26px, 3.6vw, 52px);

  --font: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --display: Caprasimo, Georgia, serif;
}

/* --------------------------------------------------------- reset */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 14px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--acc-deep); text-underline-offset: 3px; }
a:hover { color: var(--acc); }

img { display: block; max-width: 100%; height: auto; }

/* Any class rule that sets display is (0,1,0) and outranks the browser's own
   [hidden]{display:none}, so the attribute silently stops working. That is
   what left the consent banner on screen after Accept. Global and !important
   so it cannot happen again to anything. */
[hidden] { display: none !important; }

ul, ol { margin: 0; padding: 0; }

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

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

/* --------------------------------------------------------- layout */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-i);
}

.band { padding: 0 0 var(--pad-b); }
.band--tall { padding-bottom: clamp(40px, 5vw, 76px); }

/* A coloured band is a rounded panel inset from a white page, not a
   full-bleed stripe. The colour lives on .wrap so no page needs an
   extra element for it. */
.band--cool > .wrap,
.band--warm > .wrap,
.band--deep  > .wrap,
.band--close > .wrap {
  padding: var(--panel-p);
  border-radius: var(--r-lg);
  max-width: var(--maxw);
}
.band--cool  > .wrap { background: var(--cool); }
.band--warm  > .wrap,
.band--warm-ground > .wrap { background: var(--warm); }
.band--deep   > .wrap { background: var(--deep); color: var(--on-deep); }
.band--close > .wrap { background: var(--acc); color: #FFFFFF; }

/* The panel needs the page gutter outside it as well as its own padding. */
.band--cool, .band--warm, .band--deep, .band--close, .band--warm-ground {
  padding-left: var(--pad-i);
  padding-right: var(--pad-i);
}
.band--cool > .wrap, .band--warm > .wrap, .band--deep > .wrap,
.band--close > .wrap, .band--warm-ground > .wrap { padding-left: var(--panel-p); padding-right: var(--panel-p); }

/* White bands carry no panel, only rhythm. Their inner padding must equal the
   panelled bands' page gutter plus panel padding, or the page ends up with two
   content left edges: measured 11px apart at 1440 and 37px apart at 1024. */
.band--calm, .band--calm2 { background: var(--page); padding-left: var(--pad-i); padding-right: var(--pad-i); }
.band--calm > .wrap, .band--calm2 > .wrap {
  padding-top: clamp(30px, 4vw, 60px);
  padding-left: var(--panel-p);
  padding-right: var(--panel-p);
}

/* On the dark panel every colour flips. */
.band--deep h1, .band--deep h2, .band--deep h3 { color: #FFFFFF; }
.band--deep p { color: var(--on-deep); }
.band--deep .eyebrow { color: var(--amber); }
.band--deep a { color: var(--amber); }
.band--deep .card,
.band--deep .feat-card { background: var(--deep-2); }
.band--deep .card p,
.band--deep .feat-card p { color: var(--on-deep); }
.band--deep .cite-line,
.band--deep .body-copy--fine { color: var(--on-deep-mut); }
.band--deep .cite-line { border-top-color: var(--rule-deep); }
.band--deep .stat__label { color: #FFFFFF; }

/* The citation is set by .feat-card > p.cite-line, which is (0,2,1) and beats
   a plain .band--deep .cite-line. Carry the element here too, or the source
   line stays mid-grey on near-black. */
.band--deep .feat-card > p.cite-line { color: var(--on-deep-mut); }

/* Every second card is cream, on the dark panel as everywhere else: that
   checkerboard is the design. What was wrong is that .band--deep went on
   painting the text light, so a cream card carried near-white type. The
   card's ground decides its ink, not the panel's.

   These have to outrank .band--deep .feat-card p, which is (0,2,1); the
   alternator's own (0,3,0) is what made this necessary in the first place.
   A :nth-child counts as a class, so each of these lands at (0,4,1). */
.band--deep .grid--feat > .feat-card:nth-child(2n) h3,
.band--deep .grid--feat > .feat-card:nth-child(2n) p,
.band--deep .grid--feat > .feat-card:nth-child(2n) .num--tpl,
.band--deep .grid--feat > .feat-card:nth-child(2n) .stat__label { color: var(--ink); }
.band--deep .grid--feat > .feat-card:nth-child(2n) > p.cite-line {
  color: var(--mut);
  border-top-color: var(--rule);
}

/* A link on a violet ground was inheriting --acc-deep, violet on violet. */
.price-card a, .band--close a, .band--close .colophon a { color: #FFFFFF; }
.price-card a:hover, .band--close a:hover { color: var(--amber); }

.band--close h1, .band--close h2 { color: #FFFFFF; }
.band--close p { color: #F0EDFF; }

/* The old system drew a decorative bloom behind the hero. The new one
   does not, but the element is still in the markup of every page. */
.bloom { display: none; }
/* .clip-col is a passthrough wrapper around a screenshot on how-it-works.
   It must never be hidden: doing so takes four captures off that page. */
.clip-col { min-width: 0; }

/* Skip link, visible only once focused. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acc);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
  text-decoration: none;
  z-index: 100;
}
.skip:focus { left: 0; color: #FFFFFF; }

/* --------------------------------------------------------- header */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--page);
  padding: 12px clamp(14px, 3vw, 32px);
}

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--cool);
  border-radius: 999px;
  padding: 9px clamp(14px, 2vw, 20px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
}

/* The pill only reads as a pill on one line. Once the links wrap it is a
   tall rounded block, and a 999px radius on a 200px-tall box looks like a
   mistake rather than a shape. */
@media (max-width: 720px) {
  .nav__inner { border-radius: var(--r-md); padding: 14px 16px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--acc-deep); }
.brand img { width: 30px; height: 30px; border-radius: 999px; }

.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 18px);
  font-size: 14px;
  font-weight: 700;
}
.nav__links a {
  min-width: 44px;
  justify-content: center;
  color: var(--body);
  text-decoration: none;
  /* Hit area, not type size: the links measured 56x23 and need 44px of height. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav__links a:hover { color: var(--acc-deep); }
.nav__links a[aria-current="page"] { color: var(--acc-deep); }

/* Language dropdown in the nav. A details element, so it opens and closes
   with no script, which the CSP requires anyway. */
.lang-menu { position: relative; font-size: 14px; font-weight: 700; }
.lang-menu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  min-width: 44px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--body);
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover { color: var(--acc-deep); }
.lang-menu[open] > summary { color: var(--acc-deep); }
.lang-menu[open] > summary svg { transform: rotate(180deg); }
.lang-menu > summary svg { transition: transform .18s ease; }
.lang-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 170px;
  background: #FFFFFF;
  border-radius: var(--r-sm);
  box-shadow: 0 18px 40px rgba(25, 20, 51, .18);
  padding: 8px;
  list-style: none;
  z-index: 50;
}
.lang-menu li { list-style: none; }
.lang-menu li a, .lang-menu li span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--body);
  /* CJK breaks between any two characters, so a narrow panel would split
     a two-character language name. */
  white-space: nowrap;
}
.lang-menu li a:hover { background: var(--cool); color: var(--acc-deep); }
.lang-menu li span[aria-current="true"] { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  background: var(--acc);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 999px;
  box-shadow: var(--btn-sh);
  border: 0;
  cursor: pointer;
}
.btn:hover { background: var(--acc-deep); color: #FFFFFF; }
.btn--sm { font-size: 14px; padding: 11px 22px; }
.btn--ghost {
  background: transparent;
  color: var(--acc-deep);
  border: 2px solid var(--acc);
  box-shadow: none;
  padding: 12px 22px;
}
.btn--ghost:hover { background: var(--acc); color: #FFFFFF; }
/* On the violet closing panel and the price card, amber is the button. */
.band--close .btn, .price-card .btn {
  background: var(--amber);
  color: var(--ink);
  box-shadow: none;
}
.band--close .btn:hover, .price-card .btn:hover { background: #FFD75F; color: var(--ink); }

/* Apple's official badge artwork. Never a hand-drawn imitation: the
   guidelines require the supplied asset, and the engine swaps in the
   per-locale file. The white twin was dropped with the light-only
   redesign: display:none does not stop a browser fetching it, so it
   was ~9KB downloaded and never shown on all 85 pages. */
.store-badge { display: inline-block; }

/* --------------------------------------------------------- pieces */

/* Small label above a heading. Violet, and on dark panels amber. */
.eyebrow {
  font-size: 14px;
  font-weight: 700;
  color: var(--acc-deep);
  margin: 0 0 10px;
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow--sm { font-size: 13px; margin-bottom: 8px; }
.eyebrow--warm { color: var(--acc-deep); }

.page-title {
  font-size: clamp(34px, 4.8vw, 62px);
  line-height: 1.06;
  margin: 0 0 18px;
}

.h2, .h2--sec, .h2--flush {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  max-width: 24ch;
  margin: 0;
}
.h2--flush + p, .h2--sec + p { margin-top: 28px; }

.body-copy {
  font-size: 17px;
  line-height: 1.62;
  color: var(--body);
  max-width: 62ch;
}
/* Captions. Centred under what they caption, never a 34em stub at the
   left of a full-width block. */
.body-copy--fine {
  margin: 26px auto 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mut);
  text-align: center;
}

/* The plain card. Lilac on white, white on lilac, cream where the
   child's side is being described. */
.card {
  background: var(--cool);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
  min-width: 0;
}
.band--cool .card, .band--warm .card { background: #FFFFFF; }
.card h3 { font-size: 19px; margin: 0 0 8px; }
.card p { font-size: 15px; line-height: 1.6; color: var(--body); }

.feat-card {
  background: var(--cool);
  border-radius: var(--r-md);
  padding: clamp(18px, 2vw, 24px);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.feat-card h3 { font-size: 18px; margin: 0 0 8px; }
/* Reserve the label and heading blocks so body text sits on one baseline across
   a row. Measured cause at 1024 was the label wrapping to 2 lines, not the
   heading, so both need a reserved block. */
.grid > .card > .stat__label,
.grid--feat > .feat-card > .stat__label { min-height: calc(13px * 1.6 * 2); margin-bottom: 8px; }
.grid--feat > .feat-card > h3,
.grid--feat > .feat-card > .num--tpl { min-height: calc(18px * 1.1 * 2 + 8px); }
.grid > .card > h3,
.grid--qa > .qa > h3,
.grid--qa > .qa > h2 { min-height: calc(1.2em * 2); }
.feat-card > p { font-size: 14px; line-height: 1.6; color: var(--body); }
/* Every second card is cream, so a grid of six reads as a pattern
   rather than a block. */
.grid--feat > .feat-card:nth-child(2n) { background: var(--warm); }

/* The source sits on the card's bottom edge, so citations across a row
   line up. .feat-card > p is (0,2,1) and beats .feat-card .cite-line,
   so this selector has to carry the element too. */
.feat-card > p.cite-line, .card > p.cite-line, .cite-line {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.5;
  color: var(--mut);
}
.cite-line cite { font-style: normal; }

/* Reassurance pills. Mint, and they say what the app does not do. */
.chip, .no-list li {
  display: inline-block;
  background: var(--mint);
  color: var(--mint-fg);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}
.chip { display: inline-flex; align-items: center; gap: 8px; }
.chip svg { flex: none; }
.no-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }

/* On the price panel the same idea is a white stack, not mint pills. */
.policy__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.policy__list li {
  background: #FFFFFF;
  color: var(--ink);
  border-radius: 999px;
  padding: 13px 20px;
  font-size: 16px;
  font-weight: 700;
}

/* --------------------------------------------------------- hero */

.band--hero > .wrap {
  background: linear-gradient(180deg, var(--cool) 0%, var(--page) 100%);
  border-radius: var(--r-lg);
}

/* In the hero the eyebrow is an amber lozenge rather than violet text:
   it names the platforms, which is a fact, not a section label. */
.band--hero .eyebrow {
  display: inline-block;
  background: var(--amber);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 17px;
  font-size: 13px;
  margin-bottom: 18px;
}

.hero-title { font-size: clamp(34px, 4.8vw, 62px); line-height: 1.06; margin: 0 0 18px; }
.hero-lede, .hero__lede {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.62;
  color: var(--body);
  max-width: 52ch;
  margin: 0 0 24px;
}
.hero__lede--policy { max-width: 60ch; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.cta-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mut);
  max-width: 26ch;
}

/* --------------------------------------------------------- split */

.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.split__copy { flex: 1 1 430px; min-width: 0; }
.split__copy--narrow { flex: 1 1 380px; }
.split__media { flex: 1 1 330px; min-width: 0; }
.split__media--md { flex: 1 1 300px; }
.split__media--wide { flex: 1 1 380px; }
/* The hero pair. The photograph carries the column on its own and the phone
   sits over its lower right corner, so the picture gets the whole width
   instead of two thirds of it. */
/* No stretch and no inner flex: the photograph is the only element in flow,
   so the column is exactly the picture's height and the phone's percentage
   offsets are measured against the photo rather than against the row. */
.split__media--hero {
  flex: 1 1 520px;
  position: relative;
  min-width: 0;
}

/* --------------------------------------------------------- grids */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
/* 280 rather than 250: six cards must divide into whole rows at every
   width, and 250 gave four columns with two orphans. */
.grid--feat { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.grid--steps, .grid--loop { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid--qa { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.grid--shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
/* 380 plus start alignment: at 300 a third empty track appeared and the
   short card stretched to the tall one, leaving 446px of dead space. */
.grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; gap: clamp(16px, 2vw, 24px); }

/* --------------------------------------------------------- stats */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.stat { min-width: 0; }
.stat__num, .stat .stat__num {
  font-family: var(--display);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;
  color: var(--amber);
}
.stat__label {
  font-size: 13px;
  font-weight: 700;
  margin: 6px 0 0;
  color: var(--on-deep-str);
}

/* The same idea on a light panel: three lozenges, violet numerals. */
.mini-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.mini {
  flex: 1 1 110px;
  min-width: 0;
  background: var(--cool);
  border-radius: 999px;
  padding: 16px 22px;
}
.band--cool .mini, .band--warm .mini { background: #FFFFFF; }
.mini__num {
  font-family: var(--display);
  font-size: 32px;
  line-height: 1;
  color: var(--acc-deep);
}
.mini__num--sm { font-size: 26px; }
.mini p, .mini__label { font-size: 13px; font-weight: 700; color: var(--body); margin: 4px 0 0; }

.num--tpl { font-family: var(--display); font-size: 34px; line-height: 1; margin-bottom: 6px; }

/* --------------------------------------------------------- steps */

/* .step is used on its own (support, how-it-works) and .loop-card alongside
   .card (home), so both carry the card's own ground rule rather than a flat
   white: white on a white band is an invisible card. */
.step, .loop-card {
  background: var(--cool);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
  min-width: 0;
  list-style: none;
}
.band--cool .step, .band--cool .loop-card,
.band--warm .step, .band--warm .loop-card { background: #FFFFFF; }
.step__num {
  font-family: var(--display);
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--acc);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
}
/* Alternating, so a row of four has a rhythm rather than four identical discs. */
.grid--steps > .step:nth-child(2n) .step__num,
.grid--loop > .loop-card:nth-child(2n) .step__num {
  background: var(--amber);
  color: var(--ink);
}
/* On how-it-works each step is its own section, so nth-child cannot alternate
   across them and the even ones carry the modifier in the markup instead. */
.step__num--amber { background: var(--amber); color: var(--ink); }

/* The setup steps on co-parents are list items inside a card, so they need
   the list reset the .step rule alone does not give them. */
.setup-steps { list-style: none; margin-top: 18px; }
.setup-steps .step { background: #FFFFFF; }
.band--cool .setup-steps .step { background: var(--cool); }
.step__label, .step h3, .loop-card h3 { font-size: 19px; margin: 0 0 8px; }
.step p, .loop-card p { font-size: 15px; line-height: 1.6; color: var(--body); }

/* --------------------------------------------------------- questions */

.qa {
  background: var(--cool);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
  min-width: 0;
}
.band--cool .qa { background: #FFFFFF; }
.qa h2, .qa h3 { font-size: 18px; margin: 0 0 8px; max-width: none; }
.qa p { font-size: 15px; line-height: 1.6; color: var(--body); }
.qa p + p { margin-top: 10px; }
/* Blog index: the whole card is the link, not just the heading. */
.qa--link { display: block; text-decoration: none; color: inherit; transition: transform .18s ease; }
.qa--link:hover { transform: translateY(-3px); color: inherit; }
.qa--link:hover h2, .qa--link:hover h3 { color: var(--acc-deep); }
.post-meta { font-size: 13px; color: var(--mut); margin-top: 10px; }

/* --------------------------------------------------------- policy */

/* Explainer cards carry three or four real paragraphs, so at three columns
   they became tall walls of narrow prose, and flex stretched them all to the
   tallest. A grid at 420px gives two columns, which divides the eight cards
   on co-parents with no orphan, and start alignment lets each card be its
   own height. */
.policy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: start;
  gap: clamp(16px, 2vw, 24px);
}
.policy__card {
  background: var(--cool);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.4vw, 30px);
  min-width: 0;
}
/* Two columns of a 1240px band run past 70 characters without this. */
.policy__card p { max-width: 64ch; }
.policy__card p + p { margin-top: 12px; }
.band--cool .policy__card { background: #FFFFFF; }
.policy__card h2, .policy__card h3 { font-size: 21px; margin: 0 0 10px; }
.policy__card p, .policy__card li { font-size: 15px; line-height: 1.6; color: var(--body); }

/* --------------------------------------------------------- price */

.price-card, .two-card {
  background: var(--acc);
  color: #FFFFFF;
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.8vw, 40px);
  min-width: 0;
}
.price-card h2, .price-card h3 { color: #FFFFFF; }
.price-card p { color: #F0EDFF; }
.price-card .eyebrow { color: var(--on-deep-str); }
.price {
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1;
  margin-bottom: 6px;
  color: #FFFFFF;
}
/* The second card in the pricing row is the privacy card, and it is light. */
.two-card { background: var(--cool); color: var(--ink); }
.two-card h2, .two-card h3 { color: var(--ink); }
.two-card p { color: var(--body); }

/* --------------------------------------------------------- media */

.shot {
  border-radius: var(--r-sm);
  box-shadow: var(--shot-sh);
  width: 100%;
}
.shot--md { border-radius: 18px; }
.shot--sm { border-radius: 16px; box-shadow: none; }
.shot--ledger, .shot__fade { border-radius: var(--r-sm); }
.hero-photo, .split__media--hero .hero-photo {
  width: 100%;
  min-width: 0;
  border-radius: var(--r-lg);
  box-shadow: none;
}

/* The phone overlaps the photograph's lower right corner. Percentages, not
   pixels, so it keeps the same relationship to the picture at every width.
   It stays inside the photo's right edge, because the panel does not clip
   and a phone hanging into the gutter reads as a mistake on a narrow screen. */
.split__media--hero .hero-shot {
  position: absolute;
  right: 2%;
  bottom: -5%;
  width: 27%;
  min-width: 0;
  border-radius: 16px;
  box-shadow: var(--shot-sh);
  /* Resting tilt, so the phone reads as laid over the photograph rather than
     pasted on. Also the fallback if the animation never runs. */
  transform: rotate(4deg);
  animation: hero-fly-in .85s cubic-bezier(.22, 1, .36, 1) .2s both;
}
/* The animation fills both ways, so its last frame is what holds afterwards:
   the tilt has to live in the keyframe or the phone snaps upright at the end. */
@keyframes hero-fly-in {
  from { opacity: 0; transform: translateX(74px) scale(.96) rotate(9deg); }
  to   { opacity: 1; transform: rotate(4deg); }
}
/* Below the split's wrap point the column is narrow and the overlap stops
   working, so the phone returns to the flow beside the photograph. */
@media (max-width: 1100px) {
  .split__media--hero { display: flex; align-items: flex-end; gap: 12px; }
  .split__media--hero .hero-photo { width: 68%; }
  /* Back in the flow the two sit edge to edge, so a tilt would lean the phone
     into the photograph. Cancelling the animation is what actually clears the
     rotation: a filled animation outranks a plain transform declaration. */
  .split__media--hero .hero-shot {
    position: static;
    width: 32%;
    bottom: auto;
    right: auto;
    animation: none;
    transform: none;
  }
}
.clip, .clip__inner { border-radius: var(--r-sm); overflow: hidden; }
/* Four screenshots, and 4 and 2 are the only counts that divide four with
   no orphan. auto-fit would give three columns at some widths and strand
   one, which is exactly the fault the 1.6 design pass went looking for. */
.clip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 14px);
  margin-top: clamp(18px, 2.2vw, 26px);
}
@media (max-width: 760px) {
  .clip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Apple TV, 16:9 */
.tv { border-radius: var(--r-sm); width: 100%; }
/* The Apple Intelligence glow is the one sanctioned exception to the
   one-accent rule, because it is the system's own colour, not ours. */
.ai-frame {
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #FF6B9D 0%, #C86DD7 35%, #5B3DF5 70%, #38BDF8 100%);
  padding: 4px;
  display: inline-block;
  max-width: 240px;
}
.ai-frame img { border-radius: 17px; }
.mascot { flex: 0 1 230px; width: 100%; min-width: 0; margin-left: auto; box-shadow: none; }

figure { margin: 0; }
figcaption { font-size: 13px; line-height: 1.55; color: var(--mut); margin-top: 12px; }

/* --------------------------------------------------------- closing */

.close-wrap, .close-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.cta, .cta__body { flex: 1 1 360px; min-width: 0; }
.band--close .cta__body p { max-width: 46ch; }

/* --------------------------------------------------------- footer */

.site-foot { padding: 0 var(--pad-i) clamp(24px, 3vw, 44px); }
.site-foot > .wrap {
  background: var(--deep);
  color: var(--on-deep);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 44px);
  max-width: var(--maxw);
}
.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  padding-bottom: 22px;
}
.site-foot__brand {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 18px;
  color: #FFFFFF;
  margin: 0 0 12px;
}
.site-foot__brand img { width: 28px; height: 28px; border-radius: 999px; }
.site-foot nav {
  flex: 1 1 260px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 10px 20px;
  font-size: 14px;
  font-weight: 600;
}
.site-foot nav a {
  color: var(--on-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-foot nav a:hover { color: #FFFFFF; }
.site-foot__note {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 46ch;
  color: var(--on-deep);
  margin: 0;
}

.lang-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 0;
  font-size: 14px;
  font-weight: 600;
  border-top: 1px solid var(--rule-deep);
}
.lang-nav a {
  color: var(--on-deep);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.lang-nav a:hover { color: #FFFFFF; }
.lang-nav span[aria-current="true"] { color: #FFFFFF; white-space: nowrap; }

.colophon { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--on-deep); }
.colophon a { color: var(--amber); }

/* Email address assembled by script, never written into served HTML. */
.eml-x { display: none; }

/* --------------------------------------------------------- consent */

/* Shown only when no choice is stored; analytics.js unhides it. Fixed to the
   bottom rather than a full-screen modal: the visitor can read the page and
   decide, which is what consent is supposed to mean. */
.consent {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(12px, 2vw, 20px);
  z-index: 60;
  width: min(760px, calc(100% - 24px));
  background: var(--deep);
  color: var(--on-deep);
  border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(25, 20, 51, .34);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(16px, 2vw, 24px);
}
.consent__text {
  flex: 1 1 360px;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-deep);
}
.consent__text a { color: var(--amber); }
.consent__actions {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  gap: 10px;
}
/* The ghost button's border is violet, which disappears on the dark panel. */
.consent .btn--ghost {
  border-color: var(--on-deep-mut);
  color: #FFFFFF;
}
.consent .btn--ghost:hover { background: #FFFFFF; color: var(--ink); }

@media (max-width: 560px) {
  .consent__actions { flex: 1 1 100%; }
  .consent .btn { flex: 1 1 auto; text-align: center; }
}

/* --------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}

/* --------------------------------------------------------- print */

@media print {
  .nav, .site-foot, .skip, .band--close { display: none; }
  body { color: #000; }
  .band--cool > .wrap, .band--warm > .wrap, .band--deep > .wrap { background: none; padding: 0; }
}