/* ============================================================
   AEVIAM ONBOARDING (web) — faithful port of the app's screen
   StyleSheet (src/components/onboarding/screens.tsx) + theme.ts.
   Scoped under .ob-root so it never leaks into marketing pages.
   ============================================================ */
.ob-root{
  /* app theme tokens (theme.ts), incl. the washes the marketing theme lacks */
  --ob-surface:#FAFAF7; --ob-sunken:#F2F0EA; --ob-card:#FFFFFF;
  --ob-ink:#1A1A1A; --ob-ink-soft:#58574F; --ob-ink-mute:#6A6860;
  --ob-accent:#C2895A; --ob-accent-soft:#E8D4BC; --ob-accent-wash:#F4EADD;
  --ob-positive:#7FB89E; --ob-positive-ink:#3F6B57; --ob-positive-wash:#EAF2EC; --ob-positive-soft:#CFE3D6;
  --ob-danger:#B5544A; --ob-danger-wash:#F6E7E4; --ob-danger-border:#E8CFC9;
  --ob-hairline:#E8E5DD;
  --ob-serif:'Playfair Display',Georgia,serif;
  --ob-ease:cubic-bezier(0.22,1,0.36,1);

  position:fixed; inset:0; z-index:100;
  padding-top:env(safe-area-inset-top, 0px);
  display:flex; flex-direction:column;
  background:var(--ob-surface);
  color:var(--ob-ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.ob-root ion-icon{ display:inline-flex; }

/* ---- top bar: back + progress ---- */
.ob-top{
  flex:none; height:56px; display:flex; align-items:center; gap:14px;
  padding:0 20px; max-width:460px; width:100%; margin:0 auto;
}
.ob-back{
  flex:none; width:36px; height:36px; margin-left:-8px; border:0; background:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ob-ink);
  border-radius:999px;
}
.ob-back:hover{ background:var(--ob-sunken); }
.ob-back[hidden]{ display:none; }
.ob-progress{ flex:1; height:3px; border-radius:999px; background:var(--ob-hairline); overflow:hidden; }
.ob-progress[hidden]{ visibility:hidden; }
.ob-progress-fill{ height:100%; background:var(--ob-accent); border-radius:999px; transition:width .35s var(--ob-ease); }

/* ---- stage: phone-width column, screens never scroll past it ---- */
.ob-stage{
  flex:1; min-height:0; width:100%; max-width:460px; margin:0 auto;
  position:relative; overflow-y:auto;
}
.ob-page{
  display:flex; flex-direction:column; min-height:100%;
  padding:16px 24px calc(40px + env(safe-area-inset-bottom, 0px)); box-sizing:border-box;
}
.ob-spacer{ flex:1 1 auto; }
.ob-enter{ animation:ob-rise .34s var(--ob-ease) both; }
@keyframes ob-rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .ob-enter{ animation:none; } }

/* ---- typography ---- */
.ob-eyebrow{ color:var(--ob-ink-mute); font-size:11px; letter-spacing:1.6px; font-weight:600; margin-bottom:8px; }
.ob-headline{ font-family:var(--ob-serif); font-weight:600; font-size:30px; letter-spacing:-0.3px; color:var(--ob-ink); line-height:37px; margin-bottom:12px; }
.ob-inter-headline{ font-family:var(--ob-serif); font-weight:600; font-size:32px; letter-spacing:-0.3px; color:var(--ob-ink); line-height:41px; margin-bottom:12px; }
.ob-sub{ color:var(--ob-ink-soft); font-size:15.5px; line-height:23px; margin-bottom:8px; }
.ob-welcome-eyebrow{ color:var(--ob-accent); font-size:12px; letter-spacing:2px; font-weight:700; margin-bottom:12px; }
.ob-welcome-headline{ font-family:var(--ob-serif); font-weight:600; font-size:38px; letter-spacing:-0.5px; color:var(--ob-ink); line-height:46px; margin-bottom:16px; }
.ob-logo{ height:26px; width:auto; display:block; margin:0 auto; }

/* ---- buttons ---- */
.ob-btn{
  width:100%; border:1.5px solid var(--ob-ink); background:var(--ob-ink); color:var(--ob-surface);
  border-radius:16px; padding:16px; font-family:'Inter',sans-serif; font-weight:600; font-size:16px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background-color .2s ease, opacity .2s ease; -webkit-tap-highlight-color:transparent;
}
.ob-btn:hover{ background:#2A2A2A; }
.ob-btn:active{ transform:scale(.99); }
.ob-btn[disabled]{ opacity:.38; cursor:default; pointer-events:none; }
.ob-btn--secondary{ background:transparent; color:var(--ob-ink); }
.ob-btn--secondary:hover{ background:var(--ob-sunken); }
.ob-textbtn{ align-self:center; padding:12px; margin-top:8px; background:none; border:0; cursor:pointer;
  color:var(--ob-ink-soft); font-size:14.5px; font-weight:600; font-family:'Inter',sans-serif; }
.ob-textbtn:hover{ color:var(--ob-accent); }

/* ---- options ---- */
.ob-opt{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--ob-card); border:1px solid var(--ob-hairline); border-radius:16px;
  padding:18px 16px; margin-bottom:12px; cursor:pointer; width:100%; text-align:left;
  font-family:'Inter',sans-serif; transition:border-color .15s ease, background-color .15s ease;
}
.ob-opt:hover{ border-color:var(--ob-accent-soft); }
.ob-opt--sel{ border-color:var(--ob-accent); background:var(--ob-accent-wash); }
.ob-opt-text{ font-size:16px; color:var(--ob-ink-soft); flex:1; }
.ob-opt--sel .ob-opt-text{ color:var(--ob-ink); font-weight:600; }
.ob-opt ion-icon{ color:var(--ob-accent); font-size:20px; flex:none; }

/* ---- inputs ---- */
.ob-text-input{
  width:100%; box-sizing:border-box; background:var(--ob-card); border:1px solid var(--ob-hairline);
  border-radius:16px; padding:0 16px; height:58px; font-size:18px; color:var(--ob-ink); margin-top:8px;
  font-family:'Inter',sans-serif;
}
.ob-age-input{
  width:100%; box-sizing:border-box; background:var(--ob-card); border:1px solid var(--ob-hairline);
  border-radius:16px; padding:0 16px; height:72px; font-size:32px; color:var(--ob-ink);
  font-family:var(--ob-serif); text-align:center; margin-top:8px;
}
.ob-text-input:focus,.ob-age-input:focus{ outline:none; border-color:var(--ob-ink); }
.ob-block-card{ display:flex; align-items:center; gap:12px; background:var(--ob-sunken); border-radius:16px; padding:16px; margin-top:24px; }
.ob-block-card ion-icon{ color:var(--ob-ink-soft); font-size:22px; flex:none; }
.ob-block-text{ flex:1; color:var(--ob-ink-soft); font-size:14.5px; line-height:21px; }

/* ---- assembly chips ---- */
.ob-chip{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; background:var(--ob-card);
  border:1px solid var(--ob-hairline); border-radius:999px; padding:8px 14px; margin-bottom:10px; }
.ob-chip--risk{ background:var(--ob-danger-wash); border-color:var(--ob-danger-border); }
.ob-chip--good{ background:var(--ob-positive-wash); border-color:var(--ob-positive-soft); }
.ob-chip-text{ font-size:14px; color:var(--ob-ink); font-weight:600; }
.ob-chip ion-icon{ font-size:18px; flex:none; }
.ob-chip--risk ion-icon{ color:var(--ob-danger); }
.ob-chip--good ion-icon{ color:var(--ob-positive); }
.ob-chip--neutral ion-icon{ color:var(--ob-ink-mute); font-size:8px; margin:0 5px; }
.ob-assembly-punch{ font-family:var(--ob-serif); font-size:22px; line-height:29px; color:var(--ob-accent); }

/* ---- villain ---- */
.ob-factor-row{ display:flex; align-items:flex-start; gap:14px; padding:12px 0; }
.ob-factor-icon{ flex:none; width:36px; height:36px; border-radius:12px; background:var(--ob-danger-wash);
  display:flex; align-items:center; justify-content:center; }
.ob-factor-icon ion-icon{ color:var(--ob-danger); font-size:18px; }
.ob-factor-title{ font-family:var(--ob-serif); font-size:16px; color:var(--ob-ink); margin-bottom:2px; }
.ob-factor-text{ font-size:13.5px; line-height:19px; color:var(--ob-ink-soft); }
.ob-hope-line{ font-family:var(--ob-serif); font-size:17px; line-height:24px; color:var(--ob-accent); margin-bottom:20px; }

/* ---- before / after reveal ---- */
.ob-ba{ position:relative; width:100%; aspect-ratio:1 / 0.92; border-radius:20px; overflow:hidden;
  background:var(--ob-sunken); margin-top:20px; cursor:ew-resize; user-select:none; touch-action:none; }
.ob-ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ob-ba-before{ position:absolute; inset:0; overflow:hidden; }
.ob-ba-tag{ position:absolute; top:12px; background:rgba(26,26,26,0.55); padding:4px 10px; border-radius:999px; }
.ob-ba-tag-text{ color:#fff; font-size:10.5px; font-weight:600; letter-spacing:0.5px; }
.ob-ba-divider{ position:absolute; top:0; bottom:0; width:2px; background:#fff; pointer-events:none; }
.ob-ba-handle{ position:absolute; top:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:999px;
  background:rgba(255,255,255,0.94); display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 5px rgba(0,0,0,0.22); pointer-events:none; }
.ob-ba-handle ion-icon{ color:var(--ob-ink); font-size:13px; }
.ob-proof-row{ display:flex; align-items:flex-start; gap:8px; margin-top:16px; }
.ob-proof-row ion-icon{ color:var(--ob-ink-mute); font-size:15px; flex:none; margin-top:1px; }
.ob-proof-text{ flex:1; font-size:12.5px; line-height:18px; color:var(--ob-ink-mute); }

/* ---- analysis ---- */
.ob-analyse-hero{ display:flex; align-items:center; background:var(--ob-sunken); border-radius:20px; padding:16px 0; margin-top:20px; }
.ob-analyse-stat{ flex:1; text-align:center; }
.ob-analyse-num{ font-family:var(--ob-serif); font-size:34px; color:var(--ob-accent); font-variant-numeric:tabular-nums; }
.ob-analyse-cap{ font-size:12px; color:var(--ob-ink-soft); margin-top:2px; }
.ob-analyse-divider{ width:1px; align-self:stretch; background:var(--ob-hairline); margin:8px 0; }
.ob-analyse-lead{ font-size:13.5px; color:var(--ob-ink-soft); margin:20px 0 12px; }
.ob-marker-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.ob-marker-chip{ background:var(--ob-accent-wash); border-radius:999px; padding:6px 12px; }
.ob-marker-chip-text{ font-size:13px; color:var(--ob-accent); font-weight:600; }
.ob-tailor-row{ display:flex; align-items:flex-start; gap:12px; margin-top:20px; }
.ob-tailor-text{ flex:1; font-size:14px; line-height:20px; color:var(--ob-ink-soft); }
.ob-tailor-text b{ font-weight:700; color:var(--ob-ink); }
.ob-benefit-icon{ flex:none; width:36px; height:36px; border-radius:12px; background:var(--ob-accent-wash);
  display:flex; align-items:center; justify-content:center; }
.ob-benefit-icon ion-icon{ color:var(--ob-accent); font-size:18px; }

/* ---- two clocks ---- */
.ob-clock-stack{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.ob-clock-card{ display:flex; align-items:center; gap:16px; background:var(--ob-card); border-radius:20px;
  padding:16px; box-shadow:0 5px 14px rgba(26,26,26,0.06); }
.ob-clock-body{ flex:1; }
.ob-tempo-chip{ display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:4px 8px; align-self:flex-start; }
.ob-tempo-chip ion-icon{ font-size:11px; }
.ob-tempo-chip-text{ font-size:9.5px; letter-spacing:1px; font-weight:800; }
.ob-clock-name{ font-family:var(--ob-serif); font-size:18px; color:var(--ob-ink); margin-top:8px; }
.ob-clock-unit{ font-family:var(--ob-serif); font-size:14px; color:var(--ob-ink-mute); }
.ob-clock-desc{ font-size:12.5px; line-height:18px; color:var(--ob-ink-soft); margin-top:4px; }
.ob-reveal-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; padding:0 12px; }
.ob-reveal-row ion-icon{ color:var(--ob-accent); font-size:14px; flex:none; }
.ob-reveal-text{ font-size:12.5px; line-height:18px; color:var(--ob-ink-mute); text-align:center; }

/* tempo ring (sweeping comet) */
.ob-ring{ position:relative; display:flex; align-items:center; justify-content:center; flex:none; }
.ob-ring-well{ position:absolute; border-radius:999px; }
.ob-ring svg{ position:absolute; inset:0; }
.ob-ring-spin{ position:absolute; inset:0; transform-origin:50% 50%; animation:ob-spin linear infinite; }
@keyframes ob-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ob-ring-spin{ animation:none; } }
.ob-ring-icon{ position:relative; z-index:1; display:flex; }

/* mini dial (projection) */
.ob-dial{ position:relative; display:flex; align-items:center; justify-content:center; flex:none; }
.ob-dial svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.ob-dial-center{ position:relative; text-align:center; }
.ob-dial-num{ font-family:var(--ob-serif); color:var(--ob-ink); font-variant-numeric:tabular-nums; line-height:1; }
.ob-dial-sub{ color:var(--ob-ink-mute); font-size:10.5px; margin-top:1px; }

/* ---- projection ---- */
.ob-outlook-row{ display:flex; gap:16px; margin:20px 0; }
.ob-dial-col{ flex:1; display:flex; flex-direction:column; align-items:center; }
.ob-dial-cap{ font-size:10px; letter-spacing:1.2px; font-weight:700; color:var(--ob-ink-mute); margin-top:12px; }
.ob-trend{ font-size:12px; color:var(--ob-positive-ink); font-weight:700; margin-top:4px; display:flex; align-items:center; gap:3px; }
.ob-trend ion-icon{ font-size:11px; }
.ob-scrub-hit{ height:40px; display:flex; align-items:center; position:relative; padding:0 14px; cursor:pointer; touch-action:none; }
.ob-scrub-track{ flex:1; height:6px; border-radius:999px; background:var(--ob-hairline); overflow:hidden; }
.ob-scrub-fill{ height:6px; border-radius:999px; background:var(--ob-accent); }
.ob-scrub-thumb{ position:absolute; top:9px; width:22px; height:22px; border-radius:999px; background:var(--ob-card);
  border:2px solid var(--ob-accent); box-shadow:0 1px 4px rgba(26,26,26,0.12); box-sizing:border-box; }
.ob-scrub-labels{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; padding:0 2px; }
.ob-scrub-end{ font-size:11.5px; color:var(--ob-ink-mute); }
.ob-scrub-day{ font-size:12.5px; color:var(--ob-ink); font-weight:700; font-variant-numeric:tabular-nums; }
.ob-benefit-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ob-benefit-text{ flex:1; font-size:14.5px; line-height:20px; color:var(--ob-ink); }
.ob-footnote{ font-size:11.5px; color:var(--ob-ink-mute); text-align:center; margin-bottom:12px; }

/* ---- scan ready / notif icons ---- */
.ob-scan-icon{ width:84px; height:84px; border-radius:999px; background:var(--ob-accent-wash);
  display:flex; align-items:center; justify-content:center; margin:0 auto; }
.ob-scan-icon ion-icon{ color:var(--ob-accent); font-size:40px; }
.ob-privacy-box{ background:var(--ob-sunken); border-radius:20px; padding:0 16px; margin-top:24px; }
.ob-privacy-row{ display:flex; align-items:center; gap:12px; padding:14px 0; }
.ob-privacy-row + .ob-privacy-row{ border-top:1px solid var(--ob-hairline); }
.ob-privacy-row ion-icon{ color:var(--ob-accent); font-size:18px; flex:none; }
.ob-privacy-text{ flex:1; font-size:14px; line-height:20px; color:var(--ob-ink-soft); }

/* ---- scan (iframe) ---- */
.ob-scan-frame{ position:absolute; inset:0; background:var(--ob-surface); }
/* Desktop first scan: widen the stage for this screen only and frame the
   camera as an elevated card, matching the /app scan treatment. The wide
   iframe viewport also activates the engine's own desktop layout. */
@media (min-width:1000px){
  .ob-root.ob-scanwide .ob-stage{ max-width:1100px; }
  /* max-height keeps the card clearly landscape (> the engine's 6/5 gate) even
     on tall windows, so the engine's desktop layout always activates. */
  .ob-root.ob-scanwide .ob-scan-frame{
    inset:10px 0 22px; max-height:760px; border-radius:26px; overflow:hidden;
    background:var(--ob-surface); border:1px solid var(--ob-hairline);
    box-shadow:0 22px 60px -34px rgba(26,26,26,.22);
  }
}

/* ---- scan loading ---- */
.ob-bar-track{ height:6px; border-radius:999px; background:var(--ob-hairline); overflow:hidden; margin-top:12px; }
.ob-bar-fill{ height:6px; background:var(--ob-accent); width:0; transition:width .4s var(--ob-ease); }
.ob-check-row{ display:flex; align-items:center; gap:12px; padding:8px 0; }
.ob-check-row ion-icon{ color:var(--ob-accent); font-size:18px; flex:none; }
.ob-check-text{ flex:1; font-size:14px; color:var(--ob-ink-soft); }
.ob-check-text--done{ color:var(--ob-ink); }
.ob-spinner{ flex:none; width:16px; height:16px; border-radius:999px; border:2px solid var(--ob-hairline);
  border-top-color:var(--ob-accent); animation:ob-spin .8s linear infinite; }

/* ---- results teaser ---- */
.ob-complete-row{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.ob-complete-pill{ display:flex; align-items:center; gap:6px; background:var(--ob-positive-wash);
  border-radius:999px; padding:6px 12px; }
.ob-complete-pill ion-icon{ color:var(--ob-positive-ink); font-size:12px; }
.ob-complete-pill-text{ font-size:12px; color:var(--ob-positive-ink); font-weight:600; }
.ob-result-badge{ width:132px; height:132px; border-radius:999px; background:var(--ob-sunken);
  border:2px solid var(--ob-accent-soft); display:flex; align-items:center; justify-content:center;
  margin:20px auto 0; position:relative; }
.ob-result-num{ font-family:var(--ob-serif); font-size:56px; color:var(--ob-accent); font-variant-numeric:tabular-nums; }
.ob-blurred{ color:transparent !important; text-shadow:0 0 var(--ob-blur,15px) var(--ob-blur-color,#1A1A1A); }
.ob-lock-badge{ position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:999px;
  background:var(--ob-ink); display:flex; align-items:center; justify-content:center; }
.ob-lock-badge ion-icon{ color:#fff; font-size:16px; }
.ob-result-label{ font-size:11px; letter-spacing:1px; font-weight:700; color:var(--ob-ink-mute); margin-top:12px; text-align:center; }
.ob-locked-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--ob-hairline); }
.ob-locked-label{ font-size:15px; color:var(--ob-ink-soft); }
.ob-locked-val-wrap{ display:flex; align-items:center; gap:8px; }
.ob-locked-val-wrap ion-icon{ color:var(--ob-ink-mute); font-size:12px; }
.ob-locked-val{ font-size:15px; font-weight:700; min-width:56px; text-align:right; }
.ob-ready-tag{ display:flex; align-items:center; gap:6px; }
.ob-ready-tag ion-icon{ color:var(--ob-positive-ink); font-size:15px; }
.ob-ready-text{ font-size:14px; color:var(--ob-positive-ink); font-weight:700; }
.ob-pay-note{ text-align:center; color:var(--ob-ink-mute); font-size:12.5px; margin-top:12px; }

/* ---- paywall ---- */
.ob-pay-row{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.ob-pay-row ion-icon{ color:var(--ob-accent); font-size:16px; flex:none; }
.ob-pay-row-text{ color:var(--ob-ink-soft); font-size:15px; line-height:22px; }
.ob-price-card{ background:var(--ob-card); border:1px solid var(--ob-hairline); border-radius:20px; padding:20px;
  margin-top:16px; box-shadow:0 6px 16px rgba(26,26,26,0.07); cursor:pointer; }
.ob-price-card--best{ border-color:var(--ob-accent); }
.ob-price-row{ display:flex; justify-content:space-between; align-items:baseline; }
.ob-price-title{ font-family:var(--ob-serif); font-size:18px; color:var(--ob-ink); }
.ob-price-badge{ color:var(--ob-accent); font-size:11px; font-weight:700; letter-spacing:0.4px; margin-left:8px; }
.ob-price-amount{ font-family:var(--ob-serif); font-size:22px; color:var(--ob-ink); font-variant-numeric:tabular-nums; }
.ob-price-unit{ font-size:13px; color:var(--ob-ink-mute); font-family:'Inter',sans-serif; }
.ob-pay-legal{ text-align:center; color:var(--ob-ink-mute); font-size:11px; line-height:15px; margin:16px 0 12px; }
.ob-pay-links{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:8px; }
.ob-pay-link{ color:var(--ob-ink-soft); font-size:12px; font-weight:600; text-decoration:none; padding:4px; }
.ob-pay-link:hover{ color:var(--ob-accent); }
.ob-pay-dot{ color:var(--ob-ink-mute); font-size:12px; }

/* ---- paywall v2: trust strip, selectable plans, guarantee ---- */
.ob-pay-trust{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:16px; }
.ob-pay-trust-item{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ob-ink-mute); font-weight:600; }
.ob-pay-trust-item ion-icon{ color:var(--ob-accent); font-size:14px; }

.ob-plan-group{ display:flex; flex-direction:column; gap:12px; }
.ob-plan{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:var(--ob-card); border:1.5px solid var(--ob-hairline); border-radius:18px; padding:16px 18px;
  font-family:inherit; color:inherit; transition:border-color .2s var(--ob-ease), box-shadow .2s var(--ob-ease), background .2s var(--ob-ease); }
.ob-plan:hover{ border-color:var(--ob-accent-soft); }
.ob-plan--on{ border-color:var(--ob-accent); background:var(--ob-accent-wash); box-shadow:0 8px 22px rgba(194,137,90,0.16); }
.ob-plan-radio{ flex:none; width:22px; height:22px; border-radius:999px; border:2px solid var(--ob-hairline);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s; }
.ob-plan-radio ion-icon{ color:#fff; font-size:13px; opacity:0; transition:opacity .15s; }
.ob-plan--on .ob-plan-radio{ background:var(--ob-accent); border-color:var(--ob-accent); }
.ob-plan--on .ob-plan-radio ion-icon{ opacity:1; }
.ob-plan-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ob-plan-top{ display:flex; align-items:center; gap:8px; }
.ob-plan-title{ font-family:var(--ob-serif); font-size:18px; color:var(--ob-ink); }
.ob-plan-badge{ background:var(--ob-accent); color:#fff; font-size:10px; font-weight:800; letter-spacing:0.5px;
  padding:2px 7px; border-radius:999px; }
.ob-plan-sub{ font-size:12.5px; color:var(--ob-ink-soft); line-height:16px; }
.ob-plan-price{ flex:none; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.ob-plan-was{ font-size:12px; color:var(--ob-ink-mute); text-decoration:line-through; }
.ob-plan-amount{ font-family:var(--ob-serif); font-size:22px; color:var(--ob-ink); font-variant-numeric:tabular-nums; }
.ob-plan-unit{ font-size:12.5px; color:var(--ob-ink-mute); font-family:'Inter',sans-serif; }

.ob-pay-guarantee{ display:flex; align-items:flex-start; gap:10px; margin-top:18px;
  background:var(--ob-positive-wash); border:1px solid var(--ob-positive-soft); border-radius:14px; padding:13px 15px; }
.ob-pay-guarantee ion-icon{ color:var(--ob-positive-ink); font-size:18px; flex:none; margin-top:1px; }
.ob-pay-guarantee span{ font-size:12.5px; line-height:18px; color:var(--ob-positive-ink); }
.ob-pay-guarantee b{ color:var(--ob-positive-ink); font-weight:700; }

/* ---- results reveal (post-unlock payoff) ---- */
.ob-rating{ margin-bottom:16px; }
.ob-rating-head{ display:flex; justify-content:space-between; margin-bottom:5px; }
.ob-rating-label{ font-size:14px; color:var(--ob-ink-soft); }
.ob-rating-val{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.ob-rating-track{ height:7px; border-radius:999px; background:var(--ob-hairline); overflow:hidden; }
.ob-rating-fill{ height:7px; border-radius:999px; }
.ob-sev-low{ color:var(--ob-danger); } .ob-sev-low-bg{ background:var(--ob-danger); }
.ob-sev-mid{ color:var(--ob-accent); } .ob-sev-mid-bg{ background:var(--ob-accent); }
.ob-sev-high{ color:var(--ob-positive); } .ob-sev-high-bg{ background:var(--ob-positive); }
.ob-focus-card{ border:1px solid var(--ob-hairline); border-radius:20px; padding:16px; margin-bottom:12px; background:var(--ob-card); }
.ob-focus-card--top{ border-color:var(--ob-accent); background:var(--ob-accent-wash); }
.ob-focus-badge{ display:inline-flex; align-items:center; gap:6px; background:var(--ob-ink); color:#fff;
  font-size:10px; letter-spacing:1px; font-weight:700; border-radius:999px; padding:4px 10px; margin-bottom:10px; }
.ob-focus-meta{ font-size:10.5px; letter-spacing:1px; font-weight:700; color:var(--ob-ink-mute); margin-bottom:8px; }
.ob-focus-h{ font-family:var(--ob-serif); font-size:18px; color:var(--ob-ink); margin-bottom:8px; }
.ob-focus-line{ font-size:13.5px; line-height:20px; color:var(--ob-ink-soft); margin-bottom:8px; }
.ob-focus-line b{ color:var(--ob-ink); font-weight:700; }
.ob-focus-fix{ display:flex; align-items:flex-start; gap:10px; background:var(--ob-card); border:1px solid var(--ob-hairline);
  border-radius:14px; padding:12px; margin-top:8px; }
.ob-focus-card--top .ob-focus-fix{ background:#fff; }
.ob-focus-fix-body{ flex:1; }
.ob-focus-fix-eyebrow{ font-size:10px; letter-spacing:1px; font-weight:700; color:var(--ob-accent); margin-bottom:2px; }
.ob-focus-fix-text{ font-size:13.5px; line-height:19px; color:var(--ob-ink); }
.ob-focus-payoff{ display:flex; align-items:center; gap:6px; margin-top:10px; color:var(--ob-positive-ink); font-size:12.5px; font-weight:700; }
.ob-focus-payoff ion-icon{ font-size:14px; }
.ob-glow-note{ font-size:13px; line-height:19px; color:var(--ob-ink-mute); margin-top:20px; text-align:center; }

/* ---- auth (sign in / create account) ---- */
.ob-field-label{ display:block; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; font-weight:600; color:var(--ob-ink-mute); margin-bottom:6px; }
.ob-auth-msg{ border-radius:12px; padding:11px 14px; font-size:13px; line-height:1.5; margin-top:14px; }
.ob-auth-msg--error{ background:var(--ob-danger-wash); color:#9C4A33; }
.ob-auth-msg--info{ background:var(--ob-sunken); color:var(--ob-ink-soft); }
.ob-auth-divider{ display:flex; align-items:center; gap:14px; margin:22px 0 18px; }
.ob-auth-divider::before,.ob-auth-divider::after{ content:''; flex:1 1 auto; height:1px; background:var(--ob-hairline); }
.ob-auth-divider span{ font-size:11px; letter-spacing:1.6px; text-transform:uppercase; font-weight:500; color:var(--ob-ink-mute); }
.ob-oauth{ width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px; background:var(--ob-card); color:var(--ob-ink); border:1.5px solid var(--ob-hairline);
  border-radius:16px; font-family:'Inter',sans-serif; font-weight:600; font-size:15px; cursor:pointer; transition:border-color .2s ease; }
.ob-oauth:hover{ border-color:var(--ob-ink); }