/* IRIS landing page (Option B: IRIS leads). A clinical instrument, not a neon arcade. Every
   colour is sampled from the IRIS artwork: visor black, porcelain, copper hardware, the cyan
   of her eyes. Magenta stays where the brand keeps it: on buttons only. Single theme,
   painted explicitly. Copper (#C08F74) is hardware: on the porcelain sections it reads at
   2.4:1, so TEXT on paper uses --copper-ink (#8B5A46, 4.8:1); the copper stays on bars and dots.
   Scoped under .iris-page and every class carries the ir- prefix, so nothing here leaks into
   or from style.css (which owns .btn, .hero, .lead). The app chrome keeps style.css. */
.iris-page {
  --void: #0A0709; --panel: #15101A; --panel-hi: #1E1621; --line: #2C2129;
  --paper: #F3E9E3; --paper-hi: #FBF6F2; --paper-line: #DCC9BF;
  --ink: #2E1C20; --ink-mut: #6B5450;
  --on-void: #F3E9E3; --on-void-mut: #B9A7A6;
  --copper: #C08F74; --copper-ink: #8B5A46; --rose: #E7B9B1; --iris: #8FE8F4; --iris-dim: rgba(143, 232, 244, .28);
  --go: #DE1B87;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;
  --bay: clamp(64px, 8vw, 120px); --gutter: clamp(20px, 5vw, 48px); --measure: 1120px;
  --f-display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.iris-page { background: var(--void); color: var(--on-void); font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.iris-page *, .iris-page *::before, .iris-page *::after { box-sizing: border-box; }
.iris-page img { max-width: 100%; height: auto; display: block; }
.iris-page p { margin: 0; }
/* the hidden attribute must win over every display an ir- rule sets (a form is display: grid) */
.iris-page [hidden] { display: none !important; }
/* spoken, not seen: "Was" / "Now" beside the two prices */
.iris-page .ir-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* style.css paints every <p> the app grey. :where() keeps this at (0,1,0) so the single-class
   colours on a <p> (.ir-em, .ir-acro, .ir-close__sign), declared later, still win. */
.iris-page :where(p) { color: inherit; }
.iris-page p + p { margin-top: var(--s2); }
.iris-page h1, .iris-page h2, .iris-page h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; letter-spacing: -.02em; }
.iris-page h1 { font-size: clamp(2.5rem, 6.6vw, 4.8rem); line-height: 1.02; font-weight: 700; }
.iris-page h2 { font-size: clamp(1.75rem, 3.8vw, 2.9rem); line-height: 1.1; font-weight: 600; }
.iris-page h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.ir-prose { max-width: 52ch; }
.ir-lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; }
.ir-em { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.3; color: var(--iris); max-width: 32ch; text-wrap: balance; }
.ir-paper .ir-em { color: var(--copper-ink); }
.ir-mut { color: var(--on-void-mut); }
.ir-paper .ir-mut { color: var(--ink-mut); }

.ir-wrap { max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }
.ir-bay { padding-block: var(--bay); }
.ir-paper { background: var(--paper); color: var(--ink); }

/* readout labels: the spine of the page */
.ir-ro { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--iris); }
.ir-ro::before { content: ""; width: 8px; height: 8px; background: var(--iris); box-shadow: 0 0 12px var(--iris); flex: none; }
.ir-ro::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ir-paper .ir-ro { color: var(--copper-ink); }
.ir-paper .ir-ro::before { background: var(--copper); box-shadow: none; }
.ir-paper .ir-ro::after { background: var(--paper-line); }
.ir-mono { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; overflow-wrap: anywhere; }

/* buttons: magenta, and only magenta */
.ir-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 14px 26px; border-radius: 8px; font-family: var(--f-display); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; color: #fff; background: var(--go); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 12px 30px -12px rgba(222, 27, 135, .7); max-width: 100%; white-space: normal; transition: transform .18s ease; }
.ir-btn:hover { transform: translateY(-2px); }
.ir-btn:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; }
.ir-paper .ir-btn:focus-visible { outline-color: var(--copper-ink); }   /* cyan on paper is 1.17:1 */
.ir-cta { margin-top: var(--s4); }
.ir-cta__note { margin-top: 10px; font-size: .8125rem; color: var(--on-void-mut); }
.ir-paper .ir-cta__note { color: var(--ink-mut); }
@media (max-width: 720px) { .ir-btn { width: 100%; min-height: 44px; padding: 12px 20px; font-size: .96rem; } }
@media (prefers-reduced-motion: reduce) { .ir-btn:hover { transform: none; } }

/* ── HERO: IRIS leads ───────────────────────────── */
.ir-hero { position: relative; overflow: hidden; isolation: isolate; }
.ir-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: .35; mask-image: radial-gradient(70% 70% at 70% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000 30%, transparent 100%); }
.ir-hero::after { content: ""; position: absolute; z-index: -1; right: -10%; top: 0; width: 60%; height: 100%; background: radial-gradient(50% 45% at 60% 45%, var(--iris-dim), transparent 70%); }
.ir-hero .ir-wrap { display: grid; gap: var(--s5); padding-top: clamp(40px, 6vw, 80px); padding-bottom: var(--s5); align-items: end; }
@media (min-width: 900px) { .ir-hero .ir-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding-top: clamp(64px, 8vw, 112px); } }
.ir-hero__chip { display: inline-flex; justify-self: start; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(21,16,26,.7); color: var(--on-void-mut); }
.ir-hero__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--iris); box-shadow: 0 0 10px var(--iris); }
.ir-hero__copy { display: grid; gap: var(--s3); align-content: end; position: relative; z-index: 2; }
.ir-hero__copy h1 { max-width: 15ch; }
/* The landing headline (Melodie, 2026-09-15): more air between its lines, and the payoff on its own
   line in the accent cyan so "She'll fix it." lands as the answer, not more heading. */
.ir-hero__copy .ir-hero__title { line-height: 1.1; }
.ir-hero__title .ir-hero__payoff { display: block; margin-top: .14em; color: var(--iris); }
.ir-hero__copy .ir-lead { max-width: 44ch; color: var(--on-void-mut); }
.ir-hero__fig { position: relative; display: grid; justify-items: center; }
.ir-hero__fig > img { width: min(100%, 520px); position: relative; z-index: 1; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.ir-hero__scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--iris-dim) 48%, var(--iris) 50%, var(--iris-dim) 52%, transparent 100%); mix-blend-mode: screen; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ir-hero__scan { animation: ir-scan 3.2s cubic-bezier(.4,0,.2,1) .4s 1 both; }
  @keyframes ir-scan { 0% { opacity: 0; transform: translateY(-100%); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } }
  .ir-hero__fig > img { animation: ir-float 7s ease-in-out 3.6s infinite alternate; }
  @keyframes ir-float { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-10px,0); } }
  @keyframes ir-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
}
.ir-sysline { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.ir-sysline .ir-wrap { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-block: 14px; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-void-mut); }
.ir-sysline b { color: var(--iris); font-weight: 500; }

/* ── cards / readouts ───────────────────────────── */
.ir-cards { display: grid; gap: var(--s3); margin-top: var(--s5); }
@media (min-width: 860px) { .ir-cards--2 { grid-template-columns: 1fr 1fr; } }
.ir-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: var(--s4) var(--s3); }
.ir-paper .ir-card { background: var(--paper-hi); border-color: var(--paper-line); }
.ir-gauge { display: grid; gap: var(--s2); }
.ir-gauge__n { font-family: var(--f-mono); font-weight: 500; font-size: clamp(3rem, 9vw, 4.6rem); line-height: .95; letter-spacing: -.02em; color: var(--on-void); font-variant-numeric: tabular-nums; }
.ir-paper .ir-gauge__n { color: var(--ink); }
.ir-gauge__bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.ir-paper .ir-gauge__bar { background: var(--paper-line); }
.ir-gauge__bar i { display: block; height: 100%; width: var(--pct); background: linear-gradient(90deg, var(--iris), #5BC9DA); border-radius: 3px; }
.ir-paper .ir-gauge__bar i { background: var(--copper); }
@media (prefers-reduced-motion: no-preference) { .ir-gauge__bar i { animation: ir-fill 1.2s cubic-bezier(.2,.8,.2,1) both; } @keyframes ir-fill { from { width: 0; } } }
.ir-gauge__t { font-size: 1.1rem; line-height: 1.4; text-wrap: balance; }
.ir-gauge .ir-mono { color: var(--on-void-mut); }
.ir-paper .ir-gauge .ir-mono { color: var(--ink-mut); }
.ir-quote { display: grid; gap: var(--s2); }
.ir-quote blockquote { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.35; text-wrap: pretty; }
.ir-quote b { color: var(--iris); font-weight: 600; }
.ir-paper .ir-quote b { color: var(--copper-ink); }
.ir-who { display: flex; align-items: center; gap: 10px; color: var(--on-void-mut); }
.ir-who::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--rose); flex: none; }
.ir-paper .ir-who { color: var(--ink-mut); }

/* ── story: the human note inside the machine ────── */
.ir-note { display: grid; gap: var(--s4); }
@media (min-width: 860px) { .ir-note { grid-template-columns: 180px minmax(0, 1fr); gap: var(--s6); align-items: start; } }
.ir-note__id { display: grid; gap: var(--s2); justify-items: stretch; }
/* Her before-and-after is two faces side by side: shown whole, never cropped to a circle. */
.ir-note__id img { width: 100%; max-width: 360px; height: auto; border-radius: 12px; border: 3px solid var(--paper-hi); box-shadow: 0 10px 30px -14px rgba(46,28,32,.6); }
@media (min-width: 860px) { .ir-note__id img { max-width: 180px; } }
.ir-acro { display: flex; flex-wrap: wrap; gap: .1em .55em; margin-top: var(--s3); font-family: var(--f-display); font-weight: 500; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.2; color: var(--ink-mut); letter-spacing: -.01em; }
.ir-acro b { font-family: var(--f-mono); font-weight: 500; color: var(--copper-ink); font-size: 1.15em; }

/* ── build log + tension map ───────────────────── */
.ir-build { display: grid; gap: var(--s5); margin-top: var(--s5); align-items: center; }
/* Phone beside the map only from 1100px: below that the map column shrank to ~420px and its
   10.5px labels rendered under 6px. Stacked, the map keeps its 620px (labels ~8.3px). */
/* A fixed track, not auto: an auto track sizes the phone by the clip's natural 720px width and
   squeezed the map to 232px at 1280. */
@media (min-width: 1100px) { .ir-build { grid-template-columns: 340px minmax(0, 1fr); } }
.ir-phone { width: min(100%, 300px); padding: 12px; border-radius: 46px; background: #050305; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px var(--iris-dim); justify-self: center; }
.ir-phone__screen { position: relative; border-radius: 36px; overflow: hidden; background: #000; padding-top: 30px; }
.ir-phone__screen::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 32%; height: 18px; border-radius: 999px; background: var(--panel-hi); z-index: 2; }
.ir-phone__screen video { width: 100%; height: auto; aspect-ratio: 720 / 1304; display: block; }
.ir-phone-wrap { display: grid; gap: var(--s2); justify-items: center; }
.ir-phone__controls { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: center; }
.ir-phone__sound, .ir-phone__pause { min-height: 40px; padding: 8px 12px; border: 1px solid var(--iris-dim); border-radius: 999px; background: rgba(10,7,9,.85); color: var(--on-void); font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.ir-phone__sound[aria-pressed="true"] { color: var(--iris); border-color: var(--iris); }
.ir-phone__sound:focus-visible, .ir-phone__pause:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
@media (min-width: 900px) { .ir-phone { width: min(100%, 340px); } }
.ir-holo { position: relative; margin: 0; }
.ir-holo--big { width: min(100%, 620px); justify-self: center; }
.ir-holo img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* ── testimonials + before/after ───────────────── */
.ir-testi { display: grid; gap: var(--s5); margin-top: var(--s5); }
.ir-testi__long { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.45; max-width: 60ch; text-wrap: pretty; }
.ir-ba-wrap { display: grid; gap: var(--s2); max-width: 720px; }
/* one photo with before and after side by side, shown whole */
.ir-ba__img { display: block; width: 100%; height: auto; border: 1px solid var(--paper-line); border-radius: 12px; }
.ir-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── comparison as a spec sheet ───────────────── */
.ir-spec { display: grid; gap: var(--s3); margin-top: var(--s5); }
@media (min-width: 860px) { .ir-spec { grid-template-columns: 1fr 1fr; } .ir-spec .ir-card--iris { grid-column: 1 / -1; } }
.ir-spec h3 { margin-bottom: var(--s2); display: flex; align-items: center; gap: 10px; }
.ir-card--iris { border-color: var(--iris-dim); box-shadow: 0 0 0 1px var(--iris-dim), 0 30px 60px -40px var(--iris); }
.ir-card--iris h3::before { content: ""; width: 8px; height: 8px; background: var(--iris); box-shadow: 0 0 10px var(--iris); }
.ir-spec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ir-spec li { padding-left: 1.4em; position: relative; color: var(--on-void-mut); }
.ir-card--iris li { color: var(--on-void); }
.ir-spec li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 1px; background: var(--copper); }
.ir-card--iris li::before { background: var(--iris); }
@media (min-width: 860px) { .ir-card--iris ul { grid-template-columns: 1fr 1fr; gap: 10px var(--s5); } }

/* ── for / not for ─────────────────────────────── */
.ir-for { display: grid; gap: var(--s5); margin-top: var(--s4); }
@media (min-width: 860px) { .ir-for { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.ir-for ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 14px; }
.ir-for li { padding-left: 1.6em; position: relative; }
.ir-for li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--copper); font-weight: 600; }

/* ── faq ───────────────────────────────────────── */
.ir-faq { border-top: 1px solid var(--line); }
.ir-faq:last-of-type { border-bottom: 1px solid var(--line); }
.ir-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 18px 0; min-height: 44px; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.ir-faq summary::-webkit-details-marker { display: none; }
.ir-faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--iris); flex: none; font-size: 1.2rem; }
.ir-faq[open] summary::after { content: "–"; }
.ir-faq summary:focus-visible { outline: 2px solid var(--iris); outline-offset: 4px; border-radius: 4px; }
.ir-faq__body { padding: 0 0 var(--s3); max-width: 60ch; color: var(--on-void-mut); }
.ir-faq__body p { color: var(--on-void); }

/* ── close ─────────────────────────────────────── */
.ir-close { position: relative; overflow: hidden; }
.ir-close::after { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 70%; background: radial-gradient(50% 50% at 50% 100%, var(--iris-dim), transparent 70%); pointer-events: none; }
.ir-close .ir-wrap { display: grid; gap: var(--s5); position: relative; z-index: 1; }
@media (min-width: 900px) { .ir-close .ir-wrap { grid-template-columns: minmax(0, 1fr) 300px; align-items: end; } }
.ir-close__fig img { width: min(100%, 300px); margin-bottom: calc(var(--bay) * -.5); filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.ir-close__sign { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; color: var(--rose); }

/* ── the quiz gate and the result page (funnel steps 2 and 3 share the hero) ─────────── */
.ir-gate .ir-hero__fig > img, .ir-result .ir-hero__fig > img { width: min(60vw, 360px); }
@media (min-width: 900px) { .ir-gate .ir-hero__fig > img, .ir-result .ir-hero__fig > img { width: min(100%, 420px); } }
/* The result hero reads top to bottom (2026-09-15): name, graphic, sentence, routine. One column. */
.ir-result .ir-wrap { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.ir-result .ir-hero__copy { align-content: start; }
.ir-result .ir-result__fig { justify-items: start; margin: var(--s1) 0; }
.ir-form { display: grid; gap: var(--s2); margin-top: var(--s3); max-width: 480px; }
.ir-form__label { color: var(--iris); }
.ir-input { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--on-void); font-family: var(--f-body); font-size: 1.0625rem; }
.ir-input::placeholder { color: var(--on-void-mut); opacity: .8; }
.ir-input:focus-visible { outline: 3px solid var(--iris); outline-offset: 2px; border-color: var(--iris); }
.ir-check { display: flex; gap: .7em; align-items: flex-start; color: var(--on-void-mut); font-size: .95rem; line-height: 1.5; cursor: pointer; }
.ir-check input { accent-color: var(--go); width: 1.15em; height: 1.15em; margin-top: .2em; flex: none; }
.ir-check input:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
.ir-req { color: var(--go); }
.ir-form__submit { margin-top: var(--s1); }
/* Sent, waiting for the next page (static/js/quiz_gate.js). Same colours as the live button, so the words stay as
   readable as before; the lift is off and a small ring turns, so the press visibly counted. */
.ir-form__submit:disabled { cursor: progress; transform: none; opacity: 1; -webkit-text-fill-color: #fff; }
.ir-form__submit:disabled::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: ir-gate-spin .8s linear infinite; flex: none; }
@keyframes ir-gate-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ir-form__submit:disabled::before { animation: none; border-color: #fff; } }
.ir-small { font-size: .875rem; }
.ir-error { color: #FFC0D3; font-weight: 500; margin-top: var(--s2); }   /* 12.9:1 on void */
.ir-result__email { font-size: .8rem; color: var(--iris); }

/* ── Routine-builder quiz + photo step (IRIS funnel steps 1 and 2b) ──────────────
   The house look on the quiz. The markup keeps its style.css classes (photo_uploader.js
   and the tests hold them) and gains an ir- twin; every rule here is scoped under
   .iris-page so it wins on colour and shape whichever stylesheet loads first. Subtle on
   purpose: same shell, same question card, same flow. Only the surface changes. */
.iris-page.ir-quiz-page { min-height: calc(100dvh - 68px); padding-block: var(--s4) var(--s6); }
.iris-page .ir-quiz { width: min(680px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.iris-page .ir-quiz__progress { margin-bottom: var(--s3); }
.iris-page .ir-quiz__meta { display: flex; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; color: var(--iris); }
.iris-page .ir-quiz__meta span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s2); background: var(--iris); box-shadow: 0 0 12px var(--iris); vertical-align: middle; }
.iris-page .ir-quiz__acro { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; color: var(--on-void-mut); margin: 0 0 var(--s2); }
.iris-page .ir-quiz__acro-cap { color: var(--iris); }
.iris-page .ir-quiz__bar { height: 12px; border-radius: 6px; background: #3A2E37; border: 1px solid rgba(143, 232, 244, .35); overflow: hidden; }
.iris-page .ir-quiz__fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--rose), var(--iris)); box-shadow: 0 0 14px var(--iris); }
.iris-page .ir-quiz__hello { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); }
.iris-page .ir-quiz__signin { font-size: .9rem; color: var(--on-void-mut); margin: calc(-1 * var(--s2)) 0 var(--s3); }
.iris-page .ir-quiz__signin a { color: var(--iris); text-decoration: underline; text-underline-offset: 3px; }
.iris-page .ir-quiz__av { flex: none; width: auto; height: 64px; filter: drop-shadow(0 0 14px var(--iris-dim)); }
.iris-page .ir-quiz__bubble { background: var(--panel); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 10px 14px; box-shadow: none; }
.iris-page .ir-quiz__name { display: block; font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--iris); }
.iris-page .ir-quiz__line { display: block; font-size: .95rem; color: var(--on-void); line-height: 1.4; margin-top: 2px; }
.iris-page .ir-quiz__line + .ir-quiz__line { margin-top: .6rem; }
.iris-page .ir-quiz__card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: var(--s4) var(--s3); box-shadow: 0 30px 60px -40px rgba(0,0,0,.8); }
@media (min-width: 720px) { .iris-page .ir-quiz__card { padding: var(--s5) var(--s4); } }
.iris-page .ir-quiz__eyebrow { display: inline-flex; align-items: center; gap: var(--s2); padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--f-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); }
.iris-page .ir-quiz__eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--copper); flex: none; }
.iris-page .ir-quiz__card h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.12; margin-bottom: var(--s2); color: var(--on-void); }
.iris-page .ir-quiz__hint { color: var(--on-void-mut); font-size: .95rem; margin: 0 0 var(--s3); }
.iris-page .ir-quiz__count { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--f-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--iris); background: rgba(143, 232, 244, .08); border: 1px solid var(--iris-dim); border-radius: 999px; padding: 6px 12px; margin: 0 0 var(--s2); }
.iris-page .ir-quiz__count--done { color: var(--void); background: var(--iris); border-color: var(--iris); }
/* The secondary screen: the pill and "clear selections" sit on one row (Melodie, 2026-09-17). */
.iris-page .ir-quiz__count-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s2); }
.iris-page .ir-quiz__count-row .ir-quiz__count { margin: 0; }
/* A button (Space and Enter both work, read out as a button) that looks like the link she asked for. */
.iris-page .ir-quiz__clear { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; color: var(--iris); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.iris-page .ir-quiz__clear:hover { color: var(--on-void); }
.iris-page .ir-quiz__clear:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
.iris-page .ir-quiz__choices { display: grid; gap: var(--s2); }
.iris-page .ir-choice { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-hi); color: var(--on-void); cursor: pointer; box-shadow: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.iris-page .ir-choice:hover { transform: translateY(-1px); border-color: var(--copper); background: var(--panel-hi); box-shadow: none; }
.iris-page .ir-choice:has(input:checked) { border-color: var(--iris); background: rgba(143, 232, 244, .08); }
.iris-page .ir-choice input[type="radio"], .iris-page .ir-choice input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--iris); flex: none; }
.iris-page .ir-choice input:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
.iris-page .ir-choice--sm { padding: 10px 12px; font-size: .95rem; }
.iris-page .ir-choice--off { opacity: .4; }
.iris-page .ir-choice--off span { cursor: default; }
/* A greyed option that is still enabled (the primary screen's other radios) can still be tapped to move the pick. */
.iris-page .ir-choice--off input:not(:disabled) ~ span { cursor: pointer; }
/* The note under a greyed-out choice (why "yes" to oil is off for a short routine): readable, not dimmed with it. */
.iris-page .ir-choice__note { margin: calc(-1 * var(--s2) + 4px) 0 0 3rem; font-size: .85rem; color: var(--on-void-mut); }   /* 3rem = the card's padding + radio + gap, so the note lines up under the option text */
/* A concern her level has no move for: greyed, but its "Unlocks in Level N" / "Coming soon" line must stay readable. */
/* The name and radio dim exactly as far as any greyed-out choice (.ir-choice--off); the line under them does not. */
.iris-page .ir-choice--locked { opacity: 1; }
.iris-page .ir-choice--locked input, .iris-page .ir-choice--locked .ir-choice__name { opacity: .4; }
/* No hover lift or accent border on a row she cannot pick (two classes beat both themes' .ir-choice:hover). */
.iris-page .ir-choice--locked.ir-choice:hover, .iris-page.ir-light .ir-choice--locked.ir-choice:hover { transform: none; border-color: var(--line); cursor: default; }
.iris-page .ir-choice__lock { display: block; margin-top: 2px; font-size: .78rem; font-weight: 500; color: var(--on-void-mut); }
/* A note under a choice that stays pickable (the dry-hands oil note): full-strength text, not a greyed hint. */
.iris-page .ir-choice__warn { margin: calc(-1 * var(--s2) + 4px) 0 0 3rem; font-size: .85rem; color: var(--on-void); }
.iris-page .ir-choice:has(input:disabled) { cursor: default; }
.iris-page .ir-quiz__groups { display: grid; gap: var(--s1); margin-bottom: var(--s3); }
.iris-page .ir-quiz__group { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel-hi); }
.iris-page .ir-quiz__group[open] { border-color: var(--copper); }
.iris-page .ir-quiz__group-sum { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; list-style: none; user-select: none; font-family: var(--f-display); font-weight: 600; font-size: .95rem; color: var(--on-void); }
.iris-page .ir-quiz__group-sum::-webkit-details-marker { display: none; }
.iris-page .ir-quiz__group-head { display: grid; gap: 3px; min-width: 0; }
.iris-page .ir-quiz__group-pick { font-family: var(--f-body); font-weight: 600; font-size: .85rem; color: var(--iris); }
.iris-page .ir-quiz__group-pick[hidden], .iris-page .ir-quiz__group[open] .ir-quiz__group-pick { display: none; }
.iris-page .ir-quiz__group:not([open]):has(.ir-quiz__group-pick:not([hidden])) { border-color: var(--iris-dim); }
.iris-page .ir-quiz__group[open] .ir-quiz__group-sum { color: var(--copper); border-bottom: 1px solid var(--line); }
.iris-page .ir-quiz__chev { font-size: .8rem; color: var(--on-void-mut); transition: transform .2s; }
.iris-page .ir-quiz__group[open] .ir-quiz__chev { transform: rotate(180deg); color: var(--copper); }
.iris-page .ir-quiz__group-opts { padding: var(--s1) 12px 12px; display: grid; gap: 6px; }
.iris-page .ir-quiz__group-opts .ir-choice { background: var(--panel); }
/* Continue pressed with nothing picked (diagnostic.html #quizPickPrompt). */
.iris-page .ir-quiz__error { margin: var(--s4) 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--rose); background: rgba(231, 185, 177, .1); color: var(--rose); font-size: .95rem; }
.iris-page .ir-quiz__error[hidden] { display: none; }
.iris-page .ir-quiz__picked { display: grid; gap: 4px; margin: var(--s4) 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--iris-dim); background: rgba(143, 232, 244, .08); color: var(--on-void); font-size: .95rem; }
.iris-page .ir-quiz__picked strong { color: var(--iris); }
.iris-page .ir-quiz__picked-note { color: var(--on-void-mut); font-size: .875rem; }
.iris-page .ir-quiz__picked[hidden], .iris-page .ir-quiz__picked-note[hidden] { display: none; }
/* The health-concern tick at the end of the quiz (templates/_health_tick.html), and the line under it after a press
   without it. */
.iris-page .ir-quiz__card .ir-check--health { margin-top: var(--s4); }
.iris-page .ir-health-prompt[hidden] { display: none; }
.iris-page .ir-health-prompt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.iris-page .ir-quiz__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.iris-page .ir-quiz__actions--stack { display: grid; gap: var(--s2); }
.iris-page .ir-quiz__actions--stack form { margin: 0; }
.iris-page .ir-btn--ghost { color: var(--on-void); background: transparent; box-shadow: 0 0 0 1px var(--line) inset; }
.iris-page .ir-btn--ghost:hover { box-shadow: 0 0 0 1px var(--copper) inset; }
.iris-page .ir-btn--full { width: 100%; }
.iris-page .ir-quiz__restart-row { text-align: center; margin-top: var(--s3); }
.iris-page .ir-quiz__restart { font-size: .85rem; color: var(--on-void-mut); text-decoration: underline; text-underline-offset: 3px; }
.iris-page .ir-quiz__restart:hover { color: var(--iris); }
/* photo step */
.iris-page .ir-quiz__note { background: var(--panel-hi); border-left: 3px solid var(--copper); border-radius: 8px; padding: 12px 14px; font-size: .92rem; line-height: 1.55; color: var(--on-void); }
.iris-page .ir-quiz__mode legend { font-family: var(--f-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--on-void-mut); opacity: 1; margin-bottom: var(--s1); }
.iris-page .ir-quiz__mode-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: var(--s1); border: 1px solid var(--line); border-radius: 10px; background: var(--panel-hi); color: var(--on-void); cursor: pointer; }
.iris-page .ir-quiz__mode-opt:hover { border-color: var(--copper); }
.iris-page .ir-quiz__mode-opt:has(input:checked) { border-color: var(--iris); }
.iris-page .ir-quiz__mode-opt input[type="radio"] { accent-color: var(--iris); }
.iris-page .ir-quiz__mode-opt small { opacity: 1; color: var(--on-void-mut); }
.iris-page .ir-check span { font-size: .9rem; line-height: 1.55; opacity: 1; color: var(--on-void-mut); }
.iris-page .ir-check input[type="checkbox"] { accent-color: var(--go); }
.iris-page .ir-check a { color: var(--iris); text-decoration: underline; }
.iris-page .ir-quiz__drop { margin-top: var(--s3); border: 1px dashed var(--copper); border-radius: 12px; padding: var(--s4) var(--s3); text-align: center; background: var(--panel-hi); color: var(--on-void); cursor: pointer; }
.iris-page .ir-quiz__drop small { opacity: 1; color: var(--on-void-mut); }
.iris-page .ir-quiz__link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--iris); text-decoration: underline; font: inherit; }
.iris-page .ir-quiz__err { color: #FFC0D3; font-size: .9rem; margin-top: var(--s2); }
/* the photo she just added (discard-it path: a browser-side preview, nothing stored) and the
   scan light that plays over it when she continues; same light as the landing hero */
.iris-page .ir-photo-preview { width: min(100%, 220px); grid-column: 1 / -1; cursor: default; box-shadow: 0 0 0 1px var(--line), 0 0 24px var(--iris-dim); }
.iris-page .ir-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--iris-dim) 48%, var(--iris) 50%, var(--iris-dim) 52%, transparent 100%); mix-blend-mode: screen; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .iris-page .ir-scan { animation: ir-scan-photo 1.8s cubic-bezier(.4,0,.2,1) 0s 1 both; }
  @keyframes ir-scan-photo { 0% { opacity: 0; transform: translateY(-100%); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } }
}

/* ── welcome moment + home screen (funnel step 4, 2026-09-15) ── */
.iris-page .ir-welcome__clip { margin: var(--s2) 0 0; display: grid; gap: var(--s1); justify-items: start; }
.iris-page .ir-welcome__clip video { width: min(100%, 420px); border-radius: 14px; border: 1px solid var(--line); background: #000; }
.iris-page .ir-welcome__clip audio { width: min(100%, 420px); }
.iris-page .ir-welcome__cta { display: grid; gap: var(--s1); justify-items: start; }
@media (min-width: 720px) { .iris-page .ir-welcome__cta { grid-auto-flow: column; justify-content: start; align-items: center; } }
.iris-page .ir-steps { margin: var(--s2) 0 0; padding-left: 1.2rem; display: grid; gap: var(--s2); color: var(--ink-mut); line-height: 1.55; }
.iris-page .ir-steps strong { color: var(--ink); }
.iris-page .ir-steps em { font-style: normal; color: var(--iris); }

/* ── result page (funnel step 3): six months, proof, the unlock block ── */
.iris-page .ir-months { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); counter-reset: none; }
@media (min-width: 720px) { .iris-page .ir-months { grid-template-columns: 1fr 1fr; } }
.iris-page .ir-month { background: var(--paper-hi); border: 1px solid var(--paper-line); border-radius: 12px; padding: var(--s3); display: grid; gap: var(--s1); }
.iris-page .ir-month__num { color: var(--copper-ink); }
.iris-page .ir-month__lead { color: var(--ink); font-family: var(--f-display); font-weight: 600; }
.iris-page .ir-month__areas { color: var(--ink-mut); font-size: 1rem; line-height: 1.55; }
.iris-page .ir-blueprint .ir-prose + .ir-months { margin-top: var(--s4); }
.iris-page .ir-blueprint .ir-months + .ir-prose { margin-top: var(--s4); }
@media (min-width: 860px) { .iris-page .ir-cards--3 { grid-template-columns: 1fr 1fr 1fr; } }
.iris-page .ir-testimonial { margin: 0; display: grid; gap: var(--s2); }
.iris-page .ir-testimonial img { border-radius: 8px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* ── result page (funnel step 3): proof, the unlock block (the road map board has its own iris-board.css) ── */
/* the before-and-after photos (one at a time, arrows below): each a single image with both photos side by side. Own class names: .ir-ba-wrap is
   already the landing page's before/after photo */
.iris-page .ir-proof__wrap { max-width: 720px; }
.iris-page .ir-proof__who { margin-top: var(--s2); font-size: clamp(1.35rem, 3vw, 1.9rem); text-wrap: balance; }
.iris-page .ir-proof__slide { margin: 0; display: grid; gap: var(--s3); }
.iris-page .ir-proof__nav { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.iris-page .ir-proof__step { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--on-void); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.iris-page .ir-proof__step:hover { border-color: var(--iris); }
.iris-page .ir-proof__step:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
.iris-page .ir-proof__count { color: var(--on-void-mut); font-variant-numeric: tabular-nums; }
/* tall stacked photos (before on top) must not run past the screen, and small files are never stretched blurry */
.iris-page .ir-proof__one { display: block; border-radius: 8px; width: auto; max-width: 100%; height: auto; max-height: min(72vh, 640px); box-shadow: 0 0 0 1px var(--line); }
/* her testimonial screenshots, framed like the photo: at most a phone's width (most were taken on one, so the text reads at
   its own size; wider, a long message filled the desktop at twice that), never wider than the file itself */
.iris-page .ir-proof__words { display: grid; gap: var(--s2); justify-items: start; }
.iris-page .ir-proof__words img { display: block; width: auto; max-width: min(100%, 420px); height: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
/* The same widths the two rules above settle on once a photo has loaded, worked out from its known size BEFORE it
   loads, so its space is held. Without it a lazy photo is 0px tall until it arrives, and "Unlock my routine", which
   jumps past these photos to #unlock, landed short once they grew (2026-09-16). Each min() term is one limit of the
   loaded photo: the column, its own pixel width (never stretched blurry), and the height cap at its aspect ratio.
   object-fit keeps the photo's shape if its recorded size ever disagrees with the file (a stale size, a rotated
   PNG): the width is fixed from the record, so the height cap would otherwise squash it. No change when they agree. */
.iris-page .ir-proof__one[width][height] { width: min(100%, calc(var(--w) * 1px), calc(min(72vh, 640px) * var(--w) / var(--h))); object-fit: contain; }
.iris-page .ir-proof__words img[width][height] { width: min(100%, 420px, calc(var(--w) * 1px)); }
.iris-page .ir-proof__cap { display: grid; gap: var(--s2); }
.iris-page .ir-testimonial__quote { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--on-void); }
.iris-page .ir-proof__vary { margin-top: var(--s2); }
.iris-page .ir-unlock__wrap { max-width: 640px; }
.iris-page .ir-price { margin-top: var(--s3); font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; line-height: 1; display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.iris-page .ir-price__was { color: var(--on-void-mut); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; text-decoration-thickness: 2px; text-decoration-color: var(--go); }
.iris-page .ir-price__now { font-size: clamp(2.6rem, 6vw, 4.2rem); color: var(--on-void); }
.iris-page .ir-price__per { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-void-mut); }
.iris-page .ir-price__note { margin-top: var(--s1); color: var(--iris); font-family: var(--f-display); font-weight: 600; }
.iris-page .ir-unlock__form { margin-top: var(--s3); max-width: none; }
.iris-page .ir-checkout { margin-top: var(--s3); background: var(--paper); border-radius: 12px; padding: var(--s2); min-height: 320px; }

/* ── sticky buy bar ────────────────────────────── */
.ir-buybar { display: none; }
@media (max-width: 720px) {
  /* On the BODY, not the page wrapper: the app footer (legal links) sits after .iris-page and
     the fixed bar was covering its last lines at the end of the scroll. */
  body:has(.ir-buybar) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .ir-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(10,7,9,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .ir-buybar .ir-mono { color: var(--iris); }
  .ir-buybar .ir-btn { width: auto; min-height: 44px; padding: 10px 18px; }
  /* The consent banner (z-index 1200) is fixed to the same bottom edge; while it is up it
     would cover this bar completely, so the bar waits for the decision. */
  body:has(.consent-banner:not([hidden])) .ir-buybar { display: none; }
}

/* base.html's .main-content pads 4rem below every page; on this edge-to-edge page it read as a
   light band above the footer. */
body:has(.iris-page) .main-content { padding-bottom: 0; }

/* ── The post-subscription TAPElift offer (/membership/upsell) ─────────────────────────
   One column, centred, mobile first: the whole point is that the video, the price and the
   button are all reachable without hunting. The button is repeated after the bullet list
   because on a phone the first one is well above the fold by the time she has read them. */
.iris-page .ir-up .ir-wrap { display: block; max-width: 640px; padding-top: clamp(28px, 5vw, 56px); padding-bottom: var(--s6); text-align: center; }
.iris-page .ir-up__media { margin: 0 0 var(--s3); }
.iris-page .ir-up__media img { width: 100%; max-width: 560px; margin: 0 auto; border-radius: 14px; border: 1px solid var(--line); background: #000; }
/* Allison's video is PORTRAIT (1440x2560, shot on a phone). Sized by height as well as width,
   or a 560px-wide box makes it 996px tall on a laptop and pushes the button off the screen
   entirely. width:auto lets the browser honour both bounds and keep the aspect ratio. */
.iris-page .ir-up__media video { width: auto; max-width: min(100%, 420px); max-height: 66vh; margin: 0 auto; border-radius: 14px; border: 1px solid var(--line); background: #000; }
.iris-page .ir-up__cta { margin: 0 0 var(--s3); }
.iris-page .ir-up__btn { width: 100%; max-width: 480px; font-size: clamp(1rem, 2.6vw, 1.125rem); }
/* h1 on this page is a product name, not a headline: the landing page's clamp() tops out at
   4.8rem, which wraps "Fingertip TAPElift Guide" across three lines on a phone. */
.iris-page .ir-up__title { font-size: clamp(1.75rem, 5vw, 2.5rem); margin-bottom: var(--s2); }
.iris-page .ir-up .ir-em { margin: 0 auto var(--s2); max-width: none; }
.iris-page .ir-up .ir-lead { margin-bottom: var(--s3); color: var(--on-void-mut); }
.iris-page .ir-up__price { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.125rem, 3vw, 1.375rem); color: var(--on-void); }
.iris-page .ir-up__lifetime { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--iris); margin-top: var(--s1); }
.iris-page .ir-up__list { list-style: none; margin: var(--s4) auto; padding: var(--s3); max-width: 520px; display: grid; gap: var(--s2); text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: .9375rem; line-height: 1.5; color: var(--on-void); }
.iris-page .ir-up__total { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, 3.4vw, 1.5rem); margin-bottom: var(--s3); }
/* 4.6:1 on --void, so a member who decides against the offer can still read the way out. */
.iris-page .ir-up__no { display: inline-block; margin-top: var(--s3); color: var(--on-void-mut); font-size: .9375rem; text-decoration: underline; }
.iris-page .ir-up__no:hover { color: var(--on-void); }

/* The confirmation after she adds the TAPElift. It carries four short lines, so without a
   floor the dark panel stopped a third of the way down and left a band of bare page above the
   footer. Every test passed on it; only looking at it showed the stub. */
.iris-page .ir-done { min-height: min(68vh, 620px); display: flex; flex-direction: column;
                      justify-content: center; padding-top: clamp(32px, 6vw, 64px); }
.iris-page .ir-done__tick { font-size: 2.5rem; line-height: 1; color: var(--iris); margin-bottom: var(--s3); }
.iris-page .ir-done .ir-lead { color: var(--on-void-mut); margin-bottom: var(--s4); }

/* The offer waits for Allison's reveal: a label and a bar that fills with her video. */
.iris-page .ir-up__loading { max-width: 480px; margin: var(--s1) auto var(--s4); }
.iris-page .ir-up__loading-label { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .18em;
                                   text-transform: uppercase; color: var(--iris); margin-bottom: var(--s2); }
.iris-page .ir-up__bar { height: 8px; border-radius: 999px; background: var(--panel-hi);
                         border: 1px solid var(--line); overflow: hidden; }
.iris-page .ir-up__bar-fill { display: block; height: 100%; width: 0; border-radius: inherit;
                              background: linear-gradient(90deg, var(--iris), var(--go)); }
.iris-page .ir-up__offer--in { animation: ir-up-reveal .55s ease-out both; }
@keyframes ir-up-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .iris-page .ir-up__offer--in { animation: none; } }


/* The reveal page (templates/quiz_reveal.html): "You told IRIS:" then the root paragraph, one column. */
.iris-page .ir-reveal__told { margin-top: var(--s2); color: var(--on-void-mut); font-family: var(--f-mono); font-size: .85rem; letter-spacing: .04em; }
.iris-page .ir-reveal__root { margin-top: var(--s1); max-width: 34em; }

/* The email gate's "Step 2 of 2" (templates/diagnostic_email.html): two segments, both filled. */
.iris-page .ir-step { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--on-void-mut); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.iris-page .ir-step__bar { display: inline-flex; gap: 4px; }
.iris-page .ir-step__bar i { display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--line); }
.iris-page .ir-step__bar i.ir-step__on { background: var(--iris); }

/* The price page's payment block: what the price buys, and the ladder's dated lines. */
.iris-page .ir-price__closed { margin-top: var(--s2); color: var(--on-void); font-family: var(--f-display); font-weight: 600; }
.iris-page .ir-price__ends { margin-top: var(--s1); color: var(--on-void); font-size: .95rem; }
.iris-page .ir-unlock__list { margin: var(--s3) 0 var(--s2); padding-left: 1.2em; display: grid; gap: .5em; color: var(--on-void); line-height: 1.5; }

/* Allison's "Meet Iris" launch video (2026-09-21 through IRIS_LAUNCH_VIDEO_ENDS). Full-bleed,
   above everything else on the page including the mobile buybar (1100) and the shared
   .modal-backdrop (6000) - this is a prerequisite to the page, not a dialog on top of it. */
.ir-vg { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: var(--void); padding: var(--s2); overflow-y: auto; }
.ir-vg-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s3); width: 100%; max-width: 920px; margin: auto; }
.ir-vg-head { text-align: center; display: grid; gap: 10px; max-width: 34ch; }
.ir-vg-eyebrow { color: var(--iris); }
.ir-vg-headline { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.35rem); line-height: 1.15; color: var(--on-void); text-wrap: balance; }
/* "Founding Member Special Rate Closes In" countdown, top of the gate (Melodie, 2026-09-25). */
.ir-vg-countdown { width: 100%; max-width: 520px; text-align: center; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--iris-dim); }
.ir-vg-countdown[hidden] { display: none; }
.ir-vg-countdown__title { margin: 0 0 10px; font-family: var(--f-display); font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.25rem); line-height: 1.2; color: var(--on-void); text-wrap: balance; }
.ir-vg-countdown__units { display: flex; justify-content: center; gap: clamp(10px, 3vw, 22px); }
.ir-vg-countdown__unit { display: grid; gap: 4px; min-width: 3.2em; }
.ir-vg-countdown__num { font-family: var(--f-mono); font-weight: 600; font-size: clamp(1.6rem, 6vw, 2.25rem); line-height: 1; color: var(--iris); font-variant-numeric: tabular-nums; }
.ir-vg-countdown__label { color: var(--on-void-mut); font-size: .625rem; }
/* The beta-pricing timer's IRIS look lives in style.css (".iris-page .beta-cd"): this file names only ir- classes. */
.ir-beta-cd { padding-top: var(--s2); }
.ir-vg-frame { position: relative; width: 100%; padding: var(--s2); border-radius: 20px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.ir-vg-mono { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

/* The stage: tap anywhere to toggle play/pause, same as the routine player's own
   .player-stage (templates/results.html) - corner controls, not a row of buttons below. */
.ir-vg-stage { position: relative; cursor: pointer; }
.ir-vg-video { display: block; width: 100%; max-height: 70vh; border-radius: 12px; background: #000; pointer-events: none; }

/* Always-visible top row: time, a thin non-interactive progress pill (mirrors the routine
   player's .clip-progress-track - a position indicator, never a seek bar), mute, speed. */
.ir-vg-topbar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.ir-vg-time { flex: 0 0 auto; color: var(--on-void); text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.ir-vg-progress { flex: 1 1 auto; min-width: 24px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.28); overflow: hidden; }
.ir-vg-progress__fill { height: 100%; width: 0; background: var(--iris); }

.ir-vg-corner-btn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(10,7,9,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ir-vg-corner-btn:focus-visible { outline: 3px solid var(--iris); outline-offset: 2px; }
.ir-vg-speed-pill { flex: 0 0 auto; width: 62px; appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 34px; padding: 0 22px 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(10,7,9,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23F3E9E3' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--on-void); font-family: var(--f-mono); font-size: .72rem; cursor: pointer; }
.ir-vg-speed-pill:focus-visible { outline: 3px solid var(--iris); outline-offset: 2px; }

/* The big centered play icon: shown only before the first press. Purely visual
   (pointer-events: none) - the tap that starts it lands on the stage/video underneath. */
.ir-vg-play-big { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; line-height: 0; }
.ir-vg-stage.ir-vg-started .ir-vg-play-big { display: none; }

/* Bottom-center play/pause: hidden during playback, fades in only while paused-after-start -
   exactly .player-controls' own opacity-on-.paused pattern, so tapping to play makes it
   disappear again rather than sitting over the video the whole time. */
.ir-vg-bottom-controls { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.ir-vg-stage.ir-vg-started.ir-vg-paused .ir-vg-bottom-controls { opacity: 1; pointer-events: auto; }
.ir-vg-corner-btn--lg { width: 52px; height: 52px; background: var(--go); border-color: rgba(255,255,255,.25); }

.ir-vg-cta { display: flex; width: 100%; margin-top: var(--s3); text-align: center; }
.ir-vg-cta[hidden] { display: none; }
.ir-vg-error { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(222, 27, 135, .12); border: 1px solid rgba(222, 27, 135, .4); color: var(--on-void); font-size: .9rem; text-align: center; }
.ir-vg-error[hidden] { display: none; }
@media (max-width: 720px) {
  .ir-vg { padding: var(--s1); }
  .ir-vg-video { max-height: 52vh; }
  .ir-vg-topbar { top: 8px; left: 8px; right: 8px; }
}

/* The results-page email notice (templates/_quiz_email_popup.html). Same shell as the video gate: void backdrop,
   panel card, the page's own button. Hidden until its script opens it. z-index 1100 sits BELOW the consent banner (1200), so a first-time EEA visitor can
   still reach the banner while this is up. */
.ir-np { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: var(--s2); background: rgba(10,7,9,.78); overflow-y: auto; }
.ir-np[hidden] { display: none; }
.ir-np__card { width: 100%; max-width: 460px; margin: auto; padding: var(--s3); border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.5); color: var(--on-void); display: grid; gap: var(--s2); }
.ir-np__title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; text-wrap: balance; }
.ir-np__body { margin: 0; line-height: 1.55; }
.ir-np__body a { color: var(--iris); text-decoration: underline; }
.ir-np__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ir-np__actions button.ir-btn { border: 0; cursor: pointer; }
.ir-np__ghost { min-height: 52px; padding: 14px 20px; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--on-void); font-family: var(--f-display); font-size: 1rem; cursor: pointer; }
.ir-np__ghost:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; }

/* ---- The quiz in the member app's light look (Melodie 2026-10-06) ----
   A signed-in member builds routines inside the app, so her quiz and photo step wear the light
   Dashboard palette; a lead in the funnel keeps the dark IRIS look above. Same markup, same
   behaviour: the templates add .ir-light when the person is NOT taking the quiz as a lead
   (taking_quiz_as_lead / guest, both app.guest_quiz_open). Most of the swap is the tokens; the
   rules after them replace the few dark-only literals (cyan veils, glows, the mono labels).
   #6C63FF is 4.13:1 as lettering, so words use #5B52E0 and #6C63FF only fills shapes. */
.iris-page.ir-light {
  --void: #F8F8FB; --panel: #FFFFFF; --panel-hi: #F6F5FC; --line: rgba(16, 16, 24, .10);
  --on-void: #101018; --on-void-mut: #5A5866;
  --iris: #5B52E0; --iris-dim: rgba(108, 99, 255, .30); --copper: #5B52E0; --rose: #B8177A;
  --go: #D81F8F;
  --ir-graphic: #6C63FF; --ir-tint: #F1EFFF;
  background: linear-gradient(180deg, #F3F0FF 0, var(--void) 320px);
  color-scheme: light;
}
.iris-page.ir-light .ir-quiz__meta { font-family: var(--f-body); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.iris-page.ir-light .ir-quiz__meta span:last-child { color: var(--on-void-mut); font-weight: 500; }
.iris-page.ir-light .ir-quiz__meta span:first-child::before { display: none; }
.iris-page.ir-light .ir-quiz__acro { font-family: var(--f-body); font-size: .8rem; letter-spacing: 0; }
.iris-page.ir-light .ir-quiz__acro-cap { font-weight: 600; }
.iris-page.ir-light .ir-quiz__bar { height: 8px; border-radius: 99px; background: #E6E3F5; border: 0; }
.iris-page.ir-light .ir-quiz__fill { border-radius: 99px; background: var(--ir-graphic); box-shadow: none; }
.iris-page.ir-light .ir-quiz__av { filter: none; }
.iris-page.ir-light .ir-quiz__bubble { border-radius: 16px 16px 16px 4px; box-shadow: 0 2px 16px rgba(0, 0, 0, .06); }
.iris-page.ir-light .ir-quiz__name { font-family: var(--f-display); font-weight: 600; font-size: .78rem; letter-spacing: 0; text-transform: none; }
.iris-page.ir-light .ir-quiz__card { border-radius: 16px; box-shadow: 0 2px 16px rgba(0, 0, 0, .06); }
.iris-page.ir-light .ir-quiz__eyebrow { font-family: var(--f-body); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--go); }
.iris-page.ir-light .ir-quiz__eyebrow::before { display: none; }
.iris-page.ir-light .ir-quiz__count { font-family: var(--f-body); font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--ir-tint); border-color: var(--iris-dim); }
.iris-page.ir-light .ir-quiz__count--done { color: #FFFFFF; background: var(--iris); border-color: var(--iris); }
.iris-page.ir-light .ir-choice:hover { border-color: var(--ir-graphic); }
.iris-page.ir-light .ir-choice:has(input:checked) { border-color: var(--ir-graphic); background: var(--ir-tint); font-weight: 600; }
.iris-page.ir-light .ir-quiz__group[open] { border-color: var(--ir-graphic); background: var(--panel); }
.iris-page.ir-light .ir-quiz__group:not([open]):has(.ir-quiz__group-pick:not([hidden])) { border-color: var(--ir-graphic); }
.iris-page.ir-light .ir-quiz__error { background: #FDECF4; }
.iris-page.ir-light .ir-quiz__picked { background: var(--ir-tint); }
.iris-page.ir-light .ir-health-prompt { color: var(--rose); }
.iris-page.ir-light .ir-btn { box-shadow: 0 8px 20px -10px rgba(216, 31, 143, .6); }
.iris-page.ir-light .ir-btn--ghost { box-shadow: 0 0 0 1px var(--line) inset; }
.iris-page.ir-light .ir-btn--ghost:hover { box-shadow: 0 0 0 1px var(--ir-graphic) inset; }
/* photo step */
.iris-page.ir-light .ir-quiz__mode legend { font-family: var(--f-body); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.iris-page.ir-light .ir-quiz__err { color: var(--rose); }
.iris-page.ir-light .ir-photo-preview { box-shadow: 0 0 0 1px var(--line), 0 2px 16px rgba(0, 0, 0, .08); }