/* ============================================================
   KACHIMI — the whole landing page, in the Foilprint direction.
   One dark ground, one foil accent, scrolled top to bottom.
   ============================================================ */
:root{
  --bg:#08070C; --surface:#12111A; --raised:#191826; --line:#25223A;
  --ink:#F5F5F7; --mute:#9A96AC; --faint:#6B6780;
  --foil1:#7C5CFF; --foil2:#38BDF8; --foil3:#6EE7B7;
  --gold:#F5C451; --up:#34D399; --down:#F87171; --fav:#FB7185;
  --disp:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --mono:Consolas,"Cascadia Mono",ui-monospace,monospace;
}
body{background:var(--bg);color:var(--ink);font-family:var(--disp);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
*{box-sizing:border-box;}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px;}

/* ---- chrome ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(8,7,12,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
/* Only the vertical padding. The shorthand here was resetting the 26px side
   padding this element inherits from .wrap, so the logo and the waitlist button
   sat flush against the window edge while the rest of the page stayed inset. */
.nav-in{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-top:15px;padding-bottom:15px;}
/* Wordmark only. The gap and the svg rule went with the mark; leaving the gap
   behind would have held 10px of empty space to the left of the name. */
.brand{display:flex;align-items:center;font-weight:700;font-size:17.5px;
  letter-spacing:-0.025em;line-height:1;flex:none;}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14px;
  color:var(--mute);min-width:0;flex:0 1 auto;}
.nav a{color:inherit;text-decoration:none;white-space:nowrap;}
.nav a:hover{color:var(--ink);}
.get{background:linear-gradient(100deg,var(--foil1),var(--foil2));color:#08070C;
  font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:999px;text-decoration:none;
  white-space:nowrap;flex:none;border:0;cursor:pointer;font-family:inherit;}
/* The row had nothing allowed to give, so at narrow widths the waitlist button
   was pushed past the right edge and clipped. The links are the part that can
   go. */
/* The tabs are now the ONLY way to reach anything, so they must never be
   hidden. They used to be display:none below 900px, which was harmless when
   the page scrolled and everything was reachable anyway; with panels it left a
   phone showing the hero and nothing else. They wrap to their own row and
   scroll sideways if the labels outgrow the width. */
@media (max-width:900px){
  .nav-in{flex-wrap:wrap;row-gap:9px;}
  .nav ul{display:flex;order:3;flex-basis:100%;gap:16px;font-size:12.5px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;}
  .nav ul::-webkit-scrollbar{display:none;}
  .nav ul li{flex:none;}
}

/* ---- section furniture ----
   Each section fills the viewport and centers its own content, so following a
   nav link lands on that section alone instead of parking it at the top with
   the next one already showing underneath. scroll-margin clears the fixed nav. */
html{scroll-behavior:smooth;}
/* No divider rule: landing on a section put a hairline directly under the nav,
   which read as a seam. Full-height sections separate themselves. */
section{padding:86px 0;
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  scroll-margin-top:80px;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

/* ---- scroll reveal ----
   Guarded on .has-js, which is set before first paint by the inline script at
   the top of the page: set it any later and the content paints visible, then
   hides, then reveals -- a flash on every load.

   The transition lives on .in, not on .rv. Putting it on the base state means
   the initial hide animates too, which is the same flash by another route. */
/* No transition: the script drives opacity and travel straight from scroll
   position, so the fade follows the wheel instead of firing once and finishing
   on its own clock. */
.has-js .rv{opacity:0;transform:translateY(26px);will-change:opacity,transform;}
.has-js .rv[data-rv-delay="1"]{transition-delay:.10s;}
.has-js .rv[data-rv-delay="2"]{transition-delay:.20s;}
.has-js .rv[data-rv-delay="3"]{transition-delay:.30s;}
.has-js .rv[data-rv-delay="4"]{transition-delay:.40s;}
@media (prefers-reduced-motion: reduce){
  .has-js .rv{transform:none;transition:opacity .4s ease;}
}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--foil1);margin-bottom:16px;}
h2{font-size:clamp(26px,3.6vw,42px);line-height:1.06;letter-spacing:-0.032em;
  font-weight:700;margin:0 0 14px;max-width:20ch;text-wrap:balance;}
h2 em{font-style:normal;background:linear-gradient(100deg,var(--foil1),var(--foil2) 46%,var(--foil3));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.lede{color:var(--mute);font-size:16.5px;line-height:1.6;max-width:52ch;margin:0 0 30px;}
.lede b{color:var(--ink);font-weight:600;}

/* ---- reveal (shared with the prototypes) ---- */
.rvrow{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;
  gap:clamp(8px,2%,18px);width:100%;}
.rvrow > *{flex:1 1 0;min-width:40px;}
.card{cursor:pointer;border:0;padding:0;background:none;font:inherit;color:inherit;
  perspective:1000px;display:block;position:relative;width:100%;
  aspect-ratio:2.5/3.5;border-radius:11px;transition:transform .3s;}
.card:hover{transform:translateY(-9px);}
/* Cards are always face up. The shared card back was the one piece of Pokemon
   trade dress on the page and carried the most risk for the least purpose, so
   it is gone and the flip went with it: only the artwork is shown, which is
   what the catalog actually licenses. Clicking now selects rather than
   turns. */
.face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background-size:cover;background-position:center;border:1px solid #35304F;}
.card:focus-visible{outline:2px solid var(--foil2);outline-offset:4px;}
.card.is-sel{box-shadow:0 0 0 2px var(--foil1),0 22px 44px -14px rgba(124,92,255,.6);border-radius:11px;}

/* ---- staged entrance, everywhere ---- */
@keyframes kIn{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
@keyframes kFade{from{opacity:0}to{opacity:1}}
.enter > *{animation:kIn .46s cubic-bezier(.2,.7,.3,1) both;}
.enter > *:nth-child(1){animation-delay:.03s}
.enter > *:nth-child(2){animation-delay:.10s}
.enter > *:nth-child(3){animation-delay:.17s}
.enter > *:nth-child(4){animation-delay:.24s}
.enter > *:nth-child(5){animation-delay:.31s}
.enter > *:nth-child(6){animation-delay:.38s}

/* ---- the readout ----
   A flush rail rather than a floating rounded card: a single hairline above it
   and vertical rules between the columns, so it reads as part of the page the
   way it does on the prototype this hero is taken from. */
.readout{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:0;
  border-top:1px solid var(--line);margin-top:8px;}
.readout > div{padding:16px 26px 4px;border-right:1px solid var(--line);}
.readout > div:first-child{padding-left:0;}
.readout > div:last-child{border-right:0;padding-right:0;}
.k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:7px;}
.nm{font-size:19px;font-weight:700;letter-spacing:-0.02em;}
.meta{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:3px;}
.v{font-family:var(--mono);font-size:23px;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
.v.gold{color:var(--gold);}
.sm{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:4px;}
.tog{margin-top:10px;display:inline-flex;align-items:center;gap:8px;background:var(--raised);
  border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 11px;font-size:11.5px;
  color:var(--mute);cursor:pointer;font-family:inherit;}
.tog i{width:30px;height:17px;border-radius:999px;background:var(--line);position:relative;display:block;transition:background .2s;}
.tog i::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--mute);transition:transform .2s,background .2s;}
.tog[data-on="1"] i{background:linear-gradient(100deg,var(--foil1),var(--foil2));}
.tog[data-on="1"] i::after{transform:translateX(13px);background:#08070C;}
.tog:focus-visible{outline:2px solid var(--foil1);outline-offset:2px;}
.spark{color:var(--up);height:38px;width:100%;display:block;}
.spark[data-dir="down"]{color:var(--down);}
.delta{font-family:var(--mono);font-size:13px;color:var(--up);}
.delta[data-dir="down"]{color:var(--down);}
.hint{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-top:16px;}

/* ---- hero ---- */
/* The deck takes the wider column and the gap is tighter: there was a band of
   empty space between the copy and the cards, and the cards were small in it.
   The top padding is small on purpose: this is the first thing on the page, and
   a tall gap under the nav pushed the stats off the bottom of the first screen.
   Everything from the launch badge to "Identified on the first guess" is meant
   to be visible without scrolling. */
.hero{display:grid;grid-template-columns:0.92fr 1.08fr;gap:30px;align-items:center;
  padding:22px 0 30px;}
h1{font-size:clamp(34px,5vw,60px);line-height:.99;letter-spacing:-0.038em;font-weight:700;
  margin:0 0 18px;text-wrap:balance;}
h1 span{background:linear-gradient(100deg,var(--foil1),var(--foil2) 46%,var(--foil3));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{color:var(--mute);font-size:17px;line-height:1.55;max-width:44ch;margin:0 0 28px;}
/* Not shipped yet, so the page says so rather than offering a download.
   Set in the page's own sans at a tight tracking, with the month in the
   accent: a mono label with a status dot read like a server health badge. */
.launch{display:inline-block;margin-bottom:14px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--mute);
  border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:7px 16px;}
.launch b{font-weight:700;color:var(--foil2);letter-spacing:-0.01em;}
.launch-note{font-size:12.5px;color:var(--faint);margin-top:20px;}
/* Waitlist. Client-side only: it validates and confirms, but nothing is stored
   until this is wired to a real list. */
.wait{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px;}
.wait input{background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:14px 20px;font:inherit;font-size:14.5px;color:var(--ink);width:min(300px,80vw);}
.wait input::placeholder{color:var(--faint);}
.wait input:focus{outline:2px solid var(--foil1);outline-offset:2px;border-color:transparent;}
.wait button{border:0;cursor:pointer;font-family:inherit;}
.wait-msg{min-height:22px;margin-top:14px;font-size:13.5px;color:var(--foil3);}
.wait-msg[data-bad]{color:#F0857A;}
/* ---- card detail rows, the way the app lists them ---- */
.pvar{display:flex;gap:5px;margin:0 0 10px;}
/* Buttons now rather than spans: they do something, so they have to be
   reachable by keyboard and announce their pressed state. */
.pvar button{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:4px 9px;
  background:none;cursor:pointer;transition:color .18s,border-color .18s,background .18s;}
.pvar button:hover{color:var(--ink);border-color:var(--foil1);}
.pvar button:focus-visible{outline:2px solid var(--foil2);outline-offset:2px;}
.pvar button.on{color:#08070C;background:linear-gradient(100deg,var(--foil1),var(--foil2));border-color:transparent;font-weight:700;}
.pvar.mini button{font-size:9px;padding:3px 7px;}
/* Figures fade through the swap, so the screen reads as re-pricing rather than
   as text being overwritten in place. */
.prow .pv,.prow .pk{transition:opacity .2s;}
.screen.repricing .pv,.screen.repricing .pk{opacity:.25;}
@media (prefers-reduced-motion: reduce){
  .fav{transition:none;}
  .fav[aria-pressed="true"]{transform:none;}
  .prow .pv,.prow .pk{transition:none;}
  .screen.repricing .pv,.screen.repricing .pk{opacity:1;}
}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px solid #1B1830;}
.prow.sub{padding-top:2px;border-bottom:0;}
.prow .pk{font-size:11.5px;color:var(--mute);}
.prow.sub .pk,.prow.sub .pv{font-size:10.5px;color:var(--faint);}
.prow .pv{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);}
.prow .pv.gold{color:var(--gold);}
.prow .pv.up{color:var(--up);}
.cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.b1{background:linear-gradient(100deg,var(--foil1),var(--foil2));color:#08070C;font-weight:700;
  font-size:14.5px;padding:14px 26px;border-radius:999px;text-decoration:none;
  box-shadow:0 12px 26px -10px rgba(124,92,255,.75);}
.b2{color:var(--mute);font-size:14.5px;text-decoration:none;}
.b2:hover{color:var(--ink);}
/* ---- the hero deck ----
   Cards sit at their own angle and height and overlap slightly, so the group
   reads as a hand someone laid down rather than four items on a shelf. The
   angle lives in a custom property because hover has to re-state the whole
   transform, and a plain translate there would snap every card upright. */
.hero-deck{position:relative;padding:10px 0 4px;}
.hero-deck::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:86%;height:74%;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(124,92,255,.30),transparent 72%);}
.hero-deck .rvrow{gap:0;align-items:center;position:relative;}
.hero-deck .card{
  transform:rotate(var(--rot,0deg)) translateY(var(--dy,0px));
  transform-origin:50% 82%;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));}
.hero-deck .card:hover{
  transform:rotate(var(--rot,0deg)) translateY(calc(var(--dy,0px) - 14px)) scale(1.035);
  z-index:6;}
.hero-deck .card:nth-child(1){--rot:-7.5deg;--dy:12px;z-index:1;}
.hero-deck .card:nth-child(2){--rot:2.5deg;--dy:-8px;z-index:3;margin-left:-7%;}
.hero-deck .card:nth-child(3){--rot:-3.5deg;--dy:-2px;z-index:2;margin-left:-7%;}
.hero-deck .card:nth-child(4){--rot:6.5deg;--dy:14px;z-index:4;margin-left:-7%;}
.hero-deck .card.is-sel{z-index:7;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);}
.stats div{padding:16px 22px 18px;border-right:1px solid var(--line);}
.stats div:last-child{border-right:0;}
.rn{font-family:var(--mono);font-size:27px;font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,var(--foil1),var(--foil3));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.rl{font-size:13.5px;color:var(--mute);margin-top:4px;}

/* ---- phone frame, for the app sections ---- */
/* Bigger: at 300px the screens sat in a lot of empty column and the text inside
   was too small to read. Everything inside scales with them. */
/* Centered in its column at every width. The hint underneath centers itself, so
   with the phone left-aligned the two never lined up. */
.phone{width:100%;max-width:376px;margin-left:auto;margin-right:auto;
  aspect-ratio:9/18.6;background:var(--surface);
  border:1px solid var(--line);border-radius:36px;padding:14px 12px;position:relative;
  box-shadow:0 34px 60px -24px rgba(0,0,0,.9);overflow:hidden;}
.phone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:88px;height:5px;border-radius:99px;background:#2A2740;}
.screen{margin-top:20px;height:calc(100% - 24px);overflow:hidden;}
.scr-title{font-size:18px;font-weight:700;letter-spacing:-0.015em;padding:0 8px 9px;}
.scr-sub{font-family:var(--mono);font-size:11px;color:var(--faint);padding:0 8px 12px;letter-spacing:.1em;text-transform:uppercase;}
/* Nothing on the page said these were live, so nobody tried them. */
/* Not flex. A flex container turns each run of text into its own anonymous
   item, so "It cycles through raw, sleeved and toploaded, but tap the
   viewfinder to run it again" broke into three stacked blocks with 7px of gap
   between them. This is one sentence and wants to wrap like one. */
.tryhint{display:block;margin:14px auto 0;max-width:376px;
  font-size:12.5px;line-height:1.5;color:var(--mute);text-align:center;}
/* The emphasis was foil green, which read as a status color -- "live", "up",
   "good" -- on a line that is only an instruction. Plain bright text carries
   the emphasis without claiming anything. */
.tryhint b{color:var(--ink);font-weight:600;}
/* The nav scrolls away with the page, so getting back to the top meant
   scrolling the whole way by hand. */
.totop{position:fixed;right:26px;bottom:26px;z-index:70;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--line);background:rgba(20,19,31,.9);
  backdrop-filter:blur(10px);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,transform .25s,visibility .25s,border-color .18s;}
.totop.on{opacity:1;visibility:visible;transform:none;}
.totop:hover{border-color:var(--foil2);}
.totop:focus-visible{outline:2px solid var(--foil2);outline-offset:3px;}
.totop svg{width:19px;height:19px;}
.brand{text-decoration:none;color:inherit;}
@media (prefers-reduced-motion: reduce){.totop{transition:opacity .2s,visibility .2s;transform:none;}}

/* ---- split layout used by the app sections ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
/* Which side the phone sits on is derived from the section's position, never
   hand-assigned. A `flip` class travels with the section it is written on, so
   moving Portfolio left Library and Wishlist both phone-left and Sets and
   Portfolio both phone-right. Every section is a sibling in .wrap and #get is
   the only one without a .split, so it matches nothing and costs only an index.
   Reordering sections now cannot break the alternation. */
section:nth-of-type(even) > .split > .copy{order:2;}
.feature{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.feature i{width:22px;height:22px;border-radius:6px;flex:none;margin-top:2px;
  background:linear-gradient(140deg,rgba(124,92,255,.35),rgba(56,189,248,.3));
  border:1px solid #3A3560;display:grid;place-items:center;font-size:11px;font-style:normal;color:var(--foil3);}
.feature b{display:block;font-size:15px;margin-bottom:2px;}
.feature span{font-size:14px;color:var(--mute);line-height:1.5;}

/* ---- library ---- */
.folders{display:flex;gap:8px;flex-wrap:wrap;padding:0 8px 12px;}
.fchip{background:var(--raised);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:12.5px;color:var(--mute);cursor:pointer;font-family:inherit;
  transition:background .18s,color .18s,border-color .18s;}
.fchip[aria-pressed="true"]{background:linear-gradient(100deg,var(--foil1),var(--foil2));
  color:#08070C;border-color:transparent;font-weight:700;}
.fchip:focus-visible{outline:2px solid var(--foil2);outline-offset:2px;}
/* The folder view swipes: the old grid leaves to the left, the new one arrives
   from the right, so changing folder reads as moving between screens rather
   than the contents blinking. */
.libview{position:relative;overflow:hidden;padding:0 8px;}
.libtrack{transition:transform .34s cubic-bezier(.32,.72,.3,1),opacity .34s;}
.libtrack.out{transform:translateX(-16%);opacity:0;}
.libtrack.in{transform:translateX(16%);opacity:0;transition:none;}
/* One frame in the rotation scrolls the grid, the way you would flick through
   a full folder. */
.libtrack.scrolling{animation:libscroll 4.2s cubic-bezier(.5,0,.5,1) both;}
/* Reduced motion keeps the rotation but loses the travel: the folders still
   change, they just cross-fade instead of sliding. */
@media (prefers-reduced-motion: reduce){
  .libtrack.out,.libtrack.in{transform:none;}
  .libtrack.scrolling{animation:none;}
}
@keyframes libscroll{
  0%,12%{transform:translateY(0);}
  52%,68%{transform:translateY(calc(-50% + 96px));}
  96%,100%{transform:translateY(0);}
}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.slot{aspect-ratio:2.5/3.5;border-radius:7px;background-size:cover;background-position:center;
  border:1px solid #2E2A46;position:relative;overflow:hidden;}
.slot.empty{background:#15141F;border-style:dashed;display:grid;place-items:center;
  color:#3E3A5C;font-size:18px;}
.slot b{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(8,7,12,.92));
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;padding:11px 4px 4px;text-align:center;}
.qty{position:absolute;top:4px;right:4px;background:rgba(8,7,12,.85);border:1px solid #3A3560;
  border-radius:5px;font-family:var(--mono);font-size:9px;padding:2px 5px;}
.libfoot{font-family:var(--mono);font-size:10.5px;color:var(--faint);padding:12px 8px 0;letter-spacing:.06em;}

/* ---- wishlist rows ---- */
.wrow{display:flex;align-items:center;gap:11px;padding:9px 8px;border-bottom:1px solid #201D33;}
.wthumb{width:32px;aspect-ratio:2.5/3.5;border-radius:4px;background-size:cover;background-position:center;flex:none;}
.wname{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wname i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint);}
.wprice{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;text-align:right;}
/* Direction is carried by a sign as well as a color, so it survives being
   read by someone who cannot separate the two. */
.wprice i{display:block;font-style:normal;font-size:9.5px;color:var(--faint);}
.wprice.dn{color:var(--up);}
.wprice.dn i{color:var(--up);}
.wprice.up{color:var(--down);}
.wprice.up i{color:var(--down);}
/* A heart, not a star. The app marks a favorite with a heart and the page
   was using both, which reads as two different actions. */
.fav{background:none;border:0;cursor:pointer;color:#3E3A5C;font-size:16px;padding:2px;line-height:1;
  transition:color .18s,transform .18s;}
.fav[aria-pressed="true"]{color:var(--fav);transform:scale(1.12);}
.fav:focus-visible{outline:2px solid var(--foil2);outline-offset:2px;}

/* ---- sets ---- */
.setrow{display:flex;align-items:center;gap:9px;padding:9px 6px;border-bottom:1px solid #201D33;}
.setlogo{width:30px;height:30px;border-radius:7px;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:8px;color:#08070C;font-weight:700;}
.setname{flex:1;font-size:12px;}
.setname i{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;color:var(--faint);}
.bar{height:4px;border-radius:99px;background:#221F36;margin-top:4px;overflow:hidden;}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--foil1),var(--foil3));}
.follow{background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--mute);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;cursor:pointer;}
.follow[aria-pressed="true"]{background:var(--foil3);color:#08070C;border-color:transparent;font-weight:700;}
.follow:focus-visible{outline:2px solid var(--foil2);outline-offset:2px;}

/* ---- closing ---- */
.close{text-align:center;padding:96px 0 104px;}
.close h2{margin:0 auto 16px;max-width:18ch;}
.close .lede{margin:0 auto 30px;}
.foot{border-top:1px solid var(--line);padding:26px 0 40px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--faint);}
/* The disclaimer takes its own row under the two footer notes, and is not
   hidden away at small sizes: a notice nobody can read is not a notice. */
.foot-legal{flex-basis:100%;order:9;line-height:1.75;max-width:62ch;}

/* On a laptop screen the first view has to reach the stat labels. Measured at
   1280x800 it overshot by ~108px, so everything above them gives a little back
   rather than the hero being allowed to run past the fold. */
@media (max-height:920px){
  .hero{padding:12px 0 16px;gap:24px;}
  h1{font-size:clamp(30px,3.7vw,46px);margin-bottom:14px;}
  .hero-sub{font-size:15.5px;margin-bottom:20px;}
  .launch{margin-bottom:10px;padding:6px 14px;font-size:11.5px;}
  .eyebrow{margin-bottom:10px;}
  .b1{padding:12px 22px;}
  .hero-deck{padding:2px 0 0;}
  .readout > div{padding:12px 26px 4px;}
  .stats div{padding:12px 22px 14px;}
  .rn{font-size:23px;}
  .rl{font-size:12.5px;}
}

@media (max-width:900px){
  .hero,.split{grid-template-columns:1fr;gap:34px;}
  section:nth-of-type(even) > .split > .copy{order:0;}
  .readout{grid-template-columns:1fr 1fr;}
  .readout > div{padding:18px 18px 4px;border-bottom:1px solid var(--line);}
  .readout > div:nth-child(2n){border-right:0;padding-right:0;}
  .readout > div:nth-child(2n+1){padding-left:0;}
  /* .nav ul stays visible: see the note above, it is the only navigation */
  .stats{grid-template-columns:1fr;}
  .phone{margin:0 auto;}
}
@media (prefers-reduced-motion: reduce){
  .card,.fchip{transition:none;}
  .enter > *{animation:kFade .3s both;}
}

/* ---- the scan screen ----
   Built to match the app rather than to look like a camera: the same pill, the
   same "results land below" line, the same recently-scanned strip with a price
   under each thumbnail, and the same four tabs. A mockup that invents its own
   chrome teaches the visitor an interface they will not find. */
/* The shutter row sits 52px off the phone's bottom edge and is 44px tall, so
   its top is 96px up; the phone's own 14px padding accounts for the rest. The
   base .screen margin-top stacks with this, which is why it is restated here
   rather than left to inherit -- the first version let the recently-scanned
   strip run underneath the shutter. */
.scan-screen{display:flex;flex-direction:column;gap:9px;padding:2px 4px;
  margin-top:8px;height:calc(100% - 90px);}
.sc-pill{align-self:center;background:#000;color:var(--ink);font-weight:700;font-size:12.5px;
  border-radius:999px;padding:6px 15px;}
.sc-sub{text-align:center;font-size:10.5px;color:var(--mute);margin-top:-3px;}

.vf{position:relative;flex:1;min-height:150px;border-radius:10px;overflow:hidden;
  background:#26242C;display:flex;align-items:center;justify-content:center;cursor:pointer;}
/* The card starts tilted and off-square, the way a real photograph is, and is
   squared up by the flatten step. */
.vf-shot{position:relative;width:52%;aspect-ratio:2.5/3.5;background-size:cover;
  background-position:center;border-radius:5px;box-shadow:0 14px 30px -12px #000;
  transform:perspective(560px) rotateY(-17deg) rotateZ(-4deg) scale(.95);
  transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.vf[data-stage="2"] .vf-shot,.vf[data-stage="3"] .vf-shot{transform:none;}

/* The plastic. A penny sleeve is a faint sheen and a slightly proud edge; a
   toploader adds a thick rigid rim. Both sit over the artwork, which is the
   whole point: the card is never taken out. */
.vf-plastic{position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .4s;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0 22%,transparent 42%);}
.vf[data-wrap="sleeve"] .vf-plastic,.vf[data-wrap="top"] .vf-plastic{opacity:1;}
.vf[data-wrap="sleeve"] .vf-plastic{box-shadow:0 0 0 2px rgba(226,232,240,.34);}
.vf[data-wrap="top"] .vf-plastic{box-shadow:0 0 0 6px rgba(226,232,240,.30),
  0 0 0 7px rgba(148,163,184,.5);}

.vf-c{position:absolute;width:17px;height:17px;border:2.5px solid #4FC3F7;opacity:0;
  transition:opacity .3s,inset .55s cubic-bezier(.2,.7,.3,1);}
.vf-c.tl{border-right:0;border-bottom:0;border-radius:4px 0 0 0;inset:5% auto auto 5%;}
.vf-c.tr{border-left:0;border-bottom:0;border-radius:0 4px 0 0;inset:5% 5% auto auto;}
.vf-c.bl{border-right:0;border-top:0;border-radius:0 0 0 4px;inset:auto auto 5% 5%;}
.vf-c.br{border-left:0;border-top:0;border-radius:0 0 4px 0;inset:auto 5% 5% auto;}
.vf[data-stage="1"] .vf-c,.vf[data-stage="2"] .vf-c,.vf[data-stage="3"] .vf-c{opacity:1;}
.vf[data-stage="2"] .vf-c.tl,.vf[data-stage="3"] .vf-c.tl{inset:15% auto auto 23%;}
.vf[data-stage="2"] .vf-c.tr,.vf[data-stage="3"] .vf-c.tr{inset:15% 23% auto auto;}
.vf[data-stage="2"] .vf-c.bl,.vf[data-stage="3"] .vf-c.bl{inset:auto auto 15% 23%;}
.vf[data-stage="2"] .vf-c.br,.vf[data-stage="3"] .vf-c.br{inset:auto 23% 15% auto;}

.vf-sweep{position:absolute;left:0;right:0;height:38%;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(79,195,247,.22),transparent);}
.vf[data-stage="3"] .vf-sweep{opacity:1;animation:vfSweep 1s ease-in-out;}
@keyframes vfSweep{from{transform:translateY(-110%)}to{transform:translateY(300%)}}

.sc-status{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--foil3);text-align:center;min-height:12px;}

.sc-recent-head{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:0 2px 6px;}
.sc-clear{color:#5AA9E6;}
.sc-strip{display:flex;gap:7px;overflow:hidden;}
.sc-item{flex:none;width:46px;}
/* display:block matters. These are <span>s, and an inline box ignores width,
   height and aspect-ratio, so the thumbnails collapsed to 2x23px and the strip
   showed prices under nothing. The other card thumbnails on the page only
   escape this because their parent is a flex container, which blockifies its
   children for free. */
.sc-item .thumb{display:block;width:46px;aspect-ratio:2.5/3.5;border-radius:4px;
  background-size:cover;background-position:center;border:1px solid #35304F;}
.sc-item .nm3{font-size:8.5px;color:var(--mute);margin-top:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.sc-item .pr{font-family:var(--mono);font-size:9px;color:var(--up);}

/* The shutter row and the tab bar sit on the phone, not in the scrolling
   screen, because that is where they are in the app. */
.sc-bar{position:absolute;left:0;right:0;bottom:52px;height:44px;
  display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.sc-lib,.sc-spacer{width:26px;height:26px;border-radius:8px;}
.sc-lib{background:var(--raised);border:1px solid var(--line);}
.sc-shutter{width:40px;height:40px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px var(--bg),0 0 0 5px #fff;}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:46px;background:#0B0913;
  border-top:1px solid var(--line);display:flex;align-items:center;}
.tb{flex:1;text-align:center;font-size:9.5px;color:var(--faint);}
.tb.on{color:var(--foil1);font-weight:700;}

@media (prefers-reduced-motion: reduce){
  .vf-shot{transition:none;}
  .vf-c{transition:opacity .2s;}
  .vf[data-stage="3"] .vf-sweep{animation:none;opacity:0;}
}

/* ---- portfolio ----
   The window chips reuse .pvar so they behave and read exactly like the
   printing chips two sections up: same shape, same pressed state, same idea. */
.pf-total{padding:4px 0 10px;}
.pf-value{font-family:var(--mono);font-size:29px;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;line-height:1.1;}
.pf-delta{font-family:var(--mono);font-size:12px;margin-top:4px;}
.pf-delta[data-dir="up"]{color:var(--up);}
.pf-delta[data-dir="down"]{color:var(--down);}

/* Swipe on a window change, matching the library. The track leaves to the left
   and the replacement arrives from the right, so a change of window reads as
   travel through time rather than as numbers being overwritten. */
.pf-track{transition:transform .26s cubic-bezier(.4,0,.6,1),opacity .26s;}
.pf-track.out{transform:translateX(-11%);opacity:0;}
.pf-track.in{transform:translateX(11%);opacity:0;transition:none;}

.pf-mover{display:flex;align-items:center;gap:9px;padding:6px 0;
  border-bottom:1px solid #1B1830;}
.pf-mover .thumb{width:26px;aspect-ratio:2.5/3.5;border-radius:3px;flex:none;
  background-size:cover;background-position:center;border:1px solid #35304F;}
.pf-mover .nm2{flex:1;min-width:0;font-size:12px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.pf-mover .ch{font-family:var(--mono);font-size:11.5px;flex:none;}
.pf-mover .ch[data-dir="up"]{color:var(--up);}
.pf-mover .ch[data-dir="down"]{color:var(--down);}

@media (prefers-reduced-motion: reduce){
  .pf-track,.pf-track.out,.pf-track.in{transition:none;transform:none;opacity:1;}
}

/* The waitlist honeypot. Positioned away rather than display:none: a bot that
   fills every input is the thing being caught, and some skip hidden ones.
   Doubled up as .wait .hp because the plain `.wait input` sizing rule is more
   specific than a lone class and was stretching this back to full width. It is
   absolutely positioned so it never affected layout, but a 300px invisible
   input is still an invitation to a rendering bug later. */
.wait .hp,.hp{position:absolute !important;left:-9999px;top:auto;
  width:1px !important;height:1px;padding:0;margin:0;border:0;
  opacity:0;pointer-events:none;}

/* ---- the card detail screen ----
   Laid out from the app's own screen rather than invented: identity and chips
   at the top, one price card carrying source, figure, change, the three chart
   modes, the ranges and the low/mid/high row, then the version picker and the
   two actions. */
/* Everything the app shows on this screen has to fit without scrolling, so
   the spacing is tighter than the app's. A mockup that clips its own bottom
   two buttons reads as broken rather than as scrollable. */
.cd-screen{display:flex;flex-direction:column;gap:4px;padding:2px 6px;
  margin-top:4px;height:calc(100% - 46px);}
.cd-head{display:flex;gap:9px;align-items:flex-start;}
.cd-thumb{width:44px;aspect-ratio:2.5/3.5;border-radius:4px;flex:none;
  background-size:cover;background-position:center;border:1px solid #35304F;}
.cd-id{flex:1;min-width:0;}
.cd-name{font-size:16px;font-weight:700;letter-spacing:-0.015em;line-height:1.2;}
.cd-set{font-size:10.5px;color:var(--mute);margin-top:1px;}
.cd-chips{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap;}
.cd-chip{font-family:var(--mono);font-size:8px;letter-spacing:.09em;
  background:var(--raised);border:1px solid var(--line);border-radius:999px;
  padding:2px 6px;color:var(--mute);}
.cd-chip.hot{background:rgba(124,92,255,.2);border-color:rgba(124,92,255,.55);color:#C4B5FD;}
.cd-heart{color:var(--faint);font-size:15px;flex:none;cursor:default;}

.cd-card{background:var(--raised);border:1px solid var(--line);border-radius:11px;
  padding:7px 10px;}
.cd-src{display:flex;justify-content:space-between;align-items:center;
  font-size:9.5px;color:var(--faint);margin-bottom:2px;}
.cd-cur{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 6px;}
.cd-price{font-family:var(--mono);font-size:23px;letter-spacing:-0.02em;line-height:1.15;
  font-variant-numeric:tabular-nums;}
.cd-delta{font-family:var(--mono);font-size:10.5px;margin:1px 0 5px;}
.cd-delta[data-dir="up"]{color:var(--up);}
.cd-delta[data-dir="down"]{color:var(--down);}
.cd-tabs{margin:0 0 5px;}
.cd-tabs button{flex:1;text-align:center;}
.cd-legend{font-family:var(--mono);font-size:9.5px;color:var(--mute);margin-top:4px;}
.cd-ranges{margin:5px 0 0;}
.cd-ranges button{flex:1;text-align:center;padding-left:0;padding-right:0;}

.cd-lmh{display:flex;gap:14px;margin-top:5px;}
.cd-lmh .k{display:block;margin-bottom:1px;}
.cd-lmh b{font-family:var(--mono);font-size:11.5px;font-weight:400;}

.cd-block{background:var(--raised);border:1px solid var(--line);border-radius:11px;padding:7px 10px;}
.cd-q{font-size:12.5px;font-weight:700;}
.cd-hint{font-size:9.5px;color:var(--faint);line-height:1.45;margin:2px 0 5px;}
/* The version rows are radios, not chips: one is true of the card in your hand,
   and the price above depends on which. */
.cd-ver{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:4px 9px;margin-top:3px;cursor:pointer;font:inherit;color:var(--ink);}
.cd-ver .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--faint);flex:none;}
.cd-ver .vn{flex:1;min-width:0;font-size:12px;}
.cd-ver .mult{font-family:var(--mono);font-size:9px;background:rgba(245,196,81,.16);
  color:var(--gold);border-radius:999px;padding:1px 6px;flex:none;}
.cd-ver .vp{font-family:var(--mono);font-size:11.5px;flex:none;}
.cd-ver.on{border-color:var(--foil1);background:rgba(124,92,255,.13);}
.cd-ver.on .dot{border-color:var(--foil1);background:var(--foil1);box-shadow:inset 0 0 0 2px var(--raised);}
.cd-ver:focus-visible{outline:2px solid var(--foil2);outline-offset:2px;}

.cd-act{border-radius:9px;padding:6px;text-align:center;font-size:12px;font-weight:700;
  background:linear-gradient(100deg,var(--foil1),var(--foil2) 55%,var(--foil3));color:#08070C;}
.cd-act.ghost{background:var(--raised);border:1px solid var(--line);color:var(--ink);font-weight:600;}

/* ---- the results screen ----
   Best match on top, the runners-up under it, and the way out at the bottom.
   The runners-up are not decoration: an app that only ever shows one answer
   gives the reader nothing to correct. */
/* margin-top is restated rather than inherited: the base .screen adds 20px,
   which stacked on top of this height and pushed the screen under the tab
   bar. Same trap as .scan-screen. */
.id-screen{display:flex;flex-direction:column;padding:0 4px;
  margin-top:6px;height:calc(100% - 38px);}
.id-top{display:flex;gap:10px;align-items:center;background:var(--raised);
  border:1px solid rgba(110,231,183,.4);border-radius:11px;padding:9px 10px;}
.id-top .thumb{width:48px;aspect-ratio:2.5/3.5;border-radius:5px;flex:none;
  background-size:cover;background-position:center;border:1px solid #35304F;}
/* The name and the set line are <span>s, so without this they flow inline and
   "Base Set" runs straight into "Charizard". They are two lines, so they have
   to be blocks. */
.id-top .who{flex:1;min-width:0;display:flex;flex-direction:column;}
.id-top .n{display:block;font-size:14px;font-weight:700;letter-spacing:-0.01em;}
.id-top .s{display:block;font-family:var(--mono);font-size:10px;color:var(--mute);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.id-score{font-family:var(--mono);font-size:9.5px;color:var(--foil3);
  border:1px solid #2F6B55;border-radius:999px;padding:2px 8px;flex:none;}

.id-alt{display:flex;gap:9px;align-items:center;width:100%;text-align:left;
  background:none;border:1px solid var(--line);border-radius:9px;padding:6px 8px;
  margin-bottom:5px;cursor:pointer;font:inherit;color:var(--ink);
  transition:border-color .18s,background .18s;}
.id-alt .thumb{width:28px;aspect-ratio:2.5/3.5;border-radius:3px;flex:none;
  background-size:cover;background-position:center;border:1px solid #35304F;}
.id-alt .n2{flex:1;min-width:0;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.id-alt .sc{font-family:var(--mono);font-size:10px;color:var(--faint);flex:none;}
.id-alt:hover{border-color:var(--foil1);}
.id-alt:focus-visible{outline:2px solid var(--foil2);outline-offset:2px;}

.id-not{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;margin-top:auto;
  background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  cursor:pointer;font:inherit;color:var(--ink);font-size:12.5px;font-weight:600;}
.id-not-sub{font-size:10px;font-weight:400;color:var(--faint);}
.id-not:focus-visible{outline:2px solid var(--foil2);outline-offset:2px;}
.id-learn{font-size:9.5px;color:var(--faint);text-align:center;padding:8px 4px 0;min-height:26px;}
.id-learn.said{color:var(--foil3);}

/* Every mockup carries the app's four tabs, so every mockup gives back the
   height they occupy. The scan, results and card-detail screens set their own
   heights already; this covers the rest. */
.phone.has-tabs .screen{height:calc(100% - 70px);}

/* The catalog size belongs to the cards, not to the headline. Above the copy
   it read as a stat block bolted on top of a sentence; above the hand it reads
   as a caption on the thing it counts. */
/* The gap has to clear what the cards actually reach, not what their boxes
   measure. Each is rotated up to 7.5deg about a low origin, so a top corner
   already sits ~13px above the row; card 2 is translated -8px on top of that;
   and hovering lifts another 14px and scales 1.035. 14px of margin left the
   hovered card sitting on the text. */
.deck-stat{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--foil1);text-align:center;margin-bottom:48px;position:relative;z-index:8;}

/* ---- explore ----
   Card of the day on top, then the two movers lists. Down is given the same
   weight as up on purpose: a page that only shows winners is a page nobody
   holding a losing card believes. */
.ex-hero{display:flex;gap:10px;align-items:center;background:var(--raised);
  border:1px solid var(--line);border-radius:12px;padding:9px 10px;}
.ex-hero-art{width:52px;aspect-ratio:2.5/3.5;border-radius:5px;flex:none;
  background-size:cover;background-position:center;border:1px solid #35304F;}
.ex-hero-id{flex:1;min-width:0;}
.ex-hero-p{font-family:var(--mono);font-size:14px;margin-top:5px;}
.ex-up{font-size:10.5px;color:var(--up);}
.ex-down{font-size:10.5px;color:var(--down);}

.ex-row{display:flex;align-items:center;gap:9px;padding:5px 2px;
  border-bottom:1px solid #1B1830;}
.ex-row .thumb{width:24px;aspect-ratio:2.5/3.5;border-radius:3px;flex:none;
  background-size:cover;background-position:center;border:1px solid #35304F;}
.ex-row .nm4{flex:1;min-width:0;font-size:11px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.ex-row .pz{font-family:var(--mono);font-size:10.5px;color:var(--mute);flex:none;}
.ex-row .ch2{font-family:var(--mono);font-size:10.5px;flex:none;min-width:46px;text-align:right;}
.ex-row .ch2[data-dir="up"]{color:var(--up);}
.ex-row .ch2[data-dir="down"]{color:var(--down);}

/* ============================================================
   The remaining screens, drawn from the app rather than invented.
   Data is scaled up from Aaliyah's 11-card test collection: the
   layout is hers, the numbers are a collection worth showing on a
   landing page.
   ============================================================ */
.ph-title{font-size:17px;font-weight:700;text-align:center;padding:2px 0 10px;letter-spacing:-0.01em;}

/* three counts across the top of Library */
.lib-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:10px 6px;}
.lib-stats > div{text-align:center;min-width:0;}
.lib-stats b{display:block;font-family:var(--mono);font-size:15px;font-weight:400;
  letter-spacing:-0.01em;}
.lib-stats span{display:block;font-size:8.5px;color:var(--faint);margin-top:2px;}

/* Cards / Folders / Wishlist / Sets */
.seg{display:flex;gap:2px;background:var(--raised);border:1px solid var(--line);
  border-radius:9px;padding:3px;margin-top:9px;}
.seg button{flex:1;background:none;border:0;border-radius:7px;padding:5px 2px;
  font:inherit;font-size:10px;color:var(--mute);cursor:pointer;}
.seg button.on{background:var(--surface);color:var(--ink);font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.5);}

.fchips{display:flex;gap:5px;margin-top:9px;overflow:hidden;}
.fchip b{font-weight:400;color:var(--faint);margin-left:4px;}
.fchip.ghost{color:#5AA9E6;border-style:dashed;}
.fchip[aria-pressed="true"] b{color:#08070C;opacity:.7;}

/* the card grid, three across like the app */
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px;}
.lib-grid.tight{gap:5px;}
.lib-cell{min-width:0;}
.lib-cell .art{position:relative;aspect-ratio:2.5/3.5;border-radius:6px;overflow:hidden;
  background-size:cover;background-position:center;border:1px solid #2E2A46;}
.lib-cell .nm5{font-size:8.5px;margin-top:3px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.lib-cell .st{font-size:7.5px;color:var(--faint);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.lib-cell .pz2{font-family:var(--mono);font-size:8.5px;}
.lib-cell .pz2[data-dir="up"]{color:var(--up);}
.lib-cell .pz2[data-dir="down"]{color:var(--down);}
/* badges sit on the artwork, as they do in the app */
.bdg{position:absolute;top:3px;width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:8px;line-height:1;}
.bdg.l{left:3px;background:rgba(8,7,12,.66);color:var(--ink);}
.bdg.l.on{background:var(--fav);color:#fff;}
.bdg.l.mark{background:var(--foil1);color:#fff;}
.bdg.r{right:3px;background:rgba(8,7,12,.66);color:var(--mute);}
.bdg.r.got{background:var(--up);color:#08070C;font-weight:700;}
/* not owned reads as not owned */
.lib-cell.locked .art{filter:grayscale(1) brightness(.62);}
.lib-cell.owned .art{box-shadow:0 0 0 1px var(--foil1);}

.wl-note{display:flex;justify-content:space-between;gap:8px;align-items:baseline;
  font-size:8.5px;color:var(--faint);margin-top:8px;}
.wl-act{color:#5AA9E6;flex:none;}

/* ---- set detail ---- */
.set-screen{display:flex;flex-direction:column;}
.set-head{display:flex;align-items:flex-start;gap:8px;}
.set-id{flex:1;min-width:0;}
.follow{flex:none;background:var(--raised);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;font:inherit;font-size:10px;color:var(--ink);cursor:pointer;}
.follow[aria-pressed="true"]{background:linear-gradient(100deg,var(--foil1),var(--foil2));
  color:#08070C;border-color:transparent;font-weight:700;}
.progbar{height:5px;border-radius:999px;background:var(--raised);overflow:hidden;margin-top:10px;}
.progbar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--foil3),var(--foil2));}
.set-prog{font-family:var(--mono);font-size:9.5px;color:var(--mute);margin-top:5px;}
.set-filter{margin-top:8px;}
.rar-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;
  font-size:10px;color:var(--mute);}
.rar-sort{font-family:var(--mono);font-size:9px;color:var(--faint);}
.rar-chips{margin-top:6px;flex-wrap:wrap;}
.rar-chips button{font-size:8.5px;padding:3px 7px;}

/* ---- portfolio ---- */
.pf-screen{display:flex;flex-direction:column;}
.pf-card{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:10px 11px;}
.pf-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;}
.pf-since{font-family:var(--mono);font-size:9px;color:var(--faint);margin-top:4px;}
.pf-chart{background:var(--raised);border:1px solid var(--line);border-radius:12px;
  padding:9px 10px;margin-top:8px;}

/* ---- explore ---- */
/* Scrolls for the same reason the card detail does: the real screen has more
   on it than one phone height, and cutting rows out of the demo to avoid a
   scrollbar would misrepresent the tab. */
.ex-screen{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;}
.ex-screen::-webkit-scrollbar{width:4px;}
.ex-screen::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;}
.ex-screen::-webkit-scrollbar-track{background:transparent;}
.ex-search{background:var(--raised);border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;font-size:10px;color:var(--faint);margin-bottom:11px;}
.ex-hero{align-items:flex-start;}
.ex-hero-p{font-family:var(--mono);font-size:16px;margin-top:4px;}
.ex-btns{display:flex;gap:5px;margin-top:7px;}
.ex-btns span{font-size:8.5px;border:1px solid var(--line);border-radius:999px;
  padding:3px 8px;color:var(--mute);}
.ex-note{font-size:8.5px;color:var(--faint);line-height:1.45;margin-top:7px;}
.ex-strip{display:flex;gap:6px;overflow:hidden;}
/* Bigger than the scan strip: these are the point of the screen rather than
   a history of what already happened, and at 52px the artwork read as a chip
   rather than a card. 2.5:3.5 is enforced by aspect-ratio so it stays a card
   shape at any width. */
.ex-tile{flex:none;width:64px;}
.ex-tile .art2{display:block;width:64px;aspect-ratio:2.5/3.5;border-radius:5px;
  background-size:cover;background-position:center;border:1px solid #35304F;}
.ex-tile .nm6{font-size:8.5px;color:var(--mute);margin-top:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.ex-tile .ch3{font-family:var(--mono);font-size:9px;}
.ex-tile .ch3[data-dir="up"]{color:var(--up);}
.ex-tile .ch3[data-dir="down"]{color:var(--down);}
.ex-tile .pz3{font-family:var(--mono);font-size:8px;color:var(--faint);}

/* the variant under a mover's name, as the app lists it */
.pf-mover .nm2 i{display:block;font-style:normal;font-size:9px;color:var(--faint);margin-top:1px;}

/* the badges are buttons now, so they need to look and focus like it */
.bdg.fav-b,.bdg.tick{border:0;cursor:pointer;font-family:inherit;padding:0;}
.bdg.fav-b:focus-visible,.bdg.tick:focus-visible,.vf:focus-visible{
  outline:2px solid var(--foil2);outline-offset:2px;}
.ex-tile .ch3.top{color:var(--gold);}

/* At phone widths the whole page narrows and the wishlist's two-line note
   pushes its last row of cards past the tab bar by a few pixels. */
@media (max-width:620px){
  /* The whole page narrows here, so every phone screen loses a little height.
     The wishlist was the one that ran 15px past its tab bar; these come off
     padding rather than content, so nothing is dropped. */
  .wl-note{display:block;}
  .wl-note .wl-act{display:none;}
  .ph-title{padding-bottom:5px;}
  .lib-stats{padding:7px 6px;}
  .lib-grid{margin-top:5px;}
}

/* ---- the rest of the card detail ----
   The app's screen keeps going past the version picker: graded comps, the
   folder and wishlist actions, visually-similar cards, the correction row and
   the report link. Stopping at the picker made the mockup look like a thinner
   product than it is. The screen scrolls here for the same reason it scrolls
   on the phone: it does not fit, and pretending otherwise means cutting
   features out of the demo. */
.cd-screen{overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;}
.cd-screen::-webkit-scrollbar{width:4px;}
.cd-screen::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;}
.cd-screen::-webkit-scrollbar-track{background:transparent;}

.cd-graded{display:flex;gap:14px;margin-top:7px;}
.cd-graded > div{min-width:0;}
.cd-graded b{display:block;font-family:var(--mono);font-size:12.5px;font-weight:400;margin-top:2px;}
.cd-graded b.up{color:var(--up);}
.cd-n{display:block;font-size:8px;color:var(--faint);margin-top:1px;}

.cd-sim{margin-top:10px;}
.cd-sim .cd-q{font-size:12.5px;font-weight:700;}
.cd-sim .ex-strip{margin-top:7px;}

/* the correction row, which is the honest half of the product */
.cd-row{display:flex;align-items:center;gap:9px;background:var(--raised);
  border:1px solid var(--line);border-radius:11px;padding:9px 10px;margin-top:10px;}
.cd-row-i{color:var(--foil2);font-size:13px;flex:none;}
.cd-row b{display:block;font-size:11.5px;}
.cd-row span:not(.cd-row-i):not(.cd-row-x){display:block;font-size:9px;color:var(--faint);
  line-height:1.4;margin-top:1px;}
.cd-row-x{color:var(--faint);flex:none;font-size:14px;}
.cd-flag{text-align:center;font-size:9.5px;color:var(--faint);
  text-decoration:underline;text-underline-offset:2px;margin:11px 0 4px;}

/* Price and change stack on the right of each holding, as they do in the app.
   Flat is deliberately neutral rather than green: most of a collection has not
   moved, and painting 0.0% green would overstate what happened. */
.pf-right{margin-left:auto;text-align:right;flex:none;}
.pf-right b{display:block;font-family:var(--mono);font-size:11px;font-weight:400;}
.pf-mover .ch[data-dir="flat"]{color:var(--faint);}
.pf-mover .ch{display:block;margin-top:1px;}
.pf-track{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.pf-track::-webkit-scrollbar{width:4px;}
.pf-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;}
.pf-screen{overflow:hidden;}
.cd-ranges button{font-size:9.5px;}

/* The read-off marker. Sits over the chart rather than inside the svg so it
   does not have to be redrawn with the series. */
.pf-chart{position:relative;}
.pf-mark{position:absolute;top:9px;bottom:38px;width:1px;background:var(--foil2);
  opacity:0;pointer-events:none;transition:opacity .12s;}
.pf-chart [data-pf="spark"]{cursor:crosshair;}
.pf-chart [data-pf="spark"]:focus-visible{outline:2px solid var(--foil2);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ .pf-mark{transition:none;} }

/* The card detail inside Identify, and the way back out. The detail replaces
   the results list rather than sitting beside it, which is what tapping a match
   does in the app. */
.id-detail{margin-top:6px;}
.id-back{position:absolute;left:12px;top:10px;z-index:4;background:rgba(20,19,31,.92);
  border:1px solid var(--line);border-radius:999px;color:var(--ink);font:inherit;
  font-size:10px;padding:4px 11px;cursor:pointer;}
.id-back:focus-visible{outline:2px solid var(--foil2);outline-offset:2px;}
#ph-identify .id-detail{height:calc(100% - 60px);}
/* The match itself is now a control, so it has to look and focus like one. */
.id-top{cursor:pointer;}
.id-top:focus-visible{outline:2px solid var(--foil2);outline-offset:3px;}

/* ---- tabs ----
   Panels are toggled with the `hidden` attribute rather than a class, so a
   hidden panel is hidden from assistive tech too, and its contents are not
   reachable by tab key while off screen. */
.tabpanel[hidden]{display:none;}
.nav a[aria-selected="true"]{color:var(--ink);}
.nav a[aria-selected="true"]::after{transform:scaleX(1);}

/* ---- FAQ ---- */
.faq-head{max-width:62ch;margin-bottom:30px;}
.faq{max-width:76ch;border-top:1px solid var(--line);}
.qa{border-bottom:1px solid var(--line);}
.qa summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-size:17px;font-weight:600;letter-spacing:-0.01em;}
.qa summary::-webkit-details-marker{display:none;}
/* the marker is drawn rather than a glyph, so it can rotate */
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s,border-color .22s;}
.qa[open] summary::after{transform:translateY(-30%) rotate(225deg);border-color:var(--foil2);}
.qa summary:hover{color:var(--foil2);}
.qa summary:focus-visible{outline:2px solid var(--foil2);outline-offset:3px;border-radius:4px;}
.qa-a{padding:0 40px 20px 0;color:var(--mute);}
.qa-a p{margin:0 0 11px;line-height:1.65;max-width:66ch;}
.qa-a p:last-child{margin-bottom:0;}
/* anything still waiting on Aaliyah is marked so it cannot ship by accident */
.qa[data-needs-you] summary{color:var(--gold);}
.qa[data-needs-you] summary::after{border-color:var(--gold);}

@media (prefers-reduced-motion: reduce){
  .qa summary::after{transition:none;}
}