/* Home page only (v3/index.html). Shared components live in ../v3.css. */

/* ── Hero ───────────────────────────────────────────────── */
.hero { position: relative; text-align: center; padding-top: 32px; overflow: hidden; }
@media (min-width: 600px) { .hero { padding-top: 48px; } }
.hero-copy { position: relative; z-index: 4; }
.hero .t-hero { margin-inline: auto; }
.hero .t-lead { margin: 16px auto 0; max-width: 30em; text-wrap: balance; }
.hero .badges { justify-content: center; margin-top: 24px; }
@media (min-width: 600px) { .hero .t-lead { margin-top: 20px; } .hero .badges { margin-top: 32px; } }
/* the credential under the badges: a seal and the line in a cool blue, so it
   stands apart from the ember orb (Sam, Oct 17: no outline, not ember) */
.maker-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font: 600 15px/1.2 var(--sans); color: var(--routines);
}
.maker-badge svg { flex: none; }
@media (min-width: 600px) { .maker-badge { margin-top: 20px; font-size: 16px; } }

/* Stage: the orb disc rises behind the phone. --disc is the visible disc;
   the image is wider because the artwork carries its own glow. */
.hero-stage { --disc: 340px; position: relative; height: 480px; margin-top: 28px; }
@media (min-width: 600px) { .hero-stage { margin-top: 44px; } }
@media (min-width: 1024px) { .hero-stage { margin-top: 64px; } }
@media (min-width: 600px) { .hero-stage { height: 600px; } }
@media (min-width: 600px) { .hero-stage { --disc: 420px; } }
@media (min-width: 1024px) { .hero-stage { --disc: 560px; height: 640px; } }
.hero-orb {
  position: absolute; left: 50%; z-index: 0;
  width: calc(var(--disc) / .56); max-width: none;
  top: calc(var(--disc) / .56 * -.218);
  transform: translateX(-50%);
  pointer-events: none;
  /* resting brightness (Sam, Oct 17: a bit brighter than round 3's .6/.7,
     which had dimmed it for light-sensitive eyes) */
  --orb-o: .76;
  filter: saturate(.9);
}
@media (min-width: 600px) { .hero-orb { --orb-o: .86; } }
/* Scroll rise ([data-scroll-rise], driven by v3.js): --rise runs 0 → 1 over
   the first stretch of scroll and sets the fade; --rise-e is its eased twin
   and sets the climb from --rise-d below the resting spot. Unset (no JS) or
   Reduce Motion: both read 1, the resting state. .js-rise (inline script in
   the page head) holds the start state until v3.js runs, so the orb never
   flashes in at full brightness. Opacity and translate only: no repaints. */
[data-scroll-rise] {
  --rise-d: calc(var(--disc) * .4);
  opacity: calc(var(--orb-o, 1) * var(--rise, 1));
  translate: 0 calc((1 - var(--rise-e, 1)) * var(--rise-d));
}
.js-rise [data-scroll-rise] { --rise: 0; --rise-e: 0; will-change: opacity, translate; }
@media (prefers-reduced-motion: reduce) { .js-rise [data-scroll-rise] { --rise: 1; --rise-e: 1; } }
.hero-glow { display: none; }
@media (min-width: 600px) {
  .hero-glow {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    left: 50%; top: calc(var(--disc) * -.15); width: calc(var(--disc) * 2.1); height: calc(var(--disc) * 1.6);
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(236, 170, 104, .085), rgba(201, 106, 58, .03) 55%, transparent);
  }
}
.hero-phone { position: relative; z-index: 2; display: flex; justify-content: center; padding-top: 32px; }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, rgba(10, 10, 10, 0), var(--bg) 88%); }
/* ≥1024 the phone is 300px wide and centered, so these offsets hold at every
   desktop width. The text sits on --bg left of the orb; the leader ends on the
   "Mild" chip (207px down the stage, 52px left of center). */
.hero-annot { top: 207px; translate: 0 -50%; right: calc(50% + 290px); --leader: 222px; }

/* Sam, Oct 16: keep the hero crisp. No glows, halos or tone curves here: they
   read as blur to people with migraine. The phone uses the sharpest capture
   (screen-today.jpg, 860px, not recompressed); the annotation gets brighter
   text and a solid leader, nothing soft. */
.hero-annot .annot-label, .hero-annot .annot-sub { color: var(--ink); }
.hero-annot::after { background: rgba(232, 230, 227, .7); }
.hero-annot::before { background: var(--ink-hi); }

/* the hero fades into the page, so the next section needs less top room */
.hero + .sec { padding-top: 32px; }
@media (min-width: 600px) { .hero + .sec { padding-top: 48px; } }
@media (min-width: 1024px) { .hero + .sec { padding-top: 64px; } }

/* ── Classify ───────────────────────────────────────────── */
/* ≥1024 the copy takes column 7 too, so the H2 sets as its two sentences
   (one per line); 1024–1199 also steps the H2 down from 56 to 50px to fit */
@media (min-width: 1024px) { #classify .split--mirror > .split-copy { grid-column: 7 / span 6; } }
@media (min-width: 1024px) and (max-width: 1199px) { #classify .t-h2 { font-size: 50px; } }
@media (min-width: 1200px) { #classify .split--mirror > .split-copy { padding-left: 24px; } }
/* the rule line and the "Try a day" classifier live in v3.css §23 (shared with /migraine-day/) */

/* ── Your month ─────────────────────────────────────────── */
.month-comp { position: relative; max-width: 520px; margin-inline: auto; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .month-comp { max-width: 860px; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 24px; align-items: center; } }
.month-comp .glow { width: 90%; left: 30%; }
.month-card { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-card); padding: 16px 16px 18px; }
@media (min-width: 600px) { .month-card { padding: 28px; } }
.month-head { font: 400 22px/1.2 var(--serif); color: var(--ink-hi); letter-spacing: -.01em; margin-bottom: 12px; font-optical-sizing: auto; }
@media (min-width: 600px) { .month-head { margin-bottom: 16px; } }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px 0; isolation: isolate; }
.month-grid .dow { text-align: center; font-size: 14px; color: var(--ink-mut); padding-bottom: 4px; }
.mday { position: relative; display: grid; place-items: center; height: 40px; font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--clear); }
.mday::after { content: ""; position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1.75px solid var(--ring, transparent); }
.mday--mig { --ring: var(--mig); color: var(--ink-hi); }
.mday--head { --ring: var(--head); color: var(--ink-hi); }
.mday--sym { --ring: var(--sym); color: var(--ink-hi); }
.mday--clear { color: var(--clear); }
/* period shading: a 35% fill with a 90% edge so it reads pink, not mauve,
   beside the purple migraine rings */
.mday.is-period::before { content: ""; position: absolute; z-index: -1; top: 1px; bottom: 1px; left: 0; right: 0; background: rgba(204, 127, 163, .35); border-top: 1px solid rgba(204, 127, 163, .9); border-bottom: 1px solid rgba(204, 127, 163, .9); }
.mday.p-start::before { left: 2px; border-left: 1px solid rgba(204, 127, 163, .9); border-radius: 12px 0 0 12px; }
.mday.p-end::before { right: 2px; border-right: 1px solid rgba(204, 127, 163, .9); border-radius: 0 12px 12px 0; }
@media (max-width: 599px) { .month-grid { row-gap: 4px; } }
@media (max-width: 399px) { .mday::after { width: 32px; height: 32px; } .mday { height: 36px; font-size: 14px; } }
/* Totals: one row of 4 under the calendar below 900px (compact stats on phone),
   a 2×2 wall of fixed 140px tiles centered against the calendar from 900px. */
.month-comp .totals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.month-comp .t-num { font-size: 36px; }
@media (max-width: 599px) {
  .month-comp .totals { gap: 8px; }
  .month-comp .total { min-height: 0; padding: 12px 4px; border-radius: 16px; align-items: center; justify-content: flex-start; gap: 4px; text-align: center; }
  .month-comp .total-label { flex-direction: column; gap: 4px; }
  .month-comp .t-num { font-size: 28px; }
}
@media (max-width: 359px) { .month-comp .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .month-comp .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; }
  .month-comp .total { min-height: 0; }
  .month-comp .t-num { font-size: 44px; }
}
@media (min-width: 1024px) { .month-comp .t-num { font-size: 56px; } }
.month-caps { margin-top: 20px; text-align: center; }
@media (min-width: 1024px) { .month-caps { margin-top: 28px; } }
/* the period legend: a swatch drawn like the calendar's shading */
.period-key { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ink-mut); }
.period-swatch { width: 26px; height: 16px; flex: none; border-radius: 8px; background: rgba(204, 127, 163, .35); border: 1px solid rgba(204, 127, 163, .9); }
/* Sam's line reads as a sentence, not fine print */
.month-caps .month-note { max-width: 34em; margin: 10px auto 0; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
@media (min-width: 600px) { .month-caps .month-note { font-size: 16px; } }
/* phones: the captions follow the section head to the left edge */
@media (max-width: 599px) { .month-caps { text-align: left; } .month-caps .month-note { margin-inline: 0; } }

/* ── Tour row ───────────────────────────────────────────── */
/* each card's lead-in takes its key color (set on the card) */
#features .tour-cap b { color: var(--k, var(--ink-hi)); }
.head-obj { justify-content: center; padding-bottom: 16px; }
.head-fig { position: relative; width: 100%; max-width: 280px; }
/* ≥600 the head and its "Right temple" tag keep 16px from each card edge, so
   the ear clears the border in the 260px cards (600–767 and 4-up from 1200) */
@media (min-width: 600px) { .head-fig { max-width: min(340px, calc(100% - 32px)); } }
.head-fig svg { width: 100%; height: auto; overflow: visible; }
.head-tag { position: absolute; left: 61.5%; top: calc(24.8% - 10px); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-hi); white-space: nowrap; }
/* The crop ends at the card's edge, so its fade finishes inside the visible card */
.crop-obj { justify-content: flex-start; padding-left: 16px; }
.crop-obj .story-img { display: block; width: 100%; max-width: 380px; height: auto; flex: none; overflow: hidden; }
.story-mini { display: none; }

/* Injection reminder: the top of the app's Today card (inj alert styles in
   the app: surface #151515, 1.5px orange-at-25% border), cut by the tour
   card's right and bottom edges like a crop. Real app strings. */
.inj-obj { justify-content: flex-start; padding-left: 16px; }
.inj-card {
  flex: none; width: calc(100% + 24px); margin: 0 -24px -2px 0; padding-bottom: 28px;
  background: #151515; border: 1.5px solid rgba(196, 138, 74, .25); border-radius: 14px 0 0 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.inj-title { display: flex; align-items: flex-start; gap: 10px; padding: 14px 40px 14px 16px; font: 600 15px/1.35 var(--sans); color: var(--ink-hi); text-wrap: balance; }
.inj-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #c48a4a; flex: none; }
.inj-action { padding: 12px 16px; border-block: 1px solid #222; font-size: 14px; line-height: 1.3; color: #c4b5a0; }
/* due-soon refill prompt (app: injRefillBlock / injRefillCallBtn, the
   periwinkle action color on a slate tint) */
/* right padding clears the 24px the card bleeds past the tour card, so the button reads whole */
.inj-refill { padding: 12px 40px 14px 16px; border-top: 1px solid #222; }
.inj-refill-body { font-size: 14px; line-height: 1.35; color: var(--ink-hi); }
.inj-call {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; min-height: 44px; padding: 0 12px;
  border-radius: 8px; background: rgba(90, 122, 154, .13); border: 1px solid rgba(90, 122, 154, .3);
  font: 600 14px/1.2 var(--sans); color: #9c9cff; white-space: nowrap;
}
.inj-call svg { flex: none; }
.inj-refill + .inj-action { border-top: 1px solid #222; }
@media (min-width: 600px) {
  .inj-title { font-size: 16px; padding-block: 16px; }
  .inj-action { font-size: 15px; padding-block: 14px; }
  .inj-refill-body { font-size: 15px; }
}
.nudge-obj { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 12px; padding: 0 16px 20px; }
.nudge-obj figure { display: grid; gap: 12px; width: 100%; }
.med-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.med-chips span { font: 500 14px/1 var(--sans); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hair-2); background: var(--raised); color: var(--ink-mut); }
.med-chips span.on { color: var(--ink-hi); border-color: var(--ink); }
.nudge { max-width: none; border-color: rgba(214, 140, 72, .5); background: rgba(30, 24, 18, .92); }
.nudge .fc-body { color: var(--ink-hi); }
.nudge-got { margin-top: 10px; text-align: right; font-size: 14px; font-weight: 600; color: #d68c48; }

/* Phone: the four cards sit in one swipe row ("Swipe rows" at the end of
   this file), each card upright like the tablet layout, so the section is
   one card tall instead of four. */
@media (max-width: 599px) {
  #features .tour-card { padding: 20px 20px 0; }
  #features .tour-obj { margin-top: 16px; flex-basis: 200px; }
  #features .head-fig { max-width: 240px; }
  #features .nudge-obj { padding-bottom: 16px; }
}

/* ── Report ─────────────────────────────────────────────── */
.report-comp { position: relative; }
.report-comp .glow { --glow: rgba(236, 170, 104, .18); width: 110%; }
.report-comp .report-paper { z-index: 1; }
/* Phone: the report alone (a QR on a phone screen is a QR nobody scans). */
.report-comp .lobby-card { display: none; }
@media (min-width: 600px) {
  .report-comp { padding-bottom: 48px; }
  .report-comp .lobby-card { display: grid; position: absolute; z-index: 2; bottom: 0; width: 180px; padding: 14px 14px 12px; gap: 6px; border-radius: 16px; left: -16px; }
  .report-comp .lobby-card .lobby-top img { width: 20px; height: 20px; }
}
@media (min-width: 1024px) { .report-comp .lobby-card { left: -24px; transform: rotate(-3deg); } }
/* two steps with ember icons, joined by a short dashed rule */
.report-copy > .send-steps { margin-top: 28px; }
.send-steps { display: grid; gap: 14px; }
.send-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; }
.send-steps li + li::before { content: ""; position: absolute; left: 21.5px; top: -14px; height: 14px; border-left: 1px dashed var(--ember-edge); }
.send-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ember-tint); border: 1px solid var(--ember-edge); color: var(--ember); }
.send-icon svg { width: 22px; height: 22px; }
.send-text { display: grid; gap: 2px; }
.send-text b { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink-hi); }
.send-text span { font-size: 14px; line-height: 1.45; color: var(--ink-mut); }
@media (min-width: 600px) { .send-text b { font-size: 17px; } }
/* Providers link: the whole callout is the link, tinted with the section's
   sky key so it reads as a door to another audience, not another step */
.report-copy > .pro-link { margin-top: 28px; }
.pro-link {
  display: grid; gap: 6px; justify-items: start; padding: 14px 18px 16px; border-radius: 16px;
  background: rgba(168, 196, 212, .07); border: 1px solid rgba(168, 196, 212, .28);
  text-decoration: none; transition: background-color 160ms var(--ease-std), border-color 160ms var(--ease-std);
}
.pro-link:hover { background: rgba(168, 196, 212, .11); border-color: rgba(168, 196, 212, .45); }
.pro-link-tag { font: 600 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--clear); }
.pro-link-text { font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--ink-hi); text-wrap: pretty; }
.pro-link-arrow { display: inline-block; margin-left: 6px; color: var(--clear); transition: translate 160ms var(--ease-std); }
.pro-link:hover .pro-link-arrow { translate: 3px 0; }
.report-copy > .pro-link + .tlink { margin-top: 20px; }
@media (max-width: 599px) { .report-copy > .pro-link { margin-top: 20px; } .pro-link-text { font-size: 15px; } }

/* ── Ember Plus band ────────────────────────────────────── */
/* The whole section sits in one gold-edged panel (the patterns key), so Plus
   reads as its own place on the page. On phones the panel runs edge to edge
   and drops its side borders, so the tile swipe row still bleeds to the
   screen edges. */
.plus-panel {
  position: relative; padding: 40px 24px 36px; border-radius: 32px;
  border: 1px solid rgba(230, 184, 92, .26);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(230, 184, 92, .10), rgba(230, 184, 92, 0) 70%),
    linear-gradient(180deg, rgba(18, 17, 16, .9), rgba(10, 10, 10, 0) 60%);
}
.plus-panel::before {
  content: ""; position: absolute; top: -1px; left: 50%; translate: -50% 0; width: min(60%, 520px); height: 1px;
  background: linear-gradient(90deg, rgba(230, 184, 92, 0), var(--patterns), rgba(230, 184, 92, 0));
}
@media (min-width: 1024px) { .plus-panel { padding: 64px 48px 52px; border-radius: 40px; } }
@media (max-width: 599px) {
  .plus-panel { margin-inline: calc(var(--gutter) * -1); padding: 32px var(--gutter) 28px; border-radius: 0; border-inline: 0; }
}
/* "Works with": the Health sources named up front (Mitch, Oct 17: it wasn't
   obvious Ember already connects to Apple Health) */
.works-with { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 24px; }
.works-label { font-size: 14px; color: var(--ink-mut); }
.works-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.works-list li {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px 0 10px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--hair-2); font: 600 14px/1 var(--sans); color: var(--ink-hi); white-space: nowrap;
}
.works-list svg { width: 17px; height: 17px; fill: none; stroke: var(--health); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.works-list li:last-child svg { stroke: var(--sleep); }
@media (min-width: 600px) { .works-with { margin-top: 28px; } .works-list li { font-size: 15px; } }
/* phones: label and chips flow as one group from the left edge, two lines at 375px */
@media (max-width: 599px) {
  .works-list, .plus-more-list { display: contents; }
  .works-with { gap: 8px 6px; margin-top: 20px; }
  .plus-more { gap: 8px 6px; margin-top: 24px; }
  .works-label, .plus-more-label { font-size: 13px; margin-right: 2px; }
  .works-list li { min-height: 32px; padding: 0 11px 0 9px; gap: 6px; font-size: 13px; }
  .works-list svg { width: 15px; height: 15px; }
  .plus-more-list a { min-height: 36px; padding: 0 12px 0 10px; gap: 7px; font-size: 14px; }
  .plus-more-list svg { width: 16px; height: 16px; }
}
/* the rest of the 8 features, each opening its tab on /plus/ */
.plus-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 28px; }
.plus-more-label { font-size: 14px; color: var(--ink-mut); }
.plus-more-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.plus-more-list a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--k) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--k) 30%, transparent);
  font: 500 15px/1 var(--sans); color: var(--ink-hi); text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--ease-std), border-color 160ms var(--ease-std);
}
.plus-more-list a:hover { background: color-mix(in srgb, var(--k) 14%, var(--surface)); border-color: color-mix(in srgb, var(--k) 55%, transparent); }
.plus-more-list svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--k); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* one clear way in: a gold button, then the price under it */
.plus-cta { background: var(--patterns); color: var(--btn-ink); }
.plus-cta:hover { background: #efc877; }
/* each tile carries its feature color the way the app's Plus tiles do: a
   tinted edge, a faint wash at the top and a colored title */
.plus-tiles .tile-card {
  border-color: color-mix(in srgb, var(--k) 24%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--k) 7%, var(--surface)), var(--surface) 42%);
}
.plus-tiles .tile-card > .t-h3 { color: var(--k); }
.plus-tiles .brief { box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
/* the H2 gets a wider measure than the lead so it holds one line from 1024px */
#plus .center-head { max-width: 880px; }
.plus-tiles .tile-obj { position: relative; margin-top: 24px; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 20px; }
.pressure-mini { width: 100%; max-width: 340px; }
.pressure-mini svg { width: 100%; height: auto; overflow: visible; }
.pressure-obj .float-card { width: 100%; max-width: 320px; margin-top: 8px; }
.plus-tiles .app-card { width: 100%; }
.plus-tiles .brief { width: 100%; max-width: 340px; }

/* Your patterns: today's risk card. A rust chip (the app's High risk color)
   over two rows, each a fact about today in its own key color with what the
   history shows under it. A warm top edge like the Brief's. The card fills
   its tile's visual area, so its bottom lines up with the Brief beside it. */
.plus-tiles .tile-obj > .risk-card { flex: 1 0 auto; }
.risk-card {
  max-width: 340px; padding: 16px 18px 6px; background: #151515;
  border: 1px solid rgba(201, 106, 58, .45); border-top: 2px solid var(--ember-deep);
  background-image: radial-gradient(90% 50% at 0% 0%, rgba(201, 106, 58, .16), rgba(201, 106, 58, 0) 70%);
}
.risk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.risk-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px;
  background: rgba(201, 106, 58, .16); border: 1px solid rgba(201, 106, 58, .6);
  font: 700 14px/1 var(--sans); color: #ee9a6c; white-space: nowrap;
}
.risk-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.risk-when { font-size: 14px; color: var(--ink-mut); }
/* each row: icon beside the fact, the history line full width under both */
.risk-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 14px 0; }
.risk-row > div { display: contents; }
.risk-row + .risk-row { border-top: 1px solid var(--hair); }
.risk-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--k) 14%, transparent); border: 1px solid color-mix(in srgb, var(--k) 35%, transparent); }
.risk-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--k); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.risk-fact { font: 400 19px/1.2 var(--serif); color: var(--k); letter-spacing: -.01em; font-optical-sizing: auto; text-wrap: balance; }
.risk-why { grid-column: 1 / -1; font-size: 15px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }

/* Phone: the pressure tile shows the alert alone; objects stay compact. */
@media (max-width: 599px) {
  .plus-tiles .tile-obj { margin-top: 16px; padding-bottom: 16px; }
  .plus-price { margin-top: 24px; }
  .pressure-obj .pressure-mini { display: none; }
  .pressure-obj .float-card { margin-top: 0; }
}
/* 600–767: stacked full width; tiles fit their content instead of a 360px floor */
@media (min-width: 600px) and (max-width: 767px) { .plus-tiles .tile-card { min-height: 0; } }
/* 768–1279: two columns. Pressure and the Brief sit side by side (their
   phone-width visuals fit a half tile, and the chart labels stay at 14px or
   more); Your patterns runs full width below them, its two rows side by side,
   so no tile is left with an empty half. 3 across from 1280. */
@media (min-width: 768px) and (max-width: 1279px) {
  .plus-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plus-tiles .tile-card:nth-child(2) { order: 1; grid-column: 1 / -1; min-height: 0; }
  .risk-card { max-width: 640px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-content: start; }
  .risk-head { grid-column: 1 / -1; }
  .risk-row + .risk-row { border-top: 0; }
}

/* Side by side (≥768): titles, captions and visuals share row lines across
   the tiles in a row (subgrid), and every visual hangs from the top of its
   row, so the pressure chart, the Brief and, 3 across from 1280, the
   patterns card start level. Without subgrid the tiles keep their
   bottom-anchored layout. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .plus-tiles { grid-template-rows: auto auto 1fr; }
    .plus-tiles .tile-card:nth-child(odd) { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .plus-tiles .tile-card:nth-child(odd) > .tile-obj { justify-content: flex-start; }
  }
  @media (min-width: 768px) and (max-width: 1279px) { .plus-tiles .tile-card:nth-child(2) { grid-row: 4; } }
  @media (min-width: 1280px) {
    .plus-tiles .tile-card:nth-child(2) { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .plus-tiles .tile-card:nth-child(2) > .tile-obj { justify-content: flex-start; }
  }
}

.plus-price { margin-top: 32px; text-align: center; }
.plus-price .price-line { margin-top: 16px; font-size: 17px; line-height: 1.4; color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.plus-price .t-small { margin-top: 4px; }

/* ── Privacy strip ──────────────────────────────────────── */
#privacy .strip-icon { color: var(--backup); }
#privacy .kicker + .strip-title { margin-top: 8px; }
/* Below 768px the lock shrinks to the kicker's size and takes the place of
   its dot, so the kicker, headline, sentence and link share one left edge.
   The lock is drawn from x 9 of its 40-unit box; the negative margin puts
   the drawn edge, not the box, on that line. */
@media (max-width: 767px) {
  #privacy .strip { grid-template-columns: auto minmax(0, 1fr); gap: 0 4px; align-items: center; }
  #privacy .strip > div { display: contents; }
  #privacy .strip-icon, #privacy .strip-icon svg { width: 26px; height: 26px; }
  #privacy .strip-icon { grid-column: 1; grid-row: 1; margin: -4px 0 -4px calc(26px * -9 / 40); }
  #privacy .kicker { grid-column: 2; grid-row: 1; }
  #privacy .kicker::before { content: none; }
  #privacy .strip-title, #privacy .strip-text, #privacy .strip > .tlink { grid-column: 1 / -1; }
  #privacy .kicker + .strip-title { margin-top: 12px; }
  #privacy .strip > .tlink { justify-self: start; margin-top: 16px; }
}

/* ── Closing ────────────────────────────────────────────── */
/* room between each step: heading, promise, badges, import line, QR group */
.close .t-h2-close { max-width: 14em; margin-inline: auto; }
.close .t-lead { max-width: 24em; margin-top: 20px; }
.close .badges { margin-top: 36px; }
.close .close-after { margin-top: 24px; color: var(--ink-mut); }
@media (min-width: 1024px) {
  .close .badges { margin-top: 44px; }
  .close .close-after { margin-top: 28px; }
  /* QR above its one-line caption, centered as one group */
  .close .qr-tile { flex-direction: column; gap: 12px; margin-top: 56px; text-align: center; }
}

/* ── Scroll orb ─────────────────────────────────────────── */
/* v3.js shows the orb from 1260px (lane ≥ 40px) with Reduce Motion off. It
   moves sideways only in the 3 [data-orb-gap] bands (index.html), on average
   about 2.1 times the scroll (Sam, Oct 16: the 2.8x crossing felt almost too
   fast), so a wheel tick nudges it instead of flinging it across. Lane = middle of the margin = 25vw − 275px:
     hero rim → left lane   25vw + 75px  → band ≥ 10.4vw + 61px  (pad 12)
     left → right lane      50vw + 550px → band ≥ 20.8vw + 259px (pad 1)
     right lane → close orb 25vw + 275px → band ≥ 10.4vw + 145px (pad 1)
   A band is the room between two sections minus its pad. Only the crossing
   needs real extra room (about 600px at 1440), and it carries the month of
   days ([data-orb-days]) so it doesn't read as empty; the other two grow a
   little on wide screens (the closing's top by about 20px at 1440). Below 1260px or with Reduce Motion there is no
   orb, so the page keeps its usual spacing. */
@media (min-width: 1260px) and (prefers-reduced-motion: no-preference) {
  .hero + .sec { padding-top: max(64px, calc(10.5vw - 86px)); }
  #report { padding-top: calc(16vw + 250px); } /* holds the month; crossing averages about 2.1x scroll */
  #get { padding-top: max(96px, calc(10.5vw - 36px)); }
  /* above the hero's bottom fade, so the trail leaves the orb's rim unbroken;
     it fades in over its first 50px. The start point (data-orb-start, the
     disc's lower-left rim) rests at page y 1025 at every width from 1260, so
     the mask's stops are page px; move them with it if the hero changes. */
  .orb-layer { z-index: 3; -webkit-mask-image: linear-gradient(to bottom, transparent 1019px, #000 1075px); mask-image: linear-gradient(to bottom, transparent 1019px, #000 1075px); }
  .orb-dot { z-index: 3; }
}

/* Plus tile titles open that feature's tab on /plus/ (#fx-…). The › marks them
   as links on phones, where there's no hover; same chevron as .tlink. */
.plus-tiles .t-h3 a { color: inherit; text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.plus-tiles .t-h3 a::after { content: "›"; margin-left: 6px; color: var(--ink-mut); font-weight: 400; }
.plus-tiles .t-h3 a:hover { text-decoration: underline; text-decoration-color: var(--ember); }

/* ── Phone pass (Sam, Oct 16: too much text and space) ──── */
/* Tighter section rhythm on phones only; tablet and desktop keep theirs. */
@media (max-width: 599px) {
  :root { --sec-y: 44px; --stack-gap: 24px; --strip-y: 40px; }
  .hero + .sec { padding-top: 16px; }
  .split-copy > .rule-line { margin-top: 16px; }
  .report-copy > .send-steps { margin-top: 20px; }
  .month-caps { margin-top: 16px; }
  .plus-price { margin-top: 20px; }
  .close .t-lead { margin-top: 12px; }
  .close .badges { margin-top: 24px; }
  .close .close-after { margin-top: 16px; }
  .foot { padding-top: 40px; }
  /* the Plus panel follows its left-aligned head (v3.css .center-head) */
  .works-with, .plus-more, .plus-more-list { justify-content: flex-start; }
  .plus-price { text-align: left; }
}

/* Swipe rows: the tour cards and the Plus tiles scroll sideways on phones,
   one card at a time with the next card's edge showing. Native scroll and
   snap, no script; the row bleeds to the screen edges and snaps cards to
   the page gutter. */
@media (max-width: 599px) {
  #features .grid-4, .plus-tiles {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  #features .grid-4::-webkit-scrollbar, .plus-tiles::-webkit-scrollbar { display: none; }
  #features .grid-4 > *, .plus-tiles > * { scroll-snap-align: start; }
  /* each swipe card is its title and its picture */
  #features .tour-cap, .plus-tiles .tour-cap { display: none; }
  .risk-fact { font-size: 18px; }
  /* the pressure tile has room for its chart again */
  .pressure-obj .pressure-mini { display: block; }
  .pressure-obj .float-card { margin-top: 8px; }
}