/* ============================================================================
   Home page. Loaded only here.
   ========================================================================== */

.home-hero h1{font-family:var(--serif);font-size:clamp(2.6rem,6.4vw,5rem);line-height:1.02;
  margin:.7rem 0 1rem;max-width:14ch;letter-spacing:-.02em}
.home-hero .hlede{font-size:1.14rem;line-height:1.65;color:rgba(255,255,255,.9);max-width:56ch}
.home-hero .herofoot{margin-top:1.4rem;font-size:.86rem;color:rgba(255,255,255,.72)}
.home-hero .herofoot a{color:#fff;text-decoration:underline}

/* stat band */
.band-stats{padding:1.8rem 0;background:rgba(255,255,255,.04);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.statrow strong{display:block;font:800 1.9rem/1 var(--serif);color:#fff}
.statrow span{display:block;margin-top:.3rem;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.band-alt{background:linear-gradient(180deg,rgba(180,154,255,.07),rgba(143,213,255,.04))}

/* quiz */
.quizbox{margin-top:2rem}
.qopts{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.qopt{text-align:left;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:1rem;
  background:linear-gradient(140deg,rgba(255,255,255,.09),rgba(255,255,255,.03));color:var(--text);
  font:600 1rem/1.4 var(--sans);cursor:pointer;transition:.2s}
.qopt:hover{transform:translateY(-3px);border-color:rgba(242,182,201,.5);background:rgba(180,154,255,.16)}
.qopt.sel{border-color:var(--rose);background:linear-gradient(135deg,rgba(180,154,255,.3),rgba(239,184,202,.2));color:#fff}
.qresult{margin-top:1.4rem;padding:1.6rem;border:1px solid rgba(242,182,201,.35);border-radius:1.2rem;
  background:linear-gradient(150deg,rgba(180,154,255,.18),rgba(255,255,255,.04))}
.qresult h3{margin:0 0 .4rem;font-size:1.35rem}
.qblurb{margin:0 0 1.1rem;color:var(--muted)}
.qroutes{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.qroutes a{display:block;padding:1rem 1.15rem;border-radius:.9rem;border:1px solid var(--line);
  background:rgba(8,12,38,.42);transition:.2s}
.qroutes a:hover{transform:translateY(-3px);border-color:rgba(242,182,201,.5);background:rgba(180,154,255,.18)}
.qroutes strong{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:.25rem;color:#fff}
.qroutes span{font-size:.84rem;color:var(--muted)}
.qnote{margin-top:1.1rem;font-size:.88rem;color:var(--muted)}
.qnote a{color:#fff;text-decoration:underline}

/* guide tracks */
.tracks{margin-top:2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.tcol{padding:1.3rem;border:1px solid var(--line);border-radius:1.1rem;background:rgba(255,255,255,.045)}
.tcol h3{margin:0 0 .8rem;font-size:1.02rem}
.tcol ul{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.3rem}
.tcol li a{font-size:.9rem;color:var(--muted)}
.tcol li a:hover{color:#fff;text-decoration:underline}
.tmore{font-size:.8rem;font-weight:800;color:var(--rose)}

/* chapters */
.chapters{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.6rem}
.chapters li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;
  padding:1.05rem 1.2rem;border:1px solid var(--line);border-radius:1rem;background:rgba(255,255,255,.045)}
.chn{display:grid;place-items:center;min-width:66px;padding:.35rem .5rem;border-radius:999px;
  background:rgba(180,154,255,.2);border:1px solid rgba(180,154,255,.35);
  font:800 .78rem var(--sans);color:#e2d6ff;white-space:nowrap}
.chapters strong{font-family:var(--serif);font-size:1.06rem}
.chapters p{margin:.25rem 0 0;font-size:.9rem;color:var(--muted)}
.ctarow{margin-top:1.6rem;display:flex;gap:.7rem;flex-wrap:wrap}

/* formats */
.formatgrid{margin-top:2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.fcard{display:flex;flex-direction:column;gap:.55rem;padding:1.4rem;border-radius:1.2rem;
  border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
  transition:.25s}
.fcard:hover{transform:translateY(-5px);border-color:rgba(242,182,201,.45);box-shadow:0 24px 50px rgba(0,0,0,.32)}
.fbadge{align-self:flex-start;font:800 .64rem var(--sans);letter-spacing:.12em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px;background:rgba(143,213,255,.2);color:#cfeaff;border:1px solid rgba(143,213,255,.35)}
.fcard h3{margin:.15rem 0 0;font-size:1.3rem}
.fcard p{margin:0;font-size:.88rem;color:var(--muted);flex:1}
.fcard .btn{width:100%;text-align:center;margin-top:.4rem}
.flink{font-size:.82rem;color:var(--rose);font-weight:700;text-align:center}

/* two-column band */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem}
.achips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.achip{padding:.6rem .95rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);
  font-size:.86rem;color:var(--muted);transition:.2s}
.achip:hover{background:rgba(180,154,255,.18);color:#fff;border-color:rgba(242,182,201,.45)}
.faqlist{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.4rem}
.faqlist a{display:block;padding:.75rem 1rem;border-radius:.7rem;border:1px solid var(--line);
  background:rgba(255,255,255,.045);font-size:.92rem;color:var(--muted);transition:.2s}
.faqlist a:hover{background:rgba(180,154,255,.15);color:#fff;transform:translateX(4px)}

/* honest block */
.honest{margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.honest>div{padding:1.4rem;border-radius:1.1rem;border:1px solid var(--line)}
.honest>div:first-child{background:linear-gradient(140deg,rgba(152,228,192,.14),transparent)}
.honest>div:last-child{background:linear-gradient(140deg,rgba(255,150,180,.12),transparent)}
.honest h3{margin:0 0 .7rem;font-size:1.1rem}
.honest ul{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.honest li{font-size:.92rem;color:#ece4f6}

/* ============================================================================
   Formats hub. All four editions above the fold, at full size.
   ========================================================================== */

/* shorter than the sitewide hero: the four cards need to be reachable without a scroll */
.fmt-hero{min-height:0;padding:3.4rem 0 2.8rem}
.fmt-hero h1{font-family:var(--serif);font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.05;
  margin:.7rem 0 1rem;max-width:16ch;letter-spacing:-.02em}
.fmt-hero .hlede{font-size:1.1rem;line-height:1.65;color:rgba(255,255,255,.9);max-width:58ch}
.fmt-grid-sec{padding-top:2.4rem}

.edgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:stretch}
.ed{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.6rem 1.4rem 1.4rem;
  border-radius:1.3rem;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  transition:transform .25s,border-color .25s,box-shadow .25s}
.ed::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--edc)}
.ed:hover{transform:translateY(-6px);border-color:var(--edc);box-shadow:0 26px 56px rgba(0,0,0,.38)}
.ed-pb{--edc:#f2b6c9}
.ed-hc{--edc:#b49aff}
.ed-eb{--edc:#8fd5ff}
.ed-ab{--edc:#98e4c0}
.edtag{align-self:flex-start;font:800 .64rem var(--sans);letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:999px;color:#0b1030;background:var(--edc)}
.ed h2{margin:.2rem 0 0;font-size:1.7rem;line-height:1.1}
.edline{margin:0;font:700 .95rem/1.4 var(--sans);color:var(--edc)}
.edwhy{margin:0;font-size:.9rem;line-height:1.62;color:var(--muted)}
.edbest{list-style:none;margin:.2rem 0 auto;padding:0;display:grid;gap:.3rem}
.edbest li{position:relative;padding-left:1.2rem;font-size:.85rem;color:#ece4f6}
.edbest li::before{content:"✓";position:absolute;left:0;color:var(--edc);font-weight:800}
.edbuy{width:100%;text-align:center;margin-top:1rem}
.edmore{display:block;text-align:center;font-size:.82rem;font-weight:700;color:var(--muted)}
.edmore:hover{color:#fff;text-decoration:underline}

.fmt-table{margin-top:1.6rem}
.fmt-table table{width:100%;border-collapse:collapse;font-size:.9rem}
.fmt-table th,.fmt-table td{padding:.8rem .9rem;border-bottom:1px solid var(--line);text-align:left}
.fmt-table thead th{font:800 .74rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  white-space:nowrap}
.fmt-table tbody th{font-weight:700;color:#ece4f6}
.fmt-table td{color:var(--muted)}
.fmt-table tbody tr:hover{background:rgba(180,154,255,.08)}

@media(max-width:1100px){
  .edgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .tracks,.formatgrid{grid-template-columns:repeat(2,1fr)}
  .qroutes{grid-template-columns:1fr}
  .twocol,.honest{grid-template-columns:1fr}
}
@media(max-width:640px){
  .qopts{grid-template-columns:1fr}
  .tracks,.formatgrid{grid-template-columns:1fr}
  .statrow{grid-template-columns:repeat(2,1fr);gap:1.3rem}
  .chapters li{grid-template-columns:1fr;gap:.5rem}
  .chn{justify-self:start}
  .edgrid{grid-template-columns:1fr}
  .fmt-table{overflow-x:auto}
  .fmt-table table{min-width:560px}
}

/* Static fallback for the quiz routes. Present in the HTML for crawlers and for
   readers without JavaScript; hidden by the script once the interactive version
   is live, so it is never shown twice. */
.qroutes-all{margin-top:1.6rem;display:grid;gap:1.1rem}
.qroutes-all[hidden]{display:none}
.qroute-static{padding:1.15rem 1.3rem;border:1px solid var(--line);border-radius:1rem;
  background:rgba(255,255,255,.04)}
.qroute-static h3{margin:0 0 .25rem;font-size:1.05rem}
.qroute-static p{margin:0 0 .7rem;font-size:.9rem;color:var(--muted)}
.qroute-static ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.qroute-static li a{display:block;padding:.5rem .2rem;font-size:.9rem;color:var(--muted)}
.qroute-static li a strong{color:#fff}
.qroute-static li a:hover{color:#fff;text-decoration:underline}