/* Face Rating Lab: preview before payment (preview.html) and full report (report.html), in the site's studio design
   system (DESIGN.md). Tokens and base components (namebox, pill, rating chips, range bar, cards) live
   in base.css; this file only lays out these two pages.
   Order: shared report components, then .pg-preview, then .pg-report, then print.
   The photo overlay styles itself (static/js/overlay.js). */

/* ================================================================== shared components */
/* score tones for bars and gauges. Never red for a score: high mint-teal, mid teal, low sand, lowest amber. */
.t-hi { --tone: var(--mint); --tone-fill: var(--grad-brand); }
.t-mid { --tone: var(--teal); --tone-fill: var(--teal); }
.t-lo { --tone: #C2A46E; --tone-fill: #C2A46E; }
.t-xlo { --tone: #D98E3E; --tone-fill: #D98E3E; }

.num-xl { font-variant-numeric: tabular-nums; }

/* score + /10 + label chip, used in cards, ratings, details */
.mcard-score, .rp-rating-score, .rp-detail-score { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.mcard-score b, .rp-rating-score b, .rp-detail-score b { font: 700 1.9rem/1 var(--font-sans); letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mcard-score > span:not(.rating), .rp-rating-score > span:not(.rating), .rp-detail-score > span:not(.rating) { font-size: .85rem; font-weight: 600; color: var(--muted); }
.mcard-score .rating, .rp-rating-score .rating, .rp-detail-score .rating { align-self: center; margin-left: 6px; }

/* thin progress bars */
.sbar { display: flex; align-items: center; gap: 12px; }
.sbar-track { position: relative; flex: 1; min-width: 60px; height: 6px; border-radius: 6px; background: #E4EBEE; overflow: hidden; }
.sbar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); background: var(--tone-fill, var(--teal)); border-radius: inherit; transition: width 1s var(--ease-out); }
.sbar-num { font: 700 .875rem/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 38%) 32px; gap: 12px; align-items: center; font-size: .875rem; }
.bars-name { min-width: 0; color: var(--ink-2); }
.bars-track { position: relative; height: 6px; border-radius: 6px; background: #E4EBEE; overflow: hidden; }
.bars-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: var(--tone-fill, var(--teal)); border-radius: inherit; transition: width 1s var(--ease-out); }
.bars-num { font: 700 .84rem/1 var(--font-sans); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

/* reveal on scroll (site.js adds .is-in). Only with JS: the page head sets .js on <html> before the body
   paints, so without JS every card and bar simply shows. */
.js .pg-preview [data-reveal]:not(.is-in) .sbar-fill, .js .pg-report [data-reveal]:not(.is-in) .sbar-fill, .js .pg-report [data-reveal]:not(.is-in) .bars-fill { width: 0; }
.js .pg-preview [data-reveal], .js .pg-report [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s var(--ease-out); }
.js .pg-preview [data-reveal].is-in, .js .pg-report [data-reveal].is-in { opacity: 1; transform: none; }

.blur-num { filter: blur(6px); user-select: none; }
.rp-kicker { font: 700 var(--fs-label)/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.badge-focus { background: var(--focus-bg); border-color: #F1DEC6; color: var(--focus-fg); }

/* value + ideal pills */
.rp-vals { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-vals .pill { box-shadow: none; }

/* range meter: the ideal band in the middle, the person's value as the marker */
.rmeter { padding-top: 30px; }
.rmeter-track { position: relative; height: 6px; border-radius: 6px; background: #E4EBEE; }
.rmeter-band { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--grad-brand); }
.rmeter-mark { position: absolute; top: 50%; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); box-shadow: 0 2px 6px rgba(14, 35, 41, .25); }
.rmeter-val { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); padding: 4px 9px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); color: var(--ink); font: 700 .75rem/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rmeter-mark.is-start .rmeter-val { left: -5px; transform: none; }
.rmeter-mark.is-end .rmeter-val { left: auto; right: -5px; transform: none; }
.rmeter-axis { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rmeter-ideal { color: var(--teal-700); font-weight: 650; text-align: center; }

/* meaning: intro + what lower / higher means */
.mx-intro { color: var(--ink-2); }
.mx-ends { display: grid; gap: 8px; margin-top: 12px; }
.mx-end { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--mist-2); border: 1px solid var(--line-2); font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.mx-head { display: block; margin-bottom: 4px; font: 750 var(--fs-label)/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); }
@media (min-width: 520px) { .mx-ends { grid-template-columns: 1fr 1fr; } }

/* overlay frames sit on the studio backdrop (overlay.js paints it) */
.ov-frame { border-radius: var(--r-lg); overflow: hidden; }

/* measurement card (preview: the one measurement shown with its value) */
.mcard { display: grid; padding: 0; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.mcard-fig { position: relative; padding: 10px 10px 0; }
.mcard-fig .ov { aspect-ratio: 5 / 4; border-radius: calc(var(--r-xl) - 10px); }
.mcard-fig > .glass-tag { position: absolute; left: 22px; top: 22px; z-index: 3; }
.mcard-body { padding: 22px 20px 24px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.mcard-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mcard h3 { font-size: clamp(1.45rem, 3.2vw, 1.8rem); letter-spacing: -.03em; }
.mcard-desc { font-weight: 600; font-size: 1rem; line-height: 1.5; color: var(--ink); max-width: 60ch; }
.mcard-meaning { font-size: .94rem; max-width: 65ch; }
.mcard-calc { border-top: 1px solid var(--line-2); padding-top: 14px; font-size: .875rem; }
.mcard-calc summary { cursor: pointer; font-weight: 650; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 10px; }
.mcard-calc summary::-webkit-details-marker { display: none; }
.mcard-calc summary::before { content: "+"; display: inline-grid; place-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--teal-700); font: 600 .9rem/1 var(--font-sans); }
.mcard-calc[open] summary::before { content: "\2212"; }
.mcard-calc summary:focus-visible { outline: 3px solid rgba(0, 162, 173, .45); outline-offset: 3px; border-radius: 6px; }
.mcard-calc p { margin-top: 10px; color: var(--muted); }
.calc-code { display: block; font: 500 .84rem/1.55 var(--font-sans); color: var(--ink-2); background: var(--mist-2); border: 1px solid var(--line-2); padding: 10px 12px; border-radius: var(--r-sm); overflow-wrap: anywhere; }
.rp-conf { font-size: .78rem; font-weight: 600; color: var(--muted); }
.est-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--mist-2); border: 1px solid var(--line-2); font-size: .875rem; color: var(--ink-2); }
.est-note .tag-est { margin: 1px 0 0; flex: none; }
.tip-box { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-md); background: var(--teal-50); border: 1px solid var(--teal-100); border-left: 3px solid var(--teal); font-size: .92rem; line-height: 1.55; color: var(--ink); }
.tip-box .label { color: var(--teal-700); }
@media (min-width: 860px) {
  .mcard { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  .mcard-fig { padding: 12px 0 12px 12px; }
  .mcard-fig .ov { aspect-ratio: auto; height: 100%; min-height: 440px; border-radius: calc(var(--r-xl) - 12px); }
  .mcard-fig > .glass-tag { left: 26px; top: 26px; }
  .mcard-body { padding: 34px 38px; }
}

/* gauge (overall score, symmetry) */
.gauge { position: relative; width: min(100%, 260px); aspect-ratio: 1; margin-inline: auto; }
.gauge svg { width: 100%; height: 100%; overflow: visible; }
.gauge-track { fill: none; stroke: #E4EBEE; stroke-width: 12; stroke-linecap: round; }
.gauge-fill { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray 1.6s var(--ease-out); }
.gauge-ticks line { stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; }
.gauge-ends { fill: var(--muted); font: 600 11px var(--font-sans); }
.gauge-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 6px; padding-top: 4px; }
.gauge-num { font: 700 clamp(3rem, 11vw, 4rem)/.9 var(--font-sans); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gauge-of { font-size: .8rem; font-weight: 600; color: var(--muted); }
.gauge-center .rating { margin-top: 4px; }

/* copy-link row */
.copy-row { display: flex; gap: 8px; }
.copy-row .input { min-width: 0; flex: 1; min-height: 46px; font: 500 .85rem/1 var(--font-sans); color: var(--ink-2); background: var(--mist-2); }
.copy-row .btn { min-height: 46px; }
.copy-status { font-size: .86rem; color: var(--mint-700); font-weight: 600; }
.copy-status:empty { display: none; }
.copy-status.is-warn { color: var(--ink-2); }
.copy-fallback { margin-top: 8px; }

.notes-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); }
.notes-card > .icon { color: var(--teal-700); margin-top: 1px; }
.notes-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9rem; color: var(--ink-2); }

/* delete (two-step, in page) */
.rp-delete { border-top: 1px solid var(--line-2); padding-top: 18px; display: grid; gap: 12px; }
.rp-delete-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--danger); font-weight: 600; font-size: .92rem; cursor: pointer; text-decoration: underline; text-decoration-color: var(--danger-line); text-underline-offset: 3px; }
.rp-delete-btn .icon { width: 18px; height: 18px; }
.rp-delete-btn:focus-visible { outline: 3px solid rgba(180, 55, 42, .35); outline-offset: 3px; border-radius: 4px; }
.rp-delete-confirm { padding: 16px; border-radius: var(--r-md); border: 1px solid var(--danger-line); background: var(--danger-bg); display: grid; gap: 12px; }
.rp-delete-confirm p { font-size: .92rem; color: var(--ink); }
.btn-danger { --b-bg: var(--danger); --b-fg: #fff; --b-bd: var(--danger); --b-shadow: 0 10px 22px -14px rgba(180, 55, 42, .8); }
.rp-actions-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ================================================================== preview page */
.pg-preview main { overflow-x: clip; }
.pg-preview .section-tight, .pg-preview .section { --sec-bg: #fff; }
.pg-preview .bg-mist { --sec-bg: var(--mist); }
.pv-notice-wrap { padding-top: 18px; }
.pv-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--teal-100); border-left: 3px solid var(--teal); background: var(--teal-50); font-size: .94rem; color: var(--ink); }
.pv-notice > .icon { color: var(--teal-700); margin-top: 1px; }
.pv-notice strong { display: block; }

.pv-hero { padding-block: clamp(28px, 5vw, 72px) clamp(44px, 6vw, 88px); }
.pv-hero-grid { display: grid; gap: 24px; }
.pv-hero-head h1 { margin-top: 16px; font-size: clamp(2.5rem, 6.4vw, 4.25rem); letter-spacing: -.045em; line-height: 1; }
.pv-hero-head { padding-bottom: 8px; }
.pv-hero-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.pv-photo { margin: 0; }
.pv-photo .photo-card { border-radius: var(--r-lg); }
.pv-photo [data-hero] { aspect-ratio: 4 / 5; }
.pv-photo .ov { border-radius: inherit; }
.pv-photo .glass-tag { left: 10px; right: auto; top: 10px; height: 23px; padding: 0 8px; gap: 6px; font-size: .62rem; }
.pv-hero-cta { display: grid; gap: 16px; justify-items: start; }
.pv-hero-cta .guarantee-line { margin-top: 0; }
.pv-hero-cta .guarantee-line b { color: var(--ink); font-weight: 700; }
.pv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pv-steps li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .8); border: 1px solid rgba(14, 35, 41, .07); font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.pv-steps .icon { width: 18px; height: 18px; }
@media (max-width: 559px) { .pv-hero-cta .btn { width: 100%; } }
@media (min-width: 560px) { .pv-photo .glass-tag { left: 14px; top: 14px; height: 26px; padding: 0 10px; font-size: var(--fs-label); } }
@media (min-width: 960px) {
  .pv-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "head photos" "cta photos" "steps photos"; column-gap: clamp(32px, 5vw, 72px); row-gap: 26px; align-items: start; }
  .pv-hero-head { grid-area: head; align-self: end; }
  .pv-hero-photos { grid-area: photos; gap: 16px; align-self: center; }
  .pv-photo [data-hero] { aspect-ratio: 3 / 4; }
  .pv-hero-cta { grid-area: cta; }
  .pv-steps { grid-area: steps; }
  .pv-photo .photo-card { border-radius: var(--r-xl); }
  .pv-photo-side { margin-top: 48px; }
}

/* locked scores */
.pv-scores-grid { display: grid; gap: 16px; }
.pv-overall { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; text-decoration: none; color: inherit; padding: 28px 22px 26px; border-radius: var(--r-xl); transition: box-shadow var(--t-base) ease, transform var(--t-base) ease; }
.pv-overall .gauge { width: min(70%, 230px); }
.pv-overall h3 { font-size: 1.3rem; margin-top: 2px; }
.pv-overall p { color: var(--muted); font-size: .92rem; max-width: 34ch; }
.lock-badge { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: var(--r-pill); background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--teal-800); font: 650 .8rem/1 var(--font-sans); }
.gauge-locked .gauge-num { color: var(--ink); opacity: .55; }
.gauge-locked .lock-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-content: center; background: var(--teal-700); color: #fff; box-shadow: 0 0 0 6px rgba(0, 162, 173, .14), 0 8px 18px -8px rgba(0, 99, 107, .7); }
.gauge-locked .lock-pin .icon { width: 20px; height: 20px; }
.gauge-sweep { fill: none; stroke: url(#pv-sweep); stroke-width: 14; stroke-linecap: round; transform-box: view-box; transform-origin: 110px 110px; animation: pv-sweep 6s linear infinite; }
@keyframes pv-sweep { to { transform: rotate(360deg); } }
.pv-pillars { display: grid; gap: 12px; }
.pv-pillar { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 16px 16px 16px 14px; text-decoration: none; color: inherit; transition: border-color var(--t-fast), box-shadow var(--t-base), transform var(--t-base); }
.pv-pillar:hover, .pv-overall:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.pv-pillar .icon-tile { grid-row: span 2; align-self: start; }
.pv-pillar h3 { font-size: 1.08rem; }
.pv-pillar p { grid-column: 2; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.pv-pillar-lock { grid-row: span 2; grid-column: 3; display: grid; justify-items: end; gap: 6px; color: var(--muted); }
.pv-pillar-lock .blur-num { font: 700 1.5rem/1 var(--font-sans); color: var(--ink); filter: blur(4.5px); padding: 2px 6px; border-radius: 8px; background: var(--mist); }
@media (min-width: 640px) { .pv-pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .pv-scores-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 20px; align-items: stretch; }
  .pv-overall { align-content: center; }
  .pv-pillar { grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; padding: 22px; align-items: start; }
  .pv-pillar .icon-tile { grid-row: auto; grid-column: 1; margin-bottom: 12px; }
  .pv-pillar h3 { grid-column: 1; }
  .pv-pillar p { grid-column: 1 / -1; }
  .pv-pillar-lock { grid-row: 1; grid-column: 2; }
}

/* the one measurement drawn on the photo; the top strength and focus area as locked teasers */
.pv-cards, .pv-sf-grid { display: grid; gap: 22px; }
.pv-tease { position: relative; display: grid; gap: 14px; align-content: start; justify-items: start; padding: 24px 20px 22px; border-radius: var(--r-xl); text-decoration: none; color: inherit; transition: box-shadow var(--t-base) ease, transform var(--t-base) ease; }
.pv-tease:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.pv-tease:focus-visible { outline: 3px solid rgba(0, 162, 173, .45); outline-offset: 3px; }
.pv-tease-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pv-tease h3 { font-size: clamp(1.4rem, 3.2vw, 1.75rem); letter-spacing: -.03em; }
.pv-tease-desc { font-size: .94rem; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.pv-tease-lock { justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 14px 14px 18px; border-radius: var(--r-md); background: var(--mist-2); border: 1px solid var(--line-2); }
.pv-tease-score { display: inline-flex; align-items: baseline; gap: 5px; }
.pv-tease-score .blur-num { font: 700 1.9rem/1 var(--font-sans); letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-tease-score > span:not(.blur-num) { font-size: .85rem; font-weight: 600; color: var(--muted); }
.pv-tease-lock .pill { box-shadow: none; }
.pv-tease-lock .pill .blur-num { filter: blur(4px); }
.pv-tease-pin { margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-content: center; background: var(--teal-700); color: #fff; box-shadow: 0 0 0 5px rgba(0, 162, 173, .12); }
@media (min-width: 760px) {
  .pv-sf-grid { max-width: 640px; }
  .pv-sf-grid.is-two { max-width: none; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
  .pv-tease { padding: 30px 30px 28px; }
}

/* locked list */
.pv-lk { position: relative; }
.pv-lk-cols { display: grid; gap: 16px; }
.pv-lk-view { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 20px 8px; box-shadow: var(--shadow-xs); }
.pv-lk-view > h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 1.2rem; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.pv-lk-cat h4 { margin: 18px 0 4px; }
.pv-lk-cat ul { list-style: none; margin: 0; padding: 0; }
.pv-lk-cat li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: .92rem; }
.pv-lk-cat li:last-child { border-bottom: 0; }
.pv-lk-name { flex: 1; min-width: 0; font-weight: 550; color: var(--ink); }
.pv-lk-val { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); }
.pv-lk-val .blur-num { font: 700 .92rem/1 var(--font-sans); color: var(--ink); filter: blur(5px); padding: 3px 6px; border-radius: 6px; background: var(--mist); }
/* collapsed only with JS: the Show all button needs it, so without JS the whole list shows */
.js .pv-lk.is-collapsed .pv-lk-cols { max-height: 560px; overflow: hidden; }
.pv-lk-more { display: none; }
.js .pv-lk.is-collapsed .pv-lk-more { display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; align-items: flex-end; justify-content: center; padding-bottom: 18px; background: linear-gradient(to bottom, transparent, var(--sec-bg, #fff) 72%); }
.pv-locked .notes-card { margin-top: 20px; }
@media (min-width: 860px) { .pv-lk-cols { grid-template-columns: 1fr 1fr; align-items: start; } .js .pv-lk.is-collapsed .pv-lk-cols { max-height: 640px; } }

/* unlock */
.pv-unlock { scroll-margin-top: calc(var(--header-h) - 1px); }
.pv-ticket { position: relative; border-radius: var(--r-xl); padding: clamp(22px, 4vw, 48px); display: grid; gap: 26px; }
.pv-ticket-head { text-align: center; display: grid; gap: 14px; justify-items: center; }
.pv-ticket-head h2 { font-size: clamp(2rem, 5vw, 2.9rem); }
.pv-ticket-head .lead { margin-inline: auto; }
.pv-incl { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; width: 100%; max-width: 780px; text-align: left; }
.pv-incl li { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.pv-incl .icon { width: 18px; height: 18px; margin-top: -1px; }
@media (min-width: 700px) {
  .pv-incl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: auto; }
  .pv-incl li { align-items: center; padding: 7px 13px 7px 8px; border-radius: var(--r-pill); background: var(--mist-2); border: 1px solid var(--line-2); font-size: .84rem; color: var(--ink); }
  .pv-incl .icon { margin-top: 0; }
}

.pv-pkgs { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.pv-pkg { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 18px 18px 18px 54px; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-base), background var(--t-base); }
.pv-pkg:hover { border-color: var(--line-strong); }
.pv-pkg.is-selected { border-color: var(--teal); background: linear-gradient(180deg, #F3FAFB 0%, #fff 100%); box-shadow: 0 0 0 3px rgba(0, 162, 173, .14), var(--shadow-soft); }
.pv-pkg:has(:focus-visible) { outline: 3px solid rgba(0, 162, 173, .5); outline-offset: 3px; }
.pv-pkg-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-pkg-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; cursor: pointer; }
.pv-pkg-label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pv-pkg-radio { position: absolute; left: 18px; top: 20px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; display: grid; place-content: center; transition: border-color var(--t-fast); }
.pv-pkg-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-700); transform: scale(0); transition: transform var(--t-fast) var(--ease-pop); }
.pv-pkg.is-selected .pv-pkg-radio { border-color: var(--teal-700); }
.pv-pkg.is-selected .pv-pkg-radio::after { transform: scale(1); }
.pv-pkg-name { font: 700 1.1rem/1.2 var(--font-sans); letter-spacing: -.015em; color: var(--ink); }
.pv-pkg-price { font: 700 1.35rem/1 var(--font-sans); text-align: right; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-pkg-tag { font-size: .875rem; color: var(--muted); }
.pv-pkg-per { font-size: .78rem; font-weight: 600; line-height: 1.35; color: var(--muted); text-align: right; max-width: 12ch; justify-self: end; font-variant-numeric: tabular-nums; }
.pv-pkg-badge { position: absolute; top: -11px; left: 52px; z-index: 1; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-xs); background: var(--teal-700); color: #fff; font: 800 .625rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.pv-pkg.is-popular { margin-top: 6px; }
.pv-pkg-feats { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 8px; font-size: .875rem; color: var(--ink-2); }
.pv-pkg-feats li { display: flex; gap: 9px; align-items: flex-start; }
.pv-pkg-feats li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--teal-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%23007A83' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
/* single column: the per-scan line drops under the tagline, so neither is squeezed into a narrow column */
@media (max-width: 859px) {
  .pv-pkg:not(.is-selected) .pv-pkg-feats { display: none; }
  .pv-pkg-tag { grid-column: 1 / -1; }
  .pv-pkg-per { grid-column: 1 / -1; text-align: left; justify-self: start; max-width: none; }
}
@media (min-width: 860px) {
  .pv-pkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .pv-pkg { padding: 28px 24px 24px; display: flex; flex-direction: column; }
  .pv-pkg-radio { left: auto; right: 20px; top: 24px; }
  .pv-pkg-label { grid-template-columns: 1fr; gap: 6px; padding-right: 30px; }
  .pv-pkg-price { text-align: left; font-size: 2.2rem; margin-top: 10px; }
  .pv-pkg-per { text-align: left; justify-self: start; max-width: none; }
  .pv-pkg-badge { top: -11px; left: 22px; }
}

.pv-cur { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; font-size: .86rem; color: var(--muted); }

.pv-pay { display: grid; gap: 16px; width: 100%; max-width: 580px; margin-inline: auto; }
.pv-waiver { padding: 14px 16px; border-radius: var(--r-md); background: var(--mist-2); border: 1px solid var(--line-2); font-size: .875rem; color: var(--ink-2); }
.pv-waiver.is-error { border-color: var(--danger-line); background: var(--danger-bg); }
.pv-unlock-btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.pv-pay .guarantee-line { margin-top: -4px; }
.spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: pv-spin .8s linear infinite; }
.pv-unlock-btn.is-loading .spin, .pv-credit-btn.is-loading .spin { display: inline-block; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.pv-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .82rem; }
.pv-or::before, .pv-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pv-alt { text-align: center; font-size: .88rem; color: var(--muted); }
.pv-alt a, .pv-terms .nw { white-space: nowrap; }
.pv-alt, .pv-trust li, .pv-pkg-feats li { text-wrap: pretty; }
.pv-trust { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pv-trust li { display: flex; gap: 9px; align-items: center; font-size: .82rem; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.pv-trust .icon { width: 18px; height: 18px; color: var(--teal-700); }
@media (min-width: 860px) { .pv-trust { grid-template-columns: repeat(2, auto); justify-content: center; gap: 12px 40px; } }

.pv-after { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 20px; }
.pv-save { display: grid; gap: 12px; }
.pv-save h3 { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; }
.pv-save p { font-size: .9rem; }
.pv-keep { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pv-keep .pv-delete { border-top: 0; padding: 0 4px; }
.pv-faq { display: grid; gap: 8px; align-content: start; }
.pv-faq h3 { font-size: 1.2rem; margin-bottom: 6px; }
.pv-faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--t-fast); }
.pv-faq details[open] { border-color: var(--line-strong); }
.pv-faq summary { padding: 15px 46px 15px 16px; font-weight: 650; font-size: .95rem; color: var(--ink); cursor: pointer; list-style: none; position: relative; }
.pv-faq summary::-webkit-details-marker { display: none; }
.pv-faq summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--teal-700); transition: transform var(--t-base) var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pv-faq details[open] summary::after { transform: rotate(180deg); }
.pv-faq summary:focus-visible { outline: 3px solid rgba(0, 162, 173, .45); outline-offset: 2px; border-radius: var(--r-md); }
.pv-faq details p { padding: 0 16px 16px; font-size: .92rem; color: var(--muted); }
@media (min-width: 860px) { .pv-after { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }

/* sticky unlock bar (phones) */
.pv-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94);
  border-top: 1px solid var(--line-2); box-shadow: 0 -12px 30px -18px rgba(14, 35, 41, .35);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  transform: translateY(110%); transition: transform .3s var(--ease-out); visibility: hidden;
}
.pv-bar.is-on { transform: none; visibility: visible; }
.pv-bar-info { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pv-bar-name { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-bar-price { font: 700 1.2rem/1 var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pv-bar .btn { min-height: 48px; padding: 0 20px; }
@media (min-width: 860px) { .pv-bar { display: none; } }
/* the fixed bottom bars (.pv-bar, .rp-sticky-cta) must never cover the last footer line */
@media (max-width: 859px) {
  .pg-preview .site-footer, .pg-sample .site-footer { padding-bottom: calc(36px + 84px + env(safe-area-inset-bottom)); }
}
/* on the conversion page the header's "Analyze my face" (new scan) would compete with "Unlock" */
.pg-preview .header-actions .btn.show-mobile { display: none; }

/* ================================================================== report page */
.pg-report main { overflow-x: clip; }

/* banners */
.rp-banner { border-bottom: 1px solid var(--line-2); }
.rp-banner .container { position: relative; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding-block: 14px; }
.rp-banner .icon-tile { background: #fff; box-shadow: var(--shadow-xs); }
.rp-banner-text { flex: 1 1 260px; min-width: 0; font-size: .92rem; color: var(--ink-2); }
.rp-banner-text strong { display: block; font-size: .98rem; color: var(--ink); }
.rp-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-lbl-short { display: none; }
.rp-banner-sample { background: var(--teal-50); border-bottom-color: var(--teal-100); }
.rp-banner-sample .rp-banner-actions { flex: none; }   /* the print button stays beside the note, also on phones */
.rp-banner-welcome { background: var(--mint-50); border-bottom-color: #C5EEE3; }
.rp-banner-welcome .icon-tile { color: var(--mint-700); }
.rp-banner-close { position: absolute; top: 12px; right: var(--gutter); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .8); cursor: pointer; display: grid; place-content: center; color: var(--ink-2); }
.rp-banner-close:focus-visible { outline: 3px solid rgba(0, 162, 173, .5); outline-offset: 2px; }
.rp-banner-welcome .rp-banner-text { padding-right: 40px; }
@media (max-width: 859px) { .rp-banner-welcome .container { align-items: flex-start; } .rp-banner-welcome .rp-banner-actions { flex-basis: 100%; } }
/* phones: the welcome banner is the headline and one row of small buttons (the sentences show from 560 px, or when
   there is no button), with the close button at the end of that row, so the photos and the score still come up on
   the first screen */
@media (max-width: 559px) {
  .rp-banner .container { gap: 8px 12px; padding-block: 10px; }
  .rp-banner .icon-tile { display: none; }
  .rp-banner-text { font-size: .85rem; line-height: 1.45; }
  .rp-banner-text strong { font-size: .92rem; line-height: 1.3; }
  .rp-banner-sample .rp-banner-text { flex: 1 1 0; }
  .rp-banner-welcome .rp-banner-text { flex-basis: 100%; }
  .rp-banner-welcome.has-actions .rp-banner-text { padding-right: 0; }
  .rp-banner-welcome.has-actions .rp-banner-sub { display: none; }
  .rp-banner-welcome .rp-banner-actions { flex-wrap: nowrap; gap: 6px; padding-right: 40px; }
  .rp-banner-welcome .rp-banner-actions .btn { min-height: 34px; padding: 0 13px; font-size: .82rem; }
  .rp-banner-welcome .rp-lbl-long { display: none; }
  .rp-banner-welcome .rp-lbl-short { display: inline; }
  .rp-banner-close { top: 8px; width: 32px; height: 32px; }
  .rp-banner-welcome.has-actions .rp-banner-close { top: auto; bottom: 11px; }
}
@media (max-width: 359px) { .rp-banner-welcome .rp-lbl-n { display: none; } }
@media (min-width: 860px) {
  .rp-banner-welcome .rp-banner-actions { padding-right: 48px; }
  .rp-banner-close { top: 50%; transform: translateY(-50%); }
  .rp-banner-welcome.has-actions .rp-banner-text { padding-right: 0; }
}

/* hero: the person first. Both photos with measurement lines drawn on them in turn (report.js), the overall score
   beside them and the 4 pillar scores under it. Phones: the photos are a swipeable pair, the scores follow. */
.rp-hero { padding-block: 12px clamp(32px, 5vw, 60px); }
.rp-hero-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 40px; margin-bottom: 12px; }
.rp-hero-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.rp-hero-date { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-hero-date .icon { width: 15px; height: 15px; color: var(--teal-700); }
.rp-hero-actions { display: flex; gap: 6px; }
/* small and out of the way: quiet pills, icon only on phones */
.rp-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(255, 255, 255, .8); color: var(--ink-2); font: 600 .8rem/1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.rp-act:hover { border-color: var(--line-strong); background: #fff; color: var(--ink); }
.rp-act:focus-visible { outline: 3px solid rgba(0, 162, 173, .45); outline-offset: 2px; }
.rp-act svg { width: 16px; height: 16px; flex: none; color: var(--teal-700); }
.rp-hero-bar .copy-status, .rp-hero-bar .copy-fallback { flex-basis: 100%; margin: 0; text-align: right; }
@media (max-width: 559px) {
  .rp-act { width: 38px; height: 38px; padding: 0; }
  .rp-act-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rp-hero-bar .copy-status { text-align: left; }
}

.rp-hero-grid { display: grid; gap: 14px; }
.rp-hero-media { min-width: 0; }
.rp-photos { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
.rp-photos::-webkit-scrollbar { display: none; }
.rp-photo { position: relative; flex: 0 0 84%; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); background: var(--grad-studio); box-shadow: var(--shadow-photo); scroll-snap-align: start; }
.rp-photo:last-child { scroll-snap-align: end; }
.rp-photo > .rp-photo-ov { position: absolute; inset: 0; }
.rp-photo-ov > img { width: 100%; height: 100%; object-fit: cover; }
/* the glass tag also names the measurement drawn on the photo ("FRONT | Gonial angle"): on a small photo the pill
   often has room only for the value. The tag sits in the strip the drawing already keeps clear. */
.rp-photo > .glass-tag { position: absolute; left: 12px; top: 12px; z-index: 3; max-width: calc(100% - 24px); }
.rp-photo-cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px; border-left: 1px solid rgba(14, 35, 41, .18); font: 650 .78rem/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); transition: opacity var(--t-base) ease; }
.rp-photo-cap:empty { display: none; }
.rp-photo-cap.is-swap { opacity: 0; }
/* the whole photo opens the explorer at the measurement shown */
.rp-photo-link { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.rp-photo-link:focus-visible { outline: 3px solid rgba(0, 162, 173, .6); outline-offset: -3px; }
/* on devices that hover, a small hint shows the photo opens the explorer */
.rp-photo-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-xs); font: 650 .78rem/1 var(--font-sans); color: var(--ink); opacity: 0; transform: translateY(4px); transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease-out); pointer-events: none; }
.rp-photo-hint .icon { color: var(--teal-700); }
@media (hover: hover) { .rp-photo-link:hover .rp-photo-hint { opacity: 1; transform: none; } }
.rp-photo-link:focus-visible .rp-photo-hint { opacity: 1; transform: none; }
.rp-photo-dots { display: flex; justify-content: center; gap: 6px; padding-top: 2px; }
.rp-photo-dots span { width: 7px; height: 7px; border-radius: 4px; background: var(--line-strong); cursor: pointer; transition: width var(--t-base) var(--ease-out), background var(--t-base); }
.rp-photo-dots span.is-on { width: 20px; background: var(--teal); }
/* an old scan whose photos were deleted: the lines are drawn on the face points, and this note says why */
.rp-nophoto { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 10px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .78); border: 1px solid var(--line-2); font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
.rp-nophoto .icon { flex: none; margin-top: 1px; color: var(--teal-700); }
.rp-nophoto strong { color: var(--ink); }
/* the sample has no row above the photos (its print button is in the sample banner) */
.pg-sample .rp-hero { padding-top: 16px; }

.rp-score { display: grid; gap: 10px; align-content: start; padding: 18px 18px 10px; border-radius: var(--r-xl); }
.rp-score-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-score .gauge { width: min(56vw, 200px); }
.rp-score .gauge-num { font-size: clamp(2.8rem, 10vw, 3.5rem); }
.rp-prows { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid var(--line-2); display: grid; }
.rp-prow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "icon name score" "icon bar bar"; align-items: center; gap: 7px 12px; margin-inline: -8px; padding: 10px 8px; border-radius: var(--r-md); text-decoration: none; color: inherit; transition: background var(--t-fast); }
.rp-prow:hover { background: var(--mist-2); }
.rp-prow:focus-visible { outline: 3px solid rgba(0, 162, 173, .45); outline-offset: 0; }
.rp-prow .icon-tile { grid-area: icon; }
.rp-prow .icon-tile svg { width: 19px; height: 19px; }
.rp-prow-name { grid-area: name; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 650; font-size: .95rem; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.rp-prow-sub { font-size: .75rem; font-weight: 600; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.rp-prow-score { grid-area: score; display: flex; align-items: center; gap: 10px; }
.rp-prow-score b { min-width: 2.1em; text-align: right; font: 700 1.25rem/1 var(--font-sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-prow .sbar { grid-area: bar; }
.rp-prow .sbar-track { height: 5px; }
.rp-prow .sbar-fill { animation: rp-fill 1.1s var(--ease-out) .25s both; }
@keyframes rp-fill { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .rp-prow .sbar-fill { animation: none; } }

/* phones: a slightly smaller photo (the side photo still peeks) and a compact score card with the gauge beside its
   label, so the overall number is on the first screen even under the "payment confirmed" banner */
@media (max-width: 619px) {
  .rp-photo { flex-basis: 74%; }
  .rp-score { grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: "gauge head" "rows rows"; column-gap: 16px; align-items: center; padding-top: 12px; }
  .rp-score-head { grid-area: head; }
  .rp-score .gauge { grid-area: gauge; width: 128px; margin: 0; }
  .rp-score .gauge-num { font-size: 2.3rem; }
  .rp-score .gauge-of { font-size: .7rem; }
  .rp-score .gauge-center { gap: 3px; }
  .rp-prows { grid-area: rows; }
}
/* the narrowest phones: no icon tiles in the pillar rows, so "Front 4.0 · Side 2.4" never runs under a wide label chip */
@media (max-width: 379px) {
  .rp-prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name score" "bar bar"; }
  .rp-prow .icon-tile { display: none; }
}

@media (min-width: 620px) {
  .rp-hero-grid { gap: 18px; }
  .rp-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; overflow: visible; margin: 0; padding: 0; }
  .rp-photo { border-radius: var(--r-xl); }
  .rp-photo-dots { display: none; }
  .rp-score { grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); grid-template-areas: "head head" "gauge rows"; column-gap: 28px; align-items: center; padding: 22px 26px 16px; }
  .rp-score-head { grid-area: head; }
  .rp-score .gauge { grid-area: gauge; width: 200px; }
  .rp-prows { grid-area: rows; border-top: 0; padding-top: 0; }
}
@media (min-width: 980px) {
  .rp-hero { padding-top: 16px; }
  /* the photos take the height of the score card beside them */
  .rp-hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); gap: 24px; align-items: stretch; }
  .rp-hero-media { display: flex; flex-direction: column; }
  .rp-photos { flex: 1; gap: 16px; }
  .rp-photo { aspect-ratio: auto; min-height: 440px; }
  .rp-score { grid-template-columns: 1fr; grid-template-areas: none; padding: 22px 24px 12px; gap: 12px; }
  .rp-score-head, .rp-score .gauge, .rp-prows { grid-area: auto; }
  .rp-score .gauge { width: 210px; }
  .rp-prows { border-top: 1px solid var(--line-2); padding-top: 6px; }
}

/* section jump nav */
.rp-jump { position: relative; z-index: 20; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-block: 1px solid var(--line-2); }
/* sideways scrollers (jump bar, filter chips): both edges fade so items slide softly out of view instead of being
   cut off at the edge. The start fade sits inside the start padding (nothing is faded at rest, focus rings stay
   clear); the end fade shows there is more, and the end padding lets the last item scroll clear of it. */
.rp-jump .container, .rp-chips {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent);
}
.rp-jump .container { --fade-s: calc(var(--gutter) - 4px); --fade-e: 48px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 9px; padding-right: var(--fade-e); }
.rp-jump .container::-webkit-scrollbar { display: none; }
.rp-jump a { flex: none; padding: 8px 14px; border-radius: var(--r-pill); text-decoration: none; font-weight: 600; font-size: .86rem; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); }
.rp-jump a:hover { background: var(--mist-2); color: var(--ink); }
.rp-jump a.is-active { background: var(--teal-50); color: var(--teal-800); }
.rp-jump a:focus-visible { outline: 3px solid rgba(0, 162, 173, .45); outline-offset: 1px; }
.pg-report section[id], .pg-report .rp-rating[id] { scroll-margin-top: calc(var(--header-h) + 8px); }
@media (min-width: 980px) {
  .rp-jump { position: sticky; top: var(--header-h); }
  .pg-report section[id], .pg-report .rp-rating[id] { scroll-margin-top: calc(var(--header-h) + 56px); }
}

/* explorer: photo viewer + list */
.rp-ex { display: grid; gap: 16px; align-items: start; }
.rp-viewer-col { position: sticky; top: var(--header-h); z-index: 10; margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) 12px; background: linear-gradient(#fff 86%, rgba(255, 255, 255, 0)); }
.rp-viewer { border-radius: var(--r-xl); overflow: hidden; background: #fff; border: 1px solid rgba(14, 35, 41, .06); box-shadow: var(--shadow-photo); }
.rp-frame-wrap { position: relative; background: var(--grad-studio); }
.rp-frame { width: 100%; aspect-ratio: 6 / 5; max-height: 34svh; }
.rp-vtool { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; align-items: center; justify-content: space-between; pointer-events: none; }
.rp-vtool > * { pointer-events: auto; }
.rp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-xs); }
.rp-seg button { border: 0; background: transparent; color: var(--ink-2); padding: 0 12px; height: 30px; border-radius: var(--r-pill); font: 650 .8rem/1 var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rp-seg button .num { color: var(--muted); font-weight: 600; }
.rp-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(14, 35, 41, .1), 0 4px 10px -4px rgba(14, 35, 41, .2); }
.rp-seg button:focus-visible, .rp-icon-btn:focus-visible, .rp-step:focus-visible { outline: 3px solid rgba(0, 162, 173, .5); outline-offset: 2px; }
.rp-icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-xs); color: var(--ink); display: grid; place-content: center; cursor: pointer; }
.rp-icon-btn svg { width: 18px; height: 18px; }
.rp-icon-btn[aria-pressed="true"] { background: var(--teal-700); color: #fff; }
.rp-vcap { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--line-2); background: #fff; }
.rp-vcap-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.rp-vcap-name { font: 700 .95rem/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-vcap-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-vcap-val { color: var(--teal-700); font-weight: 750; }
.rp-vcap-meta .rating { height: 20px; padding: 0 8px; font-size: .625rem; }
.rp-vcap-nav { display: flex; gap: 6px; }
.rp-step { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-content: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.rp-step:hover { border-color: var(--teal); background: var(--teal-50); }
.rp-step .icon { width: 18px; height: 18px; }

.rp-filters { display: grid; gap: 10px; padding-top: 4px; }
/* the row reaches 20px into the column gap (phones: to both screen edges) so its start fade has room while the
   first chip stays in line with the search box; 6px block padding keeps focus rings unclipped */
.rp-chips { --fade-s: 14px; --fade-e: 32px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -4px 0 -4px -20px; padding: 6px var(--fade-e) 6px 20px; }
.rp-chips::-webkit-scrollbar { display: none; }
@media (max-width: 979px) { .rp-chips { --fade-s: calc(var(--gutter) - 6px); --fade-e: 40px; margin-inline: calc(-1 * var(--gutter)); padding-left: var(--gutter); } }
.rp-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; font: 600 .85rem/1 var(--font-sans); cursor: pointer; color: var(--ink-2); transition: border-color var(--t-fast), background var(--t-fast); }
.rp-chip:hover { border-color: var(--line-strong); }
.rp-chip .num { font-size: .75rem; color: var(--muted); }
.rp-chip[aria-pressed="true"] { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }
.rp-chip[aria-pressed="true"] .num { color: #fff; } /* white on teal-700 is 5.1:1 (80% white was 3.9:1) */
.rp-chip:focus-visible { outline: 3px solid rgba(0, 162, 173, .45); outline-offset: 2px; }
.rp-search { position: relative; }
.rp-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.rp-search .input { padding-left: 44px; min-height: 46px; }
.rp-list { display: grid; }
.rp-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 2px; font-size: 1.25rem; }
.rp-group-h:first-child { margin-top: 14px; }
.rp-cat-h { margin: 18px 0 8px 2px; }
.rp-items { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.rp-item + .rp-item { border-top: 1px solid var(--line-2); }
.rp-row {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name chip" "bar val";
  align-items: center; gap: 8px 14px; padding: 13px 16px; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
  transition: background var(--t-fast);
}
.rp-row:hover { background: var(--mist-2); }
.rp-row:focus-visible { outline: 3px solid rgba(0, 162, 173, .5); outline-offset: -3px; }
.rp-item.is-active > .rp-row { background: var(--teal-50); box-shadow: inset 3px 0 0 var(--teal); }
/* focus scrolls the row button: keep it clear of the sticky photo viewer */
.rp-row { scroll-margin-top: calc(var(--header-h) + 34svh + 100px); }
.rp-row-name { grid-area: name; min-width: 0; font-weight: 600; font-size: .93rem; line-height: 1.3; color: var(--ink); }
.rp-row .range-bar { grid-area: bar; min-width: 0; height: 12px; }
.rp-row .range-track, .rp-row .range-ideal { top: 4px; height: 4px; }
.rp-row .range-mark { top: 1px; width: 10px; height: 10px; margin-left: -5px; border-width: 2px; box-shadow: 0 1px 3px rgba(14, 35, 41, .25); }
.rp-row-val { grid-area: val; min-width: 4.6em; font: 700 .875rem/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; white-space: nowrap; }
.rp-row .rating { grid-area: chip; justify-self: end; }
.rp-detail { padding: 18px 16px 20px; border-top: 1px solid var(--line-2); display: grid; gap: 16px; }
.rp-detail-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rp-detail-score b { font-size: 1.6rem; }
.rp-empty { padding: 28px 16px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--r-md); margin-top: 12px; }
.rp-empty .rp-show { margin: 10px auto 0; }
@media (min-width: 560px) {
  .rp-row { grid-template-columns: minmax(0, 1fr) 96px 64px 92px; grid-template-areas: "name bar val chip"; padding: 14px 16px; }
}
@media (min-width: 980px) {
  .rp-ex { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .rp-viewer-col { top: calc(var(--header-h) + 76px); margin: 0; padding: 0; background: none; }
  .rp-frame { aspect-ratio: 19 / 20; max-height: calc(100svh - var(--header-h) - 76px - 60px - 36px); min-height: 360px; }
  .rp-filters { position: sticky; top: calc(var(--header-h) + 56px); z-index: 4; background: #fff; padding-block: 14px 12px; margin-top: -14px; }
  .rp-item, .rp-row { scroll-margin-top: calc(var(--header-h) + 190px); }
}

/* strengths & focus */
.rp-sf { display: grid; gap: 30px; }
.rp-sf-col > h3 { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; }
.rp-sf-col > p { margin-top: 10px; color: var(--muted); font-size: .94rem; max-width: 60ch; }
.rp-sf-good .icon-tile { background: var(--mint-50); color: var(--mint-700); }
.rp-sf-good .icon-tile svg { width: 17px; height: 17px; }
.rp-sf-focus .icon-tile { background: var(--focus-bg); color: var(--focus-fg); }
.rp-sf-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.rp-sf-item { background: #fff; border: 1px solid rgba(14, 35, 41, .07); border-radius: var(--r-lg); padding: 18px 18px 18px 20px; display: grid; gap: 12px; box-shadow: var(--shadow-soft); }
.rp-sf-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rp-sf-name { min-width: 0; }
.rp-sf-item h4 { font-size: 1.04rem; line-height: 1.25; }
.rp-sf-item .rp-kicker { display: block; margin-top: 6px; }
.rp-sf-item p { font-size: .9rem; color: var(--ink-2); }
.rp-sf-item .pill { padding: 5px 10px; font-size: .66rem; }
.rp-show { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; font-size: .88rem; color: var(--teal-700); }
.rp-show:hover { color: var(--teal-800); }
.rp-show:focus-visible { outline: 3px solid rgba(0, 162, 173, .45); outline-offset: 3px; border-radius: 4px; }
@media (min-width: 900px) { .rp-sf { grid-template-columns: 1fr 1fr; gap: 36px; } }

/* visual ratings */
.rp-ratings-grid { display: grid; gap: 16px; }
.rp-rating { display: grid; gap: 16px; align-content: start; }
.rp-rating-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.rp-rating-h h3 { font-size: 1.2rem; }
.rp-rating-score b { font-size: 1.5rem; }
.rp-rating > p { color: var(--muted); font-size: .9rem; max-width: 62ch; }
.rp-features { margin-top: 16px; }
.rp-feat-groups { display: grid; gap: 12px; }
.rp-feat-group { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 16px 16px 18px; background: var(--mist-2); }
.rp-feat-group h4 { margin-bottom: 14px; }
/* narrow panels: name and number on one line, the bar under them */
.rp-feat-group .bars { gap: 12px; }
.rp-feat-group .bars li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name num" "track track"; gap: 6px 10px; }
.rp-feat-group .bars-name { grid-area: name; }
.rp-feat-group .bars-num { grid-area: num; }
.rp-feat-group .bars-track { grid-area: track; }
.rp-wins { margin-top: 16px; }
.rp-wins h3 { display: flex; align-items: center; gap: 12px; }
.rp-wins ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.rp-wins li { display: grid; gap: 3px; font-size: .9rem; color: var(--ink-2); padding-left: 48px; }
.rp-wins li strong { font-weight: 700; color: var(--ink); }
.rp-wins-score { margin-left: 4px; font-weight: 700; color: var(--teal-700); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .rp-rating-h { grid-template-columns: auto minmax(0, 1fr); } .rp-rating-score { grid-column: 1 / -1; } }
@media (min-width: 700px) { .rp-feat-groups { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .rp-ratings-grid { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .rp-feat-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* symmetry */
.rp-sym { display: grid; gap: 20px; align-items: center; }
.rp-sym .gauge { width: 200px; }
.rp-sym h2 { margin-top: 14px; }
.rp-sym-lead { margin: 10px 0 20px; max-width: 60ch; color: var(--muted); }
@media (min-width: 900px) {
  .rp-sym { grid-template-columns: 240px minmax(0, 1fr); gap: 44px; padding: 32px 36px; }
  .rp-sym .bars { grid-template-columns: 1fr 1fr; column-gap: 36px; }
}

/* method, notes, disclaimer */
.rp-about-grid { display: grid; gap: 16px; }
.rp-method { display: grid; gap: 12px; }
.rp-method h3 { font-size: 1.25rem; margin-top: 4px; }
.rp-method p { color: var(--ink-2); font-size: .93rem; max-width: 65ch; }
.rp-about-side { display: grid; gap: 16px; align-content: start; }
.rp-disclaimer { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-md); background: var(--mist-2); border: 1px solid var(--line-2); border-left: 3px solid var(--teal); color: var(--ink); font-weight: 600; font-size: .94rem; line-height: 1.5; }
.rp-disclaimer > .icon { color: var(--teal-700); margin-top: 1px; }
@media (min-width: 900px) { .rp-about-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }

/* actions: keep or delete (paid report), closing band (sample) */
.rp-actions { display: grid; gap: 18px; }
.rp-actions h3 { font-size: 1.25rem; }
.rp-sample-cta { display: grid; gap: 18px; justify-items: center; }
.rp-sample-cta h2 { max-width: 20ch; }
.rp-sample-cta .lead { margin-inline: auto; }
.rp-sample-cta .btn { margin-top: 6px; }
.rp-sample-cta .guarantee-line { margin-top: -4px; color: rgba(255, 255, 255, .78); }
.rp-sample-cta .guarantee-line .icon { color: #7FE0CB; }
.rp-cta-note { font-size: .84rem; color: rgba(255, 255, 255, .66); }

.rp-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); border-top: 1px solid var(--line-2); box-shadow: 0 -12px 30px -18px rgba(14, 35, 41, .35); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); transform: translateY(110%); transition: transform .3s var(--ease-out); visibility: hidden; }
.rp-sticky-cta.is-on { transform: none; visibility: visible; }
.rp-sticky-cta p { flex: 1; font-size: .84rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
@media (min-width: 860px) { .rp-sticky-cta { display: none; } }

.print-only { display: none; }

/* ================================================================== print: clean PDF */
@media print {
  @page { margin: 14mm 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff !important; font-size: 11pt; }
  /* the print head above the photos carries the brand and the date, so the screen's row with them is left out */
  .site-header, .site-footer, .dev-ribbon, .skip-link, .flash, .rp-banner, .rp-hero-bar, .rp-jump, .rp-ex-sec,
  .rp-actions-sec, .rp-sticky-cta, .rp-show, .rp-sample-cta-sec, .rp-wins, .copy-status, .copy-fallback,
  .rp-photo-dots, .rp-photo-link, .rp-photo .ov-labels { display: none !important; }
  /* the glass tag names the measurement drawn on each printed photo ("FRONT | Gonial angle"), never blank mid-swap */
  .rp-photo-cap.is-swap { opacity: 1 !important; }
  /* the printed photos are small: a long name wraps inside the tag instead of being cut off */
  .rp-photo > .glass-tag { left: 8px; top: 8px; max-width: calc(100% - 16px); height: auto; min-height: 22px; padding: 4px 8px; gap: 6px; border-radius: 11px; font-size: 6.5pt; }
  .rp-photo-cap { white-space: normal; overflow: visible; padding-left: 6px; font-size: 7.5pt; line-height: 1.15; }
  .print-only { display: block !important; }
  .rp-print-head { display: flex !important; align-items: center; justify-content: space-between; gap: 12pt; margin: 0 0 10pt; padding-bottom: 8pt; border-bottom: .5pt solid var(--line-strong); font: 600 9pt/1.2 var(--font-sans); color: var(--muted); }
  .rp-print-head img { height: 20pt; width: auto; }
  .section, .section-tight { padding-block: 14pt !important; }
  .bg-hero, .bg-mist { background: #fff !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal] .sbar-fill, [data-reveal] .bars-fill { width: var(--v) !important; }
  .card, .rp-sf-item { box-shadow: none !important; border-color: var(--line) !important; }
  .rp-hero { padding-block: 0 10pt !important; }
  .rp-hero-grid { grid-template-columns: 1.35fr 1fr !important; gap: 12pt !important; align-items: start !important; break-inside: avoid; }
  .rp-photos { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8pt !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  .rp-photo { aspect-ratio: 3 / 4 !important; min-height: 0 !important; box-shadow: none !important; }
  .rp-score { display: block !important; padding: 10pt !important; }
  .rp-score .gauge { width: 150px !important; }
  .rp-score .gauge-num { font-size: 2.3rem !important; }
  .rp-score .gauge-center { gap: 3px; }
  .gauge-fill { transition: none !important; }
  .rp-prow { padding: 5pt 0 !important; margin: 0 !important; }
  /* the printed score card is narrow: no icon tiles, so "Front 5.6 · Side 6.4" never runs under the label chip */
  .rp-prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name score" "bar bar"; }
  .rp-prow .icon-tile { display: none; }
  .rp-prow-sub { font-size: 7pt; }
  .rp-prow-score { gap: 6px; }
  .rp-prow .sbar-fill { animation: none !important; }
  .card, .rp-sf-item, .rp-feat-group, .rp-rating, .print-table tr { break-inside: avoid; }
  .rp-sf { grid-template-columns: 1fr 1fr !important; }
  .rp-ratings-grid { grid-template-columns: 1fr 1fr !important; }
  .rp-feat-groups { grid-template-columns: repeat(4, 1fr) !important; }
  .print-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .print-table th, .print-table td { text-align: left; padding: 5pt 6pt; border-bottom: .5pt solid var(--line-strong); vertical-align: top; }
  .print-table th { font: 700 7.5pt/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .print-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .print-table .pt-desc { color: var(--muted); font-size: 8pt; }
  .print-table .pt-view td { background: var(--mist); font-weight: 700; font-size: 10pt; }
  .print-h { font: 700 18pt/1.1 var(--font-sans); margin: 6pt 0 10pt; break-after: avoid; }
}