/* Landing page (templates/index.html). Read DESIGN.md: tokens and base components live in base.css,
   the shared marketing macros in components.css. Everything here is scoped under .page-landing.
   Face photos are AI-generated people (static/img/faces); landing.js draws their real overlay data
   (static/data/faces/*.json) in the site line style. */

/* ================================================================ reveal on scroll (site.js adds .is-in) */
.page-landing.reveal-ready [data-reveal] { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.page-landing.reveal-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }

/* ================================================================ face stage: photo + overlay in photo pixels
   .fm-stage is the whole 1045 x 1400 photo, placed so the crop (--cx, --cy, --cw, --ch, photo px) fills its
   frame. The frame's aspect ratio must equal --cw / --ch (landing.js sets the crop for frames it measures). */
.page-landing .fm-view { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.page-landing .fm-view.is-on { opacity: 1; }
.page-landing .fm-stage {
  --cx: 0; --cy: 0; --cw: 1045; --ch: 1306.25;
  position: absolute; z-index: 0;
  left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%);
  width: calc(1045 / var(--cw) * 100%); height: calc(1400 / var(--ch) * 100%);
}
.page-landing .fm-stage .fm-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; }
/* cool the photo's own grey backdrop towards the studio blue-grey, away from the face */
.page-landing .fm-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 30% 34% at var(--fx, 51%) var(--fy, 37%), rgba(143, 170, 188, 0) 62%, rgba(143, 170, 188, .9) 100%);
  mix-blend-mode: color; opacity: .55;
}
.page-landing .fm-view[data-view="side"] .fm-stage { --fx: 64%; }
.page-landing .fm-svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-width: none; overflow: visible; }
.page-landing .fm-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* overlay marks (base.css styles .m-line, .m-dot, .m-arc...; these add the motion) */
.page-landing .fm-svg .m-dot, .page-landing .fm-svg .m-head, .page-landing .fm-svg .fm-mesh circle { transform-box: fill-box; transform-origin: center; }
.page-landing .fm-pop { animation: m-pop var(--t-base) var(--ease-pop) both; }
.page-landing .fm-mesh { transition: opacity var(--t-slow) var(--ease-out); }
.page-landing .fm-mesh circle { fill: rgba(255, 255, 255, .88); }
.page-landing .is-measuring .fm-mesh { opacity: .35; }
.page-landing .fm-m { transition: opacity 220ms ease; }
.page-landing .fm-m.is-leaving { opacity: 0; }
.page-landing .fm-fade { opacity: 0; transition: opacity 320ms var(--ease-out); }
.page-landing .fm-fade.is-on { opacity: 1; }
.page-landing .m-head { transition: opacity 200ms ease; }
.page-landing .m-pulse { animation-iteration-count: 2; }

/* the value pill on a photo: white, teal outline, dark caps (DESIGN.md 5.4) */
.page-landing .fm-pill {
  position: absolute; left: 0; top: 0; z-index: 3;
  opacity: 0; translate: 0 6px; transition: opacity 300ms var(--ease-out), translate 300ms var(--ease-out);
}
.page-landing .fm-pill.is-on { opacity: 1; translate: 0 0; }
.page-landing .fm-pill.is-sm { gap: 6px; padding: 4px 8px; font-size: .66rem; border-width: 1.25px; }
.page-landing .fm-pill.is-sm .dot { width: 5px; height: 5px; }
@media (prefers-reduced-motion: reduce) { .page-landing .fm-pill { transition: none; } }

/* ================================================================ 1. hero */
.page-landing .hero { padding-block: clamp(36px, 6vw, 80px) clamp(48px, 7vw, 96px); overflow: hidden; }
.page-landing .hero-grid { display: grid; gap: 40px; align-items: center; }
.page-landing .hero-copy { min-width: 0; }
.page-landing .hero-proof { margin-bottom: 22px; }
.page-landing .hero h1 { max-width: 11ch; }
.page-landing .hero-lead { margin-top: 30px; }
.page-landing .hero-lead strong { color: var(--ink); font-weight: 650; }
.page-landing .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.page-landing .hero .guarantee-line { margin-top: 16px; }
@media (max-width: 559px) {
  .page-landing .hero-ctas { flex-direction: column; align-items: stretch; gap: 14px; }
  .page-landing .hero-ctas .btn { width: 100%; }
  .page-landing .hero-ctas .link-quiet { align-self: center; }
  .page-landing .hero .guarantee-line { justify-content: center; }
}
@media (min-width: 980px) {
  .page-landing .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; }
}

.page-landing .hero-visual { min-width: 0; }
.page-landing .hv { position: relative; width: 100%; max-width: 470px; margin-inline: auto; }
.page-landing .hv-card { aspect-ratio: 4 / 5; }
.page-landing .hv-card > .glass-tag { right: 14px; top: 14px; }
.page-landing .hv-readout {
  position: relative; z-index: 4; height: 138px; margin: -72px 16px 0;
  border: 1px solid rgba(255, 255, 255, .7);
}
.page-landing .hv-readout .readout-top { min-height: 22px; }
.page-landing .hv-readout .readout-val { white-space: nowrap; }
.page-landing .hv-readout .range-ideal, .page-landing .hv-readout .range-mark { transition: left .6s var(--ease-out), width .6s var(--ease-out); }
.page-landing .hv-readout.is-swap [data-r="name"], .page-landing .hv-readout.is-swap [data-r="val"], .page-landing .hv-readout.is-swap [data-r="foot"] { animation: m-fade-up 300ms var(--ease-out) both; }
.page-landing .hv-thirds { display: flex; gap: 3px; height: 6px; margin: 16px 0 6px; }
.page-landing .hv-thirds i { display: block; height: 100%; border-radius: 6px; background: var(--grad-brand); }
.page-landing .hv-thirds i:nth-child(2) { opacity: .7; }
.page-landing .hv-thirds i:nth-child(3) { opacity: .45; }
@media (max-width: 400px) {
  .page-landing .hv-readout { margin-inline: 10px; padding: 12px 14px; }
  .page-landing .hv-readout .readout-val { font-size: 1.5rem; }
}

/* ================================================================ 2. trust strip (base.css); no one-word last lines on phones */
.page-landing .trust-strip li span:not(.icon-tile) { text-wrap: pretty; }

/* ================================================================ 3. measurement cards
   Phones (under 560 px): one column of horizontal cards, photo on the left, and the same four body lines on every
   card (name / value / score and chip / ideal). From 560 px: photo-on-top cards in two, then three columns; the
   value row never wraps and the ideal range wraps beside its chip, so every card keeps the same baselines. */
.page-landing .mc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 760px) { .page-landing .mc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .page-landing .mc-grid { gap: 24px; } }
.page-landing .mcard {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid rgba(14, 35, 41, .07); border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}
.page-landing .mcard-photo { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; }
.page-landing .mcard-photo > .glass-tag { top: 10px; right: 10px; height: 22px; padding: 0 8px; font-size: .66rem; }
.page-landing .mcard-body { display: grid; align-content: start; gap: 6px; padding: 14px 14px 16px; }
.page-landing .mcard-name { font-size: .92rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.page-landing .mcard-row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.page-landing .mcard-val { font: 700 clamp(1.05rem, 3.6vw, 1.4rem)/1.15 var(--font-sans); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-landing .mcard-score { font-size: .78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-landing .mcard-score b { font-size: .95rem; font-weight: 700; color: var(--ink); }
.page-landing .mcard-foot { display: flex; align-items: baseline; gap: 10px; }
.page-landing .mcard-foot .rating { flex: none; }
.page-landing .mcard-ideal { min-width: 0; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.35; }
.page-landing .nw { white-space: nowrap; }
@media (min-width: 760px) {
  .page-landing .mcard-body { padding: 16px 16px 18px; gap: 8px; }
  .page-landing .mcard-val { font-size: 1.15rem; }
  .page-landing .mcard-photo > .glass-tag { top: 14px; right: 14px; height: 26px; padding: 0 10px; font-size: var(--fs-label); }
}
@media (min-width: 1024px) {
  .page-landing .mcard-body { padding: 18px 20px 20px; }
  .page-landing .mcard-name { font-size: 1rem; }
  .page-landing .mcard-val { font-size: 1.4rem; }
}
@media (max-width: 559px) {
  .page-landing .mc-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .page-landing .mcard { display: grid; grid-template-columns: clamp(116px, 40%, 168px) minmax(0, 1fr); min-height: 152px; }
  .page-landing .mcard-photo { aspect-ratio: auto; }
  /* without JS: a near-square crop around the face (landing.js refits it to the frame) */
  .page-landing .mcard-photo .fm-stage { --cx: 150; --cy: 140; --cw: 790; --ch: 870; }
  .page-landing .mcard-photo > .glass-tag { top: 8px; right: 8px; height: 20px; padding: 0 7px; font-size: .62rem; }
  .page-landing .mcard-body {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name name" "val val" "score chip" "ideal ideal";
    align-items: center; gap: 6px 10px; padding: 16px 16px 14px;
  }
  .page-landing .mcard-row, .page-landing .mcard-foot { display: contents; }
  .page-landing .mcard-name { grid-area: name; }
  .page-landing .mcard-val { grid-area: val; font-size: 1.3rem; }
  .page-landing .mcard-score { grid-area: score; }
  .page-landing .mcard-body .rating { grid-area: chip; justify-self: start; }
  .page-landing .mcard.is-multi .mcard-body .rating { grid-area: score; }
  .page-landing .mcard-ideal { grid-area: ideal; }
}
.page-landing .mc-foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; text-align: center; }

/* ================================================================ 4. how it works */
.page-landing .hiw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .page-landing .hiw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.page-landing .hiw-step {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid rgba(14, 35, 41, .07); border-radius: var(--r-xl); box-shadow: var(--shadow-soft);
}
.page-landing .hiw-vis {
  position: relative; height: 244px; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 20px; background: linear-gradient(180deg, var(--mist-2) 0%, var(--mist) 100%); border-bottom: 1px solid var(--line-2);
}
.page-landing .hiw-body { padding: 22px 22px 26px; }
.page-landing .hiw-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.page-landing .hiw-num { font: 750 .8rem/1 var(--font-sans); letter-spacing: .08em; color: var(--teal-700); font-variant-numeric: tabular-nums; }
.page-landing .hiw-time { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.page-landing .hiw-time .icon { width: 15px; height: 15px; color: var(--teal); }
.page-landing .hiw-body p { margin-top: 8px; font-size: .95rem; color: var(--ink-2); }

/* step 1: upload */
.page-landing .hu { flex-direction: column; gap: 14px; }
.page-landing .hu-slots { display: flex; gap: 12px; }
.page-landing .hu-slot { width: 96px; aspect-ratio: 3 / 4; border-radius: 16px; box-shadow: var(--shadow-soft); }
.page-landing .hu-slot img { object-position: 50% 30%; }
.page-landing .hu-ok { position: absolute; z-index: 3; top: 6px; right: 6px; width: 22px; height: 22px; color: var(--teal-700); background: #fff; border-radius: 50%; }
.page-landing .hu-ok svg { width: 22px; height: 22px; }
.page-landing .hu-cap { position: absolute; z-index: 3; left: 6px; bottom: 6px; padding: 4px 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .85); font: 750 .66rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.page-landing .hu-bar { display: flex; align-items: center; gap: 10px; }
.page-landing .hu-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line-2); font: 650 .72rem/1 var(--font-sans); color: var(--muted); }
.page-landing .hu-seg span { padding: 6px 10px; border-radius: var(--r-pill); }
.page-landing .hu-seg .is-on { background: var(--teal-50); color: var(--teal-800); }
.page-landing .hu-ready { display: inline-flex; align-items: center; gap: 5px; font: 650 .72rem/1 var(--font-sans); color: var(--mint-700); }
.page-landing .hu-ready svg { width: 14px; height: 14px; }

/* step 2: measuring */
.page-landing .hm-photo { width: 120px; flex: none; aspect-ratio: 4 / 5; border-radius: 18px; box-shadow: var(--shadow-soft); --sc-size: 18px; --sc-inset: 7px; }
.page-landing .hm-scan { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 36%; pointer-events: none; background: linear-gradient(180deg, rgba(0, 162, 173, 0) 0%, rgba(0, 162, 173, .18) 100%); border-bottom: 1.5px solid rgba(255, 255, 255, .9); animation: hm-scan 3.4s var(--ease-draw) infinite; }
@keyframes hm-scan { 0% { transform: translateY(-100%); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(260%); opacity: 0; } }
.page-landing .hm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.page-landing .hm-list li { display: flex; align-items: center; gap: 7px; }
.page-landing .hm-list svg { width: 14px; height: 14px; flex: none; color: var(--teal); }
.page-landing .hm-list .is-now { color: var(--ink); }
.page-landing .hm-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--teal-100); border-top-color: var(--teal); animation: hm-spin 1s linear infinite; }
@keyframes hm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-landing .hm-scan { display: none; } }

/* step 3: report */
.page-landing .hr-card { width: min(250px, 100%); background: #fff; border-radius: 18px; padding: 14px 16px 15px; box-shadow: var(--shadow-card); }
.page-landing .hr-top { display: flex; align-items: center; justify-content: space-between; }
.page-landing .hr-score { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.page-landing .hr-score b { font: 700 2.1rem/1 var(--font-sans); color: var(--ink); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.page-landing .hr-score span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.page-landing .hr-bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.page-landing .hr-bars li { display: grid; grid-template-columns: 76px 1fr 26px; align-items: center; gap: 8px; font-size: .7rem; font-weight: 600; color: var(--ink-2); }
.page-landing .hr-bars i { position: relative; height: 5px; border-radius: 5px; background: #E4EBEE; overflow: hidden; }
.page-landing .hr-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 5px; background: var(--grad-brand); }
.page-landing .hr-bars b { font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

.page-landing .hiw-hook {
  display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 9px; margin: 32px auto 0;
  padding: 11px 18px; border-radius: var(--r-pill); background: var(--teal-50); color: var(--teal-800);
  font-weight: 650; font-size: .92rem; line-height: 1.35; text-align: left;
}
.page-landing .hiw-hook .icon { width: 18px; height: 18px; color: var(--teal-700); }

/* ================================================================ 5. what you get */
.page-landing .tap {
  display: grid; gap: 24px; align-items: center; padding: 14px 14px 22px;
  background: #fff; border: 1px solid rgba(14, 35, 41, .07); border-radius: var(--r-xl); box-shadow: var(--shadow-card);
}
.page-landing .tap-visual { min-width: 0; }
.page-landing .tap-card { width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 4 / 5; }
.page-landing .tap-card > .glass-tag { right: 14px; top: 14px; }
.page-landing .tap-panel { min-width: 0; padding: 0 6px; }
.page-landing .tap-panel h3 { margin-top: 10px; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.page-landing .tap-intro { margin-top: 8px; color: var(--muted); font-size: .95rem; max-width: 52ch; }
.page-landing .tap-rows { margin: 16px -10px 0; }
.page-landing .tap-text { margin-top: 14px; min-height: 108px; }
/* phones and tablets: the photo sits above the rows, so keep it in view (and shorter) while you tap them.
   landing.js refits the photo crop to the card's wider shape. Flex, not grid: a sticky grid item could not
   move outside its own row. */
@media (max-width: 979px) {
  .page-landing .tap { display: flex; flex-direction: column; align-items: stretch; }
  .page-landing .tap-visual {
    position: sticky; top: var(--header-h); z-index: 2;
    margin: -8px -8px -6px; padding: 8px 8px 6px; background: #fff;
    /* sits 7px inside the card's rounded corner (1px border + 14px padding - 8px pull), so follow its curve */
    border-radius: calc(var(--r-xl) - 7px) calc(var(--r-xl) - 7px) 0 0;
  }
  .page-landing .tap-visual::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  }
  .page-landing .tap-card { aspect-ratio: 5 / 4; max-height: 42vh; max-height: 42svh; }
}
@media (min-width: 980px) {
  .page-landing .tap { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 44px; padding: 20px 36px 20px 20px; }
  .page-landing .tap-panel { padding: 8px 0; }
}

.page-landing .wyg-grid { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 700px) {
  .page-landing .wyg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-landing .wyg-pillars { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .page-landing .wyg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .page-landing .wyg-pillars { grid-column: span 2; }
  .page-landing .wyg-grid > :nth-child(2) { grid-column: auto; }
}
.page-landing .wyg-tile { display: flex; flex-direction: column; min-width: 0; }
.page-landing .wyg-tile h3 { margin-top: 18px; }
.page-landing .wyg-tile > p { margin-top: 6px; font-size: .94rem; color: var(--muted); }
.page-landing .wyg-vis {
  position: relative; height: 196px; border-radius: var(--r-md); overflow: hidden;
  background: var(--mist-2); border: 1px solid var(--line-2);
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px;
}

/* overall + pillars */
.page-landing .wyg-pillars { display: grid; gap: 22px; align-content: start; }
@media (min-width: 700px) { .page-landing .wyg-pillars { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: center; } }
.page-landing .wp-overall .score-xl { margin-top: 10px; }
.page-landing .wp-overall p { margin-top: 12px; max-width: 32ch; }
.page-landing .wp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.page-landing .wp-head { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; color: var(--ink); }
.page-landing .wp-head b { font-weight: 650; }
.page-landing .wp-head span { font-weight: 700; font-variant-numeric: tabular-nums; }
.page-landing .wp-bar { display: block; position: relative; height: 6px; margin-top: 7px; border-radius: 6px; background: #E4EBEE; overflow: hidden; }
.page-landing .wp-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 6px; background: var(--grad-brand); }
.page-landing .wp-sub { display: block; margin-top: 6px; font-size: .78rem; color: var(--muted); }

/* front + side harmony */
.page-landing .wv-harmony { flex-direction: row; align-items: center; justify-content: center; gap: 14px; background: var(--grad-studio); border: 0; }
.page-landing .wv-mini { margin: 0; width: 112px; aspect-ratio: 3 / 4; border-radius: 16px; }
.page-landing .wv-mini img { object-position: 50% 28%; }
.page-landing .wv-mini figcaption {
  position: absolute; z-index: 3; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9);
  font: 750 .66rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.page-landing .wv-mini figcaption b { font-size: .8rem; letter-spacing: 0; color: var(--teal-700); font-variant-numeric: tabular-nums; }

/* strengths and focus */
.page-landing .wv-sf { gap: 6px; padding: 12px 14px; justify-content: safe center; }
.page-landing .wv-sf-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); }
.page-landing .wv-sf-k { font: 750 .66rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: var(--r-pill); }
.page-landing .wv-sf-k.is-strength { background: var(--mint-50); color: var(--mint-700); }
.page-landing .wv-sf-k.is-focus { background: var(--focus-bg); color: var(--focus-fg); }
.page-landing .wv-sf-n { flex: 1; min-width: 0; font-size: .82rem; font-weight: 650; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.page-landing .wv-sf-tip { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); }
.page-landing .wv-sf-tip .icon { color: var(--teal); }

/* visual ratings */
.page-landing .wv-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.page-landing .wv-groups span { display: grid; gap: 3px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); font-size: .68rem; font-weight: 650; line-height: 1.2; color: var(--muted); }
.page-landing .wv-groups b { font-size: 1.15rem; font-weight: 700; color: var(--teal-700); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.page-landing .wv-rate { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.page-landing .wv-rate li { display: grid; grid-template-columns: 1fr 70px 26px; align-items: center; gap: 10px; font-size: .76rem; font-weight: 600; color: var(--ink-2); }
.page-landing .wv-rate i { position: relative; height: 5px; border-radius: 5px; background: #E4EBEE; overflow: hidden; }
.page-landing .wv-rate i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--grad-brand); border-radius: 5px; }
.page-landing .wv-rate b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

/* symmetry */
.page-landing .wv-sym { padding: 0; border: 0; background: none; }
.page-landing .wv-sym-photo { position: absolute; inset: 0; border-radius: var(--r-md); box-shadow: none; }

.page-landing .wyg-cta { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }

/* ================================================================ 6. what you can do (outcomes)
   Copy and four outcomes on the left, a labelled sample of the progress view on the right: an m3 photo with face
   points and a white card with the overall score per scan. The card overlaps only the photo's background edge
   (its right side when the column is 500 px or wider, the shoulders below it when narrower), never the face. */
.page-landing .oc-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 980px) { .page-landing .oc-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; } }
.page-landing .oc-copy { min-width: 0; }
.page-landing .oc-copy h2 { margin-top: 16px; }
.page-landing .oc-copy .lead { margin-top: 14px; }
.page-landing .oc-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.page-landing .oc-list li { display: flex; align-items: flex-start; gap: 14px; }
.page-landing .oc-list h3 { font-size: 1.05rem; line-height: 1.3; }
.page-landing .oc-list p { margin-top: 4px; font-size: .95rem; color: var(--muted); max-width: 52ch; }
@media (min-width: 640px) and (max-width: 979px), (min-width: 1100px) {
  .page-landing .oc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
}
.page-landing .oc-cta { margin-top: 32px; }
.page-landing .oc-cta .guarantee-line { margin-top: 14px; }
@media (max-width: 559px) {
  .page-landing .oc-cta .btn { width: 100%; }
  .page-landing .oc-cta .guarantee-line { justify-content: center; }
}

.page-landing .oc-visual { min-width: 0; container: oc / inline-size; }
.page-landing .oc-stack { position: relative; width: 100%; max-width: 540px; margin-inline: auto; }
.page-landing .oc-photo { width: 100%; aspect-ratio: 4 / 5; }
.page-landing .oc-photo > .glass-tag { right: 14px; top: 14px; }
.page-landing .oc-card {
  position: relative; z-index: 4; margin: -52px 14px 0; padding: 16px 16px 14px;
  background: #fff; border: 1px solid rgba(14, 35, 41, .07); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
@container oc (min-width: 500px) {
  .page-landing .oc-stack { padding-bottom: 28px; }
  .page-landing .oc-photo { width: 62%; }
  .page-landing .oc-card { position: absolute; right: 0; bottom: 0; width: 52%; margin: 0; padding: 18px 18px 16px; }
}
.page-landing .oc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.page-landing .oc-card-top .label { color: var(--teal-700); }
.page-landing .oc-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; }
.page-landing .oc-now b { font: 700 2.4rem/.95 var(--font-sans); letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.page-landing .oc-now > span:not(.oc-delta) { font-size: .82rem; font-weight: 600; color: var(--muted); }
.page-landing .oc-delta {
  margin-left: auto; align-self: center; display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--mint-50); color: var(--mint-700);
  font: 700 .74rem/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.page-landing .oc-sub { margin-top: 6px; font-size: .78rem; color: var(--muted); }

/* the chart: an SVG line and area in a 100 x 100 box stretched to fit, with HTML points so dots and numbers keep
   their size. Point x positions match the centres of the three scan columns underneath. */
.page-landing .oc-chart { position: relative; height: 96px; margin: 26px 0 0; }
.page-landing .oc-plot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.page-landing .oc-grid-line { stroke: var(--line-2); stroke-width: 1; }
.page-landing .oc-base-line { stroke: var(--line); stroke-width: 1; }
.page-landing .oc-stop-a { stop-color: var(--teal); stop-opacity: .16; }
.page-landing .oc-stop-b { stop-color: var(--teal); stop-opacity: 0; }
.page-landing .oc-area { fill: url(#oc-fill); stroke: none; }
.page-landing .oc-line { fill: none; stroke: var(--teal); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.page-landing .oc-pt {
  position: absolute; z-index: 1; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0, 162, 173, .14);
}
.page-landing .oc-pt.is-now { background: var(--teal-700); box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(0, 162, 173, .22); }
.page-landing .oc-pt b {
  position: absolute; left: 50%; bottom: calc(100% + 7px); translate: -50% 0;
  font: 700 .78rem/1 var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums;
}
.page-landing .oc-scans { list-style: none; margin: 12px 0 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.page-landing .oc-scans li { display: grid; gap: 3px; min-width: 0; padding: 0 2px; }
.page-landing .oc-scans b { font: 750 .66rem/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.page-landing .oc-scans span { font-size: .72rem; line-height: 1.3; color: var(--muted); }
.page-landing .oc-note { margin: 18px auto 0; max-width: 46ch; text-align: center; font-size: var(--fs-caption); color: var(--muted); }

/* calm motion: the line draws on from the left, then the points pop in (only when the reveal runs) */
.page-landing.reveal-ready .oc-visual .oc-draw { clip-path: inset(0 0 0 0); transition: clip-path var(--t-draw) var(--ease-draw) .35s; }
.page-landing.reveal-ready .oc-visual .oc-pt { transition: scale var(--t-base) var(--ease-pop); }
.page-landing.reveal-ready .oc-visual .oc-pt:nth-of-type(1) { transition-delay: .3s; }
.page-landing.reveal-ready .oc-visual .oc-pt:nth-of-type(2) { transition-delay: .75s; }
.page-landing.reveal-ready .oc-visual .oc-pt:nth-of-type(3) { transition-delay: 1.15s; }
.page-landing.reveal-ready .oc-visual:not(.is-in) .oc-draw { clip-path: inset(0 100% 0 0); }
.page-landing.reveal-ready .oc-visual:not(.is-in) .oc-pt { scale: 0; }

/* ================================================================ 7. pricing */
.page-landing .pr-promises { margin-top: clamp(40px, 6vw, 64px); }
.page-landing .pr-promises-title { margin-bottom: 18px; text-align: center; font-size: var(--fs-h4); color: var(--ink); }

/* ================================================================ 9. comparison */
.page-landing .cmp-wrap { max-width: 1000px; margin-inline: auto; }
.page-landing .cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.page-landing .cmp th, .page-landing .cmp td { text-align: left; vertical-align: middle; }
.page-landing .cmp-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; }
.page-landing .cmp-brand img { width: 22px; height: 22px; }
.page-landing .cmp-cell { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--ink-2); line-height: 1.4; }
.page-landing .cmp-cell .icon { width: 18px; height: 18px; margin-top: 1px; }
.page-landing .cmp-cell > span { text-wrap: pretty; }
.page-landing .cmp-cell.is-yes .icon { color: var(--teal); }
.page-landing .cmp-cell.is-no .icon { color: var(--faint); }
.page-landing .cmp-us .cmp-cell { color: var(--ink); font-weight: 600; }
@media (min-width: 760px) {
  .page-landing .cmp-wrap { background: #fff; border: 1px solid rgba(14, 35, 41, .07); border-radius: var(--r-xl); box-shadow: var(--shadow-soft); overflow: hidden; }
  .page-landing .cmp th, .page-landing .cmp td { padding: 16px 20px; border-top: 1px solid var(--line-2); }
  .page-landing .cmp thead th, .page-landing .cmp thead td { border-top: 0; padding-block: 20px; font-size: .84rem; font-weight: 650; color: var(--muted); }
  .page-landing .cmp tbody th { width: 24%; font-weight: 650; color: var(--ink); }
  .page-landing .cmp td { width: 25.3%; }
  .page-landing .cmp .cmp-us { background: var(--teal-50); }
  .page-landing .cmp thead .cmp-us { box-shadow: inset 0 3px 0 var(--teal); }
}
@media (max-width: 759px) {
  .page-landing .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .page-landing .cmp, .page-landing .cmp tbody, .page-landing .cmp tr, .page-landing .cmp th, .page-landing .cmp td { display: block; width: 100%; }
  .page-landing .cmp tbody { display: grid; gap: 8px; }
  .page-landing .cmp tr { padding: 12px 12px 8px; background: #fff; border: 1px solid rgba(14, 35, 41, .07); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
  .page-landing .cmp tbody th { margin-bottom: 4px; padding: 0 4px; font-weight: 700; color: var(--ink); font-size: .95rem; }
  .page-landing .cmp td { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 8px; border-radius: 10px; font-size: .86rem; }
  .page-landing .cmp td::before { content: attr(data-label); font-size: .74rem; font-weight: 650; color: var(--muted); line-height: 1.4; padding-top: 1px; }
  .page-landing .cmp td.cmp-us { background: var(--teal-50); }
  .page-landing .cmp td.cmp-us::before { color: var(--teal-800); }
}

/* ================================================================ 10. FAQ */
.page-landing .faq-grid { display: grid; gap: 28px; }
.page-landing .faq-head h2 { margin-top: 16px; }
.page-landing .faq-head .lead { margin-top: 14px; }
.page-landing .faq-all { margin-top: 24px; }
@media (min-width: 980px) {
  .page-landing .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .page-landing .faq-head { position: sticky; top: calc(var(--header-h) + 32px); }
}