/*
  Jellybeam landing.
  Source of truth: handoff "Jellybeam Landing v3 -export-" (desktop frames 1440 wide, phone frames 390 wide).
  Every measurement is in design pixels multiplied by --u, so a frame renders at the design's exact
  proportions at any viewport, with no reflow between sizes. Colour tokens follow docs/brand.md §3.
*/

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  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: 'Martian Mono';
  src: url('../fonts/martian-mono-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  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 {
  --notte: #14100D;
  --surface: #1D1814;
  --hairline: #322A22;
  --panna: #F7E9CE;
  --panna2: #C9C0B2;
  --grigio: #8C8478;
  --pistacchio: #A8CB6B;
  --sheen: #C6DE9B;
  --bezel: #0B0908;
  --field-far: #241D18;
  --field-near: #3A3128;

  /* Desktop: fit the 1440×900 frame to the viewport, never smaller than 0.8 on height, never larger than 1.25. */
  --u: min(100vw / 1440, max(100vh / 900, 0.8px), 1.25px);
  --fw: 1440;
  --mono-min: 8.5px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
@media (max-width: 1023px) {
  :root {
    --u: min(100vw / 390, 1.6px);
    --fw: 390;
    --mono-min: 0px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--notte); overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html[data-motion="reduced"] { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--notte);
  color: var(--panna);
  font-family: 'Archivo', system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, canvas, svg { display: block; }
a { color: var(--pistacchio); }
a:hover { color: var(--sheen); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--pistacchio); outline-offset: 4px; border-radius: 2px; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--pistacchio); color: var(--notte);
  font-weight: 800; text-decoration: none;
}
.skip:focus { top: 16px; }

/* Desktop shows .d-only, phone shows .p-only. */
.p-only { display: none !important; }
@media (max-width: 1023px) {
  .d-only { display: none !important; }
  .p-only { display: revert !important; }
}

/* ---------- Type primitives ---------- */

.mono {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: max(var(--mono-min), calc(var(--fs, 11) * var(--u)));
  text-decoration: none;
}
.c-panna { color: var(--panna); }
.c-panna2 { color: var(--panna2); }
.c-grigio { color: var(--grigio); }
.c-pistacchio { color: var(--pistacchio); }

.h2 {
  font-weight: 900;
  font-size: calc(var(--fs) * var(--u));
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--panna);
  text-wrap: balance;
}
.lede {
  font-size: calc(var(--fs, 20) * var(--u));
  line-height: 1.5;
  color: var(--panna2);
  text-wrap: pretty;
}

/* ---------- Scene frame ---------- */

.scene {
  --h: 900;
  position: relative;
  height: calc(var(--h) * var(--u));
  overflow: hidden;
  background: var(--notte);
}
.frame {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  width: calc(var(--fw) * var(--u));
  margin: 0 auto;
}
@media (max-width: 1023px) {
  .scene { --h: 844; }
}

.corners i {
  position: absolute; z-index: 3;
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
  border: 0 solid var(--grigio);
}
.corners i:nth-child(1) { left: calc(24 * var(--u)); top: calc(24 * var(--u)); border-left-width: 1px; border-top-width: 1px; }
.corners i:nth-child(2) { left: calc(24 * var(--u)); bottom: calc(24 * var(--u)); border-left-width: 1px; border-bottom-width: 1px; }
.corners i:nth-child(3) { right: calc(24 * var(--u)); top: calc(24 * var(--u)); border-right-width: 1px; border-top-width: 1px; }
.corners i:nth-child(4) { right: calc(24 * var(--u)); bottom: calc(24 * var(--u)); border-right-width: 1px; border-bottom-width: 1px; }

.scene-tag {
  position: absolute; z-index: 4;
  left: calc(40 * var(--u)); right: calc(40 * var(--u)); top: calc(30 * var(--u));
  display: flex; justify-content: space-between;
}

@media (max-width: 1023px) {
  .corners i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
  .corners i:nth-child(1) { left: calc(12 * var(--u)); top: calc(12 * var(--u)); }
  .corners i:nth-child(2) { left: calc(12 * var(--u)); bottom: calc(12 * var(--u)); }
  .corners i:nth-child(3) { right: calc(12 * var(--u)); top: calc(12 * var(--u)); }
  .corners i:nth-child(4) { right: calc(12 * var(--u)); bottom: calc(12 * var(--u)); }
  .scene-tag { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(22 * var(--u)); }
  .scene-tag .mono { --fs: 9; }
}

/* ---------- Buttons ---------- */

.btn-row { display: flex; gap: calc(12 * var(--u)); align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; white-space: nowrap;
  height: calc(56.1 * var(--u));
  padding: 0 calc(28.9 * var(--u));
  border-radius: 999px;
  font-weight: 800;
  font-size: calc(17 * var(--u));
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--pistacchio); color: var(--notte); }
.btn--primary:hover { background: var(--sheen); color: var(--notte); }
.btn--ghost { background: var(--notte); color: var(--panna); border: 1px solid var(--grigio); }
.btn--ghost:hover { border-color: var(--panna); color: var(--panna); }
@media (max-width: 1023px) {
  .btn { height: calc(52.8 * var(--u)); padding: 0 calc(27.2 * var(--u)); font-size: calc(16 * var(--u)); }
}

/* ---------- TV frame + video placeholder ---------- */

.tv-group {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: calc(var(--tw) * var(--u));
  padding-top: calc(var(--pt) * var(--u));
}
.tv-group__mascot { position: absolute; top: 0; height: auto; width: calc(var(--mw) * var(--u)); }
.tv {
  width: 100%;
  padding: calc(10 * var(--u));
  background: var(--bezel);
  border: 1px solid var(--hairline);
  border-radius: calc(16 * var(--u));
}
.tv__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border-radius: calc(5 * var(--u));
  overflow: hidden;
}
.tv__still, .tv__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.tv__video {
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.tv__video.is-ready { opacity: 1; }
.tv__stand {
  width: calc(var(--sw) * var(--u)); height: calc(10 * var(--u));
  background: var(--bezel);
  border: 1px solid var(--hairline); border-top: 0;
  border-radius: 0 0 calc(4 * var(--u)) calc(4 * var(--u));
}
@media (max-width: 1023px) {
  .tv-group { --tw: 350 !important; --sw: 49 !important; }
  .tv { padding: calc(6 * var(--u)); border-radius: calc(10 * var(--u)); }
  .tv__stand { height: calc(5 * var(--u)); }
}

/* =========================================================
   01 · HERO
   ========================================================= */

.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.hero-bar {
  position: absolute; z-index: 4;
  left: calc(40 * var(--u)); right: calc(40 * var(--u)); top: calc(28 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
}
.hero-bar__id { display: flex; gap: calc(28 * var(--u)); align-items: center; }
.hero-nav { display: flex; gap: calc(28 * var(--u)); }
.hero-nav a { color: var(--panna2); transition: color .15s ease; }
.hero-nav a:hover { color: var(--pistacchio); }
.hero-bar__live { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--pistacchio); flex-shrink: 0; }

.hero-mascot {
  position: absolute; z-index: 2;
  right: calc(30 * var(--u)); top: calc(150 * var(--u));
  width: calc(620 * var(--u));
  transform-origin: 50% 60%;
  transform: translate(calc(var(--hs, 0) * 760 * var(--u)), calc(var(--hs, 0) * -60 * var(--u))) scale(calc(1 + var(--hs, 0) * 0.75));
  will-change: transform;
}
.hero-mascot img { width: 100%; height: auto; transform-origin: 50% 100%; }

.callout {
  position: absolute; z-index: 4;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  opacity: calc(1 - var(--hs, 0) * 4);
  transition: visibility 0s linear 0s;
}
.callout__pin {
  position: absolute;
  left: calc(-6 * var(--u)); top: calc(-6 * var(--u));
  width: calc(12 * var(--u)); height: calc(12 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--pistacchio);
  background: var(--notte);
}
.callout__stem { position: absolute; left: -0.5px; width: 1px; background: var(--pistacchio); }
.callout__body {
  position: absolute; left: -1px;
  display: flex; flex-direction: column; gap: calc(4 * var(--u));
}
.callout__body .mono { white-space: nowrap; }
.callout__body span:last-child { font-size: calc(14 * var(--u)); line-height: 1.35; color: var(--panna2); }
.callout--up .callout__stem { top: calc(-76 * var(--u)); height: calc(70 * var(--u)); }
.callout--up .callout__body { bottom: calc(84 * var(--u)); width: calc(230 * var(--u)); }
.callout--down .callout__stem { top: calc(6 * var(--u)); height: calc(90 * var(--u)); }
.callout--down .callout__body { top: calc(104 * var(--u)); width: calc(200 * var(--u)); }
html[data-motion="reduced"] .callout { opacity: 1; visibility: visible; }

.hero-copy {
  position: absolute; z-index: 3;
  left: calc(64 * var(--u)); top: calc(96 * var(--u));
  display: flex; flex-direction: column; gap: calc(22 * var(--u));
}
.hero { --h: 680; }
/* Wordmark as a logo: about 40 design px tall above the headline. */
.wordmark { position: relative; width: calc(123 * var(--u)); aspect-ratio: 1142 / 372; }
.wordmark img { width: 100%; height: auto; }
.rays { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rays line { stroke: var(--pistacchio); stroke-width: 26; stroke-linecap: round; }

.hero-title {
  /* Scales with the window; 16ch is the narrowest measure that still sets it in three lines. */
  max-width: 16ch;
  font-weight: 900;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.05em;
  color: var(--panna);
}
.hero-title .c-pistacchio { white-space: nowrap; } /* keep "the spinner." together, as in the design */
.hero-lede {
  width: calc(560 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.5;
  color: var(--panna2);
  text-wrap: pretty;
}

.hero-stats {
  position: absolute; z-index: 3;
  left: calc(64 * var(--u)); bottom: calc(40 * var(--u));
  display: flex; gap: calc(44 * var(--u));
}
.hero-stats li { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.hero-stats strong { font-weight: 800; font-size: calc(26 * var(--u)); letter-spacing: -0.03em; line-height: 1; color: var(--panna); }
.hero-stats .mono { --fs: 10; color: var(--grigio); }

.hero-hint {
  position: absolute; z-index: 3;
  left: 50%; bottom: calc(44 * var(--u));
  transform: translateX(-50%);
  display: flex; gap: calc(14 * var(--u));
  white-space: nowrap;
}
.hero-hint .mono { --fs: 10; }

@media (max-width: 1023px) {
  .hero-bar { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(20 * var(--u)); }
  .hero-bar .mono { --fs: 9; }
  .hero-bar__live { gap: calc(6 * var(--u)); }
  .hero-bar__live .dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
  .hero-mascot {
    right: auto; left: 50%; top: calc(70 * var(--u));
    width: calc(330 * var(--u));
    translate: -46% 0;
    transform: translate(calc(var(--hs, 0) * 300 * var(--u)), calc(var(--hs, 0) * -30 * var(--u))) scale(calc(1 + var(--hs, 0) * 0.6));
  }
  .hero { --h: 844; }
  .hero-copy { left: calc(22 * var(--u)); top: calc(270 * var(--u)); gap: calc(18 * var(--u)); width: calc(346 * var(--u)); }
  .wordmark { width: calc(220 * var(--u)); }
  .hero-title { max-width: none; font-size: calc(46 * var(--u)); }
  .hero-title .c-pistacchio { white-space: normal; }
  .hero-lede { width: auto; font-size: calc(15 * var(--u)); }
  .hero-copy .btn-row { align-self: stretch; }
  .hero-copy .btn--primary { flex: 1; }
  .hero-stats { left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: calc(26 * var(--u)); justify-content: space-between; gap: 0; }
  .hero-stats strong { font-size: calc(19 * var(--u)); }
  .hero-stats .mono { --fs: 8; }
}

/* =========================================================
   Feature points (02 desktop grid, 03 proof points; phone: dotted list)
   ========================================================= */

.points li {
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  padding-top: calc(18 * var(--u));
  border-top: 1px solid var(--hairline);
}
.points li.is-accent { border-top: 2px solid var(--pistacchio); }
.points strong { color: var(--panna); }
.points li > span { color: var(--panna2); text-wrap: pretty; }

@media (max-width: 1023px) {
  .points { display: flex !important; flex-direction: column; gap: 0 !important; }
  /* Dot, headline, and the description underneath it. */
  .points li, .points li.is-accent {
    display: grid; grid-template-columns: calc(7 * var(--u)) minmax(0, 1fr);
    column-gap: calc(10 * var(--u)); row-gap: calc(4 * var(--u)); align-items: center;
    padding: calc(12 * var(--u)) 0;
    border-top: 1px solid var(--hairline);
  }
  .points li::before { content: ''; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--pistacchio); grid-row: 1; }
  .points li > strong, .points li > span { grid-column: 2; }
  .points strong { font-weight: 700 !important; font-size: calc(15 * var(--u)) !important; letter-spacing: 0 !important; line-height: normal !important; }
  .points li > span { font-size: calc(14 * var(--u)) !important; line-height: 1.45 !important; }
}

/* =========================================================
   02 · INSTANT
   ========================================================= */

.instant { --h: 1000; }
.instant-copy {
  position: absolute; z-index: 2;
  left: calc(64 * var(--u)); top: calc(150 * var(--u));
  display: flex; flex-direction: column; gap: calc(30 * var(--u));
}
.instant-copy .h2 { --fs: 112; width: calc(560 * var(--u)); }
.instant-copy .lede { width: calc(470 * var(--u)); }

.instant-tv {
  --tw: 700; --pt: 110; --mw: 200; --sw: 98;
  left: calc(680 * var(--u)); top: calc(160 * var(--u));
  opacity: var(--a, 1);
  transform: translateY(calc((1 - var(--a, 1)) * 180 * var(--u)));
}
.instant-tv .tv-group__mascot {
  left: calc(60 * var(--u));
  opacity: min(1, calc(var(--b, 1) * 3));
  transform: translateY(calc((1 - var(--b, 1)) * -260 * var(--u))) rotate(calc((1 - var(--b, 1)) * -10deg));
}

.instant-points {
  position: absolute; z-index: 2;
  left: calc(64 * var(--u)); right: calc(64 * var(--u)); bottom: calc(52 * var(--u));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(28 * var(--u));
}
.instant-points strong { font-weight: 800; font-size: calc(20 * var(--u)); letter-spacing: -0.02em; }
.instant-points li > span { font-size: calc(15 * var(--u)); line-height: 1.45; text-wrap: wrap; }

@media (max-width: 1023px) {
  .instant { --h: 990; }
  .instant-copy { left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(70 * var(--u)); gap: calc(18 * var(--u)); }
  .instant-copy .h2 { --fs: 56; width: auto; }
  .instant-copy .lede { --fs: 16; width: auto; }
  .instant-tv { --pt: 64; --mw: 110; left: calc(20 * var(--u)); top: calc(300 * var(--u)); }
  .instant-tv .tv-group__mascot { left: calc(30 * var(--u)); }
  .instant-points { left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: calc(22 * var(--u)); }
}

/* =========================================================
   03 · FULL QUALITY
   ========================================================= */

.quality-tv {
  --tw: 720; --pt: 118; --mw: 180; --sw: 101;
  left: calc(64 * var(--u)); top: calc(90 * var(--u));
  opacity: var(--a, 1);
  transform: translateX(calc((1 - var(--a, 1)) * -480 * var(--u)));
}
.quality-tv .tv-group__mascot {
  right: calc(100 * var(--u));
  opacity: min(1, calc(var(--b, 1) * 3));
  transform: translateY(calc((1 - var(--b, 1)) * -220 * var(--u)));
}

.quality-copy {
  position: absolute; z-index: 2;
  left: calc(870 * var(--u)); top: calc(104 * var(--u));
  display: flex; flex-direction: column; gap: calc(20 * var(--u));
}
.quality-copy .h2 { --fs: 72; width: calc(510 * var(--u)); }
.quality-copy .lede { --fs: 19; width: calc(480 * var(--u)); }

.proof {
  position: absolute; z-index: 2;
  left: calc(64 * var(--u)); right: calc(64 * var(--u)); bottom: calc(48 * var(--u));
  display: flex; flex-direction: column; gap: calc(20 * var(--u));
}
.proof-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(40 * var(--u)); }
.proof-points li { gap: calc(10 * var(--u)); }
.proof-points strong { font-weight: 900; font-size: calc(30 * var(--u)); line-height: 1; letter-spacing: -0.04em; }
.proof-points li > span { font-size: calc(15 * var(--u)); line-height: 1.5; }
.proof__note { color: var(--grigio); }

/* The three proof points rise in one after another as the TV settles. */
.js[data-motion="full"] .proof-points li {
  opacity: 0;
  transform: translateY(calc(36 * var(--u)));
  transition: opacity .5s ease, transform .7s var(--ease-out);
}
.js[data-motion="full"] .proof-points li:nth-child(2) { transition-delay: .12s; }
.js[data-motion="full"] .proof-points li:nth-child(3) { transition-delay: .24s; }
.js[data-motion="full"] .proof.is-in .proof-points li { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  .quality { --h: 980; }
  .quality-tv { --pt: 74; --mw: 110; left: calc(20 * var(--u)); top: calc(290 * var(--u)); }
  .quality-tv .tv-group__mascot { right: calc(50 * var(--u)); }
  .quality-copy { left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(70 * var(--u)); gap: calc(18 * var(--u)); }
  .quality-copy .h2 { --fs: 44; width: auto; }
  .quality-copy .lede { --fs: 16; width: auto; }
  .proof { left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: calc(26 * var(--u)); gap: calc(12 * var(--u)); }
  .proof-points li { row-gap: calc(4 * var(--u)); }
}

/* =========================================================
   04 · REQUEST
   ========================================================= */

.floor {
  position: absolute; z-index: 1;
  left: calc(520 * var(--u)); top: calc(-160 * var(--u));
  width: calc(1300 * var(--u));
  transform: perspective(calc(1400 * var(--u))) rotateX(48deg) rotateZ(-24deg);
}
.floor__plane { --slide: calc((0.5 - var(--p, 0.5)) * 300 * var(--u)); transform: translateX(var(--slide)); will-change: transform; }
.floor__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: calc(22 * var(--u)); }
.floor__grid i {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: calc(8 * var(--u));
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.floor__grid b { display: none; }
.floor__grid i.is-req-d,
.floor__grid i.is-req-p.is-req-p--on {
  border: 0;
  outline: calc(3 * var(--u)) solid var(--pistacchio);
  outline-offset: calc(4 * var(--u));
  transform: translateX(calc(var(--slide) * -1));
}
.floor__grid i.is-req-d b {
  display: block;
  position: absolute; left: calc(10 * var(--u)); bottom: calc(10 * var(--u));
  --fs: 10;
  color: var(--notte); background: var(--pistacchio);
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: 999px; white-space: nowrap;
  transform-origin: 20% 80%;
  transform: scale(var(--pop, 1));
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.request-copy {
  position: absolute; z-index: 3;
  left: calc(64 * var(--u)); top: calc(104 * var(--u));
  display: flex; flex-direction: column; gap: calc(26 * var(--u));
}
.request-copy .h2 { --fs: 104; width: calc(640 * var(--u)); }
.request-copy .lede { width: calc(580 * var(--u)); text-wrap: wrap; }
.lede--solid { background: var(--notte); }
.request-note { width: calc(580 * var(--u)); line-height: 1.6; color: var(--grigio); background: var(--notte); }

.request-mascot {
  position: absolute; z-index: 3;
  right: calc(-40 * var(--u)); bottom: calc(-120 * var(--u));
  width: calc(460 * var(--u));
  transform: translateY(calc((1 - var(--c, 1)) * 105%));
}
.request-mascot img { width: 100%; height: auto; }

@media (max-width: 1023px) {
  .floor { left: calc(60 * var(--u)); top: calc(330 * var(--u)); width: calc(620 * var(--u)); transform: perspective(calc(900 * var(--u))) rotateX(48deg) rotateZ(-24deg); }
  .floor__plane { --slide: calc((0.5 - var(--p, 0.5)) * 140 * var(--u)); }
  .floor__grid { grid-template-columns: repeat(6, 1fr); gap: calc(12 * var(--u)); }
  .floor__grid i:nth-child(n+31) { display: none; }
  .floor__grid i.is-req-d { border: 1px solid var(--hairline); outline: 0; transform: none; }
  .floor__grid i.is-req-d b { display: none; }
  .floor__grid i.is-req-p {
    border: 0;
    outline: calc(3 * var(--u)) solid var(--pistacchio);
    outline-offset: calc(4 * var(--u));
    transform: translateX(calc(var(--slide) * -1));
  }
  .floor__grid i.is-req-p b {
    display: block;
    position: absolute; left: calc(10 * var(--u)); bottom: calc(10 * var(--u));
    --fs: 10;
    color: var(--notte); background: var(--pistacchio);
    padding: calc(4 * var(--u)) calc(8 * var(--u));
    border-radius: 999px; white-space: nowrap;
    transform-origin: 20% 80%;
    transform: scale(var(--pop, 1));
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
  }
  .request-copy { left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(70 * var(--u)); gap: calc(18 * var(--u)); }
  .request-copy .h2 { --fs: 62; width: auto; }
  .request-copy .lede { --fs: 16; width: auto; }
  .request-note { width: auto; }
  .request-mascot { right: calc(-30 * var(--u)); bottom: calc(-60 * var(--u)); width: calc(250 * var(--u)); }
}

/* =========================================================
   05 · MUSIC + TOGETHER
   Added 2026-11-07 after the v3 handoff (app 0.1.14 Watch Together, 0.1.18 music); no designer comp.
   Two halves side by side; each half is a subgrid of four rows (head, lede, picture, points),
   so the two pictures and the two point lists line up across the rule between them.
   ========================================================= */

.together { --h: 900; }
.together-grid {
  position: absolute; z-index: 2;
  left: calc(64 * var(--u)); right: calc(64 * var(--u)); top: calc(92 * var(--u));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto);
  column-gap: calc(96 * var(--u)); row-gap: calc(24 * var(--u));
}
.half { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.half--watch { position: relative; }
.half--watch::before {
  content: ''; position: absolute;
  left: calc(-48 * var(--u)); top: calc(8 * var(--u)); bottom: 0;
  width: 1px; background: var(--hairline);
}
.half__head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(20 * var(--u)); }
.half .h2 { --fs: 80; }
.half__head img { width: calc(150 * var(--u)); height: auto; margin-bottom: calc(-6 * var(--u)); flex-shrink: 0; }
.half .lede { --fs: 18; }

/* Music: a Home shelf of square album cards, the focused one ready to play, and the music bar. */
.shelf { display: flex; flex-direction: column; gap: calc(16 * var(--u)); align-self: end; }
.shelf__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(16 * var(--u)); }
.shelf__row i {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(6 * var(--u));
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.shelf__row i.is-focus { border: 0; background: var(--field-near); outline: calc(3 * var(--u)) solid var(--pistacchio); outline-offset: calc(4 * var(--u)); }
.shelf__row b {
  position: absolute; left: calc(8 * var(--u)); bottom: calc(8 * var(--u));
  --fs: 10;
  color: var(--notte); background: var(--pistacchio);
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: 999px; white-space: nowrap;
  transform-origin: 20% 80%;
  transition: transform .5s var(--ease-out);
}
.musicbar {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: calc(10 * var(--u));
}
.musicbar__art { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--field-near); }
.musicbar__text { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.musicbar__text .mono { --fs: 10; }
.musicbar__ctl { display: flex; gap: calc(14 * var(--u)); }
.musicbar__ctl svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: var(--panna); }
.musicbar__progress { position: absolute; left: calc(12 * var(--u)); right: calc(16 * var(--u)); bottom: calc(7 * var(--u)); height: calc(2 * var(--u)); background: var(--hairline); border-radius: 1px; }
.musicbar__progress i { position: absolute; inset: 0; background: var(--pistacchio); border-radius: 1px; transform-origin: 0 50%; transform: scaleX(.38); transition: transform 1.4s var(--ease-out); }

/* Watch together: three screens in one room, paused on the same frame. */
.room { display: flex; flex-direction: column; gap: calc(14 * var(--u)); align-self: end; }
.room__name { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.room__name .mono { --fs: 10; }
/* Two rows (device, label) shared across the three, so the TVs and the laptop stand on one line. */
.room__screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: calc(20 * var(--u)); }
.room__screens li { display: grid; grid-row: span 2; grid-template-rows: subgrid; justify-items: center; }
.device { align-self: end; width: 100%; display: flex; flex-direction: column; align-items: center; }
.screen {
  width: 100%;
  padding: calc(5 * var(--u));
  background: var(--bezel);
  border: 1px solid var(--hairline);
  border-radius: calc(8 * var(--u));
}
.screen__in {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border-radius: calc(3 * var(--u));
  overflow: hidden;
}
.screen__stand { width: 22%; height: calc(6 * var(--u)); background: var(--bezel); border: 1px solid var(--hairline); border-top: 0; border-radius: 0 0 calc(3 * var(--u)) calc(3 * var(--u)); }
.is-laptop .screen { width: 86%; border-bottom-left-radius: calc(3 * var(--u)); border-bottom-right-radius: calc(3 * var(--u)); }
.is-laptop .screen__stand { width: 100%; height: calc(6 * var(--u)); border-top: 1px solid var(--hairline); border-radius: 0 0 calc(6 * var(--u)) calc(6 * var(--u)); }
.screen__pause {
  position: absolute; left: 50%; top: 44%;
  width: calc(18 * var(--u)); height: calc(20 * var(--u));
  translate: -50% -50%;
  border-left: calc(6 * var(--u)) solid var(--panna);
  border-right: calc(6 * var(--u)) solid var(--panna);
  transition: opacity .3s ease, scale .45s var(--ease-out);
}
.screen__bar { position: absolute; left: 9%; right: 9%; bottom: 14%; height: calc(2 * var(--u)); background: var(--hairline); border-radius: 1px; }
.screen__bar i { position: absolute; inset: 0; background: var(--pistacchio); border-radius: 1px; transform-origin: 0 50%; transform: scaleX(.46); transition: transform 1.5s var(--ease-out); }
.room__screens p { --fs: 10; display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(12 * var(--u)); text-align: center; }

.half-points { display: flex; flex-direction: column; }
.half-points li { padding: calc(14 * var(--u)) 0 calc(16 * var(--u)); gap: calc(6 * var(--u)); }
.half-points strong { font-weight: 800; font-size: calc(20 * var(--u)); letter-spacing: -0.02em; line-height: 1.15; }
.half-points li > span { font-size: calc(15 * var(--u)); line-height: 1.45; }

/* On entry, the album's PLAY pops and the bar fills; the three screens play in step, then pause together. */
.js[data-motion="full"] .half:not(.is-in) .shelf__row b { transform: scale(0); }
.js[data-motion="full"] .half:not(.is-in) .musicbar__progress i { transform: scaleX(0); }
.js[data-motion="full"] .half:not(.is-in) .screen__bar i { transform: scaleX(0); }
.js[data-motion="full"] .half:not(.is-in) .screen__pause { opacity: 0; scale: .4; }
.js[data-motion="full"] .half .shelf__row b { transition-delay: .2s; }
.js[data-motion="full"] .half .musicbar__progress i { transition-delay: .5s; }
.js[data-motion="full"] .half .screen__pause { transition-delay: 1.5s; }

@media (max-width: 1023px) {
  .together { --h: 1440; }
  .together-grid {
    left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(70 * var(--u));
    display: flex; flex-direction: column; gap: calc(30 * var(--u));
  }
  .half { display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
  .half--watch { padding-top: calc(36 * var(--u)); }
  .shelf, .room { align-self: stretch; }
  .half-points li, .half-points li.is-accent { padding: calc(12 * var(--u)) 0; column-gap: calc(10 * var(--u)); row-gap: calc(4 * var(--u)); }
  .half--watch::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .half .h2 { --fs: 50; }
  .half__head img { width: calc(96 * var(--u)); }
  .half .lede { --fs: 16; }
  .shelf { gap: calc(12 * var(--u)); }
  .shelf__row { gap: calc(10 * var(--u)); }
  .shelf__row i.is-focus { outline-width: calc(2 * var(--u)); outline-offset: calc(3 * var(--u)); }
  .shelf__row b { --fs: 8; left: calc(5 * var(--u)); bottom: calc(5 * var(--u)); padding: calc(3 * var(--u)) calc(6 * var(--u)); }
  .musicbar { gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); }
  .musicbar__art { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  .musicbar__text .mono { --fs: 9; }
  .musicbar__ctl { gap: calc(10 * var(--u)); }
  .musicbar__ctl svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .musicbar__progress { left: calc(10 * var(--u)); right: calc(12 * var(--u)); bottom: calc(6 * var(--u)); }
  .room__name .mono { --fs: 9; }
  .room__screens { column-gap: calc(10 * var(--u)); }
  .screen { padding: calc(3 * var(--u)); border-radius: calc(5 * var(--u)); }
  .screen__stand { height: calc(4 * var(--u)); }
  .is-laptop .screen__stand { height: calc(4 * var(--u)); }
  .screen__pause { width: calc(11 * var(--u)); height: calc(12 * var(--u)); border-left-width: calc(4 * var(--u)); border-right-width: calc(4 * var(--u)); }
  .room__screens p { --fs: 8; margin-top: calc(8 * var(--u)); gap: calc(3 * var(--u)); }
}

/* =========================================================
   06 · ON THE COUCH
   ========================================================= */

.couch { --h: 1700; }
.couch-copy {
  position: absolute; z-index: 2;
  left: calc(64 * var(--u)); top: calc(130 * var(--u));
  display: flex; flex-direction: column; gap: calc(28 * var(--u));
}
.couch-copy__head { display: flex; align-items: flex-end; gap: calc(40 * var(--u)); }
.couch-copy .h2 { --fs: 92; width: calc(960 * var(--u)); }
.couch-copy__head img { width: calc(170 * var(--u)); height: auto; }
.couch-copy .lede { width: calc(620 * var(--u)); }

/* Screenshot carousel */
.shots {
  position: absolute; z-index: 2;
  left: calc(64 * var(--u)); right: 0; top: calc(450 * var(--u));
  display: flex; flex-direction: column; gap: calc(18 * var(--u));
}
.shots__bar { display: flex; justify-content: space-between; align-items: center; padding-right: calc(64 * var(--u)); }
.shots__nav { display: flex; gap: calc(10 * var(--u)); }
.shots__btn {
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  min-width: 36px; min-height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--panna);
  font-family: 'Archivo', sans-serif; font-size: calc(18 * var(--u));
  transition: border-color .15s ease;
}
.shots__btn:hover { border-color: var(--panna); }
.shots__view { overflow: hidden; }
.shots__track {
  --k: 0;
  display: flex; gap: calc(24 * var(--u));
  transform: translateX(calc(var(--k) * -624 * var(--u)));
  transition: transform 600ms var(--ease-out);
}
.shot {
  flex-shrink: 0;
  width: calc(600 * var(--u));
  display: flex; flex-direction: column; gap: calc(12 * var(--u));
  cursor: pointer;
  transition: opacity 400ms ease;
}
.shot.is-past { opacity: 0.25; }
.shot__img {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(8 * var(--u));
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.shot__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot__cap { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.shot__cap .mono { --fs: 10; color: var(--pistacchio); }
.shot__cap span:last-child { font-weight: 800; font-size: calc(18 * var(--u)); letter-spacing: -0.02em; color: var(--panna); }
.shots__dots { display: flex; gap: calc(6 * var(--u)); }
.shots__dots i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--hairline); transition: width 300ms ease; }
.shots__dots i.is-on { width: calc(22 * var(--u)); background: var(--pistacchio); }

.cards {
  position: absolute; z-index: 2;
  left: calc(64 * var(--u)); right: calc(64 * var(--u)); bottom: calc(64 * var(--u));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(20 * var(--u));
}
.card {
  display: flex; flex-direction: column; justify-content: space-between; gap: calc(18 * var(--u));
  min-height: calc(190 * var(--u));
  padding: calc(22 * var(--u));
  background: var(--surface);
  border-radius: calc(16 * var(--u));
  outline: 0 solid transparent;
  outline-offset: calc(4 * var(--u));
}
.card.is-focus { outline: calc(3 * var(--u)) solid var(--pistacchio); }
.card__n { color: var(--grigio); }
.card.is-focus .card__n { color: var(--pistacchio); }
.card > div { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.card h3 { font-weight: 900; font-size: calc(26 * var(--u)); line-height: 1.02; letter-spacing: -0.035em; color: var(--panna); text-wrap: balance; }
.card p { font-size: calc(15 * var(--u)); line-height: 1.5; color: var(--panna2); text-wrap: pretty; }

/* Cards deal in left to right, 80ms apart, the first time the grid comes into view. */
.js[data-motion="full"] .card {
  opacity: 0;
  transform: translateY(calc(48 * var(--u)));
  transition: opacity .5s ease, transform .7s var(--ease-out);
  transition-delay: calc(var(--i) * 80ms);
}
.js[data-motion="full"] .cards.is-dealt .card { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  .couch { --h: 1990; }
  .couch-copy { left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(70 * var(--u)); gap: calc(16 * var(--u)); }
  .couch-copy__head { justify-content: space-between; gap: calc(8 * var(--u)); }
  .couch-copy .h2 { --fs: 46; width: calc(250 * var(--u)); }
  .couch-copy__head img { width: calc(90 * var(--u)); }
  .couch-copy .lede { --fs: 15; width: auto; }
  .shots { left: calc(22 * var(--u)); top: calc(396 * var(--u)); gap: calc(12 * var(--u)); }
  .shots__bar { padding-right: calc(22 * var(--u)); }
  .shots__bar.p-only { display: flex !important; }
  .shots__nav { gap: calc(8 * var(--u)); }
  .shots__btn { font-size: calc(16 * var(--u)); }
  .shots__track { gap: calc(12 * var(--u)); transform: translateX(calc(var(--k) * -312 * var(--u))); }
  .shot { width: calc(300 * var(--u)); gap: calc(8 * var(--u)); }
  .shot__img { border-radius: calc(6 * var(--u)); }
  .shot__cap { gap: calc(3 * var(--u)); }
  .shot__cap .mono { --fs: 9; }
  .shot__cap span:last-child { font-size: calc(15 * var(--u)); }
  .cards { left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
  .card { min-height: 0; padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(14 * var(--u)); gap: calc(6 * var(--u)); outline-offset: calc(3 * var(--u)); }
  .card.is-focus { outline-width: calc(2 * var(--u)); }
  .card__n { display: block; font-size: calc(11 * var(--u)); }
  .card > div { gap: calc(6 * var(--u)); }
  .card h3 { font-size: calc(19 * var(--u)); letter-spacing: -0.03em; line-height: normal; text-wrap: wrap; }
  .card p { font-size: calc(14 * var(--u)); }
}

/* =========================================================
   07 · JELLYFIN
   ========================================================= */

.jellyfin-copy {
  position: absolute; z-index: 2;
  left: calc(64 * var(--u)); top: calc(130 * var(--u));
  display: flex; flex-direction: column; gap: calc(30 * var(--u));
}
.jellyfin-copy .h2 { --fs: 104; width: calc(900 * var(--u)); }
.jellyfin-copy .lede { width: calc(620 * var(--u)); }

.link-diagram {
  position: absolute;
  left: 0; top: calc(414 * var(--u)); width: calc(1312 * var(--u));
  display: flex; align-items: center;
}
.node {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: calc(6 * var(--u));
  padding: calc(18 * var(--u)) calc(24 * var(--u));
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: calc(12 * var(--u));
}
.node .mono { --fs: 10; color: var(--grigio); }
.node strong { font-weight: 900; font-size: calc(28 * var(--u)); letter-spacing: -0.03em; color: var(--panna); }
.link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(20 * var(--u)); }
.link .mono { --fs: 10; opacity: min(1, calc(var(--draw, 1) * 2)); }
.link__line {
  align-self: stretch;
  height: calc(2 * var(--u));
  background: var(--pistacchio);
  border-radius: 1px;
  transform-origin: 0 50%;
  transform: scaleX(var(--draw, 1));
}

.jellyfin-more { position: absolute; z-index: 2; right: calc(64 * var(--u)); top: calc(138 * var(--u)); color: var(--pistacchio); }
.jellyfin-more:hover { color: var(--sheen); }

.pillars {
  position: absolute; z-index: 2;
  left: calc(64 * var(--u)); right: calc(64 * var(--u)); bottom: calc(52 * var(--u));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(48 * var(--u));
}
/* Each pillar gets its own rule, so the three read as separate columns. */
.pillars li { display: flex; flex-direction: column; gap: calc(10 * var(--u)); border-top: 1px solid var(--hairline); padding-top: calc(24 * var(--u)); }
.pillars h3 { font-weight: 900; font-size: calc(30 * var(--u)); line-height: 1; letter-spacing: -0.04em; color: var(--panna); }
.pillars p { font-size: calc(16 * var(--u)); line-height: 1.5; color: var(--panna2); text-wrap: pretty; }

@media (max-width: 1023px) {
  .jellyfin-copy { left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(70 * var(--u)); gap: calc(18 * var(--u)); }
  .jellyfin-copy .h2 { --fs: 50; width: auto; }
  .jellyfin-copy .lede { --fs: 15; width: auto; }
  .link-diagram { position: static; width: auto; }
  .node { padding: calc(12 * var(--u)) calc(14 * var(--u)); }
  .node .mono { --fs: 8; }
  .node strong { font-size: calc(19 * var(--u)); }
  .link { padding: 0; margin: 0 calc(10 * var(--u)); }
  .jellyfin-more {
    right: auto; top: auto;
    left: calc(22 * var(--u)); width: calc(346 * var(--u)); bottom: calc(26 * var(--u));
    --fs: 10;
    border-top: 1px solid var(--hairline);
    padding-top: calc(12 * var(--u));
  }
  .pillars {
    left: calc(22 * var(--u)); right: calc(22 * var(--u));
    bottom: calc(52 * var(--u));
    display: flex; flex-direction: column; gap: 0;
    border-top: 0; padding-top: 0;
  }
  .pillars li { gap: calc(4 * var(--u)); border-top: 1px solid var(--hairline); padding: calc(12 * var(--u)) 0; }
  .pillars h3 { font-size: calc(20 * var(--u)); letter-spacing: -0.03em; line-height: normal; }
  .pillars p { font-size: calc(14 * var(--u)); }
}

/* =========================================================
   08 · GET IT
   ========================================================= */

.getit-copy {
  position: absolute; z-index: 2;
  left: calc(64 * var(--u)); top: calc(130 * var(--u));
  display: flex; flex-direction: column; gap: calc(44 * var(--u));
}
.getit-copy .h2 { --fs: 120; width: calc(760 * var(--u)); }
.steps { display: flex; gap: calc(56 * var(--u)); }
.steps li {
  display: flex; align-items: baseline; gap: calc(14 * var(--u)); width: calc(250 * var(--u));
  border-top: 1px solid var(--hairline); padding-top: calc(20 * var(--u));
}
.steps li > div { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
/* The step number is set like the heading beside it, so number and step read as one line. */
.steps li > .mono { font-family: 'Archivo', system-ui, sans-serif; font-weight: 900; font-size: calc(36 * var(--u)); letter-spacing: -0.04em; line-height: 1; }
.steps h3 { font-weight: 900; font-size: calc(36 * var(--u)); letter-spacing: -0.04em; color: var(--panna); }
.steps p { font-size: calc(16 * var(--u)); line-height: 1.5; color: var(--panna2); text-wrap: pretty; }
.steps a { color: inherit; text-decoration-color: var(--grigio); text-underline-offset: 0.15em; }
.steps a:hover { color: var(--pistacchio); }
.getit-tag { margin-left: calc(12 * var(--u)); color: var(--panna2); }

.getit-mascot { position: absolute; z-index: 2; right: calc(60 * var(--u)); bottom: calc(96 * var(--u)); width: calc(440 * var(--u)); }
.getit-mascot img { width: 100%; height: auto; transform-origin: 50% 100%; }
.getit-rule { position: absolute; z-index: 1; left: calc(50% - 50vw); width: 100vw; bottom: calc(96 * var(--u)); height: 1px; background: var(--hairline); }

.site-footer {
  position: absolute; z-index: 3;
  left: calc(64 * var(--u)); right: calc(64 * var(--u)); bottom: calc(36 * var(--u));
  display: flex; justify-content: space-between; align-items: center; gap: calc(24 * var(--u));
}
.legal { font-size: calc(13 * var(--u)); color: var(--grigio); }
.legal a { color: var(--panna2); }
.legal a:hover { color: var(--pistacchio); }
.footer-links { display: flex; gap: calc(24 * var(--u)); flex-shrink: 0; }
.footer-links .mono { --fs: 10; color: var(--panna2); }
.footer-links a:hover { color: var(--pistacchio); }
.footer-links .motion-toggle { color: var(--pistacchio); }
.footer-links .motion-toggle:hover { color: var(--sheen); }

@media (max-width: 1023px) {
  .getit-copy { left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(70 * var(--u)); gap: calc(24 * var(--u)); }
  .getit-copy .h2 { --fs: 58; width: auto; }
  .steps { flex-direction: column; gap: 0; }
  .steps li { gap: calc(12 * var(--u)); width: auto; padding: calc(12 * var(--u)) 0; }
  .steps li > .mono { font-size: calc(24 * var(--u)); }
  .steps li > div { gap: calc(2 * var(--u)); }
  .steps h3 { font-size: calc(24 * var(--u)); letter-spacing: -0.03em; }
  .steps p { font-size: calc(14 * var(--u)); }
  .getit-copy .btn-row { flex-direction: column; align-items: stretch; gap: calc(24 * var(--u)); }
  .getit-tag { margin-left: 0; --fs: 9; }
  .getit-mascot { right: calc(16 * var(--u)); bottom: calc(110 * var(--u)); width: calc(130 * var(--u)); }
  .getit-rule { bottom: calc(110 * var(--u)); }
  .site-footer { left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: calc(26 * var(--u)); }
  .legal { font-size: calc(12 * var(--u)); line-height: 1.55; }
}

/* =========================================================
   Motion
   ========================================================= */

@keyframes jbRay { 0% { stroke-dashoffset: 80; } 16% { stroke-dashoffset: 0; } 68% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: -80; } 100% { stroke-dashoffset: -80; } }
/* Percentages, not var(--u): keyframes without variables can run on the compositor. 10 design px ≈ 2.46% of the hero mascot's height. */
@keyframes jbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.46%); } }
@keyframes jbBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes jbDash {
  0% { transform: translateX(-177%) skewX(-14deg); opacity: 0; }
  55% { opacity: 1; }
  78% { transform: translateX(3.9%) skewX(4deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes jbLineIn { from { transform: translateY(105%); } to { transform: none; } }
@keyframes jbShow { to { visibility: visible; } }

html[data-motion="full"] .rays line { stroke-dasharray: 80; stroke-dashoffset: 80; animation: jbRay 3.2s var(--ease-out) infinite; }
html[data-motion="full"] .rays line:nth-child(2) { animation-delay: .12s; }
html[data-motion="full"] .rays line:nth-child(3) { animation-delay: .24s; }
html[data-motion="full"] .float { animation: jbFloat 4.2s ease-in-out infinite; }
html[data-motion="full"] .breathe { animation: jbBreathe 4s ease-in-out infinite; }
html.js[data-motion="full"] .hero-mascot__dash { animation: jbDash 1.15s var(--ease-out) .45s both; }

/* Headline masks in line by line. Hidden until JS splits it; the jbShow fallback reveals it if JS never runs. */
html.js[data-motion="full"] .hero-title:not(.is-split) { visibility: hidden; animation: jbShow 0s 2.5s forwards; }
.hero-title .line { display: block; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero-title .line__in { display: block; animation: jbLineIn .9s var(--ease-out) both; animation-delay: calc(0.25s + var(--l) * 0.11s); }

html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 404 ---------- */
.notfound {
  --u: 1px;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center;
}
.notfound img { width: 200px; height: auto; }
.notfound h1 { font-weight: 900; font-size: clamp(36px, 7vw, 64px); line-height: 0.98; letter-spacing: -0.04em; }
.notfound .mono { color: var(--grigio); }
.notfound .btn { margin-top: 12px; }

/* Looping animations stop while their scene is off screen (set by site.js). */
.is-offscreen .float, .is-offscreen .breathe, .is-offscreen .rays line, .is-offscreen .hero-mascot__dash { animation-play-state: paused !important; }