/* Premium base + connected app polish */
:root{
  --primary:#2563EB;
  --primary-dark:#1E40AF;
  --accent:#22C55E;
  --dark:#0F172A;
  --light:#F8FAFC;
  --gray:#64748B;
  --border:#E2E8F0;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--dark);
  background:#fff;
}

/* NAV */
.navbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.9rem 1.4rem;
  gap:1rem;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.brand{ display:flex; align-items:baseline; gap:.7rem; }
.brand h2{ margin:0; font-size:1.15rem; letter-spacing:-.02em; }
.tagline{ color:var(--gray); font-size:.85rem; display:none; }

.navlinks{
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}
.navlink{
  text-decoration:none;
  color:var(--gray);
  font-weight:600;
  font-size:.92rem;
  padding:.45rem .6rem;
  border-radius:10px;
}
.navlink:hover{ background:var(--light); color:var(--dark); }
.navactions{ display:flex; gap:.7rem; align-items:center; }

/* BUTTONS */
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
  border:none;
  padding:.75rem 1.05rem;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(37,99,235,.18);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow:0 14px 26px rgba(37,99,235,.22); }
.btn-primary:active{ transform: translateY(0px); }
.btn-outline{
  background:transparent;
  border:1px solid var(--border);
  color:var(--dark);
  padding:.75rem 1.05rem;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.btn-outline:hover{ background:var(--light); transform: translateY(-1px); }
.small{ padding:.55rem .85rem; font-weight:700; border-radius:10px; }

.iconbtn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:.45rem .6rem;
  cursor:pointer;
}

/* LANDING */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3rem;
  max-width:1200px;
  margin:auto;
  padding:4.5rem 1.6rem 3.2rem;
  align-items:center;
}
.hero h1{
  font-size:3rem;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.03em;
  margin:0;
}
.hero p{
  margin:1.2rem 0 0;
  color:var(--gray);
  font-size:1.06rem;
  line-height:1.65;
}
.hero-actions{ display:flex; gap:.9rem; margin-top:1.6rem; flex-wrap:wrap; }

.hero-kpis{
  display:flex;
  gap:1.6rem;
  margin-top:2.2rem;
  flex-wrap:wrap;
}
.hero-kpis div{
  background:var(--light);
  border:1px solid var(--border);
  padding:.9rem 1rem;
  border-radius:16px;
  min-width:170px;
}
.hero-kpis strong{
  display:block;
  color:var(--primary);
  font-size:1.35rem;
  font-weight:900;
}
.hero-kpis span{ color:var(--gray); font-weight:600; font-size:.9rem; }

.hero-visual{ display:flex; justify-content:flex-end; }
.mock{
  width:100%;
  max-width:420px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:1.1rem;
}
.mock-top{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:1rem; }
.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:var(--primary-dark);
  font-weight:800;
  font-size:.78rem;
}
.pill.subtle{ background:rgba(34,197,94,.12); color:#166534; }
.mock-card{
  border:1px solid var(--border);
  border-radius:18px;
  padding:.9rem;
  margin-bottom:.8rem;
  background:#fff;
}
.mock-row{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.mock-title{ font-weight:900; letter-spacing:-.02em; }
.mock-score{ font-weight:900; color:var(--primary); }
.mock-sub{ color:var(--gray); font-weight:600; font-size:.9rem; margin-top:.35rem; }
.mock-pills{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; }
.chip{
  border:1px solid var(--border);
  background:var(--light);
  color:var(--dark);
  font-weight:700;
  font-size:.78rem;
  padding:.28rem .55rem;
  border-radius:999px;
}
.mock-actions{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:.4rem; }

/* SECTIONS */
.how-it-works{
  background:var(--light);
  padding:3.6rem 1.6rem;
  text-align:center;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.how-it-works h2{ margin:0; font-size:2rem; letter-spacing:-.02em; }
.section-sub{
  color:var(--gray);
  max-width:820px;
  margin:.8rem auto 0;
  line-height:1.6;
}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.3rem;
  max-width:1050px;
  margin:2.2rem auto 0;
}
.step{
  background:#fff;
  padding:1.6rem;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 10px 25px rgba(0,0,0,.04);
  text-align:left;
}
.step h3{ margin:.6rem 0 .35rem; letter-spacing:-.01em; }
.step p{ margin:0; color:var(--gray); line-height:1.55; }
.step span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:#fff;
  width:34px;
  height:34px;
  border-radius:12px;
  font-weight:900;
}

.cta{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
  text-align:center;
  padding:3.4rem 1.6rem;
}
.cta h2{ margin:0; font-size:2rem; letter-spacing:-.02em; }
.cta p{ margin:.7rem auto 1.3rem; max-width:720px; color:rgba(255,255,255,.9); }

.panel{
  padding:4rem 1.6rem;
  border-top:1px solid var(--border);
}
.panel-inner{ max-width:1200px; margin:auto; }
.panel-head h2{ margin:0; font-size:2.1rem; letter-spacing:-.03em; }
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow: var(--shadow);
}
.card.soft{ background:var(--light); }
.muted{ color:var(--gray); font-weight:600; }
.small{ font-size:.85rem; }
.h3{ margin:0; font-size:1.15rem; font-weight:900; letter-spacing:-.02em; }
.big{ font-size:2.3rem; font-weight:900; letter-spacing:-.03em; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }

/* Assessment */
.assessment-card{ padding:1.25rem; margin-top:1.2rem; }
.assessment-top{ margin-bottom:1rem; }
.progress-meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; font-weight:700; }
.progressbar{ height:12px; border-radius:999px; background:var(--light); border:1px solid var(--border); overflow:hidden; }
.progressbar.thin{ height:10px; }
.progressfill{ height:100%; background:linear-gradient(135deg,var(--accent),#16a34a); border-radius:999px; width:0%; transition: width .35s ease; }
.question-wrap{ padding:.4rem 0 0; }
.q-title{ font-size:1.25rem; font-weight:900; letter-spacing:-.02em; margin:.4rem 0 .3rem; }
.q-desc{ color:var(--gray); margin:0 0 1rem; line-height:1.6; font-weight:600; }
.q-options{ display:grid; gap:.7rem; }
.option{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:1rem;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.option:hover{ transform: translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.06); }
.option.selected{
  border-color: rgba(37,99,235,.55);
  background: rgba(37,99,235,.06);
}
.option input{ margin-top:.2rem; transform: scale(1.1); }
.option .opttext{ font-weight:800; }
.option .opthelper{ display:block; color:var(--gray); font-weight:600; margin-top:.25rem; line-height:1.45; }
.assessment-actions{ display:flex; justify-content:space-between; gap:1rem; margin-top:1.2rem; }
.btn-outline[disabled], .btn-primary[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

/* Report */
.report-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.3rem; margin-top:1.2rem; align-items:start; }
.report-summary{ padding:1.25rem; }
.badge{
  display:inline-flex;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  color:var(--primary-dark);
  font-weight:900;
  font-size:.82rem;
}
.scoreline{ margin-top:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.ring{
  width:72px; height:72px;
  border-radius:50%;
  border:8px solid rgba(37,99,235,.15);
  display:flex; align-items:center; justify-content:center;
}
.ring-inner{ font-weight:900; color:var(--primary-dark); }
.bullets{ margin:.6rem 0 0; padding-left:1.1rem; }
.bullets li{ margin:.35rem 0; color:var(--dark); font-weight:700; }
.report-actions{ display:flex; gap:.7rem; margin-top:1.1rem; flex-wrap:wrap; }

.report-matches{ padding:1.25rem; }
.matches-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.8rem; }
.matches{ display:grid; gap:.9rem; }
.match-card{
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
  background:#fff;
}
.match-card.primary{
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 14px 30px rgba(34,197,94,.08);
}
.match-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.match-title{ font-weight:900; letter-spacing:-.02em; font-size:1.05rem; }
.match-score{ font-weight:900; color:var(--primary); }
.meta-row{ margin-top:.35rem; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.tag{
  font-weight:900;
  font-size:.78rem;
  padding:.28rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--light);
}
.tag.growth{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25); color:#166534; }
.tag.target{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.35); color:#14532d; }
.why{ margin-top:.55rem; color:var(--gray); line-height:1.55; font-weight:650; }
.pills{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.card-actions{ display:flex; gap:.6rem; margin-top:.9rem; flex-wrap:wrap; }

.backup{ margin-top:1.2rem; padding:1.25rem; }
.backup-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.7rem; }

/* Resume */
.template-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem; }
.template{ text-align:left; padding:1.1rem; cursor:pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.template:hover{ transform: translateY(-1px); }
.template.selected{
  border-color: rgba(37,99,235,.55);
  background: rgba(37,99,235,.05);
}
.template-title{ font-weight:900; font-size:1.05rem; letter-spacing:-.02em; }
.resume-editor{ margin-top:1.2rem; padding:1.25rem; }
.resume-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.resume-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.editor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.editor label{ display:block; margin:.7rem 0 .35rem; font-weight:800; color:var(--dark); }
.editor input, .editor textarea{
  width:100%;
  padding:.75rem .85rem;
  border-radius:14px;
  border:1px solid var(--border);
  outline:none;
  font-weight:650;
}
.editor input:focus, .editor textarea:focus{ border-color: rgba(37,99,235,.55); box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.preview{ padding:1.1rem; }
.pv-name{ font-weight:900; font-size:1.35rem; letter-spacing:-.02em; }
.pv-headline{ color:var(--gray); font-weight:700; margin-top:.2rem; }
.pv-block{ margin-top:1rem; }
.pv-title{ font-weight:900; margin-bottom:.35rem; }
.pv-text{ color:var(--dark); line-height:1.55; font-weight:650; }
.pv-chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.pv-pre{ white-space:pre-wrap; margin:0; font-family:inherit; color:var(--dark); font-weight:650; line-height:1.55; }

/* Prep */
.prep-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.2rem; }
.prep-card{ padding:1.15rem; }
.prep-title{ font-weight:900; font-size:1.05rem; letter-spacing:-.02em; }
.checklist{ list-style:none; padding:0; margin:.8rem 0 0; }
.checklist li{ display:flex; gap:.55rem; align-items:center; margin:.45rem 0; font-weight:700; color:var(--dark); }
.checklist input{ transform: scale(1.05); }

/* Modal */
.modal{
  position:fixed;
  inset:auto 50% 50% auto;
  transform: translate(50%, 50%);
  width:min(720px, calc(100% - 2rem));
  max-height:75vh;
  overflow:auto;
  padding:1rem;
  display:none;
  z-index:50;
}
.modal.open{ display:block; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--border); }
.modal-body{ padding-top:.8rem; color:var(--dark); font-weight:650; line-height:1.6; }
.backdrop{
  position:fixed; inset:0;
  background:rgba(2,6,23,.55);
  display:none;
  z-index:40;
}
.backdrop.open{ display:block; }

/* Footer */
.footer{
  padding:2.2rem 1.6rem;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  max-width:1200px;
  margin:0 auto 2rem;
}

/* Responsive */
@media (max-width: 980px){
  .tagline{ display:inline; }
  .hero{ grid-template-columns:1fr; }
  .hero-visual{ justify-content:flex-start; }
  .steps{ grid-template-columns:1fr; }
  .report-grid{ grid-template-columns:1fr; }
  .template-grid{ grid-template-columns:1fr; }
  .editor-grid{ grid-template-columns:1fr; }
  .prep-grid{ grid-template-columns:1fr; }
  .navlinks{ display:none; }
}


/* Counseling */


/* Counseling */
.counseling-card{ padding:1.25rem; margin-top:1.2rem; }
.counseling-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:start; }
.counsel-note{ margin-top:1rem; padding:1rem; border-radius:18px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:.8rem; }
.field label{ display:block; font-weight:800; margin:0 0 .35rem; }
.field input, .field select, .field textarea{
  width:100%;
  padding:.75rem .85rem;
  border-radius:14px;
  border:1px solid var(--border);
  outline:none;
  font-weight:650;
  background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.field-wide{ grid-column: 1 / -1; }
.btn-row{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
@media (max-width: 980px){
  .counseling-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
}


/* User badge */
.userbadge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--light);
  font-weight:900;
  color:var(--dark);
  font-size:.85rem;
}

/* Login modal */
.loginbackdrop{
  position:fixed; inset:0;
  background:rgba(2,6,23,.55);
  display:none;
  z-index:60;
}
.loginbackdrop.open{ display:block; }
.loginmodal{
  position:fixed;
  inset:auto 50% 50% auto;
  transform: translate(50%, 50%);
  width:min(680px, calc(100% - 2rem));
  padding:1rem;
  display:none;
  z-index:70;
}
.loginmodal.open{ display:block; }

/* Error overlay */
.erroverlay{
  position:fixed; inset:0;
  background:rgba(2,6,23,.45);
  z-index:100;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:1.2rem;
}
.errcard{
  width:min(820px, 100%);
  margin-top:1.2rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  padding:1rem;
}


/* Toasts */
.toastwrap{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:120;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  min-width: 260px;
  max-width: 360px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.15);
  padding:.85rem .9rem;
}
.toast .t-title{ font-weight:900; }
.toast .t-sub{ margin-top:.15rem; }
.toast .t-row{ display:flex; justify-content:space-between; gap:.75rem; align-items:flex-start; }
.toast .t-x{ border:none; background:transparent; font-size:14px; cursor:pointer; opacity:.65; }
.toast .t-x:hover{ opacity:1; }

/* Match premium blocks */
.fitbullets{ margin:.55rem 0 .15rem; padding-left:1.05rem; }
.fitbullets li{ margin:.18rem 0; }
.tagsRow{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.55rem 0 .25rem; }
.miniTag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--light);
  font-weight:850;
  font-size:.78rem;
}
.match-subgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
  margin-top:.65rem;
}
@media (max-width: 860px){
  .match-subgrid{ grid-template-columns:1fr; }
}
.match-box{
  border:1px solid var(--border);
  border-radius:16px;
  padding:.75rem .8rem;
  background:#fff;
}
.match-box .lbl{ font-weight:900; margin-bottom:.25rem; }


/* Template gallery */
.template-gallery{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .8rem;
  margin-top:.8rem;
}
@media (max-width: 980px){ .template-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .template-gallery{ grid-template-columns: 1fr; } }
.tpl-card{
  padding:.9rem;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tpl-card:hover{ transform: translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.10); }
.tpl-card.active{ outline:3px solid rgba(37,99,235,.22); border-color: rgba(37,99,235,.35); }
.tpl-thumb{
  height:140px;
  border-radius:14px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02));
  position:relative;
  overflow:hidden;
}
.tpl-thumb:before{
  content:"";
  position:absolute; inset:14px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.10);
  background: #fff;
}
.tpl-meta{ margin-top:.7rem; display:flex; justify-content:space-between; gap:.6rem; align-items:flex-start; }
.tpl-name{ font-weight:950; }
.tpl-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.45rem; }
.tpl-badge{
  display:inline-flex; align-items:center;
  padding:.2rem .5rem;
  border-radius:999px;
  font-weight:850;
  font-size:.75rem;
  border:1px solid var(--border);
  background:var(--light);
}

/* Resume preview (print-friendly) */
.resume-preview{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
  font-size: 12.8px;
  line-height:1.35;
  color:#0b1220;
}
.rp-header{
  display:flex; gap:.85rem; align-items:center;
  padding-bottom:.85rem;
  border-bottom:1px solid rgba(15,23,42,.10);
}
.rp-photo{
  width:64px; height:64px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  flex: 0 0 auto;
}
.rp-photo img{ width:100%; height:100%; object-fit:cover; }
.rp-name{ font-weight:950; font-size: 20px; line-height:1.1; }
.rp-headline{ font-weight:800; margin-top:.15rem; }
.rp-contact{ margin-top:.35rem; color:rgba(15,23,42,.70); font-size:12px; }
.rp-section{ margin-top:.85rem; }
.rp-title{ font-weight:950; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:rgba(15,23,42,.70); }
.rp-text{ margin-top:.35rem; }
.rp-chips{ margin-top:.45rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.rp-chip{ display:inline-flex; padding:.2rem .45rem; border:1px solid rgba(15,23,42,.12); border-radius:999px; font-weight:800; font-size:11.5px; background:rgba(15,23,42,.02); }
.rp-two{ display:grid; grid-template-columns:1fr 1fr; gap: .9rem; }
@media (max-width: 860px){ .rp-two{ grid-template-columns:1fr; } }
.rp-list{ margin:.45rem 0 0; padding-left:1.1rem; }
.rp-list li{ margin:.18rem 0; }

/* Template themes (simple but premium) */
.tpl-ats-clean{ --accent:#1d4ed8; }
.tpl-ats-modern{ --accent:#0f172a; }
.tpl-campus{ --accent:#16a34a; }
.tpl-pro-classic{ --accent:#7c3aed; }
.tpl-pro-modern{ --accent:#0ea5e9; }
.tpl-data{ --accent:#f97316; }
.tpl-minimal{ --accent:#334155; }
.tpl-elegant{ --accent:#be123c; }
.resume-preview .rp-name{ color: var(--accent); }
.resume-preview .rp-title{ color: color-mix(in oklab, var(--accent) 65%, rgba(15,23,42,.70)); }

/* Print to PDF */


/* Template thumb mini (gives screenshot-like feel) */
.tpl-thumb{
  background:#fff;
}
.tpl-mini{
  position:absolute;
  inset:10px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.10);
  overflow:hidden;
  display:grid;
  grid-template-columns: 34% 66%;
}
.tpl-mini .side{
  background: rgba(29,78,216,.10);
  border-right:1px solid rgba(15,23,42,.08);
  padding:8px 7px;
}
.tpl-mini .main{
  padding:8px 9px;
}
.tpl-mini .nm{ height:10px; width:70%; border-radius:6px; background: rgba(15,23,42,.14); }
.tpl-mini .ln{ margin-top:6px; height:7px; width:55%; border-radius:6px; background: rgba(15,23,42,.10); }
.tpl-mini .blk{ margin-top:10px; height:6px; width:82%; border-radius:6px; background: rgba(15,23,42,.08); }
.tpl-mini .blk.sm{ width:66%; }
.tpl-mini .dot{ width:18px; height:18px; border-radius:999px; background: rgba(29,78,216,.25); margin-top:10px; }
.tpl-mini.photo .dot{ background: rgba(125,211,252,.45); }
.tpl-mini.pink .side{ background: rgba(236,72,153,.12); }
.tpl-mini.gray .side{ background: rgba(148,163,184,.18); }


/* Resume wizard (Zety-style) */
.resume-wizard{ display:grid; grid-template-columns: 260px 1fr; padding:0; overflow:hidden; border-radius:22px; }
.rw-side{ background:#0b2a5f; color:#eaf1ff; padding:1.2rem 1rem; display:flex; flex-direction:column; gap:1rem; }
.rw-logo{ font-weight:950; letter-spacing:.2px; }
.rw-tag{ color: rgba(234,241,255,.75); margin-top:.15rem; }
.rw-steps{ display:flex; flex-direction:column; gap:.55rem; margin-top:.3rem;}
.rw-stepitem{ display:flex; align-items:center; gap:.7rem; cursor:pointer; padding:.35rem .4rem; border-radius:12px; }
.rw-stepitem:hover{ background: rgba(255,255,255,.08); }
.rw-stepitem .num{
  width:26px; height:26px; border-radius:999px;
  border:2px solid rgba(234,241,255,.55);
  display:flex; align-items:center; justify-content:center;
  font-weight:950; font-size:.85rem;
}
.rw-stepitem.active .num{ background:#fff; color:#0b2a5f; border-color:#fff; }
.rw-stepitem .txt{ font-weight:850; }
.rw-progress{ margin-top:auto; }
.rw-bar{ height:10px; background: rgba(255,255,255,.12); border-radius:999px; overflow:hidden; margin:.35rem 0; }
#rwBarFill{ height:100%; width:0%; background:#22c55e; }
.rw-links{ display:flex; flex-direction:column; gap:.35rem; opacity:.85; }

.rw-main{ padding:1.2rem 1.3rem; }
.rw-top{ display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1rem; }
.rw-content{ display:grid; grid-template-columns: 1fr 360px; gap:1rem; }
@media (max-width: 980px){ .resume-wizard{ grid-template-columns:1fr; } .rw-side{ display:none; } .rw-content{ grid-template-columns:1fr; } .rw-preview{ order:2; } }
.rw-form{ padding:1rem; border:1px solid var(--border); border-radius:18px; background:#fff; }
.rw-row2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width: 700px){ .rw-row2{ grid-template-columns:1fr; } }
.rw-photo{ display:grid; grid-template-columns: 110px 1fr; gap:1rem; margin-top:1rem; align-items:center;}
.rw-photo-box{ width:110px; height:110px; border-radius:18px; border:1px dashed rgba(15,23,42,.25); background: rgba(15,23,42,.02); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.rw-photo-box img{ width:100%; height:100%; object-fit:cover; display:block; }
.rw-nav{ display:flex; justify-content:space-between; gap:.8rem; margin-top:1rem; }

.rw-preview{ position:sticky; top:84px; align-self:start; }
.tpl-reco{ padding:.85rem; border-radius:18px; position:relative; }
.tpl-reco:after{
  content:"";
  position:absolute;
  left:22px; top:100%;
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid #fff;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
}

/* Start choice */
.start-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width: 860px){ .start-choice-grid{ grid-template-columns:1fr; } }
.start-choice{
  border:1px solid rgba(15,23,42,.14);
  border-radius:20px;
  padding:1.1rem 1rem;
  background:#fff;
  text-align:left;
  cursor:pointer;
  position:relative;
  min-height: 210px;
  box-shadow:0 14px 28px rgba(0,0,0,.06);
}
.start-choice .badge{
  position:absolute; top:-12px; left:18px;
  background:#fecaca;
  color:#7f1d1d;
  font-weight:950;
  padding:.25rem .6rem;
  border-radius:999px;
  border:1px solid rgba(127,29,29,.15);
  font-size:.78rem;
  letter-spacing:.02em;
}
.start-choice .ico{ font-size:30px; }
.start-choice .ttl{ font-weight:950; font-size:1.15rem; margin-top:.55rem; }
.start-choice .sub{ color: rgba(15,23,42,.75); margin-top:.35rem; }
.start-choice.recommended{ outline:3px solid rgba(37,99,235,.22); border-color: rgba(37,99,235,.32); }
.start-choice.selected{ outline:3px solid rgba(34,197,94,.20); border-color: rgba(34,197,94,.45); }

/* Modal */
.modal{ position:fixed; inset:0; display:none; z-index:140; }
.modal[aria-hidden="false"]{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.55); }
.modal-card{
  position:relative;
  width:min(980px, calc(100% - 24px));
  margin: 64px auto;
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 26px 70px rgba(0,0,0,.30);
  overflow:hidden;
}
.modal-head{ display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 1.1rem; border-bottom:1px solid rgba(15,23,42,.10); }
.modal-body{ padding:1rem 1.1rem 1.2rem; }
.icon-btn{ border:none; background:rgba(15,23,42,.06); border-radius:12px; width:40px; height:40px; cursor:pointer; font-weight:900; }
.icon-btn:hover{ background:rgba(15,23,42,.10); }

/* Preview photo wrap */
#rpPhotoWrap{ display:block; }


/* Phase 2D: Canva/Zety-style editor rail + drawer */
.re-stage{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:1rem;
}
@media (max-width: 980px){ .re-stage{ grid-template-columns:1fr; } }

.re-rail{
  width:92px;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding:.7rem .55rem;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  height: fit-content;
  position: sticky;
  top: 84px;
  align-self: start;
}
.re-tool{
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:16px;
  padding:.6rem .45rem;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  box-shadow:0 10px 18px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.re-tool:hover{ transform: translateY(-1px); box-shadow:0 14px 26px rgba(0,0,0,.08); }
.re-tool.active{ outline:3px solid rgba(37,99,235,.18); border-color: rgba(37,99,235,.30); }
.re-ico{ font-size:22px; }
.re-txt{ font-size:.78rem; font-weight:900; text-align:center; color: rgba(15,23,42,.82); line-height:1.1; }

.re-drawer{
  width: 420px;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  height: fit-content;
  position: sticky;
  top: 84px;
  align-self: start;
  overflow:hidden;
}
@media (max-width: 1200px){ .re-drawer{ width: 360px; } }
@media (max-width: 980px){
  .re-rail{ position: static; width:100%; flex-direction:row; }
  .re-tool{ flex:1; }
  .re-drawer{ position: static; width:100%; }
}
.re-dhead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding: .85rem 1rem;
  border-bottom:1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,.02));
}
.re-panel{ padding: 1rem; }
.re-field{ margin-top: .9rem; }
.re-field .lbl{ font-weight:950; margin-bottom:.35rem; }
.color-row{ display:flex; flex-wrap:wrap; gap:.45rem; }
.color-dot{
  width: 28px; height: 28px;
  border-radius:999px;
  border:2px solid rgba(15,23,42,.14);
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,.06);
  position:relative;
}
.color-dot.active{ outline:3px solid rgba(37,99,235,.18); border-color: rgba(37,99,235,.35); }
.color-dot.rainbow{
  background: conic-gradient(#ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ef4444);
}

.sec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.sec-btn{
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.02);
  border-radius:16px;
  padding:.75rem .8rem;
  font-weight:950;
  cursor:pointer;
}
.sec-btn:hover{ background: rgba(15,23,42,.05); }

/* Better template thumbnails (closer to your screenshot) */
.tpl-thumb{
  height: 155px;
  background:#fff;
}
.tpl-thumb:before{
  inset: 12px;
  border-radius:12px;
  background:
    linear-gradient(90deg, rgba(37,99,235,.10) 0 34%, rgba(255,255,255,1) 34% 100%);
}
.tpl-thumb:after{
  content:"";
  position:absolute;
  left: 28px; top: 30px;
  width: 96px; height: 10px;
  background: rgba(15,23,42,.14);
  border-radius:999px;
  box-shadow:
    0 18px 0 rgba(15,23,42,.10),
    0 36px 0 rgba(15,23,42,.08),
    140px 0 0 rgba(15,23,42,.12),
    140px 18px 0 rgba(15,23,42,.10),
    140px 36px 0 rgba(15,23,42,.08),
    140px 54px 0 rgba(15,23,42,.07);
  opacity:.85;
}

/* Design variables */
.resume-preview{
  --pv-font: 12.8px;
  --pv-space: 14px;
  font-size: var(--pv-font);
}
.resume-preview .rp-section{ margin-top: var(--pv-space); }
.resume-preview.compact{ --pv-space: 10px; }



/* Phase 2D.1: Resume Studio polish (Zety-like form) */
.rw-form{
  padding: 1.35rem 1.35rem 1.1rem;
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
}
.rw-step label{
  display:block;
  font-weight: 950;
  letter-spacing: .01em;
  margin: .9rem 0 .35rem;
  color: rgba(15,23,42,.88);
}
.rw-step label:first-child{ margin-top: 0; }
.rw-step input,
.rw-step textarea,
.rw-step select{
  width:100%;
  height: 46px;
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 14px;
  padding: 0 .9rem;
  font-size: 1rem;
  background: #fff;
  outline: none;
  box-shadow: 0 8px 18px rgba(2,6,23,.04);
}
.rw-step textarea{
  height: 120px;
  padding: .75rem .9rem;
  resize: vertical;
}
.rw-step input:focus,
.rw-step textarea:focus,
.rw-step select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14), 0 14px 30px rgba(2,6,23,.06);
}
.rw-row2{ gap: 1rem; }
.rw-row3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:1rem;
}
@media (max-width: 980px){
  .rw-row2{ grid-template-columns:1fr; }
  .rw-row3{ grid-template-columns:1fr; }
}

/* Make nav feel premium + sticky */
.rw-nav{
  position: sticky;
  bottom: 0;
  padding-top: 1rem;
  padding-bottom: .2rem;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85) 30%, rgba(255,255,255,1));
  backdrop-filter: blur(6px);
}
#rwNext.btn-primary{
  padding: .75rem 1.2rem;
  border-radius: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(37,99,235,.28);
}
#rwPrev.btn-outline{
  padding: .75rem 1.1rem;
  border-radius: 14px;
  font-weight: 900;
}

/* Photo area + buttons */
.rw-photo-wrap{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  align-items:start;
  margin-top: 1rem;
}
@media (max-width: 980px){ .rw-photo-wrap{ grid-template-columns:1fr; } }

.rw-photo{
  width: 160px;
  height: 160px;
  border-radius: 18px;
  border: 1px dashed rgba(15,23,42,.22);
  background: rgba(15,23,42,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.rw-photo img{ width:100%; height:100%; object-fit:cover; }

.rw-btnrow{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem; }
.rw-btnrow .btn-outline, .rw-btnrow .btn-primary{
  border-radius: 14px;
  padding: .65rem 1rem;
  font-weight: 900;
}

/* Preview card alignment */
.rw-preview{
  position: sticky;
  top: 84px;
  align-self: start;
}
.rw-tip{
  font-size: .95rem;
  color: rgba(15,23,42,.72);
}

/* Option 1: Single-view navigation */
.panel{ display:none; }
.panel.active{ display:block; }

/* Landing hero */
.hero{ display:grid; grid-template-columns: 1.2fr .8fr; gap:1.2rem; align-items:center; margin-top:.6rem; }
@media (max-width: 980px){ .hero{ grid-template-columns:1fr; } }
.kicker{ font-weight:950; letter-spacing:.04em; color:rgba(37,99,235,.95); }
.hero-title{ font-size: clamp(2rem, 3.6vw, 3rem); line-height:1.06; margin:.35rem 0; font-weight:950; }
.hero-sub{ font-size:1.05rem; color:rgba(15,23,42,.76); margin:.45rem 0 1.1rem; max-width: 56ch; }
.hero-cta{ display:flex; gap:.7rem; flex-wrap:wrap; }
.trust-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem; }

.hero-card{ padding:1.05rem; border-radius:22px; }
.hc-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.hc-badge{ font-weight:950; font-size:.78rem; padding:.25rem .6rem; border-radius:999px; background:rgba(37,99,235,.10); color:rgba(37,99,235,.95); border:1px solid rgba(37,99,235,.20); }
.hc-title{ font-weight:950; }
.hc-body{ margin-top:.9rem; }
.hc-line{ height:10px; border-radius:999px; background:rgba(15,23,42,.08); margin:.55rem 0; }
.hc-line.short{ width: 60%; }
.hc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin:.7rem 0; }
.hc-chip{ padding:.45rem .55rem; border:1px solid rgba(15,23,42,.10); border-radius:14px; font-weight:900; background:rgba(15,23,42,.02); }

nav a.active, .navlink.active{ color: rgba(37,99,235,.95); }

/* Home report preview card */
.home-preview{ margin-top: 1.2rem; }
.home-preview-head{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; margin: .4rem 0 .8rem; flex-wrap:wrap; }
.hp-title{ margin:0; font-weight:950; font-size:1.35rem; }
.hp-sub{ margin:0; color: rgba(15,23,42,.70); max-width: 72ch; }

.reportCard{ padding: 1rem; border-radius: 22px; max-width: 560px; }
.rc-top{ display:flex; justify-content:space-between; align-items:center; gap:.7rem; margin-bottom:.8rem; }
.pill{ display:inline-flex; align-items:center; padding:.32rem .62rem; border-radius:999px; font-weight:900; font-size:.78rem; border:1px solid rgba(15,23,42,.10); background: rgba(15,23,42,.02); }
.pill-blue{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.20); color: rgba(37,99,235,.95); }
.pill-green{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.22); color: rgba(22,163,74,.95); }

.rc-role{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:.85rem .75rem; border:1px solid rgba(15,23,42,.08); border-radius: 18px; background: rgba(255,255,255,.8); }
.rc-role + .rc-role{ margin-top: .7rem; }
.rc-left{ min-width:0; }
.rc-role-title{ font-size:1.15rem; font-weight:950; margin:0; }
.rc-why{ color: rgba(15,23,42,.70); font-weight:650; margin-top:.2rem; }
.rc-tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.55rem; }
.tag{ display:inline-flex; padding:.28rem .55rem; border-radius:999px; border:1px solid rgba(15,23,42,.12); background: rgba(15,23,42,.02); font-weight:850; font-size:.78rem; }
.rc-score{ font-weight:950; font-size:1.2rem; color: rgba(37,99,235,.95); white-space:nowrap; }

.rc-divider{ height: 10px; }
.rc-actions{ display:flex; gap:.7rem; justify-content:center; margin-top: .9rem; }
.btn-disabled{ opacity:.55; cursor:not-allowed; box-shadow:none !important; pointer-events:none; }

/* Resume Studio v2 (separate page) */
.studio-page{ background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(255,255,255,1) 38%); }
.studio-topbar{
  position: sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding: .85rem 1.1rem;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.st-left{ display:flex; align-items:center; gap:.85rem; }
.st-back{ text-decoration:none; font-weight:950; padding:.45rem .65rem; border-radius:14px; border:1px solid rgba(15,23,42,.10); color: rgba(15,23,42,.86); background: rgba(255,255,255,.9); }
.st-back:hover{ background: rgba(15,23,42,.03); }
.st-name{ font-weight:950; }
.st-right{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.st-meter{ border:1px solid rgba(15,23,42,.10); border-radius:16px; padding:.5rem .65rem; background:#fff; min-width: 170px; }
.st-meter-label{ font-weight:900; font-size:.78rem; color: rgba(15,23,42,.62); }
.st-meter-val{ font-weight:950; margin-top:.15rem; }
.st-meter-bar{ height:8px; border-radius:999px; background: rgba(15,23,42,.08); overflow:hidden; margin-top:.35rem; }
.st-meter-bar span{ display:block; height:100%; width:0%; background: rgba(37,99,235,.85); border-radius:999px; }

.studio-wrap{
  display:grid;
  grid-template-columns: 260px 1fr 420px;
  gap: 1rem;
  padding: 1rem 1.1rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1100px){
  .studio-wrap{ grid-template-columns: 220px 1fr; }
  .studio-preview{ grid-column: 1 / -1; }
}
@media (max-width: 820px){
  .studio-wrap{ grid-template-columns: 1fr; }
  .studio-steps{ position: static !important; }
}

.studio-steps{
  border:1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  background:#fff;
  padding: 1rem;
  height: fit-content;
  position: sticky;
  top: 84px;
}
.ss-head{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; margin-bottom:.8rem; }
.ss-list{ display:flex; flex-direction:column; gap:.5rem; }
.ss-item{
  width:100%;
  display:flex; align-items:center; gap:.65rem;
  padding:.65rem .7rem;
  border-radius: 16px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
  cursor:pointer;
  font-weight:900;
}
.ss-item:hover{ background: rgba(15,23,42,.04); }
.ss-item.active{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.25); }
.ss-item.done .ss-num{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.25); }
.ss-num{ width:28px; height:28px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(15,23,42,.12); background:#fff; font-weight:950; }
.ss-text{ text-align:left; }
.ss-foot{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top: 1rem; }

.studio-form{
  border:1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 520px;
}
.sf-head{ padding: 1rem 1rem .4rem; border-bottom:1px solid rgba(15,23,42,.08); background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(255,255,255,1)); }
.sf-kicker{ font-weight:950; color: rgba(37,99,235,.92); }
.sf-title{ margin:.25rem 0 .2rem; font-weight:950; }
.sf-help{ margin:0 0 .6rem; color: rgba(15,23,42,.70); max-width: 72ch; }
.sf-body{ padding: 1rem; }
.form-card{ border:1px solid rgba(15,23,42,.08); border-radius: 18px; background: rgba(15,23,42,.02); padding: 1rem; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 640px){ .grid-2{ grid-template-columns: 1fr; } }
.f-label{ display:block; font-weight:900; margin:.2rem 0 .35rem; }
.f-input, .f-textarea{
  width:100%;
  border:1px solid rgba(15,23,42,.14);
  border-radius: 16px;
  padding: .75rem .85rem;
  outline: none;
  background:#fff;
}
.f-input:focus, .f-textarea:focus{ border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 4px rgba(37,99,235,.10); }
.hint{ margin-top:.75rem; color: rgba(15,23,42,.70); font-weight:650; }

.sf-nav{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:.7rem;
  padding: .9rem 1rem;
  border-top: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.92);
  position: sticky;
  bottom: 0;
}

.studio-preview{
  border:1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  background:#fff;
  padding: 1rem;
  height: fit-content;
  position: sticky;
  top: 84px;
}
.sp-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:.75rem; }
.sp-paper{
  background: linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,.00));
  border:1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: .9rem;
}
.resume-preview{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 1rem;
  font-size: 12.6px;
  color: rgba(15,23,42,.92);
}
.rp-head{ display:flex; justify-content:space-between; gap:1rem; }
.rp-name{ font-weight:950; font-size: 1.25rem; line-height:1.1; }
.rp-headline{ color: rgba(15,23,42,.70); font-weight:700; margin-top:.15rem; }
.rp-contact{ text-align:right; color: rgba(15,23,42,.72); font-weight:650; }
.rp-section{ margin-top: .85rem; }
.rp-sec-title{ font-weight:950; color: rgba(37,99,235,.92); margin-bottom:.35rem; text-transform: uppercase; letter-spacing:.05em; font-size:.78rem; }
.rp-row{ display:flex; justify-content:space-between; gap:1rem; }
.rp-strong{ font-weight:900; }
.rp-muted{ color: rgba(15,23,42,.62); font-weight:650; }
.rp-bullets{ margin:.45rem 0 0 1.05rem; padding:0; }
.rp-bullets li{ margin:.2rem 0; }
.rp-skill-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:.8rem; }
.rp-skill-h{ font-weight:950; margin-bottom:.2rem; }

/* Drawer */
.drawer{ position:fixed; inset:0; display:grid; place-items:stretch; z-index:80; }
.drawer[aria-hidden="true"]{ display:none; }
.drawer-backdrop{ position:absolute; inset:0; background: rgba(2,6,23,.55); }
.drawer-card{
  position:relative;
  margin-left:auto;
  width:min(520px, 100%);
  height:100%;
  background:#fff;
  border-left:1px solid rgba(15,23,42,.10);
  padding:1rem;
  overflow:auto;
}
.drawer-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.drawer-body{ margin-top: .9rem; }
.tplCard{ width:100%; text-align:left; border:1px solid rgba(15,23,42,.10); border-radius:18px; padding:.8rem; background:#fff; cursor:pointer; display:grid; grid-template-columns: 140px 1fr; gap:.9rem; align-items:center; }
.tplCard:hover{ background: rgba(15,23,42,.02); }
.tpl-thumb{ height: 120px; border:1px solid rgba(15,23,42,.10); border-radius:14px; background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(15,23,42,.02)); position:relative; overflow:hidden; }
.tpl-thumb:after{
  content:"";
  position:absolute; inset: 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(37,99,235,.12) 0 34%, #fff 34% 100%);
}
.tpl-name{ font-weight:950; }
.tpl-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.35rem; }

/* Print: only the preview page */



/* ===== Multi-entry cards (Resume Studio) ===== */
.mc-list{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.mc-card{ border:1px solid var(--line); border-radius:16px; padding:14px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.mc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.mc-title{ font-weight:800; font-size:14px; }
.mc-actions{ display:flex; gap:8px; align-items:center; }
.mini-btn{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 12px; font-weight:700; font-size:12px; cursor:pointer; }
.mini-btn:hover{ background:rgba(59,130,246,.06); border-color: rgba(59,130,246,.35); }

.field{ margin-bottom: .8rem; }

.form-card .grid-2{ margin-bottom:.8rem; }


/* Ensure header actions are always clickable */
.studio-header, .studio-header *{ pointer-events:auto; }


/* ===== Resume Studio Template Picker ===== */
.hidden{display:none!important;}

.tpl-picker{
  display:none;
  flex-direction:column;
  gap:14px;
  width:100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 18px 10px;
}
.tpl-picker.is-active{display:flex;}

.tplp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.tplp-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.tpl-tab{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}
.tpl-tab[aria-selected="true"]{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.tpl-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding-top: 6px;
}
.tpl-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tpl-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  border-color: rgba(37,99,235,.25);
}
.tpl-thumb{
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(37,99,235,.03));
  height: 140px;
  position:relative;
  overflow:hidden;
}
.tpl-lines{position:absolute;left:16px;top:16px;right:16px;display:flex;flex-direction:column;gap:10px;opacity:.85}
.tpl-lines span{height:10px;border-radius:999px;background:rgba(15,23,42,.18)}
.tpl-lines span:nth-child(2){width:72%}
.tpl-lines span:nth-child(3){width:88%}
.tpl-lines span:nth-child(4){width:62%}

.tpl-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.tpl-name{font-weight:900;}
.tpl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tpl-tag{
  font-size:12px;
  font-weight:800;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(248,250,252,.9);
}
.tplp-foot{display:flex;justify-content:flex-end;padding:6px 0 10px;}


/* CareerPath final MVP tweaks */
.rp-section .rp-row + .rp-row{ margin-top:.45rem; }



/* ===== Final fixes: hide report action buttons without breaking JS ===== */
.match-card .card-actions{ display:none !important; }

/* ===== Resume Studio one-page + ATS preview ===== */
.one-page-studio{ grid-template-columns:1.05fr .95fr !important; align-items:start; }
.one-page-studio .studio-form{ max-width:none; }
.ats-resume{
  width:700px;
  max-width:100%;
  margin:0 auto;
  padding:34px 38px;
  background:#fff;
  color:#000;
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.4;
  min-height:900px;
  border:none !important;
  box-shadow:none !important;
}
.ats-name{ font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin:0; }
.ats-contact{ font-size:12px; margin-top:4px; color:#000; }
.ats-section{ margin-top:14px; }
.ats-section h4{
  font-size:13px;
  text-transform:uppercase;
  margin:0 0 5px 0;
  padding:0;
  border:none !important;
  color:#000;
  letter-spacing:.06em;
}
.ats-section p,.ats-section div{ font-size:12px; margin:2px 0; color:#000; }
.ats-section ul{ margin:3px 0 0 18px; padding:0; }
.ats-section li{ font-size:12px; margin:2px 0; color:#000; }



/* ===== RoleGuide premium polish ===== */
:root{
  --primary:#4F46E5;
  --primary-dark:#4338CA;
  --primary-soft:#EEF2FF;
  --ink:#111827;
  --muted2:#6B7280;
  --surface:#F9FAFB;
}

html, body{
  min-height:100%;
  height:auto !important;
  overflow-y:auto !important;
  overflow-x:hidden;
}

body{
  background:linear-gradient(180deg,#ffffff 0%,#F9FAFB 100%);
  color:var(--ink);
}

.panel,
.panel.active,
.panel-inner{
  height:auto !important;
  min-height:auto !important;
  overflow:visible !important;
}

.brand h2{
  color:var(--ink);
  letter-spacing:-.03em;
}

.brand-by{
  display:block;
  font-size:.68rem;
  color:var(--primary);
  font-weight:800;
  letter-spacing:0;
  margin-top:1px;
}

.kicker{
  color:var(--primary);
  font-weight:900;
}

.hero-title{
  font-size:46px;
  line-height:1.12;
  letter-spacing:-.045em;
}

.hero-title span{
  color:var(--primary);
}

.hero-sub{
  max-width:560px;
  color:var(--muted2);
  font-size:1.04rem;
}

.flow-line{
  margin-top:14px;
  color:var(--ink);
  font-weight:800;
  font-size:.92rem;
}

.flow-line span{
  color:var(--muted2);
  font-weight:700;
}

.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)) !important;
  box-shadow:0 14px 30px rgba(79,70,229,.22) !important;
}

.btn-primary:hover{
  box-shadow:0 18px 36px rgba(79,70,229,.28) !important;
}

.navlink.active,
.navlink:hover{
  color:var(--primary) !important;
  background:var(--primary-soft) !important;
}

.card{
  border:1px solid rgba(17,24,39,.08) !important;
  box-shadow:0 18px 45px rgba(17,24,39,.07) !important;
}

.pill,
.badge,
.miniTag{
  background:var(--primary-soft) !important;
  color:var(--primary-dark) !important;
  border-color:rgba(79,70,229,.14) !important;
}

.section-muted{
  font-size:.85rem;
  color:var(--primary);
  background:var(--primary-soft);
  padding:.22rem .55rem;
  border-radius:999px;
  vertical-align:middle;
}

.prep-request{
  padding:1.25rem;
}

.match-card .card-actions{
  display:none !important;
}

/* ===== Scroll fix ===== */
.studio-page,
.studio-wrap{
  height:auto !important;
  min-height:auto !important;
  overflow-y:visible !important;
}

/* ===== Resume Studio ATS preview polish ===== */
.one-page-studio{
  grid-template-columns:1.05fr .95fr !important;
  align-items:start;
}
.one-page-studio .studio-form{
  max-width:none;
}
.ats-resume{
  width:700px;
  max-width:100%;
  margin:0 auto;
  padding:34px 38px;
  background:#fff;
  color:#000;
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.4;
  min-height:900px;
  border:none !important;
  box-shadow:none !important;
}
.ats-name{
  font-size:22px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0;
}
.ats-contact{
  font-size:12px;
  margin-top:4px;
  color:#000;
}
.ats-section{
  margin-top:14px;
}
.ats-section h4{
  font-size:13px;
  text-transform:uppercase;
  margin:0 0 5px 0;
  padding:0;
  border:none !important;
  color:#000;
  letter-spacing:.06em;
}
.ats-section p,
.ats-section div{
  font-size:12px;
  margin:2px 0;
  color:#000;
}
.ats-section ul{
  margin:3px 0 0 18px;
  padding:0;
}
.ats-section li{
  font-size:12px;
  margin:2px 0;
  color:#000;
}




/* ===== Premium Animation Pack: subtle, fast, trust-friendly ===== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

body {
  animation: rgFadeIn .35s ease-out both;
}

@keyframes rgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.navbar {
  animation: rgSlideDown .45s ease-out both;
}

@keyframes rgSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-left,
.panel-head,
.assessment-card,
.report-summary,
.report-matches,
.counseling-card,
.prep-card,
.studio-form,
.studio-preview {
  animation: rgLiftIn .45s ease-out both;
}

.hero-right,
.home-preview {
  animation: rgLiftIn .55s ease-out both;
}

@keyframes rgLiftIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.card,
.match-card,
.option,
.start-choice,
.template,
.form-card,
.prep-card,
.counseling-card,
.hero-card,
.reportCard {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.card:hover,
.match-card:hover,
.form-card:hover,
.hero-card:hover,
.reportCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(17,24,39,.09) !important;
}

.option:hover,
.start-choice:hover,
.template:hover {
  transform: translateY(-2px);
}

.btn-primary,
.btn-outline,
.navlink,
.iconbtn,
button {
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease;
}

.btn-primary:hover,
.btn-outline:hover,
button:hover {
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-outline:active,
button:active {
  transform: translateY(0);
}

.progressfill,
#progressFill,
#overallBar,
#rwBarFill,
#strengthBar {
  transition: width .35s ease;
}

.option.selected {
  animation: rgSelectPulse .28s ease-out both;
}

@keyframes rgSelectPulse {
  0% { transform: scale(.995); }
  60% { transform: scale(1.006); }
  100% { transform: scale(1); }
}

.toast {
  animation: rgToastIn .25s ease-out both;
}

@keyframes rgToastIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.resume-preview,
.ats-resume {
  animation: rgPreviewIn .35s ease-out both;
}

@keyframes rgPreviewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

input:focus,
textarea:focus,
select:focus {
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* Slight stagger on hero chips */
.trust-row .miniTag,
.rc-tags .tag,
.pills .tag {
  animation: rgChipIn .35s ease-out both;
}

.trust-row .miniTag:nth-child(1),
.rc-tags .tag:nth-child(1),
.pills .tag:nth-child(1) { animation-delay: .03s; }

.trust-row .miniTag:nth-child(2),
.rc-tags .tag:nth-child(2),
.pills .tag:nth-child(2) { animation-delay: .06s; }

.trust-row .miniTag:nth-child(3),
.rc-tags .tag:nth-child(3),
.pills .tag:nth-child(3) { animation-delay: .09s; }

@keyframes rgChipIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ===== Premium Animation Pack V2: visible but still clean ===== */

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  will-change: transform, opacity;
}

.reveal {
  transform: translateY(26px);
}

.reveal-left {
  transform: translateX(-34px);
}

.reveal-right {
  transform: translateX(34px);
}

.reveal-scale {
  transform: translateY(18px) scale(.97);
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: translate(0,0) scale(1);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

.hero-left {
  animation: heroTextLift .85s cubic-bezier(.2,.8,.2,1) both;
}

.hero-right {
  animation: heroCardSlide .9s cubic-bezier(.2,.8,.2,1) .08s both;
}

@keyframes heroTextLift {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroCardSlide {
  from { opacity: 0; transform: translateX(46px) translateY(14px); }
  to { opacity: 1; transform: translateX(0) translateY(0); }
}

.hero-title span {
  display: inline-block;
  animation: accentPop .75s cubic-bezier(.2,.8,.2,1) .32s both;
}

@keyframes accentPop {
  from { opacity: .5; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-card,
.reportCard,
.card {
  transform-style: preserve-3d;
}

.hero-card:hover,
.reportCard:hover,
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 70px rgba(17,24,39,.12) !important;
}

.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
}

.btn-primary:hover::after {
  animation: btnShine .65s ease;
}

@keyframes btnShine {
  from { left: -120%; }
  to { left: 140%; }
}

.btn-primary:hover {
  box-shadow: 0 18px 42px rgba(79,70,229,.34) !important;
}

.option {
  animation: optionIn .35s ease both;
}

.option:nth-child(1) { animation-delay: .02s; }
.option:nth-child(2) { animation-delay: .06s; }
.option:nth-child(3) { animation-delay: .10s; }
.option:nth-child(4) { animation-delay: .14s; }

@keyframes optionIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.match-card {
  animation: matchIn .45s ease both;
}

.match-card:nth-child(1) { animation-delay: .03s; }
.match-card:nth-child(2) { animation-delay: .09s; }
.match-card:nth-child(3) { animation-delay: .15s; }

@keyframes matchIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.progressfill {
  background-size: 200% 100%;
  animation: progressGlow 2.8s linear infinite;
}

@keyframes progressGlow {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
  100% { filter: brightness(1); }
}

.navlink {
  position: relative;
}

.navlink::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:0;
  height:2px;
  background:var(--primary);
  border-radius:999px;
  transform:translateX(-50%);
  transition:width .22s ease;
}

.navlink:hover::after,
.navlink.active::after {
  width:42%;
}

.form-card,
.prep-card,
.counseling-card {
  animation: softRise .45s ease both;
}

@keyframes softRise {
  from { opacity:0; transform:translateY(18px); }
  to { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal.is-visible,
  .reveal-left.is-visible,
  .reveal-right.is-visible,
  .reveal-scale.is-visible,
  .hero-left,
  .hero-right,
  .option,
  .match-card,
  .form-card,
  .prep-card,
  .counseling-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ===== Visible Premium Animations V3 ===== */

/* Hero text clearly enters */
.hero-left {
  animation: rgHeroTextVisible .9s cubic-bezier(.18,.85,.25,1) both !important;
}

@keyframes rgHeroTextVisible {
  from {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Preview card floats gently so animation is always visible */
.hero-card,
.reportCard {
  animation: rgFloatCard 4.5s ease-in-out infinite !important;
}

@keyframes rgFloatCard {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Preview grey bars shimmer */
.hc-line,
.reportCard .rc-divider,
.hero-card .hc-line {
  position: relative;
  overflow: hidden;
}

.hc-line::after,
.hero-card .hc-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation: rgShimmer 2.2s infinite;
}

@keyframes rgShimmer {
  0% { left: -80%; }
  100% { left: 120%; }
}

/* Main CTA visible glow */
#goAssessment,
.btn-primary {
  animation: rgButtonGlow 2.6s ease-in-out infinite;
}

@keyframes rgButtonGlow {
  0%, 100% {
    box-shadow: 0 12px 26px rgba(79,70,229,.24) !important;
  }
  50% {
    box-shadow: 0 18px 45px rgba(79,70,229,.45) !important;
  }
}

/* Chips enter one by one */
.trust-row .miniTag {
  opacity: 0;
  animation: rgChipVisible .55s ease forwards;
}

.trust-row .miniTag:nth-child(1){ animation-delay:.35s; }
.trust-row .miniTag:nth-child(2){ animation-delay:.5s; }
.trust-row .miniTag:nth-child(3){ animation-delay:.65s; }

@keyframes rgChipVisible {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Cards reveal more clearly on scroll */
.home-preview,
.assessment-card,
.report-summary,
.report-matches,
.prep-card,
.counseling-card {
  animation: rgSectionVisible .75s cubic-bezier(.18,.85,.25,1) both;
}

@keyframes rgSectionVisible {
  from {
    opacity: 0;
    transform: translateY(34px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Assessment options animate clearly */
.option {
  animation: rgOptionVisible .42s ease both !important;
}

.option:nth-child(1){ animation-delay:.03s; }
.option:nth-child(2){ animation-delay:.10s; }
.option:nth-child(3){ animation-delay:.17s; }
.option:nth-child(4){ animation-delay:.24s; }

@keyframes rgOptionVisible {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Nav hover more obvious but clean */
.navlink:hover {
  transform: translateY(-2px);
}

/* Button click feedback */
button:active,
.btn-primary:active,
.btn-outline:active {
  transform: scale(.97) !important;
}

/* Resume preview subtle float */
.studio-preview {
  animation: rgPreviewFloat 4.8s ease-in-out infinite;
}

@keyframes rgPreviewFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}


/* ===== Premium spacing fix: cleaner, less congested homepage ===== */

/* Main hero spacing */
.hero {
  padding-top: 115px !important;
  padding-bottom: 95px !important;
  gap: 5rem !important;
  align-items: center !important;
}

/* Give left content breathing room */
.hero-left {
  max-width: 620px;
}

.hero-left > * {
  margin-bottom: 20px;
}

.hero-title {
  margin-bottom: 22px !important;
}

.hero-sub {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  max-width: 560px !important;
  line-height: 1.65 !important;
}

/* Separate flow line, buttons and tags */
.flow-line {
  margin-top: 20px !important;
  margin-bottom: 16px !important;
  line-height: 1.5 !important;
}

.hero-cta,
.hero-actions {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
  gap: 1rem !important;
}

.trust-row {
  margin-top: 22px !important;
  gap: .75rem !important;
}

/* Make right card feel less cramped */
.hero-right {
  display: flex;
  justify-content: center;
}

.hero-card {
  padding: 28px !important;
  max-width: 440px !important;
}

/* Push preview report lower so homepage breathes */
.home-preview {
  margin-top: 52px !important;
}

.home-preview-head {
  margin-bottom: 28px !important;
}

.reportCard {
  padding: 28px !important;
}

/* Section spacing */
.panel {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.panel-head {
  margin-bottom: 34px !important;
}

.panel-head h2 {
  margin-bottom: 12px !important;
}

/* Card spacing */
.card,
.match-card,
.prep-card,
.counseling-card,
.assessment-card,
.report-summary,
.report-matches {
  padding: 26px !important;
}

/* Assessment breathing */
.question-wrap {
  margin-top: 30px !important;
}

.q-options {
  gap: 1rem !important;
}

.option {
  padding: 1.15rem 1.25rem !important;
}

/* Report spacing */
.report-grid {
  gap: 2rem !important;
}

.matches {
  gap: 1.15rem !important;
}

/* Nav breathing */
.navbar {
  padding: 1.05rem 1.7rem !important;
}

.navlinks {
  gap: 1.25rem !important;
}

.navactions {
  gap: .85rem !important;
}

/* Resume Studio spacing */
.studio-wrap {
  gap: 2rem !important;
  padding-top: 42px !important;
}

.form-card {
  margin-bottom: 1.25rem !important;
  padding: 24px !important;
}

.sf-body {
  display: block;
}

/* Mobile/tablet safety */
@media (max-width: 900px) {
  .hero {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
    gap: 2.5rem !important;
  }

  .hero-left {
    max-width: 100%;
  }

  .hero-title {
    font-size: 38px !important;
  }

  .panel {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}


/* ===== Front page cleanup: no preview card, balanced hero ===== */
.home-preview,
.hero-right {
  display: none !important;
}

.hero {
  display: block !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 120px 32px 110px !important;
}

.hero-left {
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.hero-title {
  font-size: 56px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;
  margin-bottom: 26px !important;
}

.hero-sub {
  max-width: 650px !important;
  margin: 0 auto 22px !important;
  line-height: 1.7 !important;
}

.flow-line {
  margin: 22px auto 18px !important;
  text-align: center !important;
}

.hero-cta {
  justify-content: center !important;
  margin-top: 24px !important;
  gap: 1rem !important;
}

.trust-row {
  justify-content: center !important;
  margin-top: 26px !important;
}

/* remove broken skeleton/line at bottom of hero area */
.hc-line,
.hc-grid,
.hc-body,
.hc-foot,
.rc-divider {
  display: none;
}

/* ===== Compact report layout: summary first, comparison cards compact ===== */
.report-grid {
  grid-template-columns: 0.9fr 1.1fr !important;
  gap: 2rem !important;
  align-items: start !important;
}

.report-matches {
  padding: 24px !important;
}

.matches {
  display: grid !important;
  gap: 0.85rem !important;
}

.match-card {
  padding: 16px 18px !important;
  border-radius: 16px !important;
}

/* Make career matches readable without long scrolling */
.match-card .why,
.match-card .pills,
.match-card .card-actions,
.match-card .fit-insights,
.match-card .insight-grid,
.match-card .ideal-box,
.match-card .skill-box,
.match-card ul,
.match-card .match-body {
  display: none !important;
}

.match-top {
  align-items: center !important;
}

.match-title {
  font-size: 1rem !important;
}

.match-score {
  font-size: 1.05rem !important;
}

.meta-row {
  margin-top: 0.45rem !important;
}

.meta-row .tag {
  font-size: 0.72rem !important;
  padding: 0.22rem 0.48rem !important;
}

/* Keep only top 3 matches visible for a cleaner decision screen */
.matches .match-card:nth-child(n+4) {
  display: none !important;
}

/* Report summary spacing */
.report-summary {
  padding: 24px !important;
}

.scoreline {
  margin-top: 0.8rem !important;
}

.two-col {
  gap: 1rem !important;
}

.card.soft {
  padding: 1rem !important;
}

/* Responsive */
@media (max-width: 900px) {
  .hero {
    padding: 80px 24px 70px !important;
  }
  .hero-title {
    font-size: 40px !important;
  }
  .report-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== Final main screen + report layout fix ===== */

/* Main screen: balanced, not empty, not congested */
.hero {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 82px 32px 72px !important;
  display: block !important;
}

.hero-left {
  max-width: 820px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.hero-title {
  font-size: 50px !important;
  line-height: 1.08 !important;
  margin-bottom: 20px !important;
}

.hero-sub {
  max-width: 650px !important;
  margin: 0 auto 18px !important;
  line-height: 1.6 !important;
}

.flow-line {
  margin: 18px auto 16px !important;
}

.hero-cta {
  justify-content: center !important;
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

.trust-row {
  justify-content: center !important;
  margin-top: 20px !important;
}

.home-preview,
.hero-right {
  display: none !important;
}

/* Bring next content closer */
#home {
  padding-bottom: 40px !important;
}

/* Report: overall summary first, career matches below */
.report-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.6rem !important;
  max-width: 1050px !important;
  margin: 1.2rem auto 0 !important;
}

.report-summary {
  width: 100% !important;
  padding: 28px !important;
}

.report-matches {
  width: 100% !important;
  padding: 28px !important;
}

.matches-head {
  margin-bottom: 1rem !important;
}

/* Career matches: compact comparison view */
.matches {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.match-card {
  padding: 18px !important;
  min-height: 150px !important;
  border-radius: 18px !important;
}

.match-card.primary {
  box-shadow: 0 18px 42px rgba(34,197,94,.08) !important;
}

.match-top {
  align-items: flex-start !important;
  gap: .7rem !important;
}

.match-title {
  font-size: 1rem !important;
  line-height: 1.25 !important;
}

.match-score {
  font-size: 1.05rem !important;
  white-space: nowrap !important;
}

.meta-row {
  margin-top: .55rem !important;
  gap: .35rem !important;
}

.meta-row .tag {
  font-size: .7rem !important;
  padding: .22rem .46rem !important;
}

/* Hide long details in the first comparison view */
.match-card .why,
.match-card .pills,
.match-card .card-actions,
.match-card .fit-insights,
.match-card .insight-grid,
.match-card .ideal-box,
.match-card .skill-box,
.match-card ul,
.match-card .match-body {
  display: none !important;
}

/* If your generated markup has inner insight cards, hide them too */
.match-card .two-col,
.match-card .soft,
.match-card .next-skill,
.match-card .ideal-if {
  display: none !important;
}

/* Only show top 3 matches */
.matches .match-card:nth-child(n+4) {
  display: none !important;
}

/* Clean up the backup path spacing */
.backup {
  max-width: 1050px !important;
  margin: 1.4rem auto 0 !important;
}

/* Overall summary inside card */
.scoreline {
  margin-top: 1rem !important;
}

.two-col {
  margin-top: 1.3rem !important;
}

/* Responsive */
@media (max-width: 1000px) {
  .matches {
    grid-template-columns: 1fr !important;
  }

  .hero-title {
    font-size: 42px !important;
  }
}

@media (max-width: 700px) {
  .hero {
    padding: 62px 22px 54px !important;
  }

  .hero-title {
    font-size: 34px !important;
  }

  .hero-cta {
    flex-direction: column !important;
    align-items: center !important;
  }

  .report-summary,
  .report-matches {
    padding: 20px !important;
  }
}


/* ===== Main screen spacing corrected ===== */

/* Remove excessive blank space above hero */
#home.panel {
  padding-top: 0 !important;
  padding-bottom: 30px !important;
}

#home .panel-inner {
  max-width: 1200px !important;
}

/* Bring hero up and reduce dead height */
.hero {
  padding: 46px 32px 54px !important;
  min-height: auto !important;
  margin-top: 0 !important;
}

/* Keep it centered but not floating in empty space */
.hero-left {
  max-width: 780px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Slightly reduce visual heaviness */
.hero-title {
  font-size: 48px !important;
  line-height: 1.08 !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.kicker {
  margin-bottom: 14px !important;
}

.hero-sub {
  margin-bottom: 16px !important;
}

.flow-line {
  margin-top: 16px !important;
  margin-bottom: 14px !important;
}

.hero-cta {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.trust-row {
  margin-top: 18px !important;
}

/* Nav should not create too much vertical dead space */
.navbar {
  min-height: auto !important;
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

/* Bring next section closer */
#assessment.panel,
#results.panel,
#prep.panel,
#counseling.panel {
  padding-top: 58px !important;
}

/* Laptop height adjustment */
@media (min-width: 1000px) {
  .hero {
    padding-top: 52px !important;
    padding-bottom: 60px !important;
  }
}

/* Smaller screens */
@media (max-width: 900px) {
  .hero {
    padding: 42px 24px 48px !important;
  }

  .hero-title {
    font-size: 38px !important;
  }
}


/* ===== Premium UI rebuild: startup-style hero + balanced depth ===== */

/* Rich but controlled background */
body{
  background:
    radial-gradient(circle at 12% 18%, rgba(99,102,241,.13), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(124,58,237,.10), transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
}

/* Keep nav clean and premium */
.navbar{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(15,23,42,.06) !important;
}

/* Premium two-column hero */
#home.panel{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.hero{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:86px 34px 84px !important;
  display:grid !important;
  grid-template-columns:1.08fr .92fr !important;
  align-items:center !important;
  gap:4.25rem !important;
  min-height:auto !important;
}

.hero-left{
  max-width:640px !important;
  margin:0 !important;
  text-align:left !important;
}

.kicker{
  font-size:1rem !important;
  letter-spacing:.01em !important;
  color:#4f46e5 !important;
  margin-bottom:14px !important;
}

.hero-title{
  font-size:56px !important;
  line-height:1.04 !important;
  letter-spacing:-.055em !important;
  margin:0 0 22px 0 !important;
  color:#0f172a !important;
}

.hero-title span{
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

.hero-sub{
  max-width:560px !important;
  margin:0 0 20px 0 !important;
  font-size:1.08rem !important;
  line-height:1.7 !important;
  color:#64748b !important;
}

.flow-line{
  margin:20px 0 18px !important;
  color:#111827 !important;
  font-weight:850 !important;
  font-size:.94rem !important;
}

.flow-line span{
  color:#64748b !important;
  font-weight:750 !important;
}

.hero-cta{
  justify-content:flex-start !important;
  gap:1rem !important;
  margin:22px 0 20px !important;
}

.trust-row{
  justify-content:flex-start !important;
  gap:.7rem !important;
  margin-top:22px !important;
}

/* Reintroduce right visual in a lighter, richer way */
.home-preview{ display:none !important; }

.premium-hero-visual{
  display:grid !important;
  gap:1rem !important;
  position:relative;
}

.premium-hero-visual::before{
  content:"";
  position:absolute;
  inset:-28px;
  background:linear-gradient(135deg,rgba(79,70,229,.13),rgba(124,58,237,.08));
  border-radius:34px;
  filter:blur(2px);
  z-index:0;
}

.mini-card{
  position:relative;
  z-index:1;
  padding:22px 24px;
  border-radius:22px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(99,102,241,.12);
  box-shadow:0 22px 55px rgba(15,23,42,.08);
  backdrop-filter:blur(18px);
}

.mini-card.main{
  padding:28px;
}

.mini-card.soft{
  background:rgba(238,242,255,.82);
}

.mini-label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6366f1;
  font-weight:900;
  margin-bottom:.45rem;
}

.mini-card h4{
  margin:0;
  font-size:1.28rem;
  color:#111827;
  letter-spacing:-.02em;
}

.mini-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(15,23,42,.08);
  color:#64748b;
  font-weight:800;
}

.mini-row strong{
  font-size:2rem;
  color:#4f46e5;
}

/* Premium CTA */
.btn-primary{
  background:linear-gradient(135deg,#4f46e5,#7c3aed) !important;
  border-radius:14px !important;
  box-shadow:0 18px 38px rgba(79,70,229,.26) !important;
}

.btn-outline{
  border-radius:14px !important;
  background:rgba(255,255,255,.78) !important;
}

.miniTag{
  background:rgba(238,242,255,.9) !important;
  color:#4338ca !important;
  border-color:rgba(79,70,229,.18) !important;
}

/* Footer no longer appears immediately under hero as a huge empty block */
.footer{
  margin-top:20px !important;
}

/* Report layout remains: overall first + compact matches */
.report-grid{
  grid-template-columns:1fr !important;
  max-width:1050px !important;
  margin:1.2rem auto 0 !important;
  gap:1.6rem !important;
}

.matches{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:1rem !important;
}

.match-card .why,
.match-card .pills,
.match-card .card-actions,
.match-card .fit-insights,
.match-card .insight-grid,
.match-card ul,
.match-card .two-col,
.match-card .soft{
  display:none !important;
}

.matches .match-card:nth-child(n+4){
  display:none !important;
}

/* Responsive */
@media (max-width: 980px){
  .hero{
    grid-template-columns:1fr !important;
    gap:2rem !important;
    padding:64px 24px 60px !important;
  }
  .hero-left{
    text-align:center !important;
    margin:0 auto !important;
  }
  .hero-cta,.trust-row{
    justify-content:center !important;
  }
  .flow-line{
    text-align:center !important;
  }
  .premium-hero-visual{
    max-width:520px;
    margin:0 auto;
  }
  .hero-title{
    font-size:42px !important;
  }
  .matches{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 640px){
  .hero-title{
    font-size:34px !important;
  }
  .premium-hero-visual{
    display:none !important;
  }
}


/* ===== Clean Premium Report UI ===== */
.report-grid{
  grid-template-columns:1fr !important;
  max-width:1080px !important;
  margin:1.4rem auto 0 !important;
  gap:1.5rem !important;
}

.report-summary,
.report-matches{
  border-radius:28px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(15,23,42,.07) !important;
  box-shadow:0 28px 70px rgba(15,23,42,.08) !important;
  padding:30px !important;
}

.report-matches .matches-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  margin-bottom:1.2rem !important;
}

.report-matches .matches-head .h3{
  font-size:1.35rem !important;
  letter-spacing:-.03em !important;
}

.matches{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:1rem !important;
}

.clean-role-card{
  padding:24px !important;
  border-radius:24px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.06) !important;
  box-shadow:0 16px 40px rgba(15,23,42,.06) !important;
  min-height:220px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

.clean-role-card.primary{
  border-color:rgba(79,70,229,.18) !important;
  box-shadow:0 22px 52px rgba(79,70,229,.12) !important;
}

.clean-role-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}

.clean-role-rank{
  color:#6366f1;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:.55rem;
}

.clean-role-card h4{
  margin:0;
  font-size:1.18rem;
  line-height:1.25;
  letter-spacing:-.035em;
  color:#111827;
}

.clean-role-score{
  color:#4f46e5;
  font-weight:900;
  font-size:1.28rem;
  white-space:nowrap;
}

.clean-role-desc{
  margin:1rem 0 1.2rem;
  color:#64748b;
  font-size:.95rem;
  line-height:1.55;
  font-weight:650;
}

.clean-role-next{
  padding-top:1rem;
  border-top:1px solid rgba(15,23,42,.07);
}

.clean-role-next span{
  display:block;
  color:#94a3b8;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:.35rem;
}

.clean-role-next strong{
  color:#111827;
  font-size:.96rem;
  line-height:1.35;
}

.match-card:not(.clean-role-card) .meta-row,
.match-card:not(.clean-role-card) .why,
.match-card:not(.clean-role-card) .pills,
.match-card:not(.clean-role-card) .card-actions,
.match-card:not(.clean-role-card) .two-col,
.match-card:not(.clean-role-card) .soft,
.match-card:not(.clean-role-card) ul,
.match-card:not(.clean-role-card) .insight-grid{
  display:none !important;
}

.report-summary .badge{
  margin-bottom:.8rem !important;
}

.report-summary .card.soft{
  border-radius:22px !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}

.backup{
  display:none !important;
}

@media (max-width:1000px){
  .matches{
    grid-template-columns:1fr !important;
  }

  .clean-role-card{
    min-height:auto !important;
  }
}


/* ===== Mature premium UI correction: less empty, less kiddish ===== */

/* Remove playful purple wash */
body{
  background:#ffffff !important;
}

/* More serious nav */
.navbar{
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid #e5e7eb !important;
  box-shadow:none !important;
}

.brand h2{
  font-size:1.05rem !important;
  color:#111827 !important;
}

.brand-by{
  font-size:.68rem !important;
  color:#4f46e5 !important;
}

/* Compact, professional hero */
#home.panel{
  padding:0 !important;
  background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%) !important;
}

.hero{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:72px 34px 64px !important;
  display:grid !important;
  grid-template-columns:1.05fr .95fr !important;
  gap:4rem !important;
  align-items:center !important;
}

.hero-left{
  text-align:left !important;
  max-width:640px !important;
  margin:0 !important;
}

.kicker{
  color:#4f46e5 !important;
  font-size:.92rem !important;
  font-weight:800 !important;
  margin-bottom:14px !important;
}

.hero-title{
  font-size:52px !important;
  line-height:1.05 !important;
  letter-spacing:-.055em !important;
  margin:0 0 22px !important;
  color:#111827 !important;
}

.hero-title span{
  color:#4f46e5 !important;
  background:none !important;
  -webkit-text-fill-color:#4f46e5 !important;
}

.hero-sub{
  max-width:560px !important;
  margin:0 0 18px !important;
  color:#64748b !important;
  font-size:1.03rem !important;
  line-height:1.65 !important;
}

.flow-line{
  margin:18px 0 18px !important;
  color:#111827 !important;
  font-size:.92rem !important;
  font-weight:750 !important;
  text-align:left !important;
}

.flow-line span{
  color:#64748b !important;
}

.hero-cta{
  justify-content:flex-start !important;
  margin:22px 0 18px !important;
  gap:.85rem !important;
}

.trust-row{
  justify-content:flex-start !important;
  margin-top:20px !important;
  gap:.6rem !important;
}

/* Make tags calmer */
.miniTag{
  background:#f8fafc !important;
  color:#334155 !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:none !important;
}

/* Right side: mature product panel, not kiddish floating cards */
.premium-hero-visual,
.hero-right{
  display:grid !important;
  gap:14px !important;
  position:relative !important;
}

.premium-hero-visual::before,
.hero-right::before{
  display:none !important;
}

.mini-card{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 18px 40px rgba(15,23,42,.06) !important;
  border-radius:20px !important;
  padding:22px !important;
  backdrop-filter:none !important;
}

.mini-card.main{
  padding:26px !important;
  border-left:4px solid #4f46e5 !important;
}

.mini-card.soft{
  background:#f8fafc !important;
}

.mini-label{
  color:#64748b !important;
  font-size:.72rem !important;
  letter-spacing:.08em !important;
  font-weight:850 !important;
  margin-bottom:.45rem !important;
}

.mini-card h4{
  color:#111827 !important;
  font-size:1.08rem !important;
  font-weight:850 !important;
  letter-spacing:-.025em !important;
}

.mini-row{
  border-top:1px solid #e5e7eb !important;
  margin-top:16px !important;
  padding-top:14px !important;
}

.mini-row strong{
  color:#4f46e5 !important;
  font-size:1.7rem !important;
}

/* Remove excessive lavender middle band */
.footer{
  background:#fff !important;
}

/* Buttons: sharper, less toy-like */
.btn-primary{
  border-radius:12px !important;
  background:#4f46e5 !important;
  box-shadow:0 12px 24px rgba(79,70,229,.20) !important;
}

.btn-outline{
  border-radius:12px !important;
  background:#fff !important;
  border:1px solid #e2e8f0 !important;
}

/* Report cards: mature and clean */
.report-summary,
.report-matches,
.clean-role-card{
  box-shadow:0 18px 40px rgba(15,23,42,.06) !important;
  border:1px solid #e5e7eb !important;
}

.clean-role-card.primary{
  border-left:4px solid #4f46e5 !important;
  border-color:#e5e7eb !important;
}

/* Responsive */
@media (max-width:980px){
  .hero{
    grid-template-columns:1fr !important;
    padding:56px 24px !important;
    gap:2rem !important;
  }

  .hero-left{
    text-align:left !important;
  }

  .hero-title{
    font-size:40px !important;
  }

  .hero-cta,
  .trust-row{
    justify-content:flex-start !important;
  }
}

@media (max-width:640px){
  .hero-title{
    font-size:34px !important;
  }
}


/* ===== Clean Prep Hub: only request form + what you get ===== */

#prep .prep-grid{
  grid-template-columns: 1fr 1fr !important;
  gap: 1.2rem !important;
  max-width: 1050px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}

/* Keep first two useful cards only */
#prep .prep-grid > .prep-card:nth-child(n+3){
  display:none !important;
}

#prep .prep-request,
#prep .prep-grid > .prep-card:nth-child(2){
  min-height: 360px !important;
  padding: 30px !important;
  border-radius: 24px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.06) !important;
}

/* Make right card feel like a benefits card */
#prep .prep-grid > .prep-card:nth-child(2) .prep-title{
  font-size: 1.2rem !important;
  margin-bottom: .8rem !important;
}

#prep .checklist{
  margin-top: 1.1rem !important;
}

#prep .checklist li{
  padding: .45rem 0 !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

#prep .checklist input{
  accent-color: #4f46e5;
}

#prep .form-grid{
  gap: 1rem !important;
}

#prep .field label{
  color:#111827 !important;
  font-weight:800 !important;
}

#prep select{
  min-height: 46px !important;
  border-radius: 14px !important;
}

#prep #requestPrep{
  margin-top:.4rem !important;
}

/* Better section heading spacing */
#prep .panel-head{
  max-width: 1050px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom: 28px !important;
}

#prep .section-sub{
  max-width: 720px !important;
}

/* responsive */
@media (max-width:900px){
  #prep .prep-grid{
    grid-template-columns:1fr !important;
  }
}


/* ===== Premium Counselling / Guidance Page ===== */

#counseling.panel{
  background:
    radial-gradient(circle at 12% 18%, rgba(79,70,229,.08), transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
}

#counseling .panel-inner{
  max-width:1120px !important;
}

#counseling .panel-head{
  text-align:left !important;
  max-width:760px !important;
  margin:0 0 34px 0 !important;
}

#counseling .panel-head h2{
  font-size:42px !important;
  line-height:1.08 !important;
  letter-spacing:-.045em !important;
  margin-bottom:14px !important;
}

#counseling .section-sub{
  font-size:1.05rem !important;
  line-height:1.65 !important;
  color:#64748b !important;
  margin:0 !important;
}

#counseling #cPrefill{
  margin-top:12px !important;
  display:inline-flex !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  background:#eef2ff !important;
  color:#4338ca !important;
  font-weight:800 !important;
}

.counseling-card{
  border-radius:30px !important;
  background:rgba(255,255,255,.9) !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 28px 70px rgba(15,23,42,.09) !important;
  padding:34px !important;
}

.counseling-grid{
  display:grid !important;
  grid-template-columns:.9fr 1.1fr !important;
  gap:34px !important;
  align-items:start !important;
}

.counseling-left{
  padding:28px !important;
  border-radius:24px !important;
  background:#f8fafc !important;
  border:1px solid #e5e7eb !important;
}

.counseling-left .h3,
.counseling-right .h3{
  font-size:1.35rem !important;
  letter-spacing:-.03em !important;
  margin-bottom:18px !important;
}

.counseling-left .bullets{
  margin:0 !important;
  padding-left:0 !important;
  list-style:none !important;
}

.counseling-left .bullets li{
  position:relative !important;
  padding-left:30px !important;
  margin:14px 0 !important;
  color:#111827 !important;
  font-weight:750 !important;
  line-height:1.45 !important;
}

.counseling-left .bullets li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#eef2ff;
  color:#4f46e5;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  font-weight:900;
}

.counsel-note{
  margin-top:26px !important;
  padding:20px !important;
  border-radius:20px !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:none !important;
}

.counseling-right{
  padding:4px 0 0 !important;
}

#counseling .form-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:20px !important;
}

#counseling .field-wide{
  grid-column:1 / -1 !important;
}

#counseling .field label{
  display:block !important;
  margin-bottom:8px !important;
  color:#111827 !important;
  font-weight:850 !important;
  font-size:.95rem !important;
}

#counseling input,
#counseling select,
#counseling textarea{
  width:100% !important;
  border-radius:16px !important;
  border:1px solid #e2e8f0 !important;
  background:#ffffff !important;
  padding:14px 16px !important;
  font-size:.95rem !important;
  font-weight:650 !important;
  color:#111827 !important;
  box-shadow:0 1px 0 rgba(15,23,42,.02) !important;
}

#counseling input:focus,
#counseling select:focus,
#counseling textarea:focus{
  outline:none !important;
  border-color:#4f46e5 !important;
  box-shadow:0 0 0 4px rgba(79,70,229,.10) !important;
}

#counseling textarea{
  min-height:118px !important;
  resize:vertical !important;
}

#counseling .btn-row{
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}

#requestCounsel{
  padding:13px 22px !important;
  border-radius:14px !important;
}

#copyCounsel{
  padding:13px 22px !important;
  border-radius:14px !important;
}

#cMsg{
  margin-top:12px !important;
  color:#4338ca !important;
  font-weight:750 !important;
}

/* cleaner mobile */
@media (max-width:900px){
  .counseling-grid{
    grid-template-columns:1fr !important;
  }

  #counseling .form-grid{
    grid-template-columns:1fr !important;
  }

  #counseling .panel-head h2{
    font-size:34px !important;
  }

  .counseling-card{
    padding:22px !important;
  }

  .counseling-left{
    padding:22px !important;
  }
}


/* ===== Premium Login Modal Upgrade ===== */

.loginbackdrop{
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,23,42,.42) !important;
  backdrop-filter:blur(8px) !important;
  z-index:9998 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .22s ease !important;
}

.loginbackdrop.show,
.loginbackdrop[aria-hidden="false"]{
  opacity:1 !important;
  pointer-events:auto !important;
}

.loginmodal{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%, -48%) scale(.96) !important;
  width:min(440px, calc(100vw - 32px)) !important;
  max-height:calc(100vh - 40px) !important;
  overflow:auto !important;
  z-index:9999 !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 30px 90px rgba(15,23,42,.28) !important;
  padding:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1) !important;
}

.loginmodal.show,
.loginmodal[aria-hidden="false"]{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translate(-50%, -50%) scale(1) !important;
}

.loginmodal .modal-head{
  padding:24px 26px 14px !important;
  border-bottom:0 !important;
}

.loginmodal #loginTitle{
  font-size:1.45rem !important;
  letter-spacing:-.04em !important;
}

.loginmodal .modal-body{
  padding:0 26px 26px !important;
}

.loginmodal .muted{
  color:#64748b !important;
  line-height:1.55 !important;
}

.loginmodal .form-grid{
  display:grid !important;
  gap:16px !important;
  margin-top:18px !important;
}

.loginmodal .field label{
  display:block !important;
  margin-bottom:7px !important;
  font-size:.9rem !important;
  font-weight:850 !important;
  color:#111827 !important;
}

.loginmodal input{
  width:100% !important;
  min-height:48px !important;
  border-radius:16px !important;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  padding:13px 15px !important;
  font-weight:650 !important;
  color:#111827 !important;
}

.loginmodal input:focus{
  outline:none !important;
  border-color:#4f46e5 !important;
  box-shadow:0 0 0 4px rgba(79,70,229,.10) !important;
}

.loginmodal .btn-row{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top:4px !important;
}

.loginmodal .btn-primary,
.loginmodal .btn-outline{
  min-height:46px !important;
  border-radius:14px !important;
  padding:12px 18px !important;
}

.loginmodal #loginMsg{
  margin-top:12px !important;
  color:#4338ca !important;
  font-weight:750 !important;
}

.loginmodal .iconbtn{
  width:38px !important;
  height:38px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
}

body.modal-open{
  overflow:hidden !important;
}


/* ===== Login modal visibility fix ===== */

/* Hidden by default */
#loginBackdrop.loginbackdrop {
  display: none !important;
}

#loginModal.loginmodal {
  display: none !important;
}

/* Show only when opened */
#loginBackdrop.loginbackdrop.show {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#loginModal.loginmodal.show {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  z-index: 10000 !important;
}

/* Make sure old aria styles do not override */
#loginBackdrop[aria-hidden="true"]:not(.show),
#loginModal[aria-hidden="true"]:not(.show) {
  display: none !important;
}

#loginBackdrop[aria-hidden="false"].show {
  display: block !important;
}

#loginModal[aria-hidden="false"].show {
  display: block !important;
}


/* ===== FINAL LOGIN MODAL FIX ===== */
#loginBackdrop.loginbackdrop{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,23,42,.42) !important;
  backdrop-filter:blur(8px) !important;
  z-index:9998 !important;
}

#loginBackdrop.loginbackdrop.show{
  display:block !important;
}

#loginModal.loginmodal{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  opacity:1 !important;
  transform:none !important;
  pointer-events:none !important;
}

#loginModal.loginmodal.show{
  display:flex !important;
  pointer-events:auto !important;
}

.login-card{
  position:relative !important;
  width:100% !important;
  max-width:430px !important;
  background:#ffffff !important;
  border-radius:28px !important;
  padding:30px !important;
  box-shadow:0 35px 90px rgba(15,23,42,.28) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  animation:loginPop .22s ease-out both !important;
}

@keyframes loginPop{
  from{ opacity:0; transform:translateY(18px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.login-close{
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  width:36px !important;
  height:36px !important;
  border-radius:999px !important;
  border:1px solid #e5e7eb !important;
  background:#f8fafc !important;
  color:#111827 !important;
  font-size:22px !important;
  line-height:1 !important;
  cursor:pointer !important;
}

.login-brand{
  font-weight:900 !important;
  color:#4f46e5 !important;
  font-size:.85rem !important;
  margin-bottom:8px !important;
}

.login-heading{
  margin:0 !important;
  color:#111827 !important;
  font-size:1.8rem !important;
  letter-spacing:-.04em !important;
}

.login-sub{
  margin:10px 0 22px !important;
  color:#64748b !important;
  line-height:1.55 !important;
  font-size:.95rem !important;
}

.login-field{
  margin-bottom:16px !important;
}

.login-field label{
  display:block !important;
  margin-bottom:7px !important;
  color:#111827 !important;
  font-weight:850 !important;
  font-size:.92rem !important;
}

.login-field label span{
  color:#94a3b8 !important;
  font-weight:700 !important;
}

.login-field input{
  width:100% !important;
  height:48px !important;
  border-radius:15px !important;
  border:1px solid #e2e8f0 !important;
  background:#ffffff !important;
  padding:0 15px !important;
  color:#111827 !important;
  font-weight:650 !important;
  box-sizing:border-box !important;
}

.login-field input:focus{
  outline:none !important;
  border-color:#4f46e5 !important;
  box-shadow:0 0 0 4px rgba(79,70,229,.10) !important;
}

.login-actions{
  display:flex !important;
  gap:12px !important;
  margin-top:20px !important;
  flex-wrap:wrap !important;
}

.login-actions .btn-primary,
.login-actions .btn-outline{
  min-height:46px !important;
  border-radius:14px !important;
  padding:12px 18px !important;
}

.login-msg{
  margin-top:12px !important;
  color:#4338ca !important;
  font-weight:750 !important;
  font-size:.9rem !important;
}

body.modal-open{
  overflow:hidden !important;
}


/* ===== Login modal size / visibility final fix ===== */

#loginModal.loginmodal{
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  overflow:hidden !important;
}

.login-card{
  width:100% !important;
  max-width:400px !important;
  max-height:none !important;
  overflow:visible !important;
  padding:24px 26px !important;
  border-radius:24px !important;
  box-sizing:border-box !important;
}

.login-heading{
  font-size:1.45rem !important;
  line-height:1.15 !important;
  margin-bottom:8px !important;
}

.login-sub{
  font-size:.9rem !important;
  line-height:1.45 !important;
  margin:8px 0 16px !important;
}

.login-field{
  margin-bottom:12px !important;
}

.login-field label{
  margin-bottom:6px !important;
  font-size:.88rem !important;
}

.login-field input{
  height:44px !important;
  border-radius:14px !important;
  padding:0 14px !important;
  font-size:.92rem !important;
}

.login-actions{
  margin-top:14px !important;
}

.login-actions .btn-primary,
.login-actions .btn-outline{
  min-height:42px !important;
  padding:10px 16px !important;
}

.login-close{
  top:12px !important;
  right:12px !important;
  width:32px !important;
  height:32px !important;
  font-size:20px !important;
}

/* remove unwanted inner scrollbars created by older modal styles */
.loginmodal,
.loginmodal *{
  scrollbar-width:auto;
}

.loginmodal::-webkit-scrollbar,
.login-card::-webkit-scrollbar{
  display:none !important;
}

@media (max-height:650px){
  #loginModal.loginmodal{
    align-items:flex-start !important;
    padding-top:18px !important;
    overflow:auto !important;
  }

  .login-card{
    max-width:390px !important;
    padding:20px 22px !important;
  }

  .login-sub{
    display:none !important;
  }
}


/* ===== Simple OTP Login Modal ===== */

#loginModal.loginmodal{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  overflow:hidden !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  opacity:1 !important;
  transform:none !important;
}

#loginModal.loginmodal.show{
  display:flex !important;
}

#loginBackdrop.loginbackdrop{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,23,42,.42) !important;
  backdrop-filter:blur(8px) !important;
  z-index:9998 !important;
}

#loginBackdrop.loginbackdrop.show{
  display:block !important;
}

.simple-login-card{
  width:100% !important;
  max-width:390px !important;
  max-height:calc(100vh - 60px) !important;
  overflow:visible !important;
  padding:26px !important;
  border-radius:24px !important;
  background:#fff !important;
  box-shadow:0 32px 90px rgba(15,23,42,.28) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-sizing:border-box !important;
  animation:loginPop .22s ease-out both !important;
}

.simple-login-card .login-close{
  top:12px !important;
  right:12px !important;
  width:32px !important;
  height:32px !important;
}

.simple-login-card .login-field{
  margin-bottom:14px !important;
}

.simple-login-card .login-field:first-of-type{
  margin-top:10px !important;
}

.simple-login-card .login-field label{
  display:block !important;
  margin-bottom:7px !important;
  color:#111827 !important;
  font-size:.92rem !important;
  font-weight:850 !important;
}

.simple-login-card .login-field input{
  width:100% !important;
  height:46px !important;
  border-radius:14px !important;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  padding:0 14px !important;
  font-size:.94rem !important;
  font-weight:650 !important;
  box-sizing:border-box !important;
}

.simple-login-card .login-field input:focus{
  outline:none !important;
  border-color:#4f46e5 !important;
  box-shadow:0 0 0 4px rgba(79,70,229,.10) !important;
}

.simple-login-card .login-actions{
  margin-top:16px !important;
  display:flex !important;
  gap:10px !important;
}

.simple-login-card #doLogin{
  width:100% !important;
  min-height:44px !important;
  border-radius:14px !important;
}

.simple-login-card #doLogout{
  min-height:44px !important;
  border-radius:14px !important;
}

.simple-login-card .login-msg{
  margin-top:10px !important;
  font-size:.88rem !important;
}

@media (max-height:560px){
  #loginModal.loginmodal{
    align-items:flex-start !important;
    overflow:auto !important;
    padding-top:14px !important;
  }
  .simple-login-card{
    padding:20px !important;
  }
  .simple-login-card .login-field input{
    height:42px !important;
  }
}


/* ===== OTP two-step login flow ===== */

.simple-login-card{
  max-width:390px !important;
  padding:28px !important;
}

.login-full-btn{
  width:100% !important;
  min-height:46px !important;
  border-radius:14px !important;
  margin-top:8px !important;
}

.login-full-btn.secondary{
  margin-top:10px !important;
  background:#fff !important;
}

.otp-info{
  padding:12px 14px !important;
  border-radius:14px !important;
  background:#eef2ff !important;
  color:#4338ca !important;
  font-weight:750 !important;
  margin-bottom:16px !important;
  line-height:1.45 !important;
}

.otp-info strong{
  color:#111827 !important;
}

#loginMsg{
  margin-top:12px !important;
  font-weight:750 !important;
  color:#4338ca !important;
}

#loginStepTwo .login-field{
  margin-bottom:12px !important;
}


/* ===== FINAL PREMIUM MAIN SCREEN ===== */

/* Clean premium background */
body{
  background:#ffffff !important;
}

#home.panel{
  padding:0 !important;
  background:
    radial-gradient(circle at 8% 22%, rgba(79,70,229,.08), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(124,58,237,.06), transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
}

/* Remove old preview and broken lower visual */
.home-preview{
  display:none !important;
}

/* Real two-column hero */
.hero{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:78px 34px 74px !important;
  display:grid !important;
  grid-template-columns:1.05fr .95fr !important;
  align-items:center !important;
  gap:4.2rem !important;
  min-height:auto !important;
}

.hero-left{
  max-width:620px !important;
  margin:0 !important;
  text-align:left !important;
}

.kicker{
  color:#4f46e5 !important;
  font-size:.95rem !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  margin-bottom:13px !important;
}

.hero-title{
  color:#0f172a !important;
  font-size:56px !important;
  line-height:1.04 !important;
  letter-spacing:-.058em !important;
  margin:0 0 22px 0 !important;
}

.hero-title span{
  color:#4f46e5 !important;
  background:none !important;
  -webkit-text-fill-color:#4f46e5 !important;
}

.hero-sub{
  max-width:540px !important;
  color:#64748b !important;
  font-size:1.04rem !important;
  line-height:1.7 !important;
  margin:0 0 18px 0 !important;
}

.flow-line{
  text-align:left !important;
  margin:18px 0 18px !important;
  color:#111827 !important;
  font-size:.92rem !important;
  line-height:1.55 !important;
  font-weight:800 !important;
  max-width:560px !important;
}

.flow-line span{
  color:#64748b !important;
  font-weight:750 !important;
}

.hero-cta{
  justify-content:flex-start !important;
  display:flex !important;
  gap:.9rem !important;
  margin:22px 0 18px !important;
}

.trust-row{
  justify-content:flex-start !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.6rem !important;
  margin-top:20px !important;
}

/* Premium right-side product panel */
.premium-hero-panel{
  display:grid !important;
  gap:14px !important;
  width:100% !important;
  max-width:430px !important;
  justify-self:end !important;
  position:relative !important;
}

.premium-hero-panel::before{
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:34px;
  background:linear-gradient(135deg,rgba(79,70,229,.08),rgba(124,58,237,.05));
  z-index:0;
}

.direction-card{
  position:relative;
  z-index:1;
  padding:26px;
  border-radius:24px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 24px 60px rgba(15,23,42,.08);
}

.direction-card:first-child{
  border-left:4px solid #4f46e5;
}

.direction-card.small{
  padding:20px 22px;
}

.direction-card.muted-card{
  background:#f8fafc;
}

.direction-eyebrow{
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  font-weight:900;
  margin-bottom:8px;
}

.direction-title{
  color:#111827;
  font-size:1.18rem;
  font-weight:850;
  letter-spacing:-.03em;
  line-height:1.25;
}

.direction-line{
  height:1px;
  background:#e5e7eb;
  margin:18px 0;
}

.direction-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#64748b;
  font-weight:850;
}

.direction-row strong{
  color:#4f46e5;
  font-size:2rem;
  letter-spacing:-.04em;
}

/* Calm chips */
.miniTag{
  background:#f8fafc !important;
  color:#334155 !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:none !important;
}

/* Better CTA */
.btn-primary{
  background:#4f46e5 !important;
  border-radius:13px !important;
  box-shadow:0 14px 30px rgba(79,70,229,.22) !important;
}

.btn-outline{
  border-radius:13px !important;
  background:#fff !important;
  border:1px solid #e2e8f0 !important;
}

/* No footer too close to hero */
.footer{
  margin-top:0 !important;
}

/* Responsive */
@media (max-width: 980px){
  .hero{
    grid-template-columns:1fr !important;
    padding:58px 24px 62px !important;
    gap:2rem !important;
  }

  .hero-left{
    max-width:680px !important;
  }

  .premium-hero-panel{
    justify-self:start !important;
    max-width:520px !important;
  }

  .hero-title{
    font-size:42px !important;
  }
}

@media (max-width: 640px){
  .hero-title{
    font-size:34px !important;
  }

  .hero-cta{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .premium-hero-panel{
    display:none !important;
  }
}


/* ===== FINAL PREMIUM MAIN PAGE REBUILD ===== */
:root{
  --premium-ink:#101423;
  --premium-muted:#64748b;
  --premium-purple:#5b2ee6;
  --premium-purple-dark:#4318b9;
  --premium-cream:#fbfaf3;
}
body{
  background:#fffdf7 !important;
}
.navbar{
  min-height:76px !important;
  padding:0 34px !important;
  background:rgba(255,253,247,.86) !important;
  backdrop-filter: blur(18px);
  border-bottom:1px solid rgba(15,23,42,.10) !important;
  box-shadow:none !important;
}
.brand h2{
  font-size:1.38rem !important;
  font-weight:950 !important;
  color:#07080d !important;
}
.brand-by{
  color:var(--premium-purple) !important;
  font-weight:900 !important;
}
.navlink{
  color:#111827 !important;
  font-size:.82rem !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  border-radius:999px !important;
}
.navlink:hover,
.navlink.active{
  background:#f1edff !important;
  color:var(--premium-purple-dark) !important;
}
#home.panel{
  position:relative !important;
  min-height:calc(100vh - 76px) !important;
  padding:0 !important;
  border-top:0 !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(125,211,252,.42), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(168,85,247,.20), transparent 32%),
    linear-gradient(135deg,#fbfaf3 0%, #edf7f6 42%, #eee7ff 100%) !important;
}
#home .home-inner{
  max-width:1360px !important;
  position:relative !important;
  z-index:1 !important;
}
#home .premium-hero{
  min-height:calc(100vh - 76px) !important;
  max-width:1360px !important;
  padding:86px 46px 72px !important;
  grid-template-columns:1.12fr .88fr !important;
  gap:5.5rem !important;
}
#home .kicker{
  color:var(--premium-purple) !important;
  font-weight:950 !important;
  font-size:1rem !important;
  letter-spacing:.01em !important;
  margin-bottom:22px !important;
}
#home .hero-title{
  max-width:760px !important;
  font-size:clamp(58px, 6vw, 96px) !important;
  line-height:.98 !important;
  letter-spacing:-.075em !important;
  color:var(--premium-ink) !important;
  margin:0 0 28px !important;
  font-weight:950 !important;
}
#home .hero-sub{
  max-width:680px !important;
  color:#334155 !important;
  font-size:1.35rem !important;
  line-height:1.55 !important;
  font-weight:650 !important;
  margin:0 0 22px !important;
}
#home .flow-line{
  color:#0f172a !important;
  font-size:1rem !important;
  margin:22px 0 28px !important;
}
#home .flow-line span{
  display:inline-block;
  color:#64748b !important;
  margin-left:6px;
}
#home .hero-cta{
  gap:14px !important;
  margin:0 0 24px !important;
}
#home .btn-primary,
#home .btn-outline{
  min-height:52px !important;
  padding:0 22px !important;
  border-radius:14px !important;
  font-size:.98rem !important;
}
#home .btn-primary{
  background:linear-gradient(135deg,var(--premium-purple),var(--premium-purple-dark)) !important;
  box-shadow:0 18px 36px rgba(91,46,230,.22) !important;
}
#home .btn-outline{
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(15,23,42,.14) !important;
}
#home .trust-row{
  gap:10px !important;
  margin-top:0 !important;
}
#home .miniTag{
  background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(15,23,42,.12) !important;
  color:#111827 !important;
  padding:.42rem .72rem !important;
}
#home .premium-hero-panel{
  max-width:520px !important;
  justify-self:end !important;
  gap:16px !important;
}
#home .premium-hero-panel::before{
  inset:-36px !important;
  border-radius:44px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(91,46,230,.08)) !important;
  border:1px solid rgba(255,255,255,.60);
  box-shadow:0 40px 90px rgba(67,24,185,.12);
}
#home .direction-card{
  background:rgba(255,255,255,.76) !important;
  backdrop-filter: blur(20px);
  border:1px solid rgba(255,255,255,.76) !important;
  box-shadow:0 28px 70px rgba(15,23,42,.12) !important;
}
#home .main-direction-card{
  padding:30px !important;
  border-left:0 !important;
}
.direction-topline{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}
.direction-score{
  width:74px;
  height:74px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:#f1edff;
  color:var(--premium-purple-dark);
  font-weight:950;
  font-size:1.35rem;
  letter-spacing:-.04em;
}
#home .direction-eyebrow{
  color:#6b7280 !important;
  letter-spacing:.12em !important;
}
#home .direction-title{
  font-size:1.45rem !important;
  color:#0f172a !important;
}
.role-preview-label{
  color:#64748b;
  font-weight:900;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.role-preview-title{
  margin-top:6px;
  color:#0f172a;
  font-size:2rem;
  line-height:1;
  letter-spacing:-.05em;
  font-weight:950;
}
.role-preview p,
.resume-direction-card p{
  color:#475569;
  font-weight:650;
  line-height:1.55;
  margin:12px 0 0;
}
.insight-list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:18px;
}
.insight-list div{
  display:flex;
  align-items:center;
  gap:10px;
  color:#111827;
  font-weight:850;
  padding:11px 12px;
  border-radius:14px;
  background:rgba(248,250,252,.78);
  border:1px solid rgba(226,232,240,.75);
}
.insight-list span{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--premium-purple);
  box-shadow:0 0 0 5px rgba(91,46,230,.10);
}
.resume-lines{
  display:grid;
  gap:9px;
  margin-top:12px;
}
.resume-lines div{
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(15,23,42,.16),rgba(15,23,42,.05));
}
.resume-lines div:nth-child(2){ width:82%; }
.resume-lines div:nth-child(3){ width:62%; }
#home .muted-card{
  background:rgba(248,250,252,.70) !important;
}
#home .direction-row strong{
  font-size:1.35rem !important;
  color:var(--premium-purple) !important;
}
@media (max-width: 1080px){
  #home .premium-hero{ grid-template-columns:1fr !important; gap:3rem !important; }
  #home .premium-hero-panel{ justify-self:start !important; max-width:620px !important; }
}
@media (max-width: 760px){
  .navbar{ padding:0 18px !important; }
  #home .premium-hero{ padding:58px 22px 62px !important; }
  #home .hero-title{ font-size:46px !important; }
  #home .hero-sub{ font-size:1.08rem !important; }
  #home .premium-hero-panel{ display:grid !important; }
}

/* ===== User revision: remove unnecessary hero text/cards ===== */
#home .flow-line,
#home .resume-direction-card,
#home .muted-card{
  display:none !important;
}

#home .premium-hero{
  align-items:center !important;
  padding-top:72px !important;
  padding-bottom:72px !important;
}

#home .hero-sub{
  margin-bottom:30px !important;
}

#home .hero-cta{
  margin-bottom:24px !important;
}

#home .premium-hero-panel{
  max-width:500px !important;
}

#home .premium-hero-panel::before{
  inset:-28px !important;
}

#home .main-direction-card{
  padding:34px !important;
  border:1px solid rgba(255,255,255,.82) !important;
}

#home .direction-title{
  font-size:1.55rem !important;
}

#home .role-preview-title{
  font-size:2.15rem !important;
}

#home .insight-list div{
  background:#fff !important;
}

/* ===== PREMIUM COLOUR UPGRADE: ivory / plum / champagne, no basic blue ===== */
:root{
  --premium-ink:#14110f;
  --premium-muted:#6f665d;
  --premium-purple:#6d214f;
  --premium-purple-dark:#3b0f2b;
  --premium-cream:#fbf7ef;
  --premium-gold:#b88945;
  --premium-gold-soft:#efe1c8;
  --premium-plum-soft:#f4e8ef;
}

body{
  background:#fbf7ef !important;
  color:var(--premium-ink) !important;
}

.navbar{
  background:rgba(251,247,239,.88) !important;
  border-bottom:1px solid rgba(77,51,35,.12) !important;
}

.brand-by,
#home .kicker{
  color:var(--premium-purple) !important;
}

.navlink:hover,
.navlink.active{
  background:#f4e8ef !important;
  color:var(--premium-purple-dark) !important;
}

#home.panel{
  background:
    radial-gradient(circle at 14% 20%, rgba(184,137,69,.16), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(109,33,79,.13), transparent 34%),
    linear-gradient(135deg,#fbf7ef 0%, #f8f1e7 46%, #f4e8ef 100%) !important;
}

#home .hero-title{
  color:#14110f !important;
}

#home .hero-sub{
  color:#3f3a35 !important;
}

#home .btn-primary{
  background:linear-gradient(135deg,#6d214f 0%, #3b0f2b 100%) !important;
  box-shadow:0 18px 36px rgba(59,15,43,.24) !important;
}

#home .btn-primary:hover{
  box-shadow:0 22px 46px rgba(59,15,43,.30) !important;
}

#home .btn-outline{
  background:rgba(255,252,246,.72) !important;
  border:1px solid rgba(77,51,35,.18) !important;
  color:#17120f !important;
}

#home .miniTag{
  background:rgba(255,252,246,.72) !important;
  border:1px solid rgba(77,51,35,.14) !important;
  color:#2c241f !important;
}

#home .premium-hero-panel::before{
  background:linear-gradient(135deg,rgba(255,252,246,.42),rgba(184,137,69,.08),rgba(109,33,79,.08)) !important;
  border:1px solid rgba(255,252,246,.72) !important;
  box-shadow:0 42px 92px rgba(59,15,43,.13) !important;
}

#home .direction-card{
  background:rgba(255,252,246,.82) !important;
  border:1px solid rgba(255,252,246,.90) !important;
  box-shadow:0 30px 72px rgba(59,15,43,.12) !important;
}

.direction-score{
  background:linear-gradient(135deg,#f1e3c8,#f8efdf) !important;
  color:#6d214f !important;
  border:1px solid rgba(184,137,69,.30) !important;
}

#home .direction-eyebrow,
.role-preview-label{
  color:#8a7968 !important;
}

#home .direction-title,
.role-preview-title{
  color:#17120f !important;
}

.role-preview p,
.resume-direction-card p{
  color:#554b43 !important;
}

#home .insight-list div{
  background:#fffaf3 !important;
  border:1px solid rgba(77,51,35,.12) !important;
  color:#191411 !important;
}

.insight-list span{
  background:#b88945 !important;
  box-shadow:0 0 0 5px rgba(184,137,69,.16) !important;
}

#home .direction-row strong{
  color:#6d214f !important;
}

.badge,
.pill{
  background:#f4e8ef !important;
  color:#3b0f2b !important;
  border-color:rgba(109,33,79,.14) !important;
}

.progressfill{
  background:linear-gradient(135deg,#b88945,#6d214f) !important;
}

/* ===== PIXEL-PERFECT FINAL HERO POLISH ===== */
:root{
  --rg-ink:#15110f;
  --rg-muted:#655d55;
  --rg-ivory:#f8f4ec;
  --rg-card:#fffaf3;
  --rg-plum:#5a153d;
  --rg-plum-deep:#2d0b21;
  --rg-gold:#b68a4a;
  --rg-line:rgba(65,45,31,.13);
}

#home.panel{
  min-height:calc(100vh - 78px) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(182,138,74,.10), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(90,21,61,.09), transparent 31%),
    linear-gradient(135deg,#fbf8f2 0%, #f8f4ec 55%, #f3e9ed 100%) !important;
  border-top:1px solid rgba(65,45,31,.08) !important;
  overflow:hidden !important;
}

.navbar{
  min-height:78px !important;
  padding:0 40px !important;
  background:rgba(255,252,246,.90) !important;
  backdrop-filter:blur(14px) saturate(140%) !important;
  box-shadow:none !important;
  border-bottom:1px solid rgba(65,45,31,.11) !important;
}

.brand h2{
  font-size:1.42rem !important;
  line-height:1.02 !important;
  letter-spacing:-.055em !important;
  color:#11100f !important;
}

.brand-by{
  display:block !important;
  margin-top:4px !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  color:var(--rg-plum) !important;
}

.navlinks{ gap:28px !important; }
.navlink{
  padding:10px 2px !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#181514 !important;
  font-size:.88rem !important;
  font-weight:850 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  position:relative !important;
}
.navlink::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:2px;
  height:2px;
  border-radius:99px;
  background:var(--rg-plum);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease;
}
.navlink:hover::after,.navlink.active::after{ transform:scaleX(1); }
.navlink:hover,.navlink.active{ color:var(--rg-plum) !important; background:transparent !important; }

.navactions .btn-outline{
  min-width:86px !important;
  height:48px !important;
  border-radius:16px !important;
  background:rgba(255,252,246,.70) !important;
  border:1px solid rgba(65,45,31,.13) !important;
  box-shadow:0 10px 24px rgba(45,11,33,.04) !important;
}

#home .panel-inner.home-inner{
  max-width:1440px !important;
  margin:0 auto !important;
}

#home .premium-hero{
  grid-template-columns:minmax(520px, 1fr) minmax(440px, 560px) !important;
  gap:86px !important;
  align-items:center !important;
  padding:96px 70px 92px !important;
  max-width:none !important;
}

#home .hero-left{ max-width:680px !important; }
#home .kicker{
  margin-bottom:28px !important;
  font-size:1rem !important;
  font-weight:850 !important;
  letter-spacing:-.025em !important;
  color:var(--rg-plum) !important;
}
#home .hero-title{
  max-width:660px !important;
  font-size:clamp(5.1rem, 6.1vw, 7.15rem) !important;
  line-height:.875 !important;
  letter-spacing:-.085em !important;
  font-weight:950 !important;
  color:var(--rg-ink) !important;
  margin:0 !important;
  text-wrap:balance !important;
}
#home .hero-sub{
  max-width:660px !important;
  margin:32px 0 0 !important;
  font-size:1.24rem !important;
  line-height:1.48 !important;
  letter-spacing:-.03em !important;
  color:#3f3933 !important;
  font-weight:750 !important;
}
#home .hero-cta{
  margin:36px 0 0 !important;
}
#home .hero-main-btn{
  height:58px !important;
  padding:0 28px !important;
  border-radius:15px !important;
  font-size:1.03rem !important;
  letter-spacing:-.02em !important;
  background:linear-gradient(135deg,var(--rg-plum) 0%,var(--rg-plum-deep) 100%) !important;
  box-shadow:0 18px 34px rgba(45,11,33,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
#home .hero-main-btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 24px 42px rgba(45,11,33,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
#home .trust-row{
  margin-top:30px !important;
  gap:12px !important;
}
#home .miniTag{
  min-height:34px !important;
  padding:0 16px !important;
  border-radius:999px !important;
  background:rgba(255,252,246,.78) !important;
  border:1px solid rgba(65,45,31,.12) !important;
  color:#2f2925 !important;
  font-size:.86rem !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
  box-shadow:0 10px 22px rgba(45,11,33,.035) !important;
}

#home .premium-hero-panel{
  width:100% !important;
  max-width:560px !important;
  justify-self:center !important;
  position:relative !important;
}
#home .premium-hero-panel::before{
  inset:-34px !important;
  border-radius:34px !important;
  background:linear-gradient(135deg, rgba(255,252,246,.56), rgba(255,252,246,.16)) !important;
  border:1px solid rgba(255,255,255,.68) !important;
  box-shadow:0 44px 80px rgba(45,11,33,.12), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
#home .main-direction-card{
  padding:36px 38px 34px !important;
  border-radius:28px !important;
  background:rgba(255,252,246,.88) !important;
  border:1px solid rgba(255,255,255,.85) !important;
  box-shadow:0 28px 58px rgba(45,11,33,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
#home .direction-eyebrow,
#home .role-preview-label{
  color:#8a7b6b !important;
  font-size:.82rem !important;
  font-weight:950 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
#home .direction-title{
  margin-top:7px !important;
  font-size:1.78rem !important;
  line-height:1.04 !important;
  letter-spacing:-.06em !important;
  font-weight:950 !important;
  color:var(--rg-ink) !important;
}
#home .direction-score{
  width:82px !important;
  height:82px !important;
  border-radius:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:1.45rem !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
  background:linear-gradient(135deg,#f5e8cf 0%,#f9efdf 100%) !important;
  color:var(--rg-plum) !important;
  border:1px solid rgba(182,138,74,.30) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70), 0 12px 26px rgba(182,138,74,.11) !important;
}
#home .direction-line{
  margin:34px 0 24px !important;
  background:rgba(65,45,31,.13) !important;
}
#home .role-preview-title{
  margin-top:8px !important;
  font-size:2.22rem !important;
  line-height:.98 !important;
  letter-spacing:-.065em !important;
  font-weight:950 !important;
  color:var(--rg-ink) !important;
}
#home .role-preview p{
  max-width:440px !important;
  margin-top:18px !important;
  color:#544a41 !important;
  font-size:1.05rem !important;
  line-height:1.42 !important;
  font-weight:760 !important;
  letter-spacing:-.02em !important;
}
#home .insight-list{
  margin-top:24px !important;
  gap:12px !important;
}
#home .insight-list div{
  height:50px !important;
  border-radius:15px !important;
  padding:0 18px !important;
  background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(65,45,31,.12) !important;
  color:#1c1714 !important;
  font-size:1rem !important;
  font-weight:850 !important;
  letter-spacing:-.025em !important;
  box-shadow:0 10px 24px rgba(45,11,33,.035) !important;
}
#home .insight-list span{
  width:11px !important;
  height:11px !important;
  background:var(--rg-gold) !important;
  box-shadow:0 0 0 6px rgba(182,138,74,.16) !important;
}

@media (max-width: 1100px){
  #home .premium-hero{
    grid-template-columns:1fr !important;
    gap:72px !important;
    padding:76px 32px 78px !important;
  }
  #home .hero-left{ max-width:760px !important; }
  #home .premium-hero-panel{ justify-self:start !important; }
}
@media (max-width: 720px){
  .navbar{ padding:0 20px !important; }
  #home .premium-hero{ padding:54px 22px 62px !important; gap:52px !important; }
  #home .hero-title{ font-size:clamp(3.55rem, 15vw, 5rem) !important; }
  #home .hero-sub{ font-size:1.05rem !important; }
  #home .main-direction-card{ padding:28px 24px !important; border-radius:24px !important; }
  #home .direction-score{ width:70px !important; height:70px !important; }
}

/* ===== Final premium simplification + animations ===== */
:root{
  --rg-wine:#6B123F;
  --rg-plum:#7A1F52;
  --rg-cream:#F7F1E8;
  --rg-ink:#130F0C;
  --rg-gold:#C9A24D;
}

#home.panel{
  position:relative;
  overflow:hidden;
}

#home.panel::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 18% 25%, rgba(201,162,77,.15), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(107,18,63,.14), transparent 30%),
    linear-gradient(120deg, #fbf7ef 0%, #f8f0e8 52%, #f7edf1 100%);
  animation: rgLuxuryWash 12s ease-in-out infinite alternate;
  z-index:-2;
}

#home.panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.28), transparent 45%, rgba(255,255,255,.18));
  z-index:-1;
  pointer-events:none;
}

@keyframes rgLuxuryWash{
  from{ transform:translate3d(-1.5%, -1%, 0) scale(1.02); }
  to{ transform:translate3d(1.5%, 1%, 0) scale(1.04); }
}

.hero-left > *, .hero-preview-wrap{
  animation: rgPremiumRise .72s cubic-bezier(.2,.8,.2,1) both;
}
.hero-left .kicker{ animation-delay:.05s; }
.hero-left .hero-title{ animation-delay:.12s; }
.hero-left .hero-sub{ animation-delay:.2s; }
.hero-left .hero-cta{ animation-delay:.28s; }
.hero-left .trust-row{ animation-delay:.36s; }
.hero-preview-wrap{ animation-delay:.18s; }

@keyframes rgPremiumRise{
  from{ opacity:0; transform:translateY(18px); filter:blur(4px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}

.hero-preview-wrap,
.hero-card,
.mock,
.career-card{
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.hero-preview-wrap:hover,
.hero-card:hover,
.mock:hover,
.career-card:hover{
  transform: translateY(-4px);
  box-shadow:0 32px 80px rgba(68,27,45,.14) !important;
}

.btn-primary{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, var(--rg-plum), var(--rg-wine)) !important;
  box-shadow:0 18px 40px rgba(107,18,63,.22) !important;
}
.btn-primary::after{
  content:"";
  position:absolute;
  top:-60%; left:-40%;
  width:40%; height:220%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:rotate(22deg);
  animation: rgButtonSheen 3.6s ease-in-out infinite;
}
@keyframes rgButtonSheen{
  0%, 65%{ left:-45%; opacity:0; }
  75%{ opacity:1; }
  100%{ left:120%; opacity:0; }
}

/* Prep: no checkboxes, fewer details */
#prep .prep-benefit-card{
  position:relative;
  overflow:hidden;
}
#prep .prep-benefit-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 90% 10%, rgba(201,162,77,.16), transparent 34%);
  pointer-events:none;
}
#prep .premium-benefits{
  display:grid;
  gap:12px;
  margin-top:22px;
  position:relative;
}
#prep .premium-benefit{
  padding:15px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.08);
  font-weight:800;
  color:#171717;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  animation: rgBenefitIn .55s ease both;
}
#prep .premium-benefit:nth-child(1){ animation-delay:.06s; }
#prep .premium-benefit:nth-child(2){ animation-delay:.13s; }
#prep .premium-benefit:nth-child(3){ animation-delay:.20s; }
@keyframes rgBenefitIn{
  from{ opacity:0; transform:translateX(12px); }
  to{ opacity:1; transform:translateX(0); }
}

/* Counselling: remove check icons and simplify */
.counseling-left .bullets,
#prep .checklist{ display:none !important; }
.counsel-simple-copy{
  font-size:1.08rem !important;
  line-height:1.6 !important;
  margin:0 !important;
  color:#475569 !important;
}
.counsel-focus-card{
  margin-top:26px;
  padding:22px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 38px rgba(15,23,42,.05);
  animation: rgPremiumRise .7s ease both;
}
.focus-label{
  color:var(--rg-wine);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
  margin-bottom:8px;
}
.focus-copy{
  color:#111827;
  font-weight:850;
  font-size:1.08rem;
}

#prep .prep-request,
#prep .prep-benefit-card,
.counseling-card,
.counseling-left,
.counseling-right{
  animation: rgPremiumRise .7s cubic-bezier(.2,.8,.2,1) both;
}
#prep .prep-benefit-card{ animation-delay:.12s; }
.counseling-right{ animation-delay:.12s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}


/* ===== CENTER FIX FOR GUIDANCE PAGE ===== */
#counseling .panel-inner{
  max-width: 800px !important;
  margin: 0 auto !important;
}

#counseling .counseling-card{
  max-width: 800px !important;
  margin: 0 auto !important;
}

#counseling .counseling-grid{
  display:block !important;
}

/* Remove side empty layout */
#counseling{
  display:block !important;
}


/* ===== REAL CLEANUP: counseling moved to separate guidance.html ===== */

/* Build Skills cleanup */
#prep .section-muted,
#prep .panel-head .section-sub,
#prep .panel-head .muted.small {
  display: none !important;
}

#prep .panel-head h2::after,
#prep .panel-head h2 span,
#prep h2::after {
  content: none !important;
  display: none !important;
}

#prep .prep-card p.muted {
  color: #66758f !important;
  opacity: 1 !important;
}

/* Ensure SPA pages show only the active section */
body:not(.guidance-page) .panel {
  display: none !important;
}
body:not(.guidance-page) .panel.active {
  display: block !important;
}

/* guidance page layout aligned with Build Skills */
.guidance-page #counseling {
  display: block !important;
  min-height: calc(100vh - 90px) !important;
  padding: 4.4rem 1.6rem 4.8rem !important;
  background:
    radial-gradient(circle at 12% 15%, rgba(196,154,74,.12), transparent 34%),
    radial-gradient(circle at 90% 18%, rgba(122,23,75,.07), transparent 36%),
    #FBF6ED !important;
}

.guidance-page #counseling .panel-inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.guidance-page #counseling .panel-head {
  max-width: 1180px !important;
  margin: 0 auto 2rem !important;
  text-align: left !important;
}

.guidance-page #counseling .panel-head h2 {
  font-size: clamp(2.4rem, 3.5vw, 3.4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.05em !important;
  margin: 0 0 .7rem !important;
  color: #111 !important;
}

.guidance-page #counseling .section-sub {
  max-width: 760px !important;
  margin: 0 !important;
  color: #66758f !important;
  font-size: 1.12rem !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
}

.guidance-page #counseling .counseling-card {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 2.35rem !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(126,85,42,.16) !important;
  box-shadow: 0 28px 70px rgba(74,29,50,.10) !important;
}

.guidance-page #counseling .counseling-grid {
  display: block !important;
}

.guidance-page #counseling .counseling-left,
.guidance-page #counseling .counsel-note,
.guidance-page #counseling [class*="auto"],
.guidance-page #counseling [class*="included"],
.guidance-page #counseling .miniTag,
.guidance-page #counseling .pill,
.guidance-page #counseling .badge {
  display: none !important;
}

.guidance-page #counseling .form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.15rem 1.25rem !important;
}

.guidance-page #counseling .field-wide {
  grid-column: 1 / -1 !important;
}

.guidance-page #counseling .field label {
  display: block !important;
  margin: 0 0 .45rem !important;
  font-size: .9rem !important;
  font-weight: 900 !important;
  color: #111827 !important;
}

.guidance-page #counseling .field input,
.guidance-page #counseling .field select,
.guidance-page #counseling .field textarea {
  display: block !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: .95rem 1rem !important;
  border-radius: 16px !important;
  border: 1px solid rgba(99,72,45,.14) !important;
  background: #fff !important;
  color: #111827 !important;
  font-weight: 650 !important;
  box-shadow: 0 10px 26px rgba(45,24,10,.035) !important;
}

.guidance-page #counseling .field textarea {
  min-height: 135px !important;
  resize: vertical !important;
}

.guidance-page #counseling .btn-row {
  margin-top: 1.35rem !important;
  display: flex !important;
  gap: .8rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.guidance-page #counseling .btn-primary {
  background: linear-gradient(135deg,#7A174B,#4B0D2E) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: .9rem 1.25rem !important;
  box-shadow: 0 18px 35px rgba(75,13,46,.22) !important;
}

.guidance-page #counseling .btn-outline {
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(122,23,75,.15) !important;
  border-radius: 14px !important;
  padding: .9rem 1.25rem !important;
}

@media (max-width: 760px) {
  .guidance-page #counseling .form-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== FINAL PANEL DISPLAY GUARD ===== */
body:not(.guidance-page) .panel {
  display: none !important;
}
body:not(.guidance-page) .panel.active {
  display: block !important;
}

/* Build Skills cleanup */
#prep .section-muted,
#prep .panel-head .section-sub,
#prep .panel-head .muted.small,
#prep .panel-head h2 span {
  display: none !important;
}
#prep .panel-head h2::after {
  content: none !important;
  display: none !important;
}

/* Since Get Guidance is a separate page now, never show this on index even if browser cache keeps it */
body:not(.guidance-page) #counseling,
body:not(.guidance-page) .counseling-card,
body:not(.guidance-page) .counseling-grid,
body:not(.guidance-page) .counsel-note {
  display: none !important;
}


/* ===== Build Skills Supabase form polish ===== */
#prep #prepMsg {
  margin-top: .75rem !important;
  display: block !important;
  font-weight: 750 !important;
}

#prep .field input {
  display: block !important;
  width: 100% !important;
  padding: .75rem .85rem !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
  font-weight: 650 !important;
}

#prep .field input:focus {
  border-color: rgba(122,23,75,.45) !important;
  box-shadow: 0 0 0 4px rgba(122,23,75,.10) !important;
  outline: none !important;
}

/* ===== Resume Studio PDF download fix =====
   Keep only the actual resume preview visible in browser print / Save as PDF. */
@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  html,
  body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body * {
    visibility: hidden !important;
  }

  #resumePreview,
  #resumePreview * {
    visibility: visible !important;
  }

  #resumePreview {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
  }

  .studio-topbar,
  .studio-form,
  .sp-head,
  .studio-preview > .muted {
    display: none !important;
  }
}


/* Resume Studio - Work Ex / Internships structured entries */
.section-title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:.85rem;
}
.experience-list{
  display:grid;
  gap:1rem;
}
.experience-entry{
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
  background:#fff;
}
.exp-remove-wrap{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}
.ats-experience-item{
  margin:.35rem 0 .65rem;
}
.ats-role{
  margin-bottom:.1rem;
}
.ats-duration{
  font-size:.92em;
  color:#475569;
  margin-bottom:.25rem;
}
@media (max-width: 720px){
  .section-title-row{ flex-direction:column; align-items:stretch; }
  .exp-remove-wrap{ justify-content:flex-start; }
}

/* ===== V10 MOBILE POLISH: compact hero + visible scroll nav ===== */
@media (max-width: 760px){
  body{
    overflow-x:hidden !important;
  }

  .navbar{
    position: sticky !important;
    top: 0 !important;
    min-height: auto !important;
    padding: 12px 14px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand actions"
      "links links" !important;
    gap: 10px 12px !important;
    align-items: center !important;
  }

  .brand{
    grid-area: brand !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    min-width:0 !important;
  }
  .brand h2{
    font-size: 1.08rem !important;
    line-height: 1.02 !important;
    margin:0 !important;
    white-space: nowrap !important;
  }
  .brand-by{
    display:block !important;
    font-size:.70rem !important;
    margin-top:2px !important;
  }
  .tagline{
    display:none !important;
  }

  .navactions{
    grid-area: actions !important;
    display:flex !important;
    justify-content:flex-end !important;
    gap:8px !important;
  }
  .userbadge{
    max-width: 95px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    padding:.48rem .65rem !important;
    font-size:.82rem !important;
  }
  #loginBtn,
  .navactions .btn-outline{
    padding:.62rem .82rem !important;
    border-radius:16px !important;
    font-size:.86rem !important;
    white-space:nowrap !important;
  }

  .navlinks{
    grid-area: links !important;
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    gap:16px !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    padding:2px 0 6px !important;
    scrollbar-width:none !important;
  }
  .navlinks::-webkit-scrollbar{ display:none !important; }
  .navlink{
    flex:0 0 auto !important;
    font-size:.76rem !important;
    letter-spacing:.12em !important;
    padding:.38rem 0 !important;
    border-radius:0 !important;
  }

  #home .premium-hero,
  #home .hero,
  .hero{
    display:block !important;
    padding:38px 20px 36px !important;
    min-height:auto !important;
  }

  #home .hero-left,
  .hero-left{
    width:100% !important;
    max-width:100% !important;
  }

  #home .kicker,
  .kicker{
    font-size:.88rem !important;
    margin-bottom:18px !important;
  }

  #home .hero-title,
  .hero-title,
  .hero h1{
    font-size: clamp(2.55rem, 13vw, 3.65rem) !important;
    line-height: .95 !important;
    letter-spacing:-.055em !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
  }

  #home .hero-sub,
  .hero-sub,
  .hero p{
    font-size:1.02rem !important;
    line-height:1.46 !important;
    max-width:100% !important;
    margin:0 0 26px !important;
  }

  #home .hero-cta,
  .hero-cta,
  .hero-actions{
    margin-top:0 !important;
  }
  #goAssessment,
  .hero-main-btn{
    width:auto !important;
    min-width: 210px !important;
    padding: .95rem 1.35rem !important;
    border-radius: 16px !important;
    font-size:1rem !important;
  }

  .trust-row{
    margin-top:22px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }
  .trust-row .miniTag{
    font-size:.82rem !important;
    max-width:100% !important;
  }

  #home .premium-hero-panel,
  .premium-hero-panel,
  .hero-visual{
    display:none !important;
  }

  .panel{
    padding:32px 16px !important;
  }
  .panel-head h2{
    font-size:1.9rem !important;
  }
  .section-sub{
    font-size:1rem !important;
  }

  .loginmodal,
  .modal{
    width: calc(100% - 28px) !important;
  }
}

@media (max-width: 390px){
  #home .hero-title,
  .hero-title,
  .hero h1{
    font-size: clamp(2.35rem, 12.5vw, 3.25rem) !important;
  }
  #home .hero-sub,
  .hero-sub,
  .hero p{
    font-size:.98rem !important;
  }
}

/* ===== V11 MOBILE RESUME + LOGIN FIXES ===== */
@media (max-width: 760px){
  /* Make navbar/login reliably tappable */
  .navactions,
  #loginBtn{
    position: relative !important;
    z-index: 2000 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* Resume Studio mobile: single-column, no side-by-side funny layout */
  body.studio-page{
    background:#FBF6ED !important;
    overflow-x:hidden !important;
  }
  .studio-topbar{
    position: sticky !important;
    top:0 !important;
    z-index:50 !important;
    padding:10px 12px !important;
    gap:8px !important;
  }
  .st-left{
    min-width:0 !important;
    gap:8px !important;
  }
  .st-back{
    padding:.45rem .55rem !important;
    font-size:.86rem !important;
    white-space:nowrap !important;
  }
  .st-title{
    min-width:0 !important;
  }
  .st-name{
    font-size:.98rem !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }
  .st-sub{
    display:none !important;
  }
  .st-right .btn-primary,
  #downloadPdf{
    padding:.65rem .78rem !important;
    font-size:.86rem !important;
    border-radius:14px !important;
    white-space:nowrap !important;
  }

  .studio-wrap,
  .one-page-studio{
    display:block !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    padding:14px 12px 28px !important;
    gap:0 !important;
  }
  .studio-form,
  .studio-preview{
    width:100% !important;
    max-width:100% !important;
    position:static !important;
    top:auto !important;
    border-radius:20px !important;
  }
  .studio-form{
    margin:0 0 14px !important;
    min-height:auto !important;
  }
  .sf-head{
    padding:16px 16px 10px !important;
  }
  .sf-title{
    font-size:1.6rem !important;
    line-height:1.05 !important;
  }
  .sf-help{
    font-size:.94rem !important;
  }
  .sf-body{
    padding:12px !important;
  }
  .form-card{
    padding:16px !important;
    margin-bottom:14px !important;
    border-radius:18px !important;
  }
  .grid-2,
  .form-card .grid-2{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.72rem !important;
  }
  .f-input,
  .f-textarea,
  .field input,
  .field textarea,
  .field select{
    min-height:48px !important;
    font-size:16px !important; /* prevents mobile zoom */
    border-radius:14px !important;
  }
  .section-title-row{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:.7rem !important;
  }
  #addExperience{
    width:100% !important;
  }
  .experience-entry{
    padding:14px !important;
    border-radius:16px !important;
  }
  .exp-remove-wrap{
    justify-content:flex-start !important;
  }

  .studio-preview{
    padding:12px !important;
    margin-top:14px !important;
  }
  .sp-head{
    align-items:center !important;
    margin-bottom:10px !important;
  }
  .sp-paper{
    padding:10px !important;
    border-radius:16px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .ats-resume{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:auto !important;
    padding:18px 16px !important;
    font-size:11px !important;
    line-height:1.35 !important;
  }
  .ats-name{
    font-size:20px !important;
  }
  .ats-contact,
  .ats-section p,
  .ats-section div,
  .ats-section li{
    font-size:11px !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
  .ats-section h4{
    font-size:12px !important;
  }
}