/* Vertex Sovereign Diagnostic - demo styles
   Palette from the brief: navy #0A0E1A + gold #C9A84C. Institutional, calm. */

:root{
  --navy:#0A0E1A;
  --navy-2:#111726;
  --navy-3:#19202F;
  --panel:#141B2A;
  --line:#283246;
  --gold:#C9A84C;
  --gold-soft:#D8BE74;
  --text:#EAECEF;
  --muted:#9AA3B2;
  --muted-2:#6E7787;
  --red:#C0392B;
  --amber:#D4912B;
  --blue:#3C6E9E;
  --green:#3F7A52;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:980px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--navy);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--gold-soft);}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2;color:#fff;letter-spacing:.2px;}
h1{font-size:2.5rem;margin:0 0 .4em;}
h2{font-size:1.7rem;margin:0 0 .5em;}
h3{font-size:1.2rem;margin:0 0 .4em;}
p{margin:0 0 1em;}
.small{font-size:.85rem;}
.muted{color:var(--muted);}
.center{text-align:center;}
.gold{color:var(--gold);}
.serif{font-family:var(--serif);}
.tm{font-size:.6em;vertical-align:super;color:var(--gold);}

/* Layout ------------------------------------------------------------ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.narrow{max-width:680px;}
.section{padding:56px 0;}
.divider{height:1px;background:var(--line);border:0;margin:40px 0;}

/* Top bar ----------------------------------------------------------- */
.topbar{
  border-bottom:1px solid var(--line);
  background:rgba(10,14,26,.85);
  backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:10;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;}
.brand{font-family:var(--serif);font-size:1.15rem;color:#fff;letter-spacing:.5px;}
.brand .dot{color:var(--gold);}
.brand small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--muted-2);margin-top:1px;}
.navlinks a{margin-left:22px;font-size:.82rem;letter-spacing:.04em;color:var(--muted);}
.navlinks a:hover{color:var(--gold);}

/* Buttons ----------------------------------------------------------- */
.btn{
  display:inline-block;cursor:pointer;border:0;border-radius:3px;
  font-family:var(--sans);font-size:.95rem;letter-spacing:.03em;
  padding:15px 30px;transition:.15s;text-align:center;
}
.btn-gold{background:var(--gold);color:#10131c;font-weight:600;}
.btn-gold:hover{background:var(--gold-soft);color:#10131c;}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
.btn-block{display:block;width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* Eyebrow ----------------------------------------------------------- */
.eyebrow{
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}

/* Cards / panels ---------------------------------------------------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:28px;}
.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.feature{border-left:2px solid var(--gold);padding:4px 0 4px 18px;}
.feature h4{margin:0 0 4px;color:#fff;font-family:var(--sans);font-size:1rem;}
.feature p{margin:0;color:var(--muted);font-size:.9rem;}

.trust{display:flex;gap:26px;flex-wrap:wrap;color:var(--muted);font-size:.82rem;}
.trust span:before{content:"\2713";color:var(--gold);margin-right:8px;}

.ticks{list-style:none;padding:0;margin:10px 0 0;}
.ticks li{position:relative;padding:8px 0 8px 28px;color:var(--text);font-size:.93rem;
  border-bottom:1px solid var(--line);}
.ticks li:last-child{border-bottom:0;}
.ticks li:before{position:absolute;left:0;top:8px;font-size:.9rem;}
.ticks.yes li:before{content:"\2713";color:var(--green);}
.ticks.no li:before{content:"\2715";color:var(--muted-2);}

/* Hero -------------------------------------------------------------- */
.hero{padding:84px 0 64px;text-align:center;
  background:radial-gradient(1100px 500px at 50% -8%,rgba(201,168,76,.10),transparent 60%);}
.hero h1{font-size:3rem;}
.hero .sub{font-size:1.2rem;color:var(--muted);max-width:600px;margin:0 auto 32px;}
.price-tag{font-family:var(--serif);font-size:1.05rem;color:var(--text);margin:22px 0 6px;}
.price-tag b{color:var(--gold);font-size:1.3rem;}

/* Checkout ---------------------------------------------------------- */
.checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:start;}
@media(max-width:760px){.checkout-grid{grid-template-columns:1fr;}}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px;letter-spacing:.02em;}
.field input{
  width:100%;background:#0C1220;border:1px solid var(--line);border-radius:4px;
  color:var(--text);padding:13px 14px;font-size:.95rem;font-family:var(--sans);
}
.field input:focus{outline:none;border-color:var(--gold);}
.row{display:flex;gap:14px;}
.row .field{flex:1;}
.card-mock{display:flex;align-items:center;gap:8px;margin-top:2px;}
.summary-line{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted);}
.summary-line.total{color:#fff;font-size:1.1rem;border-bottom:0;padding-top:16px;}
.summary-line.total b{color:var(--gold);}
.demo-badge{display:inline-block;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.4);
  color:var(--gold);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:3px;margin-bottom:18px;}

/* Diagnostic / questionnaire --------------------------------------- */
.progress{height:3px;background:var(--navy-3);border-radius:2px;overflow:hidden;margin-bottom:8px;}
.progress > i{display:block;height:100%;background:var(--gold);width:0;transition:width .3s;}
.step-label{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);margin-bottom:30px;}
.q-card{min-height:340px;}
.q-help{color:var(--muted);font-size:.92rem;margin:-2px 0 26px;}
.options{display:flex;flex-direction:column;gap:12px;margin-bottom:10px;}
.opt{
  display:flex;align-items:flex-start;gap:14px;cursor:pointer;
  background:#0E1422;border:1px solid var(--line);border-radius:5px;
  padding:16px 18px;transition:.12s;color:var(--text);
}
.opt:hover{border-color:#3a455e;background:#10182a;}
.opt .mark{flex:0 0 18px;height:18px;margin-top:2px;border-radius:50%;border:2px solid var(--muted-2);transition:.12s;}
.opt.selected{border-color:var(--gold);background:rgba(201,168,76,.07);}
.opt.selected .mark{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px #0E1422;}
.opt.checkbox .mark{border-radius:4px;}
.opt-text{font-size:.96rem;line-height:1.45;}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;}
.text-input{width:100%;background:#0C1220;border:1px solid var(--line);border-radius:4px;
  color:var(--text);padding:14px 16px;font-size:1.05rem;font-family:var(--sans);}
.text-input:focus{outline:none;border-color:var(--gold);}

/* Processing -------------------------------------------------------- */
.processing{text-align:center;padding:90px 0;}
.spinner{width:46px;height:46px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--gold);margin:0 auto 26px;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Results ----------------------------------------------------------- */
.report-head{text-align:center;padding:30px 0 10px;}
.confidential{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);}
.score-hero{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:30px 0 10px;}
.score-badge{
  width:188px;height:188px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;flex:0 0 auto;
  background:radial-gradient(circle at 50% 40%,var(--navy-3),var(--navy-2));
  border:2px solid var(--gold);box-shadow:0 0 0 6px rgba(201,168,76,.06);
}
.score-badge b{font-family:var(--serif);font-size:4rem;line-height:1;color:#fff;}
.score-badge .outof{color:var(--muted);font-size:.9rem;margin-top:2px;}
.score-meta{max-width:420px;}
.band-pill{display:inline-block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 14px;border-radius:3px;border:1px solid var(--gold);color:var(--gold);margin-bottom:12px;}

.radar-wrap{display:flex;justify-content:center;padding:10px 0;}

.heat-table{width:100%;border-collapse:collapse;}
.heat-table th{text-align:left;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600;padding:0 0 12px;border-bottom:1px solid var(--line);}
.heat-table td{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:middle;}
.heat-name{font-size:.98rem;color:#fff;}
.heat-sum{font-size:.84rem;color:var(--muted);}
.bar{height:7px;border-radius:4px;background:var(--navy-3);overflow:hidden;min-width:120px;}
.bar > i{display:block;height:100%;border-radius:4px;}
.status-badge{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;
  border-radius:3px;color:#fff;white-space:nowrap;}

.risk{border-left:3px solid var(--red);background:#0F1422;border-radius:0 5px 5px 0;
  padding:18px 22px;margin-bottom:14px;}
.risk h4{margin:0 0 6px;font-family:var(--sans);color:#fff;font-size:1.04rem;}
.risk .dim{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;}
.risk p{margin:0;color:var(--muted);font-size:.92rem;}

.analysis-block{margin-bottom:26px;}
.analysis-block h3{display:flex;align-items:center;gap:12px;}
.analysis-block .chip{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;color:#fff;}
.analysis-block p{color:var(--muted);}

.cta-card{background:linear-gradient(160deg,#161d2d,#10141f);border:1px solid var(--gold);
  border-radius:8px;padding:34px;text-align:center;}
.cta-card h2{margin-bottom:10px;}
.cta-card p{color:var(--muted);max-width:560px;margin:0 auto 22px;}

/* Sessions ---------------------------------------------------------- */
.sess-table{width:100%;border-collapse:collapse;}
.sess-table th{text-align:left;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);padding:0 12px 12px;border-bottom:1px solid var(--line);}
.sess-table td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle;}
.sess-name{color:#fff;font-size:.98rem;background:transparent;border:1px solid transparent;
  border-radius:4px;padding:6px 8px;width:100%;font-family:var(--sans);}
.sess-name:focus{outline:none;border-color:var(--gold);background:#0C1220;}
.mini-band{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:3px;color:#fff;}
.empty{padding:60px 0;text-align:center;color:var(--muted);}

footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted-2);font-size:.78rem;}
.footnote{color:var(--muted-2);font-size:.76rem;}

/* Report v2 -------------------------------------------------------- */
.cover{text-align:center;padding:26px 0 6px;border-bottom:1px solid var(--line);margin-bottom:30px;}
.cover h1{font-size:2.3rem;margin:6px 0 10px;}
.cover-meta{color:var(--muted);font-size:.85rem;letter-spacing:.03em;margin-bottom:18px;}
.cover-meta .confidential{color:var(--gold);letter-spacing:.16em;}
.methodology{max-width:620px;margin:0 auto;color:var(--muted-2);font-size:.82rem;font-style:italic;}
.lead{font-size:1.05rem;}

.flagblock{background:linear-gradient(160deg,#1C1606,#14110A);border:1px solid #5A4A1E;
  border-radius:8px;padding:24px 26px;margin-bottom:30px;}
.flagcard{border-top:1px solid #3A3115;padding:16px 0 14px;}
.flagcard:first-of-type{border-top:0;}
.flag-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.flag-title{color:#fff;font-size:1.02rem;font-family:var(--serif);}
.flag-sev{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#0F1422;
  background:#E0A33A;padding:3px 9px;border-radius:3px;white-space:nowrap;}
.flag-mag{color:var(--gold-soft);font-size:.86rem;margin:6px 0 6px;}
.flagcard p{margin:0;color:var(--muted);font-size:.9rem;}

.insight{border-left:2px solid var(--gold);background:#10141f;border-radius:0 6px 6px 0;
  padding:16px 22px;margin-bottom:14px;}
.insight h4{margin:0 0 6px;font-family:var(--serif);color:#fff;font-size:1.06rem;font-weight:600;}
.insight p{margin:0;color:var(--muted);font-size:.93rem;}

.pattern{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px 24px;margin:18px 0 4px;}
.pattern p{margin:0;color:var(--text);font-size:.95rem;font-style:italic;}

.takeaway{background:rgba(63,122,82,.10);border-left:2px solid var(--green);
  padding:10px 16px;border-radius:0 4px 4px 0;color:var(--text);font-size:.9rem;margin:.6em 0 .4em;}
.takeaway b{color:#7FB68C;}
.stakes{color:var(--muted-2);font-size:.83rem;font-style:italic;margin:.2em 0 0;}

.openq{counter-reset:oq;list-style:none;padding:0;margin:18px 0 0;}
.openq li{counter-increment:oq;position:relative;padding:14px 0 14px 44px;border-bottom:1px solid var(--line);color:var(--text);font-size:.96rem;}
.openq li:before{content:counter(oq);position:absolute;left:0;top:12px;width:28px;height:28px;
  border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-family:var(--serif);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;}

.hero-insight{background:linear-gradient(155deg,#1A2236,#12182600);border:1px solid var(--gold);
  border-left-width:3px;border-radius:8px;padding:24px 28px;margin:24px 0 30px;}
.hero-insight h3{font-size:1.35rem;margin:6px 0 10px;color:#fff;}
.hero-insight p{margin:0;color:var(--text);font-size:1rem;}

.engagement{max-width:560px;margin:0 auto 22px;text-align:left;border:1px solid var(--line);
  border-radius:6px;padding:18px 22px;background:#0E1422;}
.eng-row{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);}
.eng-row:last-of-type{border-bottom:0;}
.eng-k{flex:0 0 110px;color:var(--gold);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding-top:2px;}
.eng-v{flex:1;color:var(--text);font-size:.92rem;}
.eng-reassure{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem;font-style:italic;}
.eng-anchor{margin-top:10px;color:var(--muted-2);font-size:.8rem;font-style:italic;}
.bridge-line{color:var(--gold-soft);font-family:var(--serif);font-size:1.05rem;margin:18px auto 0;max-width:520px;}

.cta-stewardship{border-color:var(--blue);}
.disclaimer{margin-top:30px;padding:18px 20px;background:#0C1018;border:1px solid var(--line);
  border-radius:6px;color:var(--muted-2);font-size:.76rem;line-height:1.55;}
.disclaimer b{color:var(--muted);}

/* ---- Responsive / mobile ---------------------------------------- */
.radar-wrap svg{max-width:100%;height:auto;}
img,svg{max-width:100%;}

@media (max-width:640px){
  .wrap{padding:0 18px;}
  .section{padding:38px 0;}
  .hero{padding:54px 0 38px;}
  h1{font-size:2rem;}
  .hero h1{font-size:2rem;line-height:1.18;}
  .cover h1{font-size:1.7rem;}
  h2{font-size:1.4rem;}
  .hero .sub{font-size:1.04rem;}
  .lead{font-size:1rem;}
  .eyebrow{font-size:.66rem;letter-spacing:.26em;}
  .score-hero{gap:18px;padding:18px 0 6px;}
  .score-badge{width:150px;height:150px;}
  .score-badge b{font-size:3rem;}
  .band-pill{font-size:.72rem;}
  .topbar .wrap{height:56px;}
  .brand{font-size:1.05rem;}
  .navlinks a{margin-left:14px;font-size:.76rem;}
  .price-tag{font-size:.94rem;}
  .panel{padding:22px 18px;}
  .cta-card{padding:24px 18px;}
  .flagblock{padding:20px 18px;}
  .trust{gap:14px;justify-content:flex-start;}

  /* Report heat map — keep readable, let the score bar shrink */
  .heat-table{font-size:.86rem;}
  .heat-table th{font-size:.62rem;letter-spacing:.08em;}
  .heat-table .bar{min-width:60px;}

  /* Sessions table — drop the noisy columns so it fits a phone */
  .sess-table th:nth-child(2), .sess-table td:nth-child(2),   /* date & time */
  .sess-table th:nth-child(5), .sess-table td:nth-child(5){   /* email */
    display:none;}
  .sess-table th, .sess-table td{padding:11px 8px;}

  /* Engagement bridge — stack label over value */
  .eng-row{flex-direction:column;gap:2px;}
  .eng-k{flex:none;}

  /* Checkout — expiry / CVC stack on very small screens */
  .row{flex-direction:column;gap:0;}
}