/* page.css — shared layout for the craft-hub and sim pages. Reads tokens.css only. */

/* header */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--line)}
.site-head .container{display:flex;align-items:center;gap:var(--sp-5);height:64px}
.brand{font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:19px;letter-spacing:-.01em}
.site-nav{display:flex;gap:var(--sp-5);margin-left:var(--sp-4)}
.site-nav a{color:var(--ink);font-size:15px}
.site-head .spacer{flex:1}
.site-head .login{color:var(--ink);font-size:15px}
.nav-toggle{display:none}
@media(max-width:760px){
  .site-nav{display:none}
  .site-head .login{display:none}
}

/* hero */
.hero{padding:var(--sp-8) 0 var(--sp-7)}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-7);align-items:center}
.hero h1{font-size:40px;margin-bottom:var(--sp-3)}
.hero .stand{font-size:20px;color:var(--muted);margin-bottom:var(--sp-5);max-width:32ch}
.hero .cta-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.hero .fine{font-size:14px;color:var(--muted);margin-top:var(--sp-4)}
.crumb{font-size:14px;color:var(--muted);margin-bottom:var(--sp-4)}
.crumb a{color:var(--muted)}
/* the one bold element: the sim frame */
.sim-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--dark-tile);aspect-ratio:16/10;border:1px solid var(--line)}
.sim-frame video,.sim-frame img{width:100%;height:100%;object-fit:cover;display:block}
.sim-frame .poster-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#8a93a5;font-size:14px;text-align:center;padding:var(--sp-5)}
.sim-cap{font-size:13.5px;color:var(--muted);margin-top:var(--sp-2)}
@media(max-width:820px){
  .hero .container{grid-template-columns:1fr;gap:var(--sp-5)}
  .hero h1{font-size:32px}
}

/* generic section rhythm */
.section{padding:var(--sp-7) 0}
.section + .section{border-top:1px solid var(--line)}
.section h2{margin-bottom:var(--sp-5)}
.lead-narrow{max-width:60ch;color:var(--muted)}

/* sim cards — a real set, differentiated by state not just repeated */
.sim-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-4)}
.sim-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.sim-card.is-live{border-color:color-mix(in srgb,var(--navy) 35%,var(--line))}
.sim-card .shot{aspect-ratio:16/10;border-radius:6px;background:var(--grey);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13px;overflow:hidden}
.sim-card.is-soon .shot{opacity:.55}
.sim-card h3{margin:0;font-size:17px}
.sim-card p{margin:0;font-size:14.5px;color:var(--muted);flex:1}
.sim-card a.open{font-family:var(--font-head);font-weight:600;font-size:14.5px}

/* how-it-works: a genuine sequence, so numbered */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-4);counter-reset:step}
.step{position:relative;padding-left:var(--sp-6)}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;
  font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--blue-text);line-height:1}
.step h3{font-size:16px;margin:0 0 var(--sp-1)}
.step p{margin:0;font-size:14.5px;color:var(--muted)}

/* ladder — a list, reads on a phone (no table) */
.ladder{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:640px}
.rung{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);font-size:15px}
.rung:last-child{border-bottom:none}
.rung .tier{color:var(--navy);font-weight:600;font-family:var(--font-head)}
.rung .meta{color:var(--muted);white-space:nowrap}
.ladder-note{font-size:13.5px;color:var(--muted);margin-top:var(--sp-3)}

/* program teaser */
.teaser{background:var(--grey);border-radius:var(--radius-lg);padding:var(--sp-6)}
.signup{display:flex;gap:var(--sp-2);flex-wrap:wrap;max-width:460px;margin-top:var(--sp-4)}
.signup input{flex:1 1 220px;border:1.5px solid var(--line);border-radius:var(--radius);
  padding:11px 12px;font:inherit;font-size:15px;background:var(--paper);color:var(--ink)}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:var(--sp-3) 0}
.faq summary{font-family:var(--font-head);font-weight:600;color:var(--navy);cursor:pointer;font-size:16px}
.faq p{margin:var(--sp-2) 0 0;color:var(--muted);font-size:15px;max-width:70ch}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:var(--sp-6) 0;margin-top:var(--sp-7)}
.site-foot .container{display:flex;gap:var(--sp-5);flex-wrap:wrap;font-size:14px;color:var(--muted)}
.site-foot a{color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .sim-frame video{display:none}
  .sim-frame .poster-fallback{position:static}
}