/* 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); }
.sleeve {
  position: absolute;
  inset: -2.2% -3%;
  border-radius: 3%;
  opacity: 0;
  transform: translateZ(1px);
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, .2) 36%, rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, 0) 60%), rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.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 --------------------------------------------------------------- */
.motion .binder { display: block; position: absolute; z-index: 3; perspective: 2600px; visibility: hidden; }
.binder-cover {
  position: absolute;
  inset: calc(var(--pad) * -1.9) calc(var(--pad) * -1.9) calc(var(--pad) * -1.9);
  border-radius: calc(var(--pad) * 1.4);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #8f2236, #5e1322);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 calc(var(--pad) * .5) rgba(0, 0, 0, .12), 0 60px 120px -40px rgba(0, 0, 0, .9);
}
.binder-cover::after {
  content: '';
  position: absolute;
  inset: calc(var(--pad) * .55);
  border-radius: calc(var(--pad) * 1);
  border: 1.5px dashed rgba(255, 210, 200, .28);
}
.binder-rings {
  position: absolute;
  left: 50%;
  top: 6%;
  bottom: 6%;
  width: calc(var(--pad) * 2.2);
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, #d9dce4, #8a8f9c 70%, rgba(0, 0, 0, 0) 72%) 50% 12% / 100% 16% no-repeat,
    radial-gradient(closest-side, #d9dce4, #8a8f9c 70%, rgba(0, 0, 0, 0) 72%) 50% 50% / 100% 16% no-repeat,
    radial-gradient(closest-side, #d9dce4, #8a8f9c 70%, rgba(0, 0, 0, 0) 72%) 50% 88% / 100% 16% no-repeat;
  opacity: .9;
}
.page {
  position: absolute;
  top: 0;
  width: var(--pgw);
  height: 100%;
  padding: var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--gap);
  border-radius: calc(var(--pad) * .6);
  background: linear-gradient(160deg, #1b1b25, #111118);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 2px 10px rgba(0, 0, 0, .4);
}
.page-left { left: 0; }
.page-right { right: 0; }
.stacked .page-left, .stacked .binder-rings { display: none; }
.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)); opacity: 0; pointer-events: none; }
.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(118deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, .13) 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;
}
.pocket.missing img { filter: grayscale(1) brightness(.8); opacity: .3; }
.pocket .num { display: none; }
.pocket.missing .num { display: block; position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; font: 500 calc(var(--pcw) * .1)/1 var(--mono); color: rgba(255, 255, 255, .6); }
.binder-pageno { position: absolute; right: 0; bottom: calc(var(--pad) * -1.9 - 26px); font: 500 12px/1 var(--mono); color: var(--muted); letter-spacing: .04em; }

/* 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; }
}