/* Passmint marketing site. Precise, editorial, softly rounded. */
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  /* Radix Slate, light */
  --s1: #FCFCFD; --s2: #F9F9FB; --s3: #F0F0F3; --s4: #E8E8EC; --s5: #E0E1E6; --s6: #D9D9E0;
  --s7: #CDCED6; --s8: #B9BBC6; --s9: #8B8D98; --s10: #80838D; --s11: #60646C; --s12: #1C2024;
  --bg: #F7F7F9;
  --bg-page: var(--bg);
  --panel: #FFFFFF;
  --panel-2: var(--s2);
  --line: rgba(28, 32, 36, .10);
  --line-2: rgba(28, 32, 36, .16);
  --text: var(--s12);
  --sub: var(--s11);
  --ter: var(--s10);
  --mint: #8FD3AC;
  --mint-ink: #23704A;
  --on-mint: #0A2618;
  --btn: var(--s12);
  --on-btn: #FFFFFF;
  --shadow: 0 1px 0 rgba(0,0,0,.02), 0 12px 32px -18px rgba(16,24,40,.22);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.36, .64, 1);
  --sans: "Geist", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --max: 1320px;
  --gut: clamp(16px, 3vw, 32px);
  --r-ctl: 10px;
  --r-sm: 7px;
  --r-card: 16px;
  --r-tile: 18px;
}
/* dark: follows the system unless the visitor picked a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --s1: #111113; --s2: #18191B; --s3: #212225; --s4: #272A2D; --s5: #2E3135; --s6: #363A3F;
    --s7: #43484E; --s8: #5A6169; --s9: #696E77; --s10: #777B84; --s11: #B0B4BA; --s12: #EDEEF0;
    --bg: #0C0D0F; --panel: #131416; --panel-2: #17181B;
    --line: rgba(237, 238, 240, .09); --line-2: rgba(237, 238, 240, .15);
    --mint-ink: #8FD3AC; --btn: #EDEEF0; --on-btn: #111113;
    --shadow: 0 1px 0 rgba(255,255,255,.02), 0 16px 40px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --s1: #111113; --s2: #18191B; --s3: #212225; --s4: #272A2D; --s5: #2E3135; --s6: #363A3F;
  --s7: #43484E; --s8: #5A6169; --s9: #696E77; --s10: #777B84; --s11: #B0B4BA; --s12: #EDEEF0;
  --bg: #0C0D0F; --panel: #131416; --panel-2: #17181B;
  --line: rgba(237, 238, 240, .09); --line-2: rgba(237, 238, 240, .15);
  --mint-ink: #8FD3AC; --btn: #EDEEF0; --on-btn: #111113;
  --shadow: 0 1px 0 rgba(255,255,255,.02), 0 16px 40px -20px rgba(0,0,0,.7);
}
/* the theme switch cross-fades the whole page */
html.theme-fade, html.theme-fade * { transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), fill .5s var(--ease) !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
}
/* body's clip is not enough on a phone: mobile browsers size the layout
   viewport to the widest content, so the store section's tilted card (which
   reaches past the right edge) widened the whole page to 448px at 375. Clip
   on <main> too; clip, unlike hidden, makes no scroll container, so the
   sticky pinned sections keep working. */
main { overflow-x: clip; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--mint); color: var(--on-mint); }
:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--btn); color: var(--on-btn); padding: 10px 14px; border-radius: var(--r-ctl); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--sub); }
.eyebrow b { font-weight: 500; color: var(--mint-ink); padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--mint-ink) 35%, transparent); border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.d1 { font-size: clamp(56px, 9.2vw, 140px); line-height: .9; letter-spacing: -0.055em; font-weight: 600; }
.d2 { font-size: clamp(46px, 6.6vw, 104px); line-height: .93; letter-spacing: -0.052em; }
.d3 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -0.04em; }
.h4 { font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; }
.lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--sub); max-width: 34ch; text-wrap: pretty; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
.muted { color: var(--sub); }

/* ---------- buttons ---------- */
.btn {
  --h: 50px;
  display: inline-flex; align-items: center; gap: 12px; height: var(--h); padding: 0 20px 0 16px;
  border-radius: var(--r-ctl); border: 1px solid transparent; cursor: pointer;
  font-size: 15.5px; font-weight: 550; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .4s var(--ease), box-shadow .3s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--mint); color: var(--on-mint); border-color: color-mix(in srgb, var(--mint) 70%, #0A2618); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset; }
.btn-primary:hover { background: #A3DDBC; }
.btn-ink { background: var(--btn); color: var(--on-btn); }
.btn-ink:hover { background: color-mix(in srgb, var(--btn) 88%, var(--mint)); }
.btn-line { border-color: var(--line-2); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.btn-line:hover { border-color: var(--s8); background: var(--panel); }
.btn-sm { --h: 38px; padding: 0 14px; font-size: 14px; gap: 8px; border-radius: 9px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn .arr { transition: transform .4s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn:disabled { opacity: .35; cursor: default; }
/* store buttons: Android live, iPhone ready to switch on (remove .is-soon, set href) */
.btn-store { flex-direction: row; text-align: left; line-height: 1.1; padding: 0 20px 0 14px; }
.btn-store small { display: block; font-size: 11px; font-weight: 500; opacity: .7; letter-spacing: 0; }
.btn-store svg { width: 22px; height: 22px; }
.btn-store.is-soon { background: transparent; color: var(--sub); border: 1px dashed var(--line-2); cursor: default; pointer-events: none; }
.btn-store.is-soon .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; padding: 3px 7px; border-radius: 6px; background: var(--s4); color: var(--sub); margin-left: 4px; }
.btn-store:not(.is-soon) .tag { display: none; }

/* the Pass Studio call to action: deliberately different from every other button */
.cta-studio {
  --c: #56C2FF;
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 14px 14px 14px 16px; border-radius: 18px; max-width: 460px; isolation: isolate;
  background: #0B0D12; color: #F3F5F9; overflow: hidden;
  box-shadow: 0 20px 50px -24px rgba(86,194,255,.45), 0 1px 0 rgba(255,255,255,.06) inset;
  transition: transform .5s var(--spring), box-shadow .5s var(--ease);
}
.cta-studio::before { /* a slow light that runs round the border */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
  background: conic-gradient(from var(--a, 0deg), rgba(86,194,255,.0) 0deg, rgba(86,194,255,.9) 60deg, rgba(143,211,172,.8) 110deg, rgba(86,194,255,0) 170deg, rgba(255,255,255,.08) 171deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: cta-spin 6s linear infinite;
}
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes cta-spin { to { --a: 360deg; } }
.cta-studio:hover { transform: translateY(-2px); box-shadow: 0 28px 60px -24px rgba(86,194,255,.6), 0 1px 0 rgba(255,255,255,.08) inset; }
.cta-studio .deck { position: relative; width: 58px; height: 52px; }
.cta-studio .deck i { position: absolute; left: 8px; top: 4px; width: 38px; height: 46px; border-radius: 6px; box-shadow: 0 6px 14px rgba(0,0,0,.4); transition: transform .6s var(--spring); }
.cta-studio .deck i:nth-child(1) { background: linear-gradient(160deg, #5D49CB, #7A2FB0); transform: rotate(-12deg) translateX(-6px); }
.cta-studio .deck i:nth-child(2) { background: linear-gradient(160deg, #0F6B73, #3B2A8C); transform: rotate(-2deg); }
.cta-studio .deck i:nth-child(3) { background: #56C2FF; transform: rotate(9deg) translateX(7px); display: grid; place-items: center; }
.cta-studio .deck i:nth-child(3)::after { content: ""; width: 16px; height: 16px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 3px #06243A, inset 0 0 0 5px #fff, inset 0 0 0 8px #06243A; }
.cta-studio:hover .deck i:nth-child(1) { transform: rotate(-20deg) translateX(-12px); }
.cta-studio:hover .deck i:nth-child(3) { transform: rotate(16deg) translateX(13px) translateY(-2px); }
.cta-studio .k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--c); text-transform: uppercase; margin-bottom: 4px; }
.cta-studio strong { display: block; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.cta-studio .t span { display: block; font-size: 13px; color: rgba(232,238,248,.62); margin-top: 3px; }
.cta-studio .go { width: 44px; height: 44px; border-radius: 12px; background: var(--c); color: #06243A; display: grid; place-items: center; transition: transform .5s var(--spring); }
.cta-studio .go svg { width: 20px; height: 20px; }
.cta-studio:hover .go { transform: translateX(3px); }
.cta-studio.lg { max-width: 560px; padding: 18px 18px 18px 20px; }
.cta-studio.lg strong { font-size: 21px; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: 72px; transition: background-color .4s var(--ease), border-color .4s var(--ease); border-bottom: 1px solid transparent; }
.nav.solid { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-color: var(--line); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 650; font-size: 23px; letter-spacing: -0.04em; }
.brand img { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a { position: relative; font-size: 14px; color: var(--sub); padding: 8px 10px; border-radius: 9px; transition: color .3s, background-color .3s; }
.nav-links a:hover { color: var(--text); background: color-mix(in srgb, var(--s4) 70%, transparent); }
.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; border-radius: 2px; background: var(--mint); transform: translateX(-50%) scale(0); transition: transform .45s var(--spring); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--mint) 60%, transparent); }
.nav-links a.on { color: var(--text); background: color-mix(in srgb, var(--mint) 14%, transparent); }
.nav-links a.on::after { transform: translateX(-50%) scale(1); }
.nav-tools { display: flex; align-items: center; gap: 8px; }
.nav-cta { display: flex; gap: 8px; }
/* switches: track with an icon knob */
.sw { position: relative; width: 58px; height: 32px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); cursor: pointer; padding: 0; flex-shrink: 0; transition: background-color .4s var(--ease), border-color .4s; }
.sw .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 7px; background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px var(--line); display: grid; place-items: center; transition: transform .55s var(--spring), background-color .4s; }
.sw[aria-checked="true"] .knob { transform: translateX(26px); }
.sw .knob svg { width: 16px; height: 16px; overflow: visible; }
.sw:hover { border-color: var(--s8); }
.sw-theme[aria-checked="true"] { background: #1B1E2B; border-color: #2B3045; }
.sw-theme[aria-checked="true"] .knob { background: #2A2F45; box-shadow: 0 1px 3px rgba(0,0,0,.4); color: #E7E9FF; }
.sw-theme .knob { color: #E3A008; }
.sw-theme .core { transform-origin: 12px 12px; transition: transform .6s var(--spring); }
.sw-theme .bite { transition: transform .6s var(--ease); transform: translate(10px, -10px); }
.sw-theme .rays { transform-origin: 12px 12px; transition: transform .6s var(--ease), opacity .4s; }
.sw-theme[aria-checked="true"] .core { transform: scale(1.45); }
.sw-theme[aria-checked="true"] .bite { transform: translate(0, 0); }
.sw-theme[aria-checked="true"] .rays { transform: rotate(-60deg) scale(.4); opacity: 0; }
.sw-motion .knob { color: var(--mint-ink); }
.sw-motion .wv { transition: d .5s var(--ease), opacity .4s; }
.sw-motion .wave { transition: opacity .35s, transform .5s var(--ease); transform-origin: 12px 12px; }
.sw-motion .still { opacity: 0; transition: opacity .35s, transform .5s var(--ease); transform: scaleX(.3); transform-origin: 12px 12px; }
.sw-motion[aria-checked="true"] .wave { opacity: 0; transform: scaleY(.2); }
.sw-motion[aria-checked="true"] .still { opacity: 1; transform: none; }
.sw-motion[aria-checked="true"] { background: color-mix(in srgb, var(--mint) 18%, var(--panel-2)); }
.sw-tip { position: relative; }
.sw-tip > span { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); white-space: nowrap; font-size: 12px; padding: 5px 8px; border-radius: 7px; background: var(--btn); color: var(--on-btn); opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease); }
.sw-tip:hover > span, .sw-tip:focus-within > span { opacity: 1; transform: translate(-50%, 0); }
.menu-btn { display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; background: none; place-items: center; cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; }
.sheet { position: fixed; inset: 72px 0 auto; z-index: 49; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gut) 20px; display: none; }
.sheet.open { display: block; }
.sheet a.l { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.sheet .row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 1180px) { .nav-links { display: none; } .nav-tools { margin-left: auto; } }
@media (max-width: 760px) {
  .nav { height: 64px; }
  .sheet { inset: 64px 0 auto; }
  .nav-cta { display: none; } .menu-btn { display: grid; }
  .brand { font-size: 21px; } .brand img { width: 30px; height: 30px; }
  .nav .wrap { gap: 10px; }
  .sw { width: 50px; height: 30px; } .sw .knob { width: 22px; height: 22px; } .sw[aria-checked="true"] .knob { transform: translateX(20px); }
  .sw-tip > span { display: none; }
}

/* ---------- story: hero + 3D journey ---------- */
.story { position: relative; height: 440vh; }
.story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-fallback { position: absolute; right: 8vw; top: 50%; width: min(340px, 34vw); transform: translateY(-50%) rotate(-3deg); display: none; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
.no-webgl .story-fallback { display: block; }
.hero { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; pointer-events: none; }
.hero > .wrap { pointer-events: auto; }
.hero .d1 { margin: 22px 0 26px; max-width: 8.5ch; }
.hero .lead { max-width: 30ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; align-items: center; }
.hero .cta-studio { margin-top: 0; }
.spec { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: auto; }
.spec .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec .wrap > div { border-top: 1px solid var(--line); padding: 16px 0 20px; display: flex; align-items: baseline; gap: 10px; color: var(--sub); }
.spec .wrap > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.spec b { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--text); letter-spacing: 0; }
.spec span { font-size: 13.5px; }

.beats { position: absolute; inset: 0; pointer-events: none; }
.beat { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; }
.beat .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.beat-inner { grid-column: 1 / span 4; }
.beat .idx { color: var(--sub); margin-bottom: 18px; }
/* one line of text, not a flex row: as flex items the number and the rest
   wrapped separately, leaving "03" stranded beside a two-line label */
.beat .idx b { color: var(--mint-ink); font-weight: 500; margin-right: 6px; }
.beat .d3 { margin-bottom: 14px; }
.beat p { color: var(--sub); max-width: 32ch; font-size: 17px; }
.rail { position: absolute; left: 0; right: 0; bottom: 28px; pointer-events: none; opacity: 0; }
.rail .wrap { display: flex; gap: 6px; align-items: center; }
.rail i { display: block; height: 3px; width: 40px; background: var(--line-2); position: relative; overflow: hidden; border-radius: 2px; }
.rail i::after { content: ""; position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(var(--f, 0)); }
.rail span { margin-left: 10px; color: var(--sub); }
@media (max-width: 760px) {
  .hero { justify-content: flex-start; padding-top: 88px; }
  .hero .d1 { margin: 12px 0 12px; font-size: 52px; }
  .hero .lead { font-size: 15.5px; }
  .hero .eyebrow { font-size: 10.5px; }
  .cta-row { margin-top: 16px; gap: 8px; }
  .cta-row .btn { --h: 46px; font-size: 14.5px; }
  .hero .cta-studio { margin-top: 10px; padding: 10px 10px 10px 12px; gap: 12px; border-radius: 16px; }
  .hero .cta-studio .deck { transform: scale(.82); width: 48px; }
  .hero .cta-studio strong { font-size: 16px; }
  .hero .cta-studio .go { width: 38px; height: 38px; }
  .spec { display: none; }
  .beat { top: auto; bottom: 62px; transform: none; }
  .beat-inner { grid-column: 1 / -1; padding: 16px; margin: 0 -4px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .beat .d3 { font-size: 25px; margin-bottom: 8px; }
  .beat p { font-size: 14.5px; }
  .beat .idx { margin-bottom: 10px; }
  .rail { bottom: 24px; }
}
@media (max-height: 640px) and (min-width: 761px) { .spec { display: none; } }

/* ---------- sections ---------- */
section.sec { padding: clamp(80px, 11vw, 160px) 0; position: relative; }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); align-items: end; }
.sec-head > div:first-child { grid-column: 1 / span 7; }
.sec-head > p { grid-column: 9 / span 4; }
.sec-head .eyebrow { margin-bottom: 22px; }
@media (max-width: 900px) {
  .sec-head > div:first-child, .sec-head > p { grid-column: 1 / -1; }
  .sec-head { gap: 16px; }
  section.sec { padding: 72px 0; }
}
.rule { border-top: 1px solid var(--line); }

/* segmented control */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 4px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); position: relative; }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: 0 16px; height: 38px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 550; color: var(--sub); transition: color .3s var(--ease); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.seg button svg { width: 16px; height: 16px; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { color: var(--text); }
.seg .thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 8px; background: var(--panel); box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(0,0,0,.06); transition: transform .55s var(--spring), width .45s var(--ease); }
:root[data-theme="dark"] .seg .thumb { background: var(--s4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg .thumb { background: var(--s4); } }

/* platform switch: Apple / Android, used next to every live pass */
.plat-sw { display: inline-grid; grid-template-columns: 1fr 1fr; position: relative; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--line-2); backdrop-filter: blur(8px); }
.plat-sw button { position: relative; z-index: 1; width: 40px; height: 34px; border: 0; background: none; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--ter); transition: color .3s; }
.plat-sw button svg { width: 18px; height: 18px; }
.plat-sw button[aria-pressed="true"] { color: var(--text); }
.plat-sw .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 8px; background: var(--panel); box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(0,0,0,.08); transition: transform .55s var(--spring); }
.plat-sw[data-on="android"] .thumb { transform: translateX(100%); }
:root[data-theme="dark"] .plat-sw .thumb { background: var(--s5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plat-sw .thumb { background: var(--s5); } }

/* chips under a live pass, like the app's filter row */
.chips-row { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 85%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px); position: relative; }
.chips-row button { position: relative; z-index: 1; border: 0; background: none; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 550; color: var(--sub); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; transition: color .3s; }
.chips-row button svg { width: 15px; height: 15px; }
.chips-row button[aria-pressed="true"] { color: #06243A; }
.chips-row .thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; border-radius: 9px; background: #56C2FF; transition: transform .55s var(--spring), width .45s var(--ease); }

/* ---------- stage (live card) ---------- */
.stage {
  position: relative; border: 1px solid var(--line); border-radius: 22px; background: var(--panel-2);
  min-height: 640px; display: grid; place-items: center; overflow: hidden; padding: 64px 24px 92px;
  --bg-page: var(--panel-2);
}
.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; background-position: center center; opacity: .55; -webkit-mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%); mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%); }
.stage .corner { position: absolute; color: var(--ter); }
.stage .corner.tl { top: 18px; left: 20px; }
.stage .corner.tr { top: 12px; right: 12px; }
.stage .under { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); }
.live-card { position: relative; width: min(340px, 78vw); }
.live-card .pc-wrap { --pc-cut: var(--panel-2); }
.morph { position: relative; transition: height .6s var(--spring); }
.morph > .pc-wrap { position: absolute; left: 0; right: 0; top: 0; transition: opacity .45s var(--ease), transform .6s var(--spring); }
.morph > .pc-wrap.leaving { opacity: 0; transform: translateY(-10px) scale(.97); }
.morph > .pc-wrap.entering { opacity: 0; transform: translateY(16px) scale(.97); }

/* ---------- types ---------- */
.types { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.types-copy { grid-column: 1 / span 4; }
.types-copy .type-name { font-size: clamp(32px, 3.2vw, 46px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin: 18px 0 14px; }
.types-copy .type-desc { color: var(--sub); font-size: 17px; max-width: 34ch; min-height: 5em; }
.types-copy dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14.5px; }
.types-copy dt { color: var(--ter); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
.types-copy dd { margin: 0; }
.types-stage { grid-column: 6 / span 7; }
@media (max-width: 900px) {
  .types-copy, .types-stage { grid-column: 1 / -1; }
  .types-copy .type-desc { min-height: 0; }
  .types-copy dl { display: none; }
  .stage { min-height: 0; padding: 70px 14px 84px; border-radius: 18px; }
  .stage .under { bottom: 14px; }
  .chips-row button { padding: 0 10px; font-size: 13px; }
  .chips-row button svg { display: none; }
}

/* ---------- customise ---------- */
.custom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.custom .stage { grid-column: 1 / span 6; min-height: 640px; position: sticky; top: 96px; }
.custom-ctl { grid-column: 8 / span 5; display: flex; flex-direction: column; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.steps button { border: 0; background: none; padding: 12px 12px 13px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; color: var(--sub); border-right: 1px solid var(--line); position: relative; }
.steps button:last-child { border-right: 0; }
.steps button .mono { font-size: 10.5px; }
.steps button strong { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.steps button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.steps button[aria-selected="true"] { color: var(--text); background: var(--panel); }
.steps button[aria-selected="true"]::after { transform: scaleX(1); }
.steps button.done .mono { color: var(--mint-ink); }
.step-panel { padding: 28px 0 0; min-height: 490px; }
.step-panel h3 { font-size: 28px; letter-spacing: -0.03em; margin-bottom: 8px; }
.step-panel > p { color: var(--sub); margin-bottom: 22px; max-width: 40ch; }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sw-c { aspect-ratio: 1; border-radius: 12px; border: 0; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1px var(--line); transition: transform .45s var(--spring); }
.sw-c:hover { transform: translateY(-2px); }
.sw-c[aria-pressed="true"]::after { content: ""; position: absolute; inset: -5px; border-radius: 15px; border: 2px solid var(--text); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); padding: 0; cursor: pointer; overflow: hidden; text-align: left; transition: border-color .3s var(--ease), transform .45s var(--spring); position: relative; }
.tile:hover { border-color: var(--s8); transform: translateY(-2px); }
.tile[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.tile .prev { aspect-ratio: 4 / 3; background-size: cover; background-position: center; position: relative; display: block; }
.tile > span:last-child { display: flex; justify-content: space-between; padding: 8px 10px; font-size: 13px; font-weight: 550; }
.tile .pv { position: absolute; inset: 0; }
.tile.upload .prev { display: grid; place-items: center; color: var(--sub); background: var(--panel-2); }
.tile.upload svg { width: 22px; height: 22px; }
.step-foot { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.step-foot .hint { color: var(--ter); grid-column: 1 / -1; margin-bottom: 6px; }
.step-foot .nav-btns { display: flex; gap: 8px; }
@media (max-width: 900px) {
  .custom .stage { grid-column: 1 / -1; position: sticky; top: 64px; z-index: 3; min-height: 0; height: 46svh; padding: 34px 14px 14px; border-radius: 0 0 18px 18px; margin: 0 calc(var(--gut) * -1); border-left: 0; border-right: 0; border-top: 0; box-shadow: 0 16px 30px -24px rgba(0,0,0,.5); }
  .custom .stage .corner.tl { top: 10px; } .custom .stage .corner.tr { top: 6px; }
  .custom .live-card { width: var(--fit-w, 220px); }
  .custom-ctl { grid-column: 1 / -1; }
  .step-panel { min-height: 420px; padding-top: 18px; }
  .step-panel h3 { font-size: 22px; }
  .swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .step-foot { grid-template-columns: 1fr; }
  .step-foot .nav-btns .btn { flex: 1; justify-content: center; }
  .step-foot .btn-primary { justify-content: center; }
}

/* ---------- pinned scenes (store cards, wallet, share) ---------- */
.pin { position: relative; height: 250vh; }
.pin-in { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: 72px; }
.pin-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; width: 100%; }
.pin-copy { grid-column: 1 / span 5; }
.pin-copy .d2 { margin: 22px 0 22px; font-size: clamp(44px, 5.2vw, 84px); }
.pin-vis { grid-column: 7 / span 6; position: relative; height: min(580px, 70vh); }
.steps-list { margin-top: 30px; display: grid; border-top: 1px solid var(--line); }
.steps-list div { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ter); transition: color .4s var(--ease); }
.steps-list div.on { color: var(--text); }
.steps-list .mono { padding-top: 3px; }
.steps-list div.on .mono { color: var(--mint-ink); }
@media (max-width: 900px) {
  .pin { height: 230vh; }
  .pin-in { align-items: flex-start; padding-top: 80px; padding-bottom: 16px; }
  .pin-copy, .pin-vis { grid-column: 1 / -1; }
  .pin-grid { gap: 14px; }
  .pin-copy .d2 { font-size: 36px; margin: 12px 0 10px; }
  .pin-copy .lead { font-size: 15px; }
  .steps-list { margin-top: 14px; }
  .steps-list div { padding: 8px 0; font-size: 14px; }
  .pin-vis { height: 40svh; }
}
@media (max-width: 900px) and (max-height: 700px) { .pin-copy .lead { display: none; } }

/* store */
.store-vis { perspective: 1400px; }
.plastic, .store-pass { position: absolute; left: 50%; top: 50%; width: min(420px, 80%); transform-style: preserve-3d; }
.plastic { aspect-ratio: 85.6 / 53.98; border-radius: 4.2% / 6.6%; background: linear-gradient(135deg, #0A63B8, #034A8D 60%, #023C73); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.14); overflow: hidden; color: #FFD43B; will-change: transform; }
.plastic::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,.08) 100%); }
.plastic .pl-brand { position: absolute; left: 7%; top: 11%; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: clamp(18px, 2.1vw, 30px); letter-spacing: -0.02em; }
.plastic .pl-club { position: absolute; left: 7%; top: 30%; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .12em; opacity: .85; }
.plastic .pl-bar { position: absolute; left: 7%; right: 36%; bottom: 12%; height: 38%; background: #fff; border-radius: 5px; padding: 5% 5% 3%; transition: box-shadow .3s; }
.plastic .pl-bar svg { width: 100%; height: 100%; }
.plastic .pl-no { position: absolute; right: 7%; bottom: 14%; text-align: right; font-family: "OCR A Std", "Courier New", monospace; font-size: 12px; color: rgba(255,255,255,.85); letter-spacing: .06em; line-height: 1.5; text-shadow: 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.2); }
.plastic .pl-sample { position: absolute; right: 7%; top: 13%; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.4); padding: 2px 5px; border-radius: 4px; }
.scanframe { position: absolute; inset: -16px; pointer-events: none; opacity: 0; }
.scanframe i { position: absolute; width: 24px; height: 24px; border: 2.5px solid var(--mint); }
.scanframe .a { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; } .scanframe .b { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scanframe .c { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; } .scanframe .d { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.scanline { position: absolute; left: -6px; right: -6px; height: 2px; background: var(--mint); box-shadow: 0 0 0 1px rgba(143,211,172,.25); top: 0; opacity: 0; border-radius: 2px; }
.store-pass { width: min(360px, 74%); opacity: 0; }
.store-pass .pc-wrap { --pc-cut: var(--bg); }
.store-pass .pc-shape { box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 34px 50px -26px rgba(0,0,0,.45) !important; }
.store-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.store-names span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; color: var(--sub); background: var(--panel); }
.store-names i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 800; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
@media (max-width: 900px) { .store-names { display: none; } .plastic { width: min(320px, 76%); } .store-pass { width: min(270px, 64%); } }

/* wallet */
.wallet-vis { display: flex; justify-content: center; align-items: center; }
.wallet-vis .phone { height: 100%; }
.wallet-vis .tapring { position: absolute; left: 50%; top: 72.5%; width: 46%; aspect-ratio: 3.1; transform: translate(-50%, -50%); border-radius: 10px; border: 2px solid var(--mint); opacity: 0; pointer-events: none; }
.wallet-stack { position: absolute; inset: 0; background: #000; opacity: 0; padding: 26% 6% 0; display: flex; flex-direction: column; }
.wallet-stack .ws-title { color: #fff; font: 700 clamp(16px, 2.2vh, 22px)/1 -apple-system, "Helvetica Neue", Arial, sans-serif; margin: 0 2% 8%; letter-spacing: -0.02em; }
.wallet-stack .ws { position: relative; }
.wallet-stack .ws > div { position: absolute; left: 0; right: 0; will-change: transform; }
.wallet-stack .pc-wrap { --pc-cut: #000; }
.wallet-copy .rows { margin-top: 28px; display: grid; gap: 10px; }
.wallet-copy .wr { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.wallet-copy .wr .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); }
.wallet-copy .wr .ic svg { width: 20px; height: 20px; }
.wallet-copy .wr strong { display: block; font-size: 15.5px; letter-spacing: -0.01em; }
.wallet-copy .wr span { color: var(--sub); font-size: 14px; }
@media (max-width: 900px) { .wallet-copy .rows { display: none; } }

/* share */
.share-vis { display: flex; justify-content: space-between; align-items: center; padding: 0 2%; }
.phone { position: relative; height: 100%; aspect-ratio: 900 / 1956; border-radius: 13.6% / 6.3%; padding: 1.15%; background: #0B0B0C; box-shadow: 0 0 0 1px #3A3D42, 0 0 0 2px #1B1C1F, 0 40px 80px -40px rgba(0,0,0,.6); }
.phone::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); pointer-events: none; }
.phone .scr { width: 100%; height: 100%; border-radius: 12.4% / 5.75%; overflow: hidden; position: relative; background: #000; }
.phone .scr img { width: 100%; height: 100%; object-fit: cover; }
.phone .btn-side { position: absolute; right: -3px; top: 22%; width: 2px; height: 9%; background: #2A2C30; border-radius: 0 1px 1px 0; }
.phone .btn-side.l1 { left: -3px; right: auto; top: 17%; height: 4%; border-radius: 1px 0 0 1px; }
.phone .btn-side.l2 { left: -3px; right: auto; top: 24%; height: 7%; border-radius: 1px 0 0 1px; }
.phone .scr .overlay { position: absolute; inset: 0; opacity: 0; }
.file {
  position: absolute; left: 0; top: 0; z-index: 4; display: grid; grid-template-columns: 34px auto; gap: 10px; align-items: center;
  padding: 10px 14px 10px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  will-change: transform; white-space: nowrap;
}
.file .fi { width: 34px; height: 40px; position: relative; }
.file .fi svg { width: 100%; height: 100%; }
.file strong { display: block; font-size: 14px; letter-spacing: -0.01em; }
.file > span:last-child > span { font-family: var(--mono); font-size: 10.5px; color: var(--sub); letter-spacing: .04em; }
.path { position: absolute; inset: 0; pointer-events: none; }
.path path { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 5; }
@media (max-width: 520px) { .file { padding: 7px 10px 7px 7px; gap: 7px; grid-template-columns: 26px auto; } .file .fi { width: 26px; height: 30px; } .file strong { font-size: 12.5px; } .file > span:last-child > span { font-size: 9.5px; } }

/* ---------- watch (promo film) ---------- */
.watch .frame { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); background: #050608; aspect-ratio: 16 / 9; box-shadow: 0 40px 100px -50px rgba(0,0,0,.6); }
.watch video { width: 100%; height: 100%; object-fit: cover; }
.vctl { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(8,9,12,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #EDEEF0; border: 1px solid rgba(255,255,255,.1); }
.vctl button { width: 38px; height: 38px; border-radius: 10px; border: 0; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.vctl button:hover { background: rgba(255,255,255,.18); }
.vctl button svg { width: 16px; height: 16px; }
.vctl .tl { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); position: relative; overflow: hidden; cursor: pointer; }
.vctl .tl i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.vctl .mono { font-size: 10.5px; color: rgba(255,255,255,.75); min-width: 76px; text-align: right; }
.bigplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 24px; border: 0; background: rgba(255,255,255,.92); color: #0B0D12; display: grid; place-items: center; cursor: pointer; box-shadow: 0 20px 40px rgba(0,0,0,.35); transition: transform .5s var(--spring), opacity .3s; }
.bigplay svg { width: 26px; height: 26px; margin-left: 4px; }
.bigplay:hover { transform: translate(-50%, -50%) scale(1.06); }
.frame.playing .bigplay { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .watch .frame { border-radius: 14px; } .vctl { left: 8px; right: 8px; bottom: 8px; padding: 5px; } .vctl button { width: 32px; height: 32px; } .vctl .mono { display: none; } .bigplay { width: 64px; height: 64px; border-radius: 18px; } }

/* ---------- studio teaser ---------- */
.teaser { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.teaser-copy { grid-column: 1 / span 5; }
.teaser-copy .d2 { margin: 22px 0; font-size: clamp(44px, 5.2vw, 84px); }
.teaser-copy ul { list-style: none; padding: 0; margin: 26px 0 30px; border-top: 1px solid var(--line); }
.teaser-copy li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.teaser-copy li .mono { color: var(--ter); padding-top: 3px; }
.film { grid-column: 6 / span 7; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: #08090C; aspect-ratio: 16 / 10; margin: 0; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film .vctl { left: 12px; right: 12px; bottom: 12px; }
@media (max-width: 900px) {
  .teaser-copy, .film { grid-column: 1 / -1; }
  .teaser .cta-studio { max-width: none; }
  .teaser-copy > .cta-studio { display: none; }
  .teaser-after { display: grid !important; grid-column: 1 / -1; }
}
.teaser-after { display: none; }

/* ---------- features bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.tile-f { position: relative; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--panel); padding: 24px; display: flex; flex-direction: column; overflow: hidden; min-height: 380px; }
.tile-f .vis { flex: 1; display: grid; place-items: center; min-height: 180px; position: relative; margin: 22px 0; }
.tile-f h3 { font-size: 20px; letter-spacing: -0.025em; margin-bottom: 8px; }
.tile-f p { color: var(--sub); font-size: 15px; max-width: 40ch; }
.tile-f .k { position: absolute; top: 18px; right: 20px; color: var(--ter); }
.f-codes { grid-column: span 7; }
.f-free { grid-column: span 5; }
.f-off, .f-priv, .f-tidy, .f-lang { grid-column: span 3; }
@media (max-width: 1100px) { .f-off, .f-priv, .f-tidy, .f-lang { grid-column: span 6; } }
@media (max-width: 760px) {
  .bento { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-codes, .f-free { grid-column: 1 / -1; }
  .f-off, .f-priv, .f-tidy, .f-lang { grid-column: span 1; min-height: 0; padding: 14px; border-radius: 16px; }
  .f-off .vis, .f-priv .vis, .f-tidy .vis, .f-lang .vis { min-height: 140px; margin: 18px 0 12px; }
  .f-off h3, .f-priv h3, .f-tidy h3, .f-lang h3 { font-size: 15.5px; }
  .f-off p, .f-priv p, .f-tidy p, .f-lang p { font-size: 13px; }
  .tile-f .k { top: 12px; right: 12px; font-size: 9.5px; }
  .tile-f { min-height: 0; }
}
.codebox { width: min(100%, 440px); height: 170px; background: #fff; border-radius: 14px; display: grid; place-items: center; padding: 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.codebox .c { height: 100%; width: 100%; display: grid; place-items: center; }
.codebox svg { max-height: 134px; max-width: 100%; width: auto; height: auto; }
.codebox svg.sq { height: 134px; width: 134px; }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; width: min(100%, 440px); }
.chip { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; padding: 7px 4px; border: 1px solid var(--line-2); border-radius: 8px; background: none; color: var(--sub); cursor: pointer; transition: all .25s var(--ease); white-space: nowrap; }
.chip:hover { color: var(--text); border-color: var(--s8); }
.chip[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
/* Four columns leave a phone 67px a chip, and "Data Matrix" needs 82. */
@media (max-width: 420px) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.f-free .big { font-size: clamp(44px, 5.4vw, 76px); line-height: .92; letter-spacing: -0.055em; font-weight: 600; align-self: stretch; display: grid; align-content: center; }
.f-free .big span { display: block; transform: translateY(18px); opacity: 0; transition: transform 1s var(--ease), opacity .8s var(--ease); }
.f-free.in .big span { transform: none; opacity: 1; }
.f-free.in .big span:nth-child(2) { transition-delay: .08s; } .f-free.in .big span:nth-child(3) { transition-delay: .16s; }
.f-free .big span:last-child { color: var(--mint-ink); }
.ledger { display: grid; grid-template-columns: 1fr auto; gap: 0 24px; font-family: var(--mono); font-size: 12px; color: var(--sub); border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 14px; }
.ledger b { color: var(--text); font-weight: 500; text-align: right; }
/* offline: a status bar that goes into airplane mode */
.offline { width: 100%; max-width: 190px; display: grid; gap: 10px; justify-items: center; position: relative; }
.sbar { width: 100%; display: flex; align-items: center; justify-content: space-between; font: 600 12px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--text); padding: 0 4px; height: 16px; }
.sbar .right { display: flex; gap: 5px; align-items: center; position: relative; }
.sbar .bars { display: flex; gap: 1.5px; align-items: flex-end; height: 10px; transition: opacity .5s, transform .5s var(--ease); }
.sbar .bars i { width: 2.5px; background: currentColor; border-radius: .5px; }
.sbar .bars i:nth-child(1) { height: 3.5px; } .sbar .bars i:nth-child(2) { height: 5.5px; } .sbar .bars i:nth-child(3) { height: 7.5px; } .sbar .bars i:nth-child(4) { height: 10px; }
.sbar .wifi { width: 14px; height: 10px; transition: opacity .5s, transform .5s var(--ease); }
.sbar .batt { width: 22px; height: 10px; border: 1px solid currentColor; border-radius: 3px; padding: 1px; opacity: .9; }
.sbar .batt i { display: block; height: 100%; width: 80%; background: currentColor; border-radius: 1px; }
.sbar .plane-s { position: absolute; left: -2px; top: -2px; width: 14px; height: 14px; opacity: 0; transform: scale(.4); transition: opacity .4s .9s, transform .6s var(--spring) .9s; color: #F59E0B; }
.f-off.on .sbar .bars, .f-off.on .sbar .wifi { opacity: 0; transform: translateY(4px); }
.f-off.on .sbar .plane-s { opacity: 1; transform: scale(1); }
.flyer { position: absolute; left: 0; top: 0; width: 18px; height: 18px; color: #F59E0B; opacity: 0; offset-path: path("M -60 22 C -10 -14, 70 -16, 132 8"); offset-rotate: auto; offset-distance: 0%; z-index: 3; pointer-events: none; }
.f-off.on .flyer { animation: fly 1.4s var(--ease) forwards; }
@keyframes fly { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.mini-pass { width: 100%; transition: transform .6s var(--spring); }
.f-off.on .mini-pass { transform: translateY(-2px); }
.okline { font-family: var(--mono); font-size: 11px; color: var(--sub); display: flex; gap: 6px; align-items: center; }
.okline svg { width: 12px; height: 12px; color: var(--mint-ink); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 8px 7px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--sub); }
.toggle-row .lbl { display: flex; align-items: center; gap: 7px; }
.toggle-row .lbl svg { width: 14px; height: 14px; color: #F59E0B; }
.sq-toggle { width: 36px; height: 21px; border-radius: 7px; background: var(--s6); position: relative; transition: background-color .4s var(--ease); flex-shrink: 0; }
.sq-toggle::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .5s var(--spring); }
.f-off.on .sq-toggle { background: #F59E0B; }
.f-off.on .sq-toggle::after { transform: translateX(15px); }
.flow { width: 100%; display: grid; gap: 8px; font-family: var(--mono); font-size: 11.5px; }
.flow .r { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--sub); }
.flow .r b { font-weight: 500; color: var(--text); }
.flow .r.x b { color: var(--sub); text-decoration: line-through; text-decoration-color: var(--s8); }
.flow .r.on { border-color: var(--line-2); background: var(--panel-2); }
.tidy { position: relative; width: 170px; height: 190px; }
.tidy .t { position: absolute; left: 0; right: 0; transition: transform 1.1s var(--ease), opacity .9s var(--ease); }
.tidy .t1 { top: 0; z-index: 1; } .tidy .t2 { top: 26px; z-index: 2; } .tidy .t3 { top: 52px; z-index: 3; }
.tidy .drawer { position: absolute; left: -10px; right: -10px; bottom: -6px; height: 34px; border: 1px solid var(--line-2); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-family: var(--mono); font-size: 10.5px; color: var(--sub); background: var(--panel); z-index: 5; letter-spacing: .06em; }
.tidy.go .t3 { transform: translateY(110px) scale(.9); opacity: 0; }
.tidy.go .t1, .tidy.go .t2 { transform: translateY(26px); }
.tidy .count { color: var(--text); }
.lang { display: grid; place-items: center; gap: 14px; width: 100%; }
.lang .word { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; height: 52px; position: relative; width: 100%; text-align: center; overflow: hidden; }
.lang .word span { position: absolute; left: 0; right: 0; top: 0; transition: transform .7s var(--ease), opacity .5s var(--ease); }
.lang .word span.out { transform: translateY(-100%); opacity: 0; }
.lang .word span.pre { transform: translateY(100%); opacity: 0; }
.lang .meta { display: flex; gap: 10px; color: var(--sub); }
.lang .ticks { display: grid; grid-template-columns: repeat(18, 1fr); gap: 3px; width: 100%; max-width: 220px; }
.lang .ticks i { height: 10px; background: var(--s5); border-radius: 2px; transition: background-color .4s; }
.lang .ticks i.on { background: var(--text); }
@media (max-width: 760px) {
  .tidy { transform: scale(.78); }
  .lang .word { font-size: 28px; height: 38px; }
  .flow { font-size: 10px; gap: 6px; } .flow .r { padding: 7px 7px; grid-template-columns: 1fr; gap: 2px; }
  .offline { max-width: 150px; }
  .toggle-row { font-size: 11px; padding: 5px 6px; }
}

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.faq-head { grid-column: 1 / span 4; }
.faq-list { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa button { width: 100%; display: grid; grid-template-columns: 1fr 30px; gap: 20px; align-items: center; padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left; font-size: 19px; font-weight: 550; letter-spacing: -0.02em; }
.qa .pm { width: 30px; height: 30px; position: relative; border-radius: 9px; border: 1px solid var(--line-2); }
.qa .pm::before, .qa .pm::after { content: ""; position: absolute; left: 8px; right: 8px; top: 14px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .5s var(--spring); }
.qa .pm::after { transform: rotate(90deg); }
.qa[data-open] .pm::after { transform: rotate(0deg); }
.qa .ans { overflow: hidden; height: 0; transition: height .55s var(--ease); }
.qa .ans p { padding: 0 48px 24px 0; color: var(--sub); max-width: 62ch; }
@media (max-width: 900px) { .faq-head, .faq-list { grid-column: 1 / -1; } .qa button { font-size: 17px; } }

/* ---------- final cta + footer ---------- */
.final .box { border: 1px solid var(--line); border-radius: 24px; padding: clamp(28px, 6vw, 72px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; background: var(--panel); position: relative; overflow: hidden; }
.final .box > div:first-child { grid-column: 1 / span 7; }
.final .box > div:last-child { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.final .box .store-row { display: flex; gap: 10px; flex-wrap: wrap; }
.final .d2 { margin-top: 22px; }
.final img.icon { width: 76px; height: 76px; margin-bottom: 8px; }
@media (max-width: 900px) { .final .box > div { grid-column: 1 / -1 !important; } .final .box { border-radius: 18px; } }
footer { padding: 56px 0 40px; }
footer .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 28px; }
footer .f1 { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 12px; }
footer .f1 p { color: var(--sub); font-size: 14px; max-width: 40ch; }
footer nav { grid-column: 8 / span 5; display: flex; gap: 24px; justify-content: flex-end; flex-wrap: wrap; font-size: 14px; }
footer nav a { color: var(--sub); } footer nav a:hover { color: var(--text); }
footer .legal { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--ter); padding-top: 28px; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { footer .f1, footer nav { grid-column: 1 / -1; justify-content: flex-start; } }

/* reveal on scroll (opacity + small rise; end state is visible) */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* reduced motion: from the system, or from the switch in the top bar */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  :root:not([data-motion="full"]) .rv { opacity: 1; transform: none; }
  :root:not([data-motion="full"]) .f-free .big span { opacity: 1; transform: none; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
:root[data-motion="reduce"] .rv { opacity: 1; transform: none; }
:root[data-motion="reduce"] .f-free .big span { opacity: 1; transform: none; }
:root[data-motion="reduce"] .sw .knob, :root[data-motion="reduce"] .sw-theme * { transition-duration: .25s !important; }

/* ---------- round 3 ---------- */
/* store buttons share one width; together they span the Pass Studio card */
.ctas { width: min(460px, 100%); margin-top: 34px; display: grid; gap: 10px; }
.ctas .cta-row { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ctas .btn-store, .final .store-row .btn-store { justify-content: center; width: 100%; }
.ctas .cta-studio, .hero .ctas .cta-studio { margin-top: 0; max-width: none; width: 100%; }
.final .box > div:last-child { align-self: center; }
.final .store-row { display: grid !important; grid-template-columns: 1fr 1fr; }
/* top bar: Pass Studio and both stores */
.nav-cta { align-items: center; gap: 8px; margin-left: 6px; }
.nav-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
.nav-studio { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 13px 0 9px; border-radius: 10px; background: #0B0D12; color: #F3F5F9; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; position: relative; isolation: isolate; box-shadow: 0 8px 20px -12px rgba(86,194,255,.6); transition: transform .45s var(--spring); }
.nav-studio::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; background: conic-gradient(from var(--a, 0deg), rgba(86,194,255,0) 0deg, rgba(86,194,255,.9) 60deg, rgba(143,211,172,.8) 110deg, rgba(86,194,255,0) 170deg, rgba(255,255,255,.1) 171deg 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cta-spin 6s linear infinite; }
.nav-studio:hover { transform: translateY(-1px); }
.nav-studio .deck { position: relative; width: 20px; height: 18px; }
.nav-studio .deck i { position: absolute; top: 1px; width: 13px; height: 16px; border-radius: 3px; }
.nav-studio .deck i:first-child { left: 0; background: linear-gradient(160deg, #5D49CB, #7A2FB0); transform: rotate(-10deg); }
.nav-studio .deck i:last-child { left: 6px; background: #56C2FF; transform: rotate(8deg); }
.nav-cta .btn-sm { padding: 0 12px 0 10px; }
.nav-cta .is-soon { background: transparent; color: var(--sub); border: 1px dashed var(--line-2); pointer-events: none; }
.nav-cta .tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; padding: 2px 5px; border-radius: 5px; background: var(--s4); color: var(--sub); margin-left: 2px; }
@media (max-width: 1320px) { .nav-links a { padding: 8px 7px; font-size: 13.5px; } }
@media (max-width: 1180px) { .nav-tools { margin-left: auto; } }
@media (max-width: 760px) { .nav-cta { display: none; } .ctas { margin-top: 16px; gap: 8px; } }
.sheet .row .cta-studio { margin-bottom: 4px; }
.sheet .row .btn-store { flex: 1; justify-content: center; }
.store-names .more { color: var(--text); font-weight: 600; padding-left: 10px; }
.store-pass { width: min(340px, 74%); }
.nav-links a, .nav-studio, .nav-cta .btn { white-space: nowrap; }
@media (max-width: 1440px) { .nav-links a[data-sec="share"], .nav-links a[data-sec="features"] { display: none; } }
/* final CTA: buttons centre on the headline, not on icon + headline */
@media (min-width: 901px) {
  .final .box > div:first-child { display: contents; }
  .final .box img.icon { grid-column: 1 / -1; grid-row: 1; }
  .final .box h2.d2 { grid-column: 1 / span 7; grid-row: 2; margin-top: 0; align-self: center; }
  .final .box > div:last-child { grid-row: 2; align-self: center; }
}
.ctas .cta-row > *, .final .store-row > * { min-width: 0; }
@media (max-width: 480px) {
  .ctas .btn-store, .final .store-row .btn-store { padding-inline: 10px; gap: 8px; }
  .ctas .btn-store.is-soon, .final .store-row .btn-store.is-soon { position: relative; overflow: visible; }
  .ctas .btn-store .tag, .final .store-row .btn-store .tag { position: absolute; top: -9px; right: 8px; margin: 0; padding: 2px 6px; font-size: 9px; background: var(--s4); box-shadow: 0 0 0 3px var(--bg); }
  .final .store-row .btn-store .tag { box-shadow: 0 0 0 3px var(--panel); }
  .ctas .btn-store small, .final .store-row .btn-store small { font-size: 10px; }
}

/* Pass Store + Pass Studio: the site's two browser tools, one dark capsule in
   the top bar with the Studio's running light round both. The store's mark is
   a small grid of designs; the Studio's is a deck being made. */
.nav-duo { display: inline-flex; align-items: center; height: 38px; padding: 0 3px; border-radius: 10px; background: #0B0D12; position: relative; isolation: isolate; box-shadow: -14px 8px 22px -14px rgba(242,163,58,.55), 14px 8px 22px -14px rgba(86,194,255,.6); }
/* the edge runs from the store's orange to the studio's green and blue */
.nav-duo::before, .nav-duo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.nav-duo::before { background: linear-gradient(90deg, rgba(242,163,58,.85), rgba(143,211,172,.75) 55%, rgba(86,194,255,.9)); }
.nav-duo::after { background: conic-gradient(from var(--a, 0deg), rgba(255,255,255,0) 0deg, rgba(255,255,255,.55) 40deg, rgba(255,255,255,0) 90deg, rgba(255,255,255,0) 360deg); animation: cta-spin 6s linear infinite; }
.nav-duo a { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 7px; border-radius: 7px; color: #F3F5F9; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: background .2s; }
.nav-duo a:hover { background: rgba(255,255,255,.08); }
.nav-duo a:focus-visible { outline: 2px solid #56C2FF; outline-offset: -2px; }
.nav-duo .div { width: 1px; height: 18px; background: rgba(255,255,255,.14); }
.nav-duo .deck { position: relative; width: 20px; height: 18px; }
.nav-duo .deck i { position: absolute; top: 1px; width: 13px; height: 16px; border-radius: 3px; transition: transform .45s var(--spring); }
.nav-duo .deck i:first-child { left: 0; background: linear-gradient(160deg, #5D49CB, #7A2FB0); transform: rotate(-10deg); }
.nav-duo .deck i:last-child { left: 6px; background: #56C2FF; transform: rotate(8deg); }
.nav-duo a:hover .deck i:first-child { transform: rotate(-18deg) translateX(-2px); }
.nav-duo a:hover .deck i:last-child { transform: rotate(14deg) translateX(2px); }
.tiles { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; transform: rotate(-8deg); transition: gap .45s var(--spring), transform .45s var(--spring); }
.tiles i { width: 7px; height: 7px; border-radius: 2px; }
.tiles i:nth-child(1) { background: #E2587A; } .tiles i:nth-child(2) { background: #F2A33A; }
.tiles i:nth-child(3) { background: #56C2FF; } .tiles i:nth-child(4) { background: #3FA37E; }
.nav-duo a:hover .tiles { gap: 3px; transform: rotate(0deg); }
/* the store's card in the phone menu: the Studio card's look, tiles for a deck */
.cta-store { --c: #F2A33A; box-shadow: 0 20px 50px -24px rgba(242,163,58,.4), 0 1px 0 rgba(255,255,255,.06) inset; }
.cta-store::before { background: conic-gradient(from var(--a, 0deg), rgba(242,163,58,0) 0deg, rgba(242,163,58,.9) 60deg, rgba(143,211,172,.8) 110deg, rgba(242,163,58,0) 170deg, rgba(255,255,255,.08) 171deg 360deg); }
.cta-store:hover { box-shadow: 0 28px 60px -24px rgba(242,163,58,.55), 0 1px 0 rgba(255,255,255,.08) inset; }
/* the hero's two browser tools: ONE band split in two, under the app buttons.
   Two separate cards beside two buttons read as a grid of four equal boxes;
   one band says "the app" on the first row and "or right here, in your
   browser" on the second. Its edge blends from the Studio's blue (left) to the
   store's orange (right), the header capsule's colours in the same order as
   its halves, and each half ends in an arrow that nudges forward on hover. */
.cta-duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 2px; border-radius: 16px; background: #0B0D12; color: #F3F5F9; position: relative; isolation: isolate; box-shadow: -18px 16px 36px -24px rgba(86,194,255,.55), 18px 16px 36px -24px rgba(242,163,58,.5); }
.cta-duo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(86,194,255,.85), rgba(143,211,172,.7) 50%, rgba(242,163,58,.85)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.cta-duo a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px 12px 10px; border-radius: 15px; transition: background .25s; }
.cta-duo a:hover { background: rgba(255,255,255,.05); }
.cta-duo a:focus-visible { outline: 2px solid #56C2FF; outline-offset: -3px; }
.cta-duo .div { width: 1px; height: 34px; background: rgba(255,255,255,.12); }
.cta-duo .t { min-width: 0; }
.cta-duo .k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #56C2FF; margin-bottom: 3px; }
.cta-duo a + .div + a .k { color: #F2A33A; }
.cta-duo strong { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-duo .arr { width: 16px; height: 16px; opacity: .55; transition: transform .45s var(--spring), opacity .25s; }
.cta-duo a:hover .arr { opacity: 1; transform: translateX(3px); }
.cta-duo .deck { position: relative; width: 36px; height: 34px; }
.cta-duo .deck i { position: absolute; left: 7px; top: 3px; width: 21px; height: 27px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.4); transition: transform .5s var(--spring); }
.cta-duo .deck i:nth-child(1) { background: linear-gradient(160deg, #5D49CB, #7A2FB0); transform: rotate(-12deg) translateX(-4px); }
.cta-duo .deck i:nth-child(2) { background: linear-gradient(160deg, #0F6B73, #3B2A8C); transform: rotate(-2deg); }
.cta-duo .deck i:nth-child(3) { background: #56C2FF; transform: rotate(9deg) translateX(4px); }
.cta-duo a:hover .deck i:nth-child(1) { transform: rotate(-18deg) translateX(-7px); }
.cta-duo a:hover .deck i:nth-child(3) { transform: rotate(14deg) translateX(7px); }
.cta-duo .tiles { grid-template-columns: repeat(2, 14px); gap: 4px; margin: 0 4px; }
.cta-duo .tiles i { width: 14px; height: 14px; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.cta-duo a:hover .tiles { gap: 5px; transform: rotate(0deg); }
@media (max-width: 420px) {
  .cta-duo { grid-template-columns: 1fr; }
  .cta-duo .div { width: auto; height: 1px; margin: 0 12px; }
}
/* the Pass Store section ends on its button at the right: the eye leaves the
   fan of designs on that side, and the section's lead sits there too */
#store .hb-row { justify-content: flex-end; }
/* the hero copy sits a little above the middle: centred on the whole screen it
   left a tall empty band under the top bar on a large display */
.hero { padding-bottom: clamp(64px, 14vh, 170px); }
@media (max-width: 760px) { .hero { padding-bottom: 0; } }
.cta-store .tiles { grid-template-columns: repeat(2, 22px); gap: 5px; margin: 0 6px; transform: rotate(-8deg); }
.cta-store .tiles i { width: 22px; height: 22px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.cta-store:hover .tiles { gap: 7px; transform: rotate(0deg); }
@media (max-width: 1320px) { .nav-links { display: none; } .nav-tools { margin-left: auto; } }

/* ---------- still: reduced motion, from the system or the top-bar switch ----------
   Nothing moves and nothing swaps: the scroll scenes are laid out once, in their
   finished state, as ordinary sections; the four story beats sit under the hero
   as one row. Scrolling is the browser's own, untouched. */
.still .story { height: auto; }
.still .story-stage { position: relative; height: auto; overflow: visible; }
.still .story-canvas, .still .story-fallback { height: 100vh; height: 100svh; bottom: auto; }
.still .hero { position: relative; inset: auto; height: 100vh; height: 100svh; min-height: 640px; opacity: 1 !important; transform: none !important; visibility: visible !important; }
.still .beats { position: relative; inset: auto; pointer-events: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gut) clamp(40px, 6vw, 72px); box-sizing: border-box; }
.still .beats::before { content: "How it works"; grid-column: 1 / -1; margin: 0 0 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.still .beat { position: static; transform: none; translate: none !important; opacity: 1 !important; visibility: visible !important; border-top: 1px solid var(--line); padding: 22px 22px 0 0; }
.still .beat + .beat { border-left: 1px solid var(--line); padding-left: 22px; }
.still .beat .wrap { display: block; width: auto; padding: 0; margin: 0; }
.still .beat .d3 { font-size: clamp(22px, 2vw, 28px); }
.beat-shot { display: none; }
.still .beat-shot { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 18px; border-radius: 14px; background: var(--bg); }
.still .beat p { font-size: 15.5px; }
.still .rail { display: none; }
.still .pin { height: auto; }
.still .pin-in { position: relative; height: auto; min-height: 100vh; min-height: 100svh; padding: 104px 0 72px; }
@media (max-width: 900px) {
  .still .beats { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .still .beat:nth-child(odd of .beat) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .still .hero { min-height: 0; }
  .still .beats { grid-template-columns: 1fr; }
  .still .beat, .still .beat + .beat { border-left: 0; padding: 18px 0 0; }
  .still .beat-inner { padding: 0; margin: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .still .pin-in { padding: 88px 0 48px; }
}
/* still: the scenes' steps are a plain numbered list, none of them "current" */
.still .steps-list div, .still .steps-list div.on { color: var(--text); }
.still .steps-list .mono, .still .steps-list div.on .mono { color: var(--mint-ink); }