/* ==========================================================================
   Homepage scenes — the referee steps and the problem section.
   The hero console lives in hero-console.css.
   Loaded on the homepage only. Uses the tokens in variables.css.
   ========================================================================== */

main{position:relative}

.hero,.referee{position:relative;z-index:var(--z-content)}

/* ---- Referee steps ------------------------------------------------------- */
.referee{padding:var(--section-y) var(--gutter)}
.referee__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.referee__steps{grid-column:2;grid-row:1}
.referee__visual{grid-column:1;grid-row:1;position:sticky;top:15vh;align-self:start;padding-top:clamp(36px,6vh,72px)}
.ref-console{max-width:560px}
.ref-list{list-style:none;margin:clamp(36px,5vh,64px) 0 0;padding:0}
.ref-step{padding:clamp(40px,13vh,128px) 0;border-top:1px solid var(--line);
  transition:opacity .6s var(--e)}
.ref-step:last-child{border-bottom:1px solid var(--line)}
html.ref-journey .ref-step{opacity:.28}
html.ref-journey .ref-step.is-active{opacity:1}
.ref-step__n{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-mono);color:var(--gold)}
.ref-step__t{margin-top:10px}
.ref-step__b{margin-top:10px;font-size:var(--fs-lead);color:var(--ink-2);max-width:44ch}
.ref-step__how{margin-top:10px;font-size:var(--fs-sm);color:var(--muted);max-width:52ch}

/* ---- Section numerals: not on the homepage ------------------------------- */
.sec-head::after,.sec-head::before{display:none}
.sec-head{padding-right:0}

/* ---- Problem: the story beside the denied call -------------------------- */
.problem__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,104px);align-items:center}
.problem__copy{max-width:540px}
.problem__title{margin-top:18px;font-size:clamp(34px,3.6vw,52px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.problem__title .accent{display:block}
.problem__lead{margin-top:22px;font-size:clamp(16px,1.15vw,17.5px);line-height:1.75;color:var(--ink-2);font-weight:300;max-width:50ch;text-wrap:pretty}
.problem__lead + .problem__lead{margin-top:14px}
.problem__note{margin-top:34px;padding:18px 22px;border-left:2px solid var(--gold);background:var(--gold-wash);border-radius:0 8px 8px 0}
.problem__note-k{margin:0 0 6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--gold-deep)}
.problem__note-b{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink)}

/* the terminal: same material and pose as the hero console */
.problem__visual{margin:0;perspective:1600px}
.pterm{border-radius:14px;border-color:var(--cx-edge);background:linear-gradient(160deg,var(--void) 0%,var(--void-2) 100%);
  box-shadow:inset 0 1px 0 var(--cx-glare),var(--cx-shadow);transform:rotateY(-7deg) rotateX(3deg);transform-origin:left center}
.pterm .term__bar{padding:14px 20px;background:transparent}
.pterm .term__lights i,.pterm .term__lights i:first-child,.pterm .term__lights i:nth-child(2),.pterm .term__lights i:last-child{background:var(--cx-faint)}
.pterm .term__name{font-size:11.5px;color:var(--cx-muted)}
.pterm .term__body{display:grid;gap:4px;padding:clamp(22px,2.4vw,32px);font-size:13px;line-height:1.6;overflow:visible}
.pterm .term__line{white-space:normal}
.pt-cmd{margin-bottom:14px;color:var(--cx-muted)}
.pt-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 12px;border-radius:6px}
.pt-row i{font-style:normal;text-align:center}
.pt-row b{font-weight:400;color:#fff}
.pt-row em{font-style:normal;font-size:12px;color:var(--cx-muted)}
.pt-ok{color:var(--ok)}
.pt-warn{color:var(--warn-lit)!important}
.pt-bad{color:var(--bad)!important}
.pt-row--deny{margin-top:10px;background:var(--bad-bg);border:1px solid rgba(248,113,113,.22)}
.pt-row--deny em{font-family:var(--font-body);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.pt-inj{margin:6px 0 4px 44px;padding:10px 14px;border:1px dashed rgba(251,191,36,.35);border-radius:6px;color:var(--warn-lit);font-size:12.5px}
.pt-inj small{display:block;margin-bottom:3px;font-family:var(--font-body);font-size:11px;color:var(--cx-muted)}
.pt-why{padding:4px 12px 0 44px;font-size:12px;color:var(--cx-muted)}
.pt-end{margin-top:18px;padding-top:16px;border-top:1px solid var(--void-line);color:var(--gold-lit);font-size:13px}
.problem__cap{margin-top:18px;text-align:right;font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--muted)}

/* ---- Evidence: three cards, number, sentence, source -------------------- */
.problem__evidence{margin:clamp(72px,9vh,112px) 0 0;justify-content:center}
.problem__evidence::after{content:'';width:26px;height:1px;background:var(--gold);flex-shrink:0}
.problem .statband{margin-top:28px;padding-top:0;border-top:0;gap:clamp(16px,2vw,28px)}
.problem .statband .stat{display:flex;flex-direction:column;padding:clamp(26px,2.6vw,36px);background:var(--white);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--lift-2);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.problem .statband .stat::before{display:none}
.problem .statband .stat:hover{transform:translateY(-3px);box-shadow:var(--lift-3)}
.problem .stat__num{font-size:clamp(44px,4.4vw,64px);letter-spacing:-.02em}
.problem .stat__label{margin-top:16px;font-family:var(--font-body);font-size:15px;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--ink-2);max-width:34ch}
.problem .stat__src{margin-top:auto;padding-top:22px}

@media(max-width:999px){
  .problem__grid{grid-template-columns:1fr}
  .problem__copy{max-width:none}
  .pterm{transform:none}
  .problem__cap{text-align:left}
}
@media(max-width:560px){
  .pterm .term__body{font-size:12px;padding:18px}
  .pt-row{grid-template-columns:16px minmax(0,1fr);gap:10px}
  .pt-row em{grid-column:2}
  .pt-inj,.pt-why{margin-left:0;padding-left:12px}
}



/* ---- How it works: four steps on one timeline --------------------------- */
.how__head{max-width:920px}
.how__title{margin-top:18px;font-size:clamp(34px,3.6vw,52px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.how__title .accent{display:block}
.how__lead{margin-top:22px;font-size:clamp(16px,1.15vw,17.5px);line-height:1.75;font-weight:300;color:var(--ink-2);max-width:52ch;text-wrap:pretty}

.how__steps{list-style:none;margin:clamp(48px,6vh,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}
.how__step{display:flex;flex-direction:column}
/* number on the timeline; the line runs on to the next step */
.how__n{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.how__n span{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--void);color:var(--gold-lit);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  box-shadow:inset 0 1px 0 var(--cx-glare),0 6px 16px rgba(20,20,20,.18)}
.how__n::after{content:'';flex:1;height:1px;margin-right:calc(-1 * clamp(16px,1.6vw,24px));background:var(--line-gold)}
.how__step:last-child .how__n::after{margin-right:0;background:linear-gradient(90deg,var(--line-gold),transparent)}

.how__card{flex:1;display:flex;flex-direction:column;padding:clamp(24px,2.2vw,32px);background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--lift-2);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.how__card:hover{transform:translateY(-3px);box-shadow:var(--lift-3)}
.how__t{font-size:clamp(22px,1.7vw,26px);line-height:1.2}
.how__b{margin:12px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.how__meta{margin:auto 0 0;padding-top:22px;display:grid;gap:10px}
.how__meta div{padding-top:12px;border-top:1px solid var(--line)}
.how__meta dt{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--gold-deep)}
.how__meta dd{margin:3px 0 0;font-size:14px;font-weight:500;color:var(--ink)}

/* the principle, in the console's dark material */
.how__why{margin-top:clamp(40px,5vh,56px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(20px,4vw,64px);align-items:center;
  padding:clamp(28px,3vw,44px) clamp(28px,3.4vw,52px);border-radius:16px;
  background:linear-gradient(160deg,var(--void) 0%,var(--void-2) 100%);box-shadow:inset 0 1px 0 var(--cx-glare),var(--cx-shadow);position:relative;overflow:hidden}
.how__why::before{content:'';position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lit),transparent);opacity:.55}
.how__why-t{font-size:clamp(22px,2vw,30px);line-height:1.2;color:#fff;text-wrap:balance}
.how__why-b{margin:0;font-size:15.5px;line-height:1.75;color:var(--void-text);max-width:62ch}

@media(max-width:1100px){
  .how__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how__step:nth-child(2n) .how__n::after{margin-right:0;background:linear-gradient(90deg,var(--line-gold),transparent)}
}
@media(max-width:700px){
  .how__steps{grid-template-columns:1fr}
  .how__n::after{margin-right:0;background:linear-gradient(90deg,var(--line-gold),transparent)}
  .how__why{grid-template-columns:1fr}
}

/* ---- Small screens ------------------------------------------------------- */
@media(max-width:999px){
  .referee__grid{grid-template-columns:1fr}
  .referee__steps{grid-column:1}
  .ref-step{padding:26px 0}
}

.academy .sec-head::after{display:none}