/* ==========================================================================
   Timeless HR — Payroll Compliance Readiness Assessment
   Design tokens
   ========================================================================== */
:root{
  --navy-950:#0A1628;
  --navy-900:#0E1E36;
  --navy-800:#142A4A;
  --navy-700:#1C3A63;
  --green-500:#06B6D4;
  --green-600:#0891B2;
  --green-100:#ECFEFF;
  --red-500:#E5484D;
  --red-100:#FDECEC;
  --amber-500:#F5A524;
  --amber-100:#FDF3E0;
  --ink-900:#101828;
  --ink-700:#344054;
  --ink-500:#667085;
  --ink-300:#98A2B3;
  --paper-0:#FFFFFF;
  --mist-100:#F5F8FA;
  --mist-200:#EAF0F3;
  --line:#E3E9ED;

  --font-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-card:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(16,24,40,.10);
  --shadow-float:0 16px 40px -12px rgba(10,22,40,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.modal-open{ overflow:hidden; }
h1,h2,h3{font-family:var(--font-display); margin:0; line-height:1.15;}
p{margin:0;}
button{font-family:inherit;}
input,select{font-family:inherit;}
img,svg{display:block; max-width:100%;}
a{color:inherit;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
.brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink-900);}
.brand__mark{display:flex;}
.brand__name{font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.01em;}
.brand__name b{font-weight:700; color:var(--green-600);}
.brand--light .brand__name{color:#fff;}
.brand--light .brand__name b{color:var(--green-500);}
.site-header__badge{
  font-size:12px; font-weight:600; color:var(--green-600);
  background:var(--green-100); padding:6px 12px; border-radius:999px;
  white-space:nowrap;
}

/* ==========================================================================
   Screens (top-level view switcher)
   ========================================================================== */
.screen{display:none;}
.screen.is-active{display:block;}

/* ==========================================================================
   Intro screen
   ========================================================================== */
.screen--intro{
  position:relative; overflow:hidden;
  min-height:100dvh;
  padding:22px 14px 36px;
  background:
    radial-gradient(640px 280px at 50% 0%, rgba(6,182,212,.16), transparent 70%),
    radial-gradient(520px 320px at 0% 20%, rgba(20,42,74,.07), transparent 72%),
    linear-gradient(180deg, #f6fbfd 0%, #ffffff 48%);
}
.intro-shell{
  max-width:520px; margin:0 auto;
  display:grid; gap:18px; align-items:start;
}
.intro{
  animation:rise .6s var(--ease) both;
  text-align:left;
  position:relative;
  z-index:1;
  padding:24px 18px 18px;
  border-radius:28px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,22,40,.06);
  box-shadow:0 24px 54px -34px rgba(10,22,40,.28);
}
.intro > *{
  position:relative;
  z-index:1;
}
.intro__alert{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.intro__alert-icon{
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(229,72,77,.1);
  border:1px solid rgba(229,72,77,.18);
  position:relative;
  flex:none;
}
.intro__alert-icon::before{
  content:'';
  position:absolute;
  left:7px; top:5px;
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:11px solid var(--red-500);
}
.intro__alert-icon::after{
  content:'!';
  position:absolute;
  left:11px; top:8px;
  color:#fff;
  font-size:8px;
  font-weight:800;
  line-height:1;
}
.intro__alert-text{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red-500);
}
.intro__title{
  font-size:clamp(33px,10vw,48px);
  font-weight:700;
  letter-spacing:-.05em;
  color:var(--navy-950);
  max-width:none;
  margin:0 0 14px;
  line-height:.96;
}
.intro__risk{
  color:#c24529;
}
.intro__title-soft{
  font-weight:600;
  color:var(--navy-900);
}
.intro__lede{
  font-size:15px; line-height:1.65; color:var(--ink-700);
  max-width:none; margin:0 0 12px;
}
.intro__lede--support{
  font-size:14px;
  line-height:1.58;
  color:var(--navy-700);
  max-width:none;
  margin:0 0 16px;
}
.intro__meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-bottom:14px;
}
.intro__meta-pill{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-height:88px;
  padding:12px 12px 10px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(10,22,40,.07);
  color:var(--navy-700);
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  box-shadow:0 16px 28px -24px rgba(10,22,40,.28);
  opacity:0;
  transform:translateY(8px);
  animation:badgeIn .45s var(--ease) forwards;
}
.intro__meta-pill:nth-child(1){ animation-delay:.04s; }
.intro__meta-pill:nth-child(2){ animation-delay:.12s; }
.intro__meta-pill:nth-child(3){ animation-delay:.2s; }
.intro__meta-pill:nth-child(1) .intro__meta-icon{ background:#e9fbfe; color:#0ea5b7; }
.intro__meta-pill:nth-child(2) .intro__meta-icon{ background:#eef7ff; color:#2563eb; }
.intro__meta-pill:nth-child(3) .intro__meta-icon{ background:#ecfdf5; color:#059669; }
.intro__meta-pill:nth-child(3) .intro__meta-icon--score::before{
  border-color:#059669;
  border-right-color:transparent;
}
.intro__meta-icon{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--green-100);
  color:var(--green-600);
  font-size:11px; font-weight:800; flex:none;
  position:relative;
}
.intro__meta-icon::before,
.intro__meta-icon::after{
  content:'';
  position:absolute;
}
.intro__meta-icon--score::before{
  width:10px;
  height:10px;
  border-radius:50%;
  border:2px solid var(--green-600);
  border-right-color:transparent;
  transform:rotate(-35deg);
}
.intro__meta-icon--secure::before{
  width:9px;
  height:7px;
  border:2px solid currentColor;
  border-top:none;
  border-radius:0 0 3px 3px;
  top:9px;
}
.intro__meta-icon--secure::after{
  width:8px;
  height:6px;
  border:2px solid currentColor;
  border-bottom:none;
  border-radius:8px 8px 0 0;
  top:4px;
}
.intro__meta-icon--fast::before{
  width:9px;
  height:9px;
  border-radius:50%;
  border:2px solid currentColor;
}
.intro__meta-icon--fast::after{
  width:5px;
  height:2px;
  background:currentColor;
  transform-origin:left center;
  transform:translate(2px,-1px) rotate(35deg);
}
.intro__proof{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(6,182,212,.06), rgba(6,182,212,.02));
  border:1px solid rgba(6,182,212,.12);
  margin-bottom:16px;
}
.intro__avatars{
  display:flex;
  align-items:center;
  flex:none;
}
.intro__avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #dffaff, #bdeef6);
  color:var(--green-600);
  font-size:11px;
  font-weight:800;
  border:2px solid #fff;
  margin-left:-8px;
}
.intro__avatar:first-child{ margin-left:0; }
.intro__proof-text{
  font-size:12.5px;
  line-height:1.45;
  color:var(--navy-700);
}
.intro__proof-text strong{
  color:var(--navy-950);
}
.intro__cta-row{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.intro__cta-row .btn{
  width:100%;
  min-height:58px;
  justify-content:center;
  padding:18px 20px;
  font-size:16px;
  box-shadow:0 18px 38px -24px rgba(10,22,40,.44);
  animation:ctaPulse 3.2s var(--ease) infinite;
}
.btn__copy{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn__pulse{
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  border:1px solid rgba(10,22,40,.08);
  opacity:0;
  pointer-events:none;
  animation:btnHalo 3.2s ease-out infinite;
}
.intro__step-note{
  font-size:12px;
  color:var(--ink-500);
  text-align:center;
}
.intro__teaser{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(10,22,40,.03), rgba(10,22,40,.01));
  border:1px solid rgba(10,22,40,.06);
}
.intro__teaser-gauge{
  position:relative;
  width:92px;
  height:92px;
  flex:none;
  opacity:.72;
}
.intro__teaser-label{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--navy-950);
}
.intro__teaser-label span{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:700;
  line-height:1;
}
.intro__teaser-label small{
  font-size:11px;
  color:var(--ink-500);
  font-weight:700;
}
.intro__teaser-copy strong{
  display:block;
  font-size:14px;
  color:var(--navy-950);
  margin-bottom:4px;
}
.intro__teaser-copy span{
  display:block;
  font-size:12.5px;
  line-height:1.45;
  color:var(--ink-700);
}
.ring-track{ fill:none; stroke:var(--mist-200); stroke-width:14; }
.ring-fill{
  fill:none; stroke:var(--green-500); stroke-width:14; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:100px 100px;
  stroke-dasharray:540.35; stroke-dashoffset:540.35;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.ring-fill--teaser{
  stroke:var(--mist-200);
  stroke-dasharray:263.89;
  stroke-dashoffset:176;
}

@media (min-width:900px){
  .screen--intro{ padding:54px 40px 84px; }
  .intro-shell{ max-width:720px; grid-template-columns:minmax(0, 1fr); gap:24px; }
  .intro{ text-align:left; }
  .intro__meta,
  .intro__cta-row{ justify-content:flex-start; }
  .intro__cta-row{ align-items:flex-start; }
  .intro__title,
  .intro__lede,
  .intro__lede--support{ margin-left:0; margin-right:0; }
  .intro{ padding:34px 34px 24px; }
  .intro__title{
    font-size:clamp(44px,5vw,70px);
    max-width:13.5ch;
    line-height:.94;
  }
  .intro__lede,
  .intro__lede--support,
  .intro__meta,
  .intro__proof,
  .intro__cta-row,
  .intro__teaser{ max-width:960px; }
  .intro__lede{ font-size:18px; }
  .intro__meta{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .intro__cta-row .btn{ padding:18px 30px; font-size:17px; max-width:420px; }
}

@media (max-width:640px){
  .screen--intro{ padding:18px 12px 28px; }
  .intro-shell{ gap:14px; }
  .intro{ padding:20px 16px 16px; border-radius:24px; }
  .intro__title{ font-size:clamp(31px,10vw,42px); }
  .intro__meta-pill{ min-height:84px; padding:12px 10px 10px; font-size:11.5px; }
  .intro__proof{ margin-bottom:14px; }
  .intro__teaser{ margin-top:12px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --btn-fg:#fff;
  appearance:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:15px; border-radius:999px;
  padding:13px 22px; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  color:var(--btn-fg);
  position:relative;
  overflow:hidden;
}
.btn--primary{ background:var(--navy-950); }
.btn--primary:hover{ background:var(--navy-900); transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(10,22,40,.4); }
.btn--primary:active{ transform:translateY(0); }
.btn--lg{ padding:15px 26px; font-size:16px; }
.btn--block{ width:100%; }

.btn svg{ transition:transform .18s var(--ease); }
.btn:hover svg{ transform:translateX(2px); }
.btn--continue{ margin-top:22px; }
.btn:disabled{ cursor:default; }
.btn__spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  display:none; flex:none;
  animation:spin .8s linear infinite;
}
.btn.is-loading .btn__spinner{ display:block; }
.btn.is-loading .btn__icon{ display:none; }
.btn.is-loading .btn__label{ opacity:.92; }

.btn-back{
  appearance:none; border:1px solid var(--line); background:#fff; cursor:pointer;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--ink-500); margin-bottom:18px; transition:background .15s, color .15s, border-color .15s;
}
.btn-back:hover{ background:var(--mist-100); color:var(--ink-900); border-color:var(--ink-300); }
.btn-back:disabled{ opacity:0; pointer-events:none; }
.btn-back-link{
  appearance:none; border:none; background:transparent; cursor:pointer;
  padding:0; color:var(--ink-500); font-size:14px; font-weight:700;
  transition:color .18s var(--ease), opacity .18s var(--ease);
}
.btn-back-link:hover{ color:var(--ink-900); }
.btn-back-link:disabled{ opacity:.35; pointer-events:none; }

/* ==========================================================================
   Quiz shell — mobile first (single column), desktop split panel
   ========================================================================== */
.quiz-shell{
  min-height:100dvh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(6,182,212,.08), transparent 60%),
    linear-gradient(180deg, #f7fbfd 0%, #ffffff 40%);
}
.brand-panel{
  background:radial-gradient(120% 140% at 10% 0%, var(--navy-800) 0%, var(--navy-950) 60%);
  color:#fff; padding:22px 20px 28px;
  display:flex; flex-direction:column; gap:16px;
  border-bottom-left-radius:24px;
  border-bottom-right-radius:24px;
  box-shadow:0 18px 40px -26px rgba(10,22,40,.55);
}
.brand-panel__step-label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-500); margin:0 0 8px; }
.brand-panel__title{ font-size:20px; font-weight:600; color:#fff; margin-bottom:6px; line-height:1.18; }
.brand-panel__hint{ font-size:13px; color:rgba(255,255,255,.72); line-height:1.6; max-width:32ch; }
.brand-panel__visual{
  margin-top:18px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.brand-panel__visual-icon{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px;
  background:rgba(6,182,212,.14);
  color:var(--green-500);
  margin-bottom:14px;
  box-shadow:0 0 0 10px rgba(6,182,212,.08);
}
.brand-panel__visual-copy strong{
  display:block;
  font-size:16px;
  margin-bottom:6px;
}
.brand-panel__visual-copy span{
  display:block;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.72);
}
.brand-panel__report-build{
  display:none;
}
.brand-panel__report-bar{
  display:block;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
}
.brand-panel__report-bar::after{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:var(--fill, 0%);
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(6,182,212,.5), rgba(6,182,212,1));
  transition:width .35s var(--ease);
}
.brand-panel__foot{ display:none; }
.brand-panel__body{ transition:opacity .25s var(--ease); }

.question-panel{
  position:relative; flex:1;
  padding:18px 16px 32px;
  display:flex; flex-direction:column;
}
.question-panel__topbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.question-panel__topbar .btn-back{ margin-bottom:0; }
.progress-shell{ margin-bottom:14px; }
.progress-track{
  height:6px; background:var(--mist-200); border-radius:999px; overflow:hidden; margin-bottom:18px; flex:none;
  position:relative;
}
.progress-fill{
  height:100%; width:0%; background:linear-gradient(90deg, var(--green-600), var(--green-500));
  border-radius:999px; transition:width .5s var(--ease);
}
.progress-dots{ display:none; }
.progress-dot{
  height:9px;
  border-radius:999px;
  background:var(--mist-200);
  transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease);
}
.progress-dot.is-done{
  background:linear-gradient(90deg, var(--green-600), var(--green-500));
  box-shadow:0 0 0 4px rgba(6,182,212,.08);
}
.progress-dot.is-current{
  background:var(--green-500);
  transform:scaleY(1.15);
  box-shadow:0 0 0 6px rgba(6,182,212,.12);
}
.progress-note{
  font-size:13px;
  font-weight:700;
  color:var(--navy-700);
}

.steps{ position:relative; flex:1; }
.step{
  display:none;
}
.step.is-current{
  display:block;
  animation:stepIn .45s var(--ease) both;
}
.step.is-current{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(10,22,40,.06);
  border-radius:28px;
  box-shadow:0 20px 48px -34px rgba(10,22,40,.32);
  padding:22px 18px 24px;
  position:relative;
  overflow:hidden;
}
.step.is-current::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--green-500), rgba(6,182,212,.25));
}
.step__section-card{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  padding:9px 12px;
  border-radius:999px;
  background:var(--mist-100);
  border:1px solid rgba(10,22,40,.06);
}
.step__section-chip{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green-600);
}
.step__section-arrow{
  font-size:12px;
  font-weight:700;
  color:var(--navy-700);
}
@keyframes stepIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes stepOut{
  from{ opacity:1; transform:translateY(0); }
  to{ opacity:0; transform:translateY(-10px); }
}
.step.is-leaving{ animation:stepOut .22s var(--ease) both; }

.step__eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green-600);
  margin-bottom:12px;
  display:inline-flex; align-items:center; gap:8px;
}
.step__eyebrow-icon{
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(6,182,212,.12);
  box-shadow:0 0 0 6px rgba(6,182,212,.08);
}
.step__q{
  font-size:clamp(28px,5.8vw,38px); font-weight:700; color:var(--navy-950);
  letter-spacing:-.03em; line-height:1.05; margin-bottom:8px;
}
.step__hint{ font-size:14px; color:var(--ink-500); margin-bottom:20px; line-height:1.55; }
.step__q + .choices{ margin-top:20px; }

@media (max-width:899px){
  .brand-panel{ display:none; }
  .question-panel{
    padding:16px 16px 28px;
  }
  .question-panel__topbar{
    margin-bottom:10px;
  }
  .progress-track{
    margin-bottom:10px;
  }
  .progress-shell{
    margin-bottom:12px;
  }
}

.choices{ display:grid; gap:10px; }
.choice{ display:block; cursor:pointer; }
.choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.choice__box{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:68px;
  padding:18px 20px; border-radius:20px; border:1.5px solid var(--line); background:#fff;
  transition:border-color .22s var(--ease), background .22s var(--ease), transform .18s var(--ease), box-shadow .22s var(--ease);
  position:relative;
  overflow:hidden;
}
.choice__label{ font-size:16px; font-weight:600; color:var(--ink-900); line-height:1.35; }
.choice__box::after{
  content:'';
  position:absolute;
  inset:auto -18% -50% auto;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(6,182,212,.18), rgba(6,182,212,0) 72%);
  opacity:0;
  transform:scale(.65);
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}

@media (hover: hover) and (pointer: fine){
  .choice:hover .choice__box{ border-color:var(--green-500); background:var(--green-100); }
  .choice--check:hover .choice__box{
    background:#fff;
    box-shadow:none;
  }
}
.choice__box:active{ transform:scale(.985); }
.choice input:checked + .choice__box{
  border-color:var(--green-500); background:var(--green-100);
  box-shadow:0 0 0 3px rgba(6,182,212,.14), 0 14px 26px -24px rgba(6,182,212,.85);
  transform:scale(1.015);
}
.choice--check input:not(:checked) + .choice__box{
  background:#fff;
  border-color:var(--line);
  box-shadow:none;
  transform:none;
}
.choice input:checked + .choice__box::after{
  opacity:1;
  transform:scale(1);
}
.choice--check input:not(:checked) + .choice__box::after{
  opacity:0;
  transform:scale(.65);
}
.choice.is-pulsing .choice__box{
  animation:choicePulse .32s var(--ease);
}

.choice__tick{
  width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent;
  transition:all .2s var(--ease); flex:none;
}
.choice input:checked + .choice__box .choice__tick{
  background:var(--green-500); border-color:var(--green-500); color:#fff;
  transform:scale(1.05);
}
.choice--check .choice__box{ justify-content:space-between; }

.confidence-card{
  margin-top:18px;
  padding:20px 18px 18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(6,182,212,.08), rgba(6,182,212,.03));
  border:1px solid rgba(6,182,212,.14);
}
.confidence-card__top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  font-size:12px;
  font-weight:700;
  color:var(--navy-700);
}
.confidence-card__top strong{
  font-family:var(--font-display);
  font-size:22px;
  color:var(--navy-950);
}
.confidence-card__top span:last-child{ text-align:right; }
.confidence-card__slider{
  width:100%;
  accent-color:var(--green-500);
}
.confidence-card__scale{
  display:grid;
  grid-template-columns:repeat(10, minmax(0, 1fr));
  gap:4px;
  margin-top:12px;
  font-size:11px;
  font-weight:700;
  color:var(--ink-500);
  text-align:center;
}

/* Lead capture form */
.step--lead .step__q{ margin-bottom:6px; }
.lead-form{ display:grid; gap:14px; margin-top:20px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-700); margin-bottom:6px; }
.field input{
  width:100%; padding:13px 14px; font-size:15px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:#fff; color:var(--ink-900);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field select{
  width:100%; padding:13px 14px; font-size:15px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:#fff; color:var(--ink-900);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus{ outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px rgba(6,182,212,.15); }
.field select:focus{ outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px rgba(6,182,212,.15); }
.field input.is-invalid{
  border-color:var(--red-500);
  box-shadow:0 0 0 3px rgba(229,72,77,.12);
}
.field select.is-invalid{
  border-color:var(--red-500);
  box-shadow:0 0 0 3px rgba(229,72,77,.12);
}
.field--hp{ position:absolute; left:-9999px; top:-9999px; }
.field__error{ margin-top:6px; font-size:12px; color:var(--red-500); }
.lead-form__privacy{ font-size:12px; color:var(--ink-500); text-align:center; margin-top:4px; }

@media (min-width:900px){
  .quiz-shell{ flex-direction:row; }
  .brand-panel{
    width:360px; flex:none; padding:44px 40px; justify-content:space-between; min-height:100dvh; position:sticky; top:0;
    border-radius:0;
    box-shadow:none;
  }
  .brand-panel__title{ font-size:26px; }
  .brand-panel__hint{ font-size:14.5px; }
  .brand-panel__foot{ display:flex; align-items:center; gap:12px; }
  .brand-panel__foot-text{ font-size:12px; color:rgba(255,255,255,.55); line-height:1.5; }
  .step__section-card{ display:none; }
  .mini-ring-track{ fill:none; stroke:rgba(255,255,255,.15); stroke-width:4; }
  .mini-ring-fill{
    fill:none; stroke:var(--green-500); stroke-width:4; stroke-linecap:round;
    transform:rotate(-90deg); transform-origin:20px 20px;
    stroke-dasharray:100.5; stroke-dashoffset:100.5; transition:stroke-dashoffset .5s var(--ease);
  }
  .question-panel{ max-width:760px; margin:0 auto; padding:56px 40px 60px; justify-content:center; }
  .question-panel__topbar{ margin-bottom:18px; }
  .step.is-current{ padding:34px 32px 32px; }
  .choices{ gap:12px; }
}

@keyframes choicePulse{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.018); }
  100%{ transform:scale(1); }
}

@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ==========================================================================
   Results screen (report)
   ========================================================================== */
.screen--results{ background:var(--mist-100); min-height:100dvh; }
.report{ max-width:760px; margin:0 auto; padding:0 20px 64px; }

.report__hero{
  text-align:center; padding:44px 0 28px;
  animation:rise .5s var(--ease) both;
  position:relative;
}
.gauge{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; }
.gauge__label{ position:absolute; text-align:center; }
.gauge__num{ font-family:var(--font-display); font-size:44px; font-weight:700; color:var(--navy-950); }
.gauge__label small{ display:block; font-size:12px; color:var(--ink-500); font-weight:600; }

.report__eyebrow{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green-600); margin-bottom:10px; }
.report__greeting{ font-size:clamp(22px,5vw,30px); font-weight:700; color:var(--navy-950); margin-bottom:6px; }
.report__profile{ font-size:16px; font-weight:600; color:var(--navy-700); margin-bottom:10px; }
.report__intro{ font-size:15px; color:var(--ink-700); max-width:48ch; margin:0 auto; line-height:1.55; }


.report__section{
  background:#fff; border-radius:var(--radius-lg); padding:26px 22px; margin-bottom:16px;
  box-shadow:var(--shadow-card); border:1px solid var(--line);
  animation:rise .5s var(--ease) both;
}
.report__h2{ font-size:18px; font-weight:600; color:var(--navy-950); margin-bottom:12px; }
.report__body{ font-size:14.5px; line-height:1.65; color:var(--ink-700); }

.summary-grid{ display:grid; gap:12px; }
.summary-card{ padding:16px 16px; border-radius:var(--radius-md); }
.summary-card--strength{ background:var(--green-100); }
.summary-card--gap{ background:var(--amber-100); }
.summary-card__label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-500); margin-bottom:6px; }
.summary-card__value{ font-size:15px; font-weight:600; color:var(--navy-950); line-height:1.4; }
@media (min-width:600px){ .summary-grid{ grid-template-columns:1fr 1fr; } }

.checklist{ display:grid; gap:10px; }
.check-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 15px; border-radius:var(--radius-sm); background:var(--mist-100);
  opacity:0; transform:translateY(8px);
  animation:rise .4s var(--ease) forwards;
}
.check-row__label{ font-size:14px; font-weight:500; color:var(--ink-900); }
.check-pill{ font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.check-pill--strong{ background:var(--green-100); color:var(--green-600); }
.check-pill--fair{ background:var(--amber-100); color:#946200; }
.check-pill--weak{ background:var(--red-100); color:var(--red-500); }

.report__section--risk{ background:var(--navy-950); border:none; }
.report__section--risk .report__h2{ color:#fff; }
.report__section--risk .report__body{ color:rgba(255,255,255,.72); }

.report__section--cta{ background:linear-gradient(160deg, var(--navy-950), var(--navy-800)); border:none; }
.report__section--cta .report__h2, #report-cta-title{ color:#fff; }
.report__section--cta .report__body{ color:rgba(255,255,255,.75); margin-bottom:20px; }
.cta-row{ display:grid; gap:10px; }
.cta-row .btn--primary{ background:var(--green-500); color:var(--navy-950); }
.cta-row .btn--primary:hover{ background:var(--green-600); box-shadow:0 8px 20px -6px rgba(6,182,212,.5); }
.cta-row .btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.2); }
.cta-row .btn--ghost:hover{ background:rgba(255,255,255,.14); }
@media (min-width:520px){ .cta-row{ grid-auto-flow:column; grid-auto-columns:1fr; } }

.report__footer{ text-align:center; padding:28px 10px 0; }
.report__footer p{ font-size:13px; color:var(--ink-500); margin-bottom:10px; line-height:1.6; }
.report__back-link{ font-size:13px; font-weight:600; color:var(--navy-700); text-decoration:none; }
.report__back-link:hover{ text-decoration:underline; }

.next-step-page{ background:linear-gradient(180deg, #f8fbfd 0%, #ffffff 24%); min-height:100dvh; }
.next-hero{
  background:radial-gradient(120% 140% at 10% 0%, var(--navy-800) 0%, var(--navy-950) 60%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.next-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 220px at 78% 18%, rgba(229,72,77,.18), transparent 70%),
    radial-gradient(520px 280px at 20% 0%, rgba(6,182,212,.14), transparent 72%);
  pointer-events:none;
}
.next-hero::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:18px;
  width:2px;
  height:74px;
  background:linear-gradient(180deg, rgba(6,182,212,.8), rgba(6,182,212,0));
  opacity:.7;
}
.next-hero__inner,
.next-section__inner{
  max-width:1040px; margin:0 auto; padding:56px 20px;
}
.next-hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:28px;
  align-items:center;
}
.next-hero__copy{ text-align:center; }
.next-hero__eyebrow,
.section-kicker{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-500);
}
.next-hero__title,
.section-title{
  font-family:var(--font-display); letter-spacing:-.02em; color:var(--navy-950);
}
.next-hero__title{
  font-size:clamp(30px,6vw,52px); color:#fff; max-width:12ch; margin:14px auto;
}
.next-hero__name{
  color:#6fe4f3;
  text-shadow:0 0 24px rgba(6,182,212,.18);
}
.next-hero__body,
.section-copy,
.offer-panel__body,
.offer-card__text,
.testimonial-card__quote{
  font-size:16px; line-height:1.7;
}
.next-hero__body{ color:rgba(255,255,255,.78); max-width:60ch; margin:0 auto; }
.next-hero__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:28px; }
.score-chip,
.profile-chip,
.logo-pill{
  border-radius:999px; padding:12px 16px; backdrop-filter:blur(10px);
}
.profile-chip{
  display:flex; align-items:center; background:rgba(6,182,212,.16); color:#fff; border:1px solid rgba(6,182,212,.35);
}
.next-score{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.next-score__halo{
  position:absolute;
  top:22px;
  width:290px;
  height:290px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(229,72,77,.16), rgba(245,165,36,.10) 40%, rgba(6,182,212,0) 72%);
  filter:blur(10px);
  animation:pulseHalo 2.8s ease-in-out infinite;
}
.next-score__card{
  position:relative;
  width:min(100%, 360px);
  padding:22px 22px 20px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 64px -34px rgba(0,0,0,.7);
  backdrop-filter:blur(16px);
}
.next-score__gauge-wrap{
  position:relative;
  width:236px;
  height:236px;
  margin:0 auto 14px;
}
.next-score__gauge{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.next-score__track{
  fill:none;
  stroke:rgba(255,255,255,.1);
  stroke-width:18;
}
.next-score__fill{
  fill:none;
  stroke:url(#scoreArcGradient);
  stroke-width:18;
  stroke-linecap:round;
  stroke-dasharray:515.22;
  stroke-dashoffset:515.22;
  transition:stroke-dashoffset 1.3s var(--ease);
}
.next-score__pulse{
  fill:none;
  stroke:rgba(229,72,77,.28);
  stroke-width:3;
  stroke-dasharray:5 8;
  transform-origin:110px 110px;
  animation:spinSlow 18s linear infinite;
}
.next-score__center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.next-score__number{
  font-family:var(--font-display);
  font-size:clamp(48px,10vw,76px);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.05em;
  color:#fff;
}
.next-score__scale{
  margin-top:2px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.next-score__caption{
  margin-top:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.84);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.next-score__status{
  text-align:center;
}
.next-score__status strong{
  display:block;
  font-size:18px;
  color:#ffd1b8;
  margin-bottom:6px;
}
.next-score__status span{
  font-size:14px;
  color:rgba(255,255,255,.7);
}
.next-score__cue{
  color:#7fe8f5;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  animation:bobCue 1.8s ease-in-out infinite;
}
.next-section__inner{ padding:52px 20px; }
.next-section__inner--narrow{ max-width:760px; text-align:center; }
.next-section > .next-section__inner{
  text-align:center;
}
.section-kicker--pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 20px; border-radius:999px;
  border:1px solid rgba(6,182,212,.45); background:rgba(255,255,255,.66);
}
.section-title{ font-size:clamp(28px,5vw,40px); margin:12px auto 14px; max-width:14ch; }
.section-copy{ color:var(--ink-700); max-width:40ch; margin:0 auto; }
.next-section--branch .section-copy{
  max-width:48ch;
}
.logo-row{
  display:flex; align-items:center; gap:64px;
  margin-top:40px; padding:24px 12px 8px;
  overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}
.logo-track{
  display:flex; align-items:center; gap:64px; flex:none;
  min-width:max-content;
  animation:logoMarquee 24s linear infinite;
}
.logo-pill{
  padding:0; border-radius:0; backdrop-filter:none;
  text-align:center; background:transparent; border:none; box-shadow:none;
  color:#334867; font-weight:700; font-size:clamp(18px,2.1vw,28px); line-height:1.2;
  white-space:nowrap;
  opacity:.96;
}
@media (hover: hover) and (pointer: fine){
  .logo-row:hover .logo-track{ animation-play-state:paused; }
  .logo-pill:hover{ color:var(--navy-950); }
}
.next-section--testimonials{ background:var(--mist-100); }
.testimonial-grid{
  display:grid; gap:16px; margin-top:26px;
  grid-auto-flow:column; grid-auto-columns:minmax(84%, 84%);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.testimonial-grid::-webkit-scrollbar{ display:none; }
.testimonial-card,
.offer-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
}
.testimonial-card{ padding:24px; scroll-snap-align:start; min-height:100%; }
.testimonial-card__person{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.testimonial-card__avatar{
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #d7f8fc, #bdebf6);
  color:var(--green-600);
  font-size:14px;
  font-weight:800;
  flex:none;
}
.testimonial-card__meta{
  text-align:left;
}
.testimonial-card__stars{ color:var(--green-600); font-size:18px; letter-spacing:.08em; margin-bottom:12px; }
.testimonial-card__quote{ color:var(--ink-700); margin-bottom:14px; }
.testimonial-card__quote strong{ color:var(--green-600); }
.testimonial-card__author{ font-weight:700; color:var(--navy-950); }
.testimonial-card__company{ font-size:13px; color:var(--ink-500); margin-top:3px; }
.benefit-list{
  list-style:none;
  margin:24px auto 0;
  padding:0;
  display:grid;
  gap:12px;
  justify-items:center;
  max-width:640px;
}
.benefit-list li{
  display:flex; align-items:center; justify-content:flex-start; gap:14px;
  width:100%;
  padding:16px 18px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  font-size:16px; color:var(--ink-700);
  text-align:left;
}
.benefit-list li::before{
  content:'';
  width:44px;
  height:44px;
  border-radius:14px;
  flex:none;
  background:
    no-repeat center/20px 20px,
    linear-gradient(135deg, #dff9fd, #eefcfe);
  border:1px solid rgba(6,182,212,.14);
}
.benefit-list li[data-icon="knowledge"]::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 5.5C6 4.67 6.67 4 7.5 4H18v14H7.5A1.5 1.5 0 0 0 6 19.5M6 5.5v14M6 5.5A1.5 1.5 0 0 1 7.5 4' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.benefit-list li[data-icon="process"]::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3v4M12 17v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M3 12h4M17 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83M12 8a4 4 0 1 1 0 8a4 4 0 0 1 0-8Z' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.benefit-list li[data-icon="tools"]::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 7.5h18v10H3zM7 7.5V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.5M3 12h18' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.benefit-list li[data-icon="review"]::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 15l5 5M10 17a7 7 0 1 1 0-14a7 7 0 0 1 0 14Z' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.offer-panel{
  margin-top:30px; padding:26px; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, #f8feff 0%, #ffffff 100%); border:1px solid #c9eef7;
  position:relative;
  overflow:hidden;
}
.offer-panel::before{
  content:'';
  position:absolute;
  top:-40px; right:-40px;
  width:140px; height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(6,182,212,.16), transparent 70%);
}
.offer-panel__title{ font-size:28px; color:var(--navy-950); margin:10px 0 10px; }
.offer-grid{
  display:grid;
  gap:22px;
  margin-top:26px;
  position:relative;
}
.offer-grid--stack::before{
  content:'';
  position:absolute;
  top:44px;
  left:50%;
  width:2px;
  height:calc(100% - 88px);
  background:repeating-linear-gradient(
    180deg,
    rgba(6,182,212,.42) 0,
    rgba(6,182,212,.42) 7px,
    transparent 7px,
    transparent 15px
  );
  transform:translateX(-50%);
}
.offer-card{
  padding:26px 22px 22px;
  text-align:left;
  position:relative;
}
.offer-card__step{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--green-500), var(--green-600));
  color:#fff;
  font-size:18px;
  font-weight:800;
  box-shadow:0 14px 30px -18px rgba(6,182,212,.65);
  margin-bottom:14px;
}
.offer-card__flow{
  position:absolute;
  right:18px;
  top:24px;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green-600);
  background:var(--green-100);
  font-size:20px;
  font-weight:800;
}
.offer-card__eyebrow{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-600); margin-bottom:10px; }
.offer-card__price{ font-size:24px; color:var(--navy-950); margin:0 0 10px; }
.offer-card__text{ color:var(--ink-700); }
.next-cta{
  margin-top:34px;
  position:relative;
  padding-top:18px;
}
.next-cta::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  width:120px;
  height:2px;
  background:linear-gradient(90deg, rgba(6,182,212,0), rgba(6,182,212,.7), rgba(6,182,212,0));
  transform:translateX(-50%);
}
.next-cta .btn{
  min-width:min(100%, 420px);
  padding:18px 30px;
  font-size:17px;
  background:linear-gradient(135deg, var(--green-500), var(--green-600));
  color:#fff;
  box-shadow:0 22px 42px -24px rgba(6,182,212,.68);
}
.next-cta .btn:hover{
  transform:translateY(-2px) scale(1.01);
}
.next-cta .btn::after{
  content:'→';
  margin-left:10px;
  transition:transform .18s var(--ease);
}
.next-cta .btn:hover::after{
  transform:translateX(3px);
}
.next-section--bottom{
  background:linear-gradient(160deg, var(--navy-950), var(--navy-800)); color:#fff;
}
.next-section--bottom .section-title,
.next-section--bottom .section-copy{ color:#fff; }
.next-section--bottom .section-copy{ opacity:.78; max-width:54ch; margin:0 auto 22px; }
.next-section--bottom .btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  box-shadow:none;
  padding:14px 22px;
  font-size:15px;
}
.next-section--bottom .btn:hover{
  background:rgba(255,255,255,.08);
}

.booking-page{ background:linear-gradient(180deg, #f6fbfd 0%, #ffffff 30%); min-height:100dvh; }
.booking-hero{
  background:radial-gradient(120% 140% at 10% 0%, var(--navy-800) 0%, var(--navy-950) 60%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.booking-hero__inner,
.booking-section__inner{
  max-width:920px; margin:0 auto; padding:56px 20px;
}
.booking-hero__inner{ text-align:center; }
.booking-hero__eyebrow{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-500); }
.booking-hero__title{ font-size:clamp(30px,5vw,48px); color:#fff; margin:12px auto 14px; max-width:12ch; }
.booking-hero__body{ font-size:16px; line-height:1.7; color:rgba(255,255,255,.8); max-width:56ch; margin:0 auto; }
.booking-hero__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:26px; }
.booking-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:28px 22px;
  position:relative;
}
.booking-form{ max-width:640px; margin:0 auto; }
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal__backdrop{
  position:absolute; inset:0; background:rgba(10,22,40,.58);
  backdrop-filter:blur(4px);
}
.modal__dialog{
  position:relative; z-index:1; width:min(100%, 460px);
  background:#fff; border-radius:var(--radius-lg); padding:28px 24px;
  box-shadow:0 28px 60px -18px rgba(10,22,40,.45);
  text-align:center; animation:rise .24s var(--ease) both;
}
.modal__eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-600);
}
.modal__title{
  font-size:clamp(24px,4vw,32px); color:var(--navy-950); margin:10px 0 12px;
}
.modal__body{
  font-size:15px; line-height:1.65; color:var(--ink-700); margin-bottom:20px;
}

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

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

@keyframes btnHalo{
  0%{ opacity:0; transform:scale(.94); }
  18%{ opacity:.34; }
  58%,100%{ opacity:0; transform:scale(1.08); }
}

@keyframes ctaPulse{
  0%,100%{ box-shadow:0 18px 38px -24px rgba(10,22,40,.44); }
  50%{ box-shadow:0 22px 44px -22px rgba(10,22,40,.52); }
}

@keyframes logoMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-100% - 64px)); }
}

@keyframes pulseHalo{
  0%,100%{ transform:scale(.94); opacity:.62; }
  50%{ transform:scale(1.04); opacity:1; }
}

@keyframes spinSlow{
  to{ transform:rotate(360deg); }
}

@keyframes bobCue{
  0%,100%{ transform:translateY(0); opacity:.76; }
  50%{ transform:translateY(6px); opacity:1; }
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

@media (min-width:720px){
  .testimonial-grid{
    grid-auto-flow:initial; grid-auto-columns:auto;
    grid-template-columns:repeat(3, 1fr);
    overflow:visible; scroll-snap-type:none; padding-bottom:0;
  }
  .offer-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
  .offer-grid--stack{
    grid-template-columns:repeat(2, minmax(240px, 1fr));
    align-items:stretch;
  }
  .offer-grid--stack::before{
    top:50%;
    left:calc(50% - 22px);
    width:44px;
    height:2px;
    background:repeating-linear-gradient(
      90deg,
      rgba(6,182,212,.42) 0,
      rgba(6,182,212,.42) 7px,
      transparent 7px,
      transparent 15px
    );
    transform:none;
  }
}

@media (min-width:920px){
  .next-hero__inner{
    grid-template-columns:minmax(0, 1fr) 360px;
    gap:46px;
  }
  .next-hero__copy{
    text-align:left;
  }
  .next-hero__title,
  .next-hero__body{
    margin-left:0;
    margin-right:0;
  }
  .next-hero__meta{
    justify-content:flex-start;
  }
  .next-score{
    padding-top:18px;
  }
  .next-score__cue{
    align-self:center;
  }
}

/* stagger checklist rows via inline delay set by JS using --d */
.check-row{ animation-delay:calc(var(--d, 0) * 90ms); }

/* ==========================================================================
   Dashboard
   ========================================================================== */
.dashboard-body,
.dashboard-login-body{
  min-height:100dvh;
  background:
    radial-gradient(720px 320px at 100% 0%, rgba(6,182,212,.10), transparent 58%),
    linear-gradient(180deg, #f7fbfd 0%, #ffffff 42%);
}
.dashboard-app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.dashboard-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(10,22,40,.08);
}
.dashboard-header__inner{
  max-width:1120px;
  margin:0 auto;
  padding:14px 16px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.dashboard-header__meta{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.dashboard-header__manager{
  display:none;
  font-size:13px;
  font-weight:700;
  color:var(--navy-700);
}
.dashboard-header__logout{
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  color:var(--ink-500);
}
.dashboard-header__logout:hover{ color:var(--navy-950); }
.dashboard-nav{
  max-width:1120px;
  margin:0 auto;
  padding:0 16px 14px;
  display:flex;
  gap:8px;
  overflow-x:auto;
}
.dashboard-nav__link{
  flex:none;
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(10,22,40,.08);
  color:var(--ink-700);
  font-size:13px;
  font-weight:700;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.dashboard-nav__link:hover,
.dashboard-nav__link--active{
  background:var(--navy-950);
  border-color:var(--navy-950);
  color:#fff;
}
.dashboard-main{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:20px 16px 40px;
}
.dashboard-section{ margin-bottom:18px; }
.dashboard-grid{
  display:grid;
  gap:16px;
  margin-bottom:16px;
}
.dashboard-hero{
  display:grid;
  gap:18px;
  align-items:end;
  padding:24px 20px;
  border-radius:28px;
  background:linear-gradient(155deg, var(--navy-950), var(--navy-800));
  color:#fff;
  box-shadow:0 24px 54px -34px rgba(10,22,40,.42);
}
.dashboard-hero--compact{
  padding:22px 18px;
}
.dashboard-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green-500);
  margin-bottom:10px;
}
.dashboard-title{
  font-size:clamp(28px,7vw,44px);
  font-weight:700;
  letter-spacing:-.04em;
  color:inherit;
  margin-bottom:10px;
}
.dashboard-copy{
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,.76);
  max-width:56ch;
}
.dashboard-hero .btn--primary{
  background:var(--green-500);
  color:var(--navy-950);
}
.dashboard-hero .btn--primary:hover{ background:var(--green-600); }
.dashboard-stat-grid{
  display:grid;
  gap:12px;
  margin-bottom:16px;
}
.dashboard-stat-card,
.dashboard-card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(10,22,40,.08);
  border-radius:24px;
  box-shadow:var(--shadow-card);
}
.dashboard-stat-card{
  padding:18px 16px;
}
.dashboard-stat-card__label{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-500);
  margin-bottom:8px;
}
.dashboard-stat-card__value{
  display:flex;
  align-items:flex-end;
  gap:4px;
  font-family:var(--font-display);
  font-size:32px;
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--navy-950);
}
.dashboard-stat-card__value small{
  font-size:14px;
  font-weight:700;
  color:var(--ink-500);
  margin-bottom:4px;
}
.dashboard-stat-card__value--text{
  font-size:22px;
  font-family:var(--font-body);
}
.dashboard-card{
  padding:20px 18px;
}
.dashboard-card--notice{
  padding:16px 18px;
}
.dashboard-card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.dashboard-card__eyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green-600);
  margin-bottom:8px;
}
.dashboard-card__title{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--navy-950);
}
.dashboard-card__link{
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  color:var(--navy-700);
}
.dashboard-card__link:hover{ color:var(--navy-950); }
.dashboard-pill-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}
.dashboard-pill{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:var(--mist-100);
  border:1px solid rgba(10,22,40,.06);
  color:var(--navy-700);
  font-size:13px;
  font-weight:700;
}
.dashboard-score-bars{
  display:grid;
  gap:12px;
}
.dashboard-score-bars__row{
  display:grid;
  grid-template-columns:minmax(0, 108px) 1fr auto;
  gap:10px;
  align-items:center;
}
.dashboard-score-bars__label{
  font-size:12px;
  font-weight:700;
  color:var(--ink-700);
  line-height:1.4;
}
.dashboard-score-bars__track{
  position:relative;
  height:12px;
  border-radius:999px;
  background:var(--mist-200);
  overflow:hidden;
}
.dashboard-score-bars__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--pct, 0%);
  border-radius:inherit;
  background:linear-gradient(90deg, var(--green-600), var(--green-500));
}
.dashboard-score-bars__fill--teal{
  background:linear-gradient(90deg, #0ea5b7, #06B6D4);
}
.dashboard-score-bars__fill--amber{
  background:linear-gradient(90deg, #c7781d, #F5A524);
}
.dashboard-score-bars__fill--navy{
  background:linear-gradient(90deg, #1C3A63, #0A1628);
}
.dashboard-score-bars__value{
  font-size:12px;
  font-weight:800;
  color:var(--navy-950);
}
.dashboard-empty{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-500);
}
.dashboard-table-wrap{
  overflow:auto;
  margin:0 -4px;
}
.dashboard-table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
}
.dashboard-table th,
.dashboard-table td{
  padding:14px 10px;
  border-bottom:1px solid rgba(10,22,40,.08);
  text-align:left;
  vertical-align:top;
  font-size:13px;
  color:var(--ink-700);
}
.dashboard-table th{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-500);
}
.dashboard-table tbody tr:last-child td{ border-bottom:none; }
.dashboard-table__lead{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  text-decoration:none;
}
.dashboard-table__lead strong{
  color:var(--navy-950);
  font-size:14px;
}
.dashboard-table__lead span{
  color:var(--ink-500);
  font-size:12px;
}
.dashboard-stage{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:var(--mist-100);
  border:1px solid rgba(10,22,40,.06);
  color:var(--navy-700);
  font-size:12px;
  font-weight:700;
}
.dashboard-pagination{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.dashboard-pagination__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:999px;
  text-decoration:none;
  background:#fff;
  border:1px solid rgba(10,22,40,.08);
  color:var(--ink-700);
  font-size:13px;
  font-weight:700;
}
.dashboard-pagination__link--active,
.dashboard-pagination__link:hover{
  background:var(--navy-950);
  color:#fff;
  border-color:var(--navy-950);
}
.dashboard-filters{
  display:grid;
  gap:12px;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(10,22,40,.08);
  box-shadow:var(--shadow-card);
}
.dashboard-filters__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.dashboard-btn-muted{
  background:#fff;
  color:var(--navy-950);
  border:1px solid rgba(10,22,40,.1);
}
.dashboard-btn-muted:hover{
  background:var(--mist-100);
  box-shadow:none;
  transform:translateY(-1px);
}
.dashboard-detail-grid{
  display:grid;
  gap:12px;
  margin-bottom:20px;
}
.dashboard-detail-grid div{
  padding:12px 14px;
  border-radius:18px;
  background:var(--mist-100);
  border:1px solid rgba(10,22,40,.05);
}
.dashboard-detail-grid span{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-500);
  margin-bottom:6px;
}
.dashboard-detail-grid strong{
  font-size:14px;
  color:var(--navy-950);
  line-height:1.45;
}
.dashboard-meter-group{
  display:grid;
  gap:12px;
}
.dashboard-meter span{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--ink-700);
  margin-bottom:8px;
}
.dashboard-meter__track{
  position:relative;
  height:12px;
  border-radius:999px;
  background:var(--mist-200);
  overflow:hidden;
}
.dashboard-meter__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--pct, 0%);
  background:linear-gradient(90deg, var(--green-600), var(--green-500));
  border-radius:inherit;
}
.dashboard-form{
  display:grid;
  gap:14px;
}
.dashboard-form .field{
  margin:0;
}
.dashboard-form .field label{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-500);
  margin-bottom:8px;
}
.dashboard-form .field input,
.dashboard-form .field select{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(10,22,40,.12);
  background:#fff;
  color:var(--navy-950);
  font-size:14px;
}
.dashboard-form .field input:focus,
.dashboard-form .field select:focus{
  outline:none;
  border-color:var(--green-600);
  box-shadow:0 0 0 4px rgba(6,182,212,.12);
}
.dashboard-textarea{
  width:100%;
  min-height:420px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(10,22,40,.12);
  background:#fff;
  color:var(--navy-950);
  font:13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize:vertical;
}
.dashboard-textarea:focus{
  outline:none;
  border-color:var(--green-600);
  box-shadow:0 0 0 4px rgba(6,182,212,.12);
}
.dashboard-form__status{
  min-height:22px;
  font-size:13px;
  line-height:1.5;
  color:var(--navy-700);
}
.dashboard-action-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.dashboard-action-list--row{
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}
.dashboard-answer-list,
.dashboard-booking-list,
.dashboard-question-groups{
  display:grid;
  gap:12px;
}
.dashboard-answer,
.dashboard-booking,
.dashboard-question-group{
  padding:14px 16px;
  border-radius:18px;
  background:var(--mist-100);
  border:1px solid rgba(10,22,40,.05);
}
.dashboard-answer strong,
.dashboard-booking strong,
.dashboard-question-group__title{
  display:block;
  font-size:13px;
  font-weight:800;
  color:var(--navy-950);
  margin-bottom:6px;
}
.dashboard-answer span,
.dashboard-booking p{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-700);
}
.dashboard-booking span{
  display:inline-flex;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  color:var(--green-600);
}
.dashboard-booking small{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:var(--ink-500);
}
.dashboard-notice{
  font-size:14px;
  font-weight:700;
  color:var(--navy-700);
}
.dashboard-notice--error{
  color:var(--red-500);
}
.dashboard-template-preview-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.dashboard-template-preview{
  width:100%;
  min-height:720px;
  border:none;
  border-radius:20px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(10,22,40,.08);
}
.dashboard-login{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:22px 16px;
}
.dashboard-login__card{
  width:min(100%, 520px);
  padding:28px 22px;
  border-radius:28px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(10,22,40,.08);
  box-shadow:0 30px 70px -42px rgba(10,22,40,.45);
}
.dashboard-login__card--compact{
  width:min(100%, 460px);
}
.dashboard-login__brand{
  margin-bottom:18px;
}
.dashboard-login__title{
  font-size:clamp(28px,7vw,42px);
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--navy-950);
  margin-bottom:10px;
}
.dashboard-login__copy{
  font-size:14px;
  line-height:1.7;
  color:var(--ink-700);
  margin-bottom:18px;
}

@media (min-width:700px){
  .dashboard-main{ padding:24px 20px 48px; }
  .dashboard-header__inner,
  .dashboard-nav{ padding-left:20px; padding-right:20px; }
  .dashboard-header__manager{ display:inline-flex; }
  .dashboard-stat-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .dashboard-detail-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:960px){
  .dashboard-hero{
    grid-template-columns:minmax(0, 1fr) auto;
  }
  .dashboard-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .dashboard-stat-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}