/* ============================================================
   JobPlnr — app shell design system
   Display: Space Grotesk · Body: Inter · Labels/data: IBM Plex Mono
   Signature element: the radial Fit Score ring (--pct driven via JS)
   ============================================================ */

:root {
  --bg: #F7F8FB;
  --surface: #FFFFFF;
  --ink: #10152B;
  --ink-soft: #545B78;
  --ink-faint: #8489A3;
  --line: #E3E6EF;
  --line-soft: #EEF0F6;

  --primary: #2452F0;
  --primary-dark: #1B3ECC;
  --primary-soft: #EAEFFE;
  --gold: #FFB020;
  --gold-soft: #FFF3DC;
  --success: #16A34A;
  --success-soft: #E9F9EE;
  --danger: #E1432D;
  --danger-soft: #FDECE9;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(16,21,43,.04), 0 1px 1px rgba(16,21,43,.03);
  --shadow-md: 0 4px 16px rgba(16,21,43,.06), 0 1px 3px rgba(16,21,43,.04);
  --shadow-lg: 0 12px 40px rgba(16,21,43,.10), 0 2px 8px rgba(16,21,43,.05);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Day/night background tone — a soft directional gradient plus two
     faint glow blobs, swapped wholesale by body.theme-night below. This
     is what actually reads as "day" vs "night" across every screen,
     independent of the per-screen photo hooks further down (those need
     real sourced images per IMAGE-SOURCING.md; this doesn't). */
  --bg-grad: linear-gradient(160deg, #F7F8FB 0%, #EEF1FA 45%, #FBF2E2 100%);
  --bg-glow-1: rgba(255,176,32,.12);   /* warm gold daylight glow, top-right */
  --bg-glow-2: rgba(36,82,240,.07);    /* cool blue daylight glow, bottom-left */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background 1.1s ease;
  position: relative;
}
/* Two soft, fixed glow blobs sitting behind all content — the actual
   "tone" of the page. Swap color/position/opacity between day and night
   via body.theme-night below; everything else about the layout is
   untouched. */
body::before, body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  width: 60vw; height: 60vw; border-radius: 50%; filter: blur(90px);
  transition: background 1.1s ease, opacity 1.1s ease;
}
body::before { top: -18vw; right: -14vw; background: var(--bg-glow-1); }
body::after  { bottom: -20vw; left: -16vw; background: var(--bg-glow-2); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; }
h1 { font-size: 42px; line-height: 1.08; }
h2 { font-size: 26px; line-height: 1.2; }
h3 { font-size: 18px; }
h4 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
  color: #FFFFFF; background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  border: 2px solid var(--gold); border-radius: 20px; display: inline-block;
  padding: 6px 16px; margin: 0 0 12px; box-shadow: var(--shadow-sm);
}
p { line-height: 1.6; color: var(--ink-soft); }
a { color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.screen { display: none; min-height: 100vh; position: relative; }
.screen.active { display: block; animation: fadeIn .35s ease; }

/* ---------- Themed background photos ----------
   Each screen gets a photo behind its content, muted almost to nothing
   by a heavy light overlay so it reads as texture, not a competing visual.
   Swap the --bg-photo url per screen to change the theme. Source real
   images yourself (see IMAGE-SOURCING.md) — nothing is hotlinked here. */
.screen::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background-image: var(--bg-photo, none);
  background-size: cover; background-position: center;
  opacity: .22; pointer-events: none;
}
.screen::after {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
  opacity: .35; pointer-events: none;
}
.screen > * { position: relative; z-index: 1; }

/* Interview Playbook previously had its own subtle in-panel background
   photo (bg-interview-panel.jpg) at low opacity — that image, along
   with bg-office-party.jpg / bg-board-meeting.jpg / bg-campus.jpg
   referenced via the --bg-photo custom property above, was never
   actually uploaded to the server. The --bg-photo declarations were
   dead code regardless (var(--bg-photo) was never consumed anywhere —
   the Mumbai coffee-cup theme replaced this whole approach), but this
   one WAS actively rendering and causing a real request for a file
   that doesn't exist on every visit to this tab. Removed rather than
   left pointing at a 404 to save the wasted request. */
#tab-playbook {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
}
#tab-playbook > * { position: relative; z-index: 1; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.container { max-width: 980px; margin: 0 auto; padding: 0 24px 80px; }

/* ---------- Top nav ---------- */
.topnav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 20px 32px; border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 100;
}
.brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; display: flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.brand .dot { color: var(--gold); }
.brand-tagline { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.coach-statement-box {
  display: inline-block; background: var(--gold); border: 4px solid var(--primary);
  border-radius: var(--radius-md); padding: 10px 20px;
  font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #14202B;
  box-shadow: 0 4px 14px rgba(36,82,240,.25);
}
/* Smaller variant for sitting inline in the ~72px-tall sticky nav bar,
   between the logo and the profile/blog buttons — the full banner-sized
   version was built for the much taller photo-hero area and would
   overflow the nav's height. */
.coach-statement-box-nav {
  font-size: 13.5px; padding: 7px 16px; border-width: 3px; white-space: nowrap;
}
@media (max-width: 600px) {
  .coach-statement-box { font-size: 15px; padding: 8px 14px; border-width: 3px; }
  /* Below this width the 3-column nav grid gets cramped — hide the badge
     rather than let it wrap/overflow; the logo and profile menu still
     need their space. */
  .coach-statement-box-nav { display: none; }
}

/* Used for lead-in text sitting directly on the photo backgrounds
   (dashboard header, Find Jobs intro) — the site's default paragraph
   color (--ink-soft) is a medium gray tuned for solid white/dark
   surfaces, and had poor, sometimes near-invisible contrast against
   these varied-brightness photos specifically. White + a shadow reads
   reliably regardless of which part of the photo sits behind it. */
.hero-subtitle { color: #FFFFFF; text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 1px 12px rgba(0,0,0,.3); }
.nav-badge { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); background: var(--line-soft); padding: 6px 14px; border-radius: 20px; }
.nav-home-btn {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  background: var(--gold); border: 4px solid var(--primary);
  color: #14202B; text-decoration: none; transition: all .15s ease; box-shadow: var(--shadow-sm);
}
.nav-home-btn:hover { background: #FFC94D; transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow-md); }
.nav-home-btn:active { transform: translateY(0) scale(1); }

/* ---------- Profile dropdown ---------- */
.profile-dropdown {
  position: absolute; top: 58px; right: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 14px; width: 280px;
}
.profile-dropdown-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  font-size: 13px; padding: 5px 0; color: var(--ink);
}
.profile-dropdown-row > span:last-child {
  text-align: right; min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.profile-dropdown-label { color: var(--ink-faint); font-weight: 600; flex-shrink: 0; }
.profile-dropdown-row .nav-badge { font-size: 11px; padding: 3px 10px; }
.profile-dropdown-hr { border: none; border-top: 1px solid var(--line); margin: 8px 0; }
.profile-dropdown-link {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700; color: var(--primary);
  padding: 9px 4px; cursor: pointer; border-radius: 8px; transition: background .12s ease;
}
.profile-dropdown-link:hover { background: var(--primary-soft); }
.profile-dropdown-danger { color: var(--danger); }
.profile-dropdown-danger:hover { background: var(--danger-soft); }

.nav-blog-ticker {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: #fff; border: 2px solid var(--gold); border-radius: 20px; padding: 9px 18px;
  text-decoration: none; margin-left: 10px; transition: all .15s ease; box-shadow: var(--shadow-sm);
}
.nav-blog-ticker:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(36,82,240,.35); }

.logout-btn {
  font-size: 12px; font-weight: 800; color: #FFFFFF; background: #1E3A8A;
  border: 3px solid var(--gold); border-radius: 50%; cursor: pointer;
  font-family: var(--font-body); transition: all .15s ease; margin-left: 4px;
  width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: .02em; box-shadow: 0 3px 12px rgba(30,58,138,.4);
}
.logout-btn:hover { background: #24479E; transform: translateY(-1px) scale(1.04); box-shadow: 0 5px 16px rgba(30,58,138,.5); }

.announcement-banner {
  background: var(--gold-soft); color: #8A6215; text-align: center; padding: 10px 20px;
  font-size: 13px; font-weight: 600; border-bottom: 1px solid #f0d8a0;
  position: relative; z-index: 2;
}

.widget-slot { margin-bottom: 20px; }
.widget-slot:empty { display: none; margin: 0; }
.widget-card {
  display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 14px 18px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: box-shadow .15s ease; margin-bottom: 8px;
}
.widget-card:hover { box-shadow: var(--shadow-md); }
.widget-card img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.widget-card .widget-title { font-weight: 700; font-size: 13.5px; }
.widget-card .widget-body { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.widget-card .widget-sponsored { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--ink-faint); letter-spacing: .06em; }

/* ---------- Modules strip (hero) ---------- */
.modules-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px; max-width: 780px; margin: 0 auto 44px; padding: 0 24px;
}
.module-chip {
  display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 24px; padding: 9px 16px 9px 10px; font-size: 12.5px; font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.module-num {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #fff; background: var(--primary);
  width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.module-arrow { color: var(--ink-faint); font-size: 14px; }
@media (max-width: 760px) {
  .modules-strip { gap: 6px; }
  .module-arrow { display: none; }
  .module-chip { font-size: 11.5px; }
}

.hiw-jump { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); text-decoration: none; border-bottom: 1px dashed var(--ink-faint); padding-bottom: 2px; }
.hiw-jump:hover { color: var(--primary); border-color: var(--primary); }

.dive-in-kicker {
  text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--ink); margin: 0 0 20px; letter-spacing: -0.01em;
}

.hero-callout {
  font-size: 17px; font-weight: 700; line-height: 1.55; color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  border: 3px solid var(--gold); border-radius: var(--radius-lg); padding: 22px 28px;
  max-width: 640px; margin: 20px auto 0; box-shadow: 0 8px 24px rgba(255,176,32,.2);
}
.brand-inline { font-family: var(--font-display); font-weight: 800; }
.brand-inline-dot { color: var(--gold); }
.phrase-before {
  color: #A8AFC4; font-weight: 800; text-decoration: line-through; text-decoration-color: rgba(168,175,196,.6);
  opacity: .85;
}
.phrase-after {
  color: var(--gold); font-weight: 900; text-shadow: 0 2px 10px rgba(255,176,32,.5);
}

.hiw-toggle-btn {
  background: var(--surface); border: 2px solid var(--primary); color: var(--primary);
  font-weight: 700; font-size: 13.5px; padding: 11px 22px; border-radius: 24px;
  cursor: pointer; font-family: var(--font-body); transition: all .15s ease; box-shadow: var(--shadow-sm);
}
.hiw-toggle-btn:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
#hiw-toggle-arrow { display: inline-block; transition: transform .2s ease; }

.hiw-expand {
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  max-width: 720px; margin: 0 auto;
}
.hiw-expand.open { max-height: 900px; opacity: 1; margin-bottom: 32px; }
.hiw-expand .modules-strip { margin-top: 16px; }

.credit-explainer {
  background: var(--surface); border: 2px solid var(--gold); border-radius: var(--radius-lg);
  padding: 24px 26px; margin-top: 20px; box-shadow: var(--shadow-sm);
}
.credit-explainer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.credit-explainer-item {
  background: var(--primary-soft); border-radius: var(--radius-md); padding: 16px;
}
.credit-explainer-cost {
  font-family: var(--font-mono); font-weight: 800; font-size: 15px; color: var(--primary); margin-bottom: 8px;
}
.credit-explainer-item p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.credit-explainer-total {
  font-size: 13.5px; color: var(--ink); line-height: 1.55; text-align: center;
  padding-top: 14px; border-top: 1px solid var(--line); margin: 0 0 10px;
}
.credit-explainer-free { font-size: 12.5px; color: var(--success); text-align: center; margin: 0; font-weight: 600; }
@media (max-width: 600px) { .credit-explainer-grid { grid-template-columns: 1fr; } }

/* ---------- How It Works timeline ---------- */
.how-it-works { max-width: 720px; margin: 88px auto 40px; padding: 0 24px; scroll-margin-top: 40px; }
.hiw-head { text-align: center; margin-bottom: 48px; background: var(--surface); border: 2px solid var(--gold); border-radius: var(--radius-lg); padding: 28px 32px; box-shadow: var(--shadow-md); }
.hiw-head .lede { max-width: 480px; margin: 0 auto; }

.hiw-steps { display: flex; flex-direction: column; }
.hiw-step { display: flex; gap: 22px; }
.hiw-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.hiw-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary);
  color: var(--primary); font-family: var(--font-display); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.hiw-line { width: 2px; flex: 1; background: var(--line); margin: 6px 0; min-height: 24px; }
.hiw-content {
  padding: 20px 26px; margin-bottom: 16px; background: var(--surface); border: 2px solid var(--gold);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); flex: 1;
}
.hiw-content h3 { margin-bottom: 6px; color: var(--ink); }
.hiw-content p { font-size: 14px; max-width: 480px; color: var(--ink-soft); }
.hiw-step-last .hiw-content { margin-bottom: 0; }

@media (max-width: 760px) {
  .how-it-works { margin-top: 64px; }
  .hiw-content p { max-width: 100%; }
}

/* ---------- Error banner ---------- */
.error-banner {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-160%);
  background: var(--danger-soft); color: var(--danger); border: 1px solid #F5C3B8;
  padding: 13px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  transition: transform .3s cubic-bezier(.2,.8,.2,1); z-index: 200; max-width: 90vw; box-shadow: var(--shadow-md);
}
.error-banner.visible { transform: translateX(-50%) translateY(0); }

/* ---------- Hero / upload ---------- */
.hero {
  padding: 40px 40px 32px; text-align: center; max-width: 760px; margin: 40px auto 0;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-soft); display: inline-block;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 18px;
}
.hero h1 { margin-bottom: 16px; }
.status-old { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--danger); color: var(--ink-faint); display: inline-block; transform: rotate(-2deg); }
.status-new { color: var(--gold); font-weight: 900; text-shadow: 0 2px 12px rgba(255,176,32,.35); }
.hero .lede { font-size: 17px; max-width: 560px; margin: 0 auto 8px; }
.credits-ticker {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #fff;
  background: var(--primary-dark); border: 2px solid var(--gold);
  display: inline-block; padding: 12px 24px; border-radius: 20px; margin-top: 16px;
  box-shadow: var(--shadow-sm);
}
.credits-ticker .ticker-num { font-weight: 900; color: var(--gold); font-size: 16px; }

.site-footer {
  border-top: 1px solid var(--line); background: var(--surface); margin-top: 60px;
  position: relative; z-index: 2;
}
.site-footer-inner {
  max-width: 900px; margin: 0 auto; padding: 32px 24px; text-align: center;
}
.site-footer-brand { margin-bottom: 16px; }
.site-footer-brand p { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin: 4px 0 0; text-transform: uppercase; letter-spacing: .05em; }
.site-footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.site-footer-links a { font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.site-footer-links a:hover { color: var(--primary); text-decoration: underline; }
.site-footer-legal { font-size: 12px; color: var(--ink-faint); margin: 0; }
.site-footer-legal a { color: var(--ink-faint); text-decoration: underline; }

.news-widget {
  max-width: 640px; margin: 24px auto 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: var(--shadow-sm);
}
.news-widget h3 { font-size: 14px; margin-bottom: 10px; }
.news-widget-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.news-widget-item:last-child { border-bottom: none; }
.news-widget-item a { color: var(--ink); text-decoration: none; }
.news-widget-item a:hover { color: var(--primary); text-decoration: underline; }
.news-widget-source { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); flex-shrink: 0; }

.entry-toggle { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 32px auto 40px; flex-wrap: wrap; }
.entry-btn { font-family: var(--font-body); cursor: pointer; transition: all .18s cubic-bezier(.2,.8,.2,1); border: none; }
.entry-btn-new {
  background: linear-gradient(135deg, var(--primary) 0%, #7C3AED 60%, var(--gold) 130%);
  color: #fff; font-size: 15px; font-weight: 800; padding: 15px 30px; border-radius: 30px;
  box-shadow: 0 6px 20px rgba(124,58,237,.28); display: flex; align-items: center; gap: 8px;
}
.entry-btn-new:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 28px rgba(124,58,237,.36); }
.entry-btn-new .entry-emoji { font-size: 17px; }
.entry-btn-new.active { outline: 3px solid var(--gold); outline-offset: 2px; }
.entry-btn-returning {
  background: var(--gold); color: #000000; font-size: 14.5px; font-weight: 800; padding: 13px 26px;
  border: 2.5px solid #1E3A8A; border-radius: 30px; box-shadow: 0 4px 14px rgba(30,58,138,.18);
}
.entry-btn-returning:hover { background: #FFC44D; transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 22px rgba(30,58,138,.26); }
.entry-btn-returning.active { background: #FFC44D; outline: 3px solid #1E3A8A; outline-offset: 2px; }

.upload-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 36px; max-width: 620px; margin: 32px auto 0; text-align: left;
}
.upload-box {
  border: 2px dashed #C9D2F2; border-radius: var(--radius-md); padding: 28px; text-align: center;
  background: var(--primary-soft); margin-bottom: 22px; transition: border-color .2s ease;
}
.upload-box:hover { border-color: var(--primary); }
.upload-box p { margin: 0 0 10px; color: var(--ink); }
.upload-box input[type="file"] {
  font-family: var(--font-body); font-size: 13px; color: var(--ink-soft);
}
.upload-box input[type="file"]::file-selector-button {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; border: none; border-radius: 8px; padding: 10px 18px;
  margin-right: 12px; cursor: pointer; transition: all .15s ease;
  box-shadow: 0 2px 8px rgba(36,82,240,.25);
}
.upload-box input[type="file"]::file-selector-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Safari's older, non-standard equivalent of the same pseudo-element */
.upload-box input[type="file"]::-webkit-file-upload-button {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; border: none; border-radius: 8px; padding: 10px 18px;
  margin-right: 12px; cursor: pointer; transition: all .15s ease;
}
.upload-box textarea { width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-body); font-size: 13px; resize: vertical; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; }
.radio-row { display: flex; flex-direction: column; gap: 8px; }
.radio-row label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; padding: 15px 18px; border: 1.5px solid var(--primary); border-radius: var(--radius-md);
  font-size: 14.5px; font-family: var(--font-body); background: var(--surface); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:not([type="radio"]):not([type="checkbox"]):focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary-dark); box-shadow: 0 0 0 4px var(--primary-soft); outline: none;
}
.field input[type="radio"], .field input[type="checkbox"] {
  width: auto; padding: 0; border: none; accent-color: var(--primary); cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, #E89A0C 100%); color: #14202B; border: none;
  padding: 15px 28px; border-radius: var(--radius-sm); font-weight: 800; font-size: 14.5px; cursor: pointer;
  font-family: var(--font-body); box-shadow: 0 3px 14px rgba(255,176,32,.4);
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease; width: 100%;
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,176,32,.48); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.97); }
.btn-secondary {
  background: var(--surface); color: var(--primary); border: 1.5px solid var(--primary);
  padding: 13px 22px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; cursor: pointer;
  font-family: var(--font-body); transition: background .15s ease, transform .12s ease;
}
.btn-secondary:hover { background: var(--primary-soft); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0); }

/* ---------- Loading ---------- */
#screen-loading .container { text-align: center; padding-top: 140px; }
.spinner { width: 44px; height: 44px; margin: 0 auto 24px; border-radius: 50%; border: 4px solid var(--primary-soft); border-top-color: var(--primary); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Signature element: the Fit Score ring ---------- */
.score-ring-wrap { display: flex; flex-direction: column; align-items: center; margin: 8px 0 28px; }
.score-ring {
  --pct: 0; width: 180px; height: 180px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--primary) calc(var(--pct) * 1%), var(--gold) calc(var(--pct) * 1%) calc(var(--pct) * 1% + 3%), var(--line-soft) 0);
  display: flex; align-items: center; justify-content: center;
  transition: --pct 1s ease;
}
.score-ring::before { content: ''; position: absolute; inset: 14px; background: var(--surface); border-radius: 50%; box-shadow: inset 0 1px 4px rgba(16,21,43,.06); }
.score-ring .score-value { position: relative; font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--ink); }
.score-ring .score-value span { font-size: 20px; color: var(--ink-faint); }
.score-ring-label {
  font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: #FFFFFF; background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  border: 2px solid var(--gold); border-radius: 20px; padding: 6px 16px; margin-top: 14px;
  display: inline-block; box-shadow: var(--shadow-sm);
}
.step-accent-gold .score-ring-label { border-color: var(--gold); }

/* ---------- Teaser strengths/weaknesses ---------- */
.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0 28px; }
.insight-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; }
.insight-card.good { border-top: 3px solid var(--success); }
.insight-card.watch { border-top: 3px solid var(--danger); }
.insight-card h4 { margin-bottom: 14px; }
.insight-item { display: flex; gap: 10px; margin-bottom: 14px; }
.insight-item:last-child { margin-bottom: 0; }
.insight-item strong { font-size: 13.5px; color: var(--ink); display: block; }
.insight-item p { font-size: 12.5px; margin: 4px 0 0; line-height: 1.5; }
.insight-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; display: flex; }
.insight-icon svg { width: 100%; height: 100%; }
.good-icon { color: var(--success); }
.watch-icon { color: var(--danger); }
.blurred { filter: blur(3px); user-select: none; color: var(--ink-faint); }

/* Category breakdown chart */
.category-chart { max-width: 620px; margin: 0 auto 32px; display: flex; flex-direction: column; gap: 14px; }
.cat-row {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.cat-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cat-icon { flex-shrink: 0; }
.cat-label { font-weight: 700; font-size: 14px; color: var(--ink); flex: 1; }
.cat-pct { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--primary); }
.cat-note { font-style: italic; font-size: 13px; color: var(--ink-soft); margin: 8px 0 4px; }
.cat-analysis { font-size: 13.5px; color: var(--ink); line-height: 1.55; margin: 4px 0 0; }
.cat-icon { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; display: flex; }
.cat-icon svg { width: 100%; height: 100%; }
.cat-label { font-size: 13px; font-weight: 700; color: var(--ink); flex: 1; }
.cat-pct { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--primary); }
.cat-bar-track { height: 7px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.cat-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold)); border-radius: 4px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.cat-note { font-size: 12px; color: var(--ink-soft); margin: 6px 0 2px; font-style: italic; }
.cat-analysis { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 0; line-height: 1.55; }

/* Quick fixes */
.quick-fixes-panel { background: var(--gold-soft); border: 1px solid #f0d8a0; border-radius: var(--radius-md); padding: 22px 24px; max-width: 620px; margin: 0 auto 28px; }
.quick-fixes-panel h4 { margin-bottom: 12px; }
.quick-fixes-panel ul { list-style: none; margin: 0; padding: 0; }
.quick-fixes-panel li { display: flex; gap: 10px; font-size: 13.5px; color: #5c4712; margin-bottom: 10px; line-height: 1.5; }
.quick-fixes-panel li:last-child { margin-bottom: 0; }
.fix-icon { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; margin-top: 2px; display: flex; }
.fix-icon svg { width: 100%; height: 100%; }

/* ---------- Step-by-step teaser reveal ---------- */
.step-progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
.step-dot { width: 32px; height: 5px; border-radius: 3px; background: var(--line); transition: background .25s ease, transform .25s ease; }
.step-dot.done { background: var(--success); }
.step-dot.current { background: var(--primary); transform: scaleY(1.4); }

.teaser-step { display: none; }
.teaser-step { user-select: none; -webkit-user-select: none; }
.teaser-step.active { display: block; animation: stepIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.step-heading {
  text-align: center; font-size: 21px; margin-bottom: 20px;
  display: inline-block; width: 100%;
  background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 22px; box-shadow: var(--shadow-sm);
}
.step-card-list { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; }
.step-card-list .insight-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 0;
}

/* Per-step accent — a colored top border + tinted ring/heading so each
   reveal feels like its own distinct beat rather than a repeat of the last. */
.step-accent-gold .score-ring-label { color: var(--gold); }
.step-accent-green .step-heading { color: var(--success); }
.step-accent-green .step-card-list .insight-item { border-top: 3px solid var(--success); }
.step-accent-coral .step-heading { color: var(--danger); }
.step-accent-coral .step-card-list .insight-item { border-top: 3px solid var(--danger); }
.step-accent-blue .step-heading { color: var(--primary); }
.step-accent-mixed .step-heading {
  /* Gradient-clipped text needs background-image reserved for the
     gradient itself, so this variant keeps its own transparent pill
     (no background-color) rather than the shared solid one above — the
     border still gives it a defined edge against the photo. */
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--primary), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Coffee cup decoration: full-height left panel, fading into
   the page, with animated steam. Restructured from a small corner box
   to match the "large photo panel bleeding into the UI" style shown in
   the reference mockup. */
/* ---------- Landing/site-wide background scene ----------
   Full-viewport photo, anchored so the hand+cup (bottom-left of both
   source photos) stays sharp and visible. Shown at full, unfaded opacity
   — a diagonal fade mask used to fade it out toward the top-right, but
   that's been removed; the photo now shows in its original form across
   the whole viewport. Carries across every screen — this is the
   persistent background for the whole site, not just the landing page.
   Day/night variants swapped by body.theme-night. */
.coffee-decor {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.coffee-decor-inner { position: absolute; inset: 0; }
.decor-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Keeps the hand+cup (bottom-left of the source photo) anchored to the
     bottom-left of the viewport regardless of screen size — the top-right
     region that gets cropped away is exactly the part meant to fade out
     anyway, so cropping there costs nothing. */
  object-position: left bottom;
}
.coffee-steam {
  position: absolute;
  width: 60px; height: 110px;
  pointer-events: none;
  /* Position (left/top in px) is set by JS — see positionSteam() in
     app.js. Static viewport-percentage positioning was fundamentally
     unreliable here: object-fit:cover's crop point shifts depending on
     the exact viewport aspect ratio, so a fixed % never held correctly
     across different screen sizes. JS computes the real position using
     the same math object-fit:cover uses internally, anchored to a fixed
     pixel coordinate on the actual source photo — correct on any screen
     once tuned, not just the one it was eyeballed against. */
}
.steam-night { display: none; }
body.theme-night .steam-day { display: none; }
body.theme-night .steam-night { display: block; }

/* New vapor design — soft blurred radial-gradient blobs instead of thin
   SVG line-strokes. Real steam reads as translucent, softly-edged cloud
   wisps, not crisp curved lines; blurred blobs that drift, widen, and
   dissipate as they rise get much closer to that than a stroked path
   ever could, and it's far more forgiving of being a few pixels off the
   exact rim position since there's no thin line to look "obviously
   misplaced" the way a precise stroke does. */
.coffee-steam .vapor {
  position: absolute; left: 50%; bottom: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 55%, rgba(255,255,255,0) 78%);
  filter: blur(3px); /* fixed, not animated — see keyframe comment below for why */
  opacity: 0;
  will-change: transform, opacity;
  animation: vaporRise 4s ease-out infinite;
}
body.theme-night .vapor {
  background: radial-gradient(circle, rgba(228,233,247,.85) 0%, rgba(228,233,247,.3) 55%, rgba(228,233,247,0) 78%);
}
.coffee-steam .v1 { margin-left: -16px; animation-delay: 0s;    animation-duration: 4.2s; }
.coffee-steam .v2 { margin-left: -8px;  animation-delay: 1.3s;  animation-duration: 3.7s; width: 17px; height: 17px; }
.coffee-steam .v3 { margin-left: 2px;   animation-delay: 2.5s;  animation-duration: 4.5s; width: 15px; height: 15px; }

@keyframes vaporRise {
  /* Only transform and opacity animate — both are reliably
     hardware-accelerated in every browser. The earlier version also
     animated `filter: blur()` per-frame, which browsers support far
     less consistently for animation (some skip it, some choke on
     repainting it every frame) and was the likely cause of the vapor
     appearing to freeze in place instead of visibly rising. Blur is now
     a fixed value on the element itself, not part of the animation. */
  0%   { opacity: 0;   transform: translate(0, 0)      scale(.5); }
  12%  { opacity: .75; }
  35%  { opacity: .55; transform: translate(-4px, -26px) scale(1); }
  60%  { opacity: .35; transform: translate(5px, -52px)  scale(1.5); }
  85%  { opacity: .12; transform: translate(-3px, -76px) scale(2.1); }
  100% { opacity: 0;   transform: translate(2px, -95px)  scale(2.6); }
}
@media (max-width: 600px) {
  /* Previously hidden entirely on phone-width screens over concern that
     object-fit:cover would crop the hand+cup out of frame on a narrow
     portrait viewport — but object-position:left bottom keeps that
     subject anchored to the bottom-left regardless of aspect ratio, so
     it stays visible (just more zoomed-in) rather than disappearing.
     Real user feedback confirmed this was missed on mobile, not
     correctly avoided — showing it now, just sized down. */
  .coffee-decor { opacity: .85; }
}

/* Day/night photo swap — .decor-day shows by default; body.theme-night
   (toggled by JS based on real India Standard Time) swaps to .decor-night. */
.decor-night { display: none; }
body.theme-night .decor-day { display: none; }
body.theme-night .decor-night { display: block; }


/* ---------- Night theme — swaps the core palette when it's actually
   night in India Standard Time. Toggled via JS setting body.theme-night. ---------- */
body.theme-night {
  --bg: #0B1220; --surface: #131B2E; --ink: #FFFFFF; --ink-soft: #D5DAEC; --ink-faint: #A5ADC9;
  --line: #2E3A58; --line-soft: #1A2338; --primary-soft: #1D2A4D;
  --bg-grad: linear-gradient(160deg, #0A0F1E 0%, #0D1730 50%, #131B2E 100%);
  --bg-glow-1: rgba(111,141,255,.16); /* indigo moonlight glow, top-right */
  --bg-glow-2: rgba(255,176,32,.05);  /* faint warm ember, bottom-left, barely there */
}
body.theme-night .paywall-card, body.theme-night .roadmap-card, body.theme-night .playbook-card,
body.theme-night .job-card, body.theme-night .admin-card, body.theme-night .insight-card,
body.theme-night .upload-card, body.theme-night .jd-panel, body.theme-night #resume-preview-frame {
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

/* ---------- IST analog clock, fixed left side ---------- */
.ist-clock {
  position: fixed; left: 24px; top: 100px; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 12px 11px; box-shadow: var(--shadow-md);
  transition: background .4s ease, border-color .4s ease;
}
.ist-clock-face { width: 72px; height: 72px; }
.ist-clock-ring { fill: var(--line-soft); stroke: var(--line); stroke-width: 1.5; }
.ist-clock-ticks line { stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }
.ist-hand { stroke-linecap: round; transition: stroke .4s ease; }
.ist-hand-hour { stroke: var(--ink); stroke-width: 4.5; }
.ist-hand-minute { stroke: var(--ink); stroke-width: 3; }
.ist-hand-second { stroke: var(--gold); stroke-width: 1.4; }
body.theme-night .ist-hand-second { stroke: #6f8dff; }
.ist-clock-pin { fill: var(--gold); transition: fill .4s ease; }
body.theme-night .ist-clock-pin { fill: #6f8dff; }
.ist-clock-label { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-faint); letter-spacing: .1em; }
@media (max-width: 900px) { .ist-clock { left: 12px; top: 88px; padding: 11px 10px 9px; } .ist-clock-face { width: 58px; height: 58px; } }
@media (max-width: 600px) { .ist-clock { display: none; } }

/* Tab icons */
.tab-icon { width: 15px; height: 15px; display: inline-flex; margin-right: 7px; vertical-align: -2px; }
.tab-icon svg { width: 100%; height: 100%; }

/* ---------- Paywall cards ---------- */
.paywall-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.paywall-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; background: var(--surface);
  box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; position: relative;
}
.paywall-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.paywall-card.featured { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.paywall-card .badge { position: absolute; top: -12px; right: 20px; background: var(--gold); color: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 12px; }
.paywall-card h3 { margin-bottom: 4px; }
.paywall-card .price { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--primary); margin: 10px 0; }
.paywall-card p { font-size: 13.5px; min-height: 60px; }

/* ---------- Dashboard ---------- */
.dashboard-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 0 8px; }
#license-display { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); background: var(--line-soft); padding: 6px 12px; border-radius: 16px; display: inline-block; }

.tab-bar { display: flex; gap: 10px; border-bottom: none; margin-bottom: 28px; flex-wrap: wrap; }
.tab-btn {
  display: flex; align-items: center; background: var(--surface); border: 3px solid var(--gold); padding: 11px 18px;
  font-weight: 700; font-size: 13.5px; color: var(--ink); cursor: pointer; border-radius: var(--radius-sm);
  font-family: var(--font-body); transition: color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.tab-btn .tab-icon { color: var(--ink-faint); transition: color .15s ease; }
.tab-btn:hover { background: var(--gold-soft); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.tab-btn.active { color: var(--primary); background: var(--primary-soft); border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.tab-btn.active .tab-icon { color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .25s ease; }
.tab-lock-icon { font-size: 11px; margin-left: 4px; opacity: .7; }
.tab-locked { opacity: .55; filter: grayscale(.5); }
.tab-locked:hover { opacity: .75; }
#mode-tailored-btn.mode-locked { opacity: .55; filter: grayscale(.4); cursor: not-allowed; }

/* ---------- Bold promo flash — distinct from the small error-banner,
   designed to genuinely grab attention, closes only on explicit X click ---------- */
.promo-flash-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(16,21,43,.55); align-items: center; justify-content: center; padding: 20px;
}
.promo-flash-overlay.visible { display: flex; animation: fadeIn .2s ease; }
.promo-flash {
  position: relative; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #6B3FD6 100%);
  border: 3px solid var(--gold); border-radius: 20px; padding: 36px 32px 30px;
  max-width: 440px; width: 100%; text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
  animation: promoPop .3s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes promoPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.promo-flash-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; border: none; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background .15s ease;
}
.promo-flash-close:hover { background: rgba(255,255,255,.3); }
.promo-flash-icon { font-size: 40px; margin-bottom: 10px; }
.promo-flash-text {
  color: #fff; font-size: 18px; font-weight: 800; line-height: 1.45; margin: 0 0 22px;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.promo-flash-cta {
  background: var(--gold); color: #14202B; border: none; padding: 15px 30px; border-radius: 10px;
  font-size: 15px; font-weight: 800; cursor: pointer; font-family: var(--font-body);
  box-shadow: 0 6px 20px rgba(255,176,32,.4); transition: transform .12s ease;
}
.promo-flash-cta:hover { transform: translateY(-2px) scale(1.02); }
@media (max-width: 500px) { .promo-flash { padding: 30px 22px 24px; } .promo-flash-text { font-size: 16px; } }

.jd-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; margin-bottom: 32px; box-shadow: var(--shadow-sm); }

.tag { display: inline-block; padding: 6px 13px; border-radius: 16px; font-size: 12.5px; font-weight: 700; margin: 3px; }
.tag-good { background: var(--success-soft); color: var(--success); }
.gap-card { border-left: 3px solid var(--danger); background: var(--surface); border: 1px solid var(--line); border-left-width: 3px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 16px; margin-bottom: 10px; }
.gap-card.gap-matched { border-left-color: var(--success); }
.gap-card strong { font-family: var(--font-display); }
.gap-card .sev { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-faint); margin-left: 8px; }
.gap-card p { margin: 6px 0 0; font-size: 13.5px; }
.locked-feature {
  background: var(--gold-soft); border: 2px dashed var(--gold); border-radius: var(--radius-md);
  padding: 24px; text-align: center; font-size: 14px; color: #8a6215; line-height: 1.6;
}

/* ---------- Fork screen (Search Jobs vs Prepare) ---------- */
.fork-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.fork-card {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 24px; cursor: pointer; font-family: var(--font-body); transition: all .15s ease;
  box-shadow: var(--shadow-sm); width: 100%; color: var(--ink);
}
.fork-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary); }
/* Explicit, theme-independent colors — this card's background is ALWAYS
   gold/cream by design (not theme-reactive like most surfaces on the
   site), so its text must ALWAYS be dark for contrast, never inheriting
   var(--ink)/var(--ink-soft) which flip to near-white at night and would
   wash out against this permanently-light background. */
.fork-card.featured { border-color: var(--gold); background: #FFF3DC; }
.fork-card.featured:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(255,176,32,.25); }
.fork-card.featured h3 { color: #3A2E0A; }
.fork-card.featured p { color: #5C4712; }
.fork-icon { font-size: 32px; margin-bottom: 12px; }
.fork-card h3 { margin-bottom: 8px; }
.fork-card p { font-size: 13px; margin-bottom: 14px; }
.fork-cta { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 640px) { .fork-cards { grid-template-columns: 1fr; } }

.round-secondary-btn {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--primary);
  background: var(--primary-soft); border: 1.5px solid var(--primary); border-radius: 24px;
  padding: 10px 22px; text-decoration: none; transition: all .15s ease;
}
.round-secondary-btn:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }

.vibe-card {
  display: inline-block; font-size: 13.5px; font-weight: 700; text-decoration: none;
  border-radius: 16px; padding: 14px 24px; transition: all .18s ease; text-align: center;
}
/* Celebratory — warm gold, a little festive, "you're already one of us!" */
.vibe-celebrate {
  background: linear-gradient(135deg, #FFF3DC 0%, #FFE3AE 100%); border: 2.5px solid var(--gold);
  color: #6B4E0A; box-shadow: 0 4px 14px rgba(255,176,32,.25);
}
.vibe-celebrate:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 22px rgba(255,176,32,.4); }
/* Contemplative — cooler, softer, "no pressure, take your time" */
.vibe-thinking {
  background: var(--primary-soft); border: 2px dashed var(--primary); color: var(--primary);
}
.vibe-thinking:hover { background: var(--primary); color: #fff; border-style: solid; transform: translateY(-1px); }

/* ---------- Step-by-step questionnaire ---------- */
.q-step { display: none; }
.q-step.active { display: block; animation: stepIn .35s cubic-bezier(.2,.8,.2,1); }
.q-step .field input { text-align: center; font-size: 16px; padding: 16px 18px; }
.industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.industry-card {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-md);
  padding: 16px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-body);
  transition: all .15s ease; text-align: left; color: var(--ink);
}
.industry-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.industry-card.selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.segment-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.segment-chip {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-body);
  transition: all .15s ease; color: var(--ink);
}
.segment-chip:hover { border-color: var(--primary); }
.segment-chip.selected { border-color: var(--primary); background: var(--primary); color: #fff; }
@media (max-width: 500px) { .industry-grid { grid-template-columns: 1fr; } }

/* ---------- ATS formatting notes — distinct treatment ---------- */
/* .ats-heading — no longer needed; the base h4 style above already gives
   every section label the blue/gold/white treatment this once existed
   to add specifically to this one heading. */
.ats-panel {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  border: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  box-shadow: var(--shadow-md);
}
.ats-panel ul { margin: 0; padding-left: 20px; }
.ats-panel li { color: #FFFFFF; font-size: 13.5px; line-height: 1.65; margin-bottom: 10px; }
.ats-panel li:last-child { margin-bottom: 0; }
.ats-panel li::marker { color: var(--gold); }

.roadmap-card, .playbook-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.roadmap-card h4 { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; flex: 1; background: none; border: none; padding: 0; display: block; box-shadow: none; }

/* Roadmap card — subtle left accent instead of a boxed severity pill */
.roadmap-card { border-left: 3px solid var(--line); padding-left: 20px; transition: border-color .15s ease; }
.roadmap-card.sev-major { border-left-color: var(--danger); }
.roadmap-card.sev-moderate { border-left-color: var(--gold); }
.roadmap-card.sev-minor { border-left-color: var(--ink-faint); }
.roadmap-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sev-dot-major { background: var(--danger); }
.sev-dot-moderate { background: var(--gold); }
.sev-dot-minor { background: var(--ink-faint); }
.sev-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.roadmap-why { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; }

.platform-list { display: flex; flex-direction: column; gap: 5px; }
.platform-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink-soft); font-size: 12.5px; transition: background .12s ease;
}
.platform-link:hover { background: var(--line-soft); }
.platform-link strong { color: var(--ink); font-weight: 600; }
.platform-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-faint); display: flex; }
.platform-icon svg { width: 100%; height: 100%; }
.platform-text { flex: 1; }
.verified-icon { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }
.verified-icon svg { width: 100%; height: 100%; }

/* Interview Playbook */
.playbook-stage h4 {
  color: #14202B; margin: 24px 0 12px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold); border: 2px solid #E89A0C; box-shadow: var(--shadow-sm);
  border-radius: 20px; padding: 6px 16px; text-transform: uppercase; font-size: 12px;
  font-weight: 800; letter-spacing: .06em;
}
.playbook-stage h4 .stage-icon { color: #14202B; }
.playbook-stage:first-child h4 { margin-top: 0; }
.stage-icon { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; display: flex; }
.stage-icon svg { width: 100%; height: 100%; }
.playbook-card { display: flex; gap: 12px; align-items: flex-start; }
.playbook-card .topic-icon { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 2px; display: flex; }
.playbook-card .topic-icon svg { width: 100%; height: 100%; }
.playbook-card strong { font-family: var(--font-display); font-size: 14px; display: block; }
.playbook-card p { margin: 5px 0 0; font-size: 13.5px; }

/* ---------- Resume Studio ---------- */
.mode-toggle { display: flex; gap: 10px; margin-bottom: 20px; }
.mode-btn { border: 1.5px solid var(--line); background: var(--surface); padding: 12px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: all .15s ease; color: var(--ink); }
.mode-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.mode-btn.active { border-color: var(--primary); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 2px 8px rgba(36,82,240,.25); }

.template-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.template-picker-btn { border: 1px solid var(--line); background: var(--surface); padding: 10px 15px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: all .15s ease; color: var(--ink); }
.template-picker-btn:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.template-picker-btn.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }

#resume-preview-frame { background: #FFFFFF; box-shadow: var(--shadow-lg); max-width: 700px; margin: 0 auto; border-radius: 4px; overflow: hidden; position: relative; }
.resume-pdf-watermark {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff;
  font-size: 12px; text-align: center; padding: 12px 20px; line-height: 1.5;
}
.resume-pdf-watermark strong { color: var(--gold); }
.resume-full-watermark {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background-repeat: repeat; opacity: 1;
}

.action-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.action-row .btn-primary, .action-row .btn-secondary { width: auto; }

#cover-letter-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; margin-top: 28px; box-shadow: var(--shadow-sm); }
#cover-letter-box h3::before { content: '✉ '; }

/* ---------- Find Jobs ---------- */
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; }
.filter-checks { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.filter-checks label {
  display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); padding: 9px 14px; border-radius: 20px;
  cursor: pointer; transition: border-color .15s ease;
}
.filter-checks label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.be-tag { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-faint); background: var(--line-soft); padding: 2px 6px; border-radius: 8px; text-transform: uppercase; }
.be-note { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 22px; line-height: 1.5; }
.fj-loading {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px 20px; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm);
}

.job-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease; }
.job-readmore-btn {
  background: none; border: none; color: var(--primary); font-weight: 700; font-size: 13px;
  cursor: pointer; padding: 4px 0; margin: 2px 0 8px; font-family: var(--font-body);
}
.job-readmore-btn:hover { text-decoration: underline; }
.job-snippet-full { white-space: pre-line; }
.job-card:hover { box-shadow: var(--shadow-md); }
.job-card h4 { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--ink); font-family: var(--font-display); font-weight: 700; background: none; border: none; padding: 0; display: block; box-shadow: none; margin: 0 0 4px; }
.job-card .job-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); margin-bottom: 10px; }
.job-card p { font-size: 13.5px; }
.job-card .job-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.job-card .job-tag { font-size: 11px; font-weight: 700; background: var(--primary-soft); color: var(--primary); padding: 4px 11px; border-radius: 12px; }
.job-card .job-tag.f500 { background: var(--gold-soft); color: #8A6215; }
.job-card a.apply-link { font-weight: 700; color: var(--primary); text-decoration: none; display: inline-block; margin-top: 6px; }
.job-card a.apply-link:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  h1 { font-size: 30px; }
  .paywall-cards { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .upload-card { padding: 24px; }
  .topnav { padding: 16px 20px; }
}