/* Bitcoin Trading Challenge — site-specific styles. Loaded after base.css. */

/* ---- Black band: header + hero share the logo's black ---------- */
.site-header{background:var(--black);border-bottom:1px solid #222;backdrop-filter:none}
.site-header .brand img{height:48px;width:auto}
.site-header .nav a{color:#C9CCD1}
.site-header .nav a:hover,.site-header .nav a[aria-current="page"]{color:var(--accent)}
.site-header .nav a.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.site-header .nav a.btn-primary:hover{color:var(--accent-ink)}
.site-header .nav-toggle{color:#fff;min-width:44px;min-height:44px}
@media(max-width:860px){
  .site-header .nav{background:var(--black);border-bottom-color:#222}
  .site-header .nav a{border-bottom-color:#222}
}

.band{background:var(--black);color:#fff;padding-block:clamp(3rem,8vw,6.5rem) clamp(3rem,7vw,5.5rem)}
.band .bigtype{font-size:clamp(3rem,10.5vw,8.5rem);max-width:11ch;color:#fff}
.band .lede{color:#C9CCD1}
.band a:not(.btn){color:var(--accent)}
.band-row{display:grid;gap:var(--s-7);margin-top:clamp(2rem,5vw,3.5rem);align-items:end}
@media(min-width:880px){.band-row{grid-template-columns:1.15fr .85fr}}
.band .btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.band .btn-outline{color:#fff;border-color:#5A5F68}
.band .btn-outline:hover{background:#fff;color:var(--black);border-color:#fff}
.band .facts{margin-top:var(--s-6);color:#9EA3AB;font-size:var(--fs-sm);max-width:56ch}
.band .facts strong{color:#fff;font-weight:600}

.portrait{margin:0}
.portrait .frame{aspect-ratio:4/3;overflow:hidden;border-top:4px solid var(--accent);background:#1a1a1a}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait figcaption{margin-top:var(--s-3);font-size:var(--fs-sm);color:#9EA3AB}
@media(prefers-reduced-motion:no-preference){
  .portrait .frame img{animation:settle .9s var(--ease) both .15s}
  @keyframes settle{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
}

/* ---- Inner page band (smaller) --------------------------------- */
.band.page h1{color:#fff;font-size:var(--fs-3xl);max-width:20ch}

/* ---- Passes: a ruled price list -------------------------------- */
.passes{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.passes>li{display:grid;gap:var(--s-3) var(--s-6);padding:var(--s-6) 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.passes>li{grid-template-columns:12rem 1fr auto;align-items:start}}
.passes h3{font-size:var(--fs-xl);margin:0}
.passes .price{font-family:var(--font-display);font-weight:800;font-size:var(--fs-2xl);line-height:1;letter-spacing:-.02em}
.passes .price small{font-size:var(--fs-sm);font-weight:400;color:var(--ink-2);letter-spacing:0}
.passes .yearly{font-size:var(--fs-sm);color:var(--ink-2);margin:.4em 0 0}
.passes ul{margin:0;padding-left:1.1em;color:var(--ink-2);columns:2 16rem;column-gap:var(--s-6)}
.passes ul li{margin-bottom:.35em;break-inside:avoid}
.passes .what{margin:0 0 var(--s-3);color:var(--ink)}
.passes .cap{display:inline-block;margin-top:var(--s-3);font-size:var(--fs-sm);font-weight:600;color:var(--brand)}
.passes .btn{min-height:44px;white-space:nowrap}
.note{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--s-5)}

/* ---- Quote + start free ---------------------------------------- */
.voices{display:grid;gap:var(--s-7)}
@media(min-width:880px){.voices{grid-template-columns:1.2fr .8fr;align-items:center}}
.pullquote{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);font-weight:600;letter-spacing:-.01em;max-width:22ch}
.free h3{font-size:var(--fs-lg)}
.free ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.free li{padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.free li a{font-weight:600;display:inline-block;min-height:44px;padding-top:.6em}
.free li span{display:block;font-size:var(--fs-sm);color:var(--ink-2)}

/* ---- Posts + course -------------------------------------------- */
.two{display:grid;gap:var(--s-8)}
@media(min-width:880px){.two{grid-template-columns:1fr 1fr}}
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.posts li{padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.posts h3{font-size:var(--fs-lg);margin:0 0 .2em}
.posts time{font-size:var(--fs-sm);color:var(--ink-2)}
.course{border-left:4px solid var(--accent);padding-left:var(--s-5)}
.course .price{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl)}
.course .price small{font-weight:400;font-size:var(--fs-sm);color:var(--ink-2)}

/* ---- Tables (passes page) -------------------------------------- */
.table-wrap{overflow-x:auto;border-top:2px solid var(--ink)}
.compare-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:560px}
.compare-table th,.compare-table td{padding:var(--s-3) var(--s-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare-table thead th{font-family:var(--font-display);font-size:var(--fs-md)}
.compare-table td.y{font-weight:700;color:var(--brand)}
.compare-table td.n{color:#9EA3AB}

/* ---- Footer ---------------------------------------------------- */
.risk{font-size:var(--fs-xs);color:var(--ink-2);max-width:80ch}
.site-footer a{display:inline-block;min-height:32px;padding-block:.3em}