/* ASE Prep Lab — v3 "Shop Manual Navy, staged". Plain CSS, no frameworks, self-hosted fonts only.
   CACHE: this file is versioned (styles.v3.css) — see _headers. Never rename it back to an unversioned name.
   FONT NOTE: Anton-v3 covers Latin basic + punctuation + U+00B7, U+2192 (arrow) and U+2713 (check) —
   the v2 fallback risk is closed. Archivo subsets cover U+0020-007E + U+00A0, U+00B7, curly quotes,
   en/em dashes, ellipsis. */
@font-face { font-family:"Anton"; src:url("assets/anton-v3.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("assets/archivo-latin-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("assets/archivo-latin-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("assets/archivo-latin-700.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root { --navy:#1B3A57; --steel:#2C507A; --deep:#122A42; --amber:#F6A21E; --amber-dark:#DE8F0C; --paper:#FFFFFF;
  --panel:#EDF2F6; --ink:#16222D; --line:#C9D4DE; --mut:#4B5A68;
  --sh-1:0 1px 3px rgba(18,42,66,.12), 0 1px 2px rgba(18,42,66,.08);
  --sh-2:0 4px 14px rgba(18,42,66,.16);
  --sh-3:0 12px 32px rgba(13,33,54,.34), 0 4px 10px rgba(13,33,54,.22);
  --band-texture:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px); }
* { box-sizing:border-box; }
html { scroll-padding-bottom:7.5rem; }
body { margin:0; font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.6; letter-spacing:.002em; }
::selection { background:var(--amber); color:var(--deep); }
a { color:#17517D; }
a:hover { text-decoration:underline; }
:focus-visible { outline:3px solid var(--amber); outline-offset:2px; }
h1, h2, .brand, .chip, .stats strong { font-family:"Anton","Arial Narrow",Impact,sans-serif; font-weight:400; }
.shell { max-width:1080px; margin:0 auto; padding-left:1rem; padding-right:1rem; }

/* Kicker — letterspaced uppercase label voice (Archivo semibold) */
.kicker { font-weight:600; font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; }

/* Header — sticky navy band, gear-and-wrench lockup, pill nav.
   Condenses to a slim single row (.slim, toggled by the scroll script) after the hero. */
.site-header { position:sticky; top:0; z-index:50; color:#fff; box-shadow:var(--sh-2);
  background:linear-gradient(180deg, var(--steel), var(--navy) 55%, var(--deep)); }
.site-header .band { background-image:var(--band-texture); padding:.6rem 0 .65rem; transition:padding .25s ease; }
.brand { font-size:1.55rem; margin:0 0 .3rem; letter-spacing:.02em; transition:font-size .25s ease, margin .25s ease; }
.brand a { color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.55rem; min-height:44px; }
.logo { width:40px; height:40px; flex:none; transition:width .25s ease, height .25s ease; }
nav { display:flex; flex-wrap:nowrap; align-items:center; gap:.35rem; overflow-x:auto; padding-bottom:.2rem;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
nav::-webkit-scrollbar { display:none; }
nav a { flex:none; color:#fff; text-decoration:none; padding:.62rem .6rem; min-height:44px;
  display:inline-flex; align-items:center; border-radius:999px;
  transition:padding .25s ease, min-height .25s ease, background .15s ease; }
nav a:hover { background:rgba(255,255,255,.14); text-decoration:none; }
nav a[aria-current="page"] { background:var(--amber); color:var(--deep); font-weight:700; }
@media (max-width:860px) {
  nav { padding-right:1.5rem;
    -webkit-mask-image:linear-gradient(90deg, #000 86%, transparent 99%);
    mask-image:linear-gradient(90deg, #000 86%, transparent 99%); }
}
/* Condensed state — one slim row: small lockup + pill nav side by side */
.site-header.slim .band { padding:.26rem 0 .3rem; }
.site-header.slim .shell { display:flex; align-items:center; gap:1.1rem; }
.site-header.slim .brand { margin:0; font-size:1.1rem; white-space:nowrap; }
.site-header.slim .brand a { min-height:36px; }
.site-header.slim .logo { width:27px; height:27px; }
.site-header.slim nav { flex:1; padding-bottom:0; }
.site-header.slim nav a { min-height:36px; padding:.28rem .55rem; }

/* Hero — full-bleed navy band with real gradient range + radial highlight, fluid display type,
   amber rule, CTAs inside, staged product composition on the right */
.hero { color:#fff;
  background:radial-gradient(58rem 26rem at 88% -30%, rgba(246,162,30,.16), rgba(246,162,30,0) 60%),
    linear-gradient(155deg, var(--steel) 0%, var(--navy) 45%, var(--deep) 100%); }
.hero .band { background-image:var(--band-texture); padding:2.1rem 0 2.3rem; }
.hero-grid { display:grid; gap:1.8rem; align-items:center; }
@media (min-width:900px) { .hero-grid { grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:2.75rem; } }
.hero h1 { font-size:clamp(2rem, 1.3rem + 3.4vw, 3.2rem); line-height:1.08; margin:.15rem 0 .8rem;
  letter-spacing:.01em; color:#fff; max-width:22ch; }
.hero .promise { font-size:clamp(1.02rem, .95rem + .4vw, 1.15rem); color:#EAF1F7; max-width:62ch;
  border-top:3px solid var(--amber); padding-top:.8rem; margin:0; }
.chip { display:inline-block; background:var(--amber); color:var(--deep); font-size:1rem;
  padding:.16rem .6rem; border-radius:6px; letter-spacing:.05em; margin-bottom:.55rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.15rem 0 0; }
.btn { display:inline-block; text-decoration:none; font-weight:700; padding:.5rem .85rem;
  border-radius:7px; margin:.2rem .15rem .2rem 0; }
.btn-buy { background:var(--amber); color:var(--deep); border:2px solid var(--amber); }
.btn-buy:hover { background:var(--amber-dark); border-color:var(--amber-dark); text-decoration:none; }
.btn-yt { background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn-yt:hover { background:var(--panel); text-decoration:none; }
.btn-hero-buy { background:var(--amber); color:var(--deep); border:2px solid var(--amber);
  padding:.7rem 1.25rem; font-size:1.05rem; margin:0; box-shadow:var(--sh-2); }
.btn-hero-buy:hover { background:var(--amber-dark); border-color:var(--amber-dark); text-decoration:none; }
.btn-hero-yt { background:transparent; color:#fff; border:2px solid #fff; padding:.7rem 1.25rem;
  font-size:1.05rem; margin:0; }
.btn-hero-yt:hover { background:rgba(255,255,255,.14); text-decoration:none; }
/* Staged hero composition — angled prints of art already loaded on the same page */
.hero-art { position:relative; max-width:520px; }
.hero-art img { display:block; border-radius:10px; box-shadow:var(--sh-3); height:auto; }
.hero-art .art-a { width:80%; transform:rotate(-5deg); }
.hero-art .art-b { width:66%; transform:rotate(4deg); margin:-13% 0 0 auto; position:relative;
  border:6px solid rgba(255,255,255,.92); }
.hero-art.solo::before { content:""; position:absolute; width:min(76%,330px); aspect-ratio:1; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(5deg); background:rgba(237,242,246,.26); border-radius:12px; }
.hero-art .art-solo { position:relative; width:min(76%,330px); margin:0 auto; transform:rotate(-4deg);
  border:7px solid rgba(255,255,255,.92); }

/* Trust strip — three numeric stats + a full-width task-list ribbon beneath */
.trust { background:linear-gradient(180deg, #F2F6FA, var(--panel)); border-bottom:1px solid var(--line); }
.stats { list-style:none; margin:0; padding:1.1rem 0 .95rem; display:grid; gap:.9rem 1.4rem;
  grid-template-columns:1fr; }
@media (min-width:720px) { .stats { grid-template-columns:repeat(3,1fr); } }
.stats li { border-left:4px solid var(--amber); padding-left:.75rem; }
.stats strong { display:block; font-size:1.75rem; line-height:1.05; color:var(--navy); letter-spacing:.02em; }
.stats span { display:block; color:var(--mut); font-size:.95rem; line-height:1.4; margin-top:.15rem; }
.trust-ribbon { margin:0; padding:.6rem 0 .95rem; border-top:1px solid var(--line); color:var(--mut); }
.trust-ribbon .kicker { color:var(--navy); }

main { padding-top:1.3rem; padding-bottom:2rem; }
h2 { font-size:clamp(1.3rem, 1.08rem + 1vw, 1.6rem); margin:1.9rem 0 .6rem; color:var(--navy); letter-spacing:.01em; }
main h2::before { content:""; display:inline-block; width:.5em; height:.5em; background:var(--amber);
  border-radius:2px; margin-right:.45rem; }
ul.modules li, ul.workbooks li { margin:.8rem 0; }

/* Course buy row — proof image beside the buy panel */
.buy-row { display:grid; gap:1.2rem; margin:1.3rem 0 .4rem; }
@media (min-width:720px) { .buy-row { grid-template-columns:minmax(0,520px) 1fr; align-items:start; } }
figure.product { margin:0; text-align:center; }
figure.product img { width:100%; max-width:520px; height:auto; border-radius:10px; box-shadow:var(--sh-3); }
.buy-panel { background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--amber);
  border-radius:10px; padding:1.1rem 1.2rem 1.2rem; box-shadow:var(--sh-2); }
.buy-panel h2 { margin-top:0; }
.panel-price { font-size:1.05rem; margin:.35rem 0; }
.panel-price strong { color:var(--navy); font-size:1.2rem; }
.buy-panel .btn { margin-top:.5rem; }

/* Sticky buy bar — rests in flow after the sample questions, sticks to viewport bottom while reading them */
.buybar { position:sticky; bottom:.6rem; z-index:40; margin:2rem 0 .3rem; background:var(--deep);
  color:#fff; border-radius:10px; box-shadow:var(--sh-3); display:flex; flex-wrap:wrap;
  align-items:center; gap:.45rem .9rem; padding:.55rem .85rem; }
.buybar-name { font-weight:700; }
.buybar-price { color:#DCE7F0; }
.buybar-price strong { color:var(--amber); font-size:1.1rem; }
.buybar .btn { margin:0 0 0 auto; }

/* Index cards — sales cards with bespoke duotone course art */
ul.cards { list-style:none; padding:0; display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:640px) { ul.cards { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px) { ul.cards { grid-template-columns:repeat(3,1fr); } }
.card { position:relative; border:1px solid var(--line); border-radius:10px; padding:0 1rem 1rem;
  background:#fff; box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease; }
.card:hover { transform:translateY(-3px); box-shadow:var(--sh-2); }
.card-img { display:block; width:calc(100% + 2rem); max-width:none; margin:0 -1rem .8rem; height:auto; }
.card h2 { margin:.1rem 0 .5rem; font-size:1.3rem; }
.card h2 a { color:var(--navy); text-decoration:none; }
.card h2 a:hover { text-decoration:underline; }
.card .price { font-weight:700; color:var(--navy); margin:.55rem 0 .2rem; }
.card .meta { color:var(--mut); font-size:.95rem; border-top:1px solid var(--line);
  padding-top:.55rem; margin:.55rem 0 .2rem; }
.card-cta { margin:.4rem 0 0; }

/* FAQ — full-bleed panel band (index) */
.faq-band { background:linear-gradient(180deg, var(--panel), #DFE9F1); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:.4rem 0 2.2rem; margin-top:2.5rem; }
.faq { margin-top:0; }
.qa h3 { margin:1.15rem 0 .3rem; color:var(--navy); font-size:1.05rem; }
.qa h3::before { content:""; display:inline-block; width:.55rem; height:.55rem; background:var(--amber);
  border-radius:2px; margin-right:.5rem; }
.qa p { margin:.2rem 0; max-width:70ch; }
/* Free-vs-paid answer split at its existing sentence boundary — words unchanged */
.qa-split { display:grid; gap:1rem; margin:.35rem 0 .2rem; }
@media (min-width:720px) { .qa-split { grid-template-columns:1fr 1fr; } }
.qa-split p { background:#fff; border:1px solid var(--line); border-left:4px solid var(--amber);
  border-radius:8px; padding:.8rem 1rem; margin:0; box-shadow:var(--sh-1); max-width:none; }

/* Sample questions — navy header band with the question ID as an amber chip, larger stem type,
   answer reveal keeps the Panel block with amber edge (markup untouched; presentation only) */
article.q { border:1px solid var(--line); border-radius:10px; padding:0 1.1rem 1.05rem; margin:1rem 0;
  background:#fff; max-width:860px; box-shadow:var(--sh-1); overflow:hidden; }
article.q h3 { margin:0 -1.1rem .95rem; padding:.62rem 1.1rem; font-size:1.02rem; color:#fff;
  background:linear-gradient(90deg, var(--deep), var(--navy)); display:flex; align-items:center;
  gap:.6rem; flex-wrap:wrap; }
.qid { font-weight:700; font-size:.78rem; letter-spacing:.07em; color:var(--deep);
  background:var(--amber); border-radius:999px; padding:.18rem .6rem; }
article.q > p { font-size:1.1rem; line-height:1.55; }
article.q ol { margin:.4rem 0 .8rem; padding-left:1.6rem; }
article.q ol li { margin:.3rem 0; }
details { margin-top:.7rem; }
summary { display:inline-block; cursor:pointer; background:var(--navy); color:#fff; font-weight:700;
  padding:.62rem .95rem; border-radius:999px; list-style:none; }
summary::-webkit-details-marker { display:none; }
details[open] { background:var(--panel); border-left:4px solid var(--amber);
  border-radius:0 8px 8px 0; padding:.7rem .9rem; }
details[open] summary { margin-bottom:.4rem; }
details p { margin:.3rem 0; }

/* Footer — deep-navy band; not-affiliated line stays first, verbatim */
footer { color:#DCE7F0; font-size:.95rem; background:linear-gradient(180deg, var(--deep), #0D2136); }
footer .band { background-image:var(--band-texture); padding:1.15rem 0 1.35rem; }
footer p { margin:.35rem 0; }
footer a { color:var(--amber); }
footer .logo { width:34px; height:34px; display:block; margin-bottom:.45rem; }

/* Small screens — hero CTAs go full-width tap targets */
@media (max-width:520px) {
  .hero-cta { flex-direction:column; }
  .hero-cta .btn { text-align:center; }
  .buybar .btn { margin-left:0; }
  .hero-art { margin:0 auto; }
}

/* Reduced motion respect — no transitions anywhere, including the header condense */
@media (prefers-reduced-motion: reduce) {
  .card { transition:none; } .card:hover { transform:none; }
  .site-header .band, .brand, .logo, nav a { transition:none; }
}

/* Print: sample questions print cleanly, chrome hidden (summary fix: black-on-white, bordered) */
@media print {
  nav, .btn, figure.product, .buybar, .hero-cta, .site-header, .hero-art { display:none; }
  .hero, footer { background:#fff; color:#000; }
  .hero h1, .hero .promise, footer a { color:#000; }
  article.q { break-inside:avoid; box-shadow:none; }
  article.q h3 { background:none; color:#000; }
  .qid { background:none; color:#000; border:1px solid #000; }
  summary { background:none; color:#000; border:1px solid #000; }
  details[open] { background:none; border-left:none; }
  a { color:#000; }
}