/* ==========================================================================
   style.css — Salary Risk & Positioning V2
   Editorial Analytics design system. Dark theme.
   See: decisions/DESIGN_DIRECTION.md (locked April 2026)

   Architecture:
     1. Design tokens (CSS custom properties)
     2. Reset + base
     3. Layout primitives (.wrap, .stack, .row)
     4. Typography classes (.serif, .mono, .h1, .h2, .body, .micro)
     5. Form components (input, select, label, .field)
     6. Buttons (.cta-primary, .cta-secondary, .cta-ghost)
     7. Result components (.percentile-hero, .band, .pin, .badge)
     8. Confidence badges (.badge-med, .badge-low, .badge-tooltip)
     9. Share card (.share-card)
    10. Methodology footer
    11. Responsive (mobile breakpoint at 720px)
    12. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Colors --- */
  --bg:         #0A0A0A;   /* off-black, not pure (true black is harsh) */
  --bg-elev:    #131313;   /* one step lifted — for cards/panels */
  --bg-elev-2:  #1A1A1A;   /* two steps lifted — focused field, tooltip */

  --text:       #F5F5F0;   /* off-white, slight warmth */
  --text-mut:   #8C8C85;   /* muted secondary text */
  --text-dim:   #5A5A55;   /* tertiary, captions, disabled */

  --border:     #1F1F1D;   /* default subtle dividers */
  --border-2:   #2A2A26;   /* stronger borders for active fields */

  /* Reserved accent — used ONLY for percentile pin, primary CTA,
     and key interactive moments. Not for body, not for hover states
     on non-interactive elements. */
  --accent:     #D4A574;   /* desaturated warm amber */
  --accent-dim: #8C6D4D;   /* dimmed amber for secondary states */

  /* Semantic colors — used VERY sparingly per DESIGN_DIRECTION */
  --ok:         #6B8E73;   /* reserved green: well-positioned + */
  --warn:       #B85C42;   /* reserved red: structurally underpaid */

  /* Confidence badges */
  --badge-med-bg:     #1F1F1D;
  --badge-med-text:   #B8B8B0;
  --badge-low-bg:     #2A1F15;
  --badge-low-text:   #D4A574;

  /* --- Typography --- */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* --- Spacing scale (8px-based) --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* --- Radii --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* --- Easing & timing --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* sharp start, smooth settle */
  --ease-in:  cubic-bezier(0.4, 0, 0.6, 0.6);   /* for exits only */

  --t-fast:    160ms;     /* hover, focus state changes */
  --t-mid:     280ms;     /* form transitions, scenario toggles */
  --t-reveal:  700ms;     /* counting number, drawing bar */
  --t-stage:   800ms;     /* hold the verdict drop */

  /* --- Layout --- */
  --maxw:      980px;
  --maxw-form: 640px;

  /* --- Shadows (very subtle in dark theme) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --glow-accent: 0 0 24px rgba(212, 165, 116, 0.15);
}


/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";  /* harmless if font lacks them */
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--accent); }

ul, ol { padding-left: 1.2em; }

button { font-family: inherit; }

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection {
  background: var(--accent-dim);
  color: var(--bg);
}


/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-6) var(--s-5);
}

.wrap-form {
  max-width: var(--maxw-form);
}

.stack > * + * { margin-top: var(--s-4); }
.stack-tight > * + * { margin-top: var(--s-2); }
.stack-loose > * + * { margin-top: var(--s-6); }

.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.row-between {
  justify-content: space-between;
}

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: var(--s-5) 0;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.serif {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";  /* tabular figures — currency aligns */
  letter-spacing: 0;
}

.h1 {
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}

.h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
}

.subline {
  font-size: 17px;
  line-height: 1.45;
  color: var(--text-mut);
  font-weight: 400;
}

.micro {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mut);
}

.tiny {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Verdict line — the moment the result drops.
   ONE of the two places serif appears. */
.verdict {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
}

.verdict-underpaid    { color: var(--warn); }
.verdict-belowmarket  { color: var(--text); }
.verdict-aligned      { color: var(--text); }
.verdict-strong       { color: var(--text); }
.verdict-top          { color: var(--ok); }

/* Decision statement — the recommended move.
   The other place serif appears. */
.decision {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}


/* ==========================================================================
   5. FORM COMPONENTS
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mut);
  letter-spacing: 0.01em;
}

.field-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: var(--s-1);
}

/* Live computed band readout under experience input */
.field-hint-band {
  font-size: 12px;
  color: var(--accent-dim);
  font-family: var(--font-mono);
  margin-top: var(--s-1);
  min-height: 14px;  /* reserve space so layout doesn't jump when filled */
}

input[type="text"],
input[type="number"],
input[type="email"],
select {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  outline: none;

  transition:
    background-color var(--t-fast) var(--ease-out),
    border-color    var(--t-fast) var(--ease-out),
    box-shadow      var(--t-fast) var(--ease-out);

  /* Remove number input spinners (cleaner UX, reduces visual noise) */
  -moz-appearance: textfield;
  appearance: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input::placeholder {
  color: var(--text-dim);
}

input:hover,
select:hover {
  border-color: var(--border-2);
}

input:focus,
select:focus {
  background: var(--bg-elev-2);
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.12);
}

/* Currency prefix wrapper (renders ₹ inline) */
.input-currency {
  position: relative;
}
.input-currency::before {
  content: attr(data-symbol);
  position: absolute;
  left: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-mut);
  font-family: var(--font-mono);
  font-size: 14px;
  pointer-events: none;
}
.input-currency input {
  padding-left: 32px;
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* Select chevron (replace native) */
select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-mut) 50%),
    linear-gradient(-45deg, transparent 50%, var(--text-mut) 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
  cursor: pointer;
}

select:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(-45deg, transparent 50%, var(--accent) 50%);
}

.field-error {
  font-size: 12px;
  color: var(--warn);
  margin-top: var(--s-1);
  min-height: 14px;
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

button.cta-primary,
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  font-size: 15px;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition:
    transform   var(--t-fast) var(--ease-out),
    box-shadow  var(--t-fast) var(--ease-out),
    background  var(--t-fast) var(--ease-out),
    opacity     var(--t-fast) var(--ease-out);
}

.cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), var(--glow-accent);
}

.cta-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.cta-primary[disabled],
.cta-primary[aria-disabled="true"] {
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.cta-primary[disabled]:hover {
  transform: none;
  box-shadow: none;
}

/* Magnetic hover marker — motion.js applies translate via inline transform.
   This class signals "this button is magnetic-hover capable" and gives
   the base transition the JS-driven transform should ride on top of. */
.cta-primary.magnetic {
  will-change: transform;
}

/* Secondary button — for "Back", "Print", scenario toggles, etc. */
button.cta-secondary,
.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;

  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.cta-secondary:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-2);
  color: var(--accent);
}

.cta-secondary:active {
  background: var(--bg-elev);
}

/* Ghost button — minimal, for inline links that need button affordance */
.cta-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mut);
  padding: var(--s-2) var(--s-3);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.cta-ghost:hover {
  color: var(--accent);
  background: var(--bg-elev);
}


/* ==========================================================================
   7. RESULT COMPONENTS — built for Day 4-5 wiring
   ========================================================================== */

.result-canvas {
  background: var(--bg);
  padding: var(--s-6) 0;
}

/* Compact summary strip — appears at top after submit (form collapses) */
.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  font-size: 13px;
  color: var(--text-mut);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
}
.summary-strip .sep {
  color: var(--text-dim);
  margin: 0 var(--s-2);
}
.summary-strip .strong { color: var(--text); font-weight: 500; }

/* Percentile hero — large counting number */
.percentile-hero {
  font-size: 88px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.percentile-hero .ord {
  font-size: 32px;
  vertical-align: super;
  margin-left: 4px;
  color: var(--text-mut);
  font-weight: 400;
}

/* Reference frame line below percentile */
.reference-frame {
  font-size: 14px;
  color: var(--text-mut);
  font-weight: 400;
  margin-top: var(--s-2);
}

/* Band visualization scaffold (motion.js animates the path) */
.band {
  position: relative;
  width: 100%;
  height: 64px;
  margin: var(--s-5) 0;
}
.band svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Pin — user position marker. JS drops it into final spot. */
.pin {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(212, 165, 116, 0.6);
  will-change: transform, left;
  pointer-events: none;
}
.pin::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -5px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(212, 165, 116, 0.8);
}

/* Urgency line — live-updating gap math */
.urgency {
  font-size: 14px;
  color: var(--text-mut);
  font-style: normal;
  margin-top: var(--s-3);
}
.urgency .num {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   8. CONFIDENCE BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  vertical-align: middle;
  cursor: help;
  position: relative;
  transition: background var(--t-fast) var(--ease-out);
}

.badge-med {
  background: var(--badge-med-bg);
  color: var(--badge-med-text);
  border: 1px solid var(--border-2);
}
.badge-med:hover { background: var(--bg-elev-2); }

.badge-low {
  background: var(--badge-low-bg);
  color: var(--badge-low-text);
  border: 1px solid var(--accent-dim);
}
.badge-low:hover { background: #3A2A1F; }

/* Tooltip surface — appears on hover/tap */
.badge-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 280px;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    visibility 0s linear var(--t-fast);
  pointer-events: none;
  z-index: 100;
  box-shadow: var(--shadow-md);
  text-transform: none;
  letter-spacing: normal;
}

.badge:hover .badge-tooltip,
.badge:focus-within .badge-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}


/* ==========================================================================
   9. SHARE CARD (LinkedIn-optimized — 1200×628 export target)
   ========================================================================== */

.share-card {
  width: 600px;
  height: 314px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.share-card-headline {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.share-card-numbers {
  display: flex;
  gap: var(--s-6);
  margin-top: var(--s-4);
}

.share-card-brand {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ==========================================================================
   10. METHODOLOGY + FOOTER
   ========================================================================== */

.methodology-foot {
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
}
.methodology-foot a {
  color: var(--text-mut);
  text-decoration: underline;
  text-decoration-color: var(--border-2);
  text-underline-offset: 2px;
}
.methodology-foot a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent-dim);
}

/* Brand mark / logo placeholder — small, restrained */
.brand {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}


/* ==========================================================================
   11. SCROLL-PREVIEW (below-the-fold animated example)
   ========================================================================== */

.scroll-preview {
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--border);
}

.scroll-preview-label {
  font-size: 13px;
  color: var(--text-mut);
  margin-bottom: var(--s-4);
}

.scroll-preview-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  /* Logic to auto-trigger sample animation lives in motion.js */
}


/* ==========================================================================
   12. RESPONSIVE — mobile breakpoint at 720px
   ========================================================================== */

@media (max-width: 720px) {
  .wrap {
    padding: var(--s-5) var(--s-4);
  }

  .h1 { font-size: 32px; }
  .h2 { font-size: 20px; }
  .verdict { font-size: 30px; }
  .decision { font-size: 18px; }
  .percentile-hero { font-size: 64px; }
  .percentile-hero .ord { font-size: 22px; }

  .summary-strip {
    font-size: 12px;
  }

  /* Form collapses to single column on mobile (was 2-col on desktop) */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tooltip — mobile shifts left to stay in viewport */
  .badge-tooltip {
    width: calc(100vw - 32px);
    max-width: 320px;
    left: 0;
    transform: translateX(0) translateY(-4px);
  }
  .badge:hover .badge-tooltip {
    transform: translateX(0) translateY(0);
  }

  .share-card {
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 314;
  }
  .share-card-headline { font-size: 22px; }
}

/* Form grid (desktop default — 2 columns where logical) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.form-grid .full {
  grid-column: 1 / -1;
}


/* ==========================================================================
   13. REDUCED MOTION
   Per WCAG: respect user preference. Animations become instant.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   14. RESULT-CANVAS RUNTIME COMPONENTS
   Day 4: classes emitted by app.js at runtime. No new tokens, no new
   colors, no new fonts — composed entirely from §1 design tokens.
   ========================================================================== */

/* Result section wrapper — appears below where the hero used to be */
.result-canvas {
  margin: var(--s-7) 0 var(--s-8);
}

/* Collapsed-form summary strip (after submit). Reads as compact metadata. */
.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: 13px;
  color: var(--text-mut);
  font-variant-numeric: tabular-nums;
}
.summary-strip strong {
  color: var(--text);
  font-weight: 500;
}

/* Phase 1 — personalized loader. Three lines crossfade in place. */
.loader-phase {
  min-height: 84px;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.loader-phase .line {
  font-size: 15px;
  color: var(--text-mut);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}
.loader-phase .line.is-active { opacity: 1; }

/* Phase 3 wrapper — percentile + band + reference frame */
.result-main { margin-top: var(--s-5); }

/* Band markers fade in staggered (app.js toggles .is-visible) */
.band-marker {
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.band-marker.is-visible { opacity: 1; }

/* Pin: scenario presets re-render `left` — animate the slide so it reads
   as movement rather than a jump cut. Vertical drop is owned by motion.js. */
.pin {
  transition: left var(--t-reveal) var(--ease-out);
}

/* Phase 5 — interactive layer (framing toggle, presets, decision, CTA) */
.phase5 {
  margin-top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Framing toggle — segmented control */
.framing-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 2px;
  background: var(--bg-elev);
  align-self: flex-start;
}
.framing-toggle .opt {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-mut);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: var(--s-2) var(--s-4);
  border-radius: calc(var(--r-md) - 2px);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    color      var(--t-fast) var(--ease-out);
}
.framing-toggle .opt:hover { color: var(--text); }
.framing-toggle .opt.is-active {
  background: var(--bg-elev-2);
  color: var(--text);
}
.framing-toggle .opt:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: 2px;
}

/* What-if scenario presets — wrapper + button row */
.whatif { display: flex; flex-direction: column; gap: var(--s-2); }
.whatif-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Active preset uses the existing .cta-secondary base, just toggled state */
.preset.is-active {
  background: var(--bg-elev-2);
  border-color: var(--border-2);
  color: var(--text);
}

/* Scenario insight line (Option A — what-if explainer)
   Single line below the preset buttons. Explains the scenario factually
   without moving the pin. Fades in/out when a preset toggles. */
.scenario-insight {
  margin-top: var(--s-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mut);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}
.scenario-insight.is-visible { opacity: 1; }
.scenario-insight strong { color: var(--text); font-weight: 500; }
.scenario-insight .sep { margin: 0 var(--s-2); color: var(--text-dim); }

/* =============================================================
   §16. HOMEPAGE UX LAYER (Day 5 additions per HOMEPAGE_UX_PLAN)
   ============================================================= */

/* Header nav cluster — brand + nav links sit on the left side together.
   The "India" tag remains on the right via the existing .row-between. */
.header-left {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
}

/* Nav links — muted text links between brand and region tag.
   Same visual weight as the .tiny "India" tag (per DESIGN_DIRECTION
   restraint principle). Hover = subtle opacity bump only — no
   accent color use here (accent is reserved for pin / CTA / urgency). */
.nav-links {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
}
.nav-link {
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease-out);
}
.nav-link:hover {
  color: var(--text-mut);
}
.nav-link.is-active {
  color: var(--text);
}

/* Trust micro-line — directly below the submit CTA. The single highest-
   leverage trust signal on the page. Muted weight, full form-width,
   centred under the submit row. Reads as a quiet caveat, not a banner. */
.trust-microline {
  margin-top: var(--s-3);
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-mut);
  max-width: 60ch;
}

/* Anchor stubs — temporary Day-5 destinations for the nav links.
   Day 7 replaces these with the full "What you get / Why different / FAQ"
   content. Minimal weight: short paragraph, muted, modest padding. */
.anchor-stub {
  margin-top: var(--s-8);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--border);
  color: var(--text-mut);
  font-size: 14px;
  line-height: 1.65;
  max-width: 70ch;
}
.anchor-stub-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0 0 var(--s-2) 0;
}
.anchor-stub p {
  margin: 0;
}
.anchor-stub p + p {
  margin-top: var(--s-3);
}

/* Mobile — nav links wrap below brand */
@media (max-width: 640px) {
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  .nav-links {
    gap: var(--s-3);
  }
  .trust-microline {
    margin-top: var(--s-4);
  }
}

/* =============================================================
   §17. ACTION PACK (report.html) — Day 5 build
   Editorial Analytics palette, dark theme. No new design tokens.
   Inherits .verdict/.decision serif rule (NOT used here — Source
   Serif 4 is reserved for verdict + decision per DESIGN_DIRECTION).
   ============================================================= */

/* Hero ribbon at the top of the Action Pack page */
.ap-hero {
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
}
.ap-hero-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 var(--s-2) 0;
}
.ap-hero-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 var(--s-3) 0;
  max-width: 30ch;
}
.ap-hero-meta {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

/* Each numbered item — generous breathing room between sections */
.ap-item {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.ap-item:first-of-type { border-top: none; padding-top: 0; }

/* Item header — number + title side by side */
.ap-item-header {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.ap-item-num {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
.ap-item-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}
.ap-item-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1px solid var(--border-2);
  border-radius: 3px;
  color: var(--text-mut);
  margin-left: auto;
}

/* Intro paragraph under each item title */
.ap-item-intro {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-mut);
  margin: 0 0 var(--s-4) 0;
  max-width: 70ch;
}
.ap-item-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 var(--s-3) 0;
  max-width: 70ch;
}
.ap-item-section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: var(--s-4) 0 var(--s-2) 0;
}
.ap-item-foot {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: var(--s-4) 0 0 0;
  max-width: 70ch;
}

/* Item 1 — exact target range — 3-column grid */
.ap-range-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-4);
  margin: var(--s-4) 0;
}
.ap-range-cell {
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elev);
}
.ap-range-cell-target {
  border-color: var(--accent);
  background: var(--bg-elev-2);
}
.ap-range-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0 0 var(--s-2) 0;
}
.ap-range-num {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin: 0 0 var(--s-2) 0;
  letter-spacing: -0.01em;
}
.ap-range-cell-target .ap-range-num { color: var(--accent); }
.ap-range-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-mut);
  margin: 0;
}

/* Bullet lists */
.ap-bullet-list {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0;
  max-width: 70ch;
}
.ap-bullet-list li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  position: relative;
  border-bottom: 1px solid var(--border);
}
.ap-bullet-list li:last-child { border-bottom: none; }
.ap-bullet-list li::before {
  content: '·';
  position: absolute;
  left: var(--s-2);
  top: var(--s-2);
  color: var(--text-dim);
  font-weight: 600;
}
.ap-bullet-list-rich li {
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
}
.ap-bullet-list-rich li strong {
  display: inline-block;
  margin-bottom: var(--s-1);
  color: var(--text);
}

/* Item 3 — positioning card */
.ap-positioning-card {
  padding: var(--s-5);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: var(--bg-elev);
  margin: var(--s-4) 0;
  max-width: 70ch;
}
.ap-positioning-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0 0 var(--s-2) 0;
}
.ap-positioning-strong {
  font-size: 18px;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 var(--s-3) 0;
}
.ap-positioning-delta {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}
.ap-positioning-why {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mut);
  margin: 0;
}

/* Placeholder banner — appears just before items 4 and 5 */
.ap-commitment {
  margin: var(--s-7) 0 var(--s-5) 0;
  padding: var(--s-5);
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg-elev);
}
.ap-commitment-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 var(--s-3) 0;
}
.ap-commitment-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  max-width: 70ch;
}

/* Placeholder banner inside items 4 / 5 */
.ap-placeholder-banner {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elev);
  border-left: 2px solid var(--accent);
  margin: 0 0 var(--s-4) 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-mut);
  max-width: 70ch;
}
.ap-placeholder-banner p { margin: 0; }
.ap-placeholder-banner strong { color: var(--text); }

.ap-item-placeholder {
  opacity: 0.92;
}

/* Item 6 — negotiation script blocks */
.ap-script-block {
  margin: var(--s-4) 0;
  padding: var(--s-4);
  border-left: 2px solid var(--border-2);
  background: var(--bg-elev);
  max-width: 70ch;
}
.ap-script-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0 0 var(--s-2) 0;
}
.ap-script-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  font-style: italic;
}

/* Item 7 — framework sections */
.ap-framework-section {
  margin: var(--s-4) 0;
  max-width: 70ch;
}
.ap-framework-h {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--s-2) 0;
}
.ap-framework-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mut);
  margin: 0;
}
.ap-framework-body strong { color: var(--text); }

/* Fallback state — when no/stale/wrong localStorage */
.ap-fallback {
  text-align: center;
  padding: var(--s-7) 0;
  max-width: 50ch;
  margin: 0 auto;
}
.ap-fallback-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 var(--s-3) 0;
}
.ap-fallback .subline {
  margin: var(--s-3) auto var(--s-5) auto;
}

/* Mobile responsiveness */
@media (max-width: 720px) {
  .ap-hero-title { font-size: 22px; }
  .ap-item-title { font-size: 19px; }
  .ap-range-grid {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .ap-range-num { font-size: 22px; }
  .ap-item { margin-top: var(--s-6); padding-top: var(--s-5); }
}

/* =============================================================
   §18. LEGAL / POLICY PAGES (Day 7)
   Readable long-form text in the dark theme. Prose, not bullets.
   ============================================================= */
.legal-body {
  max-width: 70ch;
  margin-top: var(--s-6);
}
.legal-body h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: var(--s-6) 0 var(--s-3) 0;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mut);
  margin: 0 0 var(--s-3) 0;
}
.legal-body a { color: var(--accent); }
.legal-body strong { color: var(--text); }
.legal-updated {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: var(--s-2);
}
.legal-body ul {
  margin: 0 0 var(--s-3) 0;
  padding-left: var(--s-5);
  color: var(--text-mut);
  font-size: 15px;
  line-height: 1.7;
}
.legal-body li { margin-bottom: var(--s-2); }

/* =============================================================
   §19. HOW IT WORKS — 3-step explainer (Day 7)
   ============================================================= */
.hiw-steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-5);
  max-width: 60ch;
}
.hiw-step {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}
.hiw-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  min-width: 1.4em;
}
.hiw-step-body { flex: 1; }
.hiw-step-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}
.hiw-step-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mut);
  margin: 0;
}
.hiw-foot {
  margin-top: var(--s-5);
  font-size: 14px;
  color: var(--text-dim);
}
.hiw-foot a { color: var(--accent); }

/* =============================================================
   §18. TRUST + FRAMING (result canvas) — added for conversion work
   Result-side base-pay framing, paywall assurance, feedback link.
   Uses existing tokens only. No new design tokens.
   ============================================================= */

/* Quiet, always-on basis line under the percentile / reference frame. */
.result-basis {
  margin-top: var(--s-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 60ch;
}
.result-basis .basis-link {
  color: var(--text-mut);
  text-decoration: none;
  border-bottom: 1px solid var(--border-2);
}
.result-basis .basis-link:hover { color: var(--text); }

/* Below-median framing callout — calm panel, NOT an alarm.
   Shown only when percentile < 50 (populated by app.js). */
.comp-callout {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  max-width: 64ch;
}
.comp-callout .callout-title {
  margin: 0 0 var(--s-2) 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.comp-callout p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mut);
}
.comp-callout strong { color: var(--text); font-weight: 600; }
.comp-callout a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
}
.comp-callout a:hover { color: var(--text); }

/* Refund + methodology reassurance directly under the paywall CTA. */
.paywall-assurance {
  margin-top: var(--s-3);
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}
.paywall-assurance a {
  color: var(--text-mut);
  text-decoration: none;
  border-bottom: 1px solid var(--border-2);
}
.paywall-assurance a:hover { color: var(--text); }

/* Subtle feedback affordance at the foot of the result. Easy to ignore. */
.result-feedback {
  margin-top: var(--s-6);
  text-align: center;
}
.result-feedback-link {
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.result-feedback-link:hover {
  color: var(--text-mut);
  border-bottom-color: var(--border-2);
}

/* =============================================================
   §19. CHECKOUT-ABANDON PROMPT (pay.js injects this on modal dismiss)
   Calm, inline, dismissible. Single tap or ignore. Not a modal.
   ============================================================= */
.checkout-prompt {
  position: relative;
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  max-width: 64ch;
}
.checkout-prompt-close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-3);
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: var(--s-1);
}
.checkout-prompt-close:hover { color: var(--text-mut); }
.checkout-prompt-q {
  margin: 0 0 var(--s-3) 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.checkout-prompt-opts {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.checkout-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-3) var(--s-4);
  font-size: 13px;
  color: var(--text-mut);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.checkout-opt:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}
.checkout-prompt-thanks {
  margin: 0;
  font-size: 13px;
  color: var(--text-mut);
}