/* Compact page: shorter sections, small blocks, CSS-only entrance animations (no script, strict-CSP safe). Loaded after app.css. */
.sec{padding-block:clamp(26px,3.6vw,48px)}
.sec-head{margin-bottom:var(--s-4)}
.sec-head h2{font-size:clamp(24px,3.1vw,34px);line-height:1.1}
.sec-head .scrib{display:none}
.sec-head .eyebrow{margin-bottom:4px}

/* hero: one screen, no wasted height */
.hero{min-height:clamp(400px,56svh,520px)}
.hero-grid{padding-block:clamp(24px,3.4vw,44px)}
.hero .lead{max-width:58ch}
.hero .cta-row{margin-top:14px}
.hero .honesty{margin-top:10px}

/* live strip: values only, the long tooltips stay out of the way */
.cell-t{display:none}
.now-grid .scene{max-width:340px}
.scene-frame{aspect-ratio:16/10}
.scene figcaption{font-size:.82rem}
.now-say{font-size:.95rem}
.stepper-wrap{margin-top:var(--s-3)}
.banner-slot:empty{display:none}

/* how it works: four small cards in a row */
.steps{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px 16px;margin-top:var(--s-2)}
.step{padding:30px 16px 16px;gap:6px}
.step h3{font-size:1.02rem;line-height:1.25}
.step .ush{margin:0}
.sec#how .disclosure{margin-top:var(--s-3)}

/* live panels: latest pull, the draw, the last pulls and what Ush says, tighter */
.panel{padding:clamp(14px,2vw,20px)}
.panel .small{display:none}
.stats{margin-bottom:var(--s-3)}

/* vote */
.sec#vote .sec-sub{margin-bottom:var(--s-3)}

/* the plain part: three cards, four folds */
.plain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.plain-card{--fe:var(--panel);position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 20px;box-shadow:var(--shadow-1)}
.plain-card h3{margin:0;font-size:1.15rem;line-height:1.2}
.plain-card p{margin:0}
.plain-k{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.plain-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 16px;margin-top:var(--s-3)}
.plain-d{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-2);padding:10px 14px}
.plain-d summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.plain-d summary::-webkit-details-marker{display:none}
.plain-d summary::after{content:"+";font-weight:800;transition:transform .25s ease}
.plain-d[open] summary::after{transform:rotate(45deg)}
.plain-d p{margin:8px 0 2px;font-size:.95rem}

/* verify: link cards only */
.sec#verify p:not(.eyebrow):not(.ush){font-size:.92rem}

/* small animations: scroll-driven entrance where supported, a few gentle loops, nothing under reduced motion */
@media (prefers-reduced-motion:no-preference){
  @keyframes cmp-rise{from{opacity:.3;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
  @keyframes cmp-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(3deg)}}
  @keyframes cmp-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,201,51,.0)}50%{box-shadow:0 0 0 6px rgba(255,201,51,.22)}}
  @supports (animation-timeline:view()){
    .step,.plain-card,.plain-d,.sec#verify li,.sec#how .disclosure{animation:cmp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
  .step-n{animation:cmp-bob 3.4s ease-in-out infinite}
  .step:nth-child(2) .step-n{animation-delay:.35s}
  .step:nth-child(3) .step-n{animation-delay:.7s}
  .step:nth-child(4) .step-n{animation-delay:1.05s}
  .hchip{animation:cmp-glow 3.6s ease-in-out infinite}
}
@media (max-width:759px){
  .hero{min-height:0}
  .steps{grid-template-columns:1fr 1fr}
  .now-grid .scene{max-width:none}
}
@media print{.plain-d{break-inside:avoid}}

.anchor{display:block;height:0;scroll-margin-top:80px}

/* verify: short cards (title + button), the checklist folds away, the impostor warning stays */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.vcard{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.vcard p{display:none}
.vcard h3{margin:0;font-size:1rem}
.verify-two{grid-template-columns:1fr}
.verify-two>.panel:first-child{display:none}
.hero{min-height:clamp(380px,50svh,470px)}
.now-grid .scene{max-width:260px}

/* the ladder explainer: the real price steps, where he is, what is on offer */
.ladder{--fe:var(--panel);margin:0 0 var(--s-4);padding:18px 20px;background:var(--panel);border-radius:var(--r-3);box-shadow:var(--shadow-1)}
.ladder h3{margin:0 0 6px;font-size:1.2rem}
.ladder p{margin:0 0 8px;max-width:72ch}
.ladder-now{font-weight:700}
.rungs{list-style:none;display:flex;gap:10px;overflow-x:auto;margin:10px 0 6px;padding:8px 4px 12px;scrollbar-width:thin}
.rung{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:70px;padding:8px 10px;border:2px solid var(--line);border-radius:14px;background:var(--panel-2)}
.rung b{font-size:1.05rem;line-height:1.1}
.rung small{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.rung+.rung::before{content:"";position:absolute;left:-12px;top:50%;width:10px;height:2px;background:var(--line)}
.rung.done{opacity:.5}
.rung.now{background:var(--red,#c8102e);border-color:transparent;color:#fff}
.rung.now small{color:#fff}
.rung.offer{border-color:var(--gold-t,#e6b800);box-shadow:0 0 0 3px rgba(255,201,51,.25)}
@media (prefers-reduced-motion:no-preference){
  .rung.offer{animation:cmp-glow 2.4s ease-in-out infinite}
  .rung.now{animation:cmp-bob 3s ease-in-out infinite}
}

/* Solscan buttons: ONE component for every receipt (pack, card, sell-back, swap, burn, gift, winner, freeze, claim, block) */
.scans{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0;align-items:center}
.scan{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:2px 8px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--panel-2);color:var(--text);font:700 11px/1 var(--f-body);text-decoration:none;position:relative}
.scan::after{content:"";position:absolute;inset:-11px -4px}
.scan .ic{width:12px;height:12px}
.scan:hover{border-color:var(--text)}
.scan:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (pointer:coarse){.scan{min-height:32px}}
.scan-t{font-size:11px;color:var(--mute)}
.scans-t{justify-content:center;gap:3px;margin:2px 0 0}
.scan-s{min-height:20px;padding:2px 6px;font-size:10px}
.rc:empty{display:none}
.stat .scans{margin-top:8px}
.tp{width:112px}
.tp-sticker.gift{border-color:var(--pink);color:var(--text)}

/* the totals: seven tiles, as many per row as fit */
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat b{font-size:clamp(20px,2.1vw,26px)}
@media (max-width:759px){.stat:last-child:nth-child(odd){grid-column:1/-1}}
.statusnote{margin:0 0 var(--s-3);padding:8px 12px;border:1px solid var(--gold-t);border-radius:var(--r-2);background:var(--panel);font-size:.9rem}

/* the draw panel sits in the free cell beside the latest pull */
@media (min-width:980px){.p-draw{grid-column:2;grid-row:1}}
.p-draw h3{margin:0 0 8px}
.p-draw p{margin:0 0 8px}
.draw-fate{font-size:.92rem}
.draw-odds{font-weight:700;font-size:.92rem}
.draw-note{font-size:.82rem;color:var(--mute)}
.drws{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.drw{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-width:0}
.drw.newest{border-color:var(--gold-t)}
.drw-top{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:.9rem}
.drw-top b{font-variant-numeric:tabular-nums lining-nums}
.drw-top .tag{margin-left:0}
.drw-out{font-weight:700}
.drw .scans{margin-top:6px;justify-content:flex-start}
.drw-more{margin:6px 0 0;font-size:.82rem;color:var(--mute);overflow-wrap:anywhere}
.drw-live{font-weight:700}
.drw-cmd code,.drw-more code{font-size:.85em;overflow-wrap:anywhere}
.draw-check{margin-top:10px;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:12px;font-size:.88rem}
.draw-check p{margin:6px 0 0}

/* the ladder v3: auto or vote tag, the x4 badge, the stay-or-climb sheet */
.ladder-votes{font-size:.88rem;color:var(--mute)}
.rung .rg-tag{margin-top:2px;padding:1px 6px;border:1px solid var(--line-strong);border-radius:99px;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase}
.rung.now .rg-tag{border-color:#fff}
.rung.k-vote .rg-tag{border-color:var(--gold-t)}
.rung .rg-rep{position:absolute;top:-9px;right:-6px;padding:1px 6px;border-radius:99px;background:var(--cap);color:var(--on-cap);font:700 .66rem/1.2 var(--f-body)}
.vgroup{margin:8px 0 0;padding:8px 12px;border:2px solid var(--line);border-radius:var(--r-2);background:var(--panel-2);list-style:none}
.vgroup.lead{border-color:var(--gold-t)}
.vg-top{display:flex;justify-content:space-between;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.vg-top b{font:400 clamp(20px,2.4vw,26px)/1.1 var(--f-display)}
.vg-n{font-size:.85rem;color:var(--mute)}
.vg-bar{height:6px;margin-top:6px;border-radius:99px;background:var(--panel);overflow:hidden}
.vg-bar i{display:block;height:100%;background:var(--foil-lin);border-radius:99px;transition:width .6s var(--ease-out)}
.vopt.lead,.vgroup.lead{max-width:none}
.vgate-note{margin:2px 2px 0;font-size:.88rem;color:var(--mute);list-style:none}

/* how it works: the income sentences, and the steps that do not happen on a gift cycle */
.how-loop{max-width:80ch;margin:0 0 var(--s-3);font-size:1rem}
.how-income{max-width:72ch;margin:var(--s-4) 0 0;font-size:.95rem}
.p-drawhow{grid-column:1/-1;columns:2 340px;column-gap:28px}
.p-drawhow .draw-note{margin:0 0 8px;break-inside:avoid}
.plain-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.drw .btn,.draw-check .btn{min-height:24px;padding:2px 10px;font-size:11px;line-height:1.2}
.stepper[data-fate="gift"] li[data-step="4"],.stepper[data-fate="gift"] li[data-step="5"],.stepper[data-fate="gift"] li[data-step="6"]{opacity:.4;text-decoration:line-through}
.mouth-note{margin:6px 0 0;font-size:.88rem;color:var(--mute)}
.tag.kind{margin-left:0}

/* the page is always dark: no theme switch (owner order 2026-10-10) */
#btn-theme { display: none; }