/* ================================================================
   JOB HUNT ROADMAP — Maya-Style Design System
   Reference: Maya Web Designer site
   Light & vibrant · Purple + Yellow accents · Rounded everything
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,700;0,800;1,700&family=Dancing+Script:wght@600;700&family=DM+Mono:wght@400;500&display=swap');

/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Brand */
  --purple:       #5B3BF5;
  --purple-mid:   #7B5EF7;
  --purple-soft:  #E8E2FF;
  --purple-pale:  #F2EFFF;
  --yellow:       #F4C542;
  --yellow-soft:  #FFF8DC;
  --yellow-dark:  #D4A017;

  /* Surface */
  --bg:           #FFFFFF;
  --bg-soft:      #F7F5FF;
  --bg-section:   #FAFAFF;
  --bg-dark:      #1B0F3B;

  /* Text */
  --txt-dark:     #1A1033;
  --txt-body:     #4A4568;
  --txt-muted:    #8A85A0;
  --txt-light:    #FFFFFF;

  /* UI */
  --border:       #E8E3F5;
  --border-dark:  #C5BCE8;
  --radius-xs:    6px;
  --radius-sm:    12px;
  --radius-md:    20px;
  --radius-lg:    32px;
  --radius-pill:  999px;
  --shadow-card:  0 8px 40px rgba(91,59,245,.10);
  --shadow-btn:   0 6px 20px rgba(91,59,245,.35);
  --shadow-yellow:0 6px 20px rgba(244,197,66,.45);

  /* Type */
  --sans:   'Inter', system-ui, sans-serif;
  --serif:  'Playfair Display', Georgia, serif;
  --script: 'Dancing Script', cursive;
  --mono:   'DM Mono', monospace;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ----------------------------------------------------------------
   2. RESET + BASE
   ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--sans);
  color:var(--txt-body);
  background:var(--bg);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button,input,select,textarea{font:inherit;outline:none}

::selection{background:var(--purple);color:#fff}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#f0edff}
::-webkit-scrollbar-thumb{background:var(--purple-mid);border-radius:4px}

/* ----------------------------------------------------------------
   3. HEADER / NAV
   ---------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;height:72px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  z-index:200;
  transition:box-shadow .3s;
}
.site-header.scrolled{box-shadow:0 4px 24px rgba(91,59,245,.08)}

.header-inner{
  max-width:1280px;margin:0 auto;height:100%;
  display:flex;align-items:center;gap:1rem;
  padding:0 1.5rem;
}

/* Brand */
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-weight:800;font-size:1.25rem;color:var(--txt-dark);
  letter-spacing:-.03em;
  flex-shrink:0;
}
.brand .logo-icon{
  width:38px;height:38px;border-radius:12px;
  background:var(--purple);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.1rem;font-family:var(--serif);font-weight:700;
  box-shadow:0 4px 12px rgba(91,59,245,.4);
}
.brand-sub{
  display:block;font-size:.62rem;font-weight:600;
  color:var(--purple);letter-spacing:.08em;text-transform:uppercase;
  line-height:1;margin-top:1px;
}

.spacer{flex:1}

.nav-links{display:flex;align-items:center;gap:.25rem}
.nav-links a{
  padding:.5rem .9rem;border-radius:var(--radius-pill);
  font-weight:600;font-size:.92rem;color:var(--txt-body);
  transition:all .2s var(--ease);
}
.nav-links a:hover{color:var(--purple);background:var(--purple-soft)}
.nav-links a.active{color:var(--purple);font-weight:700}
.nav-links a.active::after{
  content:'';display:block;height:3px;border-radius:2px;
  background:var(--yellow);margin-top:2px;
}
.nav-cta{
  background:var(--purple)!important;
  color:#fff!important;font-weight:700!important;
  padding:.55rem 1.3rem!important;
  border-radius:var(--radius-pill)!important;
  box-shadow:var(--shadow-btn);
  display:flex;align-items:center;gap:.4rem;
  transition:transform .2s var(--ease),box-shadow .2s!important;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(91,59,245,.5)!important;background:var(--purple-mid)!important}

/* Progress bar in header (method pages) */
.progress-wrap{
  display:flex;align-items:center;gap:.65rem;
  background:var(--bg-soft);border:1px solid var(--border);
  padding:.35rem .9rem;border-radius:var(--radius-pill);
}
.progress-track{
  width:90px;height:6px;background:#E0D8FF;border-radius:4px;overflow:hidden;
}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--purple),var(--yellow));
  border-radius:4px;transition:width .4s;
}
.progress-wrap .nums{
  font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--purple);
}

/* Mobile menu toggle */
.menu-toggle{
  display:none;background:var(--purple-soft);border:none;
  width:40px;height:40px;border-radius:10px;
  color:var(--purple);cursor:pointer;
  align-items:center;justify-content:center;
}

/* ----------------------------------------------------------------
   4. PAGE LAYOUT  (home is full-width, methods have sidebar)
   ---------------------------------------------------------------- */
body.home .layout{
  max-width:100%;padding:0;margin:72px 0 0;
  display:block;
}
.layout{
  display:flex;
  max-width:1300px;margin:calc(72px + 2rem) auto 5rem;
  padding:0 1.5rem;gap:2rem;
}

/* Sidebar */
.sidebar{
  width:270px;flex-shrink:0;
  position:sticky;top:calc(72px + 1.5rem);
  height:calc(100vh - 72px - 3rem);
  overflow-y:auto;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.25rem;
  display:flex;flex-direction:column;gap:.9rem;
}
.sidebar h3{
  font-size:.8rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--purple);
}
.toc-search{
  width:100%;padding:.55rem .8rem;
  background:var(--bg-soft);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:.875rem;color:var(--txt-dark);
  transition:border .2s;
}
.toc-search:focus{border-color:var(--purple)}
.toc-list{display:flex;flex-direction:column;gap:.15rem}
.toc-list li a{
  display:flex;align-items:baseline;gap:.5rem;
  padding:.4rem .65rem;border-radius:var(--radius-sm);
  font-size:.84rem;font-weight:500;color:var(--txt-muted);
  transition:all .2s;
}
.toc-list li a:hover{color:var(--purple);background:var(--purple-soft)}
.toc-list li a.active{
  color:var(--purple);font-weight:700;background:var(--purple-soft);
}
.tocnum{font-family:var(--mono);font-size:.75rem;color:var(--purple-mid);flex-shrink:0}
.toc-empty{font-size:.84rem;color:var(--txt-muted);text-align:center;padding:.75rem}

/* Main area */
.main{flex:1;min-width:0}

/* Overlay */
.overlay{
  display:none;position:fixed;inset:0;background:rgba(26,16,51,.5);
  z-index:150;backdrop-filter:blur(4px);
}
.overlay.show{display:block}

/* ----------------------------------------------------------------
   5. SHARED HELPERS
   ---------------------------------------------------------------- */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.section-tag{
  display:inline-block;font-size:.78rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--purple);margin-bottom:.6rem;
}
.section-tag::before{content:'◆ ';color:var(--yellow)}
h2.heading{
  font-family:var(--serif);font-size:2.4rem;font-weight:800;
  color:var(--txt-dark);line-height:1.15;letter-spacing:-.02em;
  margin-bottom:.75rem;
}
h2.heading em{font-family:var(--script);font-style:normal;color:var(--purple);font-size:2.8rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.65rem;border-radius:var(--radius-pill);
  font-weight:700;font-size:.96rem;cursor:pointer;
  border:none;transition:all .2s var(--ease);
}
.btn-primary{
  background:var(--purple);color:#fff;
  box-shadow:var(--shadow-btn);
}
.btn-primary:hover{background:var(--purple-mid);transform:translateY(-2px);box-shadow:0 10px 28px rgba(91,59,245,.5)}
.btn-yellow{
  background:var(--yellow);color:var(--txt-dark);
  box-shadow:var(--shadow-yellow);
}
.btn-yellow:hover{background:#e8b830;transform:translateY(-2px)}
.btn-outline{
  background:transparent;color:var(--purple);
  border:2px solid var(--purple);
}
.btn-outline:hover{background:var(--purple-soft)}

/* Cards */
.card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:2rem;
  box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(91,59,245,.14)}

/* Tag / Pill badges */
.tag{
  display:inline-block;padding:.28rem .8rem;
  border-radius:var(--radius-pill);font-size:.78rem;font-weight:700;
  background:var(--purple-soft);color:var(--purple);
}
.tag-yellow{background:var(--yellow-soft);color:#8B6914}

/* Toast */
.toast{
  position:fixed;bottom:2rem;right:2rem;
  background:var(--txt-dark);color:#fff;
  padding:.7rem 1.5rem;border-radius:var(--radius-pill);
  font-weight:700;font-size:.9rem;
  box-shadow:0 8px 30px rgba(0,0,0,.2);
  opacity:0;transform:translateY(16px);
  transition:all .3s var(--ease);z-index:1000;
  pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0)}

/* Divider */
.wavy-divider{
  text-align:center;font-size:1.4rem;color:var(--border-dark);
  margin:1rem 0;letter-spacing:4px;
}

/* ----------------------------------------------------------------
   6. HOME — HERO SECTION
   ---------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#F0EDFF 0%,#FAFAFF 50%,#FFF8E8 100%);
  padding:5rem 0 3.5rem;
}
.hero-blob{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.45;pointer-events:none;
}
.hero-blob-1{
  width:520px;height:520px;
  background:radial-gradient(circle,#B8A4FF,#7B5EF7);
  top:-120px;right:-80px;
}
.hero-blob-2{
  width:350px;height:350px;
  background:radial-gradient(circle,#FFE87A,#F4C542);
  bottom:-80px;left:10%;
}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:3rem;align-items:center;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--purple-soft);color:var(--purple);
  font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem 1rem;border-radius:var(--radius-pill);
  margin-bottom:1rem;border:1px solid var(--purple-mid);
}
.hero-dot{
  width:8px;height:8px;border-radius:50%;background:#10b981;
  box-shadow:0 0 8px #10b981;animation:dotPulse 2s infinite;
}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.3;transform:scale(1.3)}}

.hero-title{
  font-family:var(--serif);
  font-size:3.4rem;font-weight:800;line-height:1.1;
  color:var(--txt-dark);letter-spacing:-.03em;
  margin-bottom:.25rem;
}
.hero-title .purple{color:var(--purple)}
.hero-title .script{
  font-family:var(--script);font-style:normal;
  color:var(--purple);font-size:4rem;font-weight:700;
  display:block;line-height:1.1;
}
.hero-desc{
  font-size:1.1rem;color:var(--txt-body);margin:1.25rem 0 2rem;
  max-width:520px;line-height:1.75;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.hero-actions .watch-link{
  display:flex;align-items:center;gap:.5rem;
  color:var(--txt-dark);font-weight:700;font-size:.94rem;
  transition:color .2s;
}
.hero-actions .watch-link:hover{color:var(--purple)}
.hero-actions .watch-link .play-icon{
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;
}
.hero-script-note{
  font-family:var(--script);font-size:1.15rem;color:var(--purple);
  margin-top:1.5rem;
}

/* Right side — stat card + visual block */
.hero-right{position:relative}
.hero-stat-badge{
  position:absolute;top:1.5rem;right:1.5rem;z-index:5;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:.75rem 1.1rem;
  box-shadow:var(--shadow-card);text-align:center;
  min-width:90px;
}
.hero-stat-badge .stat-num{
  font-family:var(--serif);font-size:2.4rem;font-weight:800;
  color:var(--purple);line-height:1;
}
.hero-stat-badge .stat-label{font-size:.72rem;color:var(--txt-muted);font-weight:600;margin-top:2px}
.hero-visual{
  background:linear-gradient(145deg,#fff 0%,var(--purple-pale) 100%);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;min-height:380px;
  display:flex;flex-direction:column;gap:1rem;padding:2rem;
  box-shadow:var(--shadow-card);position:relative;
}
.hero-visual .floating-chip{
  position:absolute;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:.4rem .85rem;
  font-size:.8rem;font-weight:700;color:var(--txt-dark);
  box-shadow:var(--shadow-card);white-space:nowrap;
}
.hero-visual .floating-chip.fc-a{top:1.5rem;left:1.5rem}
.hero-visual .floating-chip.fc-b{bottom:3rem;right:1rem}
.hero-visual .floating-chip.fc-c{bottom:1.5rem;left:1rem}

/* Method preview mini-cards inside hero */
.hero-method-preview{
  display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;
}
.hmp-item{
  display:flex;align-items:center;gap:.75rem;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.75rem 1rem;
  box-shadow:0 2px 8px rgba(91,59,245,.06);
}
.hmp-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--purple);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;flex-shrink:0;
}
.hmp-label{font-size:.88rem;font-weight:700;color:var(--txt-dark)}
.hmp-sub{font-size:.78rem;color:var(--txt-muted)}

/* ----------------------------------------------------------------
   7. HOME — MARQUEE
   ---------------------------------------------------------------- */
.marquee-bar{
  background:var(--txt-dark);overflow:hidden;
  padding:.85rem 0;
}
.marquee-track{
  display:flex;gap:2.5rem;align-items:center;
  animation:marquee 22s linear infinite;
  white-space:nowrap;width:max-content;
}
.marquee-track span{
  font-weight:800;font-size:.88rem;color:rgba(255,255,255,.8);
  text-transform:uppercase;letter-spacing:.06em;
}
.marquee-track .dot{color:var(--yellow);font-size:1rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ----------------------------------------------------------------
   8. HOME — STATS BAR
   ---------------------------------------------------------------- */
.stats-bar{
  padding:3rem 0;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);
  border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--border);
}
.stat-item{
  background:#fff;padding:2rem;text-align:center;
}
.stat-item .num{
  font-family:var(--serif);font-size:2.8rem;font-weight:800;
  color:var(--purple);line-height:1;
}
.stat-item .label{font-size:.88rem;color:var(--txt-muted);margin-top:.3rem;font-weight:600}

/* ----------------------------------------------------------------
   9. HOME — STREAK + QUOTE ROW
   ---------------------------------------------------------------- */
.utility-row{
  padding:2rem 0;background:var(--bg-soft);
}
.utility-grid{
  display:grid;grid-template-columns:1fr 1.5fr;gap:1.5rem;
}
.streak-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.75rem;
  display:flex;align-items:center;gap:1.25rem;
  box-shadow:var(--shadow-card);
}
.streak-ring{
  width:68px;height:68px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--purple) calc(var(--s,0)*1%),#E8E2FF 0%);
  display:flex;align-items:center;justify-content:center;
}
.streak-inner{
  width:54px;height:54px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
}
.streak-body{flex:1}
.streak-title{font-weight:800;color:var(--txt-dark);font-size:1.05rem}
.streak-sub{font-size:.85rem;color:var(--txt-muted);margin-top:.15rem}
.streak-btn{
  margin-left:auto;padding:.55rem 1.1rem;
  background:var(--purple);color:#fff;
  border:none;border-radius:var(--radius-pill);
  font-weight:700;font-size:.84rem;cursor:pointer;
  box-shadow:var(--shadow-btn);
  transition:transform .2s;white-space:nowrap;
}
.streak-btn:hover{transform:scale(1.04)}
.streak-btn:disabled{background:#10b981;cursor:default}

.quote-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.75rem 2rem;
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.quote-mark{
  font-family:var(--serif);font-size:5rem;color:var(--purple-soft);
  line-height:.6;position:absolute;top:.5rem;left:1rem;
}
.quote-text{
  font-size:1.05rem;font-style:italic;color:var(--txt-dark);
  margin-bottom:.6rem;position:relative;z-index:1;
}
.quote-attr{font-weight:700;font-size:.88rem;color:var(--purple);position:relative;z-index:1}
.quote-count{
  position:absolute;bottom:.9rem;right:1.25rem;
  font-family:var(--mono);font-size:.76rem;color:var(--txt-muted);
}

/* ----------------------------------------------------------------
   10. HOME — HOW IT WORKS (3 STEPS)
   ---------------------------------------------------------------- */
.section-pad{padding:4.5rem 0}
.section-alt{background:var(--bg-soft)}
.section-dark{background:var(--txt-dark)}

.steps-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  margin-top:3rem;
}
.step-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:2rem;
  box-shadow:var(--shadow-card);position:relative;
  transition:transform .25s var(--ease),box-shadow .25s;
}
.step-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(91,59,245,.13)}
.step-num{
  width:48px;height:48px;border-radius:50%;
  background:var(--purple);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:1.1rem;
  margin-bottom:1.25rem;
  box-shadow:var(--shadow-btn);
}
.step-card h3{font-size:1.15rem;font-weight:800;color:var(--txt-dark);margin-bottom:.5rem}
.step-card p{font-size:.9rem;color:var(--txt-body);line-height:1.65}
.step-connector{
  position:absolute;top:2.5rem;right:-1.2rem;
  color:var(--border-dark);font-size:1.2rem;z-index:2;
}

/* ----------------------------------------------------------------
   11. HOME — METHOD BENTO CARDS
   ---------------------------------------------------------------- */
.method-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;margin-top:3rem;
}
.method-card{
  background:#fff;border:2px solid var(--border);
  border-radius:var(--radius-md);padding:2rem;
  display:flex;flex-direction:column;
  transition:all .25s var(--ease);
  position:relative;overflow:hidden;
}
.method-card::after{
  content:'';position:absolute;inset:0;opacity:0;
  transition:opacity .25s;border-radius:inherit;
  background:linear-gradient(135deg,rgba(91,59,245,.04),rgba(244,197,66,.04));
}
.method-card:hover{border-color:var(--purple-mid);transform:translateY(-6px);box-shadow:var(--shadow-card)}
.method-card:hover::after{opacity:1}
.mc-color-bar{
  height:5px;border-radius:var(--radius-pill);
  margin-bottom:1.5rem;
}
.mc-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:1rem;
}
.mc-badge{
  font-size:.75rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--purple);margin-bottom:.5rem;
}
.mc-title{
  font-size:1.25rem;font-weight:800;color:var(--txt-dark);
  margin-bottom:.6rem;line-height:1.3;
}
.mc-desc{font-size:.9rem;color:var(--txt-body);margin-bottom:1.25rem;flex:1}
.mc-features{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.5rem}
.mc-features li{
  font-size:.84rem;color:var(--txt-body);
  display:flex;align-items:center;gap:.5rem;
}
.mc-features li::before{
  content:'✓';color:var(--purple);font-weight:800;
  width:16px;height:16px;flex-shrink:0;
}
.mc-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1rem;border-top:1px solid var(--border);
}
.mc-meta{font-size:.8rem;color:var(--txt-muted)}
.mc-link{
  font-weight:700;font-size:.9rem;color:var(--purple);
  display:flex;align-items:center;gap:.35rem;
  transition:gap .2s;
}
.mc-link:hover{gap:.6rem}

/* ----------------------------------------------------------------
   12. HOME — COMPARISON TABLE
   ---------------------------------------------------------------- */
.v-table-wrap{
  overflow-x:auto;border-radius:var(--radius-md);
  border:1px solid var(--border);margin:1.5rem 0;
}
table{width:100%;border-collapse:collapse;font-size:.92rem}
thead th{
  background:var(--purple);color:#fff;
  padding:.85rem 1.1rem;text-align:left;font-weight:700;
}
thead th:first-child{border-radius:var(--radius-md) 0 0 0}
thead th:last-child{border-radius:0 var(--radius-md) 0 0}
tbody td{
  padding:.85rem 1.1rem;border-bottom:1px solid var(--border);
  color:var(--txt-body);
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--purple-pale)}
td.num{font-family:var(--mono);font-weight:700;color:var(--purple)}
.v-callout{
  background:var(--purple-soft);border:1.5px solid var(--purple-mid);
  border-radius:var(--radius-md);padding:1.25rem 1.5rem;
  font-size:1rem;color:var(--txt-dark);margin-top:1.25rem;
}
.v-callout strong{color:var(--purple)}
.v-callout-label{
  font-size:.78rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--purple-mid);
  display:block;margin-bottom:.3rem;
}

/* ----------------------------------------------------------------
   13. HOME — HOW TO USE (NUMBERED LIST)
   ---------------------------------------------------------------- */
.v-steps{display:flex;flex-direction:column;gap:1.25rem;padding:0;list-style:none}
.v-steps li{
  display:flex;align-items:flex-start;gap:1.25rem;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.5rem;
  box-shadow:0 2px 12px rgba(91,59,245,.05);
}
.v-stp-num{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--purple-mid));
  color:#fff;font-weight:800;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:var(--shadow-btn);
}
.v-stp-body h4{font-weight:800;color:var(--txt-dark);margin-bottom:.3rem}
.v-stp-body p{font-size:.9rem;color:var(--txt-body)}
.v-code{
  display:inline-block;background:var(--purple-soft);
  color:var(--purple);font-family:var(--mono);font-size:.82rem;
  padding:.1rem .4rem;border-radius:4px;font-weight:600;
}
.v-tip{
  background:var(--yellow-soft);border:1.5px solid var(--yellow);
  border-radius:var(--radius-md);padding:1.25rem 1.5rem;
  font-size:.92rem;color:var(--txt-dark);margin-top:1.5rem;
}
.v-tip strong{color:#8B6914}

/* ----------------------------------------------------------------
   14. HOME — PREFLIGHT CHECKLIST
   ---------------------------------------------------------------- */
.v-preflight{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.75rem;
  box-shadow:var(--shadow-card);
}
.v-preflight-progress{
  display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;
}
.v-pf-track{
  flex:1;height:10px;background:#E8E3F5;border-radius:6px;overflow:hidden;
}
.v-pf-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--purple),var(--yellow));
  border-radius:6px;transition:width .4s;
}
.v-pf-count{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--purple);white-space:nowrap}

.v-check{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.9rem 1rem;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .15s;
  border-bottom:1px solid var(--border);
}
.v-check:last-child{border-bottom:none}
.v-check:hover{background:var(--purple-pale)}
.v-check input{display:none}
.v-check-box{
  width:22px;height:22px;border-radius:6px;
  border:2px solid var(--border-dark);
  background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:transparent;transition:all .2s;margin-top:1px;
}
.v-check input:checked + .v-check-box{
  background:var(--purple);border-color:var(--purple);color:#fff;
}
.v-check-text{font-size:.9rem;color:var(--txt-body);font-weight:500}
.v-check input:checked ~ .v-check-text{text-decoration:line-through;color:var(--txt-muted)}

/* ----------------------------------------------------------------
   15. HOME — CTA BAND (dark)
   ---------------------------------------------------------------- */
.cta-band{
  background:var(--txt-dark);padding:4.5rem 0;
  text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(91,59,245,.25),transparent 70%);
  pointer-events:none;
}
.cta-band .section-tag{color:var(--yellow)}
.cta-band h2{
  font-family:var(--serif);font-size:2.8rem;font-weight:800;
  color:#fff;margin-bottom:.75rem;letter-spacing:-.02em;
}
.cta-band p{font-size:1.05rem;color:rgba(255,255,255,.7);margin-bottom:2.25rem}
.cta-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

/* ----------------------------------------------------------------
   16. FOOTER
   ---------------------------------------------------------------- */
.site-footer{
  background:var(--bg-soft);
  border-top:1px solid var(--border);
  padding:3rem 0 1.5rem;
}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;
  margin-bottom:2rem;
}
.footer-brand .brand{margin-bottom:.75rem}
.footer-desc{font-size:.88rem;color:var(--txt-muted);max-width:260px;line-height:1.65}
.footer-col h4{font-weight:800;font-size:.92rem;color:var(--txt-dark);margin-bottom:.75rem}
.footer-col a{
  display:block;font-size:.86rem;color:var(--txt-muted);
  padding:.25rem 0;transition:color .2s;font-weight:500;
}
.footer-col a:hover{color:var(--purple)}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1.5rem;border-top:1px solid var(--border);
  font-size:.82rem;color:var(--txt-muted);flex-wrap:wrap;gap:.5rem;
}
.foot-quote{font-family:var(--script);font-size:1.15rem;color:var(--purple)}

/* ----------------------------------------------------------------
   17. METHOD PAGES — Page Head
   ---------------------------------------------------------------- */
.page-head{margin-bottom:2.5rem}
.breadcrumbs{
  font-size:.84rem;color:var(--txt-muted);margin-bottom:.5rem;
}
.breadcrumbs a{color:var(--purple);font-weight:600}
.page-title{
  font-family:var(--serif);font-size:2.6rem;font-weight:800;
  color:var(--txt-dark);letter-spacing:-.02em;margin-bottom:.65rem;
}
.page-sub{font-size:1.05rem;color:var(--txt-body);max-width:780px}

.lead-callout{
  background:var(--purple-soft);
  border:1.5px solid var(--purple-mid);
  border-left:5px solid var(--purple);
  border-radius:var(--radius-md);
  padding:1.25rem 1.5rem;margin-bottom:2.5rem;
  font-size:1.05rem;color:var(--txt-dark);
}

/* ----------------------------------------------------------------
   18. METHOD SECTIONS
   ---------------------------------------------------------------- */
.section{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:2rem;
  margin-bottom:1.75rem;
  box-shadow:0 2px 16px rgba(91,59,245,.05);
  transition:border-color .25s;
}
.section:hover{border-color:var(--border-dark)}
.section.done{
  border-color:rgba(16,185,129,.4);
  background:rgba(16,185,129,.02);
}

.section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.5rem;padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.section-title{
  font-size:1.35rem;font-weight:800;color:var(--txt-dark);
  display:flex;align-items:center;gap:.55rem;
}
.secnum{
  font-family:var(--mono);font-size:.95rem;
  color:var(--purple);font-weight:700;
}
.mark-done{
  background:var(--bg-soft);border:1.5px solid var(--border);
  color:var(--txt-muted);padding:.4rem .9rem;
  border-radius:var(--radius-pill);font-weight:700;
  font-size:.82rem;cursor:pointer;transition:all .2s;
}
.mark-done:hover{border-color:var(--purple);color:var(--purple)}
.section.done .mark-done{background:#10b981;color:#fff;border-color:#10b981}

/* Callout variants */
.callout{
  padding:1rem 1.25rem;border-radius:var(--radius-sm);margin:1.25rem 0;
  border-left:4px solid var(--purple);background:var(--purple-soft);
}
.callout.note{border-left-color:#3b82f6;background:#EFF6FF}
.callout.tip{border-left-color:#10b981;background:#F0FDF4}
.callout.warn{border-left-color:#ef4444;background:#FEF2F2}
.ct{
  display:block;font-weight:800;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--txt-dark);margin-bottom:.25rem;
}

/* Flow diagrams */
.flow{
  display:flex;flex-direction:column;align-items:center;
  gap:.5rem;margin:1.5rem 0;padding:1.5rem;
  background:var(--bg-soft);border-radius:var(--radius-md);
  border:1px solid var(--border);
}
.arrow-row .node{
  display:inline-block;padding:.55rem 1.3rem;
  background:#fff;border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  font-weight:700;font-size:.88rem;color:var(--txt-dark);
  box-shadow:0 2px 8px rgba(91,59,245,.07);
}
.arrow-row .node.highlight{
  background:var(--purple);color:#fff;border:none;
  box-shadow:var(--shadow-btn);
}
.edge{color:var(--purple);font-weight:bold;font-size:1.1rem}

/* Template copy blocks */
.template-block{
  position:relative;margin:1.25rem 0;
  border-radius:var(--radius-md);overflow:hidden;
  border:1.5px solid var(--border-dark);
  background:#1B0F3B;
}
.template-label{
  background:#2A1A50;padding:.55rem 1rem;
  font-size:.78rem;font-weight:700;
  color:rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;
}
pre.template{
  padding:1.25rem;font-family:var(--mono);font-size:.86rem;
  color:#E8E2FF;line-height:1.65;white-space:pre-wrap;word-break:break-word;
}
.copy-btn{
  position:absolute;top:.45rem;right:.6rem;
  background:rgba(244,197,66,.15);border:1px solid rgba(244,197,66,.4);
  color:var(--yellow);padding:.3rem .7rem;border-radius:var(--radius-xs);
  font-size:.75rem;font-weight:700;cursor:pointer;transition:all .2s;
}
.copy-btn:hover{background:var(--yellow);color:var(--txt-dark)}
.copy-btn.copied{background:#10b981;color:#fff;border-color:#10b981}

/* Pills / Chips */
.pills,.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0}
.pill,.chip{
  padding:.35rem .85rem;border-radius:var(--radius-pill);
  font-size:.82rem;font-weight:700;
  background:var(--purple-soft);color:var(--purple);
  border:1px solid var(--border-dark);
  cursor:pointer;transition:all .2s;
}
.pill:hover,.chip:hover{background:var(--purple);color:#fff}
.chip.copied{background:#10b981;color:#fff;border-color:#10b981}

/* Headings inside sections */
.section h3{font-size:1.1rem;font-weight:800;color:var(--txt-dark);margin:1.25rem 0 .6rem}
.section h4{font-size:.95rem;font-weight:700;color:var(--txt-dark);margin:.9rem 0 .4rem}
.section p{font-size:.9rem;color:var(--txt-body);margin-bottom:.7rem}
.section ul.check{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin:1rem 0}
.section ul.check li{
  font-size:.88rem;color:var(--txt-body);
  display:flex;align-items:flex-start;gap:.5rem;padding-left:.25rem;
}
.section ul.check li::before{
  content:'✓';color:var(--purple);font-weight:800;margin-top:1px;
}

/* Priority badges */
.priority-gold::before{content:'🥇 '}
.priority-silver::before{content:'🥈 '}
.priority-bronze::before{content:'🥉 '}

/* ----------------------------------------------------------------
   19. INTERACTIVE TOOLS (Score Calculators, Pitch Builder, CRM)
   ---------------------------------------------------------------- */
.tool-box{
  background:var(--bg-soft);border:1.5px solid var(--border-dark);
  border-radius:var(--radius-md);padding:1.75rem;margin:1.5rem 0;
}
.tool-title{
  font-size:1.1rem;font-weight:800;color:var(--txt-dark);
  margin-bottom:1.25rem;display:flex;align-items:center;gap:.6rem;
}
.tool-title .tool-icon{
  width:36px;height:36px;border-radius:10px;
  background:var(--purple);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
}

/* Score calc */
.calc-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:.75rem;margin-bottom:1.5rem;
}
.calc-item{
  display:flex;align-items:center;gap:.7rem;
  padding:.75rem 1rem;background:#fff;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;user-select:none;transition:border-color .2s;
}
.calc-item:hover{border-color:var(--purple)}
.calc-item input{width:18px;height:18px;accent-color:var(--purple);cursor:pointer}
.calc-item label{font-size:.86rem;font-weight:600;color:var(--txt-dark);cursor:pointer;flex:1}
.calc-item .pt{
  font-family:var(--mono);font-size:.75rem;color:var(--purple);
  font-weight:700;background:var(--purple-soft);padding:.1rem .4rem;border-radius:4px;
}
.calc-result{
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;border:1.5px solid var(--border);
  border-radius:var(--radius-md);padding:1.1rem 1.5rem;
}
.score-num{
  font-family:var(--mono);font-size:2.2rem;font-weight:800;color:var(--purple);
}
.score-verdict{
  font-weight:800;font-size:1.05rem;padding:.4rem 1rem;border-radius:var(--radius-pill);
}
.verdict-apply{background:#D1FAE5;color:#065F46}
.verdict-optional{background:#FEF3C7;color:#92400E}
.verdict-skip{background:#FEE2E2;color:#991B1B}

/* Pitch builder */
.pitch-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{font-size:.83rem;font-weight:700;color:var(--txt-dark)}
.form-group input,.form-group select,.form-group textarea{
  padding:.6rem .85rem;background:#fff;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  color:var(--txt-dark);font-size:.88rem;transition:border .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--purple);
}
.form-group textarea{min-height:80px;resize:vertical}
.form-group.wide{grid-column:span 2}

/* CRM Tracker */
.crm-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;flex-wrap:wrap;gap:1rem;
}
.crm-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.crm-table-container{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border)}
.crm-table-container table td,.crm-table-container table th{font-size:.85rem}
.status-pill{
  padding:.22rem .65rem;border-radius:var(--radius-pill);
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.st-applied{background:#DBEAFE;color:#1D4ED8}
.st-replied{background:#D1FAE5;color:#065F46}
.st-interview{background:#EDE9FE;color:#5B21B6}
.st-offer{background:#FEF3C7;color:#92400E}
.st-rejected{background:#FEE2E2;color:#991B1B}
.st-saved{background:#F3F4F6;color:#374151}

/* ----------------------------------------------------------------
   20. SCROLL REVEAL
   ---------------------------------------------------------------- */
.v-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.v-reveal.in{opacity:1;transform:translateY(0)}

/* ----------------------------------------------------------------
   21. RESPONSIVE
   ---------------------------------------------------------------- */
@media(max-width:1100px){
  .hero-grid,.method-grid,.steps-grid{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero-right{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .layout{flex-direction:column;padding:0 1rem;margin-top:calc(72px + 1rem)}
  .sidebar{
    position:fixed;top:0;left:-310px;bottom:0;z-index:210;
    width:290px;height:100vh;border-radius:0;
    transition:left .3s var(--ease);
  }
  .sidebar.open{left:0;box-shadow:0 0 60px rgba(0,0,0,.25)}
  .menu-toggle{display:flex}
  .nav-links.desktop{display:none}
  .method-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .utility-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .pitch-form{grid-template-columns:1fr}
  .form-group.wide{grid-column:span 1}
  .hero-title{font-size:2.4rem}
  .hero-title .script{font-size:2.8rem}
}
@media(max-width:600px){
  .hero{padding:3rem 0 2rem}
  .hero-title{font-size:2rem}
  .hero-title .script{font-size:2.2rem}
  h2.heading{font-size:1.9rem}
  h2.heading em{font-size:2.2rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .calc-grid{grid-template-columns:1fr}
  .cta-band h2{font-size:2rem}
  .v-method-grid,.method-grid{grid-template-columns:1fr}
}