/* ============================================================
   CloseCall — brand tokens
   ============================================================ */
:root{
  --midnight:#0B1770;
  --deep:#1B2CCF;
  --electric:#3B2BFF;
  --lav:#8A7BFF;
  --white:#FFFFFF;
  --alert:#FF5A5A;

  --paper:#F3F4FD;
  --ink:#0B1770;
  --ink-soft:#41519B;
  --rule-dark:rgba(138,123,255,.22);
  --rule-light:rgba(11,23,112,.14);

  --wrap:1180px;
  --gut:clamp(20px,5vw,48px);
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--midnight);
  color:var(--white);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-weight:700;
  font-stretch:112%;
  letter-spacing:-.02em;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
p{margin:0}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--white);color:var(--midnight);
  padding:12px 18px;border-radius:0 0 var(--r) 0;font-weight:600;
}
.skip:focus{left:0}

:focus-visible{outline:2.5px solid var(--lav);outline-offset:3px;border-radius:4px}

/* ============================================================
   Brand mark
   ============================================================ */
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.brand__mark{
  width:38px;height:38px;flex:none;
  border-radius:9px;
  overflow:hidden;
  display:block;
}
.brand__img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.brand__word{
  font-weight:700;font-stretch:110%;font-size:1.24rem;
  letter-spacing:-.025em;color:var(--white);
}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(11,23,112,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule-dark);
}
.nav__in{display:flex;align-items:center;gap:28px;height:74px}
.nav__links{display:flex;gap:26px;margin-left:auto;font-size:.95rem}
.nav__links a{
  text-decoration:none;color:rgba(255,255,255,.76);
  padding-block:4px;border-bottom:1.5px solid transparent;
}
.nav__links a:hover{color:var(--white);border-bottom-color:var(--lav)}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-block;
  background:var(--electric);color:var(--white);
  font:inherit;font-weight:600;font-size:1rem;
  padding:14px 26px;border:1.5px solid var(--electric);border-radius:var(--r);
  text-decoration:none;cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.btn:hover{background:#4E40FF;border-color:#4E40FF}
.btn--sm{padding:9px 18px;font-size:.94rem;flex:none}
.btn--ghost{background:transparent;border-color:var(--rule-dark);color:var(--white)}
.btn--ghost:hover{background:rgba(138,123,255,.12);border-color:var(--lav)}
.btn--full{width:100%;padding:15px 26px}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding-block:clamp(52px,8vw,96px) clamp(56px,7.5vw,92px);overflow:hidden}
.hero__in{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(40px,6vw,76px);align-items:start;
}
.hero__h1{font-size:clamp(2.6rem,5.6vw,4.35rem)}
.hero__sub{
  margin-top:26px;max-width:33em;
  font-size:1.14rem;color:rgba(255,255,255,.8);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__note{
  margin-top:22px;font-size:.92rem;color:var(--lav);
  padding-left:15px;border-left:2px solid var(--rule-dark);
}

/* ── Live review panel ── */
.panel{
  background:rgba(255,255,255,.045);
  border:1px solid var(--rule-dark);
  border-radius:14px;
  padding:22px 24px 18px;
}
.panel__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.panel__title{font-weight:700;font-stretch:108%;font-size:1.06rem;letter-spacing:-.01em}
.panel__meta{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:4px;font-size:.9rem;color:rgba(255,255,255,.62);
}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--lav);flex:none;
  margin-top:.52em;
  animation:pulse 1.5s ease-in-out infinite;
}
.panel.is-done .dot{background:var(--alert);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}

.panel__count{
  font-size:.9rem;font-weight:600;color:rgba(255,255,255,.62);
  white-space:nowrap;padding-top:3px;
}
.panel.is-done .panel__count{color:var(--alert)}

.panel__head{
  display:grid;grid-template-columns:1fr auto 74px;
  gap:12px;align-items:center;
  margin-top:20px;padding-bottom:9px;
  border-bottom:1px solid var(--rule-dark);
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.56);font-weight:600;
}
.panel__headr{text-align:right}

.ledger{list-style:none;margin:0;padding:0}
.row{
  display:grid;grid-template-columns:1fr auto 74px;
  gap:6px 12px;align-items:baseline;
  padding-block:11px;
  border-bottom:1px solid rgba(138,123,255,.13);
}
.row__name{font-size:.97rem;font-weight:500}
.row__num{
  font-size:.95rem;color:rgba(255,255,255,.66);
  font-variant-numeric:tabular-nums;
}
.row__st{
  justify-self:end;font-size:.8rem;font-weight:600;
  color:rgba(255,255,255,.4);
}
.row__st::after{content:"Waiting"}
.row__msg{
  grid-column:1/-1;font-size:.87rem;line-height:1.45;
  color:rgba(255,255,255,.55);
  display:none;
}

.row.is-checking .row__st{color:var(--lav)}
.row.is-checking .row__st::after{content:"Checking"}

.row.is-clear .row__st{color:rgba(255,255,255,.6)}
.row.is-clear .row__st::after{content:"Clear"}

.row.is-flag{
  background:rgba(255,90,90,.07);
  border-bottom-color:rgba(255,90,90,.3);
  box-shadow:inset 2.5px 0 0 var(--alert);
  padding-left:13px;margin-inline:-13px;padding-right:13px;
}
.row.is-flag .row__name{color:var(--white)}
.row.is-flag .row__num{color:rgba(255,255,255,.8)}
.row.is-flag .row__st{color:var(--alert)}
.row.is-flag .row__st::after{content:"Flagged"}
.row.is-flag .row__msg{display:block;color:#FFB4B4}

.panel__foot{
  margin-top:14px;font-size:.78rem;color:rgba(255,255,255,.5);
}

/* ============================================================
   Section leads
   ============================================================ */
.lede{max-width:44rem}
.lede h2{font-size:clamp(1.85rem,3.3vw,2.85rem)}
.lede p{margin-top:18px;font-size:1.1rem;max-width:36em}

.paper .lede p{color:var(--ink-soft)}
.lede--dark p{color:rgba(255,255,255,.76)}

/* ============================================================
   Paper sections
   ============================================================ */
.paper{
  background:var(--paper);color:var(--ink);
  padding-block:clamp(64px,8.5vw,108px);
}
.paper--tight{padding-block:clamp(56px,7vw,88px) clamp(44px,5.5vw,68px)}

/* ── Ledger table of review areas ── */
.tbl{margin-top:clamp(36px,5vw,58px);border-top:2px solid var(--ink)}
.tbl__head{
  display:grid;grid-template-columns:minmax(190px,.5fr) 1fr;
  gap:clamp(16px,4vw,52px);
  padding-block:10px;
  border-bottom:1px solid var(--rule-light);
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);
}
.tbl__row{
  display:grid;grid-template-columns:minmax(190px,.5fr) 1fr;
  gap:clamp(8px,4vw,52px);
  padding-block:22px;
  border-bottom:1px solid var(--rule-light);
}
.tbl__row h3{font-size:1.14rem;font-stretch:106%;padding-top:2px}
.tbl__row p{color:var(--ink-soft);max-width:56ch}

/* ── Who it's for ── */
.who{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,46px);
  margin-top:clamp(34px,4vw,50px);
}
.who__col{border-top:2px solid var(--electric);padding-top:18px}
.who__col h3{font-size:1.16rem;font-stretch:106%}
.who__col p{margin-top:11px;color:var(--ink-soft);font-size:1rem}

/* ============================================================
   Close week
   ============================================================ */
.week{padding-block:clamp(64px,8.5vw,108px)}
.days{
  list-style:none;margin:clamp(38px,5vw,60px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.4vw,44px);
}
.day{border-top:1px solid var(--rule-dark);padding-top:18px}
.day__label{
  font-size:.8rem;font-weight:700;letter-spacing:.05em;
  color:var(--lav);margin-bottom:9px;
}
.day h3{font-size:1.13rem;font-stretch:106%}
.day p{margin-top:10px;font-size:.98rem;color:rgba(255,255,255,.7)}

/* ============================================================
   Questions
   ============================================================ */
.qa{
  background:var(--paper);color:var(--ink);
  padding-block:clamp(48px,6vw,76px) clamp(60px,8vw,100px);
}
.qa__in{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start;
}
.qa__h{font-size:clamp(1.7rem,2.9vw,2.4rem)}
.qa__side{position:sticky;top:104px}
.qa__note{
  margin-top:18px;color:var(--ink-soft);font-size:1rem;max-width:30em;
}
.qa__note a{color:var(--electric);text-underline-offset:3px}
.qa__list{border-top:1px solid var(--rule-light)}
.qa details{border-bottom:1px solid var(--rule-light)}
.qa summary{
  cursor:pointer;list-style:none;
  padding-block:19px;padding-right:38px;position:relative;
  font-weight:600;font-size:1.05rem;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;
  border-right:2px solid var(--electric);border-bottom:2px solid var(--electric);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}
.qa details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.qa details p{
  padding-bottom:20px;color:var(--ink-soft);max-width:58ch;margin-top:-4px;
}

/* ============================================================
   Demo / CTA
   ============================================================ */
.cta{
  background:var(--deep);
  padding-block:clamp(64px,8.5vw,104px);
}
.cta__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(38px,5vw,76px);align-items:center;
}
.cta__copy h2{font-size:clamp(1.9rem,3.3vw,2.8rem)}
.cta__copy p{margin-top:18px;font-size:1.08rem;color:rgba(255,255,255,.82);max-width:32em}
.cta__alt{font-size:1rem !important;color:rgba(255,255,255,.68) !important}
.cta__alt a{color:var(--white);text-underline-offset:3px}

.form{
  background:var(--midnight);
  border:1px solid rgba(138,123,255,.3);
  border-radius:14px;padding:26px;
}
.field{margin-bottom:15px}
.field label{
  display:block;font-size:.88rem;font-weight:600;
  margin-bottom:6px;color:rgba(255,255,255,.85);
}
.opt{font-weight:400;color:rgba(255,255,255,.45)}
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(138,123,255,.28);
  border-radius:8px;padding:11px 13px;
  color:var(--white);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.5)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--lav);background:rgba(255,255,255,.09);
}
.field textarea{resize:vertical;min-height:74px}
.form__note{margin-top:12px;font-size:.85rem;color:rgba(255,255,255,.5);text-align:center}
.hp{position:absolute;left:-9999px}

/* ============================================================
   Footer
   ============================================================ */
.foot{
  background:var(--midnight);
  border-top:1px solid var(--rule-dark);
  padding-block:44px;
}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.brand--foot .brand__mark{width:32px;height:32px;border-radius:8px}
.brand--foot .brand__word{font-size:1.08rem}
.foot__line{font-size:.94rem;color:rgba(255,255,255,.6);flex:1 1 240px}
.foot__legal{font-size:.9rem;color:rgba(255,255,255,.58)}
.foot__legal a{color:var(--lav);text-underline-offset:3px}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .hero__in{grid-template-columns:1fr;gap:44px}
  .qa__in{grid-template-columns:1fr;gap:26px}
  .qa__side{position:static}
  .cta__in{grid-template-columns:1fr}
  .days{grid-template-columns:repeat(2,1fr)}
  .who{grid-template-columns:1fr;gap:26px}
  .nav__links{display:none}
  .nav__in{gap:16px}
  .btn--sm{margin-left:auto}
}
@media (max-width:620px){
  body{font-size:16px}
  .days{grid-template-columns:1fr}
  .tbl__head{display:none}
  .tbl__row{grid-template-columns:1fr;gap:8px;padding-block:20px}
  .panel{padding:18px 16px 14px}
  .row.is-flag{margin-inline:-8px;padding-inline:8px}
  .panel__head,.row{grid-template-columns:1fr auto 62px;gap:5px 8px}
  .hero__acts .btn{flex:1 1 auto;text-align:center}
}

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