/* index.css — page-specific styles for the landing page, shared by its two
 * language variants (index.html, index-es.html). Extracted from index.html's
 * inline <style> when index-es.html was added, so the variants can't drift on
 * styling — only markup/copy needs mirroring. Tokens, reset, .container, nav,
 * store buttons, footer and the shared responsive rules stay in site.css.
 * Light mode only for now — every colour here resolves through a site.css
 * variable, so the dark pass stays additive. See the SCOPE note in site.css.
 */

  /* ── HERO ──────────────────────────────────────── */
  /* These sections are .container elements; the shorthand keeps the container's 32px gutter
     so their copy lines up with the nav brand and the feature grid (20px on mobile, below). */
  .hero {
    padding: 88px 32px 96px;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px;
    align-items: center;
  }
  .hero-eyebrow {
    color: var(--accent);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  h1.hero-title {
    font-size: clamp(48px, 7vw, 80px);
    font-weight: 800; letter-spacing: -0.035em; line-height: 0.98;
    margin: 16px 0 0; text-wrap: balance;
  }
  h1.hero-title em { font-style: normal; color: var(--accent); }
  .hero-sub {
    margin: 22px 0 0; font-size: 18px; line-height: 1.5; max-width: 540px;
    color: var(--ink);
  }
  .hero-actions { margin-top: 36px; }
  /* Three short facts under the store buttons — a mono rule, not a stat grid. */
  .hero-stats {
    margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline);
    display: flex; flex-wrap: wrap; gap: 10px 28px;
  }
  .hero-stats .fact {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
    color: var(--muted); text-transform: uppercase; white-space: nowrap;
  }
  .hero-stats .fact::before { content: ''; width: 8px; height: 2px; background: var(--accent); flex: none; }

  /* ── HERO TASTING CARDS ────────────────────────────
   * Static reproduction of the TastingCard React component
   * (tasting-card.jsx / hero-cards.jsx) — three fanned cards, two showing the
   * front face and one showing the back. The prototype renders these through
   * React + Babel from a CDN; the production page reproduces the component's
   * *visual output* as plain HTML, so there is no build step and no runtime JS.
   * Geometry, type sizes and spacing are taken 1:1 from the component.
   */
  .hero-cards {
    position: relative; height: 560px;
    display: flex; align-items: center; justify-content: center;
  }
  .card {
    position: absolute;
    width: 260px; height: 478px;
    background: var(--surface); color: var(--ink);
    border-radius: 8px;
    padding: 18px;
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--card-ring);
    display: flex; flex-direction: column;
    overflow: hidden;
    /* The resting pose is composed from custom properties so the breakpoints below only
       re-declare --tx / --rot / --s, and the one `card-fan` keyframe (which starts every card
       stacked at the centre) resolves against each card's own values at every size. */
    transform: translateX(var(--tx, 0px)) translateY(var(--lift, 0px)) rotate(var(--rot, 0deg)) scale(var(--s, 1));
    transition: transform 300ms cubic-bezier(.2,.8,.2,1);
    animation: card-fan 900ms cubic-bezier(.2,.8,.2,1) both;
  }
  .card.left   { --tx: -152px; --rot: -7deg; z-index: 1; }
  .card.center { z-index: 2; animation-delay: 80ms; }
  .card.right  { --tx: 162px;  --rot: 7deg;  z-index: 1; animation-delay: 160ms; }
  /* Brief entrance: the deck rises as one stack and fans out into the resting pose — movement
     only, no fade, so the cards are on screen from the first frame. Runs once per page load;
     site.css's reduced-motion rule collapses it to the final frame. */
  @keyframes card-fan {
    from { transform: translateX(0) translateY(28px) rotate(0deg) scale(var(--s, 1)); }
  }
  @media (hover: hover) {
    .hero-cards:hover .card { --lift: -6px; }
  }

  /* Shared mono voice inside the card and the map block */
  .card .meta-top, .card .label, .card .ratings .row, .card .meta-grid .mrow,
  .card .score, .card .section-lbl, .card .tasted-row span,
  .card .label-grid,
  .map-preview .map-coord, .map-preview .map-scale .lbl,
  .map-preview .map-foot, .map-preview .map-pin-label {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
  }

  .card .meta-top {
    display: flex; justify-content: space-between;
    font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--muted); text-transform: uppercase;
  }
  .card .tick { height: 8px; margin-top: 14px; display: flex; align-items: center; gap: 8px; }
  .card .tick .accent { width: 14px; height: 3px; background: var(--accent); }
  .card .tick .rule  { flex: 1; height: 1px; background: var(--muted); }
  .card .code { font-weight: 800; font-size: 64px; letter-spacing: -0.04em; line-height: 0.9; margin-top: 14px; }
  .card .label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--muted); text-transform: uppercase; margin-top: 8px;
  }
  .card .origin { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-top: 1px; }
  .card .region { font-size: 11px; color: var(--muted); margin-top: 1px; }

  /* Flex-distributed dividers spread breathing room across the card face,
     exactly like the component's <TCDivider> flex spacer. */
  .tc-divider { flex: 1 1 0; min-height: 10px; display: flex; align-items: center; margin: 4px 0; }
  .tc-divider span { display: block; width: 100%; height: 1px; background: var(--muted); }

  .card .ratings { display: flex; flex-direction: column; gap: 4px; }
  .card .ratings .row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--ink); text-transform: uppercase;
  }
  /* <RatingBar> — a hairline track with an accent square at the value
     position. `left` is set inline per row as calc(<pct> - 5px). */
  .rating-bar { position: relative; width: 96px; height: 7px; display: flex; align-items: center; }
  .rating-bar .track { width: 100%; height: 2px; background: var(--ink); opacity: 0.55; }
  .rating-bar .mark  { position: absolute; top: 1px; width: 5px; height: 5px; background: var(--accent); }

  .card .meta-grid { display: flex; flex-direction: column; gap: 3px; }
  .card .meta-grid .mrow {
    display: flex; justify-content: space-between;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .card .meta-grid .mlbl { color: var(--muted); }
  .card .meta-grid .mrow span:last-child { color: var(--ink); }

  .card .score {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--muted);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--ink); text-transform: uppercase;
  }
  .card .score .stars { display: flex; gap: 3px; }
  .card .notes {
    margin-top: 10px; padding-top: 8px;
    font-size: 10.5px; font-style: italic; color: var(--ink); line-height: 1.35;
  }

  /* Back face */
  .card .back-top { height: 22px; }
  .card .section-lbl {
    font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
    color: var(--muted); text-transform: uppercase; margin-bottom: 6px;
  }
  /* ── MAP BLOCK ─────────────────────────────────────
   * Reproduces the component's <TCMap>. Used twice, at two scales: full size
   * on the tasting card's back face, and as `.map-mini` for the third feature's
   * glyph. Rules are scoped to .map-preview (NOT .card) so both callers get
   * them; .map-mini only overrides what changes at the smaller size.
   */
  .card .map-block { margin-top: 12px; }
  .map-preview {
    position: relative; height: 156px;
    background: var(--map-paper);
    border: 1px solid var(--map-border);
    border-radius: 4px; overflow: hidden;
  }
  .map-preview .map-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, var(--map-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--map-line) 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: 0.85;
  }
  .map-preview .map-hatch {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(135deg, var(--map-line) 0 1px, transparent 1px 24px);
    opacity: 0.35;
  }
  .map-preview .map-ring {
    position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%);
    border-radius: 50%; border: 1px dashed var(--map-line);
  }
  .map-preview .map-pin {
    position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%);
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--pin-ring), 0 0 0 5px var(--accent);
  }
  .map-preview .map-pin-label {
    position: absolute; left: calc(50% + 12px); top: calc(54% - 22px);
    font-size: 8px; font-weight: 700; letter-spacing: 0.14em;
    color: var(--ink); text-transform: uppercase;
    background: var(--surface); padding: 2px 4px;
    box-shadow: 0 0 0 1px var(--map-line); white-space: nowrap;
  }
  .map-preview .map-coord {
    position: absolute; top: 8px; left: 8px;
    font-size: 8px; font-weight: 700; letter-spacing: 0.14em;
    color: var(--muted); text-transform: uppercase;
  }
  .map-preview .map-scale {
    position: absolute; top: 8px; right: 8px;
    display: flex; align-items: center; gap: 4px;
  }
  .map-preview .map-scale .bar { width: 18px; height: 2px; background: var(--ink); }
  .map-preview .map-scale .lbl {
    font-size: 8px; font-weight: 700; letter-spacing: 0.14em;
    color: var(--muted); text-transform: uppercase;
  }
  .map-preview .map-foot {
    position: absolute; bottom: 8px; left: 8px; right: 8px;
    display: flex; justify-content: space-between;
    font-size: 8px; font-weight: 700; letter-spacing: 0.14em;
    color: var(--muted); text-transform: uppercase;
  }
  /* The hero card's map is the app's terrain illustration (MapPreview.kt, `drawTerrain`) —
     the picture the onboarding's Memories card and the paywall's turned-over card both draw
     in the map slot. The SVG is the same paths in fractions of the box (a 100×100 viewBox
     stretched to the block, as the app scales its fractions by width and height), so it
     composes the same at any map size; strokes stay at their pixel width. The feature glyph
     keeps the industrial grid. */
  .map-preview .map-terrain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .map-terrain .land { fill: var(--map-land); }
  .map-terrain .lowland { fill: var(--map-lowland); }
  .map-terrain .contour, .map-terrain .river, .map-terrain .river-light, .map-terrain .road {
    fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke;
  }
  .map-terrain .contour { stroke: var(--map-contour); stroke-width: 1px; }
  .map-terrain .river { stroke: var(--map-water); stroke-width: 3px; }
  .map-terrain .river-light { stroke: var(--map-water-light); stroke-width: 1px; }
  .map-terrain .road { stroke: var(--map-road); stroke-width: 1.5px; stroke-linecap: butt; }
  .map-terrain .road-minor { stroke-width: 1.2px; }
  .map-terrain .town { fill: var(--map-town); }

  .card .tasted-row {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px;
  }
  .card .tasted-row .lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
  .card .tasted-row .count { font-size: 9px; font-weight: 600; letter-spacing: 0.10em; color: var(--muted); text-transform: uppercase; }
  .card .photo-row { display: flex; gap: 6px; }
  .card .photo {
    flex: 1; aspect-ratio: 1 / 1;
    position: relative; border-radius: 4px; overflow: hidden;
    background: repeating-linear-gradient(45deg, var(--photo-stripe-a) 0 6px, var(--photo-stripe-b) 6px 12px);
    border: 1px solid var(--photo-border);
  }
  .card .photo.add {
    background: transparent;
    border: 1px dashed var(--photo-add-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 22px; font-weight: 300;
  }
  /* ── PHOTO STRIP ───────────────────────────────────
   * A filled tile is the app's polaroid (PhotoStrip.kt `PhotoPolaroid` on PolaroidFrame.kt):
   * white paper standing 90% of the tile tall at a 1 : 1.26 aspect, so 71.4% of the tile
   * wide; the photo is a square inset by 6% of the paper's width (4.29% of the tile's, since
   * CSS percentages resolve against the tile), and the paper below it is the blank caption
   * band. Each tile tilts as the app's does (-4°, 5°, -3° by slot, set per tile as --tilt),
   * and the tile keeps its clip, so the tilted corners stay inside it. The photos are the
   * app's onboarding polaroids (`onboarding_polaroid_{selfie,brew}.jpg`), downscaled to 320px.
   */
  .card .photo.polaroid {
    background: transparent; border: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .card .polaroid .paper {
    width: 71.4%; aspect-ratio: 1 / 1.26;
    box-sizing: border-box; padding: 4.29% 4.29% 0;
    background: var(--polaroid-paper); border-radius: 2px;
    box-shadow: var(--shadow-polaroid);
    transform: rotate(var(--tilt, 0deg));
  }
  .card .polaroid .paper img {
    /* `height: auto` beats the <img>'s height attribute, which would otherwise pin the photo
       at its pixel height and let the aspect ratio go. */
    display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
    object-fit: cover; background: var(--polaroid-undeveloped);
  }
  /* One row per field, label left / value right — the card's back matches the
     app's LABEL block, which is a single column, not the old brew log's 2×2. */
  .card .label-grid {
    display: grid; grid-template-columns: 1fr; row-gap: 4px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .card .label-grid .lrow { display: flex; justify-content: space-between; gap: 10px; }
  .card .label-grid .llbl { color: var(--muted); }
  .card .label-grid .lrow span:last-child { color: var(--ink); text-align: right; }
  .card .quote-line {
    margin-top: auto; padding-top: 12px;
    font-size: 11px; font-style: italic; color: var(--ink); line-height: 1.4;
  }

  /* ── SECTION HEADS ─────────────────────────────── */
  .section-head { padding: 96px 0 12px; }
  .section-head .eyebrow-row { display: flex; align-items: center; gap: 10px; }
  .section-head .eyebrow-row .accent-block {
    display: inline-block; width: 4px; height: 16px; background: var(--accent);
  }
  .section-head .eyebrow-row span {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    color: var(--accent); text-transform: uppercase;
  }
  .section-head h2 {
    margin: 12px 0 0;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800; letter-spacing: -0.025em; line-height: 1.02;
    text-wrap: balance; max-width: 760px;
  }
  .section-sub { margin: 18px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 640px; text-wrap: pretty; }
  .section-sub a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .section-sub a:hover { color: var(--accent); }

  /* Ink button with an accent chip — the plan CTAs and the feedback card. Same shadow as
     .btn-store-primary in site.css so the two read as one family. */
  .btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 0 22px; min-height: 56px;
    background: var(--ink); color: var(--surface);
    border: none; border-radius: 8px;
    font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
    cursor: pointer; text-decoration: none;
    box-shadow: var(--shadow-raised);
    transition: transform 150ms cubic-bezier(.2,.8,.2,1), box-shadow 150ms;
  }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised-hover); }
  .btn-primary .chip {
    width: 22px; height: 22px; border-radius: 4px; flex: none;
    background: var(--accent); color: var(--on-dark-ink);
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ── FEATURES ──────────────────────────────────── */
  .features {
    margin-top: 48px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    padding-bottom: 96px;
  }
  .feature {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 28px;
    min-height: 280px;
    display: flex; flex-direction: column;
  }
  .feature .feat-eyebrow {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  /* Free / Pro chips — the eyebrow says what the feature is, the tag says what it costs. */
  .tag {
    display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 3px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  }
  .tag-pro  { background: var(--accent); color: var(--on-dark-ink); }
  .tag-free { border: 1px solid var(--line); color: var(--ink); }
  .feature h3 {
    margin: 14px 0 0;
    font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  }
  .feature p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
  .feature .glyph { margin-top: auto; padding-top: 24px; display: flex; align-items: flex-end; height: 90px; }
  /* Line-art glyphs inherit the ink via currentColor; their red strokes go through the token. */
  .feature .glyph .accent-stroke { stroke: var(--accent); }
  .feature .glyph.map { height: auto; align-items: stretch; }

  /* Compact variant used as the third feature's glyph — same vocabulary as the
     card back, at a smaller scale. Only the deltas live here. */
  .map-mini { width: 100%; height: 96px; border-color: var(--map-line-mid); }
  .map-mini .map-grid {
    background-image:
      linear-gradient(to right, var(--map-line-mid) 1px, transparent 1px),
      linear-gradient(to bottom, var(--map-line-mid) 1px, transparent 1px);
    background-size: 10px 10px; opacity: 1;
  }
  .map-mini .map-hatch {
    background-image: repeating-linear-gradient(135deg, var(--map-line) 0 1px, transparent 1px 18px);
    opacity: 1;
  }
  .map-mini .map-ring { border-color: var(--map-line-strong); }
  .map-mini .map-pin {
    width: 10px; height: 10px;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--accent);
  }
  .map-mini .map-pin-label {
    left: calc(50% + 10px); top: calc(54% - 18px); font-size: 7px;
    box-shadow: 0 0 0 1px var(--map-line-strong);
  }
  .map-mini .map-scale { top: 6px; right: 6px; }
  .map-mini .map-scale .bar { width: 14px; }
  .map-mini .map-scale .lbl { font-size: 7px; }
  .map-mini .map-coord { font-size: 7px; top: auto; bottom: 6px; left: 6px; }

  /* ── HOW IT WORKS ──────────────────────────────── */
  .how { padding: 96px 32px; border-top: 1px solid var(--hairline); }
  .steps { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .step { display: flex; flex-direction: column; }
  .step-num {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    color: var(--accent); text-transform: uppercase;
  }
  .step h3 { margin: 12px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
  .step p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

  /* ── PRO ───────────────────────────────────────────
   * A Free/Pro compare table beside two compact plan cards, then an ink "Web checkout" block
   * with the three redemption steps. The CTAs are .btn-primary (yearly one accent-filled).
   * Copy lives in index.html / index-es.html; prices must match the stores. Never say
   * "unlimited" here — the Worker has safety limits — the Pro column says "Full access".
   */
  .pro { padding: 96px 32px; border-top: 1px solid var(--hairline); }
  .pro-grid { margin-top: 48px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
  .compare { background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 28px 12px; }
  .compare-head, .compare-row { display: grid; grid-template-columns: 1fr 88px 88px; align-items: center; column-gap: 12px; }
  .compare-head {
    padding: 16px 0 12px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
    color: var(--muted); text-transform: uppercase;
  }
  .compare-head span:not(:first-child), .compare-row .mark { text-align: center; }
  .compare-head span:last-child { color: var(--accent); }
  .compare-row { padding: 13px 0; border-top: 1px solid var(--hairline); }
  .compare-row .k { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
  .compare-row .s { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
  .compare-row .mark { display: flex; justify-content: center; align-items: center; color: var(--accent); }
  /* Wraps rather than overflowing: "Acceso completo" is wider than the 64px phone columns. */
  .compare-row .lim {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 9px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.35;
    text-transform: uppercase; color: var(--muted); text-align: center;
  }
  .compare-row .lim.strong { color: var(--accent); }
  /* Free column of a Pro-only row: a muted dash, "Not included" for screen readers. */
  .compare-row .none { color: var(--muted); font-size: 14px; }

  .plans { display: grid; gap: 16px; }
  .plan {
    background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
    padding: 24px 28px;
    display: grid; grid-template-columns: 1fr max-content; gap: 8px 24px; align-items: center;
  }
  .plan.featured { border-color: var(--ink); box-shadow: var(--shadow-card); }
  .plan-name {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
    color: var(--muted); text-transform: uppercase;
  }
  .plan .price { white-space: nowrap; font-size: 40px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
  .plan .price small { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
  .plan .plan-note { grid-column: 1; font-size: 13px; color: var(--muted); line-height: 1.45; }
  .plan .btn-primary, .plan .plan-soon { grid-column: 2; grid-row: 2 / 4; }
  .plan .btn-primary { min-height: 52px; font-size: 14px; padding: 0 18px; white-space: nowrap; }
  .plan.featured .btn-primary {
    background: var(--accent); color: var(--on-dark-ink);
    box-shadow: var(--shadow-accent);
  }
  .plan.featured .btn-primary:hover { box-shadow: var(--shadow-accent-hover); }
  .plan-alt {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
    color: var(--muted); text-transform: uppercase; padding: 4px 0 0; line-height: 1.6;
  }
  .plan-alt a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .plan-alt a:hover { color: var(--accent); border-color: var(--accent); }

  .redeem {
    margin-top: 16px; background: var(--ink); color: var(--on-dark-ink); border-radius: 8px;
    padding: 28px;
    display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 24px 32px; align-items: start;
    position: relative; overflow: hidden;
  }
  .redeem::before { content: ''; position: absolute; top: 0; left: 28px; width: 56px; height: 4px; background: var(--accent); }
  .redeem-head {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--on-dark-soft); line-height: 1.7;
  }
  .redeem-head strong { display: block; color: var(--on-dark-ink); }
  .rstep .step-num { color: var(--accent); }
  .rstep p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--on-dark-strong); }
  .fineprint { margin: 16px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 820px; text-wrap: pretty; }

  /* "Coming soon" state — the `pro-coming-soon` class on the section. The CTAs stay in the
     markup but are hidden (display:none also drops them from the tab order) and a label takes
     their grid slot. Removing the class is the whole launch. */
  .plan-soon { display: none; }
  .pro-coming-soon .plan .btn-primary { display: none; }
  .pro-coming-soon .plan-soon {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0 18px;
    border: 1px dashed var(--line); border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase; white-space: nowrap;
  }

  /* ── FAQ ───────────────────────────────────────────
   * Native <details>; the plus sign is two pseudo-element bars and the vertical one rotates
   * onto the horizontal when open. No script involved.
   */
  .faq { padding: 96px 32px; border-top: 1px solid var(--hairline); }
  .faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; }
  .faq-list { border-top: 1px solid var(--line); }
  .faq-list details { border-bottom: 1px solid var(--hairline); }
  .faq-list summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 20px 0;
    font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3;
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary:hover { color: var(--accent); }
  .faq-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .faq-list .plus { flex: none; width: 20px; height: 20px; position: relative; }
  .faq-list .plus::before, .faq-list .plus::after {
    content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
    transform: translate(-50%,-50%);
    transition: transform 200ms cubic-bezier(.2,.8,.2,1);
  }
  .faq-list .plus::before { width: 14px; height: 2px; }
  .faq-list .plus::after  { width: 2px; height: 14px; }
  .faq-list details[open] .plus::after { transform: translate(-50%,-50%) rotate(90deg); }
  .faq-list details p { margin: 0 0 24px; max-width: 640px; font-size: 15px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
  .faq-list details p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .faq-list details p a:hover { color: var(--accent); }

  /* ── FEEDBACK ──────────────────────────────────── */
  .feedback { padding: 0 32px 96px; }
  .feedback-card {
    border: 1px solid var(--line); border-radius: 8px; padding: 40px;
    display: grid; grid-template-columns: 1.4fr auto; gap: 24px 48px; align-items: center;
  }
  .feedback-card .eyebrow-row { display: flex; align-items: center; gap: 10px; }
  .feedback-card .eyebrow-row .accent-block { display: inline-block; width: 4px; height: 16px; background: var(--accent); }
  .feedback-card h3 { margin: 12px 0 0; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
  .feedback-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 520px; text-wrap: pretty; }
  .feedback-card .btn-primary { justify-content: space-between; min-width: 260px; white-space: nowrap; }

  /* ── CTA STRIP ─────────────────────────────────── */
  .cta-strip {
    margin: 0 0 96px;
    background: var(--ink); color: var(--on-dark-ink);
    border-radius: 12px;
    padding: 56px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 4px;
    position: relative; overflow: hidden;
  }
  .cta-strip::before {
    content: ''; position: absolute; top: 0; left: 56px; right: 56px;
    height: 4px; background: var(--accent);
  }
  .cta-strip h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px); font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance;
  }
  .cta-strip p {
    margin: 14px 0 0; max-width: 480px;
    font-size: 15px; line-height: 1.5;
    color: var(--on-dark-muted);
  }
  .cta-strip .store-buttons { margin-top: 28px; }

  /* ── SCROLL REVEALS ────────────────────────────────
   * Each <section class="reveal"> rises and fades in as one block while it enters the
   * viewport, then stays. Two engines, one look:
   *   1. CSS scroll-driven animations where the browser has them (Chrome, Edge, Safari 26+):
   *      the reveal is scrubbed by the scroll position over the section's first 240px of
   *      entry — a length, not a percentage, so a tall Pro section reveals as promptly as the
   *      short feedback card.
   *   2. reveal.js elsewhere: it stamps `reveal-js` on <html> only when view() timelines are
   *      missing, and an IntersectionObserver adds `is-visible` as each section enters; the
   *      transition below plays once. Without the class (no JS, JS off, or a browser with
   *      neither API) nothing here applies and the content is simply visible.
   * Depends on site.css keeping <body> from becoming a scroll container (overflow-x: clip), or
   * view() would measure against the wrong scroller.
   */
  @keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } }
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range-start: entry 0%;
      animation-range-end: entry 240px;
    }
  }
  html.reveal-js .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity 600ms ease-out, transform 600ms cubic-bezier(.2,.8,.2,1);
  }
  html.reveal-js .reveal.is-visible { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal, html.reveal-js .reveal { animation: none; opacity: 1; transform: none; transition: none; }
  }

  /* ── RESPONSIVE ────────────────────────────────── */
  @media (max-width: 880px) {
    /* .container's mobile gutter is restored in site.css; .hero / .how / .pro / .faq /
       .feedback are themselves .container elements and re-declare the 20px gutter because
       their padding shorthand would otherwise keep the desktop 32px. */
    .hero { grid-template-columns: 1fr; padding: 48px 20px 56px; gap: 40px; }
    .hero-sub { max-width: none; }

    /* Tablet/large-phone tasting deck (480–880px): the 230px fan spans ~480px,
       which fits this range. Span the container the full viewport width and
       clip, so the deck centres on screen and can never cause a horizontal
       scroll. Phones (≤480px) scale the deck down further — see below. */
    .hero-cards {
      height: 460px;
      margin-left: -20px; margin-right: -20px;
      overflow: hidden;
    }
    .card { width: 230px; height: 430px; }
    .card.left  { --tx: -96px; }
    .card.right { --tx: 100px; }

    .section-head { padding-top: 64px; }
    .features { grid-template-columns: repeat(2, 1fr); padding-bottom: 64px; }
    .steps { grid-template-columns: 1fr; gap: 28px; }
    .how { padding: 64px 20px; }
    .pro { padding: 64px 20px; }
    .pro-grid, .plans { grid-template-columns: 1fr; }
    .redeem { grid-template-columns: 1fr; gap: 20px; }
    .faq { padding: 64px 20px; }
    .faq-grid { grid-template-columns: 1fr; gap: 32px; }
    .feedback { padding: 0 20px 64px; }
    .feedback-card { grid-template-columns: 1fr; padding: 28px; }
    .feedback-card .btn-primary { min-width: 0; }
    .cta-strip { padding: 40px 24px; margin-bottom: 64px; }
    .cta-strip::before { left: 24px; right: 24px; }
  }

  @media (max-width: 600px) {
    .features { grid-template-columns: 1fr; }
    /* One column: the price row, the note and the button stack; the button and its
       coming-soon stand-in stretch to the card's width. */
    .plan { grid-template-columns: 1fr; }
    .plan .btn-primary, .plan .plan-soon { grid-column: 1; grid-row: auto; justify-content: center; }
    .compare { padding: 4px 18px 8px; }
    .compare-head, .compare-row { grid-template-columns: 1fr 64px 64px; column-gap: 8px; }
  }

  @media (max-width: 480px) {
    /* The card's text is a fixed pixel size, so sizing the box in vw shrinks the
       box but NOT the text — the content then overflows the too-short box and
       the bottom tasting notes get clipped. Instead keep the tablet card box
       (230×430, which fits the content) and scale the whole deck down
       uniformly: box and text shrink together, so the notes always fit.
       translateX offsets are applied after the scale, so they are post-scale
       screen px; the deck stays centred (cards scale about their centre) and
       any rotation overhang is clipped by .hero-cards. */
    .card        { --s: 0.8; }
    .card.left   { --tx: -58px; }
    .card.right  { --tx: 62px; }
    .hero-cards  { height: 400px; }
    .plan { padding: 24px 20px; }
    .redeem { padding: 24px 20px; }
    .redeem::before { left: 20px; }
    .cta-strip { padding: 32px 20px; }
    .cta-strip::before { left: 20px; right: 20px; }
  }