/* ═══════════════════════════════════════════════════════════════════
   Easy Resumes AI — Brand Redesign
   Layered on top of inline <style>. Overrides tokens, fonts,
   gradients, glass, radii, buttons, and component looks.
   Source of truth: PRODUCT.md + DESIGN.md
   ═══════════════════════════════════════════════════════════════════ */

/* ─── TOKENS: graphite + teal in OKLCH ─────────────────────────── */
:root, [data-theme="light"] {
  --bg:           oklch(0.985 0.003 220);
  --surface-1:    oklch(0.995 0.002 220);
  --surface-2:    oklch(0.965 0.005 220);
  --border:       oklch(0.88 0.008 220);
  --border-hi:    oklch(0.78 0.012 220);
  --text-1:       oklch(0.22 0.012 240);
  --text-2:       oklch(0.46 0.012 235);
  --text-3:       oklch(0.62 0.010 235);
  --accent:       oklch(0.66 0.14 195);
  --accent-2:     oklch(0.60 0.15 195);
  --accent-ink:   oklch(0.99 0.003 200);
  --accent-soft:  oklch(0.94 0.04 195);
  --accent-glow:  oklch(0.66 0.14 195 / 0.18);
  --ring:         oklch(0.66 0.14 195 / 0.45);
  --green:        oklch(0.62 0.13 165);
  --green-dim:    oklch(0.62 0.13 165 / 0.14);
  --amber:        oklch(0.74 0.13 75);
  --red:          oklch(0.60 0.18 25);
  --hero-dots:    transparent;

  /* Tighten radii: 4 / 8 / 12 only */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 12px;

  --shadow-card:  0 1px 2px oklch(0.22 0.012 240 / 0.04);
  --shadow-2:     0 10px 30px oklch(0.22 0.012 240 / 0.08), 0 2px 6px oklch(0.22 0.012 240 / 0.05);
  --shadow-3:     0 30px 70px oklch(0.22 0.012 240 / 0.12);
  --transition:   0.2s cubic-bezier(0.22, 1, 0.36, 1);

  /* Legacy table token compat */
  --card:         var(--surface-1);
  --r:            var(--r-md);
  --purple:       var(--accent);
}

[data-theme="dark"] {
  --bg:           oklch(0.18 0.012 240);
  --surface-1:    oklch(0.22 0.012 240);
  --surface-2:    oklch(0.26 0.012 240);
  --border:       oklch(0.32 0.010 240);
  --border-hi:    oklch(0.42 0.012 240);
  --text-1:       oklch(0.96 0.005 220);
  --text-2:       oklch(0.74 0.008 220);
  --text-3:       oklch(0.58 0.008 220);
  --accent:       oklch(0.72 0.15 195);
  --accent-2:     oklch(0.66 0.15 195);
  --accent-ink:   oklch(0.16 0.010 240);
  --accent-soft:  oklch(0.30 0.06 195);
  --accent-glow:  oklch(0.72 0.15 195 / 0.20);
  --green:        oklch(0.72 0.13 165);
  --green-dim:    oklch(0.72 0.13 165 / 0.16);
  --amber:        oklch(0.80 0.13 75);
  --red:          oklch(0.68 0.18 25);
  --hero-dots:    transparent;

  --shadow-card:  0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-2:     0 10px 30px oklch(0 0 0 / 0.35);
  --shadow-3:     0 30px 70px oklch(0 0 0 / 0.5);
}

/* ─── TYPOGRAPHY: Geist everywhere, Geist Mono for numerals/badges ─ */
html, body, button, input, textarea, select {
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'ss01', 'ss02';
}
h1, h2, h3, h4, h5, h6,
.logo, .hr-name, .hr-role-sub, .hr-section-label, .hr-exp-title,
.heading, .hero-h1, .modal h2, .modal h3,
.testi-author strong,
.plan-tier, .plan-price .amount, .plan-badge,
.faq-q,
.step-card h3, .step-num,
.upload-zone h3, .upload-cta,
.btn, .btn-primary, .btn-ghost, .btn-upgrade, .btn-generate, .btn-dl,
.oc-name, .oc-optimize-btn, .drc-value,
.jd-label, .jd-score-btn,
.score-num, .score-verdict, .sv-ring-num, .ab-num, .hbs-num,
.oc-score-up, .stat-num {
  font-family: 'Geist', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* Mono: numerals, eyebrows, code-tags, score chips */
.hbs-num, .hbs-label, .hbs-tag,
.score-num, .score-denom, .score-eyebrow,
.sv-ring-num, .sv-ring-den,
.ab-num, .br-pts,
.stat-num,
.label, .step-num,
.demo-tag, .demo-sec-label, .drc-label,
.hero-eyebrow, .plan-tier, .plan-badge,
.ann-sec-head, .ann-chip,
.paid-badge, .scarcity-pill,
.upload-types,
.comp-table th, .comp-badge,
.oc-cursor-hint, .oc-score-up, .oc-score-delta,
.modal-feat .ck, .modal .off,
.testi-stars {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.04em;
}
.hbs-num, .score-num, .sv-ring-num, .ab-num, .stat-num {
  letter-spacing: -0.02em; /* large mono numerals tighten back up */
}

/* ─── KILL: gradient text wherever it appears ────────────────── */
/* Hero/headline gradient text becomes solid ink (Vercel altitude). */
.hero-h1 .line2,
.hero-h1 .gradient,
[data-theme="light"] .hero-h1 .gradient {
  background: none !important;
  -webkit-text-fill-color: var(--text-1) !important;
  color: var(--text-1) !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}
/* Editorial italic-emphasis (ats-guide) stays teal as the rare accent. */
.guide-h1 em {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  font-style: italic;
}
.hero-h1 {
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  line-height: 1.05;
}

/* ─── KILL: glassmorphism ────────────────────────────────────── */
.glass,
[data-theme="light"] .glass {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: none !important;
}

/* ─── HERO: flat surface, no gradient, no dot grid ───────────── */
.hero {
  background: var(--bg) !important;
  min-height: auto;
  padding: 128px 0 112px;
}
.hero::before { display: none !important; }
.hero-inner { gap: 96px; }

/* Hero eyebrow → mono pill, hairline */
.hero-eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid oklch(0.66 0.14 195 / 0.25);
  border-radius: 999px;
  padding: 6px 12px;
}
.hero-eyebrow .dot { background: var(--accent); }
.hero-sub { color: var(--text-2); }
.hero-sub strong { color: var(--text-1); font-weight: 600; }

/* Hero resume card: flat, hairline + shadow-3 only */
.hero-resume {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-3) !important;
  transform: perspective(1400px) rotateY(-3deg) rotateX(1.5deg);
}
.hr-name, .hr-exp-title { font-family: 'Geist', sans-serif; letter-spacing: -0.01em; }
.hr-section-label { font-family: 'Geist Mono', monospace; letter-spacing: 0.12em; font-weight: 500; }
.hr-role-sub { color: var(--accent); }

/* Hero highlight tokens: teal-soft, not green */
.hr-hl,
[data-theme="light"] .hr-hl {
  background: var(--accent-soft) !important;
  color: var(--accent-2) !important;
  border-bottom: 1px solid oklch(0.66 0.14 195 / 0.35) !important;
  font-weight: 500;
}

/* Hero scan sweep → teal */
.hr-scan {
  background: linear-gradient(180deg,
    transparent 0%,
    oklch(0.66 0.14 195 / 0) 40%,
    oklch(0.66 0.14 195 / 0.28) 50%,
    oklch(0.66 0.14 195 / 0) 60%,
    transparent 100%) !important;
}

/* Hero score badge → teal-good */
.hero-badge-score {
  background: var(--surface-1) !important;
  border: 1px solid oklch(0.62 0.13 165 / 0.35) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-2) !important;
}
.hbs-num { color: var(--green); font-weight: 600; }
.hbs-label { color: var(--text-3); font-weight: 500; }
.hbs-tag {
  color: var(--green);
  background: var(--green-dim);
  border-color: oklch(0.62 0.13 165 / 0.25);
}
.hbs-delta { background: var(--green); box-shadow: var(--shadow-2); }

.hero-badge-role {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-2) !important;
}

/* ─── HEADER ─────────────────────────────────────────────────── */
.header {
  background: oklch(from var(--bg) l c h / 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.logo { font-weight: 700; letter-spacing: -0.025em; }
.logo span { color: var(--accent); }
.theme-toggle { border-radius: 999px; }
.theme-toggle .tt-thumb { background: var(--accent); color: var(--accent-ink); }

/* Highlighted "Free" link */
.header-link-free {
  color: var(--green);
  background: var(--green-dim);
  border-color: oklch(0.62 0.13 165 / 0.28);
  border-radius: var(--r-sm);
  font-weight: 600;
}
.header-link-free:hover { background: oklch(0.62 0.13 165 / 0.20); }
.header-link { border-radius: var(--r-sm); }

/* ─── BUTTONS: ink-led (Vercel style), teal as highlight only ─── */
.btn { transition: background var(--transition), border-color var(--transition), color var(--transition); }

.btn-primary {
  background: var(--text-1) !important;
  color: var(--bg) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  font-weight: 600;
  padding: 14px 22px;
  border: 1px solid var(--text-1);
}
.btn-primary:hover {
  background: oklch(0.35 0.012 240) !important;
  border-color: oklch(0.35 0.012 240) !important;
  color: var(--bg) !important;
  box-shadow: none !important;
  transform: none !important;
}
[data-theme="dark"] .btn-primary:hover {
  background: oklch(0.86 0.005 220) !important;
  border-color: oklch(0.86 0.005 220) !important;
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--text-1) !important;
  border: 1px solid var(--text-1) !important;
  border-radius: var(--r-md) !important;
  padding: 13px 20px;
  font-weight: 600;
}
.btn-ghost:hover {
  background: var(--text-1) !important;
  color: var(--bg) !important;
  border-color: var(--text-1) !important;
}

.btn-lg { padding: 16px 28px !important; font-size: 1rem; border-radius: var(--r-md) !important; }

/* Header CTA: tighten */
.header .btn-primary { padding: 9px 16px !important; font-size: 0.85rem !important; border-radius: var(--r-md) !important; }

/* ─── LAYOUT HELPERS ─────────────────────────────────────────── */
.container { max-width: 1200px; padding: 0 32px; }
.section { padding: 112px 0; }
.section-sm { padding: 80px 0; }

/* Section rhythm: alternate by nth-of-type */
body > section.section:nth-of-type(odd) { padding: 128px 0; }

.label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.label::before { background: var(--accent); opacity: 1; }

.heading {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
}
.subtext { color: var(--text-2); }

/* ─── STATS STRIP: editorial mono band ───────────────────────── */
.stats-strip {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
}
.stat-num {
  font-family: 'Geist Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.02em !important;
  color: var(--text-1) !important;
}
.stat-num .accent { color: var(--accent) !important; }
.stat-desc {
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3);
  font-size: 0.68rem;
}

/* ─── HOW IT WORKS: numbered editorial, no card chrome ───────── */
.steps-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0 !important;
  margin-top: 64px;
  border-top: 1px solid var(--border);
}
.step-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-right: 1px solid var(--border) !important;
  padding: 40px 32px 8px !important;
}
.step-card:last-child { border-right: none !important; }
.step-card::before { display: none !important; }
.step-num {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  color: var(--accent) !important;
  margin-bottom: 32px !important;
}
.step-card h3 {
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 12px !important;
  color: var(--text-1) !important;
}
.step-card p { color: var(--text-2) !important; }

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr !important; }
  .step-card {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .step-card:last-child { border-bottom: none !important; }
}

/* ─── UPLOAD ZONE ────────────────────────────────────────────── */
.upload-zone {
  border: 1px dashed var(--border-hi) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface-1) !important;
  padding: 48px 32px !important;
  transition: border-color var(--transition), background var(--transition);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--accent) !important;
  border-style: solid !important;
  background: var(--accent-soft) !important;
}
.upload-icon-svg {
  display: inline-flex; width: 32px; height: 32px;
  color: var(--accent); margin-bottom: 14px;
}
.upload-icon { display: none !important; } /* hide the 📄 emoji original */
.upload-cta {
  background: var(--text-1) !important;
  color: var(--bg) !important;
  border: 1px solid var(--text-1) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
}
.upload-cta:hover { background: oklch(0.35 0.012 240) !important; color: var(--bg) !important; }
.upload-types { font-family: 'Geist Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; }

.job-desc-step {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
}
.jd-textarea {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-family: 'Geist', sans-serif !important;
}
.jd-textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--ring); }
.jd-score-btn {
  background: var(--text-1) !important;
  color: var(--bg) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
}
.jd-score-btn:hover { background: oklch(0.35 0.012 240) !important; opacity: 1; }

/* ─── SCORE CARD ─────────────────────────────────────────────── */
.score-card {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-3) !important;
}
.score-eyebrow { font-family: 'Geist Mono', monospace; letter-spacing: 0.14em; }
.score-ring-outer {
  background: conic-gradient(var(--accent) 0%, var(--surface-2) 0%) !important;
  box-shadow: 0 0 0 8px var(--accent-soft) !important;
}
.score-ring-inner { background: var(--surface-1) !important; box-shadow: none !important; }
.score-num {
  font-family: 'Geist Mono', monospace !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}
.score-verdict { font-weight: 700 !important; letter-spacing: -0.02em !important; }

.feedback-row {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}

.upgrade-block {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
}
.scarcity-pill {
  font-family: 'Geist Mono', monospace;
  color: var(--red);
  background: oklch(0.60 0.18 25 / 0.10);
  border: 1px solid oklch(0.60 0.18 25 / 0.22);
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.btn-upgrade {
  background: var(--text-1) !important;
  color: var(--bg) !important;
  box-shadow: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
}
.btn-upgrade:hover { background: oklch(0.35 0.012 240) !important; transform: none !important; box-shadow: none !important; }

/* ─── SCORING VISUALIZATION ──────────────────────────────────── */
#scoring-visual { background: var(--surface-1) !important; }
.ann-resume {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-2) !important;
}
.ann-sec-head { font-family: 'Geist Mono', monospace; letter-spacing: 0.10em; font-weight: 500; }
.ann-chip {
  font-family: 'Geist Mono', monospace;
  border-radius: var(--r-sm) !important;
  letter-spacing: 0.06em;
}
.chip-g { background: var(--green-dim); color: var(--green); border-color: oklch(0.62 0.13 165 / 0.25); }
.chip-b { background: var(--accent-soft); color: var(--accent-2); border-color: oklch(0.66 0.14 195 / 0.25); }
.chip-o { background: oklch(0.74 0.13 75 / 0.12); color: var(--amber); border-color: oklch(0.74 0.13 75 / 0.25); }
.chip-r { background: oklch(0.60 0.18 25 / 0.10); color: var(--red); border-color: oklch(0.60 0.18 25 / 0.25); }

.sv-ring {
  box-shadow: 0 0 0 8px var(--accent-soft) !important;
}
.sv-ring-inner { background: var(--surface-1) !important; }
.sv-ring-num { font-family: 'Geist Mono', monospace !important; font-weight: 600 !important; }
.br-row {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}
.br-pts { font-family: 'Geist Mono', monospace; }
.sv-note {
  background: var(--accent-soft) !important;
  border: 1px solid oklch(0.66 0.14 195 / 0.20) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-2) !important;
}

/* ─── DEMO SECTION ───────────────────────────────────────────── */
#demo-section { background: var(--bg) !important; }
.demo-card {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
}
.demo-card.after {
  border-color: oklch(0.66 0.14 195 / 0.30) !important;
  background: oklch(0.66 0.14 195 / 0.03) !important;
}
.demo-tag {
  font-family: 'Geist Mono', monospace;
  border-radius: var(--r-sm) !important;
  letter-spacing: 0.10em;
  font-weight: 500 !important;
}
.tag-b { background: var(--surface-2); color: var(--text-2); }
.tag-a { background: var(--accent-soft); color: var(--accent); }
.demo-sec-label { font-family: 'Geist Mono', monospace; letter-spacing: 0.10em; }

/* Role chip → mono pill with hairline divider */
.demo-role-chip {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 4px 4px 4px 14px !important;
  gap: 0 !important;
}
.drc-label {
  font-family: 'Geist Mono', monospace;
  color: var(--text-3) !important;
  background: transparent !important;
  padding: 4px 12px 4px 0 !important;
  border-right: 1px solid var(--border);
  border-radius: 0 !important;
  letter-spacing: 0.12em;
}
.drc-value {
  font-family: 'Geist', sans-serif;
  font-weight: 600 !important;
  color: var(--text-1) !important;
  padding: 4px 14px;
  letter-spacing: -0.01em;
}

/* "Before" score callout */
.demo-before-score {
  background: oklch(0.60 0.18 25 / 0.06) !important;
  border: 1px solid oklch(0.60 0.18 25 / 0.20) !important;
  border-radius: var(--r-md) !important;
  color: var(--red) !important;
  font-family: 'Geist Mono', monospace;
}

/* Optimize button → flat ink */
.oc-optimize-btn {
  background: var(--text-1) !important;
  color: var(--bg) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-family: 'Geist', sans-serif !important;
  letter-spacing: -0.005em;
}
.oc-optimize-btn:hover { background: oklch(0.35 0.012 240) !important; transform: none !important; box-shadow: none !important; }
.oc-optimize-btn.pressed { transform: scale(0.97) !important; box-shadow: 0 0 0 4px var(--ring) !important; }
.oc-btn-icon { display: inline-flex; align-items: center; }

/* Demo arrow column → vertical mono divider + chevron */
.demo-arrow-col {
  padding-top: 96px !important;
  gap: 12px !important;
}
.demo-arrow-icon {
  background: var(--surface-1) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-family: 'Geist Mono', monospace !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  box-shadow: none !important;
  animation: none !important;
}
.demo-arrow-label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

/* "After" highlights → teal */
.oc-hl, [data-theme="light"] .oc-hl {
  background: var(--accent-soft) !important;
  color: var(--accent-2) !important;
  border-bottom: 1px solid oklch(0.66 0.14 195 / 0.30) !important;
}

/* After badge: teal */
.after-badge {
  background: var(--accent-soft) !important;
  border: 1px solid oklch(0.66 0.14 195 / 0.25) !important;
  border-radius: var(--r-md) !important;
}
.ab-num { font-family: 'Geist Mono', monospace !important; font-weight: 600 !important; color: var(--text-1) !important; }
.oc-after.revealed .oc-score-badge .ab-num { color: var(--accent) !important; }
.oc-score-up {
  background: var(--green-dim) !important;
  border: 1px solid oklch(0.62 0.13 165 / 0.30) !important;
  color: var(--green) !important;
  border-radius: 999px !important;
  font-family: 'Geist Mono', monospace !important;
}

.oc-cursor-hint {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-family: 'Geist Mono', monospace !important;
  box-shadow: none !important;
  border-radius: var(--r-sm) !important;
}
.oc-ripple { background: var(--ring) !important; }

/* ─── TESTIMONIALS ───────────────────────────────────────────── */
#testimonials {
  background: var(--surface-1) !important;
  border-top: 1px solid var(--border);
}
.testi-card {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 24px 22px 20px !important;
}
.testi-stars {
  color: oklch(0.80 0.16 85) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.10em;
}
.testi-text { color: var(--text-2); }
.testi-author strong { color: var(--text-1); font-weight: 600; }
.marquee-wrap::before { background: linear-gradient(90deg, var(--surface-1), transparent) !important; }
.marquee-wrap::after { background: linear-gradient(-90deg, var(--surface-1), transparent) !important; }

/* ─── PRICING ────────────────────────────────────────────────── */
#pricing { background: var(--bg) !important; }
.plan {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 40px 32px !important;
}
.plan.featured {
  border-color: var(--text-1) !important;
  box-shadow: var(--shadow-3) !important;
  background: var(--surface-1) !important;
}
.plan.featured::after { display: none !important; }
.plan-badge {
  background: var(--text-1) !important;
  color: var(--bg) !important;
  font-family: 'Geist Mono', monospace !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  border-radius: var(--r-sm) !important;
}
.plan-tier {
  font-family: 'Geist Mono', monospace !important;
  letter-spacing: 0.14em !important;
  color: var(--text-3) !important;
  font-weight: 500 !important;
}
.plan-price .amount {
  font-family: 'Geist Mono', monospace !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}
.plan-price .strike { color: var(--text-3); }
.plan-features li { border-bottom: 1px solid var(--border) !important; color: var(--text-2); }
.plan-features .ck { color: var(--accent); }
.plan-features .xx { color: var(--text-3); }
.plan-scarcity { color: var(--red); font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; }

/* ─── COMPETITOR TABLE ───────────────────────────────────────── */
.comp-table-wrap {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
}
.comp-table th {
  font-family: 'Geist Mono', monospace !important;
  letter-spacing: 0.10em !important;
  background: var(--surface-2) !important;
  color: var(--text-3) !important;
  font-weight: 500 !important;
}
.comp-badge { font-family: 'Geist Mono', monospace; border-radius: var(--r-sm); letter-spacing: 0.06em; }
.comp-sub { background: oklch(0.60 0.18 25 / 0.10); color: var(--red); }
.comp-life { background: var(--green-dim); color: var(--green); }
.comp-winner-row td { background: var(--accent-soft) !important; }
.comp-diff { color: var(--red); font-family: 'Geist Mono', monospace; }
.comp-bar { background: var(--red) !important; }

/* ─── FAQ: hairline-divider accordion, no card chrome ────────── */
#faq { background: var(--surface-1) !important; }
.faq-list { max-width: 720px; }
.faq-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  padding: 22px 0 !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em !important;
}
.faq-q .arr { color: var(--text-3); transition: transform var(--transition); }
.faq-item.open .faq-q .arr { transform: rotate(180deg); color: var(--accent); }
.faq-a { padding: 0 !important; }
.faq-item.open .faq-a { padding: 0 0 22px !important; max-height: 320px; }

/* ─── PAYWALL MODAL ──────────────────────────────────────────── */
.modal-ov { background: oklch(0 0 0 / 0.55); backdrop-filter: blur(4px); }
.modal {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-3) !important;
}
.modal h2 { font-weight: 700 !important; letter-spacing: -0.025em !important; }
.modal-feat .ck { color: var(--accent); }
.modal-scarc {
  background: oklch(0.60 0.18 25 / 0.08) !important;
  border: 1px solid oklch(0.60 0.18 25 / 0.22) !important;
  border-radius: var(--r-md) !important;
  color: var(--red) !important;
  font-family: 'Geist Mono', monospace !important;
}
.modal-price .sale { font-family: 'Geist Mono', monospace !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }
.modal-price .off { background: var(--red); border-radius: var(--r-sm); font-family: 'Geist Mono', monospace; letter-spacing: 0.06em; }

/* ─── STICKY GUARANTEE: hairline pill, not a banner ──────────── */
.guarantee-bar {
  left: 24px;
  right: auto;
  bottom: 24px;
  max-width: calc(100vw - 48px);
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  box-shadow: var(--shadow-2) !important;
  backdrop-filter: none !important;
}
.guarantee-bar p { font-size: 0.82rem; }
.guarantee-bar strong { color: var(--accent); }
.guarantee-bar svg.gb-shield { color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.gf-x { color: var(--text-3); }
.gf-x:hover { color: var(--text-1); }
@media (max-width: 640px) {
  .guarantee-bar { left: 12px; right: 12px; bottom: 12px; }
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.footer { padding: 64px 0 120px; background: var(--bg) !important; }
.footer-trust { font-family: 'Geist Mono', monospace; letter-spacing: 0.10em; font-size: 0.7rem; }
.footer-links a { font-family: 'Geist Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em; }
.footer-copy { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.06em; }

/* ─── PAID CUSTOMIZE SECTION ─────────────────────────────────── */
#customize-section { background: var(--surface-2) !important; border-top: 1px solid var(--border) !important; }
.paid-badge {
  font-family: 'Geist Mono', monospace !important;
  color: var(--accent) !important;
  background: var(--surface-1) !important;
  border: 1px solid oklch(0.66 0.14 195 / 0.25) !important;
  border-radius: 999px !important;
  letter-spacing: 0.10em !important;
}
.form-group input, .form-group textarea {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-family: 'Geist', sans-serif !important;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
.form-group label { font-family: 'Geist Mono', monospace !important; letter-spacing: 0.12em !important; }
.btn-generate {
  background: var(--text-1) !important;
  color: var(--bg) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
}
.btn-generate:hover { background: oklch(0.35 0.012 240) !important; transform: none !important; }
.resume-out { background: var(--surface-1) !important; border: 1px solid oklch(0.66 0.14 195 / 0.20) !important; border-radius: var(--r-lg) !important; }
.btn-dl {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-md) !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 500 !important;
}
.btn-dl:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ─── BODY ───────────────────────────────────────────────────── */
body { background: var(--bg); color: var(--text-1); }
[data-theme="light"] body, body { color: var(--text-1); }

/* ─── App: "Score quality only" → white secondary CTA ─────────── */
.btn-general-ats {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 13px 20px !important;
  background: var(--surface-1) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--r-md) !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background var(--transition), border-color var(--transition), color var(--transition) !important;
}
.btn-general-ats:hover:not(:disabled) {
  background: var(--text-1) !important;
  color: var(--bg) !important;
  border-color: var(--text-1) !important;
}
.btn-general-ats:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* ─── Premium CTA: top highlight + hover sheen ────────────────── */
/* Applies to every ink primary CTA so the upgrade is consistent. */
.btn-primary,
.btn-upgrade,
.btn-generate,
.jd-score-btn,
.oc-optimize-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, oklch(0.32 0.012 240) 0%, var(--text-1) 100%) !important;
  border-color: oklch(0.18 0.012 240) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.10),
    inset 0 -1px 0 oklch(0 0 0 / 0.25),
    0 1px 2px oklch(0 0 0 / 0.15) !important;
}
.btn-primary:hover,
.btn-upgrade:hover,
.btn-generate:hover,
.jd-score-btn:hover,
.oc-optimize-btn:hover {
  background: linear-gradient(180deg, oklch(0.40 0.012 240) 0%, oklch(0.28 0.012 240) 100%) !important;
  border-color: oklch(0.24 0.012 240) !important;
}
.btn-primary::before,
.btn-upgrade::before,
.btn-generate::before,
.jd-score-btn::before,
.oc-optimize-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    oklch(1 0 0 / 0.18) 50%,
    transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.btn-primary:hover::before,
.btn-upgrade:hover::before,
.btn-generate:hover::before,
.jd-score-btn:hover::before,
.oc-optimize-btn:hover::before {
  transform: translateX(110%);
}
/* Children sit above the sheen */
.btn-primary > *,
.btn-upgrade > *,
.btn-generate > *,
.jd-score-btn > *,
.oc-optimize-btn > * {
  position: relative;
  z-index: 1;
}
/* Dark theme: invert ramp so the button stays ink-on-light */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-upgrade,
[data-theme="dark"] .btn-generate,
[data-theme="dark"] .jd-score-btn,
[data-theme="dark"] .oc-optimize-btn {
  background: linear-gradient(180deg, oklch(0.99 0.003 220) 0%, oklch(0.88 0.005 220) 100%) !important;
  color: oklch(0.18 0.012 240) !important;
  border-color: oklch(0.78 0.012 220) !important;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-upgrade:hover,
[data-theme="dark"] .btn-generate:hover,
[data-theme="dark"] .jd-score-btn:hover,
[data-theme="dark"] .oc-optimize-btn:hover {
  background: linear-gradient(180deg, oklch(1 0 0) 0%, oklch(0.92 0.005 220) 100%) !important;
}

/* Respect reduced motion: kill the sheen */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before,
  .btn-upgrade::before,
  .btn-generate::before,
  .jd-score-btn::before,
  .oc-optimize-btn::before { display: none !important; }
}

/* ─── App page: neutral drop zone + flatter icons ─────────────── */
.drop-icon {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-2) !important;
}
.drop-zone:hover .drop-icon, .drop-zone.drag-over .drop-icon {
  background: var(--accent-soft) !important;
  border-color: oklch(0.66 0.14 195 / 0.4) !important;
  color: var(--accent) !important;
}
.drop-zone.has-file .drop-icon {
  background: var(--green-dim) !important;
  border-color: oklch(0.62 0.13 165 / 0.3) !important;
  color: var(--green) !important;
}
.input-card-title svg,
.btn-saved-resumes svg,
.btn-saved svg,
.export-icon svg {
  color: currentColor;
  vertical-align: text-bottom;
  margin-right: 4px;
}
.input-card-title { display: inline-flex; align-items: center; gap: 8px; }
.page-title { display: inline-flex; align-items: center; gap: 10px; }
.page-title svg { color: var(--text-1); flex-shrink: 0; }
.preview-placeholder-icon { color: var(--text-3); }
.preview-placeholder-icon svg { width: 28px; height: 28px; }

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track, .marquee-track-rev { animation: none !important; }
  .hero-resume { transform: none !important; }
}