/* NuLevels shared scanner module — styles. Extracted verbatim from /start; host pages own the
   shell (tokens, body, .container, header, footer). Loaded on demand so a landing page's hero is
   never restyled before the scan starts. */
#nl-scan{ flex:1 1 auto; width:100%; display:flex; }
#nl-scan[hidden]{ display:none !important; }
.view{ width:100%; display:none; }
.view.active{ display:flex; align-items:center; }
.stage{ width:100%; padding:36px 0 calc(44px + env(safe-area-inset-bottom,0px)); text-align:center; }
h1{ font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; font-size:34px; line-height:1.1; color:var(--ink); margin:0 0 12px; }
.lede{ font-family:var(--serif); font-size:18px; line-height:1.4; color:var(--ink-2); margin:0 0 8px; }
.reassure{ font-size:14px; color:var(--ink-2); margin:0 0 26px; }

/* primary button */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 30px;
  width:100%; max-width:420px; background:var(--sage-deep); color:#fff; font-family:var(--serif);
  font-size:18px; font-weight:500; border-radius:10px; border:0; cursor:pointer;
  box-shadow:0 8px 22px rgba(62,88,72,0.22); transition:background .15s, transform .05s; }
.btn:hover{ background:var(--sage-dark); color:#fff; }
.btn:active{ transform:translateY(1px); }
.btn.secondary{ background:transparent; color:var(--sage-dark); border:1px solid rgba(90,120,104,0.4);
  box-shadow:none; min-height:var(--tap); font-family:var(--sans); font-size:15px; }
.btn.secondary:hover{ background:var(--sage-light); color:var(--sage-deep); }
.microcopy{ margin:14px 0 0; font-size:14px; color:var(--ink-2); }

/* Quiet editorial accent + readability pass on the SNAP screen only (scoped to #view-snap so
   other funnel screens are untouched). Mirrors the homepage masthead composition + lede scale. */
.hero-rule{ width:40px; height:2px; border-radius:2px; background:rgba(123,154,140,0.55); margin:0 auto 22px; }
#view-snap h1{ font-size:37px; line-height:1.05; margin-bottom:14px; }
#view-snap .lede{ font-size:20px; line-height:1.5; color:var(--ink-lede); margin-bottom:10px; }
#view-snap .reassure{ font-size:14.5px; margin-bottom:24px; }
@media (min-width:768px){
  #view-snap h1{ font-size:48px; }
  #view-snap .lede{ font-size:23px; }
  .hero-rule{ width:48px; margin-bottom:26px; }
}

/* Desktop entry screen (#view-desk): shown only to true desktop visitors (wide, no touch).
   Mobile/phone capture is untouched — desktop sees the value prop first, then two clear
   paths: snap-with-your-phone (QR + copy link) and type-what-you-take (no photo, no phone). */
#view-desk .stage{ max-width:900px; }
#view-desk h1{ font-size:42px; line-height:1.08; margin-bottom:12px; }
#view-desk .lede{ font-size:19px; line-height:1.5; color:var(--ink-lede); margin:0 auto 30px; max-width:580px; }
.desk-paths{ display:grid; grid-template-columns:1fr 1fr; gap:20px; text-align:left; max-width:860px; margin:0 auto; align-items:stretch; }
.desk-card{ background:var(--card); border:1px solid rgba(123,154,140,0.22); border-radius:18px;
  padding:26px 24px; box-shadow:0 14px 40px rgba(91,120,104,0.10); display:flex; flex-direction:column; }
.desk-card-primary{ border-color:rgba(90,120,104,0.45); }
.desk-card h2{ font-family:var(--serif); font-weight:500; font-size:21px; line-height:1.2; margin:0 0 8px; color:var(--ink); }
.desk-card p{ font-size:15px; color:var(--ink-2); margin:0 0 16px; line-height:1.5; }
.desk-badge{ align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:#fff; background:var(--sage-deep); border-radius:999px; padding:4px 10px; margin-bottom:12px; }
.desk-qr{ width:184px; height:184px; margin:2px auto 8px; background:#fff; border:1px solid rgba(123,154,140,0.18); border-radius:12px; padding:10px; }
.desk-qr svg{ width:100%; height:100%; display:block; }
.desk-qr-cap{ text-align:center; font-size:13px; color:var(--ink-2); margin:0 0 16px !important; font-weight:600; }
.desk-card .btn{ margin-top:auto; }
.desk-card .save-msg{ margin-top:10px; }
@media (max-width:760px){ #view-desk h1{ font-size:34px; } .desk-paths{ grid-template-columns:1fr; } }

/* ===== PROPOSED 2026-06-20 funnel fix #4 — desktop type-first =====
   Lead with "Type what you take" (the only desktop path that needs no phone); demote
   QR-to-phone + upload-from-computer to a clearly secondary card. order:-1 floats the
   type card to the lead (left) position without reordering the inline QR SVG. */
.desk-card-lead{ order:-1; background:linear-gradient(180deg,#F3F7F4 0%, var(--card) 100%);
  border-color:rgba(90,120,104,0.55); box-shadow:0 18px 46px rgba(62,88,72,0.16);
  justify-content:center; }
.desk-card-lead h2{ font-size:24px; }
/* card is now heading + badge + button only; center the group so the equal-height card reads balanced */
.desk-card-lead .btn{ margin-top:20px; }
.desk-card-secondary{ background:#FBFAF7; border-color:rgba(123,154,140,0.20);
  box-shadow:0 8px 22px rgba(91,120,104,0.07); }
.desk-card-secondary h2{ font-size:18px; color:var(--ink-2); }
.desk-card-secondary .desk-qr{ width:150px; height:150px; }

/* ===== PROPOSED 2026-06-20 funnel fix #1 — mobile co-equal entry points =====
   Scoped to #view-snap (phones). Two first-class choices of EQUAL visual weight: snap
   (camera) and type (no camera, no bottles needed; same engine). The One-at-a-time /
   Upload-all-at-once control is demoted to a small sub-toggle under the Snap option
   (a snap sub-choice, not a top-level decision). Desktop (#view-desk) is untouched. */
#view-snap .snap-choices{ display:grid; gap:26px; max-width:440px; margin:6px auto 0; }
#view-snap .snap-choice{ background:var(--card); border:1px solid rgba(123,154,140,0.26);
  border-radius:18px; padding:20px 18px; box-shadow:0 10px 30px rgba(91,120,104,0.10); text-align:center; }
/* standalone "OR" between the two co-equal cards: NuLevels green, centered, thin rules flanking */
#view-snap .snap-or{ display:flex; align-items:center; gap:16px; width:100%; max-width:300px; margin:2px auto; }
#view-snap .snap-or::before, #view-snap .snap-or::after{ content:""; flex:1; height:1px; background:rgba(62,88,72,0.22); }
#view-snap .snap-or span{ font-family:var(--serif); font-weight:600; font-size:17px; letter-spacing:0.18em; color:var(--sage-deep); }
#view-snap .snap-choice-title{ font-family:var(--serif); font-weight:500; font-size:21px; line-height:1.2; margin:0 0 5px; color:var(--ink); }
#view-snap .snap-choice-sub{ font-size:14px; color:var(--ink-2); margin:0 0 15px; line-height:1.45; }
#view-snap .snap-choice .btn{ margin:0 auto; }
#view-snap .snap-subtoggle{ margin:14px auto 0; max-width:300px; }
#view-snap .snap-subtoggle .capture-mode-btn{ font-size:13px; padding:8px 6px; min-height:40px; }

/* ===== Campaign-aware hero (message-matched per utm_campaign) =====
   Presentational ONLY. /start receives utm_campaign on every ad click; a matching
   HERO_VARIANTS block (see init script) fills a tailored eyebrow + headline + subhead
   on the active entry view (#view-snap mobile / #view-desk desktop). Unknown/absent
   campaign -> these stay hidden and the default hero renders byte-unchanged. Kept TIGHT,
   and the subhead is dropped on short phones, so the scan entry (snap/type/upload) stays
   ABOVE THE FOLD (preserve the 0c2ec15 top-align win). */
#view-snap .camp-eyebrow, #view-desk .camp-eyebrow{
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--sage-dark); margin:0 0 15px; }
#view-snap .camp-sub, #view-desk .camp-sub{
  font-family:var(--serif); font-size:16px; line-height:1.4; color:var(--ink-lede);
  max-width:430px; margin:0 auto 18px; }
@media (min-width:768px){
  #view-snap .camp-eyebrow, #view-desk .camp-eyebrow{ font-size:14px; }
  #view-snap .camp-sub, #view-desk .camp-sub{ font-size:19px; line-height:1.45; max-width:560px; margin:0 auto 22px; }
}
/* short phones: drop the subhead and tighten the eyebrow so the entry holds above the fold */
@media (max-height:740px) and (max-width:767px){
  #view-snap .camp-sub{ display:none !important; }
  #view-snap .camp-eyebrow{ font-size:12px; margin-bottom:10px; letter-spacing:0.14em; }
}

/* ===== Shared two-card action component (#view-snap mobile + #view-desk desktop) =====
   ONE identical card used in BOTH views: same border, radius, padding, shadow, min-height.
   Only the icon and text differ. The card itself is the tap target; the chevron signals it.
   No separate buttons, no duplicated labels. Mobile = stacked; desktop = side by side. */
.start-cards{ display:grid; gap:14px; max-width:440px; width:100%; margin:18px auto 0; }
.start-card{ display:flex; align-items:center; gap:15px; width:100%; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid rgba(90,120,104,0.28); border-radius:18px; padding:18px 18px;
  box-shadow:0 10px 30px rgba(91,120,104,0.10); min-height:86px; font-family:var(--sans);
  -webkit-tap-highlight-color:transparent; transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.start-card:hover{ border-color:rgba(90,120,104,0.55); box-shadow:0 16px 40px rgba(62,88,72,0.15); }
.start-card:active{ transform:translateY(1px); }
.start-card:focus-visible{ outline:2px solid var(--sage-deep); outline-offset:3px; }
.sc-icon{ flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border-radius:13px; background:#EEF6F2; color:var(--sage-deep); }
.sc-icon svg{ width:25px; height:25px; }
.sc-text{ flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0; }
.sc-label{ font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.15; color:var(--ink); }
.sc-sub{ font-size:13.5px; line-height:1.35; color:var(--ink-2); }
.sc-chev{ flex:0 0 auto; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--sage-dark); opacity:0.65; }
.sc-chev svg{ width:20px; height:20px; }
.start-free{ text-align:center; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--sage-dark); margin:14px auto 0; }
/* ===== Standalone capital "OR" between the two action cards (Will's standing preference) =====
   Used between the two .start-card tap targets on /start (#view-snap mobile + #view-desk desktop)
   and on the /stack-check static entry. Stacked layout: the word OR centered with a thin
   brand-green hairline flanking each side, as a grid row between the cards. Serif + sage to match
   the page typography. Desktop side-by-side drops the rules and centers the word in the middle
   column (see the #view-desk overrides below). */
.start-or{ display:flex; align-items:center; gap:16px; width:100%; max-width:300px; margin:0 auto; }
.start-or::before, .start-or::after{ content:""; flex:1; height:1px; background:rgba(62,88,72,0.22); }
.start-or span{ font-family:var(--serif); font-weight:600; font-size:17px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--sage-deep); }
/* desktop: the two cards side by side, equal width, with the OR centered in a middle auto column —
   identical card styling, only the layout differs */
#view-desk .start-cards{ grid-template-columns:1fr auto 1fr; max-width:720px; gap:20px; align-items:center; }
#view-desk .start-card{ min-height:98px; padding:22px 20px; }
#view-desk .start-or{ max-width:none; align-self:center; }
#view-desk .start-or::before, #view-desk .start-or::after{ display:none; }
@media (max-width:760px){ #view-desk .start-cards{ grid-template-columns:1fr; } }
/* desktop snap-with-your-phone handoff (hidden until the camera card is tapped) */
.desk-snap-reveal{ max-width:360px; margin:24px auto 0; text-align:center; }
.desk-snap-reveal[hidden]{ display:none; }
.desk-snap-reveal-cap{ font-size:14px; color:var(--ink-2); line-height:1.45; margin:0 auto 14px; max-width:320px; }

/* ===== PROPOSED 2026-06-20 funnel fix #4 v3 — desktop OR + matched pair =====
   Layered on the v2 type-first desktop. (a) standalone green "OR" between the two boxes,
   matched to the mobile #view-snap OR (NuLevels green, uppercase, serif, same size/tracking),
   vertically centered in the gap; (b) wider gap so the OR has room and the row is balanced;
   (c) the two boxes restyled as a MATCHED, PARALLEL pair (identical container: border, radius,
   padding, shadow, equal height/weight) while KEEPING "Type what you take" as the lead — left
   position, NO PHONE NEEDED badge, primary-filled button. Light + additive: delete this block
   to fall back to the v2 contrast. */
.desk-paths{ grid-template-columns:1fr auto 1fr; gap:40px; }
.desk-card-lead{ order:1; }
.desk-or{ order:2; align-self:center; display:flex; align-items:center; justify-content:center; }
.desk-card-secondary{ order:3; }
.desk-or span{ font-family:var(--serif); font-weight:600; font-size:17px; letter-spacing:0.18em;
  color:var(--sage-deep); text-transform:uppercase; }
/* matched parallel pair — identical containers; lead marked only by the badge + primary button */
.desk-card-lead, .desk-card-secondary{ background:var(--card); border:1px solid rgba(90,120,104,0.28);
  border-radius:18px; padding:26px 24px; box-shadow:0 14px 40px rgba(91,120,104,0.10); }
.desk-card-lead h2, .desk-card-secondary h2{ font-size:21px; color:var(--ink); }
@media (max-width:760px){ .desk-paths{ grid-template-columns:1fr; gap:22px; } }

/* NuRecord card */
.nurecord{ background:var(--card); border:1px solid rgba(123,154,140,0.22); border-radius:20px; padding:22px;
  text-align:left; box-shadow:0 18px 48px rgba(91,120,104,0.12); max-width:440px; margin:0 auto 26px; position:relative; overflow:hidden; }
.nr-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.nr-title{ font-family:var(--serif); font-size:18px; font-weight:500; color:var(--ink); }
.nr-pill{ font-size:12px; font-weight:600; white-space:nowrap; color:#fff; background:var(--sage-deep); border-radius:999px; padding:5px 11px; }
.nr-rows{ display:grid; gap:10px; }
.nr-row{ display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:14px; border:1px solid transparent; }
.nr-icon{ flex-shrink:0; width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; }
.nr-icon svg{ width:18px; height:18px; }
.nr-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.nr-label{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; }
.nr-sub{ font-size:13px; color:var(--ink-2); line-height:1.4; }
/* TYPED AI RESOLVE: expanded names + dose ranges + interaction notes that populate
   in place once the resolve-stack response lands. The raw record renders first; these
   fields fade in when enriched. */
.nr-notes{ display:flex; flex-direction:column; gap:3px; margin-top:5px; }
.nr-note{ font-size:12.5px; line-height:1.4; color:var(--ink-2); padding:5px 9px; border-radius:9px;
  background:#F1F4F2; border:1px solid rgba(123,154,140,0.26); }
.nr-row.nr-resolved{ align-items:flex-start; }
.nr-row.nr-resolved .nr-icon{ margin-top:1px; }
.nr-row.nr-resolved .nr-label, .nr-row.nr-resolved .nr-sub, .nr-row.nr-resolved .nr-notes{
  animation:nrResolveIn .35s ease both; }
@keyframes nrResolveIn{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .nr-row.nr-resolved .nr-label, .nr-row.nr-resolved .nr-sub, .nr-row.nr-resolved .nr-notes{ animation:none; } }
.nr-dose{ margin-left:auto; flex-shrink:0; align-self:center; font-size:13px; font-weight:600; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; padding-left:10px; }
.nr-row.good{ background:#EEF4EF; border-color:rgba(74,124,89,0.28); }
.nr-row.good .nr-icon{ background:#DCEAE0; color:var(--success); }
.nr-row.watch{ background:#FBEFE9; border-color:rgba(201,123,92,0.30); }
.nr-row.watch .nr-icon{ background:#F6E0D6; color:var(--warning); }
.nr-row.add{ background:#EDF1EE; border-color:rgba(90,120,104,0.28); }
.nr-row.add .nr-icon{ background:#DBE4DE; color:var(--sage-deep); }
/* SAFETY surface: a genuine danger (UL/overdose, interaction) is ALWAYS shown free
   and unblurred, in plain language. Only the full detail + fix sit behind unlock. */
.nr-row.danger{ background:#FBE9E6; border-color:rgba(190,72,48,0.40); }
.nr-row.danger .nr-icon{ background:#F6D2CA; color:#B23A22; }
.nr-row.danger .nr-label{ color:#8E2E1B; }
/* LOCKED teaser: a real, detected OPTIMIZATION the user can SEE exists but not read */
.nr-row.locked{ background:#F1F4F2; border-color:rgba(123,154,140,0.32); position:relative; }
.nr-row.locked .nr-icon{ background:#E2E8E4; color:var(--sage-deep); }
.nr-row.locked .nr-label{ color:var(--ink); }
.nr-row.locked .nr-sub{ color:var(--ink-2); }
.nr-row.summary{ background:transparent; border:none; padding:4px 4px 2px; align-items:flex-start; }
.nr-row.summary .nr-icon{ background:#E2E8E4; color:var(--sage-deep); }
.nr-row.summary .nr-label{ font-size:14.5px; font-weight:700; }
.nr-row.summary .nr-sub{ font-size:13px; }

/* build scan sweep */
.nurecord.building .nr-row{ opacity:0; transform:translateY(8px); animation:rowin .5s ease forwards; }
.nurecord.building .nr-rows .nr-row:nth-child(1){ animation-delay:.9s; }
.nurecord.building .nr-rows .nr-row:nth-child(2){ animation-delay:1.4s; }
.nurecord.building .nr-rows .nr-row:nth-child(3){ animation-delay:1.9s; }
.scan-sweep{ position:absolute; left:16px; right:16px; top:62px; height:46px; border-radius:12px; opacity:0; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(123,154,140,0.30),transparent); }
.nurecord.building .scan-sweep{ animation:sweep 1.6s ease-in-out infinite; }
@keyframes rowin{ to{ opacity:1; transform:none; } }
@keyframes sweep{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:.9; } 85%{ opacity:.9; } 100%{ transform:translateY(150px); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .nurecord.building .nr-row{ opacity:1; transform:none; animation:none; } .scan-sweep{ display:none; } }

/* save sheet */
.save-sheet{ max-width:440px; margin:0 auto; background:var(--card); border:1px solid rgba(123,154,140,0.22);
  border-radius:18px; padding:20px; box-shadow:0 10px 30px rgba(91,120,104,0.10); text-align:left; }
.save-sheet h2{ font-family:var(--serif); font-weight:500; font-size:20px; margin:0 0 4px; color:var(--ink); }
.save-sheet p{ font-size:14px; color:var(--ink-2); margin:0 0 14px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field input{ width:100%; min-height:52px; padding:0 16px; font-size:16px; font-family:var(--sans); color:var(--ink);
  background:#fff; border:1.5px solid rgba(90,120,104,0.35); border-radius:10px; }
.field input:focus{ outline:none; border-color:var(--sage-deep); box-shadow:0 0 0 3px rgba(62,88,72,0.12); }
.field .btn{ margin-top:4px; }
.save-note{ font-size:12.5px; color:var(--ink-2); margin:12px 0 0; }
.save-msg{ font-size:13.5px; margin:12px 0 0; min-height:1px; }
.save-msg.err{ color:#B85450; }
.save-msg.ok{ color:var(--success); }

/* pre-signup CVP on #view-payoff: the four-pillar value of saving the Record, read before
   the save CTA. Editorial card to match .save-sheet; no price/checkout styling lives here. */
.payoff-cvp{ max-width:440px; margin:18px auto 0; background:var(--card); border:1px solid rgba(123,154,140,0.22);
  border-radius:18px; padding:20px; box-shadow:0 10px 30px rgba(91,120,104,0.10); text-align:left; }
.payoff-cvp .cvp-title{ font-family:var(--serif); font-weight:500; font-size:20px; margin:0 0 4px; color:var(--ink); }
.payoff-cvp .cvp-lede{ font-size:13.5px; color:var(--ink-2); margin:0 0 16px; line-height:1.55; }
.cvp-pillars{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.cvp-pillar{ display:grid; gap:3px; }
.cvp-num{ font-size:11.5px; font-weight:700; color:var(--sage-dark); text-transform:uppercase; letter-spacing:0.04em; }
.cvp-head{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; }
.cvp-body{ font-size:13px; color:var(--ink-2); line-height:1.5; }

/* ── view-payoff hoist: collapse the Record to a compact summary + lay the four pillars as a
   2x2 card grid, so the value + save CTA rise above the fold. EVERY selector is scoped under
   #view-payoff so nothing bleeds into #view-home or /app — the shared .nurecord / .nr-* / base
   .cvp-* styles are left untouched. No price/checkout styling lives here (capture-first). ── */
/* compact Record summary (DEFAULT state); the full #po-rows list is hidden until toggled */
#view-payoff .po-summary{ display:grid; gap:10px; }
#view-payoff .po-sum-head{ font-size:14px; font-weight:700; color:var(--ink); letter-spacing:0.01em; }
#view-payoff .po-sum-rows{ display:grid; gap:8px; }
#view-payoff .po-sum-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
  background:#EEF4EF; border:1px solid rgba(74,124,89,0.22); }
#view-payoff .po-sum-name{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; min-width:0; }
#view-payoff .po-sum-dose{ margin-left:auto; flex-shrink:0; font-size:13px; font-weight:600; color:var(--ink-2);
  white-space:nowrap; font-variant-numeric:tabular-nums; padding-left:10px; }
#view-payoff .po-toggle{ align-self:flex-start; appearance:none; -webkit-appearance:none; background:none; border:none;
  cursor:pointer; padding:4px 0; font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--sage-deep);
  text-decoration:underline; text-underline-offset:3px; }
#view-payoff .po-toggle:hover{ color:var(--sage-dark); }
/* the full list overrides .nr-rows{display:grid} when collapsed, and gets a little air when shown */
#view-payoff #po-rows{ margin-top:12px; }
#view-payoff #po-rows[hidden]{ display:none; }
/* four pillars as a 2x2 card grid (mobile AND desktop) */
#view-payoff .cvp-pillars{ grid-template-columns:1fr 1fr; gap:10px; }
#view-payoff .cvp-pillar{ background:#F4F7F5; border:1px solid rgba(123,154,140,0.22); border-radius:12px;
  padding:12px 13px; gap:3px; }
#view-payoff .cvp-pillar .cvp-num{ color:var(--sage-deep); }
/* desktop (>=1024px): two columns above the fold — Record summary left (~56%), 2x2 grid right
   (~40%). Below 1024px the wrapper is a plain block, so the sections stack as before. */
@media (min-width:1024px){
  #view-payoff .payoff-twocol{ display:block; }
  #view-payoff .payoff-cvp{ max-width:480px; }
}
/* 2026-06-27 #view-payoff redesign: hide Record summary, pillars centerpiece, green serif titles, capture centered, sticky CTA mobile-only */
#view-payoff .nurecord{ display:none !important; }
#view-payoff .cvp-head{ font-family:var(--serif); font-weight:500; font-size:16px; line-height:1.25; color:#3E5848; }
#view-payoff .cvp-title .cvp-accent{ color:#BF893D; }
#view-payoff .save-sheet{ text-align:center; }
@media (min-width:768px){
  .payoff-cta-bar{ display:none !important; }
  body.payoff-cta-open #view-payoff .stage{ padding-bottom:0; }
}
/* 2026-06-30 mobile hoist: lift the email/save ask ABOVE the four-pillar grid + record on
   #view-payoff so the Create-free-account CTA sits within the first viewport (above ~664px) on
   typed-mobile (most traffic), which previously had to scroll ~772px past the pillars to reach it.
   Pure reorder of EXISTING elements via flex `order` — no copy change, no new functionality, and
   capture-first holds (no price here). Mobile-only (<=767px) so desktop and the shared
   .save-sheet/.field chooser styles used on /start + /stack-check are untouched. */
@media (max-width:767px){
  #view-payoff .stage{ display:flex; flex-direction:column; }
  #view-payoff .stage > h1{ order:1; }
  #view-payoff .stage > .lede{ order:2; }
  #view-payoff .stage > .save-sheet{ order:3; margin-top:4px; }
  #view-payoff .stage > .payoff-twocol{ order:4; margin-top:22px; }
  #view-payoff .stage > .payoff-addmore{ order:5; }
}

/* post-activation tiles */
.saved-bar{ max-width:440px; margin:0 auto 20px; display:flex; align-items:center; gap:12px; text-align:left;
  background:#EEF4EF; border:1px solid rgba(74,124,89,0.28); border-radius:14px; padding:14px 16px; }
.saved-bar .nr-icon{ background:#DCEAE0; color:var(--success); }
.saved-bar .sb-text b{ font-size:15px; color:var(--ink); display:block; }
.saved-bar .sb-text span{ font-size:13px; color:var(--ink-2); }
.tiles{ display:grid; gap:12px; grid-template-columns:1fr; max-width:440px; margin:0 auto; }
@media (min-width:560px){ .tiles{ grid-template-columns:1fr 1fr; } }
.tile{ display:flex; align-items:center; gap:13px; min-height:var(--tap); text-align:left;
  background:var(--card); border:1px solid rgba(123,154,140,0.20); border-radius:14px; padding:16px; color:var(--ink); }
.tile:hover{ border-color:var(--sage-base); color:var(--ink); box-shadow:0 6px 18px rgba(91,120,104,0.08); }
.tile .nr-icon{ background:var(--sage-light); color:var(--sage-deep); }
.tile b{ font-size:15px; font-weight:600; display:block; }
.tile span{ font-size:13px; color:var(--ink-2); }

/* premium */
.journey{ max-width:440px; margin:0 auto; background:var(--card); border:1px solid rgba(123,154,140,0.22);
  border-radius:20px; padding:26px 22px; box-shadow:0 18px 48px rgba(91,120,104,0.12); text-align:center; }
.journey h2{ font-family:var(--serif); font-weight:500; font-size:24px; margin:0 0 8px; color:var(--ink); }
.journey .price{ font-family:var(--serif); font-size:44px; font-weight:500; color:var(--sage-deep); margin:6px 0 2px; line-height:1; }
.journey .price-sub{ font-size:14px; color:var(--ink-2); margin:0 0 18px; }
.journey .btn{ margin:0 auto; }
.journey ul{ list-style:none; padding:0; margin:18px 0 4px; text-align:left; display:grid; gap:10px; }
.journey li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink); }
.journey li svg{ width:18px; height:18px; color:var(--success); flex-shrink:0; margin-top:2px; }

/* P1: sticky premium CTA — surfaces the upgrade at the value moment (the saved record),
   mobile-first, always visible on the post-activation home without scrolling. Same
   destination as the journey card (beginJourney); adds no step. */
.home-cta-bar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  background:rgba(250,246,240,0.97); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-top:1px solid rgba(123,154,140,0.25); box-shadow:0 -6px 20px rgba(91,120,104,0.12);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); }
.home-cta-bar.show{ display:block; }
.home-cta-bar .inner{ max-width:480px; margin:0 auto; display:flex; align-items:center; gap:12px; }
.home-cta-bar .hc-text{ flex:1; min-width:0; text-align:left; }
.home-cta-bar .hc-text b{ display:block; font-size:14px; color:var(--ink); line-height:1.25; }
.home-cta-bar .hc-text span{ font-size:12px; color:var(--ink-2); }
.home-cta-bar .btn{ width:auto; min-width:148px; min-height:48px; margin:0; padding:0 20px; font-size:16px; box-shadow:none; }
body.home-cta-open #view-home .stage{ padding-bottom:104px; }

/* Sticky save CTA on #view-payoff (pre-signup stranger view): mirrors .home-cta-bar but is
   scoped to the payoff view via body.payoff-cta-open (set in showView). Surfaces the existing
   save/create-account action so it stays in reach while the four pillars are scrolled. Readable
   at 380px and on desktop. Capture-first: no price/checkout lives here. */
.payoff-cta-bar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  background:rgba(250,246,240,0.97); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-top:1px solid rgba(123,154,140,0.25); box-shadow:0 -6px 20px rgba(91,120,104,0.12);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); }
.payoff-cta-bar.show{ display:block; }
.payoff-cta-bar .inner{ max-width:480px; margin:0 auto; display:flex; align-items:center; gap:12px; }
.payoff-cta-bar .pc-text{ flex:1; min-width:0; text-align:left; }
.payoff-cta-bar .pc-text b{ display:block; font-size:14px; color:var(--ink); line-height:1.25; }
.payoff-cta-bar .pc-text span{ font-size:12px; color:var(--ink-2); }
.payoff-cta-bar .btn{ width:auto; min-width:148px; min-height:48px; margin:0; padding:0 20px; font-size:16px; box-shadow:none; }
body.payoff-cta-open #view-payoff .stage{ padding-bottom:104px; }


@media (min-width:768px){
  h1{ font-size:46px; } .lede{ font-size:21px; } body{ font-size:18px; }
  /* Desktop balance: a wider, more present centered column with the stage anchored in the
     vertical centre, so each funnel screen reads as intentional on wide desktop rather than
     a narrow mobile column floating high. Mobile (<768px) is unchanged. */
  .container{ max-width:680px; }
  .view.active{ min-height:calc(100vh - 188px); min-height:calc(100dvh - 188px); }
  .nurecord, .save-sheet, .journey, .saved-bar, .btn{ max-width:480px; }
  .tiles{ max-width:480px; }
}
/* ---- tall-phone first paint: #view-snap is the screen mobile visitors see on load. The
   base `.view.active{align-items:center}` vertically centres the .stage inside the full-height
   view, which on tall phones (e.g. 390x844) drops a large empty cream band above the headline
   and floats the content to mid-screen — reading as broken/half-loaded. Top-anchor the snap
   entry on phones so the eyebrow/headline sits near the top on load; the .stage's 36px top
   padding keeps it clear of the notch. Desktop (>=768px / #view-desk) keeps its centred column. */
@media (max-width:767px){
  #view-snap.view.active{ align-items:flex-start; }
}
/* ---- short-viewport SAVE screen (small iPhones): keep the email field + "Create free
   account" button visible WITHOUT scrolling on the payoff/save step. Compresses spacing on
   the save screen only (#view-payoff); copy is unchanged and other funnel screens are
   untouched. Top-aligned so the email + button never need a scroll to reach. ---- */
@media (max-height:740px) and (max-width:767px){
  #view-payoff.view.active{ align-items:flex-start; }
  #view-payoff .stage{ padding:16px 0 calc(18px + env(safe-area-inset-bottom,0px)); }
  #view-payoff h1{ font-size:25px; margin-bottom:5px; }
  #view-payoff .lede{ font-size:14px; margin-bottom:10px; }
  #view-payoff .nurecord{ padding:13px 14px; margin-bottom:14px; border-radius:14px; }
  #view-payoff .nr-head{ margin-bottom:8px; }
  #view-payoff .nr-rows{ gap:6px; }
  #view-payoff .nr-row{ padding:8px 11px; }
  #view-payoff .save-sheet{ padding:14px 15px; }
  #view-payoff .save-sheet h2{ font-size:18px; margin-bottom:3px; }
  #view-payoff .save-sheet > p{ font-size:13px; margin-bottom:10px; }
  #view-payoff .field input{ min-height:48px; }
  #view-payoff .field .btn{ min-height:50px; font-size:17px; }
}
/* ---- very-short phones (iPhone SE 320x568 / 375x553): a 3-row record card is tall, so
   tighten the save screen one more notch to keep the email + button on-screen. ---- */
@media (max-height:600px) and (max-width:767px){
  #view-payoff .stage{ padding:8px 0 calc(10px + env(safe-area-inset-bottom,0px)); }
  #view-payoff h1{ font-size:22px; margin-bottom:3px; }
  #view-payoff .lede{ font-size:13px; margin-bottom:6px; }
  #view-payoff .nurecord{ padding:10px 12px; margin-bottom:10px; }
  #view-payoff .nr-head{ margin-bottom:6px; }
  #view-payoff .nr-rows{ gap:5px; }
  #view-payoff .nr-row{ padding:6px 10px; }
  #view-payoff .nr-icon{ width:24px; height:24px; }
  #view-payoff .save-sheet{ padding:12px 14px; }
  #view-payoff .save-sheet h2{ font-size:17px; }
  #view-payoff .save-sheet > p{ font-size:12.5px; margin-bottom:8px; }
  #view-payoff .field input{ min-height:46px; }
  #view-payoff .field .btn{ min-height:48px; }
}
/* ---- post-activation step 5: rich supplement detail + analysis flicker ---- */
.s5-section-label{ max-width:440px; margin:26px auto 10px; font-size:12px; font-weight:700; color:var(--sage-dark); letter-spacing:0.04em; text-transform:uppercase; }
.sd-card{ max-width:440px; margin:0 auto 12px; background:var(--card); border:1px solid rgba(123,154,140,0.22); border-radius:16px; padding:16px; text-align:left; box-shadow:0 6px 18px rgba(91,120,104,0.07); }
.sd-brand{ font-size:11.5px; font-weight:700; color:var(--sage-dark); text-transform:uppercase; letter-spacing:0.04em; }
.sd-name{ font-family:var(--serif); font-size:18px; font-weight:500; color:var(--ink); line-height:1.2; margin:2px 0; }
.sd-meta{ font-size:13px; color:var(--ink-2); }
.sd-q{ font-size:12.5px; font-weight:600; color:var(--ink-2); margin:12px 0 7px; }
.timing-options{ display:flex; flex-wrap:wrap; gap:7px; }
.timing-options.sd-foodrow{ margin-top:9px; }
.timing-opt{ min-height:var(--tap); padding:8px 13px; border-radius:50px; border:1.5px solid rgba(90,120,104,0.30); font-size:13px; font-weight:500; cursor:pointer; background:#fff; font-family:var(--sans); color:var(--ink); display:inline-flex; align-items:center; gap:5px; transition:all .15s; }
.timing-opt:hover{ border-color:var(--sage-base); }
.timing-opt.selected{ background:var(--sage-deep); color:#fff; border-color:var(--sage-deep); }
.timing-opt:active{ transform:scale(0.97); }
.s5-add{ max-width:440px; margin:0 auto; }
.s5-add .btn{ margin:0 auto; }
.s5-dosage-hint{ max-width:440px; margin:-2px auto 12px; text-align:center; font-size:13px; color:var(--sage-dark); font-weight:500; line-height:1.5; }
.s5-sub-invite{ max-width:440px; margin:11px auto 0; text-align:center; font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.s5-sub-invite a{ color:var(--sage-dark); font-weight:600; cursor:pointer; text-decoration:underline; }
/* ── "Add another supplement" — the prominent, distinct post-activation path ──
   The results page (#view-home) is where one-supplement readers stall. This button is
   deliberately a different color from the sage pay CTA (warm terracotta) so the no-pay,
   no-leave "add more" action is obvious and inviting. .flash gently pulses to pull the
   eye; prefers-reduced-motion stills it. Used twice on #view-home: the lead add-more
   button under the dosage CTA, and the one-supplement nudge button. */
.addmore-cta{ display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; max-width:420px; min-height:54px; margin:0 auto; padding:15px 22px;
  font-family:var(--serif); font-weight:600; font-size:18px; line-height:1.2; cursor:pointer;
  color:#fff; background:var(--warning); border:0; border-radius:50px;
  box-shadow:0 10px 26px rgba(201,123,92,0.28); transition:transform .15s, box-shadow .2s, background .2s; }
.addmore-cta:hover{ background:#B86A4C; box-shadow:0 14px 32px rgba(201,123,92,0.36); }
.addmore-cta:active{ transform:translateY(1px); }
.addmore-cta:focus-visible{ outline:2px solid var(--warning); outline-offset:3px; }
@media (min-width:768px){ .addmore-cta{ font-size:19px; min-height:58px; } }
.flicker-closing + .addmore-cta{ margin-top:14px; }
@keyframes addmoreFlash{ 0%,100%{ box-shadow:0 10px 26px rgba(201,123,92,0.24); }
  50%{ box-shadow:0 12px 30px rgba(201,123,92,0.55), 0 0 0 4px rgba(201,123,92,0.16); } }
.addmore-cta.flash{ animation:addmoreFlash 1.5s ease-in-out infinite; }
.flicker{ max-width:440px; margin:10px auto 0; background:var(--card); border:1px solid rgba(123,154,140,0.22); border-radius:16px; padding:18px; text-align:left; box-shadow:0 6px 18px rgba(91,120,104,0.07); }
.flicker-head{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--sage-deep); }
.flicker-dot{ width:9px; height:9px; border-radius:50%; background:var(--sage-base); flex-shrink:0; animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.1); } }
.flicker-item{ margin-top:13px; }
.flicker-item b{ display:block; font-size:14px; color:var(--ink); margin-bottom:2px; }
.flicker-item span{ font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.flicker-closing{ margin-top:14px; font-size:13.5px; color:var(--sage-dark); font-style:italic; line-height:1.5; }
.goal-row{ max-width:440px; margin:12px auto 0; display:flex; gap:8px; }
.goal-row input{ flex:1; min-height:var(--tap); padding:0 14px; font-size:15px; border:1.5px solid rgba(90,120,104,0.30); border-radius:10px; font-family:var(--sans); color:var(--ink); }
.goal-row input:focus{ outline:none; border-color:var(--sage-deep); box-shadow:0 0 0 3px rgba(62,88,72,0.12); }
.goal-row button{ min-height:var(--tap); padding:0 18px; border-radius:10px; border:0; background:var(--sage-deep); color:#fff; font-weight:600; font-size:14px; cursor:pointer; }
.goal-row button:hover{ background:var(--sage-dark); }
.journey-bridge{ font-size:13.5px; color:var(--sage-dark); line-height:1.5; margin:0 0 14px; padding:0 4px; }
/* #10: bring "Make it personal" up to the editorial cream/sage/Fraunces NuRecord brand
   the rest of the record uses (card surface, soft sage shadow). "What we noticed about your
   stack" (#analysis-flicker) is intentionally left as-is below. */
.s5-context{ max-width:440px; margin:0 auto; background:linear-gradient(180deg,#fbfdfc 0%, var(--card) 100%);
  border:1.5px solid rgba(90,120,104,0.22); border-radius:18px; padding:20px 18px;
  box-shadow:0 10px 28px rgba(62,88,72,0.10); text-align:left; }
.s5-ctx-help{ font-size:13.5px; color:var(--ink-2); margin:0 0 11px; line-height:1.55; }
.s5-context .goal-row{ margin-top:12px; }
.context-chips{ display:flex; flex-wrap:wrap; gap:7px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } .flicker-dot{ animation:none; } .addmore-cta.flash{ animation:none; } }

/* ===== 2026-06-04 mobile-test conversion fixes (BUG 5 value pop, BUG 6 CTA distinct) ===== */
/* BUG 5: "What we noticed about your stack" is the single most persuasive proof — make the
   analysis card and its heading the visual payoff, not a flat aside. "Make it personal" pops too. */
#analysis-flicker.flicker{ background:linear-gradient(180deg,#fbfdfc 0%, var(--card) 100%);
  border:1.5px solid rgba(90,120,104,0.28); border-top:3px solid var(--sage-base);
  border-radius:18px; padding:22px 20px; box-shadow:0 14px 34px rgba(62,88,72,0.13); margin-top:14px; }
#analysis-flicker .flicker-head{ font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.25;
  color:var(--sage-deep); gap:11px; letter-spacing:-0.01em; }
#analysis-flicker .flicker-dot{ width:11px; height:11px; }
#analysis-flicker .flicker-item{ margin-top:15px; }
#analysis-flicker .flicker-item b{ font-size:15.5px; }
#analysis-flicker .flicker-item span{ font-size:14.5px; }
.s5-section-label.pop{ font-family:var(--serif); font-size:20px; font-weight:500; color:var(--sage-deep);
  letter-spacing:-0.01em; text-transform:none; margin-top:30px; margin-bottom:12px; }
.s5-section-label.pop::after{ content:""; display:block; width:34px; height:3px; border-radius:2px;
  background:var(--sage-base); margin-top:9px; }

/* BUG 6: the primary conversion CTA must be unmistakably THE action — it shared hunter-green
   with the selected timing chips. Keep the palette: elevate the CTA (richer gradient, depth,
   weight, size) and step the selected chips down to a lighter sage so they read as secondary. */
.journey .btn, #home-cta-bar .btn, #journey-btn{
  background:linear-gradient(180deg,#496551 0%, var(--sage-deep) 58%, #2f4537 100%);
  box-shadow:0 12px 26px rgba(62,88,72,0.32), inset 0 1px 0 rgba(255,255,255,0.12);
  font-weight:600; letter-spacing:0.012em; }
.journey .btn, #journey-btn{ min-height:60px; font-size:18.5px; }
.journey .btn:hover, #home-cta-bar .btn:hover, #journey-btn:hover{ filter:brightness(1.07); background:linear-gradient(180deg,#496551 0%, var(--sage-deep) 58%, #2f4537 100%); }
.timing-opt.selected{ background:var(--sage-base); border-color:var(--sage-base); color:#fff; box-shadow:none; }
/* ===== #view-home created-account redesign: center detail cards + chips ===== */
#view-home .sd-card{ text-align:center; }
#view-home .timing-options{ justify-content:center; }
#view-home .context-chips{ justify-content:center; }
/* ---- deterministic guided one-at-a-time capture ---- */
.capture-mode-toggle{ display:flex; gap:6px; background:#EEF8F6; border-radius:12px; padding:4px; max-width:340px; margin:0 auto 18px; }
.capture-mode-btn{ flex:1; border:none; background:transparent; padding:10px 8px; border-radius:9px; font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer; font-family:var(--sans); min-height:var(--tap); }
.capture-mode-btn.active{ background:#fff; color:var(--sage-dark); box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.guided-progress{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:8px; }
.guided-progress-chip{ font-size:12px; font-weight:600; color:var(--sage-dark); background:#EEF8F6; border:1px solid #CDE7E2; padding:3px 10px; border-radius:20px; }
.guided-progress-chip.pending{ background:#fff; border-style:dashed; color:var(--ink-2); }
.guided-step-badge{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--sage-dark); background:#EEF8F6; padding:4px 12px; border-radius:20px; }
.guided-shots{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0; }
.photo-thumb{ position:relative; width:84px; height:84px; border-radius:10px; overflow:hidden; border:1px solid rgba(90,120,104,0.25); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb-tag{ position:absolute; left:4px; bottom:4px; font-size:10px; font-weight:700; color:#fff; background:rgba(0,0,0,0.55); padding:1px 6px; border-radius:10px; }
.photo-thumb-remove{ position:absolute; top:2px; right:2px; width:20px; height:20px; background:rgba(0,0,0,0.6); border:none; border-radius:50%; color:#fff; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.guided-card{ background:#fff; border:1px solid rgba(90,120,104,0.25); border-radius:16px; padding:18px 18px 16px; max-width:440px; margin:6px auto 18px; text-align:left; }
.guided-card-ingredient{ display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:8px 0; border-top:1px solid rgba(90,120,104,0.18); }
.guided-card-ingredient:first-of-type{ border-top:none; }
.guided-card-ingredient b{ color:var(--sage-dark); font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.guided-read-chip{ font-size:11px; font-weight:700; color:#2A7A2A; background:#EEF8EE; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.guided-off-options{ display:flex; flex-direction:column; gap:10px; }
.guided-off-opt{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--ink); line-height:1.4; cursor:pointer; }
.guided-off-opt input{ margin-top:3px; flex-shrink:0; }

/* ===== #view-payoff TYPED LIVE-BUILD (2026-06-30) ==========================================
   Make the Record visibly ASSEMBLE as the resolve response lands. The 2026-06-27 redesign hid
   the Record on #view-payoff (`.nurecord{display:none!important}`); the typed live build re-shows
   it via `.nl-live` (higher specificity + !important). It sits in .payoff-twocol (order:4 on
   mobile), BELOW the hoisted save gate (order:3), so filling rows can never push the gate down /
   below the fold. Placeholders reserve final row heights so nothing below reflows as rows fill. */
#view-payoff .nurecord.nl-live{ display:block !important; }

/* reserved-height shimmer placeholder rows (the "resolving" state) */
.nr-row.nl-ph{ min-height:58px; }
.nr-row.nl-ph .nr-icon{ background:#E4EBE6; }
.nr-row.nl-ph .nr-icon svg{ visibility:hidden; }
.nr-row.nl-ph .nr-label, .nr-row.nl-ph .nr-sub, .nr-row.nl-ph .nr-dose{
  color:transparent !important; border-radius:6px;
  background:linear-gradient(90deg, rgba(123,154,140,0.13) 25%, rgba(123,154,140,0.30) 37%, rgba(123,154,140,0.13) 63%);
  background-size:220% 100%; animation:nlShimmer 1.25s ease-in-out infinite; }
.nr-row.nl-ph .nr-label{ width:62%; height:14px; }
.nr-row.nl-ph .nr-sub{ width:44%; height:12px; margin-top:6px; }
.nr-row.nl-ph .nr-dose{ width:40px; height:12px; }
@keyframes nlShimmer{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }

/* staggered per-row reveal: fade + small slide-up as each row fills (name/decode, then dose) */
.nr-row.nl-reveal .nr-label,
.nr-row.nl-reveal .nr-sub,
.nr-row.nl-reveal .nr-dose,
.nr-row.nl-reveal .nr-badge,
.nr-row.nl-reveal .nr-notes{ animation:nlRowIn .34s ease both; }
@keyframes nlRowIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* over-range badge: shown only when resolve flagged the typed dose as outside the typical range */
.nr-badge{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:8px;
  font-size:12px; font-weight:600; line-height:1.35; color:#8A4B2A; background:#FBEFE9;
  border:1px solid rgba(201,123,92,0.40); border-radius:9px; padding:5px 9px; }
.nr-badge-ic{ flex-shrink:0; width:14px; height:14px; display:inline-flex; color:var(--warning); }
.nr-badge-ic svg{ width:14px; height:14px; }

/* flags/interactions block fades in below the settled items; the FIRST flag reveals stronger
   (the "we caught something in your stack" hook). Per-row animationDelay is set inline in JS. */
.teaser-rows.nl-flags-in > *{ animation:nlRowIn .40s ease both; }
.teaser-rows.nl-flags-in > .nl-flag-first{ animation:nlFlagIn .52s cubic-bezier(.2,.7,.2,1) both; }
@keyframes nlFlagIn{ 0%{ opacity:0; transform:translateY(11px) scale(.985); } 100%{ opacity:1; transform:none; } }

/* prefers-reduced-motion: no shimmer, no stagger — content painted directly, zero layout shift.
   (The live-build JS already skips the placeholder/reveal classes under reduced motion; this is
   a belt-and-suspenders still for the animations should any class be present.) */
@media (prefers-reduced-motion:reduce){
  .nr-row.nl-ph .nr-label, .nr-row.nl-ph .nr-sub, .nr-row.nl-ph .nr-dose{
    animation:none !important; background:none !important; color:inherit !important; width:auto; height:auto; }
  .nr-row.nl-ph .nr-icon svg{ visibility:visible; }
  .nr-row.nl-reveal .nr-label, .nr-row.nl-reveal .nr-sub, .nr-row.nl-reveal .nr-dose,
  .nr-row.nl-reveal .nr-badge, .nr-row.nl-reveal .nr-notes,
  .teaser-rows.nl-flags-in > *, .teaser-rows.nl-flags-in > .nl-flag-first{
    animation:none !important; opacity:1 !important; transform:none !important; }
}