/* Polices hébergées avec le site (SIL Open Font License, licences dans
   /fonts/) : aucune requête vers un service tiers, donc pas d'adresse IP de
   visiteur transmise. Sous-ensemble latin (français, anglais, €). */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gochi Hand';
  src: url('/fonts/gochi-hand.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0f0f1a;
  --night: #0a0a12;
  --surface: #1a1a2e;
  --text: #f4f1ea;
  --muted: #a3a1b3;
  --faint: rgba(244, 241, 234, .14);
  --red: #e94560;
  --paper: #efebe2;
  --paper-ink: #17161f;
  --pen: #2340a0;
  --marker: #ffd84d;
  --display: 'Bricolage Grotesque', 'Arial Narrow', Arial, sans-serif;
  --body: 'Bricolage Grotesque', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --hand: 'Gochi Hand', 'Comic Sans MS', cursive;
  --gut: max(24px, 5vw);
  --head: 76px;
  --aspect: .7158;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 17px/1.55 var(--body);
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 96, 'wdth' 78;
  line-height: .92;
  letter-spacing: -.028em;
  text-wrap: balance;
}
h1 { font-size: clamp(52px, 6.7vw, 112px); }
h2 { font-size: clamp(42px, 5vw, 92px); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; border-radius: 4px; }
::selection { color: #fff; background: var(--red); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 16px; background: var(--text); color: var(--ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Header ------------------------------------------------------------ */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--head);
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  transition: color .35s, opacity .3s, transform .3s;
}
.header::before {
  content: '';
  position: absolute;
  inset: 0 0 -24px;
  z-index: -1;
  /* Opaque à hauteur du logo : un titre qui passe dessous ne s'y mêle pas. */
  background: linear-gradient(var(--ink) 58%, rgba(15, 15, 26, 0));
  transition: opacity .35s;
}
.header.ink { color: var(--paper-ink); }
.header.ink::before { background: linear-gradient(var(--paper) 58%, rgba(239, 235, 226, 0)); }
.brand { display: flex; align-items: center; gap: 10px; font: 700 34px/1 var(--display); font-variation-settings: 'opsz' 96, 'wdth' 85; letter-spacing: -.03em; }
.brand img { width: 31px; height: auto; }
.brand i { font-style: normal; color: var(--red); }
.header nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); font-size: 14px; font-weight: 600; }
.language { display: flex; gap: 12px; }
.language a { min-height: 44px; display: flex; align-items: center; opacity: .5; transition: opacity .2s; }
.language a[aria-current], .language a:hover { opacity: 1; }
.download-link { padding: 11px 18px; border-radius: 999px; background: var(--red); color: #fff; transition: transform .2s; }
.download-link:hover { transform: translateY(-1px); }

/* Store buttons ------------------------------------------------------ */
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 20px 0 16px;
  border-radius: 14px;
  background: var(--text);
  color: var(--ink);
  font-weight: 650;
  font-size: 15px;
  transition: transform .2s, background .2s;
}
.store:hover { transform: translateY(-2px); background: #fff; }

/* Handwriting --------------------------------------------------------- */
.hand { font-family: var(--hand); font-weight: 400; color: var(--marker); line-height: 1; letter-spacing: .01em; }
.scribble { display: block; width: 60px; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.scribble path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--w, 1)); }

/* Linear document (no script, reduced motion, short landscape) -------- */
.story { position: relative; }
.stage { position: relative; display: flex; flex-direction: column; }
.backdrop, .phone, .wall, .binder, .notif, .rig { display: none; }
.copy { padding: 14vh var(--gut) 0; max-width: 1000px; }
.copy[data-ch=hero] { order: 1; padding-top: calc(var(--head) + 12vh); }
.copy[data-ch=scan] { order: 2; }
.copy[data-ch=coll] { order: 3; }
.copy[data-ch=binder] { order: 4; }
.copy[data-ch=price] { order: 5; }
.chart { order: 6; }
.copy[data-ch=slab] { order: 7; padding-bottom: 14vh; }
.copy p { max-width: 34em; margin-top: 22px; color: var(--muted); font-size: 18px; }
.copy .sub { color: var(--text); font-size: clamp(18px, 1.5vw, 22px); }
.copy .stores { margin-top: 28px; }
.tally { display: flex; gap: 28px; font: 500 14px/1.3 var(--mono); }
.tally b { display: block; font: 700 34px/1 var(--display); font-variation-settings: 'opsz' 96, 'wdth' 80; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fallback-card { width: min(62vw, 300px); margin-top: 44px; border-radius: 4.8% / 3.4%; transform: rotate(-4deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.chart { position: relative; margin: 48px var(--gut) 0; height: 380px; max-width: 900px; color: var(--paper-ink); background: var(--paper); border-radius: 18px; padding: 24px; --draw: 1; }
.chart .price-now { position: relative; }

/* The story stage ----------------------------------------------------- */
.motion .story { height: calc((var(--story) + 1) * 100svh); }
.motion .stage {
  position: sticky;
  top: 0;
  display: block;
  height: 100svh;
  overflow: hidden;
  perspective: 1800px;
}
.motion .copy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gut);
  z-index: 25;
  width: min(36vw, 520px);
  max-width: none;
  padding: var(--head) 0 24px;
  display: flex;
  align-items: center;
  pointer-events: none;
  --in: 0;
  --out: 0;
}
.motion .copy.off .copy-in { pointer-events: none; }
.measuring .copy-in, .measuring .copy-in *, .measuring .copy .ln > span { transform: none !important; }
.motion .copy-in { pointer-events: auto; opacity: calc(1 - var(--out)); transform: translate3d(0, calc(var(--out) * -56px), 0); }
.motion .copy .ln { display: block; overflow: hidden; padding: .04em 0 .08em; margin: -.04em 0 -.08em; }
.motion .copy .ln > span {
  --k: clamp(0, calc(var(--in) * 1.7 - var(--i) * .3), 1);
  display: inline-block;
  transform: translate3d(0, calc((1 - var(--k)) * 112%), 0) rotate(calc((1 - var(--k)) * 4deg));
  transform-origin: 0 100%;
}
.motion .copy-in > :not(h1, h2) {
  --k: clamp(0, calc(var(--in) * 2 - .75), 1);
  opacity: var(--k);
  transform: translate3d(0, calc((1 - var(--k)) * 22px), 0);
}
.motion .copy[data-ch=hero] .copy-in > .hero-foot { --k: clamp(0, calc(var(--in) * 2.2 - 1.1), 1); }
.motion .fallback-card { display: none; }
@media (min-width: 860px) and (min-aspect-ratio: 9/10) {
  .motion .copy[data-ch=hero] { width: min(40vw, 620px); }
}
.motion .copy[data-ch=price] { align-items: flex-start; padding-top: calc(var(--head) + 5vh); color: var(--paper-ink); }
.motion .copy[data-ch=price] p { color: rgba(23, 22, 31, .72); }
.motion .copy[data-ch=price] .fine { color: rgba(23, 22, 31, .5); }
.hero-foot .sub { max-width: 22em; }

/* Backdrop */
.motion .backdrop { display: block; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 70% 40%, #171728 0%, var(--ink) 55%, var(--night) 100%); }
.spot {
  position: absolute;
  left: 0;
  top: 0;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  background: radial-gradient(closest-side, rgba(255, 214, 170, .15), rgba(255, 190, 150, .05) 40%, rgba(255, 190, 150, 0) 70%);
  will-change: transform;
}
.paper {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(204, 104, 52, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 104, 52, .2) 1px, transparent 1px),
    linear-gradient(rgba(204, 104, 52, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 104, 52, .09) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 10px 10px, 10px 10px;
  background-position: -1px -1px;
}
.grain {
  position: absolute;
  inset: 0;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The card rig --------------------------------------------------------- */
.motion .rig {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: var(--cw, 300px);
  height: calc(var(--cw, 300px) / var(--aspect));
  transform-origin: 50% 50%;
  perspective: calc(var(--cw, 300px) * 4.2);
  pointer-events: none;
  will-change: transform;
}
.rig-shadow {
  position: absolute;
  inset: 4% 2% -4%;
  border-radius: 12%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0));
  filter: blur(calc(var(--cw, 300px) * .03));
}
.rig-body, .card3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4.8% / 3.4%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #222;
}
.face img { width: 100%; height: 100%; object-fit: cover; }
.face.back { transform: rotateY(180deg); background: #1d3f8f url(/cards/back.webp) center / cover; }
.holo, .glare { position: absolute; inset: 0; pointer-events: none; }
.holo {
  background:
    repeating-linear-gradient(118deg, rgba(255, 90, 140, .9) 0%, rgba(255, 214, 100, .9) 5%, rgba(110, 255, 190, .9) 10%, rgba(100, 200, 255, .9) 15%, rgba(190, 130, 255, .9) 20%, rgba(255, 90, 140, .9) 25%);
  background-size: 320% 320%;
  background-position: var(--hx, 50%) var(--hy, 50%);
  mix-blend-mode: color-dodge;
  opacity: calc(var(--holo, 0) * .3);
}
.glare {
  background: radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .85), rgba(255, 255, 255, .18) 26%, rgba(0, 0, 0, .3) 95%);
  mix-blend-mode: overlay;
  opacity: calc(var(--holo, 0) * .9 + var(--flash, 0));
}
.contour { position: absolute; left: -4%; top: -2.86%; width: 108%; height: 105.72%; overflow: visible; opacity: 0; transform: translateZ(1px); }
.contour rect { fill: none; stroke: #ef4444; stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 1.5px currentColor); }
/* In its pocket, the card is under the same sleeve as its neighbours (.pocket::after). */
.sleeve {
  position: absolute;
  inset: -2% -3%;
  border-radius: 3%;
  opacity: 0;
  transform: translateZ(1px);
  background:
    linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 3%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, .12) 36%, rgba(255, 255, 255, .03) 48%, rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.tape {
  position: absolute;
  left: 30%;
  top: -4.5%;
  width: 40%;
  height: 9%;
  opacity: 0;
  background: rgba(247, 236, 204, .78);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  clip-path: polygon(0 8%, 4% 0, 8% 14%, 12% 2%, 16% 10%, 20% 0, 80% 0, 84% 12%, 88% 0, 92% 10%, 96% 2%, 100% 12%, 100% 90%, 96% 100%, 92% 86%, 88% 100%, 84% 90%, 80% 100%, 20% 100%, 16% 88%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
  transform-origin: 50% 50%;
}

/* The PSA slab, built around the card. Card box = 100% × 100%. Measured on a real
   slab: 1.27 card widths wide, 2.15 tall, the label on top. */
.slab { position: absolute; left: -13.6%; right: -13.6%; top: -41.16%; bottom: -12.88%; border-radius: calc(var(--cw, 300px) * .045); opacity: 0; }
.slab-back {
  background: linear-gradient(172deg, rgba(70, 72, 84, .6), rgba(30, 31, 38, .72));
  box-shadow: 0 calc(var(--cw, 300px) * .2) calc(var(--cw, 300px) * .34) calc(var(--cw, 300px) * -.12) rgba(0, 0, 0, .85);
}
.slab-front {
  overflow: hidden;
  background: linear-gradient(118deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .06) 92%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 0 0 calc(var(--cw, 300px) * .016) rgba(150, 154, 166, .4),
    inset 0 0 0 calc(var(--cw, 300px) * .02) rgba(255, 255, 255, .22),
    inset 0 0 calc(var(--cw, 300px) * .03) calc(var(--cw, 300px) * .02) rgba(0, 0, 0, .28);
}
.slab-front::before {
  content: '';
  position: absolute;
  left: 4.4%;
  right: 4.4%;
  top: 2.1%;
  height: 18.8%;
  border-radius: calc(var(--cw, 300px) * .018);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 0 1px rgba(0, 0, 0, .4);
}
.slab-front::after { content: ''; position: absolute; left: 3%; right: 3%; top: 23.3%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); }
.psa-well { position: absolute; left: 7.94%; right: 7.94%; top: 25.09%; bottom: 6.74%; border-radius: calc(var(--cw, 300px) * .026); box-shadow: inset 0 0 0 calc(var(--cw, 300px) * .007) rgba(18, 18, 24, .6), 0 0 0 1px rgba(255, 255, 255, .24); }
.psa-emboss { position: absolute; right: 7%; bottom: 1.7%; font: italic 900 calc(var(--cw, 300px) * .042)/1 Arial, Helvetica, sans-serif; letter-spacing: .03em; color: rgba(255, 255, 255, .16); }
.psa-label {
  position: absolute;
  left: 7.15%;
  right: 7.15%;
  top: 3.72%;
  height: 15.33%;
  padding: calc(var(--cw, 300px) * .022) calc(var(--cw, 300px) * .034);
  border: calc(var(--cw, 300px) * .024) solid #d0142c;
  border-radius: calc(var(--cw, 300px) * .008);
  background: #fbfbf7;
  color: #121212;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  column-gap: 4%;
  font: 400 calc(var(--cw, 300px) * .042)/1.16 Arial, 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: .005em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.psa-l, .psa-r { display: flex; flex-direction: column; white-space: nowrap; }
.psa-r { text-align: right; }
.psa-code {
  grid-column: 1;
  align-self: end;
  width: 44%;
  height: calc(var(--cw, 300px) * .04);
  background: linear-gradient(90deg, #121212 0 2%, transparent 2% 4%, #121212 4% 5%, transparent 5% 8%, #121212 8% 12%, transparent 12% 13%, #121212 13% 14%, transparent 14% 17%, #121212 17% 18%, transparent 18% 20%, #121212 20% 24%, transparent 24% 26%, #121212 26% 27%, transparent 27% 30%, #121212 30% 33%, transparent 33% 34%, #121212 34% 36%, transparent 36% 39%, #121212 39% 40%, transparent 40% 42%, #121212 42% 46%, transparent 46% 47%, #121212 47% 48%, transparent 48% 51%, #121212 51% 53%, transparent 53% 55%, #121212 55% 56%, transparent 56% 59%, #121212 59% 63%, transparent 63% 64%, #121212 64% 65%, transparent 65% 68%, #121212 68% 70%, transparent 70% 71%, #121212 71% 74%, transparent 74% 77%, #121212 77% 78%, transparent 78% 80%, #121212 80% 84%, transparent 84% 85%, #121212 85% 86%, transparent 86% 89%, #121212 89% 91%, transparent 91% 93%, #121212 93% 94%, transparent 94% 96%, #121212 96% 100%);
}
.psa-cert { grid-column: 2; align-self: end; text-align: right; letter-spacing: .04em; }
.psa-logo {
  position: absolute;
  left: 50%;
  bottom: calc(var(--cw, 300px) * .014);
  padding: calc(var(--cw, 300px) * .004) calc(var(--cw, 300px) * .018);
  transform: translateX(-50%);
  border-radius: calc(var(--cw, 300px) * .006);
  background: linear-gradient(#f4f5f8, #cfd4de);
  box-shadow: inset 0 0 0 1px #1c3f94;
}
.psa-logo b { display: block; font: italic 900 calc(var(--cw, 300px) * .05)/1 Arial, Helvetica, sans-serif; letter-spacing: -.02em; color: #1c3f94; }
.slab-edge {
  position: absolute;
  top: -41.16%;
  bottom: -12.88%;
  width: calc(var(--cw, 300px) * .07);
  opacity: 0;
  background: linear-gradient(90deg, rgba(160, 166, 180, .45), rgba(255, 255, 255, .7), rgba(160, 166, 180, .4));
  border-radius: 2px;
}
.slab-edge-l { left: calc(-13.6% - var(--cw, 300px) * .035); transform: rotateY(-90deg); }
.slab-edge-r { right: calc(-13.6% - var(--cw, 300px) * .035); transform: rotateY(90deg); }
.slab-sweep {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-12deg);
}
.scan-tint { position: absolute; inset: 0; background: #4ade80; opacity: calc(var(--gflash, 0) * .3); pointer-events: none; }

/* Phone ----------------------------------------------------------------- */
.motion .phone {
  display: block;
  position: absolute;
  z-index: 2;
  border-radius: 14% / 6.6%;
  background: #08080d;
  box-shadow: inset 0 0 0 1.5px #4a4a58, inset 0 0 0 4px #121218, 0 70px 120px -50px rgba(0, 0, 0, .9);
  transform-origin: 50% 46%;
  opacity: 0;
  will-change: transform, opacity;
}
.phone-screen { position: absolute; inset: var(--bezel, 12px); overflow: hidden; border-radius: 11.5% / 5.4%; background: #000; }
.island { position: absolute; top: calc(var(--bezel, 12px) + 1.6%); left: 50%; width: 29%; height: 3.3%; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 3; }

/* The app itself, drawn at iPhone size (390 pt wide) and scaled to the screen. */
.app {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: calc(var(--app-h, 844) * 1px);
  overflow: hidden;
  transform: scale(var(--app-s, 1));
  transform-origin: 0 0;
  background: #0f0f1a;
  color: #fff;
  font: 400 16px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', Inter, system-ui, sans-serif;
  letter-spacing: -.01em;
  --st: 47px;
  --sb: 34px;
  --tabh: 83px;
}
.app svg { display: block; flex: none; }
.scr { position: absolute; inset: 0; }
.app-status { position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 47px; padding: 17px 26px 0 38px; display: flex; justify-content: space-between; font-size: 16px; }
.app-status span { display: flex; gap: 6px; align-items: center; }
.tap { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 7px rgba(255, 255, 255, .16); opacity: var(--tap, 0); transform: scale(calc(1.45 - var(--tap, 0) * .45)); pointer-events: none; }

.scr-scan { background: #000; }
.scr-scan .cam {
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(45% 30% at 72% 18%, rgba(255, 200, 140, .22), rgba(255, 200, 140, 0)),
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .03) 0 2px, rgba(0, 0, 0, 0) 2px 15px),
    linear-gradient(172deg, #4a3a33, #2b2226 60%, #1a1518);
  filter: blur(2px);
}
.vf { position: absolute; left: var(--vf-x); top: var(--vf-y); width: var(--vf-w); height: var(--vf-h); border: 2.5px solid #2a2a4a; border-radius: 16px; box-shadow: 0 0 0 1400px rgba(0, 0, 0, .5); color: #3b82f6; }
.vf-fill { position: absolute; inset: 0; border-radius: 13.5px; background: currentColor; opacity: var(--fill, 0); }
.scan-chrome { position: absolute; inset: 0; }
.scan-head { position: absolute; left: 16px; right: 16px; top: calc(var(--st) + 8px); display: flex; justify-content: space-between; }
.scan-head-r { display: flex; gap: 8px; }
.round { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; background: rgba(0, 0, 0, .4); }
.modes { position: absolute; left: 50%; top: calc(var(--st) + 64px); display: flex; padding: 4px; transform: translateX(-50%); border-radius: 999px; background: rgba(0, 0, 0, .6); font-weight: 600; font-size: 15px; white-space: nowrap; }
.modes span { display: flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; color: rgba(255, 255, 255, .72); }
.modes .on { background: #e94560; color: #fff; }
.scan-btn { position: absolute; left: 50%; bottom: calc(var(--sb) + 10px); width: 72px; height: 72px; margin-left: -36px; display: grid; place-items: center; border-radius: 50%; background: #e94560; }
.scan-btn > span { grid-area: 1 / 1; }
.scan-stop { display: none; }
.app.scanning .scan-btn { background: #ef4444; }
.app.scanning .scan-idle { display: none; }
.app.scanning .scan-stop { display: block; }

.scr-card { background: #0f0f1a; transform: translate3d(calc((1 - var(--nav, 0)) * 100%), 0, 0); box-shadow: -20px 0 40px rgba(0, 0, 0, .4); }
.card-head { position: absolute; left: 0; right: 0; top: var(--st); height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1f1f35; }
.card-head b { font-size: 18px; font-weight: 600; }
.card-view { position: absolute; left: 0; right: 0; top: calc(var(--st) + 56px); bottom: var(--tabh); overflow: hidden; }
.card-scroll { padding: 16px; transform: translate3d(0, calc(var(--scroll, 0) * -1px), 0); }
.blk { margin-bottom: 16px; padding: 16px; border: 1px solid #2a2a4a; border-radius: 16px; background: #1a1a2e; }
.hero-blk { display: flex; gap: 14px; }
.hero-img { position: relative; flex: none; width: 118px; }
.hero-img img { width: 118px; height: 165px; border-radius: 6px; object-fit: cover; }
.expand { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(0, 0, 0, .55); }
.hero-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hero-info b { font-size: 25px; line-height: 1.1; font-weight: 700; }
.hero-info span { font-size: 16px; color: #e6e6ef; }
.app .muted { color: #888899; }
.pill { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #252540; font-size: 13px !important; font-weight: 600; }
.artist, .owned { display: flex; align-items: center; gap: 6px; }
.owned { display: none; color: #4ade80 !important; font-weight: 600; }
.app.added .owned { display: flex; }
.blk-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.blk-title b { font-size: 20px; font-weight: 600; }
.cm { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(233, 69, 96, .14); color: #e94560; font-size: 14px; }
.mtable { overflow: hidden; border: 1px solid #2a2a4a; border-radius: 12px; background: #16162a; }
.mrow { display: grid; grid-template-columns: 1.25fr 1fr 1.05fr; align-items: center; height: 52px; padding: 0 14px; border-top: 1px solid #2a2a4a; font-size: 16px; }
.mrow span:first-child { display: flex; align-items: center; }
.mrow span:nth-child(2) { color: #888899; }
.mrow span:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.mrow span:last-child svg { color: #e94560; }
.mhead { height: 40px; border-top: 0; background: #1f1f38; color: #888899; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.flag { width: 22px; height: 15px; margin-right: 10px; border-radius: 2px; }
.app .green { color: #4ade80; font-weight: 600; }
.btn-blue, .btn-red, .btn-grey { position: relative; height: 52px; display: grid; place-items: center; border-radius: 12px; font-size: 17px; font-weight: 600; }
.btn-blue { margin-top: 14px; background: #0f3460; }
.btn-red { background: #e94560; }
.btn-grey { border: 1px solid #2a2a4a; background: #1a1a2e; }
.seg { display: flex; padding: 4px; margin-bottom: 16px; border-radius: 12px; background: #252540; }
.seg span { flex: 1; padding: 9px; border-radius: 9px; text-align: center; color: #888899; font-weight: 600; }
.seg .on { background: #e94560; color: #fff; }
.hist-head { display: flex; justify-content: space-between; align-items: center; }
.hist-title { display: flex; align-items: center; gap: 8px; color: #e94560; }
.hist-title b { color: #fff; font-size: 17px; font-weight: 700; }
.hist-tools { display: flex; gap: 8px; }
.toggle { display: flex; overflow: hidden; border-radius: 8px; background: #252540; font-size: 13px; font-weight: 600; }
.toggle span { padding: 5px 9px; color: #888899; }
.toggle .on { background: #e94560; color: #fff; }
.range { display: flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 8px; background: #252540; font-size: 14px; }
.hist-value { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; }
.hist-value b { font-size: 22px; font-weight: 700; }
.delta { display: flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 6px; background: rgba(74, 222, 128, .15); color: #4ade80; font-size: 13px; font-weight: 600; }
.mini { display: flex; gap: 6px; height: 150px; }
.mini-y { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 18px; color: #888899; font-size: 11px; }
.mini-plot { position: relative; flex: 1; }
.mini-plot svg { display: block; width: 100%; height: calc(100% - 20px); }
.mini-x { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; color: #888899; font-size: 11px; }
.mini-x span { position: absolute; transform: translateX(-50%); }
.mini-x span:first-child { transform: none; }
.mini-x span:last-child { transform: translateX(-100%); }
.notice { margin-top: 8px; text-align: center; color: #666680; font-size: 12.5px; }
.swap { position: relative; height: var(--swap-h, 52px); }
.alt { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; }
.app[data-step=button] .alt-button, .app[data-step=form] .alt-form, .app[data-step=added] .alt-versions { visibility: inherit; }
.form-title { display: block; font-size: 16px; font-weight: 600; }
.label { display: block; margin: 14px 0 6px; font-size: 14px; font-weight: 500; }
.label em { font-style: normal; font-weight: 400; color: #888899; }
.types { display: flex; gap: 8px; }
.types span { flex: 1; padding: 14px; border: 1px solid #2a2a4a; border-radius: 8px; text-align: center; color: #888899; }
.types .on, .chip.on { border-color: #e94560; background: #e94560; color: #fff; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; padding: 8px 14px; border: 1px solid #2a2a4a; border-radius: 8px; color: #888899; font-size: 14px; }
.app.english .chip.fr { border-color: #2a2a4a; background: none; color: #888899; font-weight: 400; }
.app.english .chip.en { border-color: #e94560; background: #e94560; color: #fff; font-weight: 600; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input { display: flex; align-items: center; height: 50px; padding: 0 14px; border: 1px solid #2a2a4a; border-radius: 8px; font-size: 16px; }
.input.placeholder { color: #555566; }
.input.notes { height: 76px; align-items: flex-start; padding-top: 14px; }
.caret { width: 1.5px; height: 20px; margin-left: 1px; background: #e94560; opacity: var(--caret, 0); }
.form-buttons { display: flex; gap: 16px; margin-top: 22px; }
.form-buttons > span { flex: 1; height: 50px; }
.caps { display: block; margin: 12px 0 10px; color: #888899; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.vrow { display: flex; padding: 16px; border: 1px solid #2a2a4a; border-radius: 12px; background: #252540; }
.vinfo { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.vhead { display: flex; align-items: center; gap: 8px; }
.vbadge { padding: 3px 10px; border-radius: 6px; background: rgba(233, 69, 96, .16); color: #e94560; font-size: 14px; font-weight: 700; }
.vhead b { font-size: 17px; }
.fig { display: flex; justify-content: space-between; color: #888899; font-size: 15px; }
.fig b { color: #fff; font-weight: 600; }
.fig b.green { color: #4ade80; }
.vactions { display: flex; flex-direction: column; justify-content: center; gap: 10px; margin-left: 12px; }
.vactions span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 20px; background: #1a1a2e; color: #e94560; }
.vactions .del { background: rgba(239, 68, 68, .18); color: #ef4444; }
.toast { position: absolute; left: 16px; right: 16px; top: calc(var(--st) + 66px); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #252540; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); font-size: 15px; font-weight: 600; opacity: var(--toast, 0); transform: translate3d(0, calc((1 - var(--toast, 0)) * -60px), 0); }
.toast svg { color: #4ade80; }
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--tabh); padding-bottom: var(--sb); display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #1f1f35; background: #0f0f1a; color: #666680; }
.tab.on { color: #e94560; }
.cam-tab { width: 62px; height: 62px; margin-top: -6px; display: grid; place-items: center; border-radius: 50%; background: #e94560; color: #fff; }

/* Collection wall ------------------------------------------------------ */
.motion .wall { display: block; position: absolute; inset: 0; z-index: 3; perspective: 1500px; pointer-events: none; visibility: hidden; }
.wcard { position: absolute; left: 0; top: 0; width: var(--gw, 100px); height: calc(var(--gw, 100px) / var(--aspect)); transform-style: preserve-3d; will-change: transform; }
.wcard .face { opacity: var(--o, 0); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .8); }
.dup { position: absolute; left: 6%; top: 4%; padding: .28em .45em; border-radius: .45em; background: rgba(12, 12, 22, .82); color: #fff; font: 600 calc(var(--gw, 100px) * .1)/1 var(--mono); opacity: var(--dupes, 0); transform: scale(calc(.6 + var(--dupes, 0) * .4)); }

/* Binder ---------------------------------------------------------------
   The app's binder (components/binders/BinderSpread.tsx, BinderSpreadFaces.tsx; the
   shared link in website/binder draws the same): "classic" blue boards lined with
   suede and stitched all round, a chrome plate in the spine, thin silver rings that
   dive into the eyelets of the pages, dark pages over the pile of sheets.
   app.js writes the sizes: --pcw (a pocket), --pad, --gap, --holes (the wider margin
   on the ring side), --pgw (a page), --spine, --board and --side (how far the boards
   overhang the pages, above and below, and outside). The box is the two pages and
   the spine between them. */
.motion .binder {
  --hi: calc((var(--pad) + var(--holes)) * .42);
  --hole: max(2.5px, calc(var(--pcw) * .042));
  --eyelet: calc(var(--hole) * 1.55);
  --ring-h: max(3px, calc(var(--pcw) * .085));
  --ring-len: calc(var(--spine) + var(--hi) * 2);
  --bw: calc(var(--pgw) + var(--side));
  --thread: max(1.2px, calc(var(--board) * .07));
  display: block;
  position: absolute;
  z-index: 3;
  perspective: 2600px;
  visibility: hidden;
}
/* Phones: the eye is on the right page, the spine at the edge of the screen. The sheet
   standing up mid-turn stays under the text above, whatever the size of the page. */
.stacked .binder { transform-origin: calc(100% - var(--pgw) / 2) 50%; perspective: calc(var(--pgw) * 10); perspective-origin: calc(100% - var(--pgw) / 2) 50%; }
/* Opened flat, the inside is ONE lining from board to board across the spine: same
   colour (a vertical gradient, so no join), suede under a veil, padded edges. The
   boards slope down to the spine; its floor lies lower, with a crease at each hinge
   and a ridge catching the light. */
.binder-cover {
  position: absolute;
  inset: calc(var(--board) * -1) calc(var(--side) * -1);
  border-radius: calc(var(--board) * .6);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) calc(var(--bw) + var(--spine) * .112), rgba(255, 255, 255, .07) calc(var(--bw) + var(--spine) * .168), rgba(255, 255, 255, 0) calc(var(--bw) + var(--spine) * .272), rgba(255, 255, 255, 0) calc(var(--bw) + var(--spine) * .728), rgba(255, 255, 255, .07) calc(var(--bw) + var(--spine) * .832), rgba(255, 255, 255, 0) calc(var(--bw) + var(--spine) * .888)),
    linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) calc(var(--bw) * .1), rgba(0, 0, 0, 0) calc(var(--bw) * .86), rgba(0, 0, 0, .3) var(--bw), rgba(0, 0, 0, .46) calc(var(--bw) + var(--spine) * .072), rgba(0, 0, 0, .24) calc(var(--bw) + var(--spine) * .16), rgba(0, 0, 0, .2) calc(var(--bw) + var(--spine) * .5), rgba(0, 0, 0, .24) calc(var(--bw) + var(--spine) * .84), rgba(0, 0, 0, .46) calc(var(--bw) + var(--spine) * .928), rgba(0, 0, 0, .3) calc(var(--bw) + var(--spine)), rgba(0, 0, 0, 0) calc(var(--bw) * 1.14 + var(--spine)), rgba(0, 0, 0, 0) calc(var(--bw) * 1.9 + var(--spine)), rgba(0, 0, 0, .22)),
    linear-gradient(rgba(255, 255, 255, .07), rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, .22)),
    linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
    url(/textures/suede.webp) 0 0 / 85.333px 85.333px,
    linear-gradient(#1a237e, #0d47a1 50%, #1565c0);
  box-shadow:
    inset 0 var(--thread) 0 rgba(255, 255, 255, .2),
    inset 0 calc(var(--thread) * -1) 0 rgba(0, 0, 0, .32),
    inset var(--thread) 0 0 rgba(255, 255, 255, .08),
    inset calc(var(--thread) * -1) 0 0 rgba(0, 0, 0, .22),
    0 calc(var(--board) * 2.4) calc(var(--board) * 4) calc(var(--board) * -1.2) rgba(0, 0, 0, .75);
}
/* The stitching: an ecru thread in a groove pressed into the lining, each stitch with its shadow. */
.binder-cover::before,
.binder-cover::after {
  content: '';
  position: absolute;
  inset: calc(var(--board) * .42);
  border-radius: calc(var(--board) * .3);
  pointer-events: none;
}
.binder-cover::before {
  inset: calc(var(--board) * .42 - var(--thread) * .7);
  border: calc(var(--thread) * 2.4) solid rgba(0, 0, 0, .24);
  border-radius: calc(var(--board) * .3 + var(--thread) * .7);
}
.binder-cover::after {
  border: var(--thread) dashed rgba(238, 232, 218, .85);
  filter: drop-shadow(calc(var(--thread) * .45) calc(var(--thread) * .6) 0 rgba(0, 0, 0, .5));
}
/* The chrome plate of the mechanism, riveted to the spine. */
.binder-plate {
  position: absolute;
  top: 3.5%;
  left: calc(var(--pgw) + var(--spine) * .2);
  width: calc(var(--spine) * .6);
  height: 93%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% calc(var(--spine) * .45), #fff 0, #9a9da7 calc(var(--spine) * .07), #55575f calc(var(--spine) * .12), rgba(85, 87, 95, 0) calc(var(--spine) * .13)),
    radial-gradient(circle at 50% calc(100% - var(--spine) * .45), #fff 0, #9a9da7 calc(var(--spine) * .07), #55575f calc(var(--spine) * .12), rgba(85, 87, 95, 0) calc(var(--spine) * .13)),
    linear-gradient(90deg, #4a4c54, #b9bcc5 22%, #f5f6f9 42%, #a3a6b0 72%, #3f4148);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
/* The pile of sheets under each open page (the app's PageStack): each one shows a
   little past the one above, darker the lower it lies, its edge catching the light,
   and the pile throws a short shadow on the board. The element is the page itself
   and stays transparent: only its shadows draw, beyond the edge of the page.
   Thicker on the left, where most of the binder has been read. */
.binder-stack {
  --w: calc(var(--pcw) * .083);
  --dir: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pgw);
  height: 100%;
  border-radius: calc(var(--pad) * .5);
  box-shadow:
    calc(var(--dir) * (var(--w) * .255 - .75px)) 0 0 #0e0e14,
    calc(var(--dir) * var(--w) * .255) 0 0 rgba(255, 255, 255, .3),
    calc(var(--dir) * var(--w) * .255) 0 calc(var(--w) * .2) calc(var(--w) * -.1) rgba(0, 0, 0, .34),
    calc(var(--dir) * (var(--w) * .404 - .75px)) 0 0 #0d0d13,
    calc(var(--dir) * var(--w) * .404) 0 0 rgba(255, 255, 255, .3),
    calc(var(--dir) * var(--w) * .404) 0 calc(var(--w) * .2) calc(var(--w) * -.1) rgba(0, 0, 0, .34),
    calc(var(--dir) * (var(--w) * .614 - .75px)) 0 0 #0c0c11,
    calc(var(--dir) * var(--w) * .614) 0 0 rgba(255, 255, 255, .16),
    calc(var(--dir) * var(--w) * .614) 0 calc(var(--w) * .2) calc(var(--w) * -.1) rgba(0, 0, 0, .34),
    calc(var(--dir) * (var(--w) * .802 - .75px)) 0 0 #0b0b10,
    calc(var(--dir) * var(--w) * .802) 0 0 rgba(255, 255, 255, .16),
    calc(var(--dir) * var(--w) * .802) 0 calc(var(--w) * .2) calc(var(--w) * -.1) rgba(0, 0, 0, .34),
    calc(var(--dir) * (var(--w) - .75px)) 0 0 #0a0a0e,
    calc(var(--dir) * var(--w)) 0 0 rgba(255, 255, 255, .16),
    calc(var(--dir) * (var(--w) + var(--board) * .12)) 0 calc(var(--board) * .4) calc(var(--board) * -.08) rgba(0, 0, 0, .42);
}
.binder-stack-r { --w: calc(var(--pcw) * .062); --dir: 1; left: auto; right: 0; }
/* A page of pockets, black as in the app; the wider margin is on the side of the rings. */
.page {
  --to-out: 90deg;
  --hx: var(--hi);
  position: absolute;
  top: 0;
  width: var(--pgw);
  height: 100%;
  padding: var(--pad) var(--pad) var(--pad) calc(var(--pad) + var(--holes));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--gap);
  border-radius: calc(var(--pad) * .5);
  background: linear-gradient(158deg, #1d1d27, #111118);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.page-left, .leaf-back { --to-out: 270deg; --hx: calc(100% - var(--hi)); padding: var(--pad) calc(var(--pad) + var(--holes)) var(--pad) var(--pad); }
.page-left { left: 0; }
.page-right { right: 0; }
/* Reinforced holes for the rings (the eyelet around, the hole in the middle), and the shade of the binding. */
.page::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--hx) 25%, #06060a var(--hole), rgba(255, 255, 255, .07) 0 calc(var(--eyelet) * .86), rgba(255, 255, 255, .18) 0 var(--eyelet), rgba(255, 255, 255, 0) 0),
    radial-gradient(circle at var(--hx) 50%, #06060a var(--hole), rgba(255, 255, 255, .07) 0 calc(var(--eyelet) * .86), rgba(255, 255, 255, .18) 0 var(--eyelet), rgba(255, 255, 255, 0) 0),
    radial-gradient(circle at var(--hx) 75%, #06060a var(--hole), rgba(255, 255, 255, .07) 0 calc(var(--eyelet) * .86), rgba(255, 255, 255, .18) 0 var(--eyelet), rgba(255, 255, 255, 0) 0),
    linear-gradient(var(--to-out), rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) calc(var(--pad) * 1.8));
}
/* The rings: a thin silver wire from the holes of one page, over the spine, to the
   holes of the other. Round in section (light above, shade below), brighter at the
   top of the arc, its ends darkening into the holes. Above the pages lying flat,
   under the sheet that turns, which carries its own ends (.ring-ends). */
.binder-rings { position: absolute; top: 0; bottom: 0; left: calc(var(--pgw) - var(--hi)); width: var(--ring-len); pointer-events: none; }
.binder-rings i, .ring-ends b {
  position: absolute;
  top: calc(var(--at) - var(--ring-h) / 2);
  left: 0;
  width: var(--ring-len);
  height: var(--ring-h);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .04) 20%, rgba(255, 255, 255, .28) 50%, rgba(0, 0, 0, .04) 80%, rgba(0, 0, 0, .55)),
    linear-gradient(#5e616b, #fbfcff 30%, #d4d7df 50%, #7d808b 76%, #3b3d45);
  box-shadow: .5px 2.5px 2.5px rgba(0, 0, 0, .55);
}
.binder-rings i:nth-child(1), .ring-ends b:nth-child(1) { --at: 25%; }
.binder-rings i:nth-child(2), .ring-ends b:nth-child(2) { --at: 50%; }
.binder-rings i:nth-child(3), .ring-ends b:nth-child(3) { --at: 75%; }
/* On the turning sheet, the wire from its edge to its holes: it turns with it. */
.ring-ends { position: absolute; top: 0; bottom: 0; left: 0; width: var(--hi); overflow: hidden; pointer-events: none; }
.ring-ends b { left: auto; right: 0; }
.leaf-back .ring-ends { left: auto; right: 0; }
.leaf-back .ring-ends b { left: 0; right: auto; }
.leaf { position: absolute; top: 0; right: 0; width: var(--pgw); height: 100%; transform-origin: calc(var(--spine, 0px) * -.5) 50%; transform-style: preserve-3d; }
.leaf .page { inset: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf-back { transform: rotateY(180deg); }
.leaf-shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .3)); opacity: 0; pointer-events: none; }
.leaf-back .leaf-shade { transform: scaleX(-1); }
/* A sleeved pocket: the plastic shows by its seam, a bright top edge and a diagonal glare. */
.pocket { position: relative; border-radius: 3px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pocket img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4.8% / 3.4%; object-fit: cover; }
.pocket::after {
  content: '';
  position: absolute;
  inset: -2% -3%;
  border-radius: 3%;
  background:
    linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 3%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, .12) 36%, rgba(255, 255, 255, .03) 48%, rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  pointer-events: none;
}
/* The pocket the card drops into, empty until then. */
.lead-pocket { background: rgba(0, 0, 0, .2); }
/* A card of the set not owned yet: dimmed, under its number. */
.pocket.missing img { opacity: .28; }
.pocket .num { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; font: 600 calc(var(--pcw) * .12)/1 Inter, var(--body); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .72); }
/* The variant badge of an owned card (N: normal print), top right, under the sleeve. */
.vb { position: absolute; top: 1.5%; right: 2%; width: 17.6%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #4ade80; color: #fff; font: 700 calc(var(--pcw) * .088)/1 Inter, var(--body); }
/* The travelling card gets its own once it is in its pocket. */
.rig-vb { font: 700 calc(var(--cw, 300px) * .088)/1 Inter, var(--body); opacity: var(--b, 0); transform: scale(calc(.6 + var(--b, 0) * .4)); }
/* The folio, under the binder as in the app: under the spread, or under the page on phones. */
.binder-pageno { position: absolute; left: 0; right: 0; top: calc(100% + var(--board) + 14px); text-align: center; font: 500 12px/1 var(--mono); color: var(--muted); letter-spacing: .04em; }
.stacked .binder-pageno { left: calc(100% - var(--pgw)); }

/* Price chart ---------------------------------------------------------- */
.motion .chart { position: absolute; z-index: 3; margin: 0; padding: 0; height: auto; max-width: none; background: none; border-radius: 0; opacity: 0; visibility: hidden; }
.price-now { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 22px; }
.price-value { font: 700 clamp(46px, 6.4vw, 118px)/.86 var(--display); font-variation-settings: 'opsz' 96, 'wdth' 78; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.price-meta { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; font: 500 13px/1.2 var(--mono); }
.price-date { opacity: .6; }
.price-delta { color: #13854a; font-weight: 600; }
.motion .price-delta { opacity: 0; }
.plot { position: absolute; left: 50px; right: 6px; top: var(--plot-top, 140px); bottom: 58px; }
.chart:not(.motion *) .plot { top: 120px; left: 70px; right: 24px; bottom: 70px; }
.plot-draw { position: absolute; inset: 0; clip-path: inset(-20px calc((1 - var(--draw, 0)) * 100%) -20px -20px); }
.plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.plot .line { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.plot .area { fill: rgba(233, 69, 96, .1); }
.yticks span { position: absolute; left: -50px; transform: translateY(-50%); font: 500 11px/1 var(--mono); opacity: .5; }
.months { position: absolute; left: 0; right: 0; bottom: -24px; height: 14px; }
.months span { position: absolute; transform: translateX(-50%); font: 500 11px/1 var(--mono); opacity: .5; }
.threshold { position: absolute; right: 0; border-top: 1.6px dashed rgba(35, 64, 160, .6); }
.threshold::before { content: ''; position: absolute; left: -1px; top: -7px; height: 13px; border-left: 1.6px solid rgba(35, 64, 160, .6); }
.threshold .hand { position: absolute; left: 8px; top: 6px; font-size: 22px; color: var(--pen); white-space: nowrap; }
.chart .hand { color: var(--pen); }
.ann { position: absolute; display: flex; font-size: 22px; white-space: nowrap; opacity: 0; }
.chart:not(.motion *) .ann { opacity: 1; }
.ann .scribble { width: 54px; }
.ann-peak { align-items: flex-end; transform: translate(14px, -100%); flex-direction: row-reverse; }
.ann-peak .scribble { transform: scaleX(-1) rotate(8deg); margin-bottom: -18px; }
.ann-dip { align-items: flex-end; flex-direction: column; transform: translate(-100%, 8px); }
.ann-dip .scribble { transform: scaleX(-1); width: 36px; margin-right: -12px; }
.chart-cross { position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px dashed rgba(23, 22, 31, .35); opacity: 0; }
.chart-dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px rgba(233, 69, 96, .2); opacity: 0; }
.chart figcaption { position: absolute; left: 50px; right: 0; bottom: 0; font: 500 11px/1.3 var(--mono); opacity: .55; }
.chart:not(.motion *) figcaption { left: 24px; bottom: 18px; }
.motion .notif {
  display: flex;
  position: fixed;
  right: 14px;
  top: 12px;
  z-index: 60;
  width: min(380px, calc(100vw - 32px));
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(26, 26, 46, .96);
  color: var(--text);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
}
.notif img { width: 34px; height: 34px; border-radius: 9px; background: var(--ink); padding: 5px; }
.notif b { display: block; font-weight: 700; }
.notif span { color: var(--muted); }
.notif time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }



/* Screens -------------------------------------------------------------- */
.screens { padding: 20vh 0 16vh; background: var(--ink); overflow: hidden; position: relative; }
.screens-head { padding: 0 var(--gut); max-width: 980px; }
.screens-head p { margin-top: 20px; max-width: 32em; color: var(--muted); font-size: 18px; }
.rail { margin-top: 64px; padding: 10px var(--gut) 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-in { display: flex; gap: clamp(16px, 2vw, 34px); width: max-content; }
.motion.wide .rail { overflow: visible; }
.motion.wide .rail-in { transform: translate3d(var(--rail-x, 0), 0, 0); will-change: transform; }
.shot { width: clamp(190px, 17vw, 270px); scroll-snap-align: start; }
.shot:nth-child(even) { margin-top: 48px; }
.shot-frame { padding: 7px; border-radius: 34px; background: #1d1d29; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 70px -40px rgba(0, 0, 0, .9); }
.shot-frame img { border-radius: 27px; }
.shot figcaption { margin-top: 16px; font: 500 13px/1.3 var(--mono); color: var(--muted); }

/* Call to install ---------------------------------------------------- */
.cta { position: relative; overflow: hidden; padding: 22vh var(--gut) 30vh; background: var(--ink); text-align: center; }
.cta-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta h2 { max-width: 15em; font-size: clamp(40px, 5.4vw, 88px); text-wrap: balance; }
.cta p { margin-top: 26px; max-width: 30em; color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); }
.cta-stores { justify-content: center; margin-top: 40px; }
/* The name, outlined, sinking into the bottom of the section. */
.wordmark { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; text-align: center; pointer-events: none; }
.wordmark span {
  display: block;
  font: 800 30vw/.78 var(--display);
  font-variation-settings: 'opsz' 96, 'wdth' 75;
  letter-spacing: -.055em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(233, 69, 96, .4);
  margin-bottom: -9vw;
}

/* Questions ------------------------------------------------------------ */
.faq {
  padding: 16vh var(--gut) 18vh;
  color: var(--paper-ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(204, 104, 52, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 104, 52, .16) 1px, transparent 1px),
    linear-gradient(rgba(204, 104, 52, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 104, 52, .07) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 10px 10px, 10px 10px;
}
/* Title on the left, questions on the right; one column on phones. */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.faq h2 { max-width: 8em; }
.faq-list { max-width: 880px; border-top: 2px solid var(--paper-ink); }
.faq-item { border-bottom: 1px solid rgba(23, 22, 31, .18); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 22px 0;
  font: 700 clamp(20px, 1.9vw, 26px)/1.2 var(--display);
  font-variation-settings: 'opsz' 96, 'wdth' 88;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus. */
.faq-item summary::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
.faq-item[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.faq-item summary:hover { color: var(--red); }
.faq-item p { max-width: 42em; padding: 0 0 24px; font-size: 17px; line-height: 1.6; opacity: .78; }

/* Footer --------------------------------------------------------------- */
.footer { padding: 64px var(--gut) 40px; background: var(--night); color: var(--muted); font-size: 14px; }
.footer-top, .footer-links, .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 28px; }
.footer .brand { color: var(--text); }
.footer-social, .footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer-links { justify-content: flex-start; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--faint); }
.footer a:hover { color: var(--text); }
.motion-toggle { margin-left: auto; padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { margin-top: 24px; font-size: 12.5px; line-height: 1.55; }
.footer-bottom p:last-child { max-width: 70em; }

/* Stacked layout (phones, portrait tablets) --------------------------- */
@media (max-width: 859px), (max-aspect-ratio: 9/10) {
  :root { --head: 62px; --gut: 18px; }
  body { font-size: 16px; }
  h1 { font-size: clamp(44px, 12.4vw, 84px); }
  h2 { font-size: clamp(34px, 9.4vw, 64px); }
  .brand { gap: 8px; font-size: 29px; }
  .brand img { width: 26px; }
  .header nav { gap: 14px; font-size: 13px; }
  .download-link { padding: 9px 14px; }
  .motion .copy { left: var(--gut); right: var(--gut); width: auto; top: 0; bottom: auto; display: block; padding: calc(var(--head) + 6px) 0 0; }
  .motion .copy p { margin-top: 12px; font-size: 15.5px; line-height: 1.45; }
  .motion .copy[data-ch=hero] { bottom: 0; display: flex; align-items: stretch; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .motion .copy[data-ch=hero] .copy-in { display: flex; flex-direction: column; justify-content: space-between; width: 100%; }
  .motion .copy[data-ch=hero] .sub { margin-top: 0; font-size: 17px; }
  .motion .copy[data-ch=price] { padding-top: calc(var(--head) + 6px); }
  .copy .stores { margin-top: 16px; }
  .store { height: 46px; padding: 0 16px 0 13px; font-size: 14px; }
  .tally { margin-top: 12px !important; gap: 22px; }
  .tally b { font-size: 26px; }
  .motion .copy .tally { font-size: 12px; }
  .price-now { flex-direction: column; align-items: flex-start; gap: 8px; }
  .price-value { font-size: clamp(38px, 11vw, 64px); }
  .price-meta { font-size: 11.5px; padding-bottom: 0; }
  .plot { left: 42px; bottom: 50px; }
  .yticks span { left: -42px; }
  .chart figcaption { left: 0; }
  .ann, .threshold .hand { font-size: 17px; }
  .ann .scribble { width: 40px; }
  .motion .notif { left: 10px; right: 10px; width: auto; top: max(10px, env(safe-area-inset-top)); }
  .screens { padding-top: 14vh; }
  .shot { width: 62vw; }
  .shot:nth-child(even) { margin-top: 0; }
  .cta { padding: 16vh var(--gut) 24vh; }
  .faq { grid-template-columns: 1fr; gap: 36px; }
  .faq-item p { font-size: 16px; }
  .motion-toggle { margin-left: 0; }
}
@media (max-width: 380px) {
  .language { display: none; }
}