/* Shared app-page styles: page hero, chips, challenge cards, video hub, A/B lab */
.page-hero { padding: clamp(56px,8vw,110px) 0 clamp(40px,6vw,72px); }
.page-h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); line-height:.96; letter-spacing:-.03em; }
.page-hero .lead { margin-top: var(--s5); }
.sec-h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); letter-spacing:-.025em; }
.sec-head { max-width: 640px; margin: 0 auto var(--s7); text-align: center; }
.sec-head-row { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s5); margin-bottom: var(--s6); flex-wrap:wrap; }
.sec-lead { font-size:1.12rem; margin-top:12px; }

/* chips */
.chip { font-family: var(--sans); font-weight:600; font-size:.9rem; padding:9px 16px; border-radius:999px;
  border:1.5px solid var(--line-2); background: transparent; color: var(--on-dark-mut); cursor:pointer; transition: all .15s; text-transform:capitalize; }
.band-light .chip, .band-light2 .chip { border-color: rgba(0,0,0,.16); color: var(--on-light-mut); }
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

/* ===== challenge cards ===== */
.ch-cards { margin-top: var(--s5); }
.ch-card { display:flex; flex-direction:column; background: #fff; border:1px solid rgba(0,0,0,.09); border-radius: var(--radius-lg); padding: var(--s6); color: var(--on-light);
  position:relative; overflow:hidden; transition: transform .18s var(--ease), box-shadow .18s; }
.ch-card::before { content:""; position:absolute; inset:0 0 auto 0; height:6px; background: var(--gold); }
.ch-card--cobalt::before { background: var(--cobalt); } .ch-card--cherry::before { background: var(--cherry); } .ch-card--tangerine::before { background: var(--tangerine); }
.ch-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(0,0,0,.14); }
.ch-card-top { display:flex; gap:8px; margin: 6px 0 var(--s4); }
.ch-card-prize { font-family:var(--display); font-weight:800; font-size:1.9rem; line-height:.96; text-transform:uppercase; letter-spacing:-.02em; }
.ch-card-prize .num { color: var(--gold-deep); }
.ch-card--cobalt .num{color:var(--cobalt)} .ch-card--cherry .num{color:var(--cherry)} .ch-card--tangerine .num{color:var(--tangerine)}
.ch-card-sub { color: var(--on-light-mut); margin: 12px 0 var(--s5); font-size:.96rem; flex:1; }
.ch-card-meta { display:flex; gap: var(--s5); padding: var(--s4) 0; border-top:1px solid rgba(0,0,0,.08); }
.ch-card-meta .k { display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color: var(--on-light-mut); }
.ch-card-meta b { font-family:var(--display); font-size:1.3rem; }
.ch-card-go { font-family:var(--display); font-weight:700; color: var(--gold-deep); margin-top: var(--s4); }
.ch-card--closed { background: var(--surface); border-color: var(--line); color: var(--on-dark); }
.ch-card--closed::before { background: var(--on-dark-dim); }
.ch-card--closed .ch-card-sub { color: var(--on-dark-mut); }

/* ===== video hub ===== */
.vid-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom: var(--s6); }
.vh-grid { gap: var(--s6) var(--s5); }
.vh-card { display:block; text-align:left; background:transparent; border:none; padding:0; cursor:pointer; color: var(--on-light); }
.vh-thumb { position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio:16/9; box-shadow:0 8px 22px rgba(0,0,0,.14); }
.vh-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .3s var(--ease); }
.vh-card:hover .vh-thumb img { transform: scale(1.06); }
.vh-play { position:absolute; inset:0; margin:auto; width:60px; height:60px; border-radius:50%; background: rgba(13,13,16,.7); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; padding-left:4px; opacity:0; transition: opacity .2s, transform .2s; transform: scale(.8); }
.vh-card:hover .vh-play { opacity:1; transform: scale(1); }
.vh-meta h3 { font-size:1.14rem; margin:14px 0 6px; line-height:1.15; }
.vh-meta .mut-l { font-size:.92rem; }
.vh-stats { display:block; margin-top:8px; font-family:var(--mono); font-size:.76rem; color: var(--on-light-mut); }

/* lightbox */
.lightbox { position:fixed; inset:0; z-index:100; background: rgba(8,8,10,.9); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; padding: var(--s5); }
.lb-inner { width:min(960px,100%); }
.lb-frame { position:relative; aspect-ratio:16/9; background:#000; border-radius: var(--radius); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.lb-close { position:absolute; top:-46px; right:0; background: transparent; border:1px solid var(--line-2); color:#fff; width:40px; height:40px; border-radius:10px; cursor:pointer; font-size:1rem; }
.lb-close:hover { border-color: var(--gold); color: var(--gold); }
.lb-meta { color: var(--on-dark); margin-top: var(--s5); }
.lb-meta h2 { font-size:1.4rem; }
.lb-meta .mut { font-size:.86rem; margin:6px 0; }

/* ===== A/B lab ===== */
.size-toggle { display:inline-flex; align-items:center; gap:10px; margin-top: var(--s5); font-weight:600; cursor:pointer; color: var(--on-dark-mut); }
.size-toggle input { width:18px; height:18px; accent-color: var(--gold); }
.tests-stack { display:grid; gap: var(--s6); }
.abtest { background:#fff; border:1px solid rgba(0,0,0,.09); border-radius: var(--radius-lg); padding: var(--s6); color: var(--on-light); }
.abtest-head { margin-bottom: var(--s5); }
.ab-round { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--cobalt); }
.abtest-head h3 { font-size:1.4rem; margin:6px 0; }
.ab-pair { display:grid; grid-template-columns:1fr 1fr; gap: var(--s5); }
#tests.small .ab-pair { grid-template-columns: repeat(auto-fit, 220px); justify-content:center; }
.ab-variant { text-align:left; background: var(--paper-2); border:2px solid transparent; border-radius: var(--radius); overflow:hidden; cursor:pointer; padding:0; transition: border-color .15s, transform .15s; }
.ab-variant:hover { border-color: var(--gold); transform: translateY(-3px); }
.ab-variant.leader { border-color: var(--lime); }
.ab-img { aspect-ratio:16/9; overflow:hidden; }
.ab-img img { width:100%; height:100%; object-fit:cover; }
#tests.small .ab-img { width:220px; }
.ab-note { padding:12px 14px; font-size:.9rem; color: var(--on-light-mut); }
.ab-tag { font-family:var(--display); font-weight:700; color: var(--on-light); }
.ab-result { padding: 0 14px 14px; display:flex; align-items:center; gap:10px; }
.ab-bar { flex:1; height:10px; background: rgba(0,0,0,.08); border-radius:999px; overflow:hidden; }
.ab-bar span { display:block; height:100%; background: var(--cobalt); border-radius:999px; transition: width .6s var(--ease); }
.ab-variant.leader .ab-bar span { background: var(--lime); }
.ab-pct { font-family:var(--display); font-size:1.1rem; }
.ab-votes { font-size:.78rem; }
.ab-status { margin-top: var(--s5); padding: var(--s4); background: var(--paper-2); border-radius: var(--radius-sm); font-size:.92rem; color: var(--on-light); }
.ledger { margin-top: var(--s5); }
.ledger-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.ledger-top h3 { font-family:var(--display); font-size:1.15rem; }
.ledger-win { font-family:var(--mono); font-size:.8rem; color: var(--lime); white-space:nowrap; }
.ledger-n { font-family:var(--mono); font-size:.72rem; color: var(--on-dark-dim); margin-top:10px; display:block; }
@media (max-width:560px){ .ab-pair{ grid-template-columns:1fr; } }