/* Virra AI — premium, dark, performance-coded */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --bg: #06080d;
  --surface: #0d1119;
  --surface-2: #131824;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);
  --text: #ecf0f7;
  --text-dim: #8b94a8;
  --text-muted: #5a6478;
  --accent: #d4ff3a;
  --accent-dark: #a8d419;
  --warn: #ff7a3d;
  --good: #2ed573;
  --bad: #ff5a5a;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(212, 255, 58, 0.08) 0%, transparent 70%),
    radial-gradient(900px 500px at 50% 110%, rgba(255, 122, 61, 0.06) 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------------- TOP NAV ---------------- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(6, 8, 13, 0.85);
  backdrop-filter: blur(12px);
  z-index: 100;
}
.nav .brand {
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav .brand .dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
}
.nav .meta {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-login {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.nav-login:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(212, 255, 58, 0.06);
}

/* ---------------- SCREENS ---------------- */
.screen {
  display: none;
  animation: fadeIn 0.35s ease;
}
.screen.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------- LANDING ---------------- */
.hero {
  max-width: 600px;
  margin: 0 auto;
  padding: 56px 20px 40px;
  text-align: center;
}

.hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(212, 255, 58, 0.08);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
  border: 1px solid rgba(212, 255, 58, 0.25);
}

.hero h1 {
  font-size: clamp(36px, 8.5vw, 60px);
  line-height: 1.0;
  font-weight: 900;
  margin: 0 0 20px;
  letter-spacing: -0.04em;
  color: #fff;
}
.hero h1 .accent {
  background: linear-gradient(180deg, #d4ff3a 0%, #a8d419 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .sub {
  font-size: 17px;
  color: var(--text-dim);
  margin: 0 auto 32px;
  max-width: 460px;
}
.hero .sub strong { color: #fff; font-weight: 600; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, #d4ff3a 0%, #a8d419 100%);
  color: #0a0d14;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  border: none;
  padding: 18px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.2s ease, opacity 0.2s;
  font-family: inherit;
  box-shadow: 0 12px 30px -8px rgba(212, 255, 58, 0.45);
}
.btn:hover { box-shadow: 0 16px 36px -8px rgba(212, 255, 58, 0.65); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn.ghost:hover { background: rgba(255,255,255,0.04); box-shadow: none; }

.hero .live-counter {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hero .live-counter::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--good);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

/* ---------------- HOW-IT-WORKS STRIP ---------------- */
.how {
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.how-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
.how-row + .how-row { border-top: 1px solid var(--line); }
.how-num {
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: rgba(212, 255, 58, 0.1);
  color: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid rgba(212, 255, 58, 0.3);
}
.how-row h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.how-row p {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ---------------- TESTIMONIAL/PROOF STRIP ---------------- */
.proof {
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 20px 40px;
  text-align: center;
}
.proof .scores-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}
.proof .preview-score .label {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.proof .preview-score .num {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  filter: blur(6px);
}
.proof .preview-caption {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ---------------- BEFORE/AFTER SLIDER ---------------- */
/* Drag the handle (or anywhere on the image) to wipe between before and after.
 * --ba-pct sets the position of the wipe line (0% = full BEFORE, 100% = full AFTER).
 */
.ba-slider{
  margin: 28px auto 0;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.ba-eyebrow{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--accent);
  text-transform: uppercase;
}
.ba-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0d14;
  border: 1px solid var(--line);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.ba-stage .ba-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.ba-stage .ba-after{ z-index: 1; }
.ba-stage .ba-before{
  z-index: 2;
  /* clip-path reveals only the left portion based on the slider position */
  clip-path: inset(0 calc(100% - var(--ba-pct, 50%)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--ba-pct, 50%)) 0 0);
}
.ba-tag{
  position: absolute;
  bottom: 10px;
  z-index: 4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(10,13,20,.78);
  backdrop-filter: blur(4px);
  color: #fff;
  pointer-events: none;
}
.ba-tag-before{ left: 10px; }
.ba-tag-after{ right: 10px; color: #0a0d14; background: var(--accent); }
.ba-handle{
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  left: var(--ba-pct, 50%);
  width: 2px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 12px rgba(0,0,0,.5);
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-handle-grip{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: #0a0d14;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.ba-caption{
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .02em;
}
/* Subtle hint animation on first paint so users know to drag */
@keyframes ba-hint {
  0%, 100% { --ba-pct: 50%; }
  50% { --ba-pct: 35%; }
}
@property --ba-pct {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
.ba-stage.ba-hint { animation: ba-hint 1.6s ease-in-out 1; }

/* ---------------- QUIZ ---------------- */
.quiz {
  max-width: 540px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.progress {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 24px;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 2px;
}
.step-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.q-step { display: none; }
.q-step.active { display: block; animation: fadeIn 0.3s; }

.q-step h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.15;
}
.q-step p.q-help {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0 0 24px;
}

/* Selfie capture */
.selfie-zone {
  border: 2px dashed var(--line-strong);
  border-radius: 16px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--surface);
}
.selfie-zone:hover, .selfie-zone.drag {
  border-color: var(--accent);
  background: rgba(212, 255, 58, 0.04);
}
.selfie-zone svg { margin-bottom: 10px; opacity: 0.7; }
.selfie-zone .title { font-weight: 700; color: #fff; margin-bottom: 4px; font-size: 15px; }
.selfie-zone .hint { font-size: 12px; color: var(--text-muted); }
.selfie-zone input[type=file] { display: none; }

.selfie-preview {
  display: none;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
}
.selfie-preview.active { display: block; }
.selfie-preview img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.selfie-preview .retake {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.privacy-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Choice options */
.choices {
  display: grid;
  gap: 10px;
}
.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.choice:hover { border-color: var(--line-strong); background: var(--surface-2); }
.choice.selected {
  border-color: var(--accent);
  background: rgba(212, 255, 58, 0.06);
}
.choice .label { font-weight: 600; color: #fff; font-size: 15px; }
.choice .sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.choice .check {
  width: 22px; height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.choice.selected .check {
  background: var(--accent);
  border-color: var(--accent);
}
.choice.selected .check::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid #0a0d14;
  border-bottom: 2px solid #0a0d14;
  transform: rotate(-45deg) translate(0px, -1px);
}

.q-actions {
  margin-top: 28px;
  display: flex;
  gap: 10px;
}
.q-actions .btn { max-width: 480px; margin-left: auto; margin-right: auto; }
.q-actions .btn.back {
  flex: 0 0 56px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 18px;
}

/* The quiz auto-advances on choice click. no Continue button needed. We
   keep #nextBtn in the DOM so the auto-advance can programmatically click
   it, but hide it from the user. The back button stays so users can re-do
   a previous answer. */
#quiz #nextBtn { display: none !important; }

/* Selfie CTA. appears directly under the photo preview.
   Hidden until a photo is uploaded so it doesn't clutter the empty state.
   On mobile, sticks to the bottom of the viewport once enabled so users
   can never lose track of how to proceed. */
.selfie-cta-wrap {
  display: none;
  margin-top: 16px;
}
.selfie-preview.active ~ .selfie-cta-wrap {
  display: flex;
}
.selfie-cta {
  width: 100%;
  font-size: 17px;
  padding: 18px 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(212, 255, 58, 0.18);
  animation: selfieCtaPulse 2s ease-in-out infinite;
}
@keyframes selfieCtaPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(212, 255, 58, 0.18); }
  50%      { box-shadow: 0 10px 32px rgba(212, 255, 58, 0.42); }
}

@media (max-width: 720px) {
  .selfie-preview.active ~ .selfie-cta-wrap {
    position: sticky;
    bottom: 12px;
    z-index: 50;
    margin-top: 18px;
    padding: 0;
  }
  .selfie-cta {
    box-shadow: 0 -2px 0 rgba(6, 8, 13, 0.0), 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(6, 8, 13, 0.85);
  }
}

/* ---------------- LOADING ---------------- */
.loading {
  max-width: 520px;
  margin: 0 auto;
  padding: 80px 20px;
  text-align: center;
}
.loading h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 24px 0 8px;
  color: #fff;
  transition: opacity 0.3s;
}
.loading .insight {
  font-size: 13px;
  color: var(--accent);
  min-height: 22px;
  margin-bottom: 32px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: opacity 0.3s;
}
.scanner {
  width: 180px; height: 180px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.scanner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  transform: translateY(8px);
  will-change: transform, opacity;
  animation: scanBar 1.6s ease-in-out infinite;
}
.scanner img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.4) contrast(1.1);
}
/* transform-based. runs on compositor so it keeps moving even when the
   face-api model blocks the main thread on mobile. */
@keyframes scanBar {
  0%, 100% { transform: translateY(8px); opacity: 0.7; }
  50%      { transform: translateY(170px); opacity: 1; }
}
.loading-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 24px;
}
.loading-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
/* CSS animation drives the bar so it survives main-thread blocking
   (face-api landmark detection freezes JS for 3-6s on mobile). */
#loading.active .loading-bar-fill {
  animation: loadingBarFakeProgress 6.5s cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
}
.loading-bar-fill.is-complete {
  animation: none;
  transform: scaleX(1);
  transition: transform 0.35s ease-out;
}
@keyframes loadingBarFakeProgress {
  0%   { transform: scaleX(0); }
  15%  { transform: scaleX(0.18); }
  35%  { transform: scaleX(0.42); }
  60%  { transform: scaleX(0.65); }
  85%  { transform: scaleX(0.85); }
  100% { transform: scaleX(0.94); }
}

/* ---------------- PAYWALL GATE ---------------- */
.gate {
  max-width: 460px;
  margin: 0 auto;
  padding: 56px 20px;
  text-align: center;
}

/* Paywall card — mirrors the mobile app's ResultPaywall card. */
.paywall-card {
  background: rgba(212, 255, 58, 0.06);
  border: 1.5px solid var(--accent);
  border-radius: 18px;
  padding: 22px 22px 18px;
  margin: 8px 0 22px;
  text-align: center;
}
.paywall-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 1.6px;
  margin-bottom: 8px;
}
.paywall-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.paywall-price-amount {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: var(--text);
  line-height: 1;
}
.paywall-price-period {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dim);
}
.paywall-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
  margin-bottom: 18px;
}
.paywall-cta {
  width: 100%;
  display: block;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.paywall-features {
  margin-top: 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.paywall-features .pf {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}

/* Dual-plan layout (yearly + monthly side-by-side on desktop, stacked on mobile). */
.paywall-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0 16px;
}
.paywall-plans .paywall-card { margin: 0; padding: 22px 18px 18px; position: relative; }
.paywall-card--monthly {
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid var(--border);
}
.paywall-card.is-recommended {
  box-shadow: 0 0 0 1px rgba(212, 255, 58, 0.4), 0 8px 28px rgba(212, 255, 58, 0.12);
}
.paywall-ribbon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #06080d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.paywall-card--monthly .paywall-eyebrow { color: var(--text-dim); }
.paywall-card--monthly .paywall-price-amount { font-size: 40px; }

/* Outline CTA for the secondary (monthly) plan. */
.btn-outline {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1.5px solid var(--accent) !important;
  box-shadow: none !important;
}
.btn-outline:hover { background: rgba(212, 255, 58, 0.08) !important; }

.paywall-features--shared {
  margin-top: 4px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.paywall-login-line {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}
.paywall-login-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.paywall-login-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .paywall-plans { grid-template-columns: 1fr; gap: 18px; }
  .paywall-card.is-recommended { margin-top: 6px; }
}

/* ==========================================================================
   PAYWALL v2 — verdict, score arc, illuminated issue cards
   ========================================================================== */

.paywall-score-block {
  text-align: center;
  margin: 24px 0 18px;
}
.paywall-score-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.paywall-score-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 4px;
}
.paywall-score-num {
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(212, 255, 58, 0.18);
}
.paywall-score-out {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-muted);
}
.paywall-tier {
  display: inline-block;
  margin: 6px 0 14px;
  padding: 5px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--accent);
  background: rgba(212, 255, 58, 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.paywall-lead {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  max-width: 32em;
  margin: 0 auto;
}
.paywall-lead strong { color: var(--accent); font-weight: 700; }
.paywall-lead .paywall-lead-bad { color: var(--bad); font-weight: 700; }

/* Score arc — current → goal. */
.paywall-arc {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 16px;
  margin: 0 0 22px;
  text-align: center;
}
.paywall-arc .arc-block { text-align: center; }
.paywall-arc .arc-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.paywall-arc .arc-score {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.paywall-arc .arc-score--goal { color: var(--good); }
.paywall-arc .arc-arrow {
  color: var(--text-dim);
  font-size: 22px;
  font-weight: 700;
}

/* Issue list header. */
.issue-list-header {
  text-align: center;
  margin-bottom: 12px;
}
.issue-list-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 4px;
}
.issue-list-sub {
  font-size: 12.5px;
  color: var(--text-dim);
}

/* Issue cards: image (cropped + annotated) + name + measurement + blurred fix. */
.issue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.issue-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0;
}
.issue-card-photo {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
}
.issue-card-photo canvas,
.issue-card-photo .issue-photo-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.issue-card-photo .issue-photo-fallback {
  background: linear-gradient(135deg, #1a1f2a, #0d1119);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 14px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.issue-card-photo .issue-photo-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 6px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.issue-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.issue-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.issue-card-name {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.issue-card-pts {
  background: rgba(46, 213, 115, 0.12);
  color: var(--good);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
.issue-card-meas {
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.issue-card-meas .meas-bad { color: var(--bad); font-weight: 700; }
.issue-card-meas .meas-warn { color: var(--warn); font-weight: 700; }
.issue-card-meas .meas-good { color: var(--good); font-weight: 700; }
.issue-card-fix {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #0e1018;
  border: 1px solid var(--line);
}
.issue-card-fix-text {
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text);
  filter: blur(6px);
  -webkit-filter: blur(6px);
  user-select: none;
  pointer-events: none;
  transform: translateZ(0);
  min-height: 50px;
}
.issue-card-fix-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(13, 17, 25, 0.2) 0%, rgba(13, 17, 25, 0.6) 100%);
  pointer-events: none;
}
.issue-card-fix-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(212, 255, 58, 0.45);
  border-radius: 100px;
  padding: 3px 9px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.issue-card-fix-lock svg { width: 10px; height: 10px; color: var(--accent); }

/* ==========================================================================
   PAYWALL v2 — scarcity bar, plan toggle, Apple/Google Pay, guarantee
   ========================================================================== */

/* Scarcity bar: sticky at top of gate screen, persistent 15-min countdown. */
.scarcity-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #1a0a0a 0%, #120606 100%);
  border-bottom: 1px solid rgba(255, 90, 90, 0.22);
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}
.scarcity-old {
  color: var(--text-muted);
  text-decoration: line-through;
}
.scarcity-new {
  color: var(--accent);
  font-weight: 700;
}
.scarcity-divider { color: var(--text-muted); }
.scarcity-timer {
  color: #ff6b6b;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 90, 90, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 2px;
}
.scarcity-bar.is-expired {
  background: #110404;
  color: var(--text-muted);
}
.scarcity-bar.is-expired .scarcity-old,
.scarcity-bar.is-expired .scarcity-new,
.scarcity-bar.is-expired .scarcity-timer { color: var(--text-muted); }

/* Plan toggle: tap to switch between annual / monthly. */
.plan-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px;
  margin: 8px 0 14px;
}
.plan-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 10px 12px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 11px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.plan-pill:hover { background: rgba(255, 255, 255, 0.02); }
.plan-pill.is-active {
  background: rgba(212, 255, 58, 0.06);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(212, 255, 58, 0.18);
}
.plan-pill-save {
  position: absolute;
  top: -8px;
  right: 10px;
  background: var(--accent);
  color: #06080d;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
}
.plan-pill-name {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.plan-pill.is-active .plan-pill-name { color: var(--accent); }
.plan-pill-price {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.plan-pill-old {
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 600;
  font-size: 12.5px;
  margin-right: 4px;
  letter-spacing: 0;
}
.plan-pill-period {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.plan-pill-trial {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Apple Pay / Google Pay primary CTA buttons. */
.pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: transform 0.08s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.pay-btn:active { transform: scale(0.985); }

.pay-btn-apple {
  background: #fff;
  color: #000;
  gap: 6px;
}
.pay-btn-apple .pay-btn-prefix {
  font-size: 15px;
  font-weight: 500;
  color: #000;
}
.pay-btn-apple .pay-btn-logo {
  width: 18px;
  height: 21px;
  margin-top: -2px;
  margin-left: 2px;
  margin-right: -1px;
}
.pay-btn-apple .pay-btn-wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pay-btn-gpay {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  gap: 6px;
}
.pay-btn-gpay-mark { height: 22px; }
.pay-btn-prefix {
  font-size: 14.5px;
  font-weight: 500;
}

.pay-btn-card {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  height: 48px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
}
.pay-btn-card:hover {
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
}

/* 30-day money-back guarantee badge. */
.guarantee {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(46, 213, 115, 0.06);
  border: 1px solid rgba(46, 213, 115, 0.2);
  border-radius: 12px;
  margin-bottom: 22px;
  text-align: left;
}
.guarantee-shield {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(46, 213, 115, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--good);
}
.guarantee-text { line-height: 1.35; flex: 1; }
.guarantee-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.guarantee-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 1px;
}

/* Tighten the gate container so paywall + scarcity bar align cleanly. */
#gate { padding: 0; }
#gate .gate { padding-top: 28px; }

/* Email fallback (secondary conversion path). */
.email-fallback {
  margin-top: 12px;
  padding: 18px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.email-fallback-line {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 10px;
}
.email-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.email-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s;
}
.email-form input[type="email"]:focus {
  border-color: var(--accent);
}
.btn-secondary {
  width: 100%;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s;
}
.btn-secondary:hover { background: rgba(212, 255, 58, 0.08); }
.btn-secondary:disabled { opacity: 0.55; cursor: default; }
.email-fallback-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.5;
}
.gate .lock-icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  background: rgba(212, 255, 58, 0.1);
  border: 1px solid rgba(212, 255, 58, 0.3);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.gate h2 {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: #fff;
}
.gate p { color: var(--text-dim); margin: 0 0 28px; font-size: 15px; }

.gate-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gate-preview .pill {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 4px;
}
.gate-preview .pill .l {
  font-size: 9px; color: var(--text-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.gate-preview .pill .v {
  font-size: 18px; font-weight: 800; color: #fff;
  filter: blur(8px); margin-top: 4px;
}

/* ── App download gate ── */
.recovery-code-box {
  margin: 20px 0;
  padding: 20px;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: 14px;
  text-align: center;
}
.recovery-code-label {
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}
.recovery-code {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 8px;
  color: #fff;
  margin: 8px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.recovery-code-copy {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.recovery-code-copy:hover { background: rgba(212, 255, 58, 0.08); }
.recovery-code-copy.copied { background: var(--accent); color: var(--bg); }
.recovery-code-help {
  display: block;
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 12px;
}
.store-buttons {
  display: flex;
  gap: 12px;
  margin: 16px 0 20px;
}
.store-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #000;
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.1s, border-color 0.15s;
}
.store-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.store-btn-line1 { font-size: 10px; opacity: 0.85; line-height: 1.1; }
.store-btn-line2 { font-size: 16px; font-weight: 700; line-height: 1.1; }

input[type="email"], input[type="text"] {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: #fff;
  font-size: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  margin-bottom: 12px;
}
input[type="email"]:focus, input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 255, 58, 0.18);
}
input::placeholder { color: var(--text-muted); }

.form-error {
  color: var(--bad);
  font-size: 13px;
  margin-top: 6px;
  text-align: left;
  min-height: 18px;
}

.gate small {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------------- RESULT ---------------- */
.result {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.score-hero {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.score-hero::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(212, 255, 58, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.score-hero .label {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  position: relative;
}
.score-hero .big {
  font-size: 132px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, #fff 30%, #d4ff3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
}
.score-hero .out-of {
  font-size: 22px;
  color: var(--text-muted);
  font-weight: 700;
  margin-left: -6px;
}

/* PSL tier badge */
.tier-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
}
.tier-badge.god      { background: linear-gradient(90deg, #d4ff3a, #ffd166); color: #0a0d14; box-shadow: 0 0 20px rgba(212,255,58,0.45); }
.tier-badge.mogger   { background: rgba(212, 255, 58, 0.16); color: #d4ff3a; border: 1px solid rgba(212, 255, 58, 0.4); }
.tier-badge.chad     { background: rgba(46, 213, 115, 0.12); color: #2ed573; border: 1px solid rgba(46, 213, 115, 0.35); }
.tier-badge.normie   { background: rgba(255, 209, 102, 0.1); color: #ffd166; border: 1px solid rgba(255, 209, 102, 0.3); }
.tier-badge.mogged   { background: rgba(255, 122, 61, 0.12); color: #ff7a3d; border: 1px solid rgba(255, 122, 61, 0.35); }
.tier-badge.jester   { background: rgba(255, 90, 90, 0.12); color: #ff5a5a; border: 1px solid rgba(255, 90, 90, 0.35); }
.score-hero .verdict {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text);
  position: relative;
}
.score-hero .verdict strong { color: var(--accent); font-weight: 700; }

.potential-card {
  margin-top: 16px;
  background: rgba(212, 255, 58, 0.06);
  border: 1px solid rgba(212, 255, 58, 0.25);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.potential-card .pn {
  font-size: 30px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.potential-card .pt { font-size: 13px; color: var(--text); line-height: 1.4; }
.potential-card .pt strong { color: #fff; }

/* Score breakdown */
.breakdown {
  margin-top: 32px;
  display: grid;
  gap: 12px;
}
.breakdown h3 {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-weight: 700;
}
.score-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 88px 1fr 56px;
  align-items: center;
  gap: 14px;
}
.score-row .area { font-size: 14px; font-weight: 600; color: #fff; }
.score-row .bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.score-row .bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}
.score-row .num {
  font-size: 18px;
  font-weight: 800;
  text-align: right;
  letter-spacing: -0.02em;
}
.score-row.weak .bar-fill { background: linear-gradient(90deg, #ff5a5a, #ff7a3d); }
.score-row.weak .num { color: #ff7a3d; }
.score-row.mid .bar-fill { background: linear-gradient(90deg, #ffb84d, #ffd166); }
.score-row.mid .num { color: #ffd166; }
.score-row.strong .bar-fill { background: linear-gradient(90deg, #2ed573, #d4ff3a); }
.score-row.strong .num { color: #d4ff3a; }

/* Insights */
.insights-block {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
}
.insights-block h3 {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 700;
}
.insights-block .ins {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
}
.insights-block .ins + .ins { border-top: 1px solid var(--line); }
.insights-block .ins .icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: rgba(212, 255, 58, 0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px;
}

/* Stack header */
.stack-header {
  margin-top: 40px;
  text-align: center;
}
.stack-header .eyebrow {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.stack-header h2 {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
  line-height: 1.15;
}
.stack-header p {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0;
}

/* FTC affiliate disclosure. required by law, but framed as a trust signal. */
.ftc-disclosure {
  margin: 18px 0 6px;
  padding: 11px 14px;
  background: rgba(212, 255, 58, 0.05);
  border: 1px solid rgba(212, 255, 58, 0.18);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
}
.ftc-disclosure strong { color: var(--accent); font-weight: 700; }

/* Product stack */
.stack {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}
.product {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.06s;
}
.product:hover { border-color: var(--accent); }
.product:active { transform: scale(0.99); }
.product .thumb {
  width: 80px; height: 80px;
  background: var(--surface-2);
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.product .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product .thumb-fallback {
  font-size: 26px;
  font-weight: 900;
  color: var(--text-muted);
  letter-spacing: -0.02em;
}
.product .pmeta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.product .pmeta .row1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.product .pmeta .name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}
.product .pmeta .price {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.product .pmeta .why {
  font-size: 12px;
  color: var(--text-dim);
  margin: 6px 0 0;
  line-height: 1.4;
}
.product .pmeta .row3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
}
.product .pmeta .tag {
  display: inline-block;
  background: rgba(212, 255, 58, 0.08);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product .pmeta .arrow {
  color: var(--accent);
  font-weight: 800;
}

/* CTA after stack */
.cta-block {
  margin-top: 32px;
  background: linear-gradient(180deg, rgba(212, 255, 58, 0.08), transparent);
  border: 1px solid rgba(212, 255, 58, 0.2);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
}
.cta-block h3 {
  font-size: 20px;
  margin: 0 0 8px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.cta-block p {
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: 14px;
}
.share-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.share-btn {
  flex: 1;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  padding: 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s;
}
.share-btn:hover { background: var(--surface-2); }

/* ---------------- FOOTER ---------------- */
footer {
  border-top: 1px solid var(--line);
  padding: 28px 20px 32px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}
footer p { margin: 0 0 10px; max-width: 600px; margin-left: auto; margin-right: auto; }
footer a { color: var(--text-dim); text-decoration: underline; }
footer .legal-links {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
footer .legal-links a { color: var(--text); }

/* ---------------- FACE ANNOTATION ---------------- */
.face-annotated {
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 18px;
}
.face-header { margin-bottom: 16px; }
.face-header .eyebrow {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.face-header h3 {
  margin: 0 0 4px;
  font-size: 22px;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.face-header p.sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
}

.face-canvas-wrap {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  border: 1px solid var(--line);
}
.face-canvas-wrap canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

.face-metrics {
  display: grid;
  gap: 10px;
}
.face-metric {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
  border-left: 3px solid var(--line-strong);
}
.face-metric.weak { border-left-color: var(--bad); }
.face-metric.mid  { border-left-color: var(--warn); }
.face-metric.good { border-left-color: var(--good); }
.face-metric .name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.face-metric .val {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: right;
}
.face-metric.weak .val { color: var(--bad); }
.face-metric.mid .val  { color: var(--warn); }
.face-metric.good .val { color: var(--good); }
.face-metric .ideal {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.face-metric .fix {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.4;
}

/* PSL-scale (1-10) score rows */
.score-row .num.psl { font-size: 22px; font-variant-numeric: tabular-nums; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 480px) {
  .hero { padding: 36px 16px 28px; }
  .quiz, .result { padding: 20px 16px 60px; }
  .hero h1 { font-size: clamp(34px, 11vw, 48px); }
  .score-hero .big { font-size: 108px; }
}

/* =================== BRUTAL FIX-HERO =================== */
.fix-hero{
  margin-top:36px;
  background:linear-gradient(180deg,#1a1f0e 0%, #0d1119 80%);
  border:1px solid rgba(212,255,58,.32);
  border-radius:18px;
  padding:26px 22px;
  position:relative;
  overflow:hidden;
}
.fix-hero::before{
  content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:520px;height:300px;background:radial-gradient(circle,rgba(212,255,58,.18) 0%,transparent 70%);
  pointer-events:none;
}
.fix-hero .eyebrow{
  position:relative;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--accent);margin-bottom:8px;
}
.fix-hero h2{
  position:relative;margin:0 0 12px;font-size:clamp(26px,5.6vw,34px);
  font-weight:900;letter-spacing:-.02em;color:#fff;line-height:1.1;
}
.fix-hero h2 .hl{color:var(--accent);}
.fix-hero h2 .hsmall{font-size:.55em;font-weight:700;letter-spacing:.02em;color:var(--text-muted);display:inline-block;margin-left:6px;}
.fix-hero .fix-roi{margin-bottom:18px;}
.fix-hero p.lead{
  position:relative;margin:0 0 20px;color:var(--text);
  font-size:15px;line-height:1.5;
}
.fix-hero p.lead strong{color:var(--accent);}
.fix-roi{
  position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px;
}
.roi-stat{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
  padding:14px 12px;text-align:center;
}
.roi-stat .rn{font-size:28px;font-weight:900;letter-spacing:-.03em;color:var(--accent);line-height:1;}
.roi-stat .rl{font-size:9px;letter-spacing:.1em;color:var(--text-muted);font-weight:700;margin-top:6px;line-height:1.3;}
.fix-hero p.brutal{
  position:relative;margin:0 0 20px;background:rgba(255,90,90,.06);
  border-left:3px solid var(--bad);border-radius:0 8px 8px 0;
  padding:14px 16px;font-size:13px;line-height:1.55;color:var(--text-dim);
}
.fix-hero p.brutal strong{color:#fff;}
.btn-fix{
  display:block;width:100%;background:linear-gradient(180deg,#d4ff3a 0%, #a8d419 100%);
  color:#0a0d14;font-weight:900;font-size:17px;letter-spacing:.04em;
  border:none;padding:20px;border-radius:12px;cursor:pointer;font-family:inherit;
  box-shadow:0 14px 36px -8px rgba(212,255,58,.55);
  transition:transform .06s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn-fix:active{transform:scale(.98);}

/* =================== PRODUCT CARDS v3  mobile-first =================== */
.product{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  text-decoration:none;color:inherit;
  transition:border-color .15s, transform .06s;
}
.product:hover{border-color:var(--accent);}
.product:active{transform:scale(.99);}

/* HERO variant: the #1 most relevant product gets visual dominance.
   Bigger thumb, accent border, glow, larger CTA. single dominant point of
   action above the secondary "round out your protocol" cards. */
.product.hero{
  border-color:rgba(212,255,58,.55);
  background:linear-gradient(180deg, rgba(212,255,58,.05) 0%, var(--surface) 60%);
  padding:18px;
  box-shadow:0 12px 40px -12px rgba(212,255,58,.22);
  margin-bottom:6px;
}
.product.hero .p-rank{
  font-size:11px;color:var(--accent);
}
.product.hero .p-top{
  grid-template-columns:88px 1fr;
}
.product.hero .thumb{width:88px;height:88px;}
.product.hero .name{font-size:17px;}
.product.hero .price{font-size:16px;}
.product.hero .buy-cta{
  font-size:15px;padding:16px 20px;letter-spacing:.06em;
  box-shadow:0 10px 28px -6px rgba(212,255,58,.45);
}

/* "See N more options" toggle. intentionally low-pressure ghost styling
   so the page reads like a single recommendation, not a sales stack. */
.show-more-products{
  display:block;width:100%;
  margin:16px 0 0;padding:14px 16px;
  background:transparent;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:10px;
  color:var(--text-dim);font-family:inherit;
  cursor:pointer;text-align:center;
  transition:border-color .15s, color .15s, background .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.show-more-products:hover{
  border-color:rgba(212,255,58,.4);
  color:var(--accent);
  background:rgba(212,255,58,.03);
}
.show-more-products .smp-line1{
  display:block;font-size:13px;font-weight:700;letter-spacing:.02em;
}
.show-more-products .smp-line2{
  display:block;font-size:11px;color:var(--text-muted);
  margin-top:4px;font-weight:500;
}
.secondary-products{display:grid;gap:14px;margin-top:14px;}
.secondary-products[hidden]{display:none;}

.product .p-rank-line{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:10px;
}
.product .p-rank{
  font-size:10px;font-weight:800;letter-spacing:.12em;
  color:var(--accent);text-transform:uppercase;
}
.product .tier{
  font-size:9px;font-weight:800;letter-spacing:.08em;
  padding:3px 8px;border-radius:999px;border:1px solid currentColor;
  white-space:nowrap;
}
.product .tier.easy   { color:#2ed573; }
.product .tier.mid    { color:#ffd166; }
.product .tier.premium{ color:#ff7a3d; }

.product .p-top{
  display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;
  margin-bottom:12px;
}
.product .thumb{
  width:64px;height:64px;
  background:var(--surface-2);
  border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.product .thumb img{width:100%;height:100%;object-fit:cover;}
.product .thumb-fallback{font-size:24px;font-weight:900;color:var(--text-muted);}

.product .p-name-block{min-width:0;}
.product .name{
  font-size:15px;font-weight:800;color:#fff;
  margin:0 0 6px;line-height:1.25;
  word-break:break-word;
}
.product .price-line{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;
}
.product .price{color:var(--accent);font-weight:900;font-size:14px;}
.product .net{color:var(--text-muted);font-weight:600;}

/* "Targets your: Jawline 6.2/10" - ties product to user's actual quiz score. */
.product .p-target{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:9px 12px;
  background:rgba(212,255,58,.07);
  border:1px solid rgba(212,255,58,.22);
  border-radius:8px;
  font-size:12px;
  margin:0 0 10px;
}
.product .p-target .t-label{color:var(--text-dim);font-weight:600;}
.product .p-target .t-area{color:#fff;font-weight:800;letter-spacing:.01em;}
.product .p-target .t-score{color:var(--accent);font-weight:900;margin-left:auto;}

/* Trust chips: FDA, money-back, review count etc. */
.product .p-trust{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;
}
.product .trust-chip{
  font-size:10.5px;font-weight:700;letter-spacing:.04em;
  padding:5px 9px;border-radius:999px;
  background:rgba(46,213,115,.08);color:#7ddc9f;
  border:1px solid rgba(46,213,115,.22);
  text-transform:uppercase;
}

.product p.why{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--text);}

.product .buy-cta{
  display:flex;align-items:center;justify-content:center;
  width:100%;background:var(--accent);color:#0a0d14;
  padding:14px 16px;border-radius:10px;border:none;
  font-weight:900;font-size:14px;letter-spacing:.06em;
  font-family:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}

/* =================== PRODUCT CARD v4 (headline-first) ===================
   New layout: big "You need X" problem headline → simple product image →
   name + price → buy CTA. Lets the headline carry the persuasion, image
   stays clean, and minimal chrome around it. */
.product .p-headline{
  font-size:18px;line-height:1.25;font-weight:800;color:#fff;
  margin:6px 0 14px;letter-spacing:-0.005em;
  word-break:normal;overflow-wrap:break-word;
}
.product.hero .p-headline{
  font-size:22px;line-height:1.2;font-weight:900;
  letter-spacing:-0.012em;
  margin:6px 0 16px;
}
.product .p-image-wrap{
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  border-radius:12px;
  padding:14px;
  margin:0 0 14px;
  min-height:160px;
}
.product.hero .p-image-wrap{
  min-height:200px;padding:18px;
}
.product .p-image{
  display:block;
  max-width:100%;max-height:160px;
  width:auto;height:auto;
  object-fit:contain;
}
.product.hero .p-image{
  max-height:200px;
}
.product .p-name-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 14px;
  flex-wrap:wrap;
}
.product .p-name{
  font-size:14px;font-weight:700;color:#fff;line-height:1.3;
  flex:1 1 auto;min-width:0;
}
.product .p-price{
  font-size:15px;font-weight:900;color:var(--accent);
  white-space:nowrap;
}
.product.hero .p-name{font-size:15px;}
.product.hero .p-price{font-size:17px;}

/* Star rating + review count: Amazon-style trust signal under the name row.
   Two-layer fill (muted track underneath, gold layer clipped to width %) so
   partial ratings (4.4, 4.7) render as a clean fractional gold fill instead
   of a tofu half-star glyph. */
.product .p-rating{
  display:flex;align-items:center;gap:8px;
  margin:0 0 12px;
  font-size:12px;
}
.product .p-stars{
  position:relative;display:inline-block;
  font-size:14px;line-height:1;letter-spacing:1px;
  height:14px;
  /* Match width to 5 chars so .stars-fg overlay aligns perfectly. */
}
.product .p-stars .stars-bg{
  color:rgba(255,255,255,.18);
  display:inline-block;
}
.product .p-stars .stars-fg{
  position:absolute;top:0;left:0;
  color:#ffb800;
  overflow:hidden;white-space:nowrap;
  text-shadow:0 0 1px rgba(255,184,0,.35);
  pointer-events:none;
}
.product .p-rating-num{color:#fff;font-weight:800;}
.product .p-rating-count{color:var(--text-muted);}
.product.hero .p-stars{font-size:15px;height:15px;}
.product.hero .p-rating{font-size:13px;}

/* "How to use". short instruction so users know how to actually apply the
   product before they even click buy. Compact, low-key, label/value pair. */
.product .p-howto{
  display:flex;flex-direction:column;gap:3px;
  padding:10px 12px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  margin:0 0 4px;
}
.product .p-howto-label{
  font-size:9.5px;font-weight:800;letter-spacing:.14em;
  color:var(--accent);text-transform:uppercase;
}
.product .p-howto-text{
  font-size:13px;color:var(--text);line-height:1.4;font-weight:500;
}
.product.hero .p-howto-text{font-size:14px;}

/* =================== STACK SCROLL PROGRESS BAR ===================
   Thin vertical line on the LEFT edge of the viewport that fills as the
   user scrolls from the first product down to the master cart CTA. Visible
   only while the stack is in view; gives a "you're almost done" cue so users
   don't bounce before reaching the single big CTA. */
.stack-progress{
  position:fixed;
  left:8px;top:18vh;bottom:18vh;
  width:2px;
  background:rgba(255,255,255,.08);
  border-radius:2px;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
  z-index:50;
}
.stack-progress.visible{opacity:1;}
.stack-progress-fill{
  background:linear-gradient(180deg, var(--accent) 0%, #b8e028 100%);
  width:100%;
  border-radius:2px;
  height:0;
  transition:height .08s linear;
  box-shadow:0 0 6px rgba(212,255,58,.5);
}

/* =================== MASTER CART CTA (single button for all products) ===================
   One button below the stack adds every recommended Amazon product to cart in
   one click. Designed to feel like the obvious next step after reading the
   stack. bigger than any individual card element, accent glow, two-line copy
   so the value prop ("one click → basket ready") is visible without hovering. */
.cart-cta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;
  margin:24px 0 8px;
  padding:22px 18px;
  background:linear-gradient(180deg, #d4ff3a 0%, #b8e028 100%);
  color:#0a0d14;
  border:none;border-radius:14px;
  text-decoration:none;
  font-family:inherit;font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 44px -10px rgba(212,255,58,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .08s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  text-align:center;
}
.cart-cta:hover{
  box-shadow:0 20px 56px -8px rgba(212,255,58,.7), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.cart-cta:active{transform:scale(.985);}
.cart-cta-line1{
  display:block;font-size:17px;letter-spacing:.02em;line-height:1.2;
}
.cart-cta-line2{
  display:block;font-size:12px;font-weight:600;letter-spacing:.01em;
  margin-top:6px;color:rgba(10,13,20,.72);
}

/* =================== BUNDLE BLOCK =================== */
.bundle-block{
  margin-top:32px;
  background:linear-gradient(180deg,#1a1f0e 0%, #0d1119 100%);
  border:1px solid rgba(212,255,58,.32);
  border-radius:18px;
  padding:24px 22px;
  text-align:center;
  position:relative;overflow:hidden;
}
.bundle-block::before{
  content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:480px;height:280px;background:radial-gradient(circle,rgba(212,255,58,.18) 0%,transparent 70%);
  pointer-events:none;
}
.bundle-eyebrow{
  position:relative;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--accent);margin-bottom:8px;
}
.bundle-block h3{
  position:relative;margin:0 0 10px;font-size:24px;font-weight:900;
  color:#fff;letter-spacing:-.02em;line-height:1.15;
}
.bundle-lead{
  position:relative;margin:0 0 20px;font-size:14px;line-height:1.5;
  color:var(--text-dim);
}
.bundle-summary{
  position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
  margin-bottom:22px;
}
.bs-item{
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:10px;padding:12px 6px;
  display:flex;flex-direction:column;gap:4px;
}
.bs-label{font-size:9px;letter-spacing:.08em;color:var(--text-muted);font-weight:700;text-transform:uppercase;}
.bs-value{font-size:15px;font-weight:900;color:#fff;letter-spacing:-.02em;}
.bundle-cta{
  position:relative;display:block;width:100%;
  background:linear-gradient(180deg,#ff8a3d 0%, #ff5a3a 100%);
  color:#0a0d14;font-weight:900;font-size:16px;letter-spacing:.04em;
  border:none;padding:18px;border-radius:12px;cursor:pointer;
  font-family:inherit;
  box-shadow:0 14px 36px -8px rgba(255,138,61,.55);
  transition:transform .06s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.bundle-cta:active{transform:scale(.98);}
.bundle-note{
  position:relative;margin:10px 0 0;font-size:11px;color:var(--text-muted);
  font-weight:600;
}

/* =================== STICKY scroll-mode swap =================== */
.result-sticky .rs-show-buy{ display:none !important; }
.result-sticky .rs-show-fix{ display:block; }
.result-sticky.past-stack .rs-show-fix{ display:none !important; }
.result-sticky.past-stack .rs-show-buy{ display:block !important; }
/* Single-button mode + slide-in on scroll. */
body.result-active .result-sticky{
  display:block;
  transform:translateY(120%);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
body.result-active .result-sticky.scrolled-in{ transform:translateY(0); }
.result-sticky .rs-btn{
  width:100%;padding:18px 16px;display:block;text-align:center;box-sizing:border-box;
  max-width:560px;margin:0 auto;
}
.result-sticky .rs-btn .rs-line1{display:block;font-size:16px;letter-spacing:.06em;}
.result-sticky .rs-btn .rs-line2{display:block;font-size:11px;font-weight:700;opacity:.78;letter-spacing:.05em;margin-top:3px;}

/* =================== BOTTOM FIX =================== */
.fix-bottom{
  margin-top:28px;background:linear-gradient(180deg,#1a1f0e 0%, #0d1119 100%);
  border:1px solid rgba(212,255,58,.25);border-radius:16px;padding:24px 22px;text-align:center;
}
.fix-bottom h3{margin:0 0 10px;font-size:22px;font-weight:900;color:#fff;letter-spacing:-.02em;}
.fix-bottom p{margin:0 0 18px;color:var(--text-dim);font-size:14px;line-height:1.5;}

/* =================== STICKY LANDING CTA =================== */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(6,8,13,0) 0%, rgba(6,8,13,.9) 35%, rgba(6,8,13,1) 100%);
  backdrop-filter:blur(8px);
  z-index:200;
}
.sticky-cta .btn-fix{
  max-width:520px;margin:0 auto;display:block;
}
.sticky-cta .sc-meta{
  margin:8px 0 0;text-align:center;font-size:11px;
  color:var(--text-muted);font-weight:600;letter-spacing:.04em;
}

/* On mobile, sticky CTA is the only landing CTA. hide the inline duplicates */
@media (max-width: 720px){
  #landing #startBtn,
  #landing #startBtn2{ display:none; }
  /* Reserve space at the bottom so sticky bar never covers content */
  #landing{ padding-bottom: 120px; }
}

/* Amazon-style rating stars under product name */
.p-rating{
  display:flex;align-items:center;gap:6px;
  margin:2px 0 4px;font-size:12px;line-height:1;
}
.p-rating .stars{
  color:#ff9900;letter-spacing:1px;font-size:13px;
}
.p-rating .rating-num{
  color:#fff;font-weight:700;
}
.p-rating .rating-count{
  color:var(--text-muted);font-weight:600;
}

/* Testimonial photo placeholder when real .jpg isn't dropped in yet */
.t-img.t-empty{
  position:relative;background:linear-gradient(180deg,#161a26,#0a0d14);
  min-height:220px;
}
.t-img.t-empty::before{
  content:"PHOTO PENDING";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;letter-spacing:.12em;
  color:#3a4055;
}

/* =================== WE HEARD YOU bullets =================== */
.heard-list{
  list-style:none;padding:0;margin:0 0 22px;
  display:flex;flex-direction:column;gap:8px;
}
.heard-list li{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(212,255,58,.05);
  border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;
  padding:10px 12px;
  font-size:14px;line-height:1.4;color:var(--text);
  font-style:italic;
}
.heard-list .hb-mark{
  color:var(--accent);font-weight:900;font-style:normal;flex-shrink:0;font-size:16px;line-height:1.3;
}

/* =================== RESULT STICKY CTA (2-button bar) =================== */
.result-sticky{
  position:fixed;left:0;right:0;bottom:0;
  display:none;
  grid-template-columns:1fr 1fr;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(6,8,13,0) 0%, rgba(6,8,13,.92) 30%, rgba(6,8,13,1) 100%);
  backdrop-filter:blur(10px);
  z-index:200;
}
/* (legacy 2-column rules removed  single-button mode handled below) */

.rs-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;border:none;cursor:pointer;font-family:inherit;
  border-radius:12px;padding:14px 8px;
  font-weight:900;letter-spacing:.04em;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .06s, box-shadow .15s, opacity .15s;
}
.rs-btn:active{transform:scale(.97);}
.rs-btn .rs-line1{font-size:14px;}
.rs-btn .rs-line2{font-size:10px;font-weight:700;opacity:.78;letter-spacing:.05em;}

.rs-fix{
  background:linear-gradient(180deg,#d4ff3a 0%, #a8d419 100%);
  color:#0a0d14;
  box-shadow:0 12px 28px -8px rgba(212,255,58,.55);
}
.rs-buy{
  background:linear-gradient(180deg,#ff8a3d 0%, #ff5a3a 100%);
  color:#0a0d14;
  box-shadow:0 12px 28px -8px rgba(255,138,61,.55);
}

/* When result is active, body needs bottom padding so sticky doesn't overlap content. */
body.result-active .result{padding-bottom:120px;}

/* Hide the old standalone "ba-note" if any leftover */
.ba-note{display:none;}

/* =================== UPLOAD OPTIONS (camera + gallery) =================== */
/* Stacked vertically. camera (primary) on top, gallery (secondary) below. */
/* ============= Reveal flow (score → problem → ceiling) ============= */
.reveal {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  text-align: center;
  animation: fadeIn 0.4s ease;
}
.reveal-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 18px;
}
.reveal-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 12px;
}
.reveal-score-num {
  font-size: 96px;
  font-weight: 900;
  letter-spacing: -3px;
  color: var(--text);
  line-height: 1;
  text-shadow: 0 0 60px rgba(212, 255, 58, 0.25);
}
.reveal-score-out {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dim);
}
.reveal-tier {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  margin: 6px 0 18px;
  background: rgba(212, 255, 58, 0.1);
  color: var(--accent);
  border: 1px solid rgba(212, 255, 58, 0.4);
}
.reveal-verdict {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 32px;
}
.reveal h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 14px 0 18px;
  line-height: 1.25;
}
.reveal-sub {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 30px;
}

/* Problem reveal */
.reveal-problem-icon {
  width: 76px; height: 76px;
  margin: 8px auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 90, 90, 0.5);
  background: rgba(255, 90, 90, 0.08);
  color: #ff5a5a;
}
.reveal-problem-icon.is-yellow {
  border-color: rgba(255, 209, 102, 0.5);
  background: rgba(255, 209, 102, 0.08);
  color: #ffd166;
}
.reveal-problem-icon.is-green {
  border-color: rgba(212, 255, 58, 0.5);
  background: rgba(212, 255, 58, 0.08);
  color: var(--accent);
}
.reveal-problem-finding {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 26px;
  font-weight: 500;
}

/* Annotated photo on the problem reveal — zoom into the area being discussed.
   Falls back to the original color icon if landmarks aren't available. */
.reveal-problem-photo {
  position: relative;
  width: 200px;
  height: 240px;
  margin: 0 auto 18px;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0d14;
  border: 1px solid var(--line);
}
.reveal-problem-photo canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.reveal-problem-photo .reveal-problem-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.reveal-problem-photo.has-photo .reveal-problem-icon { display: none; }

/* Locked "fix" preview — real protocol text behind a heavy blur with an
   unlock pill on top. Reads as "there's a real plan here" rather than empty. */
.reveal-fix-locked {
  position: relative;
  margin: 0 auto 30px;
  padding: 14px 0 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  overflow: hidden;
}
.reveal-fix-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent);
}
.reveal-fix-pts {
  background: rgba(46, 213, 115, 0.12);
  color: var(--good);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 5px;
}
.reveal-fix-blur {
  position: relative;
  padding: 12px 18px 18px;
  filter: blur(7px);
  -webkit-filter: blur(7px);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
  transform: translateZ(0); /* force GPU layer for crisper blur */
}
.reveal-fix-line {
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 6px;
}
.reveal-fix-line:last-child { margin-bottom: 0; }
.reveal-fix-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(13, 17, 25, 0.15) 0%, rgba(13, 17, 25, 0.55) 100%);
  pointer-events: none;
}
.reveal-fix-unlock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(6, 8, 13, 0.85);
  border: 1px solid rgba(212, 255, 58, 0.45);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 255, 58, 0.08);
}
.reveal-fix-unlock svg { color: var(--accent); }

/* Ceiling delta */
.reveal-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(212, 255, 58, 0.1);
  border: 1px solid rgba(212, 255, 58, 0.4);
  color: var(--accent);
  margin-bottom: 20px;
}
.reveal-delta-arrow {
  font-size: 18px;
  font-weight: 900;
}
.reveal-delta span:nth-child(2) {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
}
.reveal-delta-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ============= Score reveal: arc, big-bro pitch, value promise ============= */
.reveal-arc {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 14px;
  margin: 8px auto 22px;
  max-width: 440px;
  text-align: center;
}
.reveal-arc-block { text-align: center; }
.reveal-arc-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.reveal-arc-score {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}
.reveal-arc-score--goal { color: var(--good); text-shadow: 0 0 28px rgba(46, 213, 115, 0.32); }
.reveal-arc-arrow {
  color: var(--text-dim);
  font-size: 22px;
  font-weight: 700;
}

.reveal-pitch {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  text-align: left;
  max-width: 460px;
  margin: 0 auto 22px;
  padding: 16px 18px;
  background: rgba(212, 255, 58, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 4px 12px 12px 4px;
}
.reveal-pitch strong { color: var(--accent); font-weight: 700; }

.reveal-promise {
  text-align: left;
  max-width: 440px;
  margin: 0 auto 28px;
  padding: 0 6px;
}
.reveal-promise-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.reveal-promise-row:last-child { border-bottom: 0; }
.reveal-promise-tick {
  color: var(--accent);
  font-weight: 900;
  flex: 0 0 auto;
}

/* ============= Problem reveal: progress dots + measurement line ============= */
.reveal-problem-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 0 auto 14px;
}
.reveal-problem-progress .dot {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.18s ease;
}
.reveal-problem-progress .dot.is-done { background: rgba(212, 255, 58, 0.45); }
.reveal-problem-progress .dot.is-current { background: var(--accent); }
.reveal-problem-meas {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
.reveal-problem-meas .meas-bad { color: var(--bad); font-weight: 700; }
.reveal-problem-meas .meas-warn { color: var(--warn); font-weight: 700; }
.reveal-problem-meas .meas-good { color: var(--good); font-weight: 700; }

/* ============= Outcome reveal: dating analogy + score ============= */
.outcome-headline {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  margin: 8px 0 16px;
  text-align: center;
}
.outcome-arc {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 14px;
  margin: 0 auto 22px;
  max-width: 440px;
  text-align: center;
}
.outcome-arc-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.outcome-arc-score {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}
.outcome-arc-score--goal { color: var(--good); text-shadow: 0 0 32px rgba(46, 213, 115, 0.35); }
.outcome-arc-arrow {
  color: var(--text-dim);
  font-size: 22px;
  font-weight: 700;
}
.outcome-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  text-align: left;
  max-width: 460px;
  margin: 0 auto 28px;
  padding: 16px 18px;
  background: rgba(212, 255, 58, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 4px 12px 12px 4px;
}
.outcome-body strong { color: var(--accent); font-weight: 700; }

/* ============= Paywall v3: protocol headline, outcome, solution, anchor ============= */
.paywall-headline {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  margin: 8px 0 14px;
  text-align: center;
}
.paywall-headline-goal {
  color: var(--good);
  text-shadow: 0 0 24px rgba(46, 213, 115, 0.3);
}

.paywall-outcome {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  text-align: left;
  max-width: 460px;
  margin: 0 auto 22px;
  padding: 16px 18px;
  background: rgba(212, 255, 58, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 4px 12px 12px 4px;
}
.paywall-outcome strong { color: var(--accent); font-weight: 700; }

.paywall-solution-header {
  text-align: center;
  margin: 6px 0 10px;
}
.paywall-solution-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 4px;
}
.paywall-solution-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 36em;
  margin: 0 auto;
}
.paywall-solution {
  margin: 14px 0 22px;
  padding: 4px 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.paywall-solution-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: left;
}
.paywall-solution-row:last-child { border-bottom: 0; }
.paywall-solution-tick {
  color: var(--accent);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.4;
}
.paywall-solution-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 3px;
}
.paywall-solution-fix {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.paywall-solution-fix strong { color: var(--text); font-weight: 600; }
.paywall-solution-pts {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--good);
  background: rgba(46, 213, 115, 0.1);
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.paywall-anchor {
  margin: 6px 0 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.paywall-anchor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.paywall-anchor-row:last-child { border-bottom: 0; }
.paywall-anchor-row--strike .paywall-anchor-label {
  color: var(--text-dim);
}
.paywall-anchor-row--strike .paywall-anchor-price {
  color: var(--text-dim);
  text-decoration: line-through;
  font-weight: 700;
}
.paywall-anchor-row--final {
  background: rgba(212, 255, 58, 0.06);
}
.paywall-anchor-row--final .paywall-anchor-label {
  color: var(--text);
  font-weight: 700;
}
.paywall-anchor-row--final .paywall-anchor-price {
  color: var(--accent);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* ============= Post-checkout welcome screen ============= */
.success-hero { text-align: center; padding-top: 24px; }
.success-check {
  width: 92px; height: 92px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(212, 255, 58, 0.08);
  border: 2px solid rgba(212, 255, 58, 0.4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 60px rgba(212, 255, 58, 0.18);
}
.success-info {
  margin: 22px auto 0;
  max-width: 440px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
}
.success-info-row {
  display: flex; gap: 14px; padding: 8px 0;
  font-size: 13px; line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.success-info-row:last-child { border-bottom: 0; }
.success-info-label { color: var(--text-dim); font-weight: 600; min-width: 110px; }
.success-info-value { color: var(--text); flex: 1; }

/* ============= Capture rail HIDDEN ============= */
/* Original 3-tile strip (Front/Side/Teeth) is suppressed: showing all three
   upfront made the flow feel like work. Each step is now revealed one at a
   time as the user advances. Markup is left in place for downstream JS that
   still toggles is-active / is-done classes. */
.capture-rail { display: none !important; }
/* Confirmation step removed too — the photo is auto-accepted on capture so
   the preview + "Use this photo" button are no longer part of the flow. */
.selfie-preview { display: none !important; }
#selfieNext { display: none !important; }

/* Transient capture confirmation toast — slides in from the top on the new
   step, holds ~2.5s, slides out. Shows a thumbnail of the photo just taken
   so the user has visible proof their shot was saved. */
.capture-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-140%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  background: rgba(20, 24, 33, 0.96);
  border: 1px solid rgba(212, 255, 58, 0.35);
  border-radius: 100px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
  max-width: calc(100% - 28px);
}
.capture-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.capture-toast-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1.5px solid var(--accent);
  flex-shrink: 0;
}
.capture-toast-body {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.capture-toast-check { color: var(--accent); flex-shrink: 0; }

/* Skip teeth button — secondary action shown only on the smile step. */
.selfie-skip{
  background:transparent;border:none;color:var(--text-muted);
  font-size:13px;font-family:inherit;cursor:pointer;
  padding:8px 12px;text-decoration:underline;
}
.selfie-skip:hover{color:var(--text-dim);}

.upload-options{
  display:flex;flex-direction:column;gap:12px;
}
.upload-opt{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:12px;padding:13px 16px;
  cursor:pointer;text-align:left;
  transition:border-color .15s, background .15s, transform .06s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.upload-opt:hover{border-color:var(--accent);background:rgba(212,255,58,.04);}
.upload-opt:active{transform:scale(.99);}
.upload-opt svg{width:20px;height:20px;flex-shrink:0;color:var(--accent);opacity:.9;}
.upload-opt .opt-title{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em;}
.upload-opt .opt-hint{display:none;}
.upload-opt input[type=file]{display:none;}

/* PRIMARY (camera). lime fill so it's clearly the recommended action. */
.upload-opt.opt-camera{
  background:linear-gradient(180deg,#d4ff3a 0%, #a8d419 100%);
  border:1px solid #a8d419;
  box-shadow:0 6px 20px -8px rgba(212,255,58,.55);
}
.upload-opt.opt-camera:hover{
  background:linear-gradient(180deg,#dfff52 0%, #b3e022 100%);
  border-color:#a8d419;
}
.upload-opt.opt-camera svg{color:#0a0d14;opacity:1;}
.upload-opt.opt-camera .opt-title{color:#0a0d14;font-weight:800;}

button.upload-opt{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;width:100%;}

/* =================== WEBCAM CAPTURE OVERLAY =================== */
.camera-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.camera-overlay[hidden]{display:none;}
.camera-frame{
  width:100%;max-width:480px;display:flex;flex-direction:column;gap:10px;
}
.camera-title{
  font-size:18px;font-weight:800;color:#fff;text-align:center;letter-spacing:-.02em;
}
.camera-sub{
  font-size:13px;color:rgba(255,255,255,.7);text-align:center;
  margin-top:-4px;
}

/* Stage = video + face-guide overlay + capture-flash overlay, stacked. */
.camera-stage{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:2px solid rgba(212,255,58,.3);
  background:#000;
  aspect-ratio:3/4;
}
.camera-stage video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transform:scaleX(-1);
}

/* Face guide SVG sits on top of the video, no pointer events. */
.camera-guide{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:2;
}
.camera-guide .guide-group{display:none;}
.camera-guide .guide-group.is-active{display:block;}

/* Brief "✓ saved" flash between captures. */
.camera-flash{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  background:rgba(4,6,10,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--accent);
  z-index:3;
  opacity:0;
  transition:opacity .25s ease;
}
.camera-flash[hidden]{display:none;}
.camera-flash.is-visible{opacity:1;}
.camera-flash-text{
  font-size:14px;font-weight:800;letter-spacing:.04em;
  color:#fff;
}

.camera-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.camera-btn-primary,.camera-btn-secondary{
  padding:14px;border-radius:10px;font-weight:800;font-size:15px;
  cursor:pointer;border:none;font-family:inherit;letter-spacing:-.01em;
}
.camera-btn-primary{background:var(--accent);color:#0a0d14;}
.camera-btn-primary:hover{background:#b8e02a;}
.camera-btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.camera-btn-secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2);}
.camera-btn-secondary:hover{background:rgba(255,255,255,.05);}
.camera-error{
  background:rgba(255,80,80,.12);color:#ff8b8b;
  border:1px solid rgba(255,80,80,.3);
  padding:10px 12px;border-radius:8px;font-size:13px;text-align:center;
}

/* =================== TESTIMONIALS =================== */
.testimonials{
  margin:48px 0 32px;text-align:center;
}
.testimonials .t-eyebrow{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--accent);margin-bottom:8px;
}
.testimonials h2{
  margin:0 0 8px;font-size:26px;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.15;
}
.testimonials .t-lead{
  margin:0 auto 28px;color:var(--text-dim);font-size:14px;max-width:480px;line-height:1.5;
}
.t-grid{
  display:flex;flex-direction:column;gap:18px;
}
.t-card{
  background:var(--surface);
  border:1px solid var(--line);border-radius:16px;
  padding:18px 16px;text-align:left;
}
.t-imgs{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:14px;
}
.t-img{
  position:relative;border-radius:10px;overflow:hidden;
  background:var(--surface-2);
  aspect-ratio:4/5;
}
.t-img img{width:100%;height:100%;object-fit:cover;display:block;}
.t-tag{
  position:absolute;left:6px;bottom:6px;
  font-size:10px;font-weight:900;letter-spacing:.06em;
  padding:3px 8px;border-radius:999px;
}
.t-tag.bad{background:rgba(255,90,90,.85);color:#0a0d14;}
.t-tag.good{background:rgba(212,255,58,.95);color:#0a0d14;}
.t-arrow{
  font-size:20px;font-weight:900;color:var(--accent);text-align:center;
}
.t-meta{
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;
}
.t-name{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em;}
.t-loc{font-size:12px;color:var(--text-muted);font-weight:600;}
.t-quote{
  margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--text);font-style:italic;
}
.t-jump{
  display:flex;align-items:center;gap:8px;
  background:rgba(212,255,58,.06);border:1px solid rgba(212,255,58,.25);
  border-radius:10px;padding:10px 14px;
  font-weight:900;letter-spacing:-.02em;
}
.t-from{color:var(--bad);font-size:18px;}
.t-arrow-mini{color:var(--text-muted);}
.t-to{color:var(--accent);font-size:22px;}
.t-delta{margin-left:auto;font-size:12px;color:var(--accent);letter-spacing:.04em;}
.t-disclaimer{
  margin:24px auto 0;font-size:11px;color:var(--text-muted);max-width:520px;line-height:1.5;
}

@media (min-width: 720px){
  .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
}