/* GENERATED by scripts/build-public.mts from src/public/landing/landing.css. Do not edit by hand. */

@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url(/pub/fonts/archivo-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/pub/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/pub/fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/pub/fonts/dm-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/pub/fonts/dm-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url(/pub/fonts/fraunces-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:700;font-display:swap;src:url(/pub/fonts/fredoka-latin-700-normal.woff2) format("woff2")}

/* YeahTap landing page. Matte black by default (html[data-theme="dark"] is set in the page), light on request.
   Animation states read two numbers written by /pub/landing.js:
     --r  how far an element has been "built" (0..1)
     --p  how far through a pinned scene the reader has scrolled (0..1)
   With JavaScript off, or "reduce motion" on, nothing below .js applies and the page is static. */

:root {
  --bg: #f4f1eb;
  --bg2: #ebe6dd;
  --surface: #ffffff;
  --ink: #141414;
  --ink-soft: #3a3833;
  --muted: #6f6a61;
  --line: rgba(20, 20, 20, 0.12);
  --line2: rgba(20, 20, 20, 0.24);
  --inv: #121212;
  --inv-ink: #f4f1eb;
  --inv-muted: #a8a39a;
  --inv-line: rgba(244, 241, 235, 0.2);
  --accent: #a97c4f;
  --accent2: #c99b6b;
  --shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 14px 44px rgba(20, 20, 20, 0.08);
  --m1: #eadfd2;
  --m2: #ecd9d5;
  --m3: #dce4d6;
  --m4: #e1dcea;
  --m5: #d6e1e8;
  --m6: #eee4c6;
  --m7: #e3dfd9;
  --m8: #d4e6e0;
  --display: "Archivo", "DM Sans", system-ui, sans-serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0b0b0c;
  --bg2: #151517;
  --surface: #151517;
  --ink: #f2ede4;
  --ink-soft: #d9d3c8;
  --muted: #a8a39a;
  --line: rgba(242, 237, 228, 0.13);
  --line2: rgba(242, 237, 228, 0.26);
  --inv: #f2ede4;
  --inv-ink: #0e0e0f;
  --inv-muted: #5e5a53;
  --inv-line: rgba(14, 14, 15, 0.2);
  --accent: #d6b384;
  --accent2: #e8cba3;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 5px rgba(0, 0, 0, 0.45), 0 22px 50px rgba(0, 0, 0, 0.5),
    0 60px 110px rgba(0, 0, 0, 0.35);
  --m1: #2a231c;
  --m2: #2b1f1e;
  --m3: #1f271d;
  --m4: #231f2c;
  --m5: #1b2329;
  --m6: #2a2617;
  --m7: #252321;
  --m8: #18261f;
  color-scheme: dark;
}

/* ───────── base ───────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  /* the pinned scenes move things on purpose; the browser must not "correct" the scroll for them */
  overflow-anchor: none;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  overflow-x: clip;
  transition: background-color 0.4s ease, color 0.4s ease;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
}
h1,
h2,
h3,
p {
  margin: 0;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 10px;
}
.skip:focus {
  top: 12px;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.eyebrow {
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.eyebrow-inv {
  color: var(--inv-muted);
}
.sec-title {
  font: 800 clamp(32px, min(5.6vw, 9.5vh), 80px) / 0.92 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-top: 18px;
}
.sec-lead {
  margin-top: 22px;
  max-width: 640px;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink-soft);
}

/* words stay whole when letters are animated */
.w {
  display: inline-block;
  white-space: nowrap;
}

/* ───────── buttons ───────── */
.btn,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font: 600 15px/1 var(--sans);
  white-space: nowrap;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn {
  min-height: 54px;
  padding: 0 24px;
}
.pill {
  min-height: 40px;
  padding: 0 18px;
  font-size: 14px;
}
.btn svg,
.pill svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.btn:hover,
.pill:hover {
  transform: translateY(-2px);
}
.btn:hover svg:last-child {
  transform: translateX(2px);
}
.btn-ink,
.pill-ink {
  background: var(--ink);
  color: var(--bg);
}
.btn-line {
  border: 1px solid var(--line2);
  color: var(--ink);
}
.btn-line:hover {
  border-color: var(--ink);
}
.btn-cream {
  background: var(--inv-ink);
  color: var(--inv);
}
.btn-cline {
  border: 1px solid var(--inv-line);
  color: var(--inv-ink);
}
.btn-cline:hover {
  border-color: var(--inv-ink);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ───────── navigation ───────── */
.nav {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 50%;
  translate: -50% 0;
  width: min(1200px, calc(100% - 24px));
  height: 60px;
  padding: 0 10px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.nav {
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.js.intro-on .nav {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}
.logo {
  font: 800 21px/1 var(--display);
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.logo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.nav-links {
  display: flex;
  gap: 4px;
}
.nav-links a {
  padding: 9px 14px;
  border-radius: 999px;
  font: 500 14px/1 var(--sans);
  color: var(--ink-soft);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-links a:hover {
  background: var(--bg2);
  color: var(--ink);
}
.nav-end {
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.theme-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  grid-area: 1 / 1;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.theme-btn .i-moon,
html[data-theme="dark"] .theme-btn .i-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}
html[data-theme="dark"] .theme-btn .i-moon {
  opacity: 1;
  transform: none;
}
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
}

/* ───────── 1. hero ───────── */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 120px var(--gutter) 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 62%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(40% 30% at 15% 20%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 70%);
  pointer-events: none;
}
.hero-meta {
  position: absolute;
  top: 104px;
  font: 600 11px/1.6 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-meta-l {
  left: var(--gutter);
}
.hero-meta-r {
  right: var(--gutter);
  text-align: right;
}
.hero-title {
  position: relative;
  margin-top: 54px;
  text-align: center;
  font: 800 clamp(44px, min(10.5vw, 18vh), 168px) / 0.86 var(--display);
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.hero-title > span {
  display: block;
}
.hero-title .l2 {
  background: linear-gradient(180deg, var(--ink) 18%, color-mix(in srgb, var(--ink) 12%, transparent) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-stage {
  position: relative;
  z-index: 2;
  margin-top: clamp(22px, 4vh, 48px);
  display: flex;
  justify-content: center;
  width: 100%;
}
/* ── the iPhone, InkPin style: a real phone's proportions, sized by the screen's height ── */
.hero-stage {
  --pw: min(clamp(170px, calc(82svh * 0.48), 380px), 78vw); /* short screens (a phone held sideways) get a smaller phone */
  --ph: calc(var(--pw) / 0.48);
}
.phone {
  position: relative;
  width: var(--pw);
  aspect-ratio: 0.48;
  padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.165);
}
.phone > .edge {
  display: none;
}
.card.phone::before {
  /* a dark frame with one fine, even grey edge (no light corners) */
  border: 1.5px solid #2c2c2f;
  background: #141416;
  box-shadow:
    inset 0 0 0 4px #0b0b0c,
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 90px 160px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .card.phone::before {
  box-shadow: inset 0 0 0 4px #0b0b0c, 0 2px 4px rgba(20, 20, 20, 0.2), 0 30px 70px rgba(20, 20, 20, 0.3);
}
.phone .screen {
  border-radius: calc(var(--pw) * 0.135);
}

.side {
  display: none;
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1c1c1e, #39393d);
}
.side-action { left: -2px; top: 17%; height: 5%; }
.side-vol1 { left: -2px; top: 25.5%; height: 9.5%; }
.side-vol2 { left: -2px; top: 37%; height: 9.5%; }
.side-power { right: -2px; top: 28%; height: 14%; background: linear-gradient(270deg, #1c1c1e, #39393d); }
.screen {
  position: relative;
  height: 100%;
  border-radius: 44px;
  overflow: hidden;
  background: #000;
  color: #f2ede4;
}
.island {
  position: absolute;
  z-index: 9;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  width: 31%;
  height: 26px;
  border-radius: 20px;
  background: #000;
}
.status {
  position: absolute;
  z-index: 8;
  top: 15px;
  left: 0;
  right: 0;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 1fr 34% 1fr; /* the island sits in the middle */
  justify-items: center;
  align-items: center;
  font: 600 13px/1 var(--sans);
  color: #fff;
}
.st-icons {
  display: flex;
  gap: 5px;
  align-items: center;
}
.st-icons svg {
  height: 11px;
  width: auto;
  fill: #fff;
}
.home {
  position: absolute;
  inset: 0;
  padding: calc(var(--pw) * 0.14) calc(var(--pw) * 0.06) calc(var(--pw) * 0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(120% 70% at 15% 8%, #7a5236 0%, transparent 58%),
    radial-gradient(90% 60% at 95% 92%, #43305a 0%, transparent 60%),
    linear-gradient(170deg, #2b2019, #121015);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--pw) * 0.06) calc(var(--pw) * 0.035);
}
.appi {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: calc(var(--pw) * 0.018);
  font: 500 calc(var(--pw) * 0.03) / 1 var(--sans);
  color: rgba(255, 255, 255, 0.92);
}
.appi span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appi i {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 28%;
  display: grid;
  place-items: center;
  background: var(--g);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.appi svg {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.g1 { --g: linear-gradient(160deg, #4b4b50, #232326); }
.g2 { --g: linear-gradient(160deg, #2c2c2e, #0d0d0e); }
.g3 { --g: linear-gradient(160deg, #e3b04b, #c48a22); }
.g4 { --g: linear-gradient(160deg, #e65b4f, #b8352c); }
.g5 { --g: linear-gradient(160deg, #57b36a, #2f8545); }
.g6 { --g: linear-gradient(160deg, #4f9be8, #2a6cc0); }
.g7 { --g: linear-gradient(160deg, #f0647f, #c93a59); }
.g8 { --g: linear-gradient(160deg, #4f8ff0, #2d5fd0); }
.g9 { --g: linear-gradient(160deg, #f5a54a, #d9693a); }
.g10 { --g: linear-gradient(160deg, #3a3a3d, #141416); }
.g11 { --g: linear-gradient(160deg, #6b6b70, #3a3a3e); }
.g12 { --g: linear-gradient(160deg, #8e8e93, #5d5d62); }
.g13 { --g: linear-gradient(160deg, #5cc96f, #2f9a45); }
.g14 { --g: linear-gradient(160deg, #5bc06d, #2f8f45); }
.g15 { --g: linear-gradient(160deg, #4f9be8, #2a6cc0); }
.g16 { --g: linear-gradient(160deg, #4b4b50, #232326); }
.home-dock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--pw) * 0.035);
  padding: calc(var(--pw) * 0.035);
  border-radius: calc(var(--pw) * 0.09);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.home-bar {
  position: absolute;
  z-index: 9;
  bottom: 7px;
  left: 50%;
  translate: -50% 0;
  width: 36%;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.8);
}
/* the home screen: status bar, weather widget, app icons and dock */
.phone .status {
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(var(--pw) * 0.05) 0 calc(var(--pw) * 0.07);
  font: 600 calc(var(--pw) * 0.045) / 1 var(--sans);
}
.phone .st-icons svg {
  height: calc(var(--pw) * 0.036);
}
.widget {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--pw) * 0.012);
  padding: calc(var(--pw) * 0.045) calc(var(--pw) * 0.05);
  border-radius: calc(var(--pw) * 0.07);
  background: linear-gradient(160deg, #4a86d8, #2459a8 70%, #1d4a8f);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 16px rgba(0, 0, 0, 0.3);
}
.w-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 calc(var(--pw) * 0.042) / 1 var(--sans);
}
.w-ico svg {
  width: calc(var(--pw) * 0.09);
  height: calc(var(--pw) * 0.09);
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.w-temp {
  font: 300 calc(var(--pw) * 0.13) / 1 var(--sans);
  letter-spacing: -0.03em;
}
.w-sky {
  display: grid;
  gap: 3px;
  font: 600 calc(var(--pw) * 0.036) / 1.1 var(--sans);
}
.w-sky small {
  font-weight: 500;
  opacity: 0.85;
}

/* (lock screen styles kept for reference) */
.phone .home {
  justify-content: flex-start;
  gap: calc(var(--pw) * 0.05);
  padding: calc(var(--pw) * 0.05) calc(var(--pw) * 0.06) calc(var(--pw) * 0.07);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(150, 128, 104, 0.22), transparent 62%),
    linear-gradient(180deg, #2a2724, #161514 68%, #111010);
}
.lock {
  display: grid;
  justify-items: center;
  gap: calc(var(--pw) * 0.02);
  margin-top: calc(var(--pw) * 0.08);
  color: #f2ede4;
}
.lock-time {
  font: 600 calc(var(--pw) * 0.2) / 1 var(--sans);
  letter-spacing: -0.03em;
  opacity: 0.85;
}
.lock-date {
  font: 500 calc(var(--pw) * 0.04) / 1 var(--sans);
  opacity: 0.85;
}
.phone .home-grid {
  gap: calc(var(--pw) * 0.05) calc(var(--pw) * 0.04);
}
.phone .home-dock {
  margin-top: auto;
  gap: calc(var(--pw) * 0.055);
  padding: calc(var(--pw) * 0.04);
  border-radius: calc(var(--pw) * 0.08);
  background: rgba(242, 237, 228, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tile {
  display: block;
  aspect-ratio: 1;
  border-radius: 26%;
  background: rgba(242, 237, 228, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* the notification an iPhone shows when it reads an NFC card */
.banner {
  position: absolute;
  z-index: 7;
  left: calc(var(--pw) * 0.04);
  right: calc(var(--pw) * 0.04);
  top: calc(var(--pw) * 0.045);
  padding: calc(var(--pw) * 0.026) calc(var(--pw) * 0.032);
  border-radius: calc(var(--pw) * 0.055);
  background: rgba(40, 40, 42, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  gap: calc(var(--pw) * 0.026);
  align-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transform: translateY(-170%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15), opacity 0.3s ease;
}
.b-ico {
  width: calc(var(--pw) * 0.075);
  height: calc(var(--pw) * 0.075);
  border-radius: calc(var(--pw) * 0.02);
  background: #0b0b0c;
  box-shadow: inset 0 0 0 1px rgba(242, 237, 228, 0.18);
  display: grid;
  place-items: center;
  flex: none;
}
.b-ico svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: #f2ede4;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.banner b {
  display: block;
  font: 600 calc(var(--pw) * 0.034) / 1.25 var(--sans);
}
.banner small {
  display: block;
  font-size: calc(var(--pw) * 0.031);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner > span:last-child {
  min-width: 0;
}
.hero-stage.note .banner {
  transform: none;
  opacity: 1;
}
.hero-stage.open .banner {
  transform: translateY(-170%);
  opacity: 0;
  transition-duration: 0.3s;
}
/* the salon's real price page (loaded on tap), at iPhone size */
.app {
  display: none;
}
.js .app {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  background: #0b0b0c;
  transform-origin: 50% 12%;
  transition: transform 0.6s cubic-bezier(0.2, 0.85, 0.2, 1), opacity 0.35s ease, border-radius 0.6s ease;
}
.app-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: 760px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
  background: #0b0b0c;
  color-scheme: dark;
}
.js .hero-stage.open .app-frame {
  pointer-events: auto; /* the demo is live: switch tabs, scroll */
}
.js .hero-stage:not(.open) .app {
  transform: scale(0.42) translateY(-24%);
  opacity: 0;
  border-radius: 70px;
  pointer-events: none;
}
.js .hero-stage.open .home {
  transform: scale(0.92);
  filter: blur(6px) brightness(0.6);
}

/* rings where the card touches the phone */
.ripple {
  position: absolute;
  z-index: 10;
  left: 56%;
  top: 44%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ripple i {
  position: absolute;
  left: -32px;
  top: -32px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(242, 237, 228, 0.9);
  opacity: 0;
}
.hero-stage.ping .ripple i {
  animation: ripple 1s ease-out;
}
.hero-stage.ping .ripple i:nth-child(2) {
  animation-delay: 0.18s;
}
.hero-stage.ping .ripple i:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes ripple {
  0% {
    transform: scale(0.3);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* ── the black PVC cards, debit-card size. The front rests over the phone's lower edge, by the dock;
   its back (the backup QR) is the same size and peeks out behind it. Tap the back to bring it out. ── */
.nfc-card,
.qr-card {
  position: absolute;
  left: calc(50% - var(--pw) * 0.14);
  top: calc(var(--ph) * 0.66);
  width: calc(var(--pw) * 1.08);
}
.nfc-card {
  z-index: 3;
}
.js .nfc-card,
.js .qr-card {
  transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.4s ease;
}
.js .hero-stage.open .nfc-card,
.js .hero-stage.open .qr-card {
  transform: translate(calc(var(--pw) * 0.66), calc(var(--ph) * 0.06)) rotate(5deg);
}
.qr-card {
  z-index: 2;
  margin-left: calc(var(--pw) * 0.1);
  margin-top: calc(var(--pw) * 1.08 / 1.586 * -0.4); /* the same size, 40% showing above the front card */
}
.hero-stage.qr-out .qr-card {
  z-index: 5;
}
.nfc-face,
.qr-face {
  position: relative;
  width: 100%;
  aspect-ratio: 85.6 / 53.98;
  border-radius: calc(var(--pw) * 0.05);
  padding: calc(var(--pw) * 0.07) calc(var(--pw) * 0.08);
  color: #f2ede4;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, #2c2c2f 0%, transparent 55%),
    linear-gradient(135deg, #1e1e20, #0d0d0e 55%, #18181a);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.5),
    -18px 30px 50px rgba(0, 0, 0, 0.55),
    -40px 70px 110px rgba(0, 0, 0, 0.45);
}
.nfc-face {
  rotate: -7deg;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.nfc-logo {
  font: 800 calc(var(--pw) * 0.075) / 1 var(--display);
  letter-spacing: -0.03em;
}
.nfc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.nfc-face::after,
.qr-face::after {
  /* a soft sheen across the matte surface */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.07) 46%, transparent 60%);
  pointer-events: none;
}
.qr-face {
  rotate: -3deg;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pw) * 0.03);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1), translate 0.3s ease;
}
.qr-face:hover {
  translate: 0 -6px;
}
.hero-stage.qr-lift .qr-face {
  transform: translate(10%, -46%) rotate(7deg);
}
.hero-stage.qr-out .qr-face {
  transform: translate(-9%, 30%) rotate(-3deg);
}
.qr-panel {
  height: 66%;
  aspect-ratio: 1;
  padding: 4%;
  border-radius: calc(var(--pw) * 0.03);
  background: #f2ede4;
}
.qr-panel .rqr {
  width: 100%;
  height: 100%;
  fill: #0b0b0c;
}
.qr-note {
  font: 600 calc(var(--pw) * 0.03) / 1 ui-monospace, "Cascadia Mono", Menlo, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.7);
}
.nfc-row {
  display: flex;
  justify-content: flex-end;
}
.nfc-sym svg {
  width: calc(var(--pw) * 0.13);
  height: calc(var(--pw) * 0.13);
  fill: none;
  stroke: #f2ede4;
  stroke-width: 2;
  stroke-linecap: round;
}
.nfc-cta {
  font: 600 calc(var(--pw) * 0.038) / 1 ui-monospace, "Cascadia Mono", Menlo, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(242, 237, 228, 0.88);
}
.tap-wrap {
  display: none;
}
.js .tap-wrap {
  /* at the phone's top right corner */
  position: absolute;
  z-index: 4;
  left: min(calc(50% + var(--pw) * 0.5 + 24px), calc(100% - 230px));
  top: calc(var(--ph) * 0.1);
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 220px;
}
@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.js .tap-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 10px;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(160deg, rgba(40, 40, 44, 0.92), rgba(18, 18, 20, 0.92)) padding-box,
    conic-gradient(from var(--spin), rgba(214, 179, 132, 0.15), rgba(232, 203, 163, 0.95), rgba(214, 179, 132, 0.15) 30%, rgba(242, 237, 228, 0.12) 60%, rgba(214, 179, 132, 0.15)) border-box;
  color: #f2ede4;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 40px rgba(214, 179, 132, 0.12);
  animation: tap-spin 3.2s linear infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@keyframes tap-spin {
  to {
    --spin: 360deg;
  }
}
.js .tap-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4), 0 0 50px rgba(214, 179, 132, 0.22);
}
.tap-ico {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #e8cba3, #b98a55);
  color: #141414;
  flex: none;
}
.tap-ico::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 15px;
  border: 1.5px solid rgba(232, 203, 163, 0.7);
  animation: ping 2s ease-out infinite;
}
.hero-stage.open .tap-ico::after {
  animation: none;
  opacity: 0;
}
.tap-ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.tap-words {
  display: grid;
  gap: 4px;
}
.tap-label {
  font: 700 16px/1 var(--sans);
}
.tap-sub {
  font: 500 12px/1 var(--sans);
  color: rgba(242, 237, 228, 0.6);
}
.demo-hint {
  font: 500 13px/1.45 var(--sans);
  color: var(--muted);
}
html[data-theme="light"] .demo-hint {
  color: var(--ink-soft);
}
.tap-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.tap-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: ping 1.8s ease-out infinite;
}
.hero-stage.open .tap-dot::after {
  animation: none;
  opacity: 0;
}
/* the tap: the card stays where it is, gives a small press, and rings spread out from it over the phone */
@keyframes card-tap {
  0% {
    transform: none;
  }
  30% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-2px);
  }
  100% {
    transform: none;
  }
}
.hero-stage.tapping .nfc-face {
  animation: card-tap 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.card-rings {
  position: absolute;
  z-index: -1;
  left: 45%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.card-rings i {
  position: absolute;
  left: calc(var(--pw) * -0.75);
  top: calc(var(--pw) * -0.75);
  width: calc(var(--pw) * 1.5);
  height: calc(var(--pw) * 1.5);
  border-radius: 50%;
  border: 1.5px solid rgba(242, 237, 228, 0.45);
  opacity: 0;
}
html[data-theme="light"] .card-rings i {
  border-color: rgba(20, 20, 20, 0.3);
}
.hero-stage.tapping .card-rings i {
  animation: ring-out 1.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.hero-stage.tapping .card-rings i:nth-child(2) {
  animation-delay: 0.2s;
}
.hero-stage.tapping .card-rings i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes ring-out {
  0% {
    transform: scale(0.35);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@media (max-width: 860px) {
  .hero-stage {
    --pw: min(clamp(220px, calc(68svh * 0.48), 300px), 70vw);
    flex-direction: column;
    align-items: center;
  }
  .nfc-card,
  .qr-card {
    /* on phones the cards stay fully on screen */
    left: min(calc(50% - var(--pw) * 0.22), calc(100% - var(--pw) * 0.92 - 18px));
    width: calc(var(--pw) * 0.92);
  }
  .qr-card {
    margin-left: calc(var(--pw) * 0.04);
    margin-top: calc(var(--pw) * 0.92 / 1.586 * -0.4);
  }
  .js .hero-stage.open .nfc-card,
  .js .hero-stage.open .qr-card {
    /* on phones they slide right beside the phone, only a corner peeking in */
    transform: translate(calc(var(--pw) * 0.76), calc(var(--ph) * 0.16)) rotate(14deg);
  }
  .js .tap-wrap {
    position: relative;
    left: auto;
    top: auto;
    margin-top: calc(var(--pw) * 0.24);
    justify-items: center;
    text-align: center;
    max-width: none;
  }
}
.hero-foot {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1.1fr auto;
  gap: 28px;
  align-items: end;
}
.lead {
  max-width: 560px;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--ink-soft);
}
@media (max-width: 860px) {
  .hero {
    padding-top: 100px;
  }
  .hero-meta {
    position: static;
    align-self: flex-start;
    margin-bottom: 4px;
  }
  .hero-meta-r {
    display: none;
  }
  .hero-title {
    margin-top: 18px;
    font-size: clamp(46px, 15.5vw, 120px);
  }
  .hero-stage {
    margin-top: 18px;
  }
  .hero-foot {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
}
@media (max-width: 420px) {
  .cta-row .btn {
    width: 100%;
  }
}

/* ───────── cards (shared): fill, outline and contents ───────── */
.card {
  position: relative;
  isolation: isolate;
  border-radius: 26px;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.edge rect {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* ───────── 2a. the spotlight card that grows with the scroll ───────── */
.spot {
  position: relative;
}
.spot-sticky {
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 12px;
}
.spot-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #0d0d0e;
  color: #f2ede4;
  display: grid;
  place-items: center;
  text-align: center;
}
html[data-theme="dark"] .spot-card {
  background: radial-gradient(120% 90% at 50% 0%, #1c1c1f, #0b0b0c 70%);
  box-shadow: inset 0 0 0 1px rgba(242, 237, 228, 0.08), 0 40px 120px rgba(0, 0, 0, 0.6);
}
.beam {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 200deg at 72% -6%, transparent 0deg, rgba(242, 237, 228, 0.22) 18deg, rgba(242, 237, 228, 0.05) 34deg, transparent 52deg),
    radial-gradient(40% 40% at 50% 60%, rgba(214, 179, 132, 0.18), transparent 70%);
  filter: blur(2px);
}
html[data-theme="dark"] .beam {
  background:
    conic-gradient(from 200deg at 72% -6%, transparent 0deg, rgba(242, 237, 228, 0.26) 18deg, rgba(242, 237, 228, 0.06) 34deg, transparent 52deg),
    radial-gradient(40% 40% at 50% 60%, rgba(214, 179, 132, 0.22), transparent 70%);
}
.spot-in {
  position: relative;
  padding: 40px 20px;
  display: grid;
  justify-items: center;
  gap: 24px;
}
.spot-title {
  font: 800 clamp(40px, min(7.5vw, 13vh), 124px) / 0.9 var(--display);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.spot-steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  gap: clamp(14px, 4vw, 56px);
  flex-wrap: wrap;
  justify-content: center;
}
.spot-steps li {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 150px;
}
.spot-steps b {
  font-size: 16px;
}
.spot-steps small {
  font-size: 13px;
  opacity: 0.65;
}
.ss-ico {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  opacity: 0.9;
}
.ss-ico svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ss-list {
  align-content: center;
  gap: 5px;
}
.ss-list i {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.ss-list i:nth-child(2) {
  width: 22px;
}
.ss-list i:nth-child(3) {
  width: 25px;
}

/* ───────── 2b. proof ───────── */
.proof {
  position: relative;
  padding: clamp(80px, 12vw, 150px) 0 clamp(70px, 10vw, 120px);
  overflow: hidden;
}
.ghost {
  display: flex;
  white-space: nowrap;
  font: 800 clamp(56px, min(11vw, 18vh), 170px) / 1 var(--display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--line2);
  margin-bottom: clamp(30px, 5vw, 60px);
  will-change: transform;
}
.ghost span {
  padding-right: 0.4em;
}
.facts {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fact {
  padding: 26px 22px 24px;
  display: grid;
  gap: 6px;
  align-content: start;
}
.fact b {
  font: 800 clamp(36px, min(4.2vw, 7vh), 58px) / 1 var(--display);
  letter-spacing: -0.04em;
}
.fact span {
  font-weight: 600;
  font-size: 16px;
}
.fact small {
  color: var(--muted);
  font-size: 14px;
}
.founding {
  margin-top: 16px;
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 40px;
  align-items: center;
}
.founding .eyebrow {
  grid-column: 1 / -1;
}
.founding-text {
  font: 500 clamp(18px, 2vw, 24px) / 1.45 var(--sans);
  max-width: 720px;
}
@media (max-width: 960px) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .founding {
    grid-template-columns: 1fr;
  }
  .fact {
    padding: 20px 16px;
  }
}

/* ───────── 3. problem: pinned, sliding sideways ───────── */
.pin,
.ribbon {
  position: relative;
}
.pin-sticky,
.ribbon-sticky {
  position: relative;
  height: 100svh;
  overflow-x: auto; /* without JavaScript: swipe sideways */
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pin-ghost {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  font: 800 clamp(110px, min(20vw, 32vh), 300px) / 1 var(--display);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  pointer-events: none;
}
.track {
  position: relative;
  display: flex;
  gap: clamp(18px, 4vw, 56px);
  width: max-content;
  padding: 0 8vw;
  will-change: transform;
}
.panel {
  flex: none;
  width: min(86vw, 640px);
  display: grid;
  align-content: center;
  gap: 22px;
  min-height: 60svh;
  padding-right: 4vw;
  border-right: 1px solid var(--line);
}
.panel:last-child {
  border-right: 0;
}
.panel-title {
  font: 800 clamp(30px, min(4.2vw, 7vh), 64px) / 0.95 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.panel-text {
  font-size: clamp(16px, min(1.5vw, 2.6vh), 21px);
  color: var(--ink-soft);
  max-width: 560px;
}
.panel-num {
  font: 800 clamp(72px, 9vw, 130px) / 0.8 var(--display);
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}

/* ───────── 4a. through your client's eyes: a straight sliding gallery ───────── */
.ribbon-sticky {
  justify-content: flex-start;
  padding-top: clamp(92px, 13vh, 130px);
  gap: clamp(22px, 4vh, 40px);
}
.ribbon-head {
  padding: 0 var(--gutter);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.ribbon-title {
  font: 800 clamp(26px, min(4vw, 6.6vh), 58px) / 0.95 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  max-width: 980px;
}
.ribbon-sub {
  color: var(--ink-soft);
  font-size: clamp(16px, 1.4vw, 19px);
  max-width: 560px;
}
.ribbon-track {
  /* the cards always fit the space left under the heading, whatever height the window reports */
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: clamp(16px, 4vh, 40px);
  align-items: flex-start;
  padding-left: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter)));
}
.moment {
  flex: none;
  width: min(78vw, 340px);
  height: min(100%, 420px);
  overflow: hidden; /* never cut off: the card keeps its rounded corners */
  padding: 26px 26px 28px;
  border-radius: 28px;
  background: var(--m1);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform-origin: 50% 70%;
  will-change: transform, opacity;
}
.m2 { background: var(--m2); }
.m3 { background: var(--m3); }
.m4 { background: var(--m4); }
.m5 { background: var(--m5); }
.m6 { background: var(--m6); }
.m7 { background: var(--m7); }
.m8 { background: var(--m8); }
.m-tag {
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.m-thought {
  font: 600 clamp(21px, min(2.2vw, 3.8vh), 30px) / 1.12 var(--serif);
  letter-spacing: -0.01em;
  flex: 1;
}
.m-fix {
  font-size: 15px;
  color: var(--ink-soft);
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line2);
}
.m-fix b {
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ───────── 4b. features ───────── */
.features {
  padding: clamp(90px, 12vw, 160px) 0;
}
.grid {
  margin-top: clamp(40px, 6vw, 70px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feat {
  padding: 18px 18px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feat h3 {
  font: 700 21px/1.2 var(--sans);
  letter-spacing: -0.01em;
  padding: 0 6px;
}
.feat p {
  color: var(--muted);
  font-size: 15px;
  padding: 0 6px;
}
.feat-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 24px;
}
.feat-copy {
  display: grid;
  gap: 10px;
}
.fv {
  position: relative;
  height: 170px;
  border-radius: 18px;
  background: var(--bg2);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
}
.feat-wide .fv {
  margin: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font: 600 12px/1 var(--sans);
}
.chip svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fvp-row {
  width: 78%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  font-size: 14px;
}
.fvp-row span {
  flex: 1;
}
.fvp-row s {
  color: var(--muted);
}
.offer-pill {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: 600 13px/1 var(--sans);
}
.count {
  font: 500 14px/1 var(--sans);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.count b {
  font: 800 26px/1 var(--display);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.stars {
  display: flex;
  gap: 6px;
}
.stars svg {
  width: 34px;
  height: 34px;
  fill: var(--accent);
}
.stars svg:nth-child(2) { --n: 1; }
.stars svg:nth-child(3) { --n: 2; }
.stars svg:nth-child(4) { --n: 3; }
.stars svg:nth-child(5) { --n: 4; }
.fvr-note {
  font-size: 12px;
  color: var(--muted);
}
.fv-review {
  height: 210px;
  perspective: 700px;
}
/* the 10 x 10 cm stick-on acrylic card, laid out like the printed design: every size is a share of its width */
.acrylic {
  --al: #7cc4f5;
  container-type: inline-size;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4cqw;
  overflow: hidden;
  color: #fff;
  font-family: "Fredoka", var(--display);
  background: linear-gradient(160deg, #18233a, #121a29 55%, #0f1624);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 3px 0 rgba(170, 205, 240, 0.4),
    0 6px 0 rgba(110, 145, 190, 0.25),
    0 26px 40px rgba(0, 0, 0, 0.45);
}
.acrylic::after {
  /* the glossy acrylic surface */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.2), transparent 32%, transparent 68%, rgba(255, 255, 255, 0.07));
  pointer-events: none;
}
.ac-icons {
  position: absolute;
  top: 6cqw;
  right: 7cqw;
  display: flex;
  gap: 6.5cqw;
}
.ac-icons svg {
  display: block;
  width: 7.5cqw;
  height: 7.5cqw;
}
.ac-icons svg:last-child {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ac-h1,
.ac-h2,
.ac-sub {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
}
.ac-h1 {
  top: 19cqw;
  font-size: 9.2cqw;
  letter-spacing: 0.01em;
}
.ac-h2 {
  top: 29cqw;
  font-size: 13cqw;
  color: var(--al);
}
.ac-sub {
  top: 43.5cqw;
  font-size: 4.9cqw;
  letter-spacing: 0.2em;
}
.ac-bottom {
  position: absolute;
  left: 4cqw;
  right: 3.5cqw;
  top: 58cqw;
  height: 30cqw;
  display: grid;
  grid-template-columns: 1fr 9cqw 29cqw;
  align-items: center;
  gap: 1.5cqw;
}
.ac-tapblk {
  display: grid;
  justify-items: center;
}
.ac-tapline {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  color: var(--al);
}
.ac-tapline b {
  font-size: 14cqw;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
}
.ac-wave svg {
  display: block;
  width: 7cqw;
  height: 14cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
}
.ac-wave:not(.ac-l) svg {
  transform: scaleX(-1);
}
.ac-tapblk small {
  margin-top: 1cqw;
  font-size: 4.1cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ac-or {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  gap: 2cqw;
}
.ac-or i {
  width: 0.4cqw;
  background: #fff;
}
.ac-or b {
  font-size: 4.6cqw;
  text-transform: uppercase;
}
.ac-qr {
  --b: var(--al);
  --t: 0.9cqw;
  --l: 6cqw;
  width: 29cqw;
  aspect-ratio: 1;
  padding: 3.5cqw;
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / var(--l) var(--t),
    linear-gradient(var(--b), var(--b)) 0 0 / var(--t) var(--l),
    linear-gradient(var(--b), var(--b)) 100% 0 / var(--l) var(--t),
    linear-gradient(var(--b), var(--b)) 100% 0 / var(--t) var(--l),
    linear-gradient(var(--b), var(--b)) 0 100% / var(--l) var(--t),
    linear-gradient(var(--b), var(--b)) 0 100% / var(--t) var(--l),
    linear-gradient(var(--b), var(--b)) 100% 100% / var(--l) var(--t),
    linear-gradient(var(--b), var(--b)) 100% 100% / var(--t) var(--l);
  background-repeat: no-repeat;
}
.ac-qr .rqr {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1cqw;
  background: #fff;
  fill: #131c2b;
}
.ac-qr .qr {
  width: 100%;
  height: 100%;
  fill: #131c2b;
  stroke: #131c2b;
}
.fv-tap {
  flex-direction: row;
  gap: 18px;
}
.tap-ring {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  position: relative;
}
.tap-ring::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: ping 2.4s ease-out infinite;
}
.tap-ring svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}
.tap-or {
  font: 600 12px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.fv .qr {
  width: 74px;
  height: 74px;
  fill: var(--ink);
  stroke: var(--ink);
}
@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 92px;
}
.bars i {
  display: block;
  width: 18px;
  border-radius: 6px 6px 3px 3px;
  background: var(--ink);
  height: var(--h);
}
.bars .b6 {
  background: var(--accent);
}
.b1 { --h: 34%; }
.b2 { --h: 52%; }
.b3 { --h: 41%; }
.b4 { --h: 66%; }
.b5 { --h: 80%; }
.b6 { --h: 100%; }
.b7 { --h: 72%; }
.days {
  display: flex;
  gap: 10px;
}
.days i {
  width: 18px;
  text-align: center;
  font: 600 11px var(--sans);
  color: var(--muted);
}
.ticket {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 18px 34px;
  border-radius: 16px;
  border: 1.5px dashed var(--line2);
  background: var(--surface);
  position: relative;
}
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--bg2);
}
.ticket::before {
  left: -10px;
}
.ticket::after {
  right: -10px;
}
.ticket b {
  font: 800 34px/1 var(--display);
  letter-spacing: -0.03em;
}
.ticket small {
  color: var(--muted);
  font-size: 13px;
}
.link-chip {
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  font: 600 16px/1 ui-monospace, "Cascadia Mono", Menlo, monospace;
}
.link-chip i {
  color: var(--accent);
  letter-spacing: 0.1em;
}
@media (max-width: 960px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .feat-wide {
    grid-template-columns: 1fr;
  }
}

/* ───────── 5. how it works: steps orbiting a centre ───────── */
.how {
  position: relative;
  padding: clamp(80px, 10vw, 120px) 0;
}
.how-sticky {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.how-center {
  display: grid;
  gap: 14px;
}
.how-title {
  font: 800 clamp(32px, min(5.6vw, 9.5vh), 80px) / 0.92 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.how-sub {
  color: var(--muted);
}
.ring {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.step {
  padding: 22px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  align-content: start;
  transition: background-color 0.45s ease, color 0.45s ease, scale 0.45s ease, opacity 0.45s ease, border-color 0.45s ease;
}
.step b {
  font: 700 18px/1.25 var(--sans);
}
.step span:last-child {
  color: var(--muted);
  font-size: 14px;
}
.step-n {
  font: 800 34px/1 var(--display);
  letter-spacing: -0.04em;
  color: var(--accent);
}
.step.on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.step.on span:last-child {
  color: color-mix(in srgb, var(--bg) 70%, transparent);
}
@media (max-width: 960px) {
  .ring {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .ring {
    grid-template-columns: 1fr;
  }
}

/* ───────── 6. FAQ ───────── */
.faq {
  padding: clamp(80px, 11vw, 150px) 0;
}
.qa-list {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  gap: 10px;
}
.qa {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.qa summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 54px 1fr 40px;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 20px 24px;
  font: 600 clamp(16px, 1.6vw, 19px) / 1.35 var(--sans);
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qn {
  font: 800 15px/1 var(--display);
  color: var(--accent);
}
.qi {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  justify-self: end;
  transition: transform 0.35s ease;
}
.qi svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.qa[open] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.qa[open] .qi {
  transform: rotate(45deg);
  border-color: color-mix(in srgb, var(--bg) 30%, transparent);
}
.qa-a {
  padding: 0 24px 24px 88px;
  color: color-mix(in srgb, var(--bg) 75%, transparent);
  max-width: 820px;
  animation: qa-in 0.4s ease;
}
@keyframes qa-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@media (max-width: 560px) {
  .qa summary {
    grid-template-columns: 36px 1fr 36px;
    padding: 18px 14px 18px 18px;
  }
  .qa-a {
    padding: 0 18px 20px 64px;
  }
}

/* ───────── 7. final call to action ───────── */
.final {
  background: var(--inv);
  color: var(--inv-ink);
  padding: clamp(80px, 11vw, 150px) 0;
}
.final-card {
  padding: clamp(32px, 6vw, 80px) clamp(22px, 5vw, 64px);
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
}
.final-card::before {
  background: transparent;
  border-color: var(--inv-line);
  box-shadow: none;
}
.final-card .edge rect {
  stroke: var(--inv-ink);
}
.final-title {
  font: 800 clamp(40px, min(8vw, 14vh), 128px) / 0.88 var(--display);
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.final-text {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--inv-muted);
  max-width: 560px;
}
.final .cta-row {
  justify-content: center;
}

/* ───────── 8. footer ───────── */
.foot {
  padding: 64px 0 28px;
  border-top: 1px solid var(--line);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 32px;
}
.foot-brand p {
  margin-top: 14px;
  color: var(--muted);
  max-width: 320px;
  font-size: 15px;
}
.foot-col {
  display: grid;
  gap: 10px;
  align-content: start;
  font-size: 15px;
}
.foot-col b {
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.foot-col a:hover {
  color: var(--accent);
}
.foot-col span {
  color: var(--muted);
}
.foot-bottom {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 860px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}

/* ───────── the opening: the name on a black screen, zooming into its own letter ───────── */
.intro {
  position: relative;
}
.intro-ov {
  display: none;
}
.js .intro::after {
  /* the scroll distance the opening uses (a spacer, not padding: sticky only moves inside content) */
  content: "";
  display: block;
  height: 80vh;
}
.js .intro-sticky {
  position: sticky;
  top: 0;
}
.js .intro-ov {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100svh;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
  background: #000; /* pitch black until the visitor scrolls: only the name and the scroll hint */
  opacity: calc(1 - clamp(0, calc((var(--p, 0) - 0.42) * 7.7), 1));
  contain: strict;
}
.js .intro-ov.covered {
  /* the letter fills the screen: show a plain colour instead of a giant letter (much lighter to draw) */
  background: #f4f1eb;
}
.js .intro-ov.covered .intro-word {
  visibility: hidden;
}
.js .intro-ov.gone {
  visibility: hidden;
}
.intro-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 clamp(64px, 17vw, 300px) / 1 var(--display);
  letter-spacing: -0.05em;
  color: #f4f1eb;
  white-space: nowrap;
}
.scroll-hint {
  position: absolute;
  right: clamp(14px, 3vw, 36px);
  bottom: clamp(18px, 5vh, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(244, 241, 235, 0.62);
  opacity: calc(1 - clamp(0, calc(var(--p, 0) * 9), 1));
}
.scroll-hint span {
  writing-mode: vertical-rl;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.scroll-hint i {
  position: relative;
  width: 1px;
  height: 70px;
  background: rgba(244, 241, 235, 0.16);
  overflow: hidden;
}
.scroll-hint i::after {
  /* a streak of light running down: "go this way" */
  content: "";
  position: absolute;
  left: -1px;
  top: -26px;
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: linear-gradient(transparent, #f4f1eb);
  box-shadow: 0 0 10px #f4f1eb;
  animation: bolt 1.7s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
@keyframes bolt {
  to {
    transform: translateY(96px);
  }
}

/* ───────── build states (only while JavaScript is running the show) ───────── */
.js .build {
  --r: 0;
}
.js .card::before {
  --fill: clamp(0, calc((var(--r) - 0.25) * 2.857), 1);
  clip-path: inset(0 0 calc((1 - var(--fill)) * 100%) 0 round 26px);
  opacity: var(--fill);
}
.js .phone::before {
  clip-path: inset(0 0 calc((1 - clamp(0, calc((var(--r) - 0.25) * 2.857), 1)) * 100%) 0 round calc(var(--pw) * 0.185));
}
.js .card .edge {
  opacity: calc(1 - clamp(0, calc((var(--r) - 0.25) * 2.857), 1) * 0.92);
}
.js .card .k {
  --c: clamp(0, calc((var(--r) - 0.45 - var(--i, 0) * 0.35) * 5), 1);
  opacity: var(--c);
  transform: translateY(calc((1 - var(--c)) * 14px));
}
.js .phone .screen {
  opacity: clamp(0, calc((var(--r) - 0.4) * 4), 1);
}
.js [data-b="type"] .u,
.js [data-b="scramble"] .u {
  opacity: 0;
}
.js [data-b="words"] .u {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js .build .u.on {
  opacity: 1;
  transform: none;
}
.js [data-b="pop"] {
  opacity: clamp(0, calc(var(--r) * 1.6), 1);
  transform: translateY(calc((1 - var(--r)) * 22px));
}
.js .nfc-card {
  transform: translateY(calc((1 - var(--r)) * 60px)) rotate(calc((1 - var(--r)) * 18deg));
}
.js .fv-review .stars svg {
  transform: scale(clamp(0, calc((var(--r) - 0.55 - var(--n, 0) * 0.07) * 5), 1));
}
.js .bars i {
  height: calc(var(--h) * clamp(0, calc((var(--r) - 0.5) * 2.5), 1));
}

/* pinned scenes */
.js .spot {
  height: 260vh;
}
.js .spot-sticky {
  position: sticky;
  top: 0;
}
.js .spot-card {
  --e: clamp(0, calc(var(--p, 0) * 1.7), 1);
  clip-path: inset(calc((1 - var(--e)) * 30%) calc((1 - var(--e)) * 34%) round calc(32px + (1 - var(--e)) * 18px));
}
.js .spot-in {
  --c: clamp(0, calc((var(--p, 0) - 0.4) * 3), 1);
  opacity: var(--c);
  transform: scale(calc(0.9 + var(--c) * 0.1));
}
.js .beam {
  transform: rotate(calc(var(--p, 0) * 14deg)) scale(calc(1.25 - var(--p, 0) * 0.25));
}
.js .ghost {
  transform: translate3d(calc(var(--m, 0) * -26vw), 0, 0);
}
.js .pin {
  height: 500vh;
}
.js .ribbon {
  height: 560vh;
}
.js .pin-sticky,
.js .ribbon-sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
}
.js .track {
  transform: translate3d(calc(var(--p, 0) * var(--dist, 0) * -1px), 0, 0);
}
.js .pin-ghost {
  transform: translate3d(calc(var(--p, 0) * -30vw), 0, 0);
}
.js .moment {
  opacity: calc(0.4 + var(--f, 1) * 0.6);
  transform: translateY(calc((1 - var(--f, 1)) * 26px)) scale(calc(0.9 + var(--f, 1) * 0.1));
}
@media (min-width: 961px) {
  .js .how {
    height: 330vh;
    padding: 0;
  }
  .js .how-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    align-items: center;
    gap: 40px;
  }
  .js .ring {
    position: relative;
    margin: 0;
    height: min(78svh, 640px);
    display: block;
  }
  .js .step {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    margin: -78px 0 0 -150px;
    --R: min(24svh, 210px);
    --spin: calc(var(--p, 0) * -270deg);
    transform: rotate(calc(var(--a) + var(--spin))) translateY(calc(-1 * var(--R))) rotate(calc(-1 * (var(--a) + var(--spin))));
    scale: 0.86;
    opacity: 0.45;
  }
  .js .step.on {
    scale: 1;
    opacity: 1;
    z-index: 2;
    box-shadow: var(--shadow);
  }
  .s1 { --a: 0deg; }
  .s2 { --a: 90deg; }
  .s3 { --a: 180deg; }
  .s4 { --a: 270deg; }
}

/* ───────── depth: the problem section is a deep, dark scene in both themes ───────── */
.pin {
  --ink: #f2ede4;
  --ink-soft: #d9d3c8;
  --muted: #a8a39a;
  --line: rgba(242, 237, 228, 0.12);
  --line2: rgba(242, 237, 228, 0.24);
  color: var(--ink);
  background: radial-gradient(70% 60% at 50% 45%, #1a1a1d 0%, #0c0c0d 55%, #060607 100%);
}
.pin-sticky {
  perspective: 1400px;
}
.pin-sticky::after {
  /* vignette: the edges fall into shadow */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}
.pin-ghost {
  -webkit-text-stroke: 0;
  color: rgba(242, 237, 228, 0.1);
  filter: blur(0.6px);
  font-size: clamp(120px, min(22vw, 34vh), 320px);
}
.panel {
  border-right: 0;
  padding-right: 0;
  min-height: 0;
}
.panel-intro {
  padding-right: 4vw;
}
.panel-intro .panel-title {
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.panel-card {
  position: relative;
  padding: clamp(26px, min(3.2vw, 5vh), 48px);
  padding-top: clamp(72px, min(8vw, 12vh), 116px);
  border-radius: 30px;
  background: linear-gradient(160deg, #1f1f22 0%, #131315 55%, #0d0d0f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 80px 140px rgba(0, 0, 0, 0.5);
  display: grid;
  gap: 20px;
  overflow: hidden;
}
.panel-card::before {
  /* soft warm light falling from the top left */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(90% 60% at 20% 0%, rgba(214, 179, 132, 0.14), transparent 60%);
}
.panel-card > * {
  position: relative;
}
.panel-card .panel-num {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  top: clamp(10px, 1.6vw, 22px);
  font: 800 clamp(72px, min(8vw, 14vh), 140px) / 0.8 var(--display);
  letter-spacing: -0.06em;
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg, rgba(232, 203, 163, 0.42), rgba(242, 237, 228, 0.02) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}
.panel-cost {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(242, 237, 228, 0.1);
  font-size: 15px;
  color: #d9d3c8;
}
.panel-cost b {
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d6b384;
}
.js .panel-card {
  opacity: calc(0.4 + var(--f, 1) * 0.6);
  transform: rotateY(calc(var(--d, 0) * -18deg)) translateZ(calc((var(--f, 1) - 1) * 60px)) scale(calc(0.92 + var(--f, 1) * 0.08));
  will-change: transform, opacity;
}
.js .panel-card .panel-num {
  transform: translateX(calc(var(--d, 0) * 70px));
}
.js .pin-ghost {
  transform: translate3d(calc(var(--p, 0) * -20vw), 0, 0);
}

/* ───────── depth everywhere: deeper client cards, a fine matte grain, cards that tilt under the pointer ───────── */
html[data-theme="dark"] .moment {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.4), 0 34px 70px rgba(0, 0, 0, 0.5);
}
.moment {
  box-shadow: 0 2px 6px rgba(20, 20, 20, 0.05), 0 26px 60px rgba(20, 20, 20, 0.12);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 65;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="light"] body::after,
html:not([data-theme="dark"]) body::after {
  opacity: 0.05;
  filter: invert(1);
}
@media (hover: hover) and (pointer: fine) {
  .js .tilt {
    transform: perspective(900px) rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 6deg));
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .js .tilt.hov {
    transition-duration: 0.08s;
  }
  .js .tilt::after {
    /* a soft sheen that follows the pointer */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.08), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 4;
  }
  .js .tilt.hov::after {
    opacity: 1;
  }
}

/* once the opening has played it is gone for the rest of the visit: the page starts at the hero */
.js.intro-done .intro::after,
.js.intro-done .intro-ov {
  display: none;
}
.js.intro-done .intro-sticky {
  position: relative;
}

/* the header: rounded squares, like the cards */
.nav {
  border-radius: 18px;
}
.nav-links a {
  border-radius: 10px;
}
.pill,
.theme-btn {
  border-radius: 12px;
}
.js .tap-btn {
  border-radius: 14px;
}

/* the owner panel card: section tabs, ticked services with prices, the library */
.fv-panel {
  height: auto;
  min-height: 170px;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px;
  align-items: stretch;
}
.op-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.op-tabs i {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font: 600 11px/1 var(--sans);
  white-space: nowrap;
  color: var(--ink-soft);
}
.op-tabs .on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.op-tabs .op-add {
  border-style: dashed;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.op-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--surface);
  font: 500 12.5px/1.2 var(--sans);
}
.op-tick {
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 5px;
  border: 1.5px solid var(--line2);
  display: grid;
  place-items: center;
}
.op-row.on .op-tick {
  background: var(--accent);
  border-color: var(--accent);
}
.op-tick svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #141414;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.op-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.op-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.op-empty {
  font-weight: 500;
  color: var(--muted);
}
.op-lib {
  align-self: center;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ───────── the review card showcase (view only): an iPhone and the acrylic card ───────── */
.grid {
  grid-auto-flow: row dense;
}
.feat-review {
  grid-column: 1 / -1;
  overflow: clip; /* the rings stay inside the showcase (no sideways scrolling on phones) */
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(22px, 3vw, 40px);
}
.feat-review .feat-copy {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.feat-review h3 {
  font-size: clamp(22px, 2.3vw, 32px);
}
.feat-review p {
  font-size: clamp(15px, 1.2vw, 17px);
}
.js .feat-review .tap-wrap {
  position: static;
  display: grid;
  justify-items: start;
  margin-top: 6px;
  max-width: none;
}
@media (min-width: 961px) {
  /* on wider screens the button sits in the showcase's top right corner, beside the phone and the card */
  .js .feat-review .tap-wrap {
    position: absolute;
    z-index: 4;
    top: clamp(20px, 2.4vw, 36px);
    right: clamp(20px, 2.4vw, 36px);
    left: auto;
    margin: 0;
  }
}
.rev-stage {
  --pw: min(clamp(150px, calc(54svh * 0.48), 230px), 36vw);
  --ph: calc(var(--pw) / 0.48);
  margin: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pw) * 0.2);
  perspective: 1400px;
}
.rev-stage .phone {
  z-index: 2;
  flex: none;
}
.js .rev-stage .app-frame {
  pointer-events: none; /* view only */
}
.ac-wrap {
  /* the acrylic card on the desk, beside the phone */
  position: relative;
  z-index: 1;
  flex: none;
  width: calc(var(--pw) * 1.12);
  perspective: 900px;
}
.ac-wrap .acrylic {
  transform: rotateX(14deg);
  transform-origin: 50% 100%;
}
.ac-wrap .card-rings {
  left: 50%;
  top: 50%;
}
/* the tap: the phone turns from upright to sideways, its camera end (the NFC reader) touches the card,
   then it turns upright again */
.rev-stage.tapping .phone {
  animation: phone-flat 1.4s cubic-bezier(0.45, 0, 0.2, 1);
}
@keyframes phone-flat {
  0% {
    transform: none;
  }
  38%,
  62% {
    transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(90deg) scale(0.82);
  }
  100% {
    transform: none;
  }
}
@media (max-width: 960px) {
  .feat-review {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .rev-stage {
    --pw: min(clamp(120px, calc(44svh * 0.48), 170px), 33vw);
  }
}

/* very short screens (a phone held sideways): tighter client cards */
@media (max-height: 520px) {
  .ribbon-sticky {
    padding-top: 72px;
    gap: 12px;
  }
  .ribbon-sub {
    display: none;
  }
  .moment {
    padding: 16px 18px;
    gap: 10px;
  }
  .m-thought {
    font-size: 19px;
  }
  .m-fix {
    font-size: 13px;
    padding-top: 10px;
  }
}

/* touch phones and tablets: keep the look, drop the effects a phone has to redraw on every frame */
.pin-ghost {
  will-change: transform;
}
@media (hover: none) and (pointer: coarse) {
  body::after {
    display: none; /* the film grain layer over the whole page */
  }
  .nav {
    /* a solid glass colour instead of a live blur of everything sliding underneath */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
  }
  .pin-ghost {
    filter: none;
    color: rgba(242, 237, 228, 0.08);
  }
  .pin-sticky {
    perspective: none;
  }
  .panel-card {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 0 1px rgba(255, 255, 255, 0.05),
      0 16px 36px rgba(0, 0, 0, 0.5);
  }
  .moment {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  }
}

/* phones: the sliding strips are moved by the browser itself, linked to the scroll (no script on every
   frame, so they move exactly with the finger). Each strip slides while its section is pinned. */
@keyframes strip-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--dist, 0) * -1px), 0, 0);
  }
}
@keyframes ghost-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-20vw, 0, 0);
  }
}
.css-slide .pin {
  view-timeline: --pin-scroll block;
}
.css-slide .ribbon {
  view-timeline: --ribbon-scroll block;
}
.css-slide .pin .track {
  animation: strip-slide linear both;
  animation-timeline: --pin-scroll;
  animation-range: contain 0% contain 100%;
}
.css-slide .ribbon .track {
  animation: strip-slide linear both;
  animation-timeline: --ribbon-scroll;
  animation-range: contain 0% contain 100%;
}
.css-slide .pin-ghost {
  animation: ghost-slide linear both;
  animation-timeline: --pin-scroll;
  animation-range: contain 0% contain 100%;
}

/* AMOLED phones: true black in the dark theme, so the screen's pixels switch fully off
   (laptops keep the matte black that looks best on their screens) */
@media (hover: none) and (pointer: coarse) {
  html[data-theme="dark"] {
    --bg: #000;
    --bg2: #0e0e0f;
  }
  html[data-theme="dark"] .hero::before {
    display: none; /* no soft light behind the headline */
  }
  .pin {
    background: #000;
  }
  .pin-sticky::after {
    display: none; /* the vignette: already black at the edges */
  }
}

/* no motion for anyone who asked their device for less */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .tap-ring::after {
    animation: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}