/*
 * cardkept.app (WEBSITE.md 4b). Always dark (founder, 17 Oct 2026): a black ground with a warm orange and amber glow
 * from the corners, the brand's Orange and Archivo, the card as the hero.
 */
@font-face { font-family: "Archivo"; font-weight: 300; font-display: swap; src: url("/fonts/Archivo_300Light.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/Archivo_800ExtraBold_Italic.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url("/fonts/Archivo_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap; src: url("/fonts/Archivo_500Medium.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("/fonts/Archivo_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("/fonts/Archivo_700Bold.ttf") format("truetype"); }
/* The app's figure face (font-price, D727): Archivo Expanded Black, upright. On the site only for the price counts (founder, 18 Oct 2026). */
@font-face { font-family: "Archivo Expanded"; font-weight: 900; font-display: swap; src: url("/fonts/ArchivoExpanded-Black.ttf") format("truetype"); }

:root {
  color-scheme: dark;
  /* The space above each of Home's sections, one value for all (founder, 20 Oct 2026: "some of them seem to be very cramped up"). */
  --section-gap: clamp(104px, 13vw, 176px);
  --ground: #060606;
  --ink: #F4F4F6;
  /* Brighter greys (founder, 19 Oct 2026: not a fan of the grey text): descriptions almost white, notes a step lighter. */
  --ink-muted: #D8D8DF;
  --ink-subtle: #ACACB6;
  --line: rgba(255, 255, 255, 0.10);
  --glass: rgba(255, 255, 255, 0.06);
  --glass-line: rgba(255, 255, 255, 0.12);
  --brand: #FF4A1C;
  --brand-from: #FF7A4A;
  --brand-to: #E23C10;
  --amber: #FF9A3C;
  --cream: #FFD9A6;
  --notice: #FCD34D;
  /* The app's frosted panel in dark mode (colors.js surface-glass, line-glass, line-soft; useShadows().raised). */
  --panel: rgba(38, 38, 42, 0.55);
  --panel-line: rgba(255, 255, 255, 0.06);
  --row-line: rgba(255, 255, 255, 0.07);
  --panel-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.7);
  --r-panel: 20px;
  --gutter: 20px;
  --measure: 680px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: "Archivo", -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cream); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }

/*
 * The glow: warm light coming in from the top right and the bottom left, its brightest points off screen, over the
 * black. A fine grain on top keeps the gradient from banding on dark screens.
 */
.aura {
  position: absolute;
  inset: 0 0 auto 0;
  height: max(100vh, 900px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 82% -6%, rgba(255, 217, 166, 0.55) 0%, rgba(255, 154, 60, 0.38) 22%, rgba(226, 60, 16, 0.22) 48%, rgba(120, 20, 0, 0.08) 72%, transparent 100%),
    radial-gradient(ellipse 45% 40% at -6% 102%, rgba(255, 200, 140, 0.32) 0%, rgba(255, 106, 40, 0.24) 30%, rgba(160, 30, 0, 0.10) 65%, transparent 100%),
    radial-gradient(ellipse 30% 60% at 104% 40%, rgba(226, 60, 16, 0.18) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.aura::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.main, .foot { position: relative; z-index: 1; }

.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 3; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--ground); }
.skip:focus { top: 12px; }

/*
 * Top bar: stays at the top as the page scrolls (founder, 18 Oct 2026), so the menu is always a tap away. Clear over
 * the hero; once the page has scrolled (`is-scrolled`, site.js) it gets a frosted dark ground and a hairline under
 * it, as the app's headers do, so what scrolls under it doesn't fight the menu.
 */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: max(14px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right), calc((100% - 1200px) / 2 + var(--gutter))) 14px max(var(--gutter), env(safe-area-inset-left), calc((100% - 1200px) / 2 + var(--gutter)));
}
.bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 8, 9, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--row-line);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}
.bar.is-scrolled::before { opacity: 1; }
/* Anchors (Features, Pricing) land below the bar, not under it. */
html { scroll-padding-top: 72px; }
/* The logo: the name at the top of the page; once it scrolls, the name fades away and the C monogram turns in, in the
   same space, so the menu beside it doesn't move (founder, 21 Oct 2026). */
.brand { display: grid; align-items: center; justify-items: start; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand > svg { grid-area: 1 / 1; display: block; width: auto; transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); }
.brand-word { height: 22px; }
.brand-mark { height: 28px; opacity: 0; transform: scale(0.6) rotate(-10deg); transform-origin: left center; }
.bar.is-scrolled .brand-word { opacity: 0; transform: translateX(-10px); }
.bar.is-scrolled .brand-mark { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .brand > svg { transition: none; } }
.bar-nav { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bar-nav a { display: block; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; }
.bar-nav a:hover { color: var(--ink); background: var(--glass); }
.bar-nav [aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, 0.10); }
@media (max-width: 420px) {
  .bar { gap: 10px; }
  .brand-word { height: 18px; }
  .brand-mark { height: 24px; }
  .bar-nav { gap: 0; padding: 3px; }
  .bar-nav a { padding: 7px 11px; font-size: 13.5px; }
  /* Four links don't fit beside the logo on a phone; the features are the page itself, a scroll away. */
  .bar-nav .nav-features { display: none; }
}

.main { flex: 1; width: 100%; }
/* Glows that reach past the screen edge (the phones' halos reach 90px past them) are cut at the page's own edge, so
 * the page never slides sideways on a tablet or small laptop (it moved 75px at 768px). `clip`, not `hidden`: no
 * scroll box of its own, so nothing sticky inside breaks. */
.main { overflow-x: clip; }

/* Home: headline */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(20px, 4.5vh, 48px) var(--gutter) 0;
}
.hero-title {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: clamp(42px, min(7.4vw, 10vh), 96px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* Archivo, not expanded (founder, 17 Oct 2026): "Your collection." light and upright; "Reimagined." extra bold, italic
 * and orange. No capitals. */
.hero-title-a { display: block; font-weight: 300; font-style: normal; }
.hero-title-b { display: block; font-weight: 800; font-style: italic; color: var(--brand); letter-spacing: -0.03em; }
.hero-line { margin-top: 18px; max-width: 40ch; font-size: clamp(17px, 2vw, 20px); color: var(--ink-muted); text-wrap: pretty; }

.store {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  background: var(--ink);
  color: var(--ground);
}
.store:hover { color: var(--ground); opacity: 0.9; }
.store-soon { background: var(--glass); color: var(--ink); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Home: the carousel. Each card sits by its distance from the one in focus (--d, set by site.js). */
.deck { --zoom-focus: 1.34; padding: clamp(4px, 1.5vh, 20px) 0 clamp(16px, 4vh, 48px); overflow-x: hidden; overflow-x: clip; }
.deck-stage {
  --w: clamp(190px, min(22vw, 30vh), 270px);
  position: relative;
  /* Room above and below for the card in focus, drawn larger. */
  height: calc(var(--w) * 88 / 63 * 1.4);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
/* The track is a plane in front of the cards set back in depth, so it must not take their taps. */
/* Each card carries its own depth (perspective() in its transform), not the stage's 3D space: iPhone Safari drew the
   stage's version flat, every card the same size side by side (founder, 21 Oct 2026). The order front to back is z-index. */
.deck-track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.deck-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  aspect-ratio: 63 / 88;
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--w) * 88 / 63 / -2);
  transform:
    perspective(1400px)
    translateX(calc(var(--d) * var(--w) * 0.74))
    translateZ(calc(var(--ad) * -150px))
    rotateY(calc(var(--d) * -24deg))
    scale(var(--zoom, 1));
  z-index: calc(10 - var(--ad));
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.deck-card { pointer-events: auto; }
.deck-card.is-hidden { opacity: 0; pointer-events: none; }
.deck-pick {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 4.5%;
  position: relative;
}
/* Cards further from the one in focus sit darker (an overlay's opacity, so only the compositor works). */
.deck-pick::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4.5% / 3.2%;
  background: #000;
  opacity: calc(var(--ad) * 0.16);
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.deck-card:not(.is-active) .deck-pick:hover::after { opacity: calc(var(--ad) * 0.16 - 0.1); }
.deck-card.is-active .deck-pick { cursor: default; }
.deck-pick img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4.5% / 3.2%;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
  -webkit-user-drag: none;
}
/* The card in focus: a warm light under it, and its 3D card over the photo once loaded. */
.deck-card.is-active::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 106, 40, 0.45), transparent 70%);
  filter: blur(18px);
  z-index: -1;
}
.card3d { position: absolute; left: -8%; top: -8%; width: 116%; z-index: 2; touch-action: none; outline-offset: 2px; }
.card3d canvas { display: block; opacity: 0; transition: opacity 0.35s ease; cursor: grab; }
.card3d.ready canvas { opacity: 1; }
/* No dark shadow under the 3D card on the website: it stays flat while the card tilts, so it showed as a dark card
 * shape behind it (founder, 18 Oct 2026). The orange glow under the card does that job. */
.card3d .shadow { display: none; }

/* Above the open card's 3D layer (z-index 30), which reaches a little past the card and, on a phone's shorter stage,
   over the close button: it took the tap (founder, 21 Oct 2026). */
.deck-controls { position: relative; z-index: 40; display: none; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; padding: 0 var(--gutter); }
.deck-nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: background 0.2s ease;
}
.deck-nav:hover { background: rgba(255, 255, 255, 0.12); }
.deck-nav[hidden] { display: none; }

.deck-info { width: calc(100% - var(--gutter) * 2); max-width: 440px; margin: 16px auto 0; padding: 18px 22px 20px; text-align: center; }
.deck-set { font-weight: 600; font-size: 14px; color: var(--brand-from); }
.deck-name { margin: 6px 0 0; font-weight: 700; font-size: clamp(26px, 3.6vw, 34px); line-height: 1.15; }
.deck-name-en { margin-top: 2px; font-size: 16px; color: var(--ink-muted); }
.deck-facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 14px; font-size: 15px; color: var(--ink-muted); }
.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-from), var(--brand-to));
}

/* Wide but short screens (a laptop, an iPad turned sideways): the cards and headline a little smaller, so the whole
   middle card shows on the first screen (founder, 21 Oct 2026). */
@media (min-width: 641px) and (max-height: 940px) {
  .deck-stage { --w: clamp(160px, min(22vw, 21vh), 270px); }
  .hero-title { font-size: clamp(42px, min(7.4vw, 8.4vh), 96px); }
  .hero-cta { margin-top: 24px; }
}
@media (min-width: 641px) and (max-height: 740px) {
  .hero { padding-top: 12px; }
  .hero-line { margin-top: 12px; font-size: 16px; }
  .hero-cta { margin-top: 18px; }
  .hero .cta-note { margin-top: 10px; }
}

/* The close button as far below the open card as the card's details are below it (founder, 21 Oct 2026); phones set
   their own, below. */
.deck.is-focused .deck-controls { margin-top: 24px; }

@media (max-width: 640px) {
  /* Room above and below for the tapped card at its phone size (1.18), so the whole card shows on the first screen. */
  /* The cards are sized from the screen's height too, so the headline, the buttons and the whole fan show on the
     first screen with Safari's bars in place (founder, 30 Oct 2026). svh is the height with those bars showing, but
     iPhone Safari counts some of the room under its see-through bottom bar too (about 36pt on the founder's iPhone:
     the fan's foot sat under it), so the words above are taken as that much taller. */
  /* Worked out on .deck so the close button below the stage can read the card's size too. */
  .deck { --w: clamp(110px, min(54vw, calc((100svh - var(--above, 418px)) * 0.577)), 54vw); }
  .deck-stage { --w: inherit; height: calc(var(--w) * 88 / 63 * 1.24); }
  /* A tapped card grows to about three quarters of the screen's width (founder, 30 Oct 2026: at 1.18 it hardly grew),
     reaching past the stage into the dimmed words above and below; the close button sits as far below it as the card's
     details are below the button (founder, 21 Oct 2026). */
  .deck { --zoom-focus: 1.5; }
  .deck.is-focused .deck-controls { margin-top: calc(31.6px - 2.3vw + var(--w) * 0.223); }
  /* The caption clear of the fan (founder, 30 Oct 2026: it sat right under the cards); the room it takes is in --above. */
  .deck .deck-note { margin-top: -18px; }
  .deck-card { transform: perspective(1400px) translateX(calc(var(--d) * var(--w) * 0.66)) translateZ(calc(var(--ad) * -140px)) rotateY(calc(var(--d) * -26deg)) scale(var(--zoom, 1)); }
}

/*
 * Focused (a card tapped): the turning stops, that card grows into the middle, everything else dims, and the card
 * becomes its 3D scan. Its flat photo is hidden once the 3D card is drawn, so only the scan moves.
 */
.deck.is-focused .deck-card.is-active { --zoom: var(--zoom-focus); z-index: 20; }
.deck.is-focused .deck-card:not(.is-active):not(.is-hidden) { opacity: 0.16; }
.bar, .hero, .foot, .features { transition: opacity 0.5s var(--ease); }
body.deck-focused .bar, body.deck-focused .hero, body.deck-focused .foot, body.deck-focused .features { opacity: 0.18; }
.deck-stage.is-ready .deck-pick img { transition: opacity 0.4s ease; }
.deck-stage.is-ready .deck-pick img:not(.is-loaded) { opacity: 0; }
.deck-stage:has(.card3d-over.ready) .deck-card.is-active .deck-pick img,
.deck-stage:has(.card3d-over.ready) .deck-card.is-active .deck-pick::after { opacity: 0; transition: opacity 0.2s ease 0.15s; }
/* The open card's 3D card, laid over it by site.js (outside the moving cards, so it is drawn sharp). */
.card3d.card3d-over { z-index: 30; }
/* A long press on a card is the tilt, never iPhone's Save / Copy image menu (founder, 30 Oct 2026). */
.deck-card img, .card3d, .card3d canvas { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* How to play with the open card, under its close button: a finger's way on a phone, a mouse's on a computer. */
.deck-hint { display: none; margin: 10px 0 0; padding: 0 var(--gutter); text-align: center; font-size: 13px; color: var(--ink-subtle); }
.deck.is-focused .deck-hint { display: block; }
.deck-hint .hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .deck-hint .hint-touch { display: none; } .deck-hint .hint-mouse { display: inline; } }

/* The only control: × while a card is open (founder, 18 Oct 2026: no arrows, pause or hint). */
.deck.is-focused .deck-controls { display: flex; }
/* The card's details take no room until a card is tapped, then open below it, easing the page down (founder, 21 Oct
   2026: the empty space they held left PRO Scan far below the carousel). */
.deck-info { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(8px); transition: max-height 0.45s var(--ease), margin-top 0.45s var(--ease), padding 0.45s var(--ease), opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.45s; }
.deck.is-focused .deck-info { max-height: 420px; margin-top: 16px; padding-top: 18px; padding-bottom: 20px; opacity: 1; visibility: visible; transform: none; transition: max-height 0.45s var(--ease), margin-top 0.45s var(--ease), padding 0.45s var(--ease), opacity 0.45s var(--ease) 0.15s, transform 0.45s var(--ease) 0.15s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .deck-info, .deck.is-focused .deck-info { transition: none; } }

/* The app's grey panel: every box the page draws (feature points, steps, tips, a card's details, FAQs). */
.panel {
  border-radius: var(--r-panel);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/*
 * The feature sections: text beside a picture, alternating sides on wide screens, stacked on a phone. Each title as the
 * headline: a light first half, then a heavy italic orange one.
 */
.features { position: relative; z-index: 1; }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--section-gap) var(--gutter);
  scroll-margin-top: 24px;
}
.feature-flip .feature-text { order: 2; }
/* "Why your own copy" follows PRO Scan with the same gap as every other section. PRO Scan itself sits closer under the
   carousel, which already leaves room below it for a tapped card's details (founder, 21 Oct 2026: "way too much"). */
.feature-scan { padding-top: clamp(48px, 6vw, 88px); padding-bottom: 0; }
.eyebrow { font-weight: 600; font-size: 14px; letter-spacing: 0.01em; color: var(--brand-from); }
.feature h2, .closing h2 {
  margin: 10px 0 0;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.t-a { font-weight: 300; }
.t-b { font-weight: 800; font-style: italic; color: var(--brand); letter-spacing: -0.025em; }
.feature .lede, .closing .lede { margin-top: 18px; max-width: 46ch; font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-muted); text-wrap: pretty; }

.points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.points li { padding: 18px 20px; border-radius: var(--r-panel); background: var(--panel); border: 1px solid var(--panel-line); box-shadow: var(--panel-shadow); }
.points h3, .steps h3, .tips h3 { margin: 0; font-weight: 600; font-size: 16px; color: var(--ink); }
.points .tile-icon { width: 40px; height: 40px; border-radius: 13px; margin-bottom: 14px; }
.points .tile-icon svg { width: 21px; height: 21px; }
.points p, .steps p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

.steps-panel { margin-top: 32px; padding: 4px 20px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--row-line); }
.steps img { width: 44px; height: auto; border-radius: 3px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.8); }
.step-tilt { display: grid; place-items: center; width: 44px; height: 61px; border-radius: 4px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--brand-from); }
.then { padding: 16px 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.tips { margin-top: 12px; padding: 18px 20px; }
.tips ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; color: var(--ink-muted); }
.tips li::marker { color: var(--brand-from); }

.feature-visual { display: flex; flex-direction: column; align-items: center; }
.scan-stage { position: relative; width: min(360px, 72vw); aspect-ratio: 63 / 88; }
.scan-stage::before {
  content: "";
  position: absolute;
  inset: 10% -20% -14%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 106, 40, 0.30), transparent 65%);
  filter: blur(24px);
  z-index: 0;
}
.scan-photo { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4.5% / 3.2%; box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.9); transition: opacity 0.2s ease 0.15s; }
.scan-stage:has(.card3d.ready) .scan-photo { opacity: 0; }
.visual-caption { margin-top: 28px; font-size: 13px; color: var(--ink-subtle); text-align: center; }

/* The PRO Scan and ID Scan wordmarks (founder's files, white) where those scans head a section. */
/* More room under the logo than a text eyebrow gets (founder, 30 Oct 2026). */
.eyebrow-mark { line-height: 0; color: var(--ink); padding-bottom: 10px; }
/* The same height, so their letters match (founder, 23 Oct 2026): both files are drawn 129.5 units tall. */
.mark-pro, .mark-id { display: block; height: 22px; width: auto; }

/* The PRO Scan demo: a phone, its screen playing the founder's screen recording (or the 3D card until it exists). */
.device {
  position: relative;
  width: min(320px, 72vw);
  aspect-ratio: 9 / 19.5;
  padding: 10px;
  border-radius: 52px;
  background: linear-gradient(160deg, #2a2a2e, #141416);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 90px -30px rgba(0, 0, 0, 0.95);
}
.device::before {
  content: "";
  position: absolute;
  inset: -12% -30% -8%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 106, 40, 0.28), transparent 62%);
  filter: blur(30px);
}
.device-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: #000;
}
/* The Dynamic Island. */
.device-screen::before { content: ""; position: absolute; top: 12px; left: 50%; width: 30%; height: 26px; margin-left: -15%; border-radius: 999px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04); z-index: 3; }
.device-video { width: 100%; height: 100%; object-fit: cover; }

/* For the best scan (founder, 22 Oct 2026): the tilt video in a phone beside what to do and what to avoid. */
.dos { margin-top: 32px; }
.do-list { padding: 18px 20px; }
.do-list h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: 16px; color: var(--ink); }
.do-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; }
.do-mark svg { width: 15px; height: 15px; }
.do-yes { color: var(--brand-from); background: rgba(255, 106, 40, 0.14); }
.do-no { color: var(--ink-muted); background: rgba(255, 255, 255, 0.08); }
.do-list ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.do-list li { padding: 10px 0; border-top: 1px solid var(--row-line); }
.do-list li:last-child { padding-bottom: 0; }
.device .scan-stage { width: 74%; }
.device .scan-stage::before { display: none; }
.device-note { font-size: 12px; color: var(--ink-subtle); }

/* ID scan, coming soon: one slim panel under PRO Scan. */
.idscan { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.idscan-panel { display: flex; align-items: center; gap: 18px; padding: 20px 24px; }
.idscan-icon { flex: none; }
.idscan h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-weight: 600; font-size: 18px; }
.idscan p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.soon { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; color: var(--ink-muted); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--panel-line); }

/*
 * "Everything you collect": one grid of tiles, as Dex and Collectr group their features (founder, 17 Oct 2026). Three
 * columns on a wide screen, two on a tablet, one on a phone; wide tiles take two, the prices tile the whole row.
 */
.bento-section { max-width: 1160px; margin: 0 auto; padding: var(--section-gap) var(--gutter) 0; scroll-margin-top: 24px; }
.bento-head { max-width: 640px; }
.bento-head h2 { margin: 10px 0 0; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.bento-head .lede { margin-top: 18px; font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-muted); text-wrap: pretty; }
.bento { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile {
  padding: 24px;
  border-radius: var(--r-panel);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--panel-shadow);
}
.tile-wide { grid-column: span 2; }
.tile-full { grid-column: 1 / -1; }
/*
 * The site's icon badge: the app's own drawn icons (2pt round strokes), in cream on a warm glow, so each tile and
 * point leads with a picture of what it means (founder, 18 Oct 2026: "more icons… that align with our visual
 * language").
 */
.tile-icon, .idscan-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--cream);
  background: radial-gradient(circle at 30% 20%, rgba(255, 154, 60, 0.42), rgba(226, 60, 16, 0.22) 55%, rgba(226, 60, 16, 0.10));
  border: 1px solid rgba(255, 122, 74, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 217, 166, 0.22), 0 10px 24px -12px rgba(226, 60, 16, 0.7);
}
.tile-icon svg, .idscan-icon svg { width: 24px; height: 24px; }
.tile h3 { margin: 18px 0 0; font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.tile p { margin-top: 8px; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
/* The big tiles (founder, 18 Oct 2026): a warm orange light from the top right corner. */
.tile-wide, .tile-full { background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(226, 60, 16, 0.16), transparent 60%), var(--panel); }

/*
 * The tiles' small app pieces (stage 2, founder, 18 Oct 2026): a copy's story, places, a Favourite, Search, pack
 * openings, a wishlist and a share link, from the founder's real cards, drawn the app's way (its pills, rows and
 * orange for what's wanted). A one-column tile puts the piece under its words; a wide one beside them.
 */
.tile-mini { display: flex; flex-direction: column; }
.tile-mini .mini { margin-top: auto; padding-top: 22px; }
.tile-wide.tile-mini { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: center; }
.tile-wide.tile-mini .mini { margin: 0; padding: 0; }
.mini { font-size: 14px; line-height: 1.4; }
.tile .mini p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; }
.mini-story, .mini-fav { display: flex; gap: 16px; align-items: flex-start; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--panel-line); }
.mini-card { flex: none; display: block; width: 64px; aspect-ratio: 245 / 337; height: auto; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.9); }
.mini-story .mini-card { width: 92px; }
.mini-card-none { display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-line); box-shadow: none; font-weight: 700; font-size: 11px; color: var(--ink-subtle); }
.mini-body { min-width: 0; }
.tile .mini .mini-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.tile .mini .mini-sub { font-size: 13px; color: var(--ink-subtle); }
.tile .mini .mini-moment { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--ink); }
.mini-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(255, 74, 28, 0.2); }
.tile .mini .mini-note { margin-top: 4px; padding-left: 16px; font-size: 13.5px; color: var(--ink-muted); }
.tile .mini .mini-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; line-height: 1.3; color: var(--ink); background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)); border: 1px solid var(--panel-line); white-space: nowrap; }
.pill svg { width: 13px; height: 13px; }
.pill-orange { color: #FFFFFF; background: linear-gradient(145deg, var(--brand-from), var(--brand-to)); border-color: transparent; }
.pill-off { color: var(--ink-subtle); background: none; border: 1px dashed rgba(255, 255, 255, 0.2); }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--panel-line); }
.mini-glyph { display: inline-grid; color: var(--brand-from); }
.mini-glyph svg { width: 16px; height: 16px; }
.mini-row-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-row-text { flex: 1; min-width: 0; display: grid; }
.mini-row-text .mini-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-subtle); }
.mini-count { flex: none; font-size: 13px; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.mini-results .mini-card { width: 34px; border-radius: 3px; }
.mini-tag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 5px; vertical-align: 1px; font-weight: 700; font-size: 10px; color: var(--brand-from); background: rgba(255, 122, 74, 0.12); }
.mini-want { flex: none; font-weight: 600; font-size: 13px; color: var(--brand-from); }
.tile .mini .mini-field { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-line); font-size: 15px; color: var(--ink); }
.mini-caret { width: 2px; height: 18px; margin-left: -4px; background: var(--brand); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mini-search .mini-results { margin-top: 10px; }
.mini-god { font-weight: 600; color: var(--brand-from); }
.mini-packs .mini-row-text .mini-sub, .mini-packs .mini-row-name { white-space: normal; }
.mini-logo { flex: none; display: grid; place-items: center; width: 64px; height: 34px; padding: 4px 6px; border-radius: 8px; background: #EFEFF1; }
.mini-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.mini-link { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--panel-line); text-decoration: none; transition: border-color 0.2s var(--ease); }
.mini-link:hover { border-color: rgba(255, 122, 74, 0.45); color: inherit; }
.mini-link .mini-card { width: 44px; }
.mini-url { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13px; color: var(--brand-from); }
.mini-url svg { width: 14px; height: 14px; }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-wide { grid-column: span 2; }
  /* Two columns leave these alone in their row (founder, 25 Oct 2026: every size works): they take the whole row. */
  .id-bento > .tile:last-child:nth-child(odd), .bento > .tile:has(.mini-share) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile-wide { grid-column: auto; }
  .tile-wide.tile-mini { display: flex; align-items: stretch; }
  .tile-wide.tile-mini .mini { padding-top: 22px; }
  /*
   * On a phone each group of tiles is one row you swipe sideways, as the price sources are (founder, 30 Oct 2026:
   * Home took about 28 screens of scrolling, now about 18). Each tile snaps into place and the next one peeks in at
   * the edge; the row runs to the screen's edges and its tiles share the tallest one's height.
   */
  .bento {
    display: flex;
    gap: 12px;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento > .tile { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
  /* Tiles to the right are out of sight until swiped to, so they skip the rise-in; their rings, bars and line still play as they arrive. */
  .rise .bento > .rise-me { opacity: 1; transform: none; }
  /*
   * A row is as tall as its tallest tile, so each tile's picture sits in the middle of the room under its words, and
   * the two tallest give up a little (founder, 30 Oct 2026: no big empty tiles): the friends tile drops Sam's fanned
   * cards and the collection tile shows two of its three groups.
   */
  .bento > .tile-mini .mini { margin-block: auto; padding-top: 22px; }
  .bento .friend-fan, .bento .mini-group:nth-child(n + 3) { display: none; }
}

/* Where a screenshot of the app will go (founder's real ones, to come). */
.phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(300px, 60vw);
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  border: 1px solid var(--glass-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 8px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.phone p { font-weight: 600; font-size: 17px; color: var(--ink); }
.phone span { font-size: 13px; color: var(--ink-subtle); }

.closing { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 820px; margin: 0 auto; padding: var(--section-gap) var(--gutter) clamp(88px, 12vw, 160px); }
.closing .lede { margin-left: auto; margin-right: auto; }
.closing::before {
  content: "";
  position: absolute;
  inset: 20% -10% 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 50% 70%, rgba(226, 60, 16, 0.22), transparent 70%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature-flip .feature-text { order: 0; }
  .feature-visual { order: 2; }
  /* PRO Scan on a phone: its title and intro straight after the carousel, then its 3D card, then the steps (founder,
     21 Oct 2026: the card first meant scrolling a whole phone's height past the hero before any title). The text's
     pieces join the section's own column so the card can sit between them. */
  .feature-scan { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .feature-scan .feature-text { display: contents; }
  .feature-scan .feature-visual { order: 1; margin: 36px 0 8px; }
  .feature-scan .feature-text > .steps-panel, .feature-scan .feature-text > .tips { order: 2; }
  .feature-scan .device { width: min(270px, 62vw); }
  /* For the best scan on a phone, the same way: its title, then the tilt video, then what to do and avoid. */
  .feature-tilt { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .feature-tilt .feature-text { display: contents; }
  .feature-tilt .feature-visual { order: 1; margin: 36px 0 8px; }
  .feature-tilt .dos { order: 2; }
  /* Do and Avoid's switch centred under the video, as everything above it is. */
  .feature-tilt .dos-switch { display: flex; width: fit-content; margin: 0 auto; }
  .feature-tilt .device { width: min(270px, 62vw); }
}
/* Points are short (a title and one line), so they sit two across even on a phone. */
@media (max-width: 520px) {
  .points { gap: 10px; }
  .points li { padding: 14px; }
  .points p { font-size: 14px; }
}

/* PRO Scan: why your own copy matters (founder, 18 Oct 2026), under its steps and before ID scan. */
.own-copy { max-width: 1160px; margin: 0 auto; padding: var(--section-gap) var(--gutter) 0; }
.own-copy h2 { margin: 10px 0 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.own-copy .points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .own-copy .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
}

/* The catalogue: every set, three languages, more games to come (founder, 18 Oct 2026). */
.catalogue { max-width: 1160px; margin: 0 auto; padding: var(--section-gap) var(--gutter) 0; scroll-margin-top: 24px; }
/* The moving rows run the page's full width, fading out at both edges; one row per language. */
.marquees { display: grid; gap: 14px; margin-top: 44px; }
.marquee { position: relative; left: 50%; width: 100vw; margin-left: -50vw; overflow: hidden; outline-offset: -2px; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-time, 200s) linear infinite; }
.marquee-right .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0 7px; list-style: none; }
/*
 * Every tile the same size (founder, 18 Oct 2026), on the app's paper (set logos are drawn for a light ground, many
 * with black outlines). The logo gets a fixed box inside the padding and is scaled down to fit it whole, whatever its
 * shape: wide logos fill the width, tall ones the height, nothing is cut.
 */
.marquee li { flex: none; display: flex; align-items: center; justify-content: center; width: 184px; height: 84px; padding: 12px 18px; border-radius: 18px; background: #EFEFF1; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.7); }
.marquee img { display: block; width: 148px; height: 60px; object-fit: contain; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Reduce Motion: the rows stand still and scroll sideways by hand. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
  .marquee-track ul[aria-hidden] { display: none; }
}
.langs { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lang { padding: 24px; }
.lang h3 { margin: 0; font-weight: 600; font-size: 19px; }
.lang-figs { margin-top: 10px; font-size: 15px; color: var(--ink-muted); }
.lang-figs strong { font-family: "Archivo Expanded", "Archivo", sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lang p:last-child { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.more-games { display: flex; gap: 18px; align-items: flex-start; margin-top: 28px; padding: 24px; background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(226, 60, 16, 0.16), transparent 60%), var(--panel); }
.more-games .tile-icon { flex: none; }
.more-games h3 { margin: 0; font-weight: 600; font-size: 19px; }
.more-games p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
@media (max-width: 860px) { .langs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .marquee li { width: 148px; height: 68px; padding: 10px 14px; }
  .marquee img { width: 120px; height: 48px; }
}

/* Prices: where they come from (founder, 18 Oct 2026). */
.prices-section { max-width: 1160px; margin: 0 auto; padding: var(--section-gap) var(--gutter) 0; scroll-margin-top: 24px; }
.stats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stats li { padding: 24px; }
.stats strong { display: block; font-family: "Archivo Expanded", "Archivo", sans-serif; font-weight: 900; font-size: clamp(34px, 4.2vw, 48px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.as-of { margin-top: 12px; font-size: 13px; color: var(--ink-subtle); }
.sources { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.source { padding: 24px; }
.source h3 { margin: 12px 0 0; font-weight: 600; font-size: 19px; }
.source p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.source .source-kind { display: inline-block; margin: 0; padding: 4px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; color: #6EE7A0; background: rgba(52, 199, 89, 0.12); }
.source .source-listing { color: var(--notice); background: rgba(252, 211, 77, 0.12); }
.grades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.grades .panel { padding: 24px; background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(226, 60, 16, 0.14), transparent 60%), var(--panel); }
.grades h3 { margin: 0; font-weight: 600; font-size: 19px; }
.grades p { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-subtle); }
.chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--panel-line); font-weight: 600; font-size: 14px; white-space: nowrap; }


/* The price sources stay three across and Raw / Graded two across down to the iPad mini (founder, 21 Oct 2026); phones
   swipe them (below 560px). */
@media (max-width: 860px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .sources { gap: 10px; }
  .source { padding: 20px; }
}

/* Pricing: Free and Pro, side by side; Pro planned, its price to come. */
.pricing { max-width: 1160px; margin: 0 auto; padding: var(--section-gap) var(--gutter) 0; scroll-margin-top: 24px; }
.pricing-head { margin: 0 auto; text-align: center; }
.pricing-head .lede { margin-left: auto; margin-right: auto; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 40px auto 0; max-width: 880px; }
.plan { padding: 28px; }
.plan h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; font-size: 20px; }
.plan-price { margin-top: 6px; font-weight: 700; font-size: 34px; letter-spacing: -0.03em; }
.plan-price small { font-weight: 400; font-size: 16px; letter-spacing: 0; color: var(--ink-muted); }
.plan-billed { margin-top: 10px; min-height: 1.5em; font-size: 14px; color: var(--ink-muted); }
.plan-pro .plan-price small, .plan-pro .plan-billed { color: #3C3C43; }
/* Yearly or monthly: the switch in Pro's box, under its price, sets data-billing (site.js); without it, yearly shows. */
.plans[data-billing="yearly"] .when-monthly, .plans[data-billing="monthly"] .when-yearly { display: none; }
.soon-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px; font-weight: 600; font-size: 11px; color: var(--ink-muted); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--panel-line); }
.plan-pro .soon-tag { color: #3C3C43; background: rgba(14, 14, 16, 0.06); border-color: rgba(14, 14, 16, 0.10); }
.badge-rec { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; color: #FFFFFF; background: linear-gradient(145deg, var(--brand-from), var(--brand-to)); }
.billing { display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 999px; background: rgba(14, 14, 16, 0.06); border: 1px solid rgba(14, 14, 16, 0.08); }
.billing-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: none; font-weight: 600; font-size: 15px; color: #3C3C43; cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.billing-opt:hover { color: #0E0E10; }
.billing-opt[aria-pressed="true"] { color: #FFFFFF; font-weight: 700; background: linear-gradient(145deg, var(--brand-from), var(--brand-to)); }
.billing-save { padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 12px; color: #B8300A; background: rgba(226, 60, 16, 0.10); }
.billing-opt[aria-pressed="true"] .billing-save { color: #FFFFFF; background: rgba(255, 255, 255, 0.22); }
/* A small phone: the switch fits inside the plan's box (it stood 7px out at 320px). */
.billing { max-width: 100%; box-sizing: border-box; }
@media (max-width: 380px) { .billing-opt { padding: 8px 12px; gap: 6px; font-size: 14px; } }
/* The plans' rows as the app's paywall draws them (founder, 25 Oct 2026): the app's icon in an orange-tinted square, a
   bold title. No line under each title and no lines between rows (founder, 25 Oct 2026: "a bit too busy"). */
.plan-rows { list-style: none; margin: 22px 0 0; padding: 0; }
.plan-rows li { display: flex; align-items: center; gap: 14px; padding: 7px 0; }
.plan-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--brand-from); background: rgba(255, 122, 74, 0.16); }
.plan-icon svg { display: block; width: 19px; height: 19px; }
.plan-row-title { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink); }
/* The Cardkept Pro logo heading Pro's box: black Cardkept, white PRO on its orange tag, as the brand file draws it. */
.plan-logo { flex-wrap: wrap; row-gap: 8px; }
.plan-pro-logo { display: block; height: 22px; width: auto; }
/*
 * Pro is the white box, the colours swapped (founder, 18 Oct 2026: "make it pop"): black type on white (its list black too, so it reads as strong as Free's white on black), the orange
 * kept for the ticks and a soft glow, so it stands out from Free's grey panel on the black page. Every grey here passes
 * 4.5:1 on white; the ticks use the deeper orange, which keeps its edge on white.
 */
.plan-pro {
  color: #0E0E10;
  background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(255, 122, 74, 0.16), transparent 60%), #FFFFFF;
  border-color: rgba(255, 106, 40, 0.55);
  box-shadow: 0 24px 60px -24px rgba(226, 60, 16, 0.55), 0 8px 16px -10px rgba(0, 0, 0, 0.7);
}
.plan-pro .plan-icon { color: var(--brand-to); background: rgba(226, 60, 16, 0.10); }
.plan-pro .plan-row-title { color: #0E0E10; }
.plan-pro .soon { color: #3C3C43; background: rgba(14, 14, 16, 0.06); border-color: rgba(14, 14, 16, 0.10); }
.plan-note { margin-top: 16px; font-size: 13px; color: var(--ink-subtle); text-align: center; }
.plan-keep { margin-top: 24px; font-size: 15px; color: var(--ink-muted); text-wrap: balance; }
.plan-keep + .plan-note { margin-top: 8px; }
@media (max-width: 700px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* Help: a front page (search, topic tiles, popular questions) and a page per topic. */
.doc-wide { max-width: 820px; }
.guide { padding: 14px 0 18px; border-top: 1px solid var(--row-line); }
.guide p, .guide li { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.doc .guide p { margin: 0 0 10px; }
.guide ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.inline-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 2px; vertical-align: -5px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); color: var(--brand-from); }
.inline-glyph svg { width: 14px; height: 14px; }
/* Help's pictures (founder, 19 Oct 2026): Home's small pieces from real cards, in a lit panel above an answer's words. */
.guide-visual.tile { display: grid; place-items: center; margin: 2px 0 14px; padding: 24px 20px; overflow: hidden; background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(226, 60, 16, 0.16), transparent 60%), var(--panel); }
.guide-visual .mini { display: grid; justify-items: center; width: 100%; max-width: 440px; }
.guide-visual .mini > .mini-story, .guide-visual .mini > .mini-fav, .guide-visual .mini > .mini-list, .guide-visual .mini > .mini-search { width: 100%; }
.doc .faq .guide-visual p:not(.mini-field), .doc .faq .guide-visual ul { margin: 0; padding-top: 0; border-top: 0; max-width: none; }
.doc .faq .guide-visual .mini-field { margin: 0; max-width: none; }
.doc .guide-visual .mini-list { padding: 0; }
.guide-visual .device { width: min(210px, 60%); margin: 0; }

/* News: the list of posts, then each post. */
.posts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.post-card { display: block; padding: 22px 24px; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
.post-card:hover { color: inherit; border-color: rgba(255, 106, 40, 0.3); }
.doc .post-card .meta { margin: 0; }
.doc .post-card h2 { margin: 8px 0 0; font-size: 22px; }
.doc .post-card p { margin-top: 8px; }
.post-card .read { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--brand-from); }
.feed-link { margin-top: 24px; }
.post .lede { color: var(--ink-muted); }
.post-body { margin-top: 28px; }
.doc .post-body p, .post-body li { color: var(--ink-muted); font-size: 17px; line-height: 1.65; }
.post-body ul, .post-body ol { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.post-body figure { margin: 24px 0 0; }
.post-body img { display: block; width: 100%; height: auto; border-radius: var(--r-panel); }
.post-body blockquote { margin: 20px 0 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--brand); }
.post-body code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-size: 0.92em; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-back { margin-top: 40px; font-weight: 600; }

/* Status */
.status { list-style: none; margin: 24px 0 0; padding: 4px 20px; }
.status li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--row-line); }
.status li:last-child { border-bottom: 0; }
.doc .status h2 { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.3; }
.doc .status p { margin-top: 2px; font-size: 14px; }
.status strong { font-weight: 600; font-size: 14px; }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-subtle); }
.status-ok .dot { background: #34C759; }
.status-ok strong { color: #6EE7A0; }
.status-slow .dot { background: var(--notice); }
.status-slow strong { color: var(--notice); }
.status-down .dot { background: #FF453A; }
.status-down strong { color: #FCA5A5; }

/* Support, Privacy, Terms */
.doc { max-width: var(--measure); margin: 0 auto; padding: 32px var(--gutter) 72px; }
.doc h1 { margin: 0; font-weight: 700; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.01em; }
.doc h2 { margin: 40px 0 0; font-weight: 700; font-size: 21px; line-height: 1.25; }
.doc section h2 { margin-top: 36px; }
.doc p { margin-top: 12px; color: var(--ink-muted); }
.doc .lede { margin-top: 16px; font-size: 19px; color: var(--ink); }
.doc .meta { margin-top: 10px; font-size: 14px; color: var(--ink-subtle); }
.doc .draft {
  margin-top: 20px;
  padding: 16px 20px;
  color: var(--notice);
  font-weight: 500;
  font-size: 15px;
}

.faqs { margin-top: 16px; display: grid; gap: 10px; }
.faq { padding: 0 20px; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 14px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-subtle);
  border-bottom: 2px solid var(--ink-subtle);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq p { margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--row-line); }
/* Inside a guide the guide draws the one line under the title; its paragraphs draw none (they doubled it, and drew one inside Good to know). */
.faq .guide p { padding-top: 0; border-top: 0; }

/* Footer: the icon and name with the store buttons, then columns of links, then the not-affiliated note. */
.foot {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px var(--gutter) max(32px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-subtle);
}
.foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 40px; }
.foot-mark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.foot-mark:hover { color: var(--ink); }
.foot-mark img { width: 44px; height: 44px; border-radius: 11px; }
.foot-logo { display: block; height: 20px; width: auto; }
.foot-brand > p { margin-top: 14px; max-width: 34ch; color: var(--ink-muted); line-height: 1.5; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 28px; }
.foot-cols h2 { margin: 0 0 10px; font-weight: 600; font-size: 14px; color: var(--ink); }
.foot-cols a { display: block; padding: 5px 0; color: var(--ink-muted); text-decoration: none; }
.foot-cols a:hover, .foot-cols [aria-current="page"] { color: var(--cream); }
/* The social accounts, one above the other: each one's logo, then its name, lit like a link on hover. */
.foot-socials a { display: flex; align-items: center; gap: 10px; }
.foot-socials svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.foot-bottom p:first-child { max-width: 72ch; }

/* The store buttons: ours (not Apple's or Google's badges) until the app is in each store. */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.closing .stores { justify-content: center; margin-top: 30px; }
.store-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 150px;
  min-height: 52px;
  padding: 8px 18px;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.store-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
a.store-btn { background: var(--ink); color: var(--ground); border-color: var(--ink); }
a.store-btn:hover { color: var(--ground); opacity: 0.9; }
.store-btn small { font-size: 11px; line-height: 1.2; color: var(--ink-subtle); }
a.store-btn small { color: inherit; opacity: 0.7; }
.store-btn span { font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; }
.store-note { flex-basis: 100%; min-height: 1.5em; font-size: 13px; color: var(--ink-muted); }
.closing .store-note { text-align: center; }

@media (max-width: 760px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Help's search: one glass pill under the intro; matching guides and FAQs stay, the rest hide as you type. */
.help-search { position: relative; margin-top: 24px; }
.help-search[hidden] { display: none; }
.help-search input {
  width: 100%;
  height: 52px;
  padding: 0 48px 0 48px;
  border-radius: 999px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}
.help-search input::placeholder { color: var(--ink-subtle); }
.help-search input:focus { outline: none; border-color: rgba(255, 106, 40, 0.55); }
.help-search input::-webkit-search-cancel-button { display: none; }
.help-search-glyph { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: grid; color: var(--ink-subtle); pointer-events: none; }
.help-search-glyph svg, .help-search-clear svg { width: 18px; height: 18px; }
.help-search input:focus ~ .help-search-glyph, .help-search:focus-within .help-search-glyph { color: var(--brand-from); }
.help-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-subtle); cursor: pointer;
}
.help-search-clear[hidden] { display: none; }
.help-search-clear:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.help-count { margin: 10px 4px 0; min-height: 1em; font-size: 14px; color: var(--ink-subtle); }
.help-count:empty { display: none; }
.help-none { margin-top: 16px; padding: 18px 20px; }
.help-none p { margin: 0; color: var(--ink-muted); }
.help-none strong { color: var(--ink); }
.help-hidden { display: none !important; }

/* Help's front page: the topic tiles, popular questions, the latest post. */
.help-home h1 { text-wrap: balance; }
.topic-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.topic-tile { display: flex; flex-direction: column; height: 100%; padding: 20px; text-decoration: none; color: inherit; transition: border-color 0.2s ease, transform 0.2s var(--ease); }
.topic-tile:hover { color: inherit; border-color: rgba(255, 106, 40, 0.35); }
.topic-tile:active { transform: scale(0.98); }
.topic-tile .tile-icon { width: 44px; height: 44px; border-radius: 14px; }
.topic-tile .tile-icon svg { width: 22px; height: 22px; }
.doc .topic-tile h2 { margin: 16px 0 0; font-size: 18px; font-weight: 600; }
.doc .topic-tile p { margin-top: 4px; font-size: 15px; line-height: 1.45; }
.topic-count { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--ink-subtle); }
.link-list { list-style: none; margin: 16px 0 0; padding: 4px 20px; }
.link-list li + li { border-top: 1px solid var(--row-line); }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 0; font-weight: 600; text-decoration: none; color: var(--ink); }
.link-list a:hover { color: var(--brand-from); }
.chev { flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ink-subtle); border-bottom: 2px solid var(--ink-subtle); transform: rotate(-45deg); }
.help-news { display: grid; gap: 6px; margin-top: 36px; padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color 0.2s ease; }
.help-news:hover { color: inherit; border-color: rgba(255, 106, 40, 0.35); }
.help-news strong { font-size: 18px; color: var(--ink); }
.help-news-summary { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.doc .help-news .meta { margin: 0; }
.help-searching .help-browse { display: none; }

/* Search results: each a link to the guide or question on its topic's page. */
.help-results { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.result { display: grid; gap: 4px; padding: 16px 20px; border-radius: var(--r-panel); background: var(--panel); border: 1px solid var(--panel-line); text-decoration: none; color: inherit; transition: border-color 0.2s ease; }
.result:hover { color: inherit; border-color: rgba(255, 106, 40, 0.35); }
.result-topic { font-size: 13px; font-weight: 600; color: var(--brand-from); }
.result strong { font-size: 16px; color: var(--ink); }
.result-snip { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

/* A topic's page. */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-subtle); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-from); }
.topic-head { display: flex; gap: 18px; align-items: center; margin-top: 20px; }
.doc .topic-head .lede { margin-top: 6px; }
.help-topic .help-search { margin-top: 28px; }
.help-topic .faq { scroll-margin-top: 96px; }
.faq:target { border-color: rgba(255, 106, 40, 0.45); }
.steps-num { counter-reset: step; list-style: none; padding: 0 !important; gap: 12px !important; }
.steps-num li { counter-increment: step; position: relative; padding-left: 40px; min-height: 28px; padding-top: 2px; }
.steps-num li::before {
  content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-weight: 700; font-size: 14px; color: var(--cream); background: rgba(255, 106, 40, 0.16); border: 1px solid rgba(255, 122, 74, 0.32);
}
.guide-tips { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.doc .guide-tips-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--brand-from); }
.guide-tips ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.more-topics { margin-top: 12px; }
.chip-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-line); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink); }
.chip-list a:hover { border-color: rgba(255, 106, 40, 0.35); color: var(--ink); }
.chip-list svg { width: 16px; height: 16px; color: var(--brand-from); }

/* Still stuck? at the end of Help. */
.stuck { display: flex; gap: 18px; align-items: flex-start; margin-top: 40px; padding: 22px; }
.doc .stuck h2 { margin: 2px 0 0; font-size: 19px; }
.doc .stuck p { margin-top: 6px; }
@media (max-width: 560px) {
  .topic-grid { gap: 10px; }
  .topic-tile { padding: 16px; }
  .doc .topic-tile p { font-size: 14px; }
  .topic-head { align-items: flex-start; }
  .stuck { flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .topic-tile:active { transform: none; } }

/*
 * "No two copies": each point shows itself (founder, 19 Oct 2026), from the founder's real scans. Crops are set here,
 * since the site's security rules don't allow a style written into the page.
 */
.points-pics li { display: flex; flex-direction: column; }
.pv { display: grid; place-items: center; height: 150px; margin: -4px -6px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--panel-line); overflow: hidden; position: relative; }
.pv img { display: block; user-select: none; -webkit-user-select: none; }
.pv-frame { position: absolute; inset: 0; }
.pv-crop { position: absolute; inset: 0; overflow: hidden; }
.pv-crop img { position: absolute; width: auto; max-width: none; }
/* A point of the photo, by its share of the width and height, put in the middle of the box (Feraligatr's swirl, top left of its art; Lapras's back, top right). */
.crop-holo img, .crop-corner img { left: 50%; top: 50%; }
.crop-holo img { width: 270%; transform: translate(-27%, -21%); }
/* The photo is pinned by its corner (98.4% across, 2.13% down) to the ring's centre, so the ring stays on the corner at
   every width; the box's height is fixed below 900px while the photo scales with its width (founder, 30 Oct 2026). */
.crop-corner img { width: 380%; left: 74%; top: 26%; transform: translate(-98.4%, -2.13%); }
.pv-sheen { position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 210, 160, 0.18) 52%, transparent 65%); mix-blend-mode: screen; animation: pv-sheen 4.5s var(--ease) infinite; }
@keyframes pv-sheen { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
.pv-ring { position: absolute; left: 74%; top: 26%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 2px solid var(--brand-from); box-shadow: 0 0 0 4px rgba(255, 106, 40, 0.18); }
.pv-card { position: relative; height: 128px; aspect-ratio: 1182 / 1651; }
.pv-card img { width: 100%; height: 100%; border-radius: 4px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.9); }
.pv-guide { position: absolute; background: var(--brand-from); opacity: 0.9; }
.g-l, .g-r { top: -8px; bottom: -8px; width: 1px; }
.g-t, .g-b { left: -8px; right: -8px; height: 1px; }
.g-l { left: 3.5%; } .g-r { right: 2.9%; } .g-t { top: 2.2%; } .g-b { bottom: 2%; }
.pv-sign { height: 128px; }
.pv-sign .sig-card { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.18); }
.pv-sign .sig-art { fill: rgba(255, 255, 255, 0.05); }
.pv-sign .sig-ink { fill: var(--brand-from); fill-opacity: 0; stroke: var(--brand-from); stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pv-sign 5s linear infinite; }
/* "Cardkept" written out letter by letter, filled, held, then gone: the next letter starts as the last one ends. */
.pv-sign .sig-1 { animation-delay: 0.25s; } .pv-sign .sig-2 { animation-delay: 0.5s; } .pv-sign .sig-3 { animation-delay: 0.75s; }
.pv-sign .sig-4 { animation-delay: 1s; } .pv-sign .sig-5 { animation-delay: 1.25s; } .pv-sign .sig-6 { animation-delay: 1.5s; } .pv-sign .sig-7 { animation-delay: 1.75s; }
@keyframes pv-sign {
  0% { stroke-dashoffset: 1; fill-opacity: 0; opacity: 1; }
  20% { stroke-dashoffset: 0; fill-opacity: 0; }
  30% { fill-opacity: 1; }
  80% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 0; }
}
.pv-shelf { display: flex; gap: 8px; }
.pv-tile { position: relative; }
.pv-tile img { height: 104px; width: auto; border-radius: 4px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.9); }
.pv-badge { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); display: grid; padding: 3px 6px; border-radius: 999px; background: rgba(14, 14, 16, 0.85); border: 1px solid rgba(255, 255, 255, 0.14); }
.pv-badge-mark { height: 6px; width: auto; color: #fff; }
.pv-controls { display: grid; gap: 12px; width: 82%; }
.pv-slider { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); }
.pv-slider svg { width: 100%; height: 8px; overflow: visible; }
.pv-slider .track, .mini-bars .track { fill: rgba(255, 255, 255, 0.12); }
.pv-slider .fill, .mini-bars .fill { fill: var(--brand); }
.pv-slider .knob { fill: #fff; }
.pv-seg { display: flex; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 11px; color: var(--ink-muted); }
.pv-seg span { flex: 1; text-align: center; padding: 4px 0; border-radius: 999px; white-space: nowrap; }
.pv-seg .on { background: var(--brand); color: #fff; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .pv-sheen { animation: none; transform: none; opacity: 0.6; }
  .pv-sign .sig-ink { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
}

/* About me's tiles: the founder's real About me, worked out with the app's code. */
.tile .mini-title-name { margin: 0; max-width: none; font-weight: 800; font-style: italic; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -0.02em; color: var(--brand); }
.tile .mini-title .mini-sub { margin-top: 6px; }
.mini-title .mini-pills { margin-top: 14px; }
.mini-rings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.mini-rings li { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.ring-wrap { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 5; }
.ring-fill { fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round; }
.ring-wrap img { max-width: 38px; max-height: 22px; width: auto; height: auto; }
.mini-rings .mini-row-name { max-width: 100%; white-space: normal; font-size: 12px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-rings .mini-sub { font-size: 12px; }
.mini-badges li { gap: 12px; }
.badge-medal { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--cream); background: radial-gradient(circle at 30% 20%, rgba(255, 154, 60, 0.5), rgba(226, 60, 16, 0.3)); border: 1px solid rgba(255, 122, 74, 0.4); }
.badge-medal svg { width: 17px; height: 17px; }
.mini-fan { display: flex; justify-content: center; padding: 6px 0 4px; }
.fan-card { position: relative; margin: 0 -10px; }
.fan-card .mini-card { width: 96px; }
.fan-card:nth-child(1) { transform: rotate(-9deg) translateY(8px); }
.fan-card:nth-child(2) { z-index: 1; transform: translateY(-4px); }
.fan-card:nth-child(3) { transform: rotate(9deg) translateY(8px); }
.fan-star { position: absolute; top: -8px; right: -6px; padding: 4px; }
.fan-star svg { width: 12px; height: 12px; }
.tile .mini-growth-figure { margin: 0 0 8px; font-size: 14px; color: var(--ink-muted); }
.mini-growth-figure strong { color: var(--ink); font-size: 20px; }
.growth { display: block; width: 100%; height: 96px; }
.growth-line { fill: none; stroke: var(--brand); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mini-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mini-bars li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline; }
.mini-bars svg { grid-column: 1 / -1; width: 100%; height: 6px; }
.fan-card:nth-child(1) .fan-star { right: auto; left: -6px; }

/* Prices: the currencies, a small box under Raw and Graded (founder, 19 Oct 2026). */
.currencies { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 14px; padding: 18px 22px; }
.currencies h3 { margin: 0; font-weight: 600; font-size: 17px; }
.currencies p { margin-top: 4px; font-size: 15px; color: var(--ink-muted); }
.currencies .chips { margin: 0; justify-content: flex-end; }
@media (max-width: 760px) {
  .currencies { grid-template-columns: auto minmax(0, 1fr); }
  .currencies .chips { grid-column: 1 / -1; justify-content: flex-start; }
}

/* More card games: a fan of card backs, unnamed until they're decided (founder, 19 Oct 2026). */
.games-fan { position: relative; flex: none; width: 168px; height: 112px; }
.games-fan .back {
  position: absolute; bottom: 0; left: 50%; width: 60px; height: 84px; margin-left: -30px; border-radius: 7px; transform-origin: 50% 120%;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.9);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 8px),
    linear-gradient(150deg, var(--back-a), var(--back-b));
}
.games-fan .b1 { --back-a: #3A3A44; --back-b: #1C1C22; transform: rotate(-24deg); }
.games-fan .b2 { --back-a: #4A3A30; --back-b: #22180F; transform: rotate(-9deg); }
.games-fan .b3 { --back-a: #2E3A48; --back-b: #121A24; transform: rotate(6deg); }
.games-fan .b4 { --back-a: #40303F; --back-b: #1E141D; transform: rotate(21deg); }
.games-fan .b-next {
  display: grid; place-items: center; transform: rotate(36deg); color: var(--cream);
  background: radial-gradient(circle at 30% 20%, rgba(255, 154, 60, 0.5), rgba(226, 60, 16, 0.3) 60%, rgba(226, 60, 16, 0.15));
  border-color: rgba(255, 122, 74, 0.4);
}
.games-fan .b-next svg { width: 22px; height: 22px; }
.more-games .soon { display: inline-block; margin: 0 0 8px; }
.more-games { align-items: center; gap: 28px; }
@media (max-width: 560px) { .more-games { flex-direction: column; align-items: flex-start; } }

/* The swirl's 3D card: about 2.7 times the box's width (the 3D box adds 8% each side), its art's top left in the middle. */
.pv-swirl .card3d-swirl { left: 50%; top: 50%; width: 313%; transform: translate(-30%, -25%); pointer-events: none; z-index: 1; }
.pv-swirl .card3d-swirl canvas { cursor: default; }
.pv-swirl:has(.card3d-swirl.ready) .pv-crop { opacity: 0; transition: opacity 0.3s ease 0.2s; }

/* "Show it to anyone": three shared PRO Scans fanned out, floating gently, the address under them. */
.mini-share { display: grid; justify-items: center; gap: 14px; padding-top: 6px; }
.mini-share .share-card { grid-area: 1 / 1; display: block; }
.mini-share img { display: block; width: 84px; height: auto; border-radius: 5px; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.9); }
.mini-share .share-card:nth-child(1) { transform: translateX(-62px) rotate(-12deg); animation: share-float-a 6s ease-in-out infinite; }
.mini-share .share-card:nth-child(2) { z-index: 1; animation: share-float-b 6s ease-in-out infinite; }
.mini-share .share-card:nth-child(3) { transform: translateX(62px) rotate(12deg); animation: share-float-c 6s ease-in-out infinite; }
@keyframes share-float-a { 0%, 100% { transform: translate(-62px, 8px) rotate(-12deg); } 50% { transform: translate(-64px, 2px) rotate(-14deg); } }
@keyframes share-float-b { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-10px); } }
@keyframes share-float-c { 0%, 100% { transform: translate(62px, 8px) rotate(12deg); } 50% { transform: translate(64px, 2px) rotate(14deg); } }
.mini-share .mini-url { grid-area: 2 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-line); font-size: 12px; color: var(--ink-muted); }
.mini-share .mini-url svg { width: 13px; height: 13px; color: var(--brand-from); }
.mini-rate { display: block; font-size: 12px; color: var(--brand-from); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .mini-share .share-card { animation: none; } }

/* Search's results as Collection's card tiles: the picture big, the JP tag before a Japanese card's name. */
.mini-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini-grid li { display: grid; gap: 3px; min-width: 0; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--panel-line); }
.mini-grid .mini-card { width: 100%; margin-bottom: 8px; border-radius: 6px; }
/* The language tag sits on the set line, so a narrow phone keeps the card's whole name (it was cut to "Ch" at 320px). */
.mini-grid .mini-row-name { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-grid .mini-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-grid .mini-tag { margin: 0 5px 0 0; }
.mini-grid .mini-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Bigger share cards, closing the gap under the words (founder, 19 Oct 2026). Sized by the tile's own width, a
   pixel at most (`--u`, the fan's 330px across), so a narrow tile shrinks the fan instead of it spilling out (founder,
   25 Oct 2026). */
.mini-share { container-type: inline-size; width: 100%; }
.mini-share .share-card { --u: min(1px, calc(100cqi / 330)); }
.mini-share img { width: calc(116 * var(--u)); }
.mini-share .share-card:nth-child(1) { transform: translateX(calc(-84 * var(--u))) rotate(-12deg); }
.mini-share .share-card:nth-child(3) { transform: translateX(calc(84 * var(--u))) rotate(12deg); }
@keyframes share-float-a { 0%, 100% { transform: translate(calc(-84 * var(--u)), calc(10 * var(--u))) rotate(-12deg); } 50% { transform: translate(calc(-86 * var(--u)), calc(3 * var(--u))) rotate(-14deg); } }
@keyframes share-float-c { 0%, 100% { transform: translate(calc(84 * var(--u)), calc(10 * var(--u))) rotate(12deg); } 50% { transform: translate(calc(86 * var(--u)), calc(3 * var(--u))) rotate(14deg); } }

/* The calls to action (founder, 19 Oct 2026): one orange download button wherever someone is ready, written as if
 * the app is in the App Store (the site goes live with it). */
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s ease, background 0.2s ease; }
.cta svg { width: 20px; height: 20px; }
.cta-primary { color: #fff; background: linear-gradient(145deg, var(--brand-from), var(--brand-to)); box-shadow: 0 12px 30px -10px rgba(226, 60, 16, 0.75), inset 0 1px 0 rgba(255, 217, 166, 0.35); }
.cta-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 36px -10px rgba(226, 60, 16, 0.9), inset 0 1px 0 rgba(255, 217, 166, 0.35); }
.cta-primary:active { transform: scale(0.98); }
/* Not a link until the App Store link is set (D911): no lift, no press. */
.cta-soon, .cta-soon:hover, .cta-soon:active { cursor: default; transform: none; box-shadow: 0 12px 30px -10px rgba(226, 60, 16, 0.75), inset 0 1px 0 rgba(255, 217, 166, 0.35); }
.cta-ghost { color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cta-ghost:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.cta-note { margin: 14px 0 0; font-size: 14px; color: var(--ink-subtle); text-align: center; }
.hero .cta-note { margin-top: 14px; }
.closing-cta { display: flex; flex-direction: column; align-items: center; margin-top: 36px; padding: 32px clamp(20px, 5vw, 48px); border-radius: var(--r-panel); background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(226, 60, 16, 0.22), transparent 65%), var(--panel); border: 1px solid rgba(255, 122, 74, 0.22); }
.closing-ask { margin: 0 0 18px; font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); color: var(--ink); }
.cta-big { min-height: 60px; padding: 0 34px; font-size: 18px; }
.bar-cta { flex: none; display: inline-flex; align-items: center; min-height: 38px; margin-left: 10px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #fff; text-decoration: none; background: linear-gradient(145deg, var(--brand-from), var(--brand-to)); box-shadow: 0 8px 20px -10px rgba(226, 60, 16, 0.8); }
.bar-cta:hover { color: #fff; filter: brightness(1.06); }
@media (max-width: 560px) {
  /* The hero's two buttons side by side on a phone, the download one just "Download", so the carousel's cards show
     whole on the first screen (founder, 21 Oct 2026). */
  .hero-cta { flex-wrap: nowrap; width: 100%; max-width: 400px; margin: 24px auto 0; gap: 10px; }
  .hero-cta .cta { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 14px; gap: 8px; font-size: 15px; white-space: nowrap; }
  .hero-cta .cta svg { width: 18px; height: 18px; }
  .hero-cta .cta-long { display: none; }
  .bar-cta { min-height: 34px; padding: 0 12px; font-size: 13px; margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } .cta-primary:hover, .cta-primary:active { transform: none; } }
@media (max-width: 480px) { .bar .bar-cta { display: none; } }
/* Three results, one per language (founder, 19 Oct 2026). A provider's square product photo is shown whole, not cut. */
.mini-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-grid-3 li { padding: 8px; }
.mini-grid-3 .mini-card { object-fit: contain; background: transparent; box-shadow: none; }
.mini-grid-3 .mini-row-name { font-size: 13px; }
.mini-grid-3 .mini-sub { font-size: 11px; }
/* Three cards don't fit a narrow tile (Help's guides on a small iPhone cut "Charizard" to "Char…"): two, with room for their names. */
.guide-visual, .tile-mini { container-type: inline-size; }
@container (max-width: 360px) { .mini-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mini-grid-3 li:nth-child(n + 3) { display: none; } }
/* A wishlist row's card name may take two lines, so a long one ("Eevee & Snorlax GX") is read whole on a small phone or an iPad. */
.mini-wish .mini-row-name { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
/* A wishlist row in a narrow tile: the wanted condition and price go under the name, so the name keeps the row's width. */
@container (max-width: 300px) {
  .mini-wish .mini-wish-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
  .mini-wish .mini-wish-row > .mini-card { grid-row: span 2; }
  .mini-wish .mini-wish-end { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
}
/* A story in a narrow tile: the card above its words, not squeezing them into a strip. */
@container (max-width: 300px) { .mini-story { flex-direction: column; } }

/* About me's collector title: white, larger, the titles the app gives rolling up one by one every 3 s (founder, 19 Oct 2026). */
.tile .mini-title-label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-subtle); }
.title-roll { height: 44px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.title-track { list-style: none; margin: 0; padding: 0; animation: title-roll 18s var(--ease) infinite; }
.title-track li { height: 44px; display: flex; align-items: center; font-weight: 700; font-size: clamp(20px, 2.1vw, 28px); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
@keyframes title-roll {
  0.00%, 13.33% { transform: translateY(-0px); }
  16.67%, 30.00% { transform: translateY(-44px); }
  33.33%, 46.67% { transform: translateY(-88px); }
  50.00%, 63.33% { transform: translateY(-132px); }
  66.67%, 80.00% { transform: translateY(-176px); }
  83.33%, 96.67% { transform: translateY(-220px); }
  100% { transform: translateY(-264px); }
}
@media (prefers-reduced-motion: reduce) { .title-track { animation: none; } }

/* Best cards: bigger, floating as "Show it to anyone"'s do. */
.fan-card .mini-card { width: 120px; border-radius: 6px; }
.fan-card { margin: 0 -16px; }
.fan-card:nth-child(1) { animation: fan-a 6s ease-in-out infinite; }
.fan-card:nth-child(2) { animation: fan-b 6s ease-in-out infinite; }
.fan-card:nth-child(3) { animation: fan-c 6s ease-in-out infinite; }
@keyframes fan-a { 0%, 100% { transform: rotate(-9deg) translateY(8px); } 50% { transform: rotate(-11deg) translateY(2px); } }
@keyframes fan-b { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-10px); } }
@keyframes fan-c { 0%, 100% { transform: rotate(9deg) translateY(8px); } 50% { transform: rotate(11deg) translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .fan-card { animation: none !important; } }

/* Over time, as the app's chart: the range switch, the line with a dotted mark on each day cards joined, then the total. */
.growth-seg { display: flex; margin-bottom: 14px; }
.growth-seg span { padding: 6px 0; font-size: 12px; }
.growth { height: 110px; overflow: visible; }
.growth-mark { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.growth-dot { fill: var(--brand); stroke: var(--ground, #0E0E10); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tile .growth-total { margin: 14px 0 0; font-family: "Archivo Expanded", "Archivo", sans-serif; font-weight: 900; font-size: 26px; line-height: 1.1; color: var(--ink); }
.tile .growth-today { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }
.growth-today span { font-weight: 600; color: var(--brand-from); }

/* Your collection's bars: real rounded ends (an SVG stretched to the width had squashed them). */
.mini-bars .mini-bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.mini-bars .bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.bar-fill.w-5 { width: 5%; }
.bar-fill.w-10 { width: 10%; }
.bar-fill.w-15 { width: 15%; }
.bar-fill.w-20 { width: 20%; }
.bar-fill.w-25 { width: 25%; }
.bar-fill.w-30 { width: 30%; }
.bar-fill.w-35 { width: 35%; }
.bar-fill.w-40 { width: 40%; }
.bar-fill.w-45 { width: 45%; }
.bar-fill.w-50 { width: 50%; }
.bar-fill.w-55 { width: 55%; }
.bar-fill.w-60 { width: 60%; }
.bar-fill.w-65 { width: 65%; }
.bar-fill.w-70 { width: 70%; }
.bar-fill.w-75 { width: 75%; }
.bar-fill.w-80 { width: 80%; }
.bar-fill.w-85 { width: 85%; }
.bar-fill.w-90 { width: 90%; }
.bar-fill.w-95 { width: 95%; }
.bar-fill.w-100 { width: 100%; }

/* Over time: a taller chart, more room above the total (founder, 19 Oct 2026). */
.mini-growth .growth { height: 150px; }
.tile .growth-total { margin-top: 26px; }
/* Best cards: bigger, and the fan given the wide tile's room (founder, 19 Oct 2026). */
.tile-wide.tile-mini .mini-fan { justify-content: flex-start; padding: 10px 0 8px 12px; }
.fan-card .mini-card { width: 150px; border-radius: 8px; }
.fan-card { margin: 0 -22px; }
@media (max-width: 760px) { .fan-card .mini-card { width: 110px; } .tile-wide.tile-mini .mini-fan { justify-content: center; padding-left: 0; } }
/* The fan never wider than its tile (founder, 25 Oct 2026: at 1024px its right card stood out of the box): each card
   at most 36 % of the fan's own width, its overlap kept in proportion, and the Favorite star inside the edge. */
.mini-fan { container-type: inline-size; width: 100%; box-sizing: border-box; padding-inline: 10px; }
.fan-card .mini-card { width: min(150px, 36cqi); }
.fan-card { margin: 0 calc(min(150px, 36cqi) * -0.147); }
@media (max-width: 760px) { .fan-card .mini-card { width: min(110px, 36cqi); } .fan-card { margin: 0 calc(min(110px, 36cqi) * -0.147); } }
.tile .mini .mini-growth .growth-total { margin-top: 26px; }
.tile .mini .mini-growth .growth-today { margin-top: 6px; }
/* Your collection: three breakdowns side by side across the full tile (founder, 19 Oct 2026). */
.mini-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mini-group { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--panel-line); }
.tile .mini .mini-group-title { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-subtle); }
@media (max-width: 760px) { .mini-groups { grid-template-columns: minmax(0, 1fr); } }
/* Over time across the full width: its words on the left, the chart wide beside them. */
.tile-full.tile-mini:has(.mini-growth) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: center; }
.tile-full.tile-mini:has(.mini-growth) .mini { margin: 0; padding: 0; }
/* One column below 760px: the words and the chart both run the tile's full width, left-aligned like every other tile. */
@media (max-width: 760px) { .tile-full.tile-mini:has(.mini-growth) { display: flex; align-items: stretch; } .tile-full.tile-mini:has(.mini-growth) .mini { width: 100%; padding-top: 22px; } }
/* Over time drawn at one fixed shape that scales evenly (founder, 19 Oct 2026: it looked stretched), so the line keeps its
 * weight and the end dot stays round; the total larger, "in your collection" in grey beside it. */
.mini-growth .growth { width: 100%; height: auto; }
.mini-growth .growth-line { stroke-width: 3; vector-effect: none; }
.mini-growth .growth-mark { vector-effect: none; stroke-width: 1.5; }
.mini-growth .growth-dot { stroke-width: 3; vector-effect: none; }
.tile .mini .mini-growth .growth-total { margin-top: 22px; font-size: 34px; }
.growth-total span { font-family: "Archivo", sans-serif; font-weight: 500; font-size: 17px; color: var(--ink-subtle); }
/* On a phone the words under the count go on their own line, never wrapping half a phrase away from it. */
@media (max-width: 520px) { .growth-total span { display: block; margin-top: 6px; line-height: 1.3; } }
.tile .mini .mini-growth .growth-today { font-size: 16px; }
/* About me's profile, above the collector title (founder, 19 Oct 2026): picture, name, @handle, when they joined. */
.mini-profile { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--row-line); }
.mini-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 122, 74, 0.25), 0 10px 22px -10px rgba(226, 60, 16, 0.8); }
.tile .mini .mini-profile-name { font-weight: 700; font-size: 19px; color: var(--ink); }
.mini-profile .mini-sub { margin-top: 2px; }

/* A section's title beside a real screenshot in the phone frame (founder, 19 Oct 2026): Collection for "Everything you
 * collect", About me for About me, on alternate sides. */
.section-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 80px); align-items: center; }
.section-lead-flip { grid-template-columns: auto minmax(0, 1fr); }
.section-lead-flip .device { order: -1; }
.device-lead { width: min(300px, 70vw); }
.device-shot { display: block; width: 100%; height: 100%; object-fit: cover; }
.section-lead + .bento { margin-top: clamp(40px, 6vw, 72px); }
@media (max-width: 760px) {
  .section-lead, .section-lead-flip { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .section-lead-flip .device { order: 0; }
  .section-lead .bento-head { justify-self: start; }
  .device-lead { width: min(260px, 70vw); }
}

/* Prices: what your collection is worth (founder, 19 Oct 2026), the app's own value line beside what it rests on. */
.worth { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 40px; padding: clamp(22px, 3vw, 36px); background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(226, 60, 16, 0.18), transparent 60%), var(--panel); }
.worth h3 { margin: 18px 0 0; font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.worth-words > p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.worth-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.worth-points li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); }
.worth-points li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px; border-left: 2px solid var(--brand-from); border-bottom: 2px solid var(--brand-from); transform: rotate(-45deg); }
.worth-figure { display: grid; justify-items: center; text-align: center; padding: 28px 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--panel-line); }
.worth-figure p { margin: 0; }
.worth-count { font-size: 14px; color: var(--ink-subtle); }
.worth-value { margin-top: 6px !important; font-family: "Archivo Expanded", "Archivo", sans-serif; font-weight: 900; font-size: clamp(38px, 4.6vw, 54px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.worth-label { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px !important; font-size: 15px; color: var(--ink-muted); }
.worth-info { display: inline-grid; color: var(--ink-subtle); }
.worth-info svg { width: 16px; height: 16px; }
.worth-how { max-width: 34ch; margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--row-line); font-size: 13px; line-height: 1.5; color: var(--ink-subtle); }
@media (max-width: 760px) { .worth { grid-template-columns: minmax(0, 1fr); } }

/* The region picker, top right: a glass pill with the globe, the region and its currency. */
.region { position: relative; flex: none; display: inline-flex; align-items: center; margin-left: 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.region-glyph { position: absolute; left: 12px; display: grid; color: var(--ink-muted); pointer-events: none; }
.region-glyph svg { width: 16px; height: 16px; }
/* The picked region's flag, round, with a hairline so its white parts hold an edge on the glass. */
.region-flag { border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }
.region-flag svg { width: 18px; height: 18px; display: block; }
.region select { -webkit-appearance: none; appearance: none; min-height: 38px; padding: 0 32px 0 36px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.region select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.region select option { color: #0E0E10; }
.region-chev { position: absolute; right: 14px; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid var(--ink-subtle); border-bottom: 2px solid var(--ink-subtle); transform: rotate(45deg); pointer-events: none; }
@media (max-width: 560px) { .region { margin-left: 6px; } .region select { min-height: 34px; padding: 0 26px 0 34px; font-size: 13px; } .region-glyph { left: 10px; } .region-chev { right: 11px; } }
/* On a phone the picker is the globe and the currency sign; the list it opens is the same. */
.region-short { display: none; }
@media (max-width: 560px) {
  .region { min-width: 56px; height: 34px; }
  .region-short { display: block; padding: 0 22px 0 34px; font-weight: 700; font-size: 14px; color: var(--ink); pointer-events: none; }
  .region select { position: absolute; inset: 0; width: 100%; opacity: 0; }
  .region-chev { right: 10px; }
}
@media (max-width: 420px) {
  .bar-nav a { padding: 7px 8px; font-size: 13px; }
  .region { margin-left: 4px; min-width: 0; }
  .region-short { padding: 0 18px 0 31px; }
  .region-glyph { left: 9px; }
  .region-chev { right: 8px; }
}
/* On wider screens: the menu stays centered and the region picker, a little smaller, sits right beside Get the app. */
@media (min-width: 900px) {
  .bar-nav { position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (min-width: 561px) {
  .region { margin-left: auto; }
  .region select { min-height: 32px; padding: 0 26px 0 34px; font-size: 13px; }
  .region-glyph { left: 10px; }
  .region-glyph svg { width: 14px; height: 14px; }
  .region-chev { right: 11px; width: 6px; height: 6px; }
  .region + .bar-cta { margin-left: -8px; }
}
/* Between phone and desktop the full menu and the picker fill the bar, so Get the app steps aside (the hero's button is right below). */
@media (max-width: 820px) { .bar .bar-cta { display: none; } }

/*
 * Sections rising in (site.js): a block below the fold waits faded and a little lower, then rises into place once.
 * About me's pieces come alive with it: rings fill, bars grow, the line draws from the left. Reduce Motion never gets
 * the .rise class, so none of this applies.
 */
.rise .rise-me { opacity: 0; transform: translateY(28px); }
.rise .rise-me.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease) var(--rise-delay, 0s), transform 0.9s var(--ease) var(--rise-delay, 0s);
}
.rise .rise-me .ring-fill { transition: stroke-dasharray 1.4s var(--ease) calc(var(--rise-delay, 0s) + 0.25s); }
.rise .rise-me:not(.is-in) .ring-fill { stroke-dasharray: 0 200; }
.rise .rise-me .bar-fill { transition: width 1.1s var(--ease) calc(var(--rise-delay, 0s) + 0.3s); }
.rise .rise-me:not(.is-in) .bar-fill { width: 0; }
.rise .rise-me .growth { transition: clip-path 1.6s var(--ease) calc(var(--rise-delay, 0s) + 0.2s); }
.rise .rise-me:not(.is-in) .growth { clip-path: inset(-10% 100% -10% 0); }
.rise .rise-me.is-in .growth { clip-path: inset(-10% 0 -10% 0); }

/*
 * The hero's deal (site.js): the middle card grows in first, then the others slide out from behind it, nearest first.
 * Each card fades on its own: an opacity on the track would flatten the cards' 3D while it ran.
 */
.deck-stage.is-dealing .deck-card { opacity: 0; --zoom: 0.9; transition: none; }

/*
 * "No two copies" and "What you get", bigger on a computer (founder, 19 Oct 2026: "the heart and soul of the app",
 * hard to see at four across): two across in a wider section, each picture a 16:10 box that grows with its tile, and
 * everything in it sized by the tile (cqw), so it scales at any width. The photos are 1,100-1,800 px wide, so the
 * crops stay sharp: the mark's crop zooms out a little (380% to 220%), its ring moved to stay on the same spot.
 * Phones and tablets keep the layout above.
 */
@media (min-width: 900px) {
  .own-copy { max-width: 1400px; }
  .own-copy .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .own-copy .points li { padding: 22px 24px 26px; container-type: inline-size; }
  .own-copy .points h3 { font-size: 19px; }
  .own-copy .points p { font-size: 16px; }
  .own-copy .pv { height: auto; aspect-ratio: 16 / 10; margin: -8px -10px 20px; border-radius: 18px; }
  .own-copy .crop-corner img { width: 220%; left: 72%; top: 28%; }
  .own-copy .pv-ring { left: 72%; top: 28%; width: 15cqw; height: 15cqw; margin: -7.5cqw 0 0 -7.5cqw; border-width: 3px; box-shadow: 0 0 0 6px rgba(255, 106, 40, 0.18); }
  .own-copy .pv-card, .own-copy .pv-sign { height: 84%; }
  .own-copy .g-l, .own-copy .g-r { top: -14px; bottom: -14px; width: 2px; }
  .own-copy .g-t, .own-copy .g-b { left: -14px; right: -14px; height: 2px; }
  .own-copy .pv-shelf { gap: 3cqw; }
  .own-copy .pv-tile img { height: 40cqw; border-radius: 8px; }
  .own-copy .pv-badge { bottom: -11px; padding: 5px 10px; }
  .own-copy .pv-badge-mark { height: 10px; }
  .own-copy .pv-controls { gap: 22px; width: 76%; }
  .own-copy .pv-slider { gap: 10px; font-size: clamp(12px, 2.6cqw, 17px); }
  .own-copy .pv-seg { font-size: clamp(11px, 2.3cqw, 15px); padding: 3px; }
  .own-copy .pv-seg span { padding: 7px 0; }
}
@media (min-width: 900px) {
  /* The sliders are drawn 100 by 8, so their height sets their length: about 60% of the controls. */
  .own-copy .pv-slider svg { height: 3.6cqw; }
}

/*
 * "Make it shine your way", playable (site.js): the 3D Feraligatr on the left, the app's look settings on the right
 * (stacked on a phone). The controls are the app's: sliders in steps of 20 %, pick-one pills with the chosen one in
 * orange.
 */
.own-copy .points .pt-wide { grid-column: 1 / -1; }
.shine-play { display: grid; gap: 24px; align-items: center; margin: -4px -6px 18px; padding: 20px 16px; border-radius: 14px; background: radial-gradient(ellipse 60% 80% at 25% 45%, rgba(226, 60, 16, 0.16), transparent 70%), rgba(255, 255, 255, 0.03); border: 1px solid var(--panel-line); }
.shine-stage { position: relative; justify-self: center; width: min(62%, 300px); aspect-ratio: 63 / 88; }
.shine-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4.5% / 3.2%; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9); transition: opacity 0.3s ease 0.2s; }
.shine-stage:has(.card3d.ready) .shine-still { opacity: 0; }
.shine-controls { display: grid; gap: 20px; }
.shine-controls[hidden] { display: none; }
.shine-row { display: grid; gap: 10px; margin: 0; }
.shine-name { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 15px; color: var(--ink); }
.shine-name output { font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.shine-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.shine-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.shine-row input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--brand) var(--p, 0%), rgba(255, 255, 255, 0.14) var(--p, 0%)); }
.shine-row input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--brand) var(--p, 0%), rgba(255, 255, 255, 0.14) var(--p, 0%)); }
.shine-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.shine-row input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.shine-row input[type="range"]:focus-visible { outline: 2px solid var(--brand-from); outline-offset: 4px; border-radius: 6px; }
.shine-seg { display: flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-line); }
.shine-seg button { flex: 1; min-height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; color: var(--ink-muted); white-space: nowrap; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.shine-seg button:hover { color: var(--ink); }
.shine-seg button[aria-pressed="true"] { background: var(--brand); color: #fff; font-weight: 700; }
.shine-seg button:focus-visible { outline: 2px solid var(--brand-from); outline-offset: 2px; }
@media (min-width: 700px) {
  .shine-play { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 36px 40px; }
  .shine-stage { width: min(80%, 340px); }
}
@media (min-width: 900px) {
  .own-copy .shine-play { margin: -8px -10px 20px; border-radius: 18px; padding: 48px 56px; }
  .own-copy .shine-stage { width: min(78%, 360px); }
  .own-copy .shine-controls { gap: 26px; max-width: 440px; }
}
@media (prefers-reduced-motion: reduce) { .shine-seg button, .shine-still { transition: none; } }
/* The playable card leads "No two copies" (founder, 19 Oct 2026); the four points sit close under it. */
.own-copy .points-play + .points { margin-top: 16px; }

/*
 * The demo's Inspect (site.js, as the app's CardInspect): the flat photo in the card's place, dragged and zoomed inside
 * its rounded frame; the corner, side and zoom pills under Adjust / Inspect.
 */
.shine-mode { margin-bottom: 4px; }
.shine-adjust, .shine-inspect { display: grid; gap: inherit; }
.shine-adjust[hidden], .shine-inspect[hidden], .shine-inspect-view[hidden] { display: none; }
.shine-stage.is-inspecting .card3d, .shine-stage.is-inspecting .shine-still { visibility: hidden; }
.shine-inspect-view { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: 4.5% / 3.2%; background: #000; touch-action: none; cursor: zoom-in; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9); }
.shine-inspect-view.is-zoomed { cursor: grab; }
.shine-inspect-view.is-zoomed:active { cursor: grabbing; }
.shine-inspect-view img { display: block; width: 100%; height: 100%; object-fit: fill; transform-origin: 0 0; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.shine-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shine-chips button { min-height: 36px; padding: 0 14px; border: 1px solid var(--panel-line); border-radius: 999px; background: rgba(255, 255, 255, 0.06); font: inherit; font-size: 14px; color: var(--ink-muted); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.shine-chips button:hover { color: var(--ink); }
.shine-chips button[data-zoom] { min-width: 44px; font-size: 18px; line-height: 1; color: var(--ink); }
.shine-chips button[aria-pressed="true"] { background: var(--brand); border-color: transparent; color: #fff; font-weight: 700; }
.shine-chips button:focus-visible { outline: 2px solid var(--brand-from); outline-offset: 2px; }
.shine-hint { margin: 0; font-size: 13px; color: var(--ink-subtle); }
@media (prefers-reduced-motion: reduce) { .shine-chips button { transition: none; } }

/* The demo's card picker (founder, 19 Oct 2026): three scans under the card, each a small picture and its name. */
.shine-left { display: grid; justify-items: center; gap: 22px; min-width: 0; }
.shine-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 520px; }
.shine-pick button { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 8px 8px; border: 1px solid var(--panel-line); border-radius: 14px; background: rgba(255, 255, 255, 0.05); font: inherit; text-align: left; color: var(--ink-muted); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.shine-pick button:hover { background: rgba(255, 255, 255, 0.08); }
.shine-pick button[aria-pressed="true"] { border-color: var(--brand); background: rgba(255, 74, 28, 0.14); color: var(--ink); }
.shine-pick button:focus-visible { outline: 2px solid var(--brand-from); outline-offset: 2px; }
.shine-pick img { flex: none; width: 30px; height: 42px; object-fit: cover; border-radius: 3px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.8); }
.shine-pick button > span { display: grid; min-width: 0; }
.shine-pick-name { font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shine-pick-note { font-size: 12px; color: var(--ink-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shine-left .shine-stage { width: min(80%, 300px); }
@media (min-width: 700px) { .shine-left .shine-stage { width: min(80%, 340px); } }
@media (min-width: 900px) { .own-copy .shine-left .shine-stage { width: min(78%, 360px); } }
@media (max-width: 520px) {
  .shine-pick button { flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; text-align: center; }
  .shine-pick-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .shine-pick button { transition: none; } }
/* The PRO Scan pill sizes around its whole mark (it was a grid track sized narrower than the mark, so "Scan" spilled out). */
.pv-badge { display: flex; align-items: center; white-space: nowrap; }
.pv-badge-mark { flex: none; aspect-ratio: 953.96 / 129.67; }

/*
 * ID Scan (founder, 19 Oct 2026): three tiles, each a real scanned card shown being read. A soft orange line passes
 * over what's being read; the viewfinder corners are the camera's. Nothing moves with Reduce Motion.
 */
.id-section { scroll-margin-top: 24px; }
.id-bento .tile { display: flex; flex-direction: column; }
.id-bento .tile h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.id-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink-muted); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-line); }
.id-tag-pro { color: #fff; background: linear-gradient(145deg, var(--brand-from), var(--brand-to)); border-color: transparent; }
.id-bento .mini { display: grid; place-items: center; min-height: 300px; margin-top: auto; padding: 26px 8px 4px; }

/* The sweep: a thin orange line with a soft glow, moving down over the card and back. */
.id-sweep { position: absolute; left: -4%; right: -4%; top: 0; height: 2px; border-radius: 2px; background: var(--brand-from); box-shadow: 0 0 14px 3px rgba(255, 106, 40, 0.55); animation: id-sweep 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes id-sweep { 0% { top: 4%; opacity: 0; } 12% { opacity: 1; } 50% { top: 96%; } 88% { opacity: 1; } 100% { top: 4%; opacity: 0; } }

/* The camera's viewfinder corners. */
.idc { position: absolute; width: 16%; aspect-ratio: 1; border: 0 solid var(--brand-from); pointer-events: none; }
.idc-tl { left: -6%; top: -4%; border-left-width: 3px; border-top-width: 3px; border-top-left-radius: 8px; }
.idc-tr { right: -6%; top: -4%; border-right-width: 3px; border-top-width: 3px; border-top-right-radius: 8px; }
.idc-bl { left: -6%; bottom: -4%; border-left-width: 3px; border-bottom-width: 3px; border-bottom-left-radius: 8px; }
.idc-br { right: -6%; bottom: -4%; border-right-width: 3px; border-bottom-width: 3px; border-bottom-right-radius: 8px; }

/* Raw: the card in the viewfinder, then the row it becomes in the list. */
.id-raw { display: grid; justify-items: center; gap: 22px; width: 100%; }
.id-frame { position: relative; width: 132px; }
.id-frame > img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 6px; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.9); }
.id-result { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; padding: 8px 10px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--panel-line); }
.id-result > img { flex: none; width: 30px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 3px; }
.id-result-words { display: grid; min-width: 0; flex: 1; }
.id-result-name { font-weight: 600; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-result-set { font-size: 12px; color: var(--ink-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-result .pill { flex: none; }

/* Slab: a clear case, its label being read, and what is read from it. */
.id-slab { display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; }
.slab-case { flex: none; width: 128px; padding: 8px; border-radius: 10px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 18px 30px -14px rgba(0, 0, 0, 0.9); }
.slab-label { position: relative; display: grid; gap: 4px; padding: 7px 8px; margin-bottom: 8px; border-radius: 5px; background: rgba(244, 244, 246, 0.92); overflow: hidden; }
.slab-label i { display: block; height: 4px; border-radius: 2px; background: rgba(14, 14, 16, 0.35); }
.slab-label i.short { width: 55%; }
.id-sweep-label { left: 0; right: 0; animation-duration: 2.4s; }
.slab-well { padding: 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.35); }
.slab-well img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; }
.slab-read { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; color: var(--ink); }
.slab-read li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.slab-read li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-from); box-shadow: 0 0 8px rgba(255, 106, 40, 0.6); }

/* A binder page: six cards, each picked out by its own corners, one after another. */
.id-page { display: grid; justify-items: center; gap: 16px; width: 100%; }
.id-grid { position: relative; display: grid; grid-template-columns: repeat(3, 58px); gap: 12px 14px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--panel-line); }
.id-cell { position: relative; display: block; }
.id-cell img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 3px; }
.id-cell .idc { width: 22%; border-width: 0; }
.id-cell .idc-tl { border-left-width: 2px; border-top-width: 2px; }
.id-cell .idc-tr { border-right-width: 2px; border-top-width: 2px; }
.id-cell .idc-bl { border-left-width: 2px; border-bottom-width: 2px; }
.id-cell .idc-br { border-right-width: 2px; border-bottom-width: 2px; }
.id-cell .idc { animation: id-found 4.8s ease-in-out infinite; opacity: 0; }
.id-cell[data-i="1"] .idc { animation-delay: 0.25s; }
.id-cell[data-i="2"] .idc { animation-delay: 0.5s; }
.id-cell[data-i="3"] .idc { animation-delay: 0.75s; }
.id-cell[data-i="4"] .idc { animation-delay: 1s; }
.id-cell[data-i="5"] .idc { animation-delay: 1.25s; }
.id-cell[data-i="6"] .idc { animation-delay: 1.5s; }
.id-cell[data-i="7"] .idc { animation-delay: 1.75s; }
.id-cell[data-i="8"] .idc { animation-delay: 2s; }
@keyframes id-found { 0%, 6% { opacity: 0; } 14%, 70% { opacity: 1; } 84%, 100% { opacity: 0; } }
.id-found { display: inline-flex; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-line); }

@media (min-width: 1100px) {
  .id-frame { width: 150px; }
  .slab-case { width: 140px; }
  .id-grid { grid-template-columns: repeat(3, 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .id-sweep { animation: none; display: none; }
  .id-cell .idc { animation: none; opacity: 1; }
}

/* The wishlist tile's prices (D797): the wanted condition in orange, the price under it, its ⓘ opening where it came from. */
.mini-wish li { display: block; }
.mini-wish-row { display: flex; align-items: center; gap: 12px; }
.mini-wish-end { display: grid; justify-items: end; gap: 2px; flex: none; text-align: right; }
.mini-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mini-price.is-quiet { font-weight: 500; font-size: 13px; color: var(--ink-muted); }
.mini-price-note { font-size: 11px; color: var(--ink-subtle); }
.mini-info { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -4px -4px -4px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-subtle); cursor: pointer; }
.mini-info svg { width: 15px; height: 15px; }
.mini-info:hover, .mini-info[aria-expanded="true"] { color: var(--ink); }
.mini-info:focus-visible { outline: 2px solid var(--brand-from); outline-offset: 1px; }
.tile .mini .mini-about { margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--panel-line); font-size: 12px; line-height: 1.5; color: var(--ink-muted); white-space: pre-line; }
.mini-about[hidden] { display: none; }
.tile .mini .mini-asof { margin-top: 10px; font-size: 12px; color: var(--ink-subtle); }
/* The currencies box shares its row fairly (founder, 19 Oct 2026: the chips squeezed the words into a strip): the
 * words keep at least 240px, the chips wrap in what's left, and below 1000px the chips go under the words. */
.currencies { grid-template-columns: auto minmax(240px, 1fr) minmax(0, max-content); }
.currencies .chips { flex-wrap: wrap; }
@media (max-width: 1000px) {
  .currencies { grid-template-columns: auto minmax(0, 1fr); }
  .currencies .chips { grid-column: 1 / -1; justify-content: flex-start; }
}
/* The slab tile on a narrow tile (three across at ~1000px): the slab shrinks and its list wraps, never spills. */
.id-slab { gap: 16px; min-width: 0; }
.slab-case { width: min(128px, 46%); }
.slab-read { min-width: 0; }
.slab-read li { white-space: normal; align-items: flex-start; line-height: 1.3; }
.slab-read li::before { margin-top: 4px; }
@media (min-width: 1100px) { .slab-case { width: min(140px, 46%); } }

/*
 * Every size (founder, 19 Oct 2026: "everything on the website works in every size, every device"). On a phone:
 * "No two copies" and "What you get" one per row (two squeezed their words to 105px and cut the shelf's cards); the
 * story's picture smaller so its words keep room; on the narrowest phones (320px) the logo is the C monogram so
 * the top bar fits.
 */
@media (max-width: 560px) {
  .own-copy .points { grid-template-columns: minmax(0, 1fr); }
  .own-copy .pv { height: 180px; }
}
/*
 * On a phone, the price sources and the Raw / Graded panels are carousels you swipe sideways, the next one peeking
 * in, so the page is shorter (founder, 21 Oct 2026: "instead of a user having to scroll down endlessly"). Each one
 * snaps into place; the lists run to the screen's edges. Their tiles skip the rise-in, which only sees the screen's height.
 */
@media (max-width: 560px) {
  .sources, .grades {
    display: flex;
    gap: 12px;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sources::-webkit-scrollbar, .grades::-webkit-scrollbar { display: none; }
  .sources > li, .grades > .panel { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  .rise .sources > .rise-me, .rise .grades.rise-me { opacity: 1; transform: none; }
}
@media (max-width: 400px) {
  .mini-story .mini-card { width: 64px; }
  .mini-story { gap: 12px; padding: 12px; }
  /* Help's guide pictures sit inside an opened question's panel: a little less padding leaves their words room. */
  .guide-visual.tile { padding: 16px 12px; }
}
@media (max-width: 360px) {
  /* `.brand > svg` sets display: block, so the name is hidden through the same parent (it showed behind the menu at 320px). */
  .brand > .brand-word { display: none; }
  .brand-mark { opacity: 1; transform: none; }
}
/* The top bar fits at every width (it ran past the screen from 421px to 820px and zoomed the page out): below 700px
 * Features steps aside (the page is the features), and the compact bar covers every phone, not only the smallest. */
@media (max-width: 700px) { .bar-nav .nav-features { display: none; } }
@media (max-width: 560px) {
  .bar { gap: 10px; }
  .brand-word { height: 18px; }
  .brand-mark { height: 24px; }
  .bar-nav { gap: 0; padding: 3px; }
  .bar-nav a { padding: 7px 11px; font-size: 13.5px; }
}
@media (max-width: 420px) { .bar-nav a { padding: 7px 8px; font-size: 13px; } }
/* Help's topics one per row on the narrowest phones (two squeezed their words to 100px at 320px). */
@media (max-width: 360px) { .topic-grid { grid-template-columns: minmax(0, 1fr); } }
/* The PRO Scan tips open on a tap (founder, 19 Oct 2026), as the FAQs do: the title and an arrow, the tips inside. */
.tips { padding: 0 20px; }
.tips summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 14px 0; cursor: pointer; list-style: none; }
.tips summary::-webkit-details-marker { display: none; }
.tips summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--ink-subtle); border-bottom: 2px solid var(--ink-subtle); transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease; }
.tips[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.tips summary:focus-visible { outline: 2px solid var(--brand-from); outline-offset: 2px; border-radius: 8px; }
.tips ul { margin: 0 0 16px; padding-top: 12px; border-top: 1px solid var(--row-line); }
/*
 * Do and Avoid (the tilt's tips): a pill switch with the two, Do open at first, and the list picked shows under it; a second tap on it
 * hides it again (founder, 30 Oct 2026: the lists took a whole phone screen). site.js sets data-show; without it both show.
 */
.dos-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-line); }
.dos-opt { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 20px 6px 8px; border: 0; border-radius: 999px; background: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink-muted); cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.dos-opt:hover { color: var(--ink); }
.dos-opt:focus-visible { outline: 2px solid var(--brand-from); outline-offset: 2px; }
.dos-opt[aria-pressed="true"] { color: #FFFFFF; font-weight: 700; background: linear-gradient(145deg, var(--brand-from), var(--brand-to)); }
.dos-opt[aria-pressed="true"] .do-mark { color: #FFFFFF; background: rgba(255, 255, 255, 0.22); }
.dos .do-list { margin-top: 12px; }
.dos[data-show] .do-list { display: none; }
.dos[data-show="do"] #dos-do, .dos[data-show="avoid"] #dos-avoid { display: block; }
.dos[data-show] .do-list h3 { display: none; }
.dos[data-show] .do-list ul { margin-top: 0; }
.dos[data-show] .do-list li:first-child { padding-top: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .dos-opt { transition: none; } }
@media (prefers-reduced-motion: reduce) { .tips summary::after { transition: none; } }
/* The slab tile's graders, under the slab (Ximilar's slab reader and the app's companies, D797's day). */
.id-bento .mini:has(.id-graders) { align-content: center; gap: 18px; }
.id-graders { justify-content: center; margin: 0; }
.id-graders li { font-size: 13px; padding: 5px 11px; }
.id-graders { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; }
.id-graders li { text-align: center; }
/* The ID Scan tiles' pictures sit in the middle of the space under the words, not pinned to the bottom (founder,
 * 19 Oct 2026: the Mewtwo sat too low, with a big gap above it), evenly spaced in all three. */
.id-bento .mini { flex: 1; margin-top: 0; min-height: 0; padding: 28px 0 6px; align-content: center; }
.id-raw { gap: 18px; }
.id-graders-wrap { display: grid; justify-items: center; gap: 10px; }
.tile .mini .id-graders-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-muted); text-align: center; }
/* More room between the scanned card (its viewfinder corners reach below it) and its row (founder, 19 Oct 2026). */
.id-raw { gap: 52px; }
/* Under the carousel (founder, 19 Oct 2026): quiet, and out of the way while a card is open. */
.deck-note { position: relative; z-index: 1; margin: -36px 0 0; padding: 0 var(--gutter); text-align: center; font-size: 13px; color: var(--ink-subtle); transition: opacity 0.3s ease; }
.deck.is-focused .deck-note { opacity: 0; }
/* More room between the slab and its graders (founder, 19 Oct 2026). */
.id-graders-wrap { margin-top: 18px; }
.tile .mini .id-graders-title { font-size: 15px; }

/* Friends (D881): the onboarding tour's friends page in small beside the tile's words (founder, 25 Oct 2026): a fan of
   Sam's PRO Scans, his request, then two friends, as the Over time tile lays out. */
.tile-full.tile-mini:has(.mini-friends) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: center; }
.tile-full.tile-mini:has(.mini-friends) .mini { margin: 0; padding: 0; }
@media (max-width: 760px) { .tile-full.tile-mini:has(.mini-friends) { display: flex; align-items: stretch; } .tile-full.tile-mini:has(.mini-friends) .mini { width: 100%; padding-top: 22px; } }
.mini-friends { display: grid; gap: 8px; max-width: 440px; margin-inline: auto; width: 100%; }
.friend-fan { display: flex; justify-content: center; align-items: center; padding: 6px 0 14px; }
/* As the tour draws it: Espeon V the hero, larger, in front and standing above the two leaning behind it. */
.friend-card { display: block; width: 26%; max-width: 116px; }
.friend-card:nth-child(1) { transform: rotate(-11deg) translateX(22%); }
.friend-card:nth-child(2) { position: relative; z-index: 1; width: 32%; max-width: 142px; transform: translateY(-6%); }
.friend-card:nth-child(3) { transform: rotate(11deg) translateX(-22%); }
.friend-card img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.9); animation: friend-sway 6.4s ease-in-out infinite; }
.friend-card:nth-child(1) img { animation-delay: -1.9s; }
.friend-card:nth-child(3) img { animation-delay: -3.8s; }
@keyframes friend-sway { 0%, 100% { transform: perspective(700px) rotateY(-12deg) rotateX(2deg); } 50% { transform: perspective(700px) rotateY(12deg) rotateX(-2deg); } }
.friend-label { margin: 8px 0 0; font-weight: 700; font-size: 15px; color: var(--ink); }
.friend-count { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-weight: 600; font-size: 11px; color: var(--ink-muted); background: rgba(255, 255, 255, 0.08); }
.friend-row { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px; border-radius: 14px; border: 1px solid var(--panel-line); background: rgba(38, 38, 42, 0.55); }
/* A Pro friend: an orange glow from the row's left edge, gone by the middle (D883). */
.friend-pro::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(226, 60, 16, 0.35), rgba(255, 122, 74, 0.12) 30%, rgba(255, 122, 74, 0) 55%); }
.friend-row > * { position: relative; }
.friend-row .mini-row-text { flex: 1; min-width: 0; }
.friend-row .mini-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.friend-handle { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-avatar { flex: none; position: relative; overflow: hidden; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 2px solid #0e0e10; font-weight: 800; font-style: italic; font-size: 17px; color: var(--ink-subtle); }
/* The artwork window of a card, as the app crops a picture. */
.friend-photo { position: absolute; width: 170%; height: auto; left: -35%; top: -10%; max-width: none; }
.friend-pro .friend-avatar { border: 2.5px solid transparent; background: linear-gradient(#0e0e10, #0e0e10) padding-box, linear-gradient(135deg, var(--brand-from), var(--brand-to)) border-box; }
.friend-tag { flex: none; height: 12px; width: auto; color: #fff; }
.friend-buttons { flex: none; display: flex; gap: 6px; }
.friend-button { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--ink); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); }
.friend-accept { color: #0e0e10; background: #f4f4f6; border-color: transparent; }
.friend-scans { flex: none; position: relative; width: 52px; height: 46px; margin-right: 4px; }
.friend-scans img { position: absolute; top: 3px; width: 30px; height: auto; border-radius: 2px; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.8); }
.friend-scans img:first-child { left: 0; transform: rotate(-6deg); }
.friend-scans img:last-child { left: 21px; transform: rotate(8deg); }
/* A small phone: Sam's request keeps its name, with Accept alone. */
@media (max-width: 400px) { .friend-button:not(.friend-accept) { display: none; } .friend-button { padding: 0 12px; } .friend-row .mini-sub { flex-wrap: wrap; row-gap: 2px; } .friend-handle { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .friend-card img { animation: none; } }

/* Short phones (an iPhone SE, any phone with Safari's bars showing under 660pt): the headline, words and buttons a
   little tighter, so the cards still fit on the first screen with them (founder, 30 Oct 2026). */
@media (max-width: 640px) and (max-height: 660px) {
  .hero { padding-top: 8px; }
  .hero-title { font-size: 38px; }
  .hero-line { margin-top: 10px; font-size: 15.5px; }
  .hero-cta { margin-top: 16px; }
  .hero .cta-note { margin-top: 8px; font-size: 13px; }
  .deck { --above: 349px; }
}
/* The narrowest phones wrap the words onto one more line. */
@media (max-width: 360px) and (max-height: 660px) { .deck { --above: 383px; } }

/*
 * A wide screen's hero in two halves (founder, 30 Oct 2026: the carousel was small with room to spare): the headline,
 * words and buttons on the left, the card fan on the right, as tall as the screen allows, both within the top bar's
 * width. The fan shows five cards here, closer together, so it stays in its half. From 1000px held sideways, so an
 * iPad in landscape has it too (its stacked fan was 140px wide); phones and upright tablets keep the stack.
 */
@media (min-width: 1000px) and (orientation: landscape) {
  .hero-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: 32px;
    max-width: 1200px;
    min-height: calc(100svh - 72px);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .hero-split .hero { align-items: flex-start; max-width: none; margin: 0; padding: 0; text-align: left; }
  .hero-split .hero-title { font-size: clamp(48px, min(5.4vw, 10vh), 80px); }
  /* Plain wrapping in a box just wider than the first sentence, so each line is a little shorter than the one above (founder, 30 Oct 2026: "pretty" left the lines ragged). */
  .hero-split .hero-line { max-width: 39.5ch; text-wrap: wrap; }
  .hero-split .hero-cta { flex-wrap: nowrap; justify-content: flex-start; }
  .hero-split .hero .cta-note { text-align: left; }
  /* As wide as its half allows (the fan spans about two cards' widths, so half the column: it reached over the
     headline and buttons on a wide screen, founder, 30 Oct 2026), and short enough that a tapped card, its close
     button, hint and details fit the screen's height. */
  .hero-split .deck { --w: clamp(220px, min(calc((min(100vw, 1200px) - 72px) * 0.27), calc((100svh - 384px) * 0.67)), 340px); padding: 0; overflow: visible; }
  /* The fan's cards are already large here, so a tapped one grows a little and the stage keeps only that much room
     above and below (1.12): the card, its close button, the hint and its details then fit on a laptop's screen. */
  .hero-split .deck-stage { --w: inherit; height: calc(var(--w) * 88 / 63 * 1.12); }
  .hero-split .deck { --zoom-focus: 1.06; }
  .hero-split .deck.is-focused .deck-controls { margin-top: 6px; }
  /* The caption just under the fan, inside the stage's room below the cards. */
  .hero-split .deck .deck-note { margin-top: calc(var(--w) * -0.084 + 14px); }
  .hero-split .deck-card {
    transform:
      perspective(1400px)
      translateX(calc(var(--d) * var(--w) * 0.4))
      translateZ(calc(var(--ad) * -150px))
      rotateY(calc(var(--d) * -24deg))
      scale(var(--zoom, 1));
  }
  .hero-split .deck-card[data-ad="3"] { opacity: 0; pointer-events: none; }
}
/* A narrower desktop: the buttons stay on one line, the download one in its short words, as on a phone. */
@media (min-width: 1000px) and (max-width: 1299px) and (orientation: landscape) { .hero-split .hero-cta .cta-long { display: none; } }
/* An upright tablet (iPad, 641px to 1099px): the stacked fan larger, using the height it has to spare (it was 190px
   wide with half the screen empty below it). */
@media (min-width: 641px) and (max-width: 1099px) and (orientation: portrait) {
  .deck-stage { --w: clamp(190px, min(30vw, 26vh), 320px); }
}