/* Plurr — home (Figma: Website-For-Corporate, node 493:6 "Hero - Home")
   Desktop values are the 1440px frame; smaller widths scale down from it. */

@font-face {
  font-family: "Dubsteptrix";
  src: url("fonts/dubsteptrix.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg: #040404;
  --ink: #edeff2;
  --ink-bright: #fff;
  --ink-body: #c3c3c3;
  --ink-soft: rgba(255, 255, 255, 0.6);
  --ink-nav: rgba(255, 255, 255, 0.64);
  --ink-muted: rgba(255, 255, 255, 0.56);  /* 4.5:1+ even over the brightest glow behind small labels */
  --line: rgba(237, 239, 242, 0.16);
  --card: #edeff2;
  --card-ink: #040404;
  --card-sub: #626262;
  --tagline: #e3aaa5;      /* lighter than the Figma #ce8f8c so the line holds 3:1 over the glow */
  --ember: #e8402e;        /* the glow's core red */
  --ember-deep: #c43a20;
  --ember-ink: #ff7a63;    /* small ember text: lighter so it stays 4.5:1+ over the glow */
  --surface: rgba(237, 239, 242, 0.03);

  /* Corner radii: one scale for the whole site. */
  --r-card: 24px;
  --r-panel: 16px;
  --r-thumb: 10px;
  --r-chip: 6px;
  --r-pill: 199px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --font-display: "Dubsteptrix", "Space Mono", ui-monospace, monospace;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --nav-h: 48px;
  --top-pad: 48px;
  --nav-pad: 48px;
  --rail: 48px;
  --gutter: 48px;
  --section-gap: 320px;
  --title-size: clamp(30px, 1.75vw + 23px, 48px);
  color-scheme: dark;
}

@media (max-width: 1023px) {
  :root { --nav-pad: 24px; --gutter: 32px; --section-gap: 200px; }
}
@media (max-width: 899px) {
  :root { --rail: 0px; --nav-pad: 20px; }
}
@media (max-width: 639px) {
  :root { --top-pad: 28px; --gutter: 20px; --section-gap: 144px; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-padding-top: calc(var(--nav-h) + 48px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html[data-motion="on"] { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, h1, h2, h3, ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* Figma trims text boxes to cap height / baseline; this keeps its spacing. */
:where(p, h2, h3) { text-box: trim-both cap alphabetic; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
main:focus { outline: none; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 14px 16px;
  background: var(--card);
  color: var(--card-ink);
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: translateY(calc(-100% - 24px));
}
.skip-link:focus { transform: none; outline-color: var(--card); }

/* ---------- Backdrop glow ---------- */

/* Fixed behind the whole page. glow.js paints the Figma blobs onto the canvas;
   the gradients below are only a fallback for when the canvas can't run. */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  background:
    radial-gradient(42% 30% at 58% 28%, rgba(232, 64, 46, 0.8), transparent 70%),
    radial-gradient(30% 40% at 88% 30%, rgba(255, 107, 107, 0.55), transparent 70%),
    radial-gradient(45% 28% at 22% 38%, rgba(196, 58, 32, 0.6), transparent 70%),
    var(--bg);
}
html.has-glow-canvas .backdrop { background: var(--bg); }
.backdrop__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
html[data-motion="on"] .backdrop__canvas { animation: glow-in 2.2s ease-out backwards; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  /* Frosted glass that picks up the glow instead of darkening it. */
  /* The glass is lighter than the old dark tint, so its text steps up to stay 4.5:1+ over the glow. */
  --ink-nav: rgba(255, 255, 255, 0.86);
  background: rgba(237, 239, 242, 0.04);
  -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.25);
  backdrop-filter: blur(24px) saturate(1.4) brightness(1.25);
}

.nav__label {
  display: block;
  text-box: trim-both cap alphabetic;
}

.nav__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 4px 10px;
  border: 1px solid var(--line);
}

.nav__mark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 26px;
  height: 26px;
}
.nav__mark img:nth-child(1) { width: 7.795px; height: 26px; margin-right: -0.55px; }
.nav__mark img:nth-child(2) { width: 11.51px; height: 18px; margin-right: -0.55px; object-fit: cover; }
.nav__mark img:nth-child(3) { width: 7.795px; height: 26px; transform: rotate(180deg); }

.nav__bar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
  padding: 4px var(--nav-pad);
  border: 1px solid var(--line);
  border-left: 0;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 42px;
  list-style: none;
}

.nav__link,
.nav__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.48;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-nav);
  transition: color 0.2s ease;
}

.nav__link::before,
.nav__link::after,
.nav__toggle::before,
.nav__toggle::after {
  content: "";
  flex: none;
  width: 4px;
  height: 1px;
  background: url("assets/nav-bracket.svg") center / 100% 100% no-repeat;
}

.nav__link:hover { color: var(--ink-bright); }

.nav__link[aria-current="true"],
.nav__toggle {
  font-size: 14px;
  color: var(--ink-bright);
}
.nav__link[aria-current="true"]::before,
.nav__link[aria-current="true"]::after,
.nav__toggle::before,
.nav__toggle::after {
  height: 4px;
  background-image: url("assets/nav-bracket-active.svg");
}

.nav__toggle {
  display: none;
  margin: 0;
  padding: 0 4px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav__progress {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.48;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-nav);
}

.nav__track {
  position: relative;
  width: clamp(64px, 12vw, 173px);
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.24);
}

.nav__fill {
  position: absolute;
  inset: 0;
  background: var(--ink-nav);
  transform-origin: left center;
  transform: scaleX(0);
}

/* Room for "(( 100% ))" so the track never shifts as the number grows. */
.nav__pct { min-width: 10ch; }

@media (max-width: 899px) {
  .nav__toggle { display: flex; }

  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .js .nav__links:not(.is-open) { display: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    min-height: 56px;
    padding-block: 0;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
  }
  .nav__list li:last-child .nav__link { border-bottom: 0; }

  /* Without JS the links stay reachable as a scrolling row. */
  html:not(.js) .nav__toggle { display: none; }
  html:not(.js) .nav__links {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    overflow-x: auto;
    background: none;
    border: 0;
  }
  html:not(.js) .nav__list { flex-direction: row; gap: 24px; }
  html:not(.js) .nav__link { min-height: 44px; font-size: 12px; border: 0; }
}

@media (max-width: 479px) {
  .nav__progress-label { display: none; }
}

/* ---------- Side rails ---------- */

.rail {
  position: fixed;
  top: var(--nav-h);
  bottom: 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
  width: 48px;
  padding: 48px 4px;
  border: 1px solid var(--line);
  border-top: 0;
  /* Same glass as the nav bar. */
  background: rgba(237, 239, 242, 0.04);
  -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.25);
  backdrop-filter: blur(24px) saturate(1.4) brightness(1.25);
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-nav);
}
.rail--left { left: 0; }
.rail--right { right: 0; }
.rail .px-icon { color: var(--ink-muted); }
.rail__text { writing-mode: vertical-rl; }
.rail--left .rail__text { transform: rotate(180deg); }

@media (max-width: 899px) {
  .rail { display: none; }
}

/* ---------- Page ---------- */

.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  margin-inline: var(--rail);
  padding-top: calc(var(--nav-h) + var(--top-pad));
  overflow-x: clip;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-height: calc(100vh - var(--nav-h) - var(--top-pad));
  min-height: calc(100svh - var(--nav-h) - var(--top-pad));
}

/* Short laptop screens: tighten so the bottom strip still lands on screen. */
@media (min-width: 768px) and (max-height: 760px) {
  .hero { gap: 24px; }
}
@media (max-width: 639px) {
  .hero { gap: 32px; }
}

/* Spare height goes 56 : 202 below the beta line and below the logo, which
   reproduces the frame's 104px / 250px spacing at 1024px tall and scales from there. */
.hero__beta {
  flex: 56 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-inline: var(--gutter);
  text-transform: uppercase;
}
.hero__beta-dot.px-icon { width: 6px; height: 6px; color: #0ac600; vertical-align: top; }
.hero__beta-text {
  display: block;
  text-box: trim-both cap alphabetic;
  color: var(--ink-body);
}
.hero__beta-kicker { display: block; font-size: 12px; line-height: 1.48; }
.hero__beta-text strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.48;
  color: var(--ink-bright);
}

.hero__logo {
  container-type: inline-size;
  flex: 202 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 1px at the 840px design width, smaller when the column is narrower,
     and on short landscape screens, small enough to share the screen with the rest. */
  --u: min(1px, (100cqi - 2 * var(--gutter)) / 840, max(0.4px, (100svh - 240px) / 300));
}

.hero__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(21.567 * var(--u));
  margin: 0;
}
.hero__paren { width: calc(74.146 * var(--u)); height: calc(247.303 * var(--u)); }
.hero__paren--right { transform: rotate(180deg); }
.hero__wordmark { width: calc(648.574 * var(--u)); height: calc(174.777 * var(--u)); }

.hero__tagline {
  font-family: var(--font-display);
  font-size: max(13px, calc(36 * var(--u)));
  line-height: 1.48;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tagline);
}

.hero__foot { display: flex; flex-direction: column; }

.hero__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 0 var(--gutter) 48px;
}

.hero__intro {
  width: 268px;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-body);
}

.beta-card {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 420px;
  max-width: 100%;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--card-ink);
}

.beta-card__top { display: flex; align-items: center; gap: 16px; }

.app-icon {
  flex: none;
  display: flex;
  width: 48px;
  height: 48px;
  padding: 19px 6px 18px;
  border-radius: 8px;
  background: #000;
}
.app-icon__logo { display: flex; align-items: center; gap: 0.936px; height: 11px; }
.app-icon__logo img:nth-child(1),
.app-icon__logo img:nth-child(3) { width: 3.217px; height: 10.728px; }
.app-icon__logo img:nth-child(2) { width: 28.136px; height: 7.582px; }
.app-icon__logo img:nth-child(3) { transform: rotate(180deg); }

.beta-card__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 135px;
  line-height: 1.48;
  text-transform: uppercase;
}
.beta-card__title { font-family: var(--font-display); font-size: 16px; color: var(--card-ink); }
.beta-card__sub { font-size: 11px; color: var(--card-sub); }

.beta-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 48px;
  border-radius: var(--r-pill);
  background: var(--card-ink);
  color: var(--card);
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.beta-card__btn > span { display: block; text-box: trim-both cap alphabetic; }
.beta-card__btn:hover { background: #26262a; }
.beta-card__btn:active { transform: scale(0.985); }
.beta-card__btn:focus-visible { outline-color: var(--card-ink); }

.hero__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  min-height: 48px;
  padding: 4px var(--gutter);
  border-block: 1px solid var(--line);
  background: rgba(4, 4, 4, 0.28);   /* keeps the small print readable over the hero glow */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 767px) {
  .hero__bottom { flex-direction: column; align-items: stretch; padding-bottom: 32px; }
  .hero__intro { width: auto; max-width: 30ch; }
  .beta-card { width: 100%; }
  .hero__strip { padding-block: 15px; letter-spacing: 2px; }
}

/* ---------- Sections ---------- */

.section {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-inline: var(--gutter);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 32px;
  text-transform: uppercase;
}
.section__label {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.48;
  white-space: nowrap;
  color: var(--ink-soft);
}
.section__index {
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-align: right;
  color: var(--ink-muted);
}
.section__index span { display: block; }

.section__body { display: flex; flex-direction: column; gap: 48px; }
.section__intro { display: flex; flex-direction: column; gap: 80px; }

.section__title {
  font-family: var(--font-display);
  font-size: var(--title-size);
  line-height: 1.24;
  text-transform: uppercase;
  color: var(--ink);
}
.problem .section__title { max-width: 17.15em; } /* 823px at 48px */

.section__lede {
  align-self: flex-end;
  width: 540px;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-body);
}
.section__lede strong { font-weight: 700; color: var(--ink); }

@media (max-width: 767px) {
  .section { gap: 56px; }
  .section__intro { gap: 48px; }
  .section__index { text-align: left; }
}

/* ---------- Phones ---------- */

.phones {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  list-style: none;
}

.phone {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.phone__shot {
  position: relative;
  aspect-ratio: 274.8 / 505;
  overflow: hidden;
}
/* The WebP files are already cropped to exactly this frame (tools/optimize-images.mjs). */
.phone__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Staircase: 53 / 101 / 146 / 192px at a 243.2px column, kept proportional. */
.phone--2 .phone__shot { margin-top: 21.793%; }
.phone--3 .phone__shot { margin-top: 41.530%; }
.phone--4 .phone__shot { margin-top: 60.033%; }
.phone--5 .phone__shot { margin-top: 78.947%; }

.phone__caption {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-transform: uppercase;
}
.phone__rule { position: relative; height: 0; }
.phone__rule img {
  position: absolute;
  top: -0.5px;
  left: 0;
  width: 100%;
  height: 0.5px;
}
.phone__eyebrow { font-size: 14px; line-height: 1.48; color: var(--ink-muted); }
.phone__title { font-family: var(--font-display); font-size: 20px; line-height: 1.48; color: var(--ink); }
.phone__desc { font-size: 10px; line-height: 1.48; color: var(--ink-muted); }

/* Nothing here scrolls sideways (a sideways scroller traps vertical swipes on touch screens).
   Tablets keep the five-across staircase with smaller captions. */
@media (max-width: 1023px) {
  .phone { gap: 28px; }
  .phone__caption { gap: 16px; }
  .phone__eyebrow { font-size: 12px; }
  .phone__title { font-size: 16px; }
}
/* Phones: two columns, the right one dropped by a third of a screen. */
@media (max-width: 767px) {
  .phones {
    --col: min(220px, (100vw - 2 * var(--gutter) - 16px) / 2);
    display: grid;
    grid-template-columns: repeat(2, var(--col));
    justify-content: center;
    gap: 40px 16px;
  }
  /* Parallax drift would let stacked phones run into each other here. */
  .phones .phone { gap: 20px; translate: none !important; }
  .phones .phone__shot { margin-top: 0; }
  .phones .phone:nth-child(even) { transform: translate3d(0, calc(var(--col) * 0.62), 0); }
  .phone__title { font-size: 18px; }
}

/* =====================================================================
   Marketing build: shared pieces
   ===================================================================== */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Split headlines: each line rises out of its own mask. */
.split { display: block; }
.line {
  display: block;
  overflow: hidden;
  padding-block: 0.12em;
  margin-block: -0.12em;
}
.line__inner { display: block; }

html[data-motion="on"] [data-split] .line__inner {
  transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--li, 0) * 90ms + 80ms);
}
html[data-motion="on"] [data-split].is-in .line__inner { transform: none; }

/* Generic reveal. Hidden states only exist while motion is on. */
html[data-motion="on"] [data-reveal] {
  transition:
    opacity 0.9s var(--ease-out),
    transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html[data-motion="on"] [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
}
html[data-motion="on"] [data-reveal="rise"]:not(.is-in) {
  transform: translate3d(0, 140px, 0) rotate(-3deg) scale(0.94);
}
html[data-motion="on"] [data-reveal="mark"]:not(.is-in) {
  opacity: 1;
  transform: translate3d(0, 62%, 0);
}
html[data-motion="on"] [data-reveal="mark"] { transition-duration: 0.6s, 1.5s; }

/* Scrambled labels fade in as they decode. */
html[data-motion="on"] [data-scramble]:not(.is-in):not(.hero__tagline) { opacity: 0; }
[data-scramble] { transition: opacity 0.3s ease; }

.phone__caption .phone__rule img { transform-origin: left center; }
html[data-motion="on"] .phone__caption .phone__rule img { transition: transform 1.2s var(--ease-out) 0.25s; }
html[data-motion="on"] .phone__caption:not(.is-in) .phone__rule img { transform: scaleX(0); }

/* Phone mockup frame for the case-study screens (silver, to match the hero row). */
/* --dw is the phone's width; the bezel and corners scale from it. */
.device {
  --dw: 240px;
  position: relative;
  width: var(--dw);
  padding: calc(var(--dw) * 0.032);
  border-radius: calc(var(--dw) * 0.16);
  background: linear-gradient(140deg, #f4f4f6 0%, #a7a7ae 22%, #e6e6ea 46%, #87878e 74%, #d9d9dd 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 0 0 0 2.5px rgba(0, 0, 0, 0.28),
    0 60px 100px -45px rgba(0, 0, 0, 0.95),
    0 24px 48px -24px rgba(0, 0, 0, 0.8);
}
.device::before {
  content: "";
  position: absolute;
  inset: calc(var(--dw) * 0.017);
  border-radius: calc(var(--dw) * 0.145);
  background: #050505;
}
.device__screen {
  position: relative;
  aspect-ratio: 904 / 1951;
  border-radius: calc(var(--dw) * 0.124);
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.device__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Motion toggle (WCAG 2.2.2: a way to pause moving content). */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--ink-nav);
  font: 400 11px/1.48 var(--font-mono);
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}
.motion-toggle:hover { color: var(--ink-bright); }
.motion-toggle__icon { position: relative; flex: none; width: 12px; height: 12px; }

.hero__strip { column-gap: 24px; }
.hero__strip .motion-toggle { order: 0; }

/* ---------- Hero intro ---------- */

@keyframes hero-in-left { from { translate: -90px 0; opacity: 0; } }
@keyframes hero-in-right { from { translate: 90px 0; opacity: 0; } }
@keyframes hero-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes glow-in { from { opacity: 0; } }

html[data-motion="on"] .hero__paren--left { animation: hero-in-left 1.3s var(--ease-out) 0.1s backwards; }
html[data-motion="on"] .hero__paren--right { animation: hero-in-right 1.3s var(--ease-out) 0.1s backwards; }
html[data-motion="on"] .hero__wordmark { animation: hero-wipe 1.15s var(--ease-out) 0.3s backwards; }
html[data-motion="on"] .hero__in { animation: hero-rise 1s var(--ease-out) var(--d, 0.9s) backwards; }

.hero__paren { transition: translate 0.7s var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .hero__mark:hover .hero__paren--left { translate: calc(-16 * var(--u)) 0; }
  .hero__mark:hover .hero__paren--right { translate: calc(16 * var(--u)) 0; }
}

/* Scroll exit: the logo drifts down and dims as the hero leaves. */
html[data-motion="on"] .hero__logo {
  transform: translate3d(0, calc(var(--hero-p, 0) * 16vh), 0) scale(calc(1 - var(--hero-p, 0) * 0.06));
  opacity: calc(1 - var(--hero-p, 0) * 0.85);
}

/* ---------- Section rhythm ---------- */

.section__intro--tight { gap: 48px; }

/* ---------- Problem ---------- */

.problem .w { transition: opacity 0.2s linear; }

.oldways {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}
.oldways__kicker {
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.oldways__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  list-style: none;
}
.oldway {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 32px 40px 0;
}
.oldway + .oldway { padding-left: 32px; border-left: 1px solid var(--line); }
.oldway__num {
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  color: var(--ember-ink);
  text-box: trim-both cap alphabetic;
}
.oldway__name {
  position: relative;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.24;
  text-transform: uppercase;
  color: var(--ink);
  text-box: trim-both cap alphabetic;
}
/* The strike is drawn on every line, so a name that wraps is still crossed out. */
.oldway__strike {
  padding-inline: 0.1em;
  margin-inline: -0.1em;
  /* 39% of the glyph box is the middle of the cap height, where the line used to sit. */
  background: linear-gradient(var(--ember), var(--ember)) left 39% / 100% 3px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html[data-motion="on"] .oldway__strike { transition: background-size 0.9s var(--ease-out) calc(var(--i, 0) * 160ms + 0.55s); }
html[data-motion="on"] .oldway:not(.is-in) .oldway__strike { background-size: 0% 3px; }
.oldway__desc {
  font-size: 14px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-body);
}
.oldways__after {
  align-self: flex-end;
  width: 540px;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-body);
}

@media (max-width: 767px) {
  .oldways__list { grid-template-columns: 1fr; }
  .oldway, .oldway + .oldway { padding: 28px 0 32px; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* =====================================================================
   How it works: pinned phone showcase
   ===================================================================== */

.tour { display: flex; flex-direction: column; gap: 120px; }

.tour__track {
  position: relative;
  height: 520vh;
}

.tour__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 120px;
}

.tour__glow { position: absolute; inset: 0; pointer-events: none; }
.tour__glow span {
  position: absolute;
  left: 58%;
  top: 46%;
  width: 760px;
  height: 520px;
  margin: -260px 0 0 -380px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 64, 46, 0.55), rgba(196, 58, 32, 0.22) 55%, transparent);
  filter: blur(60px);
  mix-blend-mode: screen;
  transition: transform 1.4s var(--ease-out), opacity 1.4s ease;
}
.tour__glow span + span {
  width: 520px;
  height: 420px;
  margin: -210px 0 0 -260px;
  background: radial-gradient(closest-side, rgba(255, 107, 107, 0.4), rgba(122, 48, 30, 0.2) 60%, transparent);
}
.tour__stage[data-active="0"] .tour__glow span:first-child { transform: translate(-80px, 60px); }
.tour__stage[data-active="1"] .tour__glow span:first-child { transform: translate(120px, -40px) scale(1.15); }
.tour__stage[data-active="2"] .tour__glow span:first-child { transform: translate(-40px, -90px) scale(0.95); }
.tour__stage[data-active="3"] .tour__glow span:first-child { transform: translate(140px, 80px) scale(1.1); }
.tour__stage[data-active="4"] .tour__glow span:first-child { transform: translate(0, 0) scale(1.25); }
.tour__stage[data-active="0"] .tour__glow span + span { transform: translate(160px, -120px); }
.tour__stage[data-active="1"] .tour__glow span + span { transform: translate(-180px, 100px); opacity: 0.8; }
.tour__stage[data-active="2"] .tour__glow span + span { transform: translate(200px, 120px) scale(1.2); }
.tour__stage[data-active="3"] .tour__glow span + span { transform: translate(-160px, -100px); }
.tour__stage[data-active="4"] .tour__glow span + span { transform: translate(60px, 140px) scale(1.3); }

/* Steps text. All five share one grid cell, so the tallest sets the height. */
.tour__steps {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: min(440px, 60vh);
  list-style: none;
}
.tour__step {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  max-width: 440px;
}
.tour__step > * { transition: opacity 0.45s ease, transform 0.8s var(--ease-out); }
.tour__step:not(.is-active) > * { opacity: 0; transform: translate3d(0, 36px, 0); }
.tour__step.is-past:not(.is-active) > * { transform: translate3d(0, -36px, 0); }
.tour__step.is-active > :nth-child(2) { transition-delay: 0.05s; }
.tour__step.is-active > :nth-child(3) { transition-delay: 0.12s; }
.tour__step.is-active > :nth-child(4) { transition-delay: 0.19s; }

.tour__when {
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tour__no { margin-right: 12px; color: var(--ember-ink); font-weight: 700; }
.tour__name {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  text-box: trim-both cap alphabetic;
}
.tour__body {
  font-size: 15px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-body);
}
.tour__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tour__tags li {
  padding: 9px 14px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-nav);
}

/* Device */
.tour__device-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  perspective: 1600px;
}
.tour__device {
  --dw: calc(var(--dev-h) * 0.48);
  transform:
    translate3d(var(--tx, 0px), var(--ty, 0px), 0)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    rotateZ(var(--rz, 0deg))
    scale(var(--ts, 1));
  transform-style: flat;
  will-change: transform;
}
@keyframes float-y { 50% { translate: 0 -12px; } }
html[data-motion="on"] .tour__device { animation: float-y 6s ease-in-out infinite; }
html[data-motion="on"] .tour__track:not(.is-visible) .tour__device { animation-play-state: paused; }

.tour__screen {
  clip-path: inset(100% 0 0 0);
  transform: translate3d(0, 6%, 0) scale(1.04);
  transition:
    clip-path 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    filter 0.9s var(--ease-out);
}
.tour__screen.is-active { clip-path: inset(0 0 0 0); transform: none; }
.tour__screen.is-past { clip-path: inset(0 0 0 0); transform: scale(0.92); filter: brightness(0.35) blur(2px); }

/* Close-ups that pop out of the phone */
.tour__detail {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --from-x: 0px;
  --from-y: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: var(--w, 260px);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: #0b0b0c;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(calc(-50% + var(--from-x)), calc(-50% + var(--from-y)), 0) scale(0.35) rotate(0deg);
  transition: transform 0.9s var(--ease-spring), opacity 0.4s ease;
}
.tour__detail img { display: block; width: 100%; height: auto; }
.tour__detail.is-active {
  opacity: 1;
  transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), 0) scale(1) rotate(var(--r));
  transition-delay: 0.25s;
}
.tour__detail--qr      { --w: 190px; --x: calc(var(--dev-w) * -0.95); --y: calc(var(--dev-h) * 0.18); --r: -6deg; --from-x: calc(var(--dev-w) * -0.2); }
.tour__detail--camera  { --w: 300px; --x: calc(var(--dev-w) * 0.92); --y: calc(var(--dev-h) * 0.26); --r: 4deg; --from-x: calc(var(--dev-w) * 0.2); --from-y: calc(var(--dev-h) * 0.3); }
.tour__detail--album   { --w: 270px; --x: calc(var(--dev-w) * 0.95); --y: calc(var(--dev-h) * -0.2); --r: 5deg; --from-x: calc(var(--dev-w) * 0.2); --from-y: calc(var(--dev-h) * -0.1); }
.tour__detail--profile { --w: 300px; --x: calc(var(--dev-w) * -1.02); --y: calc(var(--dev-h) * -0.24); --r: -4deg; --from-x: calc(var(--dev-w) * -0.2); --from-y: calc(var(--dev-h) * -0.2); }
.tour__detail--home    { --w: 210px; --x: calc(var(--dev-w) * 0.9); --y: calc(var(--dev-h) * 0.06); --r: 3deg; --from-x: calc(var(--dev-w) * 0.2);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
.tour__detail--home img { border-radius: var(--r-thumb); }
/* The phone's height; never taller than the stage leaves room for (short laptop screens). */
.tour__device-wrap { --dev-h: min(72svh, 700px, 100svh - var(--nav-h) - 168px); --dev-w: calc(var(--dev-h) * 0.48); }

@keyframes detail-float { 50% { translate: 0 -10px; } }
html[data-motion="on"] .tour__detail.is-active { animation: detail-float 5s ease-in-out 1.2s infinite; }

/* Rail */
.tour__rail {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 40px;
  z-index: 4;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px 24px;
}
.tour__count {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: 3px;
  color: var(--ink-muted);
  text-box: trim-both cap alphabetic;
}
.tour__count-n { color: var(--ink); }
.tour__rail-track {
  position: relative;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.24);
}
.tour__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--ember);
  transform-origin: left center;
  transform: scaleX(0);
}
.tour__rail-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
}
.tour__jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  font: 700 12px/1.48 var(--font-mono);
  text-transform: uppercase;
  color: var(--ink-nav);
  cursor: pointer;
  transition: color 0.2s ease;
}
.tour__jump::before,
.tour__jump::after {
  content: "";
  flex: none;
  width: 4px;
  height: 1px;
  background: url("assets/nav-bracket.svg") center / 100% 100% no-repeat;
}
.tour__jump:hover { color: var(--ink-bright); }
.tour__jump.is-active { color: var(--ink-bright); }
.tour__jump.is-active::before,
.tour__jump.is-active::after { height: 4px; background-image: url("assets/nav-bracket-active.svg"); }

/* Motion off: plain cross-fades instead of wipes and pops. */
html[data-motion="off"] .tour__screen { clip-path: none; transform: none; filter: none; opacity: 0; transition: opacity 0.3s ease; }
html[data-motion="off"] .tour__screen.is-active { opacity: 1; }
html[data-motion="off"] .tour__detail { transition: opacity 0.3s ease; transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), 0) rotate(var(--r)); }
html[data-motion="off"] .tour__step > * { transition: opacity 0.3s ease; transform: none !important; }
html[data-motion="off"] .tour__glow span { transition: none; }

/* No JS: show the steps as a plain list beside the first screen. */
html:not(.js) .tour__track { height: auto; }
html:not(.js) .tour__stage { position: relative; height: auto; overflow: visible; padding-bottom: 48px; }
html:not(.js) .tour__steps { min-height: 0; display: flex; flex-direction: column; gap: 64px; }
html:not(.js) .tour__step > * { opacity: 1; transform: none; }
html:not(.js) .tour__rail, html:not(.js) .tour__detail { display: none; }

@media (max-width: 1279px) {
  .tour__detail--qr, .tour__detail--profile { --x: calc(var(--dev-w) * -0.66); }
  .tour__detail--camera, .tour__detail--album, .tour__detail--home { --x: calc(var(--dev-w) * 0.66); }
  .tour__detail { --w: 210px !important; }
}
@media (max-width: 1023px) {
  .tour__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tour__detail { --w: 180px !important; }
}

/* Below 1440px the close-ups stay inside the phone's column, stopping at its edge
   instead of running into the copy. (1440 and up keep the original positions.) */
.tour__device-wrap { container-type: inline-size; }
.tour__detail { --xc: var(--x); }
.tour__detail.is-active { transform: translate3d(calc(-50% + var(--xc)), calc(-50% + var(--y)), 0) scale(1) rotate(var(--r)); }
html[data-motion="off"] .tour__detail { transform: translate3d(calc(-50% + var(--xc)), calc(-50% + var(--y)), 0) rotate(var(--r)); }
@media (max-width: 1439px) {
  .tour__detail { --xmax: calc(50cqw - var(--w, 260px) / 2 - 16px); --xc: clamp(-1 * var(--xmax), var(--x), var(--xmax)); }
}

/* Stacked: phones held upright and tablets in portrait. The rail sits on top, the phone
   takes whatever height is left (it is sized in container units), the copy goes underneath. */
@media (max-width: 1023px) and (orientation: portrait), (max-width: 767px) and (min-height: 561px) {
  .tour { gap: 72px; }
  .tour__track { height: 480vh; }
  .tour__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
    padding: calc(var(--nav-h) + 16px) var(--gutter) 24px;
    row-gap: 16px;
  }
  .tour__rail { position: relative; left: auto; right: auto; bottom: auto; grid-row: 1; gap: 12px 16px; }
  .tour__rail-list { display: none; }
  .tour__device-wrap { grid-row: 2; container-type: size; --dev-h: min(100cqh - 12px, 440px); }
  .tour__steps { grid-row: 3; min-height: 0; }
  .tour__step { gap: 14px; justify-content: flex-start; }
  .tour__name { font-size: 30px; }
  .tour__body { font-size: 13px; }
  .tour__tags, .tour__detail, .label--viewfinder { display: none; }
  .tour__glow span { left: 50%; top: 40%; }
}
/* Short phones (SE, mini): slightly smaller copy so the phone keeps its size. */
@media (max-width: 767px) and (max-height: 720px) and (orientation: portrait) {
  .tour__name { font-size: 26px; }
  .tour__body { font-size: 14px; line-height: 1.5; }
  .tour__step { gap: 10px; }
}
/* Tablets in portrait: room for the step buttons, the tags, and close-ups either side of the phone. */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
  .tour__rail-list { display: grid; }
  .tour__device-wrap { --dev-h: min(100cqh - 12px, 620px); }
  .tour__step { gap: 18px; max-width: 620px; }
  .tour__name { font-size: clamp(36px, 5.6vw, 52px); }
  .tour__body { font-size: 15px; }
  .tour__tags { display: flex; }
  .tour__detail { display: block; --w: min(200px, 50cqw - var(--dev-w) / 2 + 10px) !important; }
  .tour__detail--home { display: grid; }
  /* Each close-up overlaps the phone's edge by 18px, like a sticker. */
  .tour__detail--qr, .tour__detail--profile { --x: calc((var(--dev-w) + var(--w)) / -2 + 18px); }
  .tour__detail--camera, .tour__detail--album, .tour__detail--home { --x: calc((var(--dev-w) + var(--w)) / 2 - 18px); }
}
/* Phones on their side and other short screens: copy on the left with the rail above it,
   the phone on the right at the full height of the screen. */
@media (orientation: landscape) and (max-height: 560px) {
  .tour__stage {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 12px clamp(24px, 5vw, 64px);
    padding: calc(var(--nav-h) + 14px) var(--gutter) 14px;
  }
  .tour__rail { position: relative; left: auto; right: auto; bottom: auto; grid-row: 1; grid-column: 1; gap: 10px 16px; }
  .tour__rail-list { display: none; }
  .tour__steps { grid-row: 2; grid-column: 1; align-self: center; min-height: 0; }
  .tour__step { gap: 12px; max-width: 520px; }
  .tour__name { font-size: clamp(24px, 3.4vw, 34px); }
  .tour__body { font-size: 13px; }
  .tour__tags, .tour__detail, .label--viewfinder { display: none; }
  /* No close-ups here, so no container: the column sizes itself to the phone. */
  .tour__device-wrap { grid-row: 1 / -1; grid-column: 2; container-type: normal; --dev-h: calc(100svh - var(--nav-h) - 28px); }
}

/* =====================================================================
   The app
   ===================================================================== */

.app { gap: 96px; }

.strip {
  margin-inline: calc(-1 * var(--gutter));
  padding-block: 24px 64px;
  overflow: hidden;
}
.strip__row {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 48px);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}
.strip__phone { --dw: clamp(150px, 15vw, 240px); flex: none; }
.strip__phone:nth-child(even) { margin-top: clamp(40px, 6vw, 96px); }
.strip__phone:nth-child(3n) { rotate: 2deg; }
.strip__phone:nth-child(3n + 1) { rotate: -2deg; }

/* Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
}
/* The li is what gets observed; the card inside carries the look and the wipe
   (a fully clipped element never counts as on screen, so it can't trigger its own reveal). */
.feat { display: flex; }
.feat__card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 460px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(6, 6, 6, 0.32);   /* dark glass: small text stays 4.5:1+ over the glow */
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s ease;
}
.feat__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(232, 64, 46, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.feat:hover .feat__card { border-color: rgba(237, 239, 242, 0.3); }
.feat:hover .feat__card::before { opacity: 1; }
.feat--scan { grid-row: span 2; }
.feat--camera, .feat--home { grid-column: span 2; }

.feat__visual {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 32px;
  transition: transform 0.5s var(--ease-out);
}
.feat__text { display: flex; flex-direction: column; gap: 18px; padding: 0 28px 30px; }
.feat__kicker {
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ember-ink);
}
.feat__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.24;
  text-transform: uppercase;
  color: var(--ink);
}
.feat__body {
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-body);
}

/* Loops inside cards run only while the card is on screen and motion is on. */
.feat__visual *, .feat__visual *::before, .feat__visual *::after { animation-play-state: paused; }
.feat.is-visible .feat__visual *,
.feat.is-visible .feat__visual *::before,
.feat.is-visible .feat__visual *::after { animation-play-state: running; }
html[data-motion="off"] .feat__visual *,
html[data-motion="off"] .feat__visual *::before,
html[data-motion="off"] .feat__visual *::after { animation: none !important; }

/* 01 scan */
.scan { position: relative; width: min(100%, 300px); aspect-ratio: 664 / 620; }
.scan__code { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-panel); }
/* The line rides on a box spanning the scan area and moves by transform only
   (animating top cost a layout pass every frame). */
@keyframes scan-line { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 100%, 0); } }
.scan__line {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 16%;
  height: 68%;
  pointer-events: none;
  animation: scan-line 1.6s ease-in-out infinite alternate;
}
.scan__line::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--ember);
  box-shadow: 0 0 18px 4px rgba(232, 64, 46, 0.6);
}
@keyframes corner-pulse { 50% { scale: 1.08; } }
.scan__corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 0 solid var(--ink);
  animation: corner-pulse 1.6s ease-in-out infinite;
}
.scan__corner--tl { left: -8px; top: -8px; border-width: 3px 0 0 3px; }
.scan__corner--tr { right: -8px; top: -8px; border-width: 3px 3px 0 0; }
.scan__corner--bl { left: -8px; bottom: -8px; border-width: 0 0 3px 3px; }
.scan__corner--br { right: -8px; bottom: -8px; border-width: 0 3px 3px 0; }
@keyframes toast { 0%, 55% { opacity: 0; translate: -50% 12px; } 62%, 92% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; translate: -50% 0; } }
.scan__toast {
  position: absolute;
  left: 50%;
  bottom: -22px;
  translate: -50% 0;
  padding: 10px 16px 9px;
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--card-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  animation: toast 3.2s ease infinite;
}

/* 02 camera. The frame changes shape inside a fixed 300px row, so the controls
   and the cards below never move. */
.cam { display: grid; grid-template-rows: 300px auto auto; justify-items: center; align-items: center; gap: 18px; }
/* The three formats are crops of one fixed 240×300 frame (a clip, so the card never reflows):
   square 240×240, 4:3 210×280, 9:16 170×300. */
@keyframes cam-ratio {
  0%, 28% { clip-path: inset(30px 0 round var(--r-panel)); }
  33%, 61% { clip-path: inset(10px 15px round var(--r-panel)); }
  66%, 94% { clip-path: inset(0 35px round var(--r-panel)); }
  100% { clip-path: inset(30px 0 round var(--r-panel)); }
}
.cam__frame {
  position: relative;
  width: 240px;
  height: 300px;
  overflow: hidden;
  clip-path: inset(10px 15px round var(--r-panel));
  animation: cam-ratio 9s var(--ease-out) infinite;
}
.cam__frame img { width: 100%; height: 100%; object-fit: cover; }
@keyframes flash { 0%, 100% { opacity: 0; } 2% { opacity: 0.85; } 8% { opacity: 0; } }
.cam__flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flash 3s linear infinite; }
.cam__controls { display: flex; gap: 8px; }
.cam__ratio {
  padding: 8px 12px 7px;
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  font-size: 11px;
  line-height: 1;
  color: var(--ink-nav);
  animation: ratio-on 9s step-end infinite;
}
@keyframes ratio-on { 0% { border-color: var(--ink); color: var(--ink-bright); } 33% { border-color: transparent; color: var(--ink-nav); } }
.cam__ratio--2 { animation-delay: 3s; }
.cam__ratio--3 { animation-delay: 6s; }
@keyframes shutter { 0%, 100% { scale: 1; } 2% { scale: 0.86; } 8% { scale: 1; } }
.cam__shutter {
  width: 52px;
  height: 52px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 30px rgba(237, 239, 242, 0.9);
  animation: shutter 3s ease infinite;
}

/* 03 theme */
.theme { position: relative; width: min(100%, 320px); aspect-ratio: 1; display: grid; place-items: center; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.theme__wheel {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff3b30, #ff9500, #ffd60a, #34c759, #00c7be, #0a84ff, #bf5af2, #ff2d55, #ff3b30);
  -webkit-mask: radial-gradient(closest-side, transparent 68%, #000 69.5%, #000 99%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 68%, #000 69.5%, #000 99%, transparent 100%);
  animation: spin 12s linear infinite;
}
.theme__album {
  position: relative;
  width: 64%;
  border-radius: var(--r-panel);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  animation: hue 12s linear infinite;
}

/* 04 host */
.host {
  display: flex;
  flex-direction: column;
  width: min(100%, 300px);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: rgba(4, 4, 4, 0.6);
}
.host__album {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.24;
  text-transform: uppercase;
  color: var(--ink);
}
.host__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-body);
}
.switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: var(--r-pill);
  background: rgba(237, 239, 242, 0.16);
  animation: switch-bg 6s step-end infinite;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  animation: switch-knob 6s var(--ease-spring) infinite;
}
@keyframes switch-bg { 0% { background: rgba(237, 239, 242, 0.16); } 20% { background: var(--ember); } 80% { background: rgba(237, 239, 242, 0.16); } }
@keyframes switch-knob { 0%, 18% { translate: 0 0; } 22%, 78% { translate: 18px 0; } 82%, 100% { translate: 0 0; } }
.switch--2, .switch--2::after { animation-delay: 1.2s; }
.host__tag {
  padding: 6px 10px 5px;
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--card-ink);
  font-size: 10px;
  letter-spacing: 1px;
}

/* 05 profile */
.prof { display: flex; flex-direction: column; gap: 18px; width: 100%; overflow: hidden; }
.prof__head { width: 100%; border-radius: var(--r-panel); box-shadow: 0 0 0 1px var(--line); }
@keyframes chips { to { translate: -50% 0; } }
.prof__chips { display: flex; gap: 8px; width: max-content; animation: chips 16s linear infinite; }
.prof__chips span {
  padding: 9px 14px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-nav);
}

/* 06 home */
.home { width: min(100%, 520px); }
.home__tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-nav);
}
@keyframes tab-bar { 0%, 30% { translate: 0 0; } 33%, 63% { translate: 100% 0; } 66%, 96% { translate: 200% 0; } 100% { translate: 0 0; } }
.home__bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 33.333%;
  height: 2px;
  background: var(--ember);
  animation: tab-bar 9s var(--ease-out) infinite;
}
.home__list { display: flex; flex-direction: column; gap: 10px; }
@keyframes item-on { 0%, 100% { background: transparent; translate: 0 0; } 10%, 30% { background: rgba(237, 239, 242, 0.06); translate: 8px 0; } }
.home__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  border-radius: var(--r-thumb);
  animation: item-on 9s var(--ease-out) infinite;
}
.home__item:nth-child(2) { animation-delay: 3s; }
.home__item:nth-child(3) { animation-delay: 6s; }
.home__item img { width: 52px; height: 52px; border-radius: var(--r-thumb); object-fit: cover; }
.home__item span { display: flex; flex-direction: column; gap: 6px; }
.home__item b {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}
.home__item small {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Two columns: three even rows of pairs, so no card sits alone next to an empty cell. */
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat--scan { grid-row: auto; }
  .feat--camera, .feat--home { grid-column: auto; }
}
@media (max-width: 639px) {
  .bento { grid-template-columns: 1fr; }
  .feat--camera, .feat--home { grid-column: auto; }
  .feat__card { min-height: 0; }
  .feat__visual { min-height: 240px; padding: 28px 20px; }
  .feat__text { padding: 0 20px 24px; }
}

/* =====================================================================
   Marquee
   ===================================================================== */

.marquee {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-block: calc(var(--section-gap) * -0.4);
  padding-block: 32px 28px;
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.marquee__row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 112px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.marquee__sep { height: clamp(44px, 7.6vw, 122px); width: auto; }
.marquee__sep--r { rotate: 180deg; margin-left: calc(clamp(24px, 3vw, 48px) * -0.6); }
.marquee__row--small {
  gap: 24px;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-nav);   /* sits right under the big white marquee type and over the glow */
}
.marquee__row--small .px-icon { color: var(--ink-muted); }

/* =====================================================================
   The scene
   ===================================================================== */

.scene { gap: 96px; }
.scene__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
.scene__photo { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.scene__photo-frame { aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.scene__photo-frame img { width: 100%; height: 100%; object-fit: cover; scale: 1.18; will-change: translate; }
.scene__photo figcaption {
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
}
.quote__text {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 68px);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--ink);
}
/* Struck on every line it wraps to (a single absolute line only crossed one of them). */
.quote__struck {
  padding-inline: 0.04em;
  margin-inline: -0.04em;
  background: linear-gradient(var(--ember), var(--ember)) left 56% / 100% 0.08em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html[data-motion="on"] .quote__struck { transition: background-size 1.2s var(--ease-out) 0.8s; }
html[data-motion="on"] .quote:not(.is-in) .quote__struck { background-size: 0% 0.08em; }
.quote__by {
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.quote__answer {
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-body);
}

@media (max-width: 1023px) {
  .scene__grid { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .scene__photo { order: -1; width: min(100%, 520px); justify-self: center; }
}

/* =====================================================================
   What's next: timeline
   ===================================================================== */

.next { gap: 96px; }
.timeline { position: relative; padding-top: 40px; }
.timeline__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  height: 1px;
  background: var(--line);
}
.timeline__fill {
  position: absolute;
  inset: -0.5px 0;
  background: var(--ember);
  box-shadow: 0 0 12px rgba(232, 64, 46, 0.7);
  transform-origin: left center;
  transform: scaleX(var(--tl, 1));
}
.timeline__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  list-style: none;
}
.milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 16px;
}
.milestone__node {
  width: 13px;
  height: 13px;
  margin-bottom: 28px;
  border: 1px solid rgba(237, 239, 242, 0.5);
  background: var(--bg);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, scale 0.6s var(--ease-spring);
}
.milestone.is-on .milestone__node {
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: 0 0 0 6px rgba(232, 64, 46, 0.18), 0 0 24px rgba(232, 64, 46, 0.8);
  scale: 1.15;
}
.milestone__when {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 0.4s ease;
}
.milestone.is-on .milestone__when { color: var(--ember-ink); }
.milestone__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.24;
  text-transform: uppercase;
  color: var(--ink);
}
.milestone__body {
  font-size: 13px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-body);
}
html[data-motion="on"] .milestone > :not(.milestone__node) { transition: opacity 0.6s ease, transform 0.8s var(--ease-out), color 0.4s ease; }
/* Not-yet-reached milestones stay readable (4.5:1+); the node and the red label carry the state. */
html[data-motion="on"] .milestone:not(.is-on) > :not(.milestone__node) { opacity: 0.72; transform: translate3d(0, 12px, 0); }

@media (max-width: 899px) {
  .timeline { padding-top: 0; padding-left: 40px; }
  .timeline__track { left: 6px; right: auto; top: 6px; bottom: 0; width: 1px; height: auto; }
  .timeline__fill { inset: 0 -0.5px; transform-origin: center top; transform: scaleY(var(--tl, 1)); }
  .timeline__list { grid-template-columns: 1fr; gap: 56px; }
  .milestone__node { position: absolute; left: -40px; top: 0; margin: 0; }
}

/* =====================================================================
   Try it out
   ===================================================================== */

.cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: calc(-1 * var(--rail));
  padding: 120px var(--rail) 80px;
  overflow: hidden;
}
/* min-width: 0 lets the column shrink below the lede + card width instead of being clipped. */
.cta__inner { position: relative; z-index: 1; flex: 1; min-width: 0; gap: 72px; }
.cta__title {
  font-family: var(--font-display);
  font-size: clamp(52px, 8.6vw, 150px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-bright);
}
.cta__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.cta__lede {
  width: 420px;
  max-width: 100%;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(4, 4, 4, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 14px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-body);
}
.cta__card { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); }
.beta-card__btn[data-magnetic] { transition: background-color 0.2s ease, transform 0.35s var(--ease-out); }

/* Lede and card side by side need about 900px; below that they stack. */
@media (max-width: 1023px) {
  .cta__row { flex-direction: column; align-items: flex-start; gap: 32px; }
}
@media (max-width: 767px) {
  .cta { padding-top: 96px; }
  .cta__row { align-items: stretch; }
  .cta__lede { width: auto; }
}

/* =====================================================================
   Footer
   ===================================================================== */

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 72px;
  margin-inline: var(--rail);
  padding: 96px var(--gutter) 36px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}
.footer__top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 32px;
  align-items: start;
}
.footer__label {
  margin-bottom: 20px;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.footer__nav ul { display: flex; flex-direction: column; gap: 4px; list-style: none; }
.footer__nav a,
.footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.2s ease, translate 0.3s var(--ease-out);
}
.footer__nav a:hover { color: var(--ember); translate: 6px 0; }
.footer__top-link:hover { color: var(--ember); }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col p:not(.footer__label) {
  font-size: 13px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-body);
}
.footer__col .footer__label { margin-bottom: 10px; }

.footer__mark { container-type: inline-size; overflow: hidden; }
.footer__mark-inner {
  --fu: calc(100cqi / 840);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(21.567 * var(--fu));
}
.footer__paren { width: calc(74.146 * var(--fu)); height: calc(247.303 * var(--fu)); }
.footer__paren--right { rotate: 180deg; }
.footer__wordmark { width: calc(648.574 * var(--fu)); height: calc(174.777 * var(--fu)); }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 899px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* =====================================================================
   Label vectors (generated by labels.js)
   ===================================================================== */

.label {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  color: var(--ink);
}
.label svg { display: block; width: 100%; height: auto; overflow: visible; }

.lb-l { stroke: rgba(237, 239, 242, 0.62); stroke-width: 1; }
.lb-ld { stroke: rgba(237, 239, 242, 0.3); stroke-width: 1; }
.lb-f { fill: var(--ink); }
.lb-e { fill: var(--ember); }
.lb-bg { fill: var(--bg); }
.lb-bandbg { fill: #0b0b0c; }
.lb text { font-family: var(--font-mono); }
.lb-t { fill: var(--ink); letter-spacing: 0.06em; }
.lb-tm { fill: rgba(237, 239, 242, 0.56); letter-spacing: 0.08em; }
.lb-te { fill: var(--ember); }
.lb-tb { fill: var(--bg); font-weight: 700; letter-spacing: 0.12em; }
.lb .lb-td { font-family: var(--font-display); fill: var(--ink); }
.lb-seg, .lb-seg2 { fill: rgba(237, 239, 242, 0.18); transition: fill 0.4s ease; }
.lb-seg.is-on { fill: var(--ember); }
.lb-seg2[data-on="1"] { fill: var(--ember); }

/* Draw on: frame first, then contents, then barcodes print and codes resolve. */
html[data-motion="on"] .lb-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) 0.1s; }
html[data-motion="on"] .label.is-in .lb-draw { stroke-dashoffset: 0; }
html[data-motion="on"] .lb-c { transition: opacity 0.6s ease 0.45s; }
html[data-motion="on"] .label:not(.is-in) .lb-c { opacity: 0; }
.lb-bar { transform-box: fill-box; transform-origin: 50% 100%; }
html[data-motion="on"] .lb-bar { transition: transform 0.5s var(--ease-out) calc(0.6s + var(--b, 0) * 9ms); }
html[data-motion="on"] .label:not(.is-in) .lb-bar { transform: scaleY(0); }
html[data-motion="on"] .lb-qr { transition: opacity 0.15s ease calc(0.7s + var(--q, 0) * 35ms); }
html[data-motion="on"] .label:not(.is-in) .lb-qr { opacity: 0; }

/* Loops */
@keyframes lb-blink { 50% { opacity: 0.15; } }
@keyframes lb-scan { to { transform: translateX(var(--sx)); } }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@keyframes lb-seg2 { 0%, 8% { fill: rgba(237, 239, 242, 0.18); } 14%, 100% { fill: var(--ember); } }

.lb-blink { animation: lb-blink 1.4s steps(1) infinite; }
.lb-scan { animation: lb-scan 2.6s ease-in-out infinite alternate; }
.lb-spin { animation: lb-spin 14s linear infinite; }
.lb-ring { transform-box: view-box; transform-origin: 100px 100px; animation: lb-spin 36s linear infinite; }
.lb-seg2[data-on="1"] { animation: lb-seg2 4.8s steps(1) infinite; animation-delay: calc(var(--s) * 0.18s); }

.label:not(.is-visible) *,
.band:not(.is-visible) * { animation-play-state: paused !important; }
html[data-motion="off"] .label *,
html[data-motion="off"] .band * { animation: none !important; transition: none !important; }

/* ---------- Placement ---------- */

.label--roll {
  left: 50%;
  bottom: 48px;
  width: 300px;
  translate: -50% 0;
  rotate: -3deg;
}
.hero__bottom { position: relative; }

.about .section__intro,
.problem .section__intro,
.next .section__intro { position: relative; }
.label--contact { right: 0; top: -8px; width: 300px; rotate: 2deg; }
.label--polaroids { right: 0; top: 0; width: 260px; rotate: -2deg; }
.label--lab { right: 0; top: -12px; width: 300px; rotate: 1.5deg; }

.label--viewfinder { right: var(--gutter); top: calc(var(--nav-h) + 28px); width: 230px; z-index: 5; }

.scene__photo { position: relative; }
.label--stamp { left: -64px; top: -64px; width: 168px; z-index: 3; }

.label--film {
  left: 50%;
  bottom: 18%;
  width: min(760px, 70vw);
  translate: -18% 0;
  rotate: -9deg;
  z-index: 0;
  opacity: 0.95;
}

.footer__labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.footer__labels .label { position: relative; inset: auto; width: 100%; max-width: 220px; }
.footer__labels .label:nth-child(even) { rotate: 1.5deg; translate: 0 8px; }
.footer__labels .label:nth-child(odd) { rotate: -1deg; }

@media (max-width: 1279px) {
  .label--roll { display: none; }
}
@media (max-width: 1199px) {
  .label--polaroids { display: none; }
}
@media (max-width: 1023px) {
  .label--contact, .label--lab { display: none; }
  .label--stamp { left: auto; right: -12px; top: -56px; width: 140px; }
}
@media (max-width: 767px) {
  .label--viewfinder { display: none; }
  .label--stamp { left: auto; right: -12px; top: -48px; width: 120px; }
  .label--film { width: 120vw; left: -10vw; translate: none; bottom: 6%; opacity: 0.6; }
  .footer__labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Hazard band (App section) ---------- */

.band {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  margin-inline: calc(-1 * var(--gutter));
  padding-block: 8px;
}
.band__stripes {
  flex: 1;
  height: clamp(28px, 3vw, 44px);
  background: repeating-linear-gradient(-55deg, var(--ink) 0 9px, transparent 9px 22px);
  background-size: 52px 100%;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
  mask-image: linear-gradient(to right, transparent, #000 30%);
}
.band__stripes--r {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 30%);
  mask-image: linear-gradient(to left, transparent, #000 30%);
}
@keyframes band-stripes { to { background-position: 52px 0; } }
html[data-motion="on"] .band__stripes { animation: band-stripes 1.6s linear infinite; }
html[data-motion="on"] .band__stripes--r { animation-direction: reverse; }
.band__word {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 96px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.band__meta {
  position: absolute;
  top: calc(100% + 6px);
  right: var(--gutter);
  font-size: 10px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.band__rule {
  position: absolute;
  left: 50%;
  width: 0;
  height: 72px;
  border-left: 2px dotted rgba(237, 239, 242, 0.5);
}
.band__rule::after {
  content: "";
  position: absolute;
  left: -6px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(237, 239, 242, 0.7);
  border-radius: 50%;
  background: var(--bg);
}
.band__rule--top { bottom: calc(100% + 4px); }
.band__rule--top::after { top: -10px; }
.band__rule--bottom { top: calc(100% + 4px); }
.band__rule--bottom::after { bottom: -10px; }
html[data-motion="on"] .band .band__rule { transform-origin: top; transition: transform 1.2s var(--ease-out) 0.3s; }
html[data-motion="on"] .band:not(.is-in) .band__rule { transform: scaleY(0); }
/* The word opens from its centre in pixel steps (a clip, so nothing beside it moves). */
html[data-motion="on"] .band .band__word { transition: clip-path 0.9s steps(9, end) 0.15s, opacity 0.4s ease 0.15s; }
html[data-motion="on"] .band:not(.is-in) .band__word { clip-path: inset(0 50% 0 50%); opacity: 0; }

/* Phones: the caption moves left and the dimension lines move right, so they never cross. */
@media (max-width: 767px) {
  .band__word { font-size: clamp(28px, 9vw, 40px); }
  .band__meta { right: auto; left: var(--gutter); max-width: calc(100% - 2 * var(--gutter) - 40px); letter-spacing: 1.5px; white-space: nowrap; }
  .band__rule { left: auto; right: calc(var(--gutter) + 14px); }
}
@media (max-width: 379px) {
  .band__meta { white-space: normal; text-wrap: balance; }
}

/* =====================================================================
   Film grain over the whole site
   ===================================================================== */

.grain {
  position: fixed;
  inset: -8%;
  z-index: 40;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.9 0 0 0 -0.86'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.2;
  contain: strict;
}
@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  10%  { transform: translate3d(-3%, -4%, 0); }
  20%  { transform: translate3d(4%, 2%, 0); }
  30%  { transform: translate3d(-2%, 5%, 0); }
  40%  { transform: translate3d(5%, -3%, 0); }
  50%  { transform: translate3d(-4%, 3%, 0); }
  60%  { transform: translate3d(2%, -5%, 0); }
  70%  { transform: translate3d(-5%, -1%, 0); }
  80%  { transform: translate3d(3%, 4%, 0); }
  90%  { transform: translate3d(-1%, -3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
html[data-motion="on"] .grain { animation: grain 1s steps(1) infinite; will-change: transform; }
/* Phones: their 3x screens drew each speck as a chunky 3px dot, seen from close up.
   A smaller tile makes the grain finer, and it sits at half the strength. */
@media (max-width: 767px) {
  .grain { background-size: 150px 150px; opacity: 0.1; }
}

/* ---------- Photo-lab labels (roll, contact sheet, polaroids, film) ---------- */

.lb-pick { stroke: var(--ember); stroke-width: 2; }
.lb-fd { fill: rgba(237, 239, 242, 0.3); }
.lb-strip, .lb-tagbg { fill: #0b0b0c; }
.lb-tagbg { stroke: rgba(237, 239, 242, 0.3); }
.lb-dark { fill: #141416; }
.lb-hole { fill: var(--bg); stroke: rgba(237, 239, 242, 0.35); stroke-width: 0.6; }
.lb-paper { fill: var(--ink); }
.lb-paper2 { fill: #cfd2d8; }
.lb-stampbox { stroke: var(--ember); stroke-width: 2; fill: rgba(4, 4, 4, 0.62); }
.lb .lb-tde { font-family: var(--font-display); fill: var(--ember); }
.lb .lb-tdk { font-family: var(--font-display); fill: var(--bg); }
.lb-te { fill: var(--ember); }

/* Photos develop in, polaroids drop onto the table, the stamp lands last. */
html[data-motion="on"] .lb-photo { transition: opacity 1.1s ease calc(0.7s + var(--p, 0) * 0.18s); }
html[data-motion="on"] .label:not(.is-in) .lb-photo { opacity: 0; }
.lb-pol { transform-box: view-box; transform-origin: 130px 120px; }
html[data-motion="on"] .lb-pol { transition: transform 1s var(--ease-spring) var(--pd, 0s), opacity 0.5s ease var(--pd, 0s); }
html[data-motion="on"] .label:not(.is-in) .lb-pol { opacity: 0; transform: translate(0, -28px) rotate(var(--pr, 6deg)); }
.lb-slam { transform-box: fill-box; transform-origin: center; }
html[data-motion="on"] .lb-slam { transition: transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 1.05s, opacity 0.2s ease 1.05s; }
html[data-motion="on"] .label:not(.is-in) .lb-slam { opacity: 0; transform: scale(1.7) rotate(8deg); }
.label--polaroids { right: 0; top: -24px; width: 260px; rotate: 2deg; }
.label--film { width: min(760px, 72vw); }

/* =====================================================================
   Pixel kit (pixels.js)
   ===================================================================== */

/* Pixel icons: 12×12 bitmaps, frames swap in steps while on screen. */
.px-icon {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--ember);
  vertical-align: -1px;
}
.px-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.px-f { opacity: 0; }
.px-f:first-child { opacity: 1; }
@keyframes px-2 { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes px-3 { 0%, 33.2% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
html[data-motion="on"] .px-icon.is-visible [data-n="2"] .px-f { animation: px-2 var(--px-dur, 1.1s) infinite; }
html[data-motion="on"] .px-icon.is-visible [data-n="3"] .px-f { animation: px-3 var(--px-dur, 1.6s) infinite; }
/* First sight: the pixels assemble. */
html[data-motion="on"] .px-icon rect { transition: opacity 0.05s linear calc(var(--r, 0) * 520ms); }
html[data-motion="on"] .px-icon:not(.is-in) rect { opacity: 0; }

.feat__kicker, .tour__when, .milestone__when {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tour__no { margin-right: 0; }
.footer__top-link .px-icon { color: currentColor; }

/* Load-in: the page starts covered so nothing flashes before the blocks take over. */
html.js[data-motion="on"]:not(.px-loaded) body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--bg);
  animation: px-failsafe 0s linear 2.5s forwards; /* never stays if a script fails */
}
@keyframes px-failsafe { to { visibility: hidden; } }
.px-curtain {
  position: fixed;
  inset: 0;
  z-index: 95;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Resolve: a low-res copy of the image, scaled up with hard pixels. */
.px-resolve {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Progress bars fill in pixel blocks. */
.nav__fill, .tour__rail-fill {
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px);
  mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px);
}

/* Buttons fill in stepped blocks on hover. */
.beta-card__btn { position: relative; overflow: hidden; isolation: isolate; }
.beta-card__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ember-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s steps(8, end);
}
.beta-card__btn:hover { background: var(--card-ink); }
.beta-card__btn:hover::before { transform: scaleX(1); }

/* Nav brackets hop outward on hover, one pixel step at a time. */
.nav__link::before, .nav__link::after, .tour__jump::before, .tour__jump::after { transition: translate 0.2s steps(2, end); }
.nav__link:hover::before, .tour__jump:hover::before { translate: -3px 0; }
.nav__link:hover::after, .tour__jump:hover::after { translate: 3px 0; }

/* Labels are hoverable so the cursor can scan them. */
.label { pointer-events: auto; }

/* =====================================================================
   Cursor (cursor.js)
   ===================================================================== */

html.has-cursor, html.has-cursor * { cursor: none !important; }

.cursor {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cursor.is-visible { opacity: 1; }
.cursor > span { position: absolute; top: 0; left: 0; will-change: transform; }

.cursor__corner {
  width: 9px;
  height: 9px;
  border: 0 solid var(--ink);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.cursor__corner:nth-child(1) { border-width: 2px 0 0 2px; }
.cursor__corner:nth-child(2) { border-width: 2px 2px 0 0; }
.cursor__corner:nth-child(3) { border-width: 0 0 2px 2px; }
.cursor__corner:nth-child(4) { border-width: 0 2px 2px 0; }

.cursor__dot {
  width: 6px;
  height: 6px;
  background: var(--ember);
  transition: opacity 0.2s ease, width 0.2s steps(2), height 0.2s steps(2);
}

.cursor__cross {
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cursor__cross::before, .cursor__cross::after {
  content: "";
  position: absolute;
  background: var(--ember);
}
.cursor__cross::before { left: -7px; top: -1px; width: 14px; height: 2px; }
.cursor__cross::after { left: -1px; top: -7px; width: 2px; height: 14px; }

.cursor__flash {
  width: 100px;
  height: 100px;
  background: #fff;
  opacity: 0;
  transform-origin: 0 0;
}
@keyframes shutter-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
.cursor__flash.is-firing { animation: shutter-flash 0.35s ease-out; }

.cursor__label {
  padding: 5px 8px 4px;
  background: var(--card);
  color: var(--card-ink);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cursor__label.is-on { opacity: 1; }

/* States */
.cursor[data-mode="link"] .cursor__corner { border-color: var(--ember); }
.cursor[data-mode="link"] .cursor__dot { opacity: 0; }
.cursor[data-mode="view"] .cursor__cross { opacity: 1; }
.cursor[data-mode="view"] .cursor__dot { opacity: 0; }
.cursor[data-mode="text"] .cursor__corner { opacity: 0; }
.cursor[data-mode="text"] .cursor__dot { width: 4px; height: 26px; margin-top: -10px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.cursor[data-mode="scan"] .cursor__corner { border-color: var(--ember); }
.cursor[data-mode="scan"] .cursor__dot { width: 76px; height: 2px; margin-left: -35px; animation: cursor-scan 1.1s ease-in-out infinite alternate; }
@keyframes cursor-scan { from { translate: 0 -20px; } to { translate: 0 20px; } }
.cursor.is-down .cursor__corner { border-color: var(--ember); }

/* Smaller screens: the photo labels join the flow instead of floating. */
@media (max-width: 1199px) {
  .label--polaroids { display: block; position: relative; inset: auto; width: min(240px, 70%); margin: 8px 0 -8px auto; rotate: 3deg; }
}
@media (max-width: 1023px) {
  .label--contact { display: block; position: relative; inset: auto; width: min(300px, 100%); margin: 0 0 0 auto; rotate: -1.5deg; }
}

/* =====================================================================
   Loader (loader.js)
   ===================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 96;
  overflow: hidden;
  background: var(--bg);
  pointer-events: auto;
  transition: background-color 0.55s ease 0.15s;
}
.loader.is-exit { background-color: transparent; pointer-events: none; }

.loader__cuts { position: absolute; inset: 0; }
.loader__cut {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.loader__cut.is-shown { opacity: 1; }
.loader__cut--photo { image-rendering: pixelated; }
.loader__cut--type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4vw;
  font-family: var(--font-display);
  font-size: clamp(64px, 19vw, 300px);
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.loader__cut--type.is-ink { color: rgba(237, 239, 242, 0.16); }
.loader__cut--type.is-ink span:nth-child(2n) { color: rgba(237, 239, 242, 0.08); padding-left: 12vw; }
.loader__cut--type.is-ember { color: rgba(232, 64, 46, 0.55); }

/* Frame on the site's chrome lines */
.loader__frame .lf { position: absolute; background: rgba(237, 239, 242, 0.3); transition: transform 0.7s var(--ease-out); }
.loader__frame .lf--h { height: 1px; transform: scaleX(0); transform-origin: left center; }
.loader__frame .lf--v { width: 1px; transform: scaleY(0); transform-origin: center top; }
.loader.is-frame .loader__frame .lf { transform: none; }
.loader.is-exit .loader__frame { opacity: 0; transition: opacity 0.4s ease; }

.lsq {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--ink);
  scale: 0;
  transition: scale 0.35s steps(3, end) 0.25s;
}
.loader.is-frame .lsq--frame { scale: 1; }

/* Cell grid through the logo */
.loader__grid .lg { position: absolute; background: rgba(237, 239, 242, 0.32); transition: transform 0.55s var(--ease-out); }
.loader__grid .lg--h { left: 0; right: 0; height: 1px; transform: scaleX(0); }
.loader__grid .lg--v { top: 0; bottom: 0; width: 1px; transform: scaleY(0); }
.loader.is-grid .loader__grid .lg { transform: none; }
.loader.is-retract .loader__grid .lg { transform: scale(0); transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
.lsq--cell { transition: scale 0.3s steps(3, end), translate 0.7s var(--ease-out), opacity 0.4s ease 0.35s; }
.loader.is-grid .lsq--cell { scale: 1; }
.loader.is-exit .lsq--cell { translate: var(--tx) var(--ty); opacity: 0; }

/* The logo: brackets during the cuts, then the wordmark lands */
.loader__logo img { position: absolute; display: block; max-width: none; transition: filter 0.1s steps(1); }
.loader__paren--r { rotate: 180deg; }
.loader__word { clip-path: inset(0 100% 0 0); transition: clip-path 0.6s var(--ease-out); }
.loader.is-word .loader__word { clip-path: inset(0 0 0 0); }
.loader__logo .loader__paren { opacity: 0; transition: opacity 0.2s ease; }
.loader__logo.is-brackets .loader__paren, .loader.is-word .loader__paren { opacity: 1; }
.loader__logo.is-ember .loader__paren { filter: brightness(0) saturate(100%) invert(36%) sepia(76%) saturate(2620%) hue-rotate(345deg) brightness(95%); }
.loader__logo { position: absolute; inset: 0; }
.loader.is-exit .loader__logo { transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1); }
.loader.is-exit .loader__logo.is-free { opacity: 0; transition: opacity 0.4s ease 0.2s; }
/* The hero's own logo waits until the loader's lands on top of it. */
html.has-loader:not(.logo-landed) .hero__mark { opacity: 0; }

/* Meta row */
.loader__meta {
  position: absolute;
  left: calc(var(--rail) + var(--gutter));
  right: calc(var(--rail) + var(--gutter));
  bottom: 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0;
  transition: opacity 0.4s ease 0.3s;
}
.loader.is-frame .loader__meta { opacity: 1; }
.loader.is-exit .loader__meta { opacity: 0; transition-delay: 0s; }
.loader__pct { color: var(--ink); font-weight: 700; min-width: 10ch; text-align: right; }
@media (max-width: 639px) { .loader__frameno { display: none; } }

/* Short version on repeat visits: no cuts, quicker lines. */
.loader.is-short .loader__frame .lf { transition-duration: 0.35s; }

/* Hero intro waits for the loader; when it hands off, the logo is already in place. */
html.has-loader:not(.hero-go) .hero__in,
html.has-loader:not(.hero-go) .hero__paren,
html.has-loader:not(.hero-go) .hero__wordmark { animation-play-state: paused; }
html.hero-from-loader .hero__in { animation-delay: calc(var(--d, 0.9s) - 0.65s); }
html.hero-from-loader .hero__paren--left,
html.hero-from-loader .hero__paren--right,
html.hero-from-loader .hero__wordmark,
html.hero-from-loader .backdrop__canvas { animation: none; }

/* =====================================================================
   More label types: callouts, warning, ring, signal, connectors, globe,
   crop marks, house rules. Each one moves its own way.
   ===================================================================== */

.lb-tri { stroke: var(--ember); stroke-width: 1.5; }
.lb-ants { stroke: rgba(237, 239, 242, 0.45); stroke-width: 1; stroke-dasharray: 5 4; animation: lb-ants 1s linear infinite; }
@keyframes lb-ants { to { stroke-dashoffset: -18; } }
.lb-bang { animation: lb-bang 1.6s steps(1) infinite; }
@keyframes lb-bang { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.15; } }

.lb-pulse { transform-box: fill-box; transform-origin: center; animation: lb-pulse 1.8s ease-out infinite; }
@keyframes lb-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.2); opacity: 0; } }
html[data-motion="on"] .lb-draw--slow { transition-duration: 1.4s; }

.lb-rseg { fill: rgba(237, 239, 242, 0.16); transition: fill 0.2s ease calc(0.5s + var(--s, 0) * 35ms); }
.label.is-in .lb-rseg[data-on="1"], html[data-motion="off"] .lb-rseg[data-on="1"] { fill: var(--ember); }
.lb-dash { stroke: rgba(237, 239, 242, 0.35); stroke-width: 1; stroke-dasharray: 2 5; }
.lb-spin-slow { animation: lb-spin 40s linear infinite reverse; }

.lb-dot { fill: rgba(237, 239, 242, 0.5); transform-box: fill-box; transform-origin: center; animation: lb-wave 2.2s ease-in-out infinite; animation-delay: calc(var(--x) * 90ms + var(--y) * 40ms); }
@keyframes lb-wave { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.25); } }
.lb-hunt { animation: lb-hunt 6s steps(1) infinite; }
@keyframes lb-hunt {
  0% { transform: translate(0, 0); } 16% { transform: translate(91px, 22px); } 33% { transform: translate(160px, 0); }
  50% { transform: translate(57px, 44px); } 66% { transform: translate(205px, 33px); } 83% { transform: translate(114px, 11px); }
}

.lb-flow { stroke: rgba(237, 239, 242, 0.55); stroke-width: 1.5; stroke-dasharray: 3 6; animation: lb-flow 0.9s linear infinite; }
@keyframes lb-flow { to { stroke-dashoffset: -18; } }
.lb-node { fill: var(--bg); stroke: var(--ember); stroke-width: 1.5; animation: lb-node 3s steps(1) infinite; animation-delay: calc(var(--k, 0) * 1s); }
@keyframes lb-node { 0%, 33% { fill: var(--ember); } 34%, 100% { fill: var(--bg); } }

.lb-mer { transform-box: fill-box; transform-origin: center; animation: lb-mer 6s ease-in-out infinite; }
@keyframes lb-mer { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }

.lb-measure { transform-box: fill-box; transform-origin: center; }
html[data-motion="on"] .lb-measure { transition: transform 1.2s var(--ease-out) 0.5s; }
html[data-motion="on"] .label:not(.is-in) .lb-measure--h { transform: scaleX(0); }
html[data-motion="on"] .label:not(.is-in) .lb-measure--v { transform: scaleY(0); }

.lb-tile { fill: #0b0b0c; stroke: rgba(237, 239, 242, 0.45); stroke-width: 1; }
.lb-flip { transform-box: fill-box; transform-origin: center; animation: lb-flip 5s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 0.35s); }
@keyframes lb-flip { 0%, 84%, 100% { transform: scaleX(1); } 92% { transform: scaleX(0.04); } }

/* Placement */
/* Callouts sit in the staircase gap above phones 4 and 5. Positions are in units of
   the phone's width (cqi), so each node lands on its phone's top bezel at any size. */
.phone { position: relative; container-type: inline-size; }
.label--callout { left: 36cqi; width: 78cqi; z-index: 3; }
.label--callout-1 { top: 34.5cqi; }  /* phone 4: screen starts 60cqi down */
.label--callout-2 { top: 53.5cqi; }  /* phone 5: screen starts 79cqi down */
.label--warn { right: 0; top: -56px; width: 150px; }
.oldways { position: relative; }
.lb-disc { fill: rgba(4, 4, 4, 0.74); }
.label--crop { left: -20px; top: -20px; width: calc(100% + 40px); z-index: 2; }
.label--rules { position: relative; inset: auto; width: min(320px, 100%); }
.app .section__intro { position: relative; }
.label--signal { right: 0; top: -16px; width: 250px; rotate: -1.5deg; }
.tour, .next { position: relative; }
.label--connector {
  left: 50%;
  top: calc(-1 * var(--section-gap) + 12px);
  width: clamp(28px, calc(var(--section-gap) * 0.17), 56px);
  translate: -50% 0;
}
.label--globe { position: relative; inset: auto; width: min(240px, 100%); }

@media (max-width: 1199px) { .label--signal { display: none; } }
@media (max-width: 1023px) {
  .label--callout { display: none; }
}
@media (max-width: 767px) { .label--warn { display: none; } }

/* =====================================================================
   Section entrances
   ===================================================================== */

/* Every section head draws a hairline with pixel end-caps, like the loader grid. */
.section__head { position: relative; padding-bottom: 28px; }
.section__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background:
    linear-gradient(var(--ink), var(--ink)) left center / 6px 6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right center / 6px 6px no-repeat,
    linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
  transform-origin: left center;
}
html[data-motion="on"] [data-reveal="rule"]:not(.is-in) { opacity: 1; transform: none; }
html[data-motion="on"] [data-reveal="rule"]::after { transition: transform 1.2s var(--ease-out) 0.15s; }
html[data-motion="on"] [data-reveal="rule"]:not(.is-in)::after { transform: scaleX(0); }

/* Feature cards wipe open in stepped blocks. */
html[data-motion="on"] .feat[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
html[data-motion="on"] .feat__card { transition: clip-path 0.7s steps(7, end) calc(var(--i, 0) * 110ms), border-color 0.3s ease; }
html[data-motion="on"] .feat:not(.is-in) .feat__card { clip-path: inset(0 0 100% 0 round var(--r-card)); }
.feat.is-in .feat__card { clip-path: inset(0 0 0 0 round var(--r-card)); }

/* The film strip slides in from the right. */
html[data-motion="on"] .label--film { transition: transform 1.6s var(--ease-out) 0.2s; }
html[data-motion="on"] .label--film:not(.is-in) { transform: translateX(45vw); }

/* =====================================================================
   Footer: full width, a marketing close
   ===================================================================== */

.footer {
  z-index: 19;
  margin-inline: 0;
  padding: 120px calc(var(--rail) + var(--gutter)) 36px;
  background:
    radial-gradient(60% 46% at 50% 100%, rgba(196, 58, 32, 0.38), transparent 72%),
    var(--bg);
}
.footer__lead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--line);
}
.footer__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.footer__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.2vw, 104px);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--ink);
}
.footer__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; flex: none; }
.footer__note {
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 3px;
  text-align: right;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer__col--end { align-items: flex-start; }
.footer__mark { margin-inline: calc(-1 * (var(--rail) + var(--gutter)) + 12px); }

/* Light pill button (footer); fills in stepped ember blocks on hover. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px 48px;
  border-radius: var(--r-pill);
  overflow: hidden;
  isolation: isolate;
  font: 400 11px/1.48 var(--font-mono);
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: color 0.2s ease, transform 0.35s var(--ease-out);
}
.btn > span { display: block; text-box: trim-both cap alphabetic; }
.btn--light { background: var(--card); color: var(--card-ink); }
.btn--light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ember-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s steps(8, end);
}
.btn--light:hover { color: #fff; }
.btn--light:hover::before { transform: scaleX(1); }

@media (max-width: 899px) {
  .footer__lead { flex-direction: column; align-items: flex-start; }
  .footer__actions { align-items: flex-start; }
  .footer__note { text-align: left; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
  .footer__top { grid-template-columns: 1fr; }
}


/* =====================================================================
   Every icon is pixel art (pixel-icons.js)
   ===================================================================== */

/* Frames swap inside the label graphics too. */
html[data-motion="on"] .label.is-visible [data-n="2"] .px-f { animation: px-2 var(--px-dur, 1.1s) infinite; }
html[data-motion="on"] .label.is-visible [data-n="3"] .px-f { animation: px-3 var(--px-dur, 1.6s) infinite; }

.motion-toggle__icon .px-icon { position: absolute; inset: 0; color: currentColor; }
.motion-toggle__play { display: none; }
html[data-motion="off"] .motion-toggle__pause { display: none; }
html[data-motion="off"] .motion-toggle__play { display: inline-block; }

.scan__toast { display: inline-flex; align-items: center; gap: 6px; }

/* The nav logo's brackets hop outward on hover, one pixel step at a time. */
.nav__mark img:nth-child(1), .nav__mark img:nth-child(3) { transition: translate 0.2s steps(2, end); }
.nav__logo:hover .nav__mark img:nth-child(1) { translate: -2px 0; }
.nav__logo:hover .nav__mark img:nth-child(3) { translate: 2px 0; }

/* =====================================================================
   Nav hover = the "How it works" look
   The 4×1 bracket lines grow into 4×4 squares in pixel steps, the label turns
   white and scales to the active 14px size (a scale, so the other links never
   shift), and the brackets move out by exactly what the label grew (--grow).
   ===================================================================== */

.nav__link::before, .nav__link::after,
.nav__toggle::before, .nav__toggle::after,
.tour__jump::before, .tour__jump::after {
  background: rgba(255, 255, 255, 0.48);
  transition: height 0.24s steps(3, end), background-color 0.2s ease, translate 0.28s var(--ease-out);
}
.nav__link[aria-current="true"]::before, .nav__link[aria-current="true"]::after,
.nav__toggle::before, .nav__toggle::after,
.tour__jump.is-active::before, .tour__jump.is-active::after,
.nav__link:is(:hover, :focus-visible)::before, .nav__link:is(:hover, :focus-visible)::after,
.tour__jump:is(:hover, :focus-visible)::before, .tour__jump:is(:hover, :focus-visible)::after {
  height: 4px;
  background-color: var(--ink-bright);
}
.nav__link:is(:hover, :focus-visible), .tour__jump:is(:hover, :focus-visible) { color: var(--ink-bright); }
.nav__link[aria-current="true"]:hover::before, .nav__link[aria-current="true"]:hover::after { translate: none; }
.nav__link .nav__label { transition: transform 0.28s var(--ease-out); }

@media (min-width: 900px) {
  .nav__link:not([aria-current="true"]):is(:hover, :focus-visible) .nav__label { transform: scale(1.1667); }
  .nav__link:not([aria-current="true"]):is(:hover, :focus-visible)::before { translate: calc(-1 * var(--grow, 4px)) 0; }
  .nav__link:not([aria-current="true"]):is(:hover, :focus-visible)::after { translate: var(--grow, 4px) 0; }
}

/* =====================================================================
   Cursor trail (trail.js): white pixel cells that invert what's under them
   ===================================================================== */

.trail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;              /* over the nav, rails and footer; under the grain and the cursor */
  pointer-events: none;
  image-rendering: pixelated;
  mix-blend-mode: difference;
  visibility: hidden;       /* no blending cost while there's nothing to draw */
}
.trail.is-on { visibility: visible; }

/* =====================================================================
   Small screens and touch
   ===================================================================== */

/* "Download the beta now" stays on one line down to 320px. */
@media (max-width: 479px) {
  .beta-card__btn, .btn { padding-inline: 20px; letter-spacing: 2px; }
}

/* 10px captions are too small to read on a phone; 11px is the site's smallest size. */
@media (max-width: 767px) {
  .phone__desc, .band__meta, .prof__chips span, .home__item small, .host__tag, .tour__tags li { font-size: 11px; }
}

/* Touch: every control is at least 44px tall (WCAG 2.5.5). */
@media (pointer: coarse) {
  .motion-toggle, .footer__nav a, .footer__top-link, .tour__jump, .nav__link { min-height: 44px; }
  .footer__nav ul { gap: 0; }
}

/* Headlines break into even lines (no word left alone on the last one); body copy
   avoids one-word last lines. Each segment between forced breaks balances on its own. */
.section__title, .cta__title, .footer__title, .tour__name, .feat__title, .milestone__title,
.quote__text, .phone__title, .oldway__name { text-wrap: balance; }
.section__lede, .hero__intro, .tour__body, .feat__body, .milestone__body, .cta__lede,
.oldways__after, .quote__answer, .phone__desc { text-wrap: pretty; }

/* Phones: the hero as one composition on a single left edge.
   Top third:  a status chip, the logo, then the line in two rows.
   Bottom:     the pitch, the button, and a one-row strip.
   Spare height goes 1 : 2 above the chip and below the line, so the brand sits high
   and the call to action sits where the thumb is.
   Contrast: the line sits on the brightest glow, so it stays large (28px, 3:1+) and
   light; the intro is full ink (4.5:1+); the chip has its own dark glass. */
@media (max-width: 767px) {
  .hero { gap: 0; }
  .hero::before { content: ""; flex: 1 1 0; min-height: 12px; }

  .hero__beta {
    flex: none;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    margin: 0 var(--gutter) 28px;
    padding: 10px 14px 10px 12px;
    border: 1px solid rgba(237, 239, 242, 0.22);
    border-radius: var(--r-pill);
    background: rgba(4, 4, 4, 0.34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .hero__beta-dot.px-icon { vertical-align: middle; }
  .hero__beta-text { display: flex; align-items: center; gap: 10px; }
  .hero__beta-kicker,
  .hero__beta-text strong { font-size: 11px; line-height: 1; letter-spacing: 2px; }
  .hero__beta-kicker { color: var(--ink-nav); }
  .hero__beta-text strong { padding-left: 10px; border-left: 1px solid rgba(237, 239, 242, 0.3); }

  .hero__logo { flex: 2 1 auto; justify-content: flex-start; }
  .hero__tagline {
    align-self: flex-start;
    margin: 22px var(--gutter) 0;
    font-size: 28px;
    line-height: 1.08;
    white-space: pre-line;      /* the newline in the markup: "do now." / "connect later." */
    text-align: left;
    color: #ffe3e0;
  }

  .hero__bottom { gap: 24px; padding-top: 40px; padding-bottom: 28px; }
  .hero__intro { max-width: 32ch; color: var(--ink); }
  /* One tidy row: the slogan already runs in the marquee and the footer. */
  .hero__strip { flex-wrap: nowrap; padding-block: 6px; }
  .hero__strip p:first-child { display: none; }
}
.hero__strip { color: var(--ink-nav); background: rgba(4, 4, 4, 0.36); }
/* Labels that sit on full-strength glow (the tour stage and the call to action). */
.tour__when { color: rgba(255, 255, 255, 0.72); }
.section__index { color: var(--ink-nav); }
.cta .section__index { color: rgba(255, 255, 255, 0.82); }

/* Phones: spacing and the closing sections */
@media (max-width: 767px) {
  .oldways { margin-top: 8px; gap: 32px; }
  /* "see you / out there." holds two lines down to 360px wide. */
  .cta__title { font-size: clamp(40px, 11.6vw, 52px); }
  .cta { padding-bottom: 120px; }
  /* The film strip runs along the bottom edge instead of peeking out under the card. */
  .label--film { top: auto; bottom: 10px; opacity: 0.55; }
  .footer { gap: 48px; padding-top: 88px; }
  .footer__lead { gap: 32px; padding-bottom: 48px; }
  .footer__kicker { margin-bottom: 20px; }
  .footer__meta { flex-direction: column; gap: 10px; }
}
@media (max-width: 479px) {
  /* Explore and Motion side by side; the longer columns full width under them. */
  .footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "explore motion" "plurr plurr" "where where";
    gap: 36px 20px;
  }
  .footer__nav { grid-area: explore; }
  .footer__col--end { grid-area: motion; }
  .footer__top > .footer__col:not(.footer__col--where):not(.footer__col--end) { grid-area: plurr; }
  .footer__col--where { grid-area: where; }
}

/* The profile chips scroll past the card's edge; fade them out there instead of a hard cut. */
.prof__chips-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }

/* No grey flash on tap; buttons give their own pressed feedback below. */
html { -webkit-tap-highlight-color: transparent; }

/* Touch screens fire :hover on tap and then keep it, which left buttons stuck in
   their hover fill. There, hover looks like rest, and :active is the feedback. */
@media (hover: none) {
  .beta-card__btn:hover::before, .btn--light:hover::before { transform: scaleX(0); }
  .btn--light:hover { color: var(--card-ink); }
  .footer__nav a:hover { color: var(--ink); translate: none; }
  .motion-toggle:hover { color: var(--ink-nav); }
  .footer__top-link:hover { color: var(--ink); }
  .nav__link:not([aria-current="true"]):hover .nav__label { transform: none; }
  .feat:hover .feat__card { border-color: var(--line); }
  .feat:hover .feat__card::before { opacity: 0; }
  .nav__link:not([aria-current="true"]):hover { color: var(--ink-nav); }
  .nav__link:not([aria-current="true"]):hover::before,
  .nav__link:not([aria-current="true"]):hover::after { height: 1px; background-color: rgba(255, 255, 255, 0.48); translate: none; }
  .nav__logo:hover .nav__mark img { translate: none; }
  .beta-card__btn:active::before, .btn--light:active::before { transform: scaleX(1); transition-duration: 0.12s; }
  .btn--light:active { color: #fff; }
  .beta-card__btn:active, .btn--light:active { transform: scale(0.98); }
  .footer__nav a:active, .footer__top-link:active { color: var(--ember); }
}

/* =====================================================================
   Still mode (?still): a static, fully revealed page at one fixed screen height,
   for design captures (Figma). Motion is off; the tour shows each step in turn.
   ===================================================================== */
html.still { --still-vh: 900px; scroll-behavior: auto; }
@media (min-width: 768px) and (max-width: 1023px) { html.still { --still-vh: 1024px; } }
@media (max-width: 767px) { html.still { --still-vh: 844px; } }
html.still body { position: relative; min-height: 0; }
html.still .nav { position: absolute; }
html.still .rail { position: absolute; bottom: 0; }
html.still .backdrop { position: absolute; height: var(--still-vh); }
html.still .grain, html.still .skip-link { display: none; }
html.still .hero { min-height: calc(var(--still-vh) - var(--nav-h) - var(--top-pad)); }
html.still .hero__logo { --u: min(1px, (100cqi - 2 * var(--gutter)) / 840); }
html.still .tour__track { height: auto; }
html.still .tour__stage { position: relative; height: var(--still-vh); }
html.still .tour__steps { min-height: min(440px, calc(var(--still-vh) * 0.6)); }
@media (min-width: 1024px) {
  html.still .tour__device-wrap { --dev-h: min(calc(var(--still-vh) * 0.72), 700px); }
}
html.still .cta { min-height: var(--still-vh); }
html.still .still-glow { position: absolute; inset: 0; z-index: 0; background: center / 100% 100% no-repeat; pointer-events: none; }
html.still .motion-toggle__pause { display: inline-block; }
html.still .motion-toggle__play { display: none; }
/* Importers flatten sized background gradients into solid fills, so in still mode
   those decorations are drawn with plain boxes instead: */
/* strikes: main.js lays an ember bar over each line, */
html.still .oldway__strike, html.still .quote__struck { background: none; }
html.still .oldway__name, html.still .quote__text { position: relative; }
html.still .still-strike { position: absolute; background: var(--ember); pointer-events: none; }
/* the section rule: a 1px line with two 6px squares as borders, */
html.still .section__head::after {
  height: 6px;
  background: none;
  border-inline: 6px solid var(--ink);
}
html.still .section__head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.5px;
  height: 1px;
  background: var(--line);
}
/* and the band stripes and colour wheel are painted to images by main.js. */
html.still .band__stripes, html.still .theme__wheel { -webkit-mask-image: none; mask-image: none; }

/* Phones: the glow starts lower on a tall screen, so the strip behind the nav is darker;
   the glass lifts it more to match the page under it. */
@media (max-width: 899px) {
  .nav {
    -webkit-backdrop-filter: blur(24px) saturate(1.5) brightness(1.5);
    backdrop-filter: blur(24px) saturate(1.5) brightness(1.5);
  }
}

/* =====================================================================
   Touch and small screens: scroll-linked motion without the wobble
   main.js stops moving things from script here (see touchScroll). Where the browser
   has scroll timelines, the same moves run on the compositor in step with the finger;
   elsewhere they simply hold still.
   ===================================================================== */
@media (hover: none), (max-width: 1023px) {
  /* The tour's phone holds still; its screens and the copy still change per step. */
  html[data-motion="on"] .tour__device { animation: none; }
  .tour__screen.is-past { filter: brightness(0.35); }
  /* Big blurred glows are costly to repaint mid-scroll on phones; the gradients are soft enough. */
  .tour__glow span { filter: none; will-change: transform; }
}
@keyframes hero-exit { to { transform: translate3d(0, 16vh, 0) scale(0.94); opacity: 0.15; } }
@keyframes strip-pan { from { transform: translate3d(12cqw, 0, 0); } to { transform: translate3d(calc(-100% + 88cqw), 0, 0); } }
@keyframes photo-pan { from { translate: 0 7%; } to { translate: 0 -7%; } }
@supports (animation-timeline: view()) {
  @media (hover: none), (max-width: 1023px) {
    html[data-motion="on"] .hero__logo {
      animation: hero-exit linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }
    .strip { container-type: inline-size; view-timeline: --strip block; }
    html[data-motion="on"] .strip__row {
      animation: strip-pan linear both;
      animation-timeline: --strip;
      animation-range: cover 0% cover 100%;
    }
    .scene__photo-frame { view-timeline: --photo block; }
    html[data-motion="on"] .scene__photo-frame img {
      animation: photo-pan linear both;
      animation-timeline: --photo;
      animation-range: cover 0% cover 100%;
    }
  }
}

/* =====================================================================
   Readable running text
   Paragraphs read in sentence case: long all-caps text is slower to read for everyone
   and much harder with dyslexia. Labels, buttons and headlines keep the uppercase voice.
   Body copy never drops below 14px (15px on phones).
   ===================================================================== */
.hero__intro, .section__lede, .oldway__desc, .oldways__after, .tour__body, .feat__body,
.milestone__body, .quote__answer, .cta__lede, .footer__col p:not(.footer__label) { text-transform: none; }
.feat__body, .milestone__body, .footer__col p:not(.footer__label) { font-size: 14px; }
.oldway__desc, .cta__lede { font-size: 15px; }
@media (max-width: 767px) {
  .tour__body, .feat__body, .milestone__body, .oldway__desc, .cta__lede { font-size: 15px; }
  .footer__col p:not(.footer__label) { font-size: 14px; }
}
@media (max-width: 767px) and (max-height: 720px) and (orientation: portrait) {
  .tour__body { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .tour__body { font-size: 14px; }
}

/* Windows high contrast: buttons lose their fills, so they get a real border. */
@media (forced-colors: active) {
  .beta-card__btn, .btn, .motion-toggle, .nav__toggle { border: 1px solid ButtonText; }
  .beta-card, .feat__card, .cta__lede { border: 1px solid CanvasText; }
}

/* Notched phones in an app view: the fixed bars clear the status bar (env() is 0 elsewhere). */
.nav { height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
.rail { top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }