/* ==========================================================================
   AtoZApply — Checkout + legal pages
   Extends landing.css (tokens, buttons, .mono, .shell). Load it second.
   ========================================================================== */

[hidden]{display:none !important}

/* ══════════════════════════════════════════════════════════════════════
   SLIM TOP BAR (legal + checkout)
   ══════════════════════════════════════════════════════════════════════ */
.doc-bar{
  position:sticky; top:0; z-index:40;
  height:68px;
  display:flex; align-items:center;
  border-bottom:1px solid var(--line);
  background:rgba(8,9,10,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
}
.doc-bar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:100%;
}

/* ══════════════════════════════════════════════════════════════════════
   LEGAL PAGES
   ══════════════════════════════════════════════════════════════════════ */
.doc{
  padding:clamp(56px,8vw,104px) 0 clamp(72px,9vw,120px);
}
.doc-inner{max-width:74ch}

.doc h1{
  margin-top:22px;
  font-size:clamp(2.4rem,5vw,3.9rem);
  letter-spacing:-.042em; line-height:1;
}
.doc-updated{
  display:inline-block; margin-top:26px;
  padding:6px 13px; border:1px solid var(--line); border-radius:100px;
  background:var(--ink-850);
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}

.doc-body{margin-top:clamp(44px,6vw,68px)}
.doc-body h2{
  margin-top:56px; padding-top:26px;
  border-top:1px solid var(--line);
  font-size:1.5rem; letter-spacing:-.03em; line-height:1.2;
}
.doc-body h2:first-child{margin-top:0; padding-top:0; border-top:0}
.doc-body h3{
  margin-top:32px;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--signal-dim);
}
.doc-body p{margin-top:18px; font-size:1.0125rem; line-height:1.72; color:var(--text-2)}
.doc-body ul{margin-top:20px}
.doc-body li{
  position:relative; padding:9px 0 9px 26px;
  font-size:1.0125rem; line-height:1.66; color:var(--text-2);
}
.doc-body li::before{
  content:''; position:absolute; left:2px; top:19px;
  width:5px; height:5px; border-radius:50%; background:var(--signal-dim);
}
.doc-body a{
  color:var(--signal); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.doc-body a:hover{color:#E4FF7A}
.doc-body strong{color:var(--text)}

.doc-foot{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  padding:26px 0 40px; border-top:1px solid var(--line);
}
.doc-foot .mono{font-size:.6rem}
.doc-foot a{color:var(--text-3); transition:color .16s ease}
.doc-foot a:hover{color:var(--signal)}

/* ══════════════════════════════════════════════════════════════════════
   CHECKOUT
   ══════════════════════════════════════════════════════════════════════ */
.checkout{
  position:relative; overflow:hidden;
  min-height:calc(100dvh - 68px);
  display:grid; place-items:center;
  padding:clamp(32px,5vw,64px) var(--gutter) 64px;
}
.checkout::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 40% at 50% -6%, rgba(214,255,75,.09), transparent 70%),
    radial-gradient(60% 44% at 50% 106%, rgba(255,255,255,.03), transparent 72%);
}

.co-card{
  position:relative;
  width:100%; max-width:560px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--ink-900);
  box-shadow:0 50px 110px -60px rgba(0,0,0,.95);
  overflow:hidden;
}
.co-head{
  padding:26px 30px 24px;
  border-bottom:1px solid var(--line);
  background:var(--ink-850);
}
.co-head h1{
  margin-top:16px;
  font-size:1.85rem; letter-spacing:-.035em; line-height:1.08;
}
.co-head h1 em{font-style:normal; color:var(--signal)}
.co-head .sub{margin-top:9px; font-size:.925rem; color:var(--text-2)}
.co-body{padding:28px 30px 30px}

/* ── plan picker ── */
.plan-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.plan-card{
  position:relative; display:grid; gap:3px;
  padding:26px 10px 14px; /* top clears the absolutely-placed .pc-badge */
  border:1px solid var(--line); border-radius:9px;
  background:var(--ink-850); color:var(--text-2);
  font:inherit; text-align:center; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.plan-card:hover{border-color:#3A4248; background:var(--ink-800)}
.plan-card.active{
  border-color:var(--signal);
  background:rgba(214,255,75,.05);
  box-shadow:inset 0 0 0 1px rgba(214,255,75,.22);
}
.pc-name{
  font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-3);
}
.plan-card.active .pc-name{color:var(--signal)}
.pc-price{
  font-family:var(--display); font-weight:600; font-size:1.55rem;
  letter-spacing:-.035em; line-height:1.12; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.pc-per{font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.pc-note{margin-top:5px; font-size:.66rem; line-height:1.4; color:var(--text-3)}
.pc-pick{
  margin-top:11px;
  font-family:var(--mono); font-size:.58rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-3);
  padding:5px 0; border-radius:5px; border:1px solid transparent;
}
.plan-card.active .pc-pick{
  background:var(--signal); color:var(--ink-950);
}
.plan-card.active .pc-pick::before{content:'✓ '}
.pc-badge{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--mono); font-size:.53rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-950); background:var(--signal);
  padding:3px 9px; border-radius:0 0 5px 5px;
}

.region-line{margin-top:18px; text-align:center}
.region{
  display:inline-block;
  padding:6px 13px; border:1px solid var(--line); border-radius:100px;
  background:var(--ink-850);
  font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-3);
}

/* ── includes list ── */
.co-feats-title{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.co-feats{margin-top:6px}
.co-feats li{
  position:relative; padding:10px 0 10px 26px;
  border-bottom:1px solid var(--line-soft);
  font-size:.915rem; color:var(--text-2);
}
.co-feats li::before{
  content:''; position:absolute; left:1px; top:19px;
  width:9px; height:4.5px;
  border-left:1.5px solid var(--signal-dim); border-bottom:1.5px solid var(--signal-dim);
  transform:rotate(-45deg);
}

/* ── fields ── */
.co-form{margin-top:26px}
.field{margin-bottom:16px}
.field label{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.field label .opt{color:#414950}
.field input{
  width:100%; height:46px; padding:0 14px;
  background:var(--ink-850); color:var(--text);
  border:1px solid var(--line); border-radius:7px;
  font-family:var(--body); font-size:.955rem;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.field input::placeholder{color:#4C545A}
.field input:hover{border-color:#333A40}
.field input:focus{
  outline:0; border-color:var(--signal); background:var(--ink-800);
  box-shadow:0 0 0 3px var(--signal-glow);
}
.field input:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 40px var(--ink-800) inset;
}

#payBtn{margin-top:8px}
#payBtn:disabled{opacity:.55; cursor:not-allowed}

.status{
  margin-top:15px; min-height:1.2em; text-align:center;
  font-size:.885rem; line-height:1.5; color:var(--text-2);
}
.status.error{color:var(--flag-red)}
.status.success{color:var(--signal)}

.secure{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.58rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
}
.secure svg{width:13px; height:13px; flex:none}

@media (max-width:520px){
  .plan-cards{grid-template-columns:1fr}
  .pc-badge{left:auto; right:12px; transform:none}
  .co-head,.co-body{padding-inline:20px}
  .doc-bar .btn{padding-inline:14px}
}