/* ===========================================================================
   SITE D — "Headspace"
   Layout language borrowed from headspace.com: colour-blocked bands, curved
   section transitions, organic blob-masked media, big rounded cards, a
   friendly card grid, an accordion FAQ.
   Palette, type and spacing are 100% from brand-tokens.css. The "colour
   blocks" are the token layering scale (base / surface / raised) rather
   than hues — calm cream by default, with `.dark-zone` islands (nav, hero,
   pricing, footer, player, screen mocks) for the premium/decisive beats.
   Loads AFTER brand-tokens.css. No shadows, no blur, no gradient but .breathe.
   =========================================================================== */

:root {
  /* Headspace-scale roundness, kept on the 8px grid. */
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-3xl: 48px;
}

/* ---------------------------------------------------------------- utility */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg-raised); color: var(--text-primary);
  padding: var(--space-md) var(--space-lg); border-radius: 0 0 var(--radius-md) 0;
}
.skip:focus { left: 0; }

.lede {
  font-size: 19px; color: var(--text-secondary);
  max-width: var(--web-measure); margin-top: var(--space-base);
}

.btn-lg { min-height: 56px; padding: 16px 32px; font-size: 17px; }

/* ------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-base);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--border); }
.nav-inner {
  display: flex; align-items: center; gap: var(--space-lg);
  min-height: 72px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-md);
  color: var(--text-primary); text-decoration: none;
  font-family: var(--font-headline); font-size: 20px; line-height: 1;
}
.wordmark img { border-radius: var(--radius-sm); }
.nav-links { display: flex; gap: var(--space-lg); margin-left: auto; }
.nav-links a {
  color: var(--text-secondary); text-decoration: none; font-size: 15px;
  padding: var(--space-sm) 0; transition: color .2s ease;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-cta { flex: none; }

@media (max-width: 900px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }
@media (max-width: 560px) {
  .wordmark span { display: none; }
  .nav-cta { font-size: 14px; padding: 12px 20px; }
}

/* ------------------------------------------------------------------ bands
   Headspace stacks flat colour blocks and curves the joins between them. */
.band { position: relative; padding-block: var(--web-section-gap); }
.band-surface { background: var(--bg-surface); }
.band-raised  { background: var(--bg-raised); }

.curve { position: absolute; left: 0; width: 100%; height: 90px; display: block; }
.curve-down { bottom: -1px; }
.curve-up   { top: -1px; }
.band > .curve-up + .container { position: relative; }

/* A curve paints the colour of the section on the OTHER side of the join.
   Hardcoding that hex in the markup drifted out of sync the moment a band
   changed colour, so the colour is a class and the path just inherits it. */
.curve path { fill: currentColor; }
.curve-base    { color: var(--fixed-base); }
.curve-surface { color: var(--fixed-surface); }
.curve-raised  { color: var(--fixed-raised); }
.curve-navy    { color: var(--fixed-navy); }

.organic { position: relative; overflow: hidden; margin: 0; }
.organic-1 { border-radius: 56% 44% 50% 50% / 48% 52% 48% 52%; }
.organic-2 { border-radius: 44% 56% 58% 42% / 56% 44% 56% 44%; }
.organic img { width: 100%; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 72px) calc(var(--web-section-gap) + 40px); }
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 80px); align-items: center;
  min-height: min(62vh, 600px);
}
.hero-copy .label { margin-bottom: var(--space-base); }
/* The hero column is ~600px. At the shared --web-display max (60px) every
   hand-set line was wrapping again underneath itself, so the headline came
   out six ragged lines instead of four. Size it to the column it lives in. */
.hero h1 { margin-bottom: var(--space-lg); font-size: clamp(34px, 4.2vw, 48px); }
/* Hand-set breaks only where the column is wide enough to honour them;
   below that, let it wrap naturally. */
@media (min-width: 861px) { .hero h1 span { display: block; } }

.price-line {
  font-size: 19px; line-height: 1.6; color: var(--text-primary);
  max-width: 34ch; margin-bottom: var(--space-xl);
  padding-left: var(--space-base);
  border-left: 2px solid var(--mauve-primary);
}
.price-line strong { font-weight: 500; }

.hero-sub {
  margin-top: var(--space-lg); color: var(--text-secondary);
  max-width: 46ch;
}

.hero-media { position: relative; }
.organic-caption {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-base);
  font-size: var(--web-small); color: var(--text-muted);
}
.dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--mauve-primary); flex: none;
}

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-media { order: -1; max-width: 340px; }
  .blob-a { width: 320px; height: 320px; top: -100px; right: -120px; }
  .blob-b { display: none; }
}

/* -------------------------------------------------------------- listen */
.listen-head { max-width: 700px; margin-bottom: var(--space-2xl); }
.listen-head .label { margin-bottom: var(--space-base); }
.listen-head h2 { margin-bottom: var(--space-base); }

.player {
  display: grid; grid-template-columns: 260px 1fr;
  gap: clamp(24px, 4vw, 48px); align-items: center;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: clamp(24px, 3vw, 40px);
}
.player-art { margin: 0; border-radius: var(--radius-2xl); overflow: hidden; }
.player-body .label { margin-bottom: var(--space-md); }
.player-body h3 { font-size: 32px; margin-bottom: var(--space-xs); }
.player-note { color: var(--text-secondary); margin-bottom: var(--space-lg); }

.player-controls { display: flex; align-items: center; gap: var(--space-lg); }
.play {
  flex: none; width: 72px; height: 72px; border: none; cursor: pointer;
  border-radius: var(--radius-full);
  background: var(--blue-primary); color: #FFFFFF;
  display: grid; place-items: center;
  transition: background-color .2s ease;
}
.play:hover { background: var(--blue-light); }
.play:focus-visible { outline: 2px solid var(--link-color); outline-offset: 3px; }
.play svg { width: 30px; height: 30px; fill: currentColor; }
.play .ico-pause { display: none; }
.play.is-playing .ico-play { display: none; }
.play.is-playing .ico-pause { display: block; }

.player-track { flex: 1 1 auto; min-width: 0; }
.scrub {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: var(--radius-pill);
  background: var(--bg-overlay); cursor: pointer;
}
.scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: var(--radius-full);
  background: var(--mauve-primary); border: none; cursor: pointer;
}
.scrub::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: var(--radius-full);
  background: var(--mauve-primary); border: none; cursor: pointer;
}
.scrub:focus-visible { outline: 2px solid var(--link-color); outline-offset: 4px; }

.player-time {
  display: flex; justify-content: space-between;
  margin-top: var(--space-sm);
  font-family: var(--font-headline); font-size: var(--web-small);
  color: var(--text-muted);
}
.player-hint { margin-top: var(--space-base); font-size: var(--web-small); color: var(--text-muted); }

@media (max-width: 760px) {
  .player { grid-template-columns: 1fr; border-radius: var(--radius-2xl); }
  .player-art { max-width: 240px; }
  .play { width: 64px; height: 64px; }
}

/* ---------------------------------------------------------------- feature */
.feature {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 440px;
  gap: clamp(32px, 6vw, 88px); align-items: center;
}
.feature-reverse .feature-copy { order: 2; }
.feature-reverse .feature-media { order: 1; }

.feature-copy .label { margin-bottom: var(--space-base); }
.feature-copy h2 { margin-bottom: var(--space-lg); }
.feature-copy p { color: var(--text-secondary); max-width: 52ch; margin-bottom: var(--space-base); }
.feature-meta { color: var(--text-muted) !important; font-size: var(--web-small); }
.feature-copy .btn { margin-top: var(--space-base); }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature-reverse .feature-copy,
  .feature-reverse .feature-media { order: 0; }
  .feature-media { max-width: 420px; }
}

/* ----------------------------------------------- CSS UI mocks (no fakes)
   These represent the actual in-app screen, so they carry .dark-zone in
   the HTML regardless of which (calm, light) band they sit inside. */
.mock {
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: var(--space-lg);
}

.mock-label {
  font-size: var(--web-label); font-weight: 500; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--blue-mist); line-height: 1;
  margin-bottom: var(--space-md);
}
.mock-note {
  margin-top: var(--space-base); font-size: var(--web-small);
  color: var(--text-muted);
}

/* streak */
.streak-week { display: flex; gap: var(--space-sm); list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.d {
  flex: 1 1 0; aspect-ratio: 1; border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-size: var(--web-small); color: var(--text-muted);
  background: var(--bg-overlay);
}
.d.ok   { background: rgba(91, 141, 181, 0.55); color: var(--text-primary); }
.d.hard { background: rgba(158, 138, 196, 0.55); color: var(--text-primary); }
.d.now  { background: transparent; border: 1px dashed var(--border-strong); }

.mock-row { display: flex; align-items: center; gap: var(--space-base); }
.mock-num { font-family: var(--font-headline); font-size: 56px; line-height: 1; }
.mock-cap { font-size: var(--web-small); line-height: 1.4; color: var(--text-secondary); }
.mock-cap span { color: var(--mauve-light); }

/* log */
.log-time { font-family: var(--font-headline); font-size: 40px; line-height: 1; margin-bottom: var(--space-base); }
.log-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.chip {
  font-size: var(--web-small); padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-overlay); color: var(--text-muted);
}
.chip.on { background: rgba(91, 141, 181, 0.55); color: var(--text-primary); }
.log-strength { display: flex; gap: var(--space-sm); list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.s { width: 40px; height: 8px; border-radius: var(--radius-pill); background: var(--bg-overlay); }
.s.on { background: var(--mauve-primary); }
.log-out { display: flex; align-items: center; gap: var(--space-md); color: var(--text-primary); }
.tick {
  width: 24px; height: 24px; flex: none; border-radius: var(--radius-full);
  background: var(--success); position: relative;
}
.tick::after {
  content: ""; position: absolute; left: 8px; top: 6px;
  width: 6px; height: 11px; border: solid #FFFFFF;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* tones — the night/morning sound bed. The markup existed with no styles,
   so this mock was rendering as an empty dark box with two stray labels. */
.mock-tones .mock-label + .tone { margin-bottom: var(--space-lg); }
/* Drawn as a stroked SVG rather than tiled radial gradients — the gradient
   arcs left gaps and read as scattered ticks instead of one wave. Colours
   are literal here because a data URI can't see a custom property:
   #7BADC9 is --blue-light, #B0A0D4 is --mauve-light. */
.tone {
  height: 40px; margin-top: var(--space-sm);
  background-repeat: repeat-x; background-position: left center;
  opacity: .9;
}
.tone-low {
  /* night: long wavelength, shallow — the slow pulse */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q 30 4 60 20 T 120 20' fill='none' stroke='%237BADC9' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 120px 40px;
}
.tone-high {
  /* morning: short wavelength, taller — where attention sharpens */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q 12 2 24 20 T 48 20' fill='none' stroke='%23B0A0D4' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 48px 40px;
}

/* lessons */
.lesson-list { list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.lesson {
  display: flex; align-items: center; gap: var(--space-base);
  padding: var(--space-md) 0; border-bottom: 1px solid var(--border);
}
.lesson:last-child { border-bottom: none; }
.lesson .n { font-family: var(--font-headline); font-size: 24px; color: var(--text-muted); }
.lesson .t { font-size: var(--web-small); line-height: 1.4; color: var(--text-secondary); }
.lesson .t em { display: block; font-style: normal; color: var(--text-muted); }
.lesson.done .n { color: var(--blue-light); }
.lesson.done .t { color: var(--text-primary); }
.mock-module {
  border: 1px solid var(--border-mauve); border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-base);
  color: var(--mauve-light); font-size: var(--web-small);
}
.mock-module span { color: var(--text-muted); }

/* --------------------------------------------------- what it's built on
   Another class that shipped with markup and no styles: it was rendering
   as a default bulleted list at the full 1100px container width, twice the
   measure of the paragraph above it, and the <b> names weren't bold because
   the reset sets font-weight:400 on everything. */
.builton {
  list-style: none; padding: 0;
  margin: var(--space-xl) 0 var(--space-lg);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-2xl);
}
@media (max-width: 800px) { .builton { grid-template-columns: 1fr; } }

.builton li {
  position: relative; padding-left: var(--space-lg);
  font-size: 15px; line-height: 1.6; color: var(--text-secondary);
  max-width: 46ch;
}
.builton li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--mauve-primary);
}
.builton b { font-weight: 500; color: var(--text-primary); }

/* ------------------------------------------------------------- card grid */
.grid-head { max-width: 700px; margin-bottom: var(--space-2xl); }
.grid-head .label { margin-bottom: var(--space-base); }

/* Four cards in an auto-fit 3-up grid left an orphan on the second row.
   Fixed 4 / 2 / 1 keeps every row full at every width. */
.cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 1040px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards { grid-template-columns: 1fr; } }

.card.soft {
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-2xl); padding: var(--space-xl);
}
.card.soft h3 { margin-bottom: var(--space-md); }
.card.soft p { color: var(--text-secondary); font-size: 15px; }

.glyph {
  display: block; width: 48px; height: 48px; margin-bottom: var(--space-lg);
  border-radius: var(--radius-icon); position: relative;
}
.glyph-check { background: rgba(91, 141, 181, 0.30); }
.glyph-badge { background: rgba(158, 138, 196, 0.30); }
.glyph-lock  { background: rgba(90, 158, 107, 0.28); }
.glyph-road  { background: rgba(123, 173, 201, 0.26); }
.glyph::after {
  content: ""; position: absolute; inset: 14px;
  border: 2px solid var(--text-primary); border-radius: var(--radius-xs);
  opacity: .75;
}
.glyph-check::after { inset: 15px 13px; border-width: 0 2px 2px 0; border-radius: 0; transform: rotate(45deg) translate(-2px, -3px); height: 16px; width: 9px; }
.glyph-badge::after { border-radius: var(--radius-full); }
.glyph-lock::after  { border-radius: var(--radius-xs); inset: 16px 15px 12px; }
.glyph-road::after  { border-width: 0 0 2px 0; border-radius: 0; inset: auto 12px 18px; }

/* ---------------------------------------------------------------- plans */
/* align-items:start left three cards of three different heights with a
   ragged bottom edge; stretch + a column layout squares them off and lets
   every plan's button sit on the same line. */
.plans {
  list-style: none; padding: 0; margin: 0 0 var(--space-2xl);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg); align-items: stretch;
}
.plan {
  display: flex; flex-direction: column;
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: var(--space-xl);
}
.plan .plan-desc { flex: 1 1 auto; }
.plan-lead { border-color: var(--border-mauve); background: var(--bg-raised); }
.plan .label { margin-bottom: var(--space-lg); }
.plan-price {
  font-family: var(--font-headline); font-size: var(--web-number);
  line-height: 1; margin-bottom: var(--space-sm);
}
.plan-price span { font-family: var(--font-body); font-size: 17px; color: var(--text-muted); }
.plan-permonth { color: var(--mauve-light); font-size: var(--web-small); margin-bottom: var(--space-base); }
.plan-desc { color: var(--text-secondary); font-size: 15px; margin-bottom: var(--space-lg); }
.plan .btn { width: 100%; }

.compare {
  font-family: var(--font-headline); font-size: var(--web-h3);
  line-height: 1.5; max-width: 48ch; margin-bottom: var(--space-base);
}
.compare strong { font-weight: 400; color: var(--mauve-light); }
.compare-note { color: var(--text-secondary); font-size: 15px; max-width: var(--web-measure); }

/* --------------------------------------------------------------- reviews
   Real reviews, first name + initial, verbatim. The lead one gets the
   centred treatment; the rest sit in a card row underneath. Body copy is
   left-aligned inside the cards — a centred five-line paragraph is hard
   work to read, and these are long. */
.reviews .label { margin-bottom: var(--space-xl); text-align: center; }
.reviews-note {
  margin-top: var(--space-xl); font-size: var(--web-small);
  color: var(--text-muted); text-align: center;
}

.review-list { list-style: none; padding: 0; margin: 0; }
.review blockquote { margin: 0; }
.review-by { margin-top: var(--space-base); }
.review-by cite {
  font-style: normal; font-weight: 500; color: var(--text-primary);
  font-size: var(--web-small);
}

/* Lead review — the centred, quote-marked one. */
.review-lead {
  max-width: 680px; margin: 0 auto var(--space-2xl); text-align: center;
}
.review-mark {
  width: 30px; height: 30px; margin: 0 auto var(--space-base);
  fill: var(--mauve-primary); opacity: .65;
}
.review-lead blockquote p {
  font-size: 21px; line-height: 1.6; color: var(--text-primary);
}
.review-lead .review-by {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Supporting reviews — an even row of cards. */
.review-rest {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg); align-items: stretch;
}
.review-rest .review {
  display: flex; flex-direction: column;
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: var(--space-xl);
}
.review-rest .review blockquote { display: flex; flex-direction: column; height: 100%; }
.review-rest .review blockquote p {
  font-size: 15px; line-height: 1.65; color: var(--text-secondary); flex: 1 1 auto;
}
.review-rest .review-by {
  display: flex; align-items: center; gap: var(--space-md);
  padding-top: var(--space-base); border-top: 1px solid var(--border);
}

/* Initial badge instead of a photo. There are no photos of these people,
   and inventing stock faces for real quotes would be a lie. */
.review-face {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-full);
  background: var(--bg-overlay); color: var(--label-color);
  display: grid; place-items: center;
  font-family: var(--font-headline); font-weight: 500; font-size: 15px;
}
.review-lead .review-face { width: 52px; height: 52px; font-size: 18px; }

/* ---------------------------------------------- elastic gallery (swipe)
   The active panel opens to ~2.4 rather than 4: the covers are square, and
   at flex-4 on a 1200px container the crop threw away most of the artwork.
   Closed panels carry a vertical title so they read as the other choices
   rather than as slivers of image. */
.elastic {
  display: flex; gap: var(--space-sm);
  height: 420px; border-radius: var(--radius-2xl);
}
.elastic-panel {
  position: relative; flex: 1; min-width: 0; cursor: pointer; overflow: hidden;
  border-radius: var(--radius-lg); outline-offset: -3px;
  transition: flex 0.6s cubic-bezier(.25, 1, .5, 1);
}
.elastic-panel.is-active { flex: 2.4; }
.elastic-panel:focus-visible { outline: 2px solid var(--link-color); }
.elastic-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(.62) saturate(.85);
  transition: filter .5s ease, transform 1.2s ease;
}
.elastic-panel.is-active img { filter: brightness(1); transform: scale(1.03); }

/* Legibility scrim. The no-gradients rule is about decoration; white text
   on cover art needs this or the caption disappears into the bright parts
   of the image, which is exactly what it was doing. */
.elastic-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(13, 27, 42, 0.92) 0%, rgba(13, 27, 42, 0.55) 32%, rgba(13, 27, 42, 0) 62%);
  opacity: 0; transition: opacity .4s ease;
}
.elastic-panel.is-active::after { opacity: 1; }

.elastic-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: var(--space-lg); color: #F0EDE8;
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
}
.elastic-panel.is-active .elastic-copy { opacity: 1; transform: translateY(0); transition-delay: .12s; }
.elastic-tag { font-family: var(--font-headline); font-weight: 500; font-size: 26px; margin-bottom: 4px; }
.elastic-sub { font-size: var(--web-small); line-height: 1.5; max-width: 34ch; color: #D6E4EC; }

/* Closed panel: the title, turned on its side, near the bottom. */
.elastic-shut {
  position: absolute; left: 50%; bottom: var(--space-lg); z-index: 1;
  transform: translateX(-50%);
  writing-mode: vertical-rl; white-space: nowrap;
  font-family: var(--font-headline); font-weight: 500; font-size: 17px;
  letter-spacing: 0.02em; color: #F0EDE8;
  opacity: 1; transition: opacity .3s ease;
}
.elastic-panel.is-active .elastic-shut { opacity: 0; }

.elastic-note { margin-top: var(--space-lg); font-size: var(--web-small); color: var(--text-muted); }

@media (max-width: 700px) {
  .elastic { flex-direction: column; height: auto; }
  .elastic-panel { flex: none; height: 68px; transition: height .6s cubic-bezier(.25,1,.5,1); }
  .elastic-panel.is-active { flex: none; height: 300px; }
  .elastic-tag { font-size: 22px; }
  .elastic-shut {
    writing-mode: horizontal-tb; left: var(--space-lg); bottom: auto;
    top: 50%; transform: translateY(-50%);
  }
}

/* ------------------------------------------------------------------- faq */
.faq-title { font-family: var(--font-headline); font-size: var(--web-h2); line-height: 1.15; }
.faq { max-width: 820px; }
.qa { border-bottom: 1px solid var(--border); }
.qa h2 { font-size: inherit; line-height: inherit; }
.qa button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-base); text-align: left; cursor: pointer;
  background: none; border: none; color: var(--text-primary);
  font-family: var(--font-headline); font-size: 21px; line-height: 1.4;
  padding: var(--space-lg) 0; min-height: 44px;
}
.qa button:hover { color: var(--link-color); }
.qa button:focus-visible { outline: 2px solid var(--link-color); outline-offset: 2px; }

.pm { position: relative; flex: none; width: 20px; height: 20px; }
.pm::before, .pm::after {
  content: ""; position: absolute; background: var(--link-color);
  left: 50%; top: 50%; border-radius: var(--radius-pill);
}
.pm::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.pm::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); transition: transform .2s ease; }
.qa button[aria-expanded="true"] .pm::after { transform: translate(-50%, -50%) scaleY(0); }

.a { display: none; padding-bottom: var(--space-lg); }
.a.is-open { display: block; }
.a p { color: var(--text-secondary); max-width: var(--web-measure); }

/* ----------------------------------------------------------------- trust */
.trust {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--border); padding-top: var(--space-2xl);
}
.trust .label { margin-bottom: var(--space-base); }
.disclaimer {
  font-family: var(--font-headline); font-size: var(--web-h3);
  line-height: 1.5; margin-bottom: var(--space-base);
  max-width: var(--web-measure);
}
.disclaimer-sub { color: var(--text-secondary); max-width: var(--web-measure); }

.trust-facts { margin: 0; }
.trust-facts > div {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--space-base);
  padding: var(--space-md) 0; border-bottom: 1px solid var(--border);
}
.trust-facts > div:last-child { border-bottom: none; }
.trust-facts dt { font-size: var(--web-small); color: var(--text-muted); }
.trust-facts dd { margin: 0; font-size: 15px; }

@media (max-width: 800px) { .trust { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- footer */
.footer { position: relative; overflow: hidden; padding-block: var(--web-section-gap); }
.footer-glow {
  position: absolute; inset: 0; z-index: 0; opacity: .35;
}
.footer-inner { position: relative; z-index: 1; text-align: center; }
.footer-inner .label { margin-bottom: var(--space-base); }
.footer-h {
  font-family: var(--font-headline); font-size: var(--web-h2);
  line-height: 1.15; margin-bottom: var(--space-lg);
}
.footer-price {
  font-size: 19px; margin-bottom: var(--space-xl);
  max-width: 44ch; margin-inline: auto;
}
.footer-price strong { font-weight: 500; }

.footer-links {
  list-style: none; padding: 0; margin: var(--space-2xl) 0 var(--space-lg);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg);
}
.footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: var(--text-primary); }
.footer-fine { font-size: var(--web-small); color: var(--text-muted); }

/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer-glow { opacity: .22; }
}

/* ------------------------------------------------- curve clearance
   A .curve-up overlays the first 90px of its band, so bands that carry one
   need that space back or the eyebrow label sits under the curve. */
.band:has(> .curve-up) { padding-top: calc(var(--web-section-gap) + 48px); }
.hero { padding-bottom: calc(var(--web-section-gap) + 48px); }

@media (max-width: 700px) {
  .curve { height: 48px; }
  .band:has(> .curve-up) { padding-top: calc(var(--web-section-gap) + 24px); }
}

/* ---------- App screens strip (Play Store frames) ---------- */
.screens { list-style: none; margin: 0; padding: 0 0 var(--space-base); display: flex; gap: var(--space-lg);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.screens li { flex: 0 0 auto; width: clamp(200px, 22vw, 270px); scroll-snap-align: start; }
.screens img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.screens:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 4px; }