/* Layout of the website. Colors, fonts, spacing and radii come from tokens.css; values marked --site-* exist only on the web. */
:root {
  --site-content: 1200px;
  /* The app's spacing scale stops at 40 pt; the web needs two larger steps, built from it. */
  --site-space-10: calc(var(--space-9) + var(--space-3));
  --site-space-11: calc(var(--space-8) * 2);
  --site-scanner-fg-soft: color-mix(in srgb, var(--color-scanner-fg) 70%, transparent);
  --site-text-width: 640px;
  --site-feature-text: 480px;
  --site-form-width: 640px;
  --site-header-height: 60px;
  --site-header-top: var(--space-4);
  --site-toast-width: 400px;
  --site-header-inset: 8px;
  --site-block-radius: 32px;
  --site-block-pad: 64px;
  --site-lh-tight: 1.1;
  --site-lh-title: 1.2;
  --site-lh-text: 1.5;
  --site-tile-height: 280px;
  --site-tile-icon: 220px;
  --site-phone-width: 280px;
  --site-phone-duo: 250px;
  --site-bezel: 8px;
  --site-phone-radius: 48px;
  --site-stage-height: 520px;
  --site-feature-height: 560px;
  --site-feature-max: 720px;
    --site-perk-phone: 320px;
  --site-switch-width: 51px;
  --site-fan-card: 300px;
  --site-switch-height: 31px;
  --site-perk-phone-width: 240px;
  --site-trio-beam: 240px;
  --site-path-stop: 64px;
  --site-benefit-icon: 88px;
  --site-feature-icon: 152px;
  --site-reveal-time: 600ms;
  --site-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --site-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --site-reveal-shift: 40px;
  --site-title-width: 780px;
  --site-comet-travel: 1400px;
  --site-typed-left: 5.4%;
  --site-typed-right: 6%;
  --site-typed-height: 5.2%;
  --site-typed-first: 34%;
  --site-typed-last: 44%;
  --site-typed-phone: 54%;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--color-bg-secondary); color: var(--color-text-primary); font-family: var(--font-family); font-size: var(--type-body-size); line-height: var(--site-lh-text); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h3 { line-height: var(--site-lh-title); }
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.muted { color: var(--color-text-secondary); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; left: var(--space-5); top: calc(var(--site-space-11) * -2); background: var(--color-bg-inverse); color: var(--color-text-inverse); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); z-index: 3; }
.skip-link:focus { top: var(--space-3); }

/* Text and blocks rise into place; titles word by word. Without JS (no .js on html) everything is simply visible. */
.js [data-reveal] { opacity: 0; transform: translateY(var(--site-reveal-shift)); transition: opacity var(--site-reveal-time) var(--site-ease), transform var(--site-reveal-time) var(--site-ease); transition-delay: var(--reveal-delay, 0ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal].has-lines, .js .hero__title.has-words[data-reveal] { opacity: 1; transform: none; }
.word { display: inline-block; }
.has-words .word { opacity: 0; transform: translateY(0.5em); transition: opacity var(--site-reveal-time) var(--site-ease), transform var(--site-reveal-time) var(--site-ease); transition-delay: calc(var(--word) * 40ms + var(--reveal-delay, 0ms)); }
.is-visible .word, .is-visible.has-words .word { opacity: 1; transform: none; }

/* Buttons: capsules without shadows, as DSButton. */
.button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-full); font-family: inherit; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast); }
.button--lg { min-height: var(--size-button-lg); padding: var(--space-3) var(--space-7); }
.button--primary { background: var(--color-button-primary-bg); color: var(--color-button-primary-fg); }
.button--primary:hover { background: var(--color-button-primary-bg-pressed); }
.button--secondary { background: var(--color-button-secondary-bg); color: var(--color-button-secondary-fg); }
.button--secondary:hover { background: var(--color-button-secondary-bg-pressed); }
.button:disabled { opacity: 0.4; cursor: default; }

/* Header: a floating glass pill, like the app's tab bar. */
.site-header { position: sticky; top: var(--site-header-top); z-index: 2; height: var(--site-header-height); margin-bottom: calc(var(--site-header-height) * -1); padding: 0 var(--space-5); }
.site-header__inner { max-width: var(--site-content); height: 100%; margin: 0 auto; padding: 0 var(--site-header-inset); display: flex; align-items: center; justify-content: space-between; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-bg-elevated) 16%, transparent); -webkit-backdrop-filter: blur(var(--space-4)) saturate(1.8); backdrop-filter: blur(var(--space-4)) saturate(1.8); box-shadow: var(--shadow-high), inset 0 0 0 1px color-mix(in srgb, var(--color-bg-elevated) 45%, transparent); }
.logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: var(--type-display-weight); font-size: var(--type-headline-size); }
.logo img { border-radius: var(--radius-sm); }
.site-header .logo { padding-left: var(--space-1); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.button--md { min-height: var(--size-button-md); padding: 0 var(--space-5); }
.site-header__cta { display: none; }

.site-header .logo, .site-header summary { transition: color var(--duration-base); }
.is-on-dark .logo, .is-on-dark .lang-menu summary { color: var(--color-text-inverse); }
.is-on-dark .lang-menu summary { background: color-mix(in srgb, var(--color-text-inverse) 18%, transparent); }
.is-on-dark .site-header__cta { background: var(--color-bg-elevated); color: var(--color-text-primary); }

/* Language: flag, name and chevron on the native translucent fill. */
.lang-menu { position: relative; }
.lang-menu summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-button-md); padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-icon-default) 14%, transparent); color: var(--color-text-primary); cursor: pointer; list-style: none; transition: background-color var(--duration-fast); }
.lang-menu summary:hover { background: color-mix(in srgb, var(--color-icon-default) 22%, transparent); }
.lang-menu summary::-webkit-details-marker { display: none; }
.flag { width: var(--space-6); height: var(--space-6); flex: none; }
.chevron { width: var(--space-3); height: var(--space-3); fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--duration-fast); }
.lang-menu[open] .chevron { transform: rotate(180deg); }
.lang-menu__list { position: absolute; right: 0; top: calc(100% + var(--space-3)); width: max-content; min-width: calc(var(--site-space-11) * 3); padding: var(--space-2); background: var(--color-bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-high); }
.lang-menu__list a, .lang-menu__list button { width: 100%; white-space: nowrap; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-tap-target); padding: 0 var(--space-3); border-radius: var(--radius-md); text-decoration: none; }
.lang-menu__list a:hover, .lang-menu__list button:hover { background: var(--color-bg-secondary); }
.lang-menu__list .check { display: none; margin-left: auto; width: var(--space-5); height: var(--space-5); fill: none; stroke: currentColor; stroke-width: 2; }
.lang-menu__list a[aria-current] .check, .lang-menu__list button[aria-current] .check { display: block; }

/* Blocks: rounded cards with a small gap on the common gray page, as in the app. */
.blocks { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
/* Each block fills the screen and stays put while the next one slides over it, like a stack of cards. */
.blocks > .block { box-shadow: 0 0 0 var(--space-3) var(--color-bg-secondary); position: sticky; top: var(--space-3); min-height: calc(100svh - var(--space-3) * 2); display: flex; flex-direction: column; justify-content: center; }
.blocks > .block > .block__inner, .blocks > .block > .hero__inner { width: 100%; }
.block { position: relative; overflow: hidden; padding: var(--site-block-pad) var(--space-5); border-radius: var(--site-block-radius); background: var(--color-bg-elevated); }
.block--dark { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.block--dark .t-subheadline, .block--dark .t-callout, .block--dark .block__lead { color: var(--site-scanner-fg-soft); }
.block__inner { position: relative; max-width: var(--site-content); margin: 0 auto; }
.block__title { font-size: clamp(var(--type-title1-size), 4.4vw, calc(var(--type-balance-size) + var(--space-3))); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); line-height: var(--site-lh-title); }
.block__title--center, .block__lead--center { text-align: center; }
.title-line { display: block; }
.block__lead { margin-top: var(--space-4); color: var(--color-text-secondary); }
.block__lead--center { max-width: var(--site-text-width); margin-left: auto; margin-right: auto; }
.mock-note { color: var(--color-text-secondary); margin-top: var(--space-3); }

/* Hero: centered text and form, phones cut by the block's edge, icons scattered over the whole block. */
.hero { padding-top: calc(var(--site-header-height) + var(--space-9)); padding-bottom: 0; }
.hero__inner { position: relative; max-width: var(--site-content); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tabs { display: inline-flex; padding: var(--space-2); border-radius: var(--radius-full); background: var(--color-button-secondary-bg); }
.tabs a, .tabs button { display: flex; border: 0; background: none; font: inherit; cursor: pointer; align-items: center; min-height: var(--size-button-md); padding: 0 var(--space-6); border-radius: var(--radius-full); text-decoration: none; color: var(--color-text-secondary); transition: background-color var(--duration-base), color var(--duration-base); }
.tabs a:hover, .tabs button:hover { color: var(--color-text-primary); }
.tabs a[aria-current], .tabs button[aria-pressed="true"] { background: var(--color-bg-elevated); color: var(--color-text-primary); }
.hero__title { margin-top: var(--space-8); max-width: var(--site-title-width); font-size: clamp(calc(var(--type-display-size) + var(--space-1)), 6.4vw, var(--type-hero-size)); font-weight: var(--type-display-weight); letter-spacing: var(--type-hero-tracking); line-height: var(--site-lh-title); }
.title-icon { display: inline-block; max-width: none; width: 1.5em; height: 1.5em; margin: -0.4em -0.3em -0.4em; vertical-align: baseline; }
.hero__lead { margin-top: var(--space-5); max-width: var(--site-text-width); color: var(--color-text-secondary); font-weight: var(--type-body-weight); line-height: var(--site-lh-text); }
.hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-7); margin-top: var(--space-6); color: var(--color-text-primary); }
.hero__chips li { display: flex; align-items: center; gap: var(--space-4); }
.hero__check { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full); background: var(--color-status-success-bg); }
.hero__check svg { width: 70%; height: 70%; fill: none; stroke: var(--color-text-success); stroke-width: 2; }
.hero__form { width: 100%; max-width: var(--site-form-width); margin-top: var(--space-8); text-align: left; }
.hero__stage { position: relative; width: 100%; height: var(--site-stage-height); margin-top: var(--space-7); display: flex; justify-content: center; }
.floats { position: absolute; inset: 0; display: none; pointer-events: none; }
.float { position: absolute; left: var(--x); top: var(--y); width: var(--s); max-width: none; transform: translate(-50%, -50%) rotate(var(--r)); animation: float var(--period) ease-in-out infinite alternate; }
@keyframes float { to { transform: translate(-50%, calc(-50% - var(--space-5))) rotate(calc(var(--r) + 5deg)); } }

/* 3D composition used as a big illustration: layers as in DSIllustration, drifting slowly. */
.art { position: relative; width: 100%; aspect-ratio: 1; }
.art img { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--s) * 100%); max-width: none; transform: translate(-50%, -50%); animation: drift var(--period) ease-in-out var(--phase) infinite alternate; }
@keyframes drift { to { transform: translate(-50%, calc(-50% - var(--space-3))) rotate(2deg); } }

/* iPhone: titanium edge, Dynamic Island and side buttons around a real screenshot from the app. */
.iphone { position: relative; flex: none; width: var(--site-phone-width); padding: var(--site-bezel); border-radius: var(--site-phone-radius); background: var(--color-bg-inverse); box-shadow: var(--shadow-high), inset 0 0 0 2px var(--color-icon-tile-black-top); }
.iphone::before, .iphone::after { content: ""; position: absolute; width: 2px; border-radius: var(--radius-xs); background: var(--color-icon-tile-black-top); }
.iphone::before { left: -2px; top: 22%; height: 16%; }
.iphone::after { right: -2px; top: 28%; height: 11%; }
.iphone__screen { position: relative; aspect-ratio: 1206 / 2622; overflow: hidden; border-radius: calc(var(--site-phone-radius) - var(--site-bezel)); background: var(--color-bg-secondary); }
.iphone__screen picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.iphone__island { position: absolute; top: 1.6%; left: 50%; width: 31%; height: 3.4%; margin-left: -15.5%; border-radius: var(--radius-full); background: var(--color-scanner-background); }
.iphone--back, .iphone--front { position: absolute; top: 0; }
.iphone--front { left: 50%; margin-left: calc(var(--site-phone-width) / -2); }
.iphone--back { display: none; }

/* Two real screens taking turns inside one phone. */
.iphone__screen--swap picture:nth-of-type(2) img { animation: screen-swap 10s ease-in-out infinite; }
.iphone__screen--swap-late picture:nth-of-type(2) img { animation-delay: -5s; }
@keyframes screen-swap {
  0%, 40% { opacity: 0; transform: translateY(var(--space-5)); }
  50%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(var(--space-5)); }
}

/* Feature rows: text on one side, a phone fading into the block on the other. */
.feature { display: grid; gap: var(--space-8); align-items: center; }
.feature__text { max-width: var(--site-text-width); }
.feature__text > p { margin-top: var(--space-5); }
/* Two features in one block: rows alternate sides; phones a size smaller so both fit. */
.feature-pair { display: grid; gap: var(--site-space-11); }
.feature-pair .feature__visual:not(.feature__visual--whole) { height: calc(var(--site-feature-height) * 0.85); }
.feature-pair .feature__visual--whole { --site-phone-width: clamp(200px, calc((100svh - 160px) / 3), 250px); }
.feature__icon--center { margin-left: auto; margin-right: auto; }
/* A still 3D icon above a feature's title: it marks the topic, only big illustrations move. */
.feature__icon { width: var(--site-feature-icon); height: var(--site-feature-icon); margin: calc(var(--site-feature-icon) * -0.15) 0 calc(var(--site-feature-icon) * -0.05) calc(var(--site-feature-icon) * -0.16); }
.feature-icon { width: 100%; height: 100%; object-fit: contain; }
.feature__visual { position: relative; height: var(--site-feature-height); display: flex; justify-content: center; align-items: flex-start; padding: var(--space-5) var(--space-8) 0; overflow: hidden; -webkit-mask-image: linear-gradient(black 72%, transparent); mask-image: linear-gradient(black 72%, transparent); }
.feature__visual--whole { --site-phone-width: clamp(220px, calc((100svh - 220px) / 2.2), 290px); height: auto; padding: 0; -webkit-mask-image: none; mask-image: none; }

/* App Clip: the system drawer rises over the home screen; the phone is shown whole. */
.clip-scene { position: absolute; inset: 0; }
.clip-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-card { background: var(--color-bg-elevated); color: var(--color-text-primary); overflow: hidden; line-height: var(--site-lh-title); }
.clip-scene .clip-card { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); border-radius: calc(var(--site-phone-radius) - var(--site-bezel) - var(--space-4)); box-shadow: var(--shadow-high); animation: clip-rise 9s var(--site-ease) infinite; }
.clip-card__hero { display: grid; place-items: center; height: calc(var(--site-space-11) * 1.8); background: linear-gradient(145deg, var(--color-surface-brand-a), var(--color-surface-brand-d)); }
.clip-card__hero img { width: var(--site-space-11); height: var(--site-space-11); border-radius: var(--radius-lg); }
.clip-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.clip-card__open { flex: none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--color-icon-tile-blue-bottom); color: var(--color-icon-tile-fg); }
.clip-scene .clip-card__open { animation: clip-tap 9s ease-in-out infinite; }
.clip-card__foot { padding: 0 var(--space-4) var(--space-3); text-align: center; }
@keyframes clip-rise { 0%, 8% { transform: translateY(110%); } 20%, 86% { transform: none; } 96%, 100% { transform: translateY(110%); } }
@keyframes clip-tap { 0%, 34% { transform: none; } 37% { transform: scale(0.9); } 40%, 100% { transform: none; } }

/* Apple Wallet: the button is pressed, the card flies off quickly, the app's dark toast confirms. */
.press-dim { position: absolute; left: 5%; right: 5%; top: 63.3%; height: 6%; border-radius: var(--radius-full); background: var(--color-overlay-rim-bottom); opacity: 0; animation: press 7s linear infinite; }
@keyframes press { 0%, 20% { opacity: 0; } 22%, 25% { opacity: 1; } 27%, 100% { opacity: 0; } }
.fly-cover { position: absolute; left: 2%; right: 2%; top: 14%; bottom: 36%; border-radius: var(--radius-lg); background: var(--color-bg-secondary); opacity: 0; animation: fly-cover 7s linear infinite; }
@keyframes fly-cover { 0%, 25% { opacity: 0; } 26%, 40% { opacity: 1; } 48%, 100% { opacity: 0; } }
.iphone__screen picture img.screen-fly { clip-path: inset(15% 3% 37% 3% round var(--radius-lg)); opacity: 0; animation: card-fly 7s ease-in infinite; transform-origin: 50% 40%; }
@keyframes card-fly { 0%, 25% { opacity: 0; transform: none; } 26% { opacity: 1; transform: none; } 33% { opacity: 1; transform: translateY(-62%) scale(0.5); } 34%, 100% { opacity: 0; transform: translateY(-62%) scale(0.5); } }

/* Toast as in the app (dsToast): dark capsule at the header's level, dropping in on a spring. */
.ds-toast { position: absolute; left: var(--space-3); right: var(--space-3); top: 8%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); background: var(--color-bg-inverse); color: var(--color-text-inverse); box-shadow: var(--shadow-high); line-height: var(--site-lh-title); }
.ds-toast__check { flex: none; width: var(--space-6); height: var(--space-6); display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-status-success); }
.ds-toast__check svg { width: 70%; height: 70%; fill: none; stroke: var(--color-scanner-fg); stroke-width: 2; }
.ds-toast img { flex: none; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-sm); }
.ds-toast--wallet { animation: toast-wallet 7s var(--site-spring) infinite; }
@keyframes toast-wallet { 0%, 30% { transform: translateY(-260%); opacity: 0; } 37%, 82% { transform: none; opacity: 1; } 90%, 100% { transform: translateY(-260%); opacity: 0; } }

/* Typing into the real form: the overlay covers a field's placeholder and the text appears letter by letter. */
.typing { position: absolute; inset: 0; }
.typed { position: absolute; left: var(--site-typed-left); right: var(--site-typed-right); height: var(--site-typed-height); display: flex; align-items: center; padding-left: 2.6%; background: var(--color-bg-secondary); animation: typed-box 10s linear infinite; animation-delay: var(--typed-delay); opacity: 0; }
.t-typed { display: block; white-space: nowrap; color: var(--color-text-primary); font-size: calc(var(--site-phone-width) * 0.042); animation: typed-text 10s steps(14) infinite; animation-delay: var(--typed-delay); }
.typed--first { top: var(--site-typed-first); --typed-delay: 0s; }
.typed--last { top: var(--site-typed-last); --typed-delay: 1.6s; }
.typed--phone { top: var(--site-typed-phone); left: 26%; padding-left: 1%; --typed-delay: 3.2s; }
@keyframes typed-box { 0%, 1% { opacity: 0; } 2%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes typed-text { 0%, 2% { clip-path: inset(0 100% 0 0); } 14%, 100% { clip-path: inset(0 -1px 0 0); } }

/* Benefits: a still 3D icon with a title and a line of text. Only big illustrations move. */
.benefits { display: grid; gap: var(--space-7); margin-top: var(--space-8); }
.benefits li { display: flex; align-items: flex-start; gap: var(--space-4); }
.benefit-icon { flex: none; width: var(--site-benefit-icon); height: var(--site-benefit-icon); margin: calc(var(--space-5) * -1) calc(var(--space-2) * -1); }
.benefits p { margin-top: var(--space-1); }

/* Tiles: title with a large 3D icon clipped by the corner, as DSFeatureTile. */
.tiles { display: grid; gap: var(--space-2); margin-top: var(--space-8); }
.tile { position: relative; overflow: hidden; min-height: var(--site-tile-height); padding: var(--space-6); background: var(--color-bg-secondary); border-radius: var(--radius-xl); }
.tile p { margin-top: var(--space-3); }
.tiles--four .tile { --site-tile-icon: calc(var(--site-tile-height) * 0.6); min-height: calc(var(--site-tile-height) * 0.72); padding-bottom: calc(var(--site-tile-icon) * 0.6); }
.tile-icon { position: absolute; right: calc(var(--site-tile-icon) * -0.33); bottom: calc(var(--site-tile-icon) * -0.33); width: var(--site-tile-icon); height: var(--site-tile-icon); }

/* What you get: a dark bento, each tile with its own small motion. */
.perks { display: grid; gap: var(--space-2); margin-top: var(--space-8); }
.perk { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-text-inverse) 8%, transparent); }
.perk p { margin-top: var(--space-2); }
.perk__visual { display: flex; align-items: center; justify-content: center; padding: var(--space-5) 0; }
.perk__phone { position: relative; height: var(--site-perk-phone); margin: 0 calc(var(--space-6) * -1) calc(var(--space-6) * -1); overflow: hidden; display: flex; justify-content: center; align-items: flex-start; -webkit-mask-image: linear-gradient(black 78%, transparent); mask-image: linear-gradient(black 78%, transparent); }
.perk__phone .iphone { width: var(--site-perk-phone-width); }
.perk__phone--side { flex: none; width: calc(var(--site-perk-phone-width) + var(--space-8) * 2); height: calc(var(--site-perk-phone) * 0.86); margin: calc(var(--space-6) * -1) 0 calc(var(--space-6) * -1) calc(var(--space-6) * -1); padding-top: var(--space-6); }
.perk__wide-text { flex: 1; min-width: 0; }
/* The client card from the app's customer profile; its balance ticks up after a purchase. Shares the fan cards' face. */
.pass, .fan__card { border: 1px solid var(--color-surface-metal-rim); border-radius: var(--radius-xl); color: var(--color-surface-metal-fg); background: linear-gradient(135deg, var(--color-surface-metal-a), var(--color-surface-metal-b) 45%, var(--color-surface-metal-c) 70%, var(--color-surface-metal-d)); box-shadow: var(--shadow-high); }
.pass { display: flex; flex-direction: column; justify-content: space-between; width: 100%; max-width: calc(var(--site-perk-phone-width) * 1.4); aspect-ratio: 1.586; padding: var(--space-5); text-align: left; }
.pass__row { display: flex; align-items: center; gap: var(--space-2); }
.perk .pass .fan__soft { color: var(--color-surface-metal-fg-secondary); }
.pass__value { display: grid; }
.pass__value b { grid-area: 1 / 1; font-weight: inherit; animation: pass-old 5s ease-in-out infinite; }
.pass__value b + b { animation-name: pass-new; }
.pass__plus { padding: 0 var(--space-3); font-weight: var(--type-subheadline-strong-weight); border-radius: var(--radius-full); color: var(--color-scanner-fg); background: var(--color-status-success); animation: pass-plus 5s ease-in-out infinite; }
@keyframes pass-old { 0%, 40% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-40%); } }
@keyframes pass-new { 0%, 40% { opacity: 0; transform: translateY(40%); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pass-plus { 0%, 36% { opacity: 0; transform: scale(0.6); } 46%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.perk__visual > .path, .perk__visual > .ribbon { width: 100%; margin: 0; }
.lock__note--near { animation: note-one 8s var(--site-spring) infinite; }
.perk .lock__time { top: 9%; }
.perk .lock__stack { top: 24%; }
.ribbon { position: relative; display: flex; justify-content: space-between; align-items: center; height: var(--site-benefit-icon); margin-top: var(--space-5); }
.ribbon::before, .ribbon__fill { content: ""; position: absolute; left: 0; top: 50%; height: var(--space-3); margin-top: calc(var(--space-3) / -2); border-radius: var(--radius-full); }
.ribbon::before { right: 0; background: color-mix(in srgb, var(--color-text-inverse) 16%, transparent); }
.ribbon__fill { width: 100%; background: var(--color-scanner-frame); transform-origin: left; animation: ribbon 7s linear infinite; }
@keyframes ribbon { 0% { transform: scaleX(0.05); opacity: 1; } 70%, 92% { transform: scaleX(1); opacity: 1; } 98% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0.05); opacity: 0; } }
.ribbon__node { position: relative; display: block; width: var(--site-benefit-icon); }
.ribbon__node .benefit-icon { margin: 0; animation: node-1 7s linear infinite; }
.ribbon__node:nth-of-type(2) .benefit-icon { animation-name: node-2; }
.ribbon__node:nth-of-type(3) .benefit-icon { animation-name: node-3; }
@keyframes node-1 { 0%, 4% { transform: scale(0.75); filter: saturate(0.3); } 8%, 94% { transform: scale(1); filter: none; } 100% { transform: scale(0.75); filter: saturate(0.3); } }
@keyframes node-2 { 0%, 34% { transform: scale(0.75); filter: saturate(0.3); } 38%, 94% { transform: scale(1); filter: none; } 100% { transform: scale(0.75); filter: saturate(0.3); } }
@keyframes node-3 { 0%, 63% { transform: scale(0.75); filter: saturate(0.3); } 67%, 94% { transform: scale(1); filter: none; } 100% { transform: scale(0.75); filter: saturate(0.3); } }

/* Scanner: the customer's phone and the cashier's phone facing each other. */
.duo { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); margin-top: var(--space-9); }
.duo__side { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.duo__caption { color: var(--site-scanner-fg-soft); text-align: center; }
.iphone--duo { width: var(--site-phone-duo); box-shadow: var(--shadow-high), inset 0 0 0 2px var(--color-icon-tile-black-top); }
.duo__beam { display: flex; gap: var(--space-3); transform: rotate(90deg); }
.duo__beam i { display: block; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-full); background: var(--color-scanner-frame); opacity: 0.2; animation: beam 8s ease-in-out infinite; }
.duo__beam i:nth-child(2) { animation-delay: 0.2s; }
.duo__beam i:nth-child(3) { animation-delay: 0.4s; }
@keyframes beam { 0%, 8%, 40%, 100% { opacity: 0.2; transform: none; } 16%, 26% { opacity: 1; transform: scale(1.5); } }
/* Scanner screen as in the app. Status bar, title and result drawer come from the real screenshot; the viewfinder is
   ScannerOverlay redrawn on top: frame 68% of the width, centred 40 pt above the middle, 5 pt corners in violet that turn
   green on a scan and back to violet once the result drawer is up (as on the screenshot), a sweep line while idle, the hint 44 pt under the frame. Sizes in cqw are the app's points ÷ 402. */
.iphone__screen--scanner { container-type: inline-size; background: var(--color-scanner-background); }
.iphone__screen img.screen-top { clip-path: inset(0 0 86% 0); }
.iphone__screen img.screen-sheet { clip-path: inset(46.5% 0 0 0); animation: sheet-rise 8s var(--site-ease) infinite; }
@keyframes sheet-rise { 0%, 36% { transform: translateY(60%); } 46%, 92% { transform: none; } 100% { transform: translateY(60%); } }
.scan-frame { position: absolute; left: 16%; top: calc(50% - 4.98cqw - 34cqw); width: 68%; aspect-ratio: 1; animation: scan-pop 8s var(--site-spring) infinite; }
.scan-frame i { position: absolute; width: 18%; height: 18%; border: 1.24cqw solid var(--color-scanner-frame); animation: scan-frame-ok 8s linear infinite; }
.scan-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 4.98cqw; }
.scan-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 4.98cqw; }
.scan-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 4.98cqw; }
.scan-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 4.98cqw; }
.scan-frame__sweep { position: absolute; left: 7.3%; width: 85.4%; height: 0.5cqw; background: linear-gradient(90deg, transparent, var(--color-scanner-frame), transparent); animation: scan-sweep 8s ease-in-out infinite; }
.scan-frame__ok { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; border-radius: var(--radius-full); background: var(--color-scanner-success); animation: scan-ok 8s var(--site-spring) infinite; }
.scan-frame__ok svg { width: 60%; height: 60%; fill: none; stroke: var(--color-scanner-fg); stroke-width: 2.4; }
.scan-hint { position: absolute; left: 50%; top: calc(50% - 4.98cqw + 34cqw + 10.95cqw); max-width: 90%; padding: 1.99cqw 3.98cqw; border-radius: var(--radius-full); transform: translate(-50%, -50%); background: var(--color-overlay-scrim); color: var(--color-scanner-fg); font-size: 3.73cqw; font-weight: var(--type-subheadline-medium-weight); text-align: center; white-space: nowrap; }
@keyframes scan-frame-ok { 0%, 28% { border-color: var(--color-scanner-frame); } 30%, 42% { border-color: var(--color-scanner-success); } 46%, 100% { border-color: var(--color-scanner-frame); } }
@keyframes scan-pop { 0%, 28% { transform: none; } 32%, 42% { transform: scale(1.04); } 46%, 100% { transform: none; } }
@keyframes scan-sweep { 0% { top: 7.3%; opacity: 1; } 13% { top: 92.7%; } 26% { top: 7.3%; opacity: 1; } 28%, 100% { top: 7.3%; opacity: 0; } }
@keyframes scan-ok { 0%, 28% { transform: scale(0); opacity: 0; } 33%, 40% { transform: none; opacity: 1; } 44%, 100% { transform: scale(0); opacity: 0; } }
.benefits--row { margin-top: var(--space-9); }

/* Questions and answers: title above, one centered column. The toggle is the app's round gray button. */
.faq-layout { max-width: calc(var(--site-text-width) + var(--site-space-11)); }
.faq { margin-top: var(--space-7); background: var(--color-bg-secondary); border-radius: var(--radius-xl); }
.faq details { position: relative; }
.faq details + details::before { content: ""; position: absolute; left: var(--space-5); right: var(--space-5); top: 0; height: 1px; background: var(--color-border-subtle); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); cursor: pointer; list-style: none; line-height: var(--site-lh-title); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: var(--size-button-sm); height: var(--size-button-sm); border-radius: var(--radius-full); background: linear-gradient(var(--color-button-secondary-fg), var(--color-button-secondary-fg)) center / var(--space-4) 2px no-repeat, linear-gradient(var(--color-button-secondary-fg), var(--color-button-secondary-fg)) center / 2px var(--space-4) no-repeat, var(--color-button-secondary-bg-pressed); transition: transform var(--duration-base) var(--site-ease); }
.faq details.is-open summary::after { transform: rotate(45deg); }
.faq__panel { overflow: hidden; }
.faq details p { padding: 0 var(--space-5) var(--space-6); }

/* Final block, as BrandAuroraBackground on the app's business card: slow mesh of brand colors and a sheen, plus falling stars. */
.block--brand { background: var(--color-surface-brand-a); color: var(--color-surface-brand-fg); }
.aurora { position: absolute; inset: 0; pointer-events: none; }
.aurora__mesh { position: absolute; inset: -30%; background: radial-gradient(40% 50% at 25% 60%, var(--color-surface-brand-c), transparent 70%), radial-gradient(45% 55% at 55% 45%, var(--color-surface-brand-d), transparent 70%), radial-gradient(40% 50% at 85% 30%, var(--color-surface-brand-b), transparent 70%), radial-gradient(40% 45% at 50% 95%, var(--color-surface-brand-c), transparent 70%), var(--color-surface-brand-a); animation: aurora-drift 18s ease-in-out infinite alternate; }
@keyframes aurora-drift { 0% { transform: translate(-6%, -4%) rotate(-4deg); } 100% { transform: translate(6%, 5%) rotate(5deg); } }
.aurora__sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--color-surface-brand-fg) 14%, transparent) 50%, transparent 65%); background-size: 280% 100%; animation: aurora-sheen 5s linear infinite; }
@keyframes aurora-sheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.comet { position: absolute; left: var(--x); top: calc(var(--l) * -1); width: 2px; height: var(--l); border-radius: var(--radius-full); background: linear-gradient(transparent, color-mix(in srgb, var(--color-surface-brand-fg) 70%, transparent)); animation: comet var(--d) linear var(--t) infinite; }
.comet::after { content: ""; position: absolute; left: -1px; bottom: -1px; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-brand-fg); box-shadow: 0 0 var(--space-3) var(--color-surface-brand-line); }
@keyframes comet { from { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(var(--site-comet-travel)); opacity: 0; } }
.final { display: flex; flex-direction: column; align-items: center; text-align: center; }
.final__art { width: calc(var(--site-phone-width) * 0.8); margin-top: calc(var(--space-8) * -1); }
.final__lead { color: var(--color-surface-brand-fg-secondary); margin-top: var(--space-3); max-width: var(--site-text-width); }
.final__card { width: 100%; max-width: var(--site-form-width); margin-top: var(--space-7); padding: var(--space-5); text-align: left; color: var(--color-text-primary); background: var(--color-bg-elevated); border-radius: var(--radius-xl); }

/* Waitlist form: email and button in one row from tablets up, consent under them. */
.join-form { display: flex; flex-direction: column; gap: var(--space-3); }
.join-form__row { display: flex; flex-direction: column; gap: var(--space-3); }
.join-form__row .field { flex: 1; min-width: 0; }
.join-form__row .button { flex: none; }
.field { display: flex; flex-direction: column; }
.field input { width: 100%; min-height: var(--size-button-lg); padding: 0 var(--space-5); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-bg-secondary); color: var(--color-text-primary); font-family: inherit; }
.field input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.field input:focus { outline: none; border-color: var(--color-border-focus); }
.field input[aria-invalid] { border-color: var(--color-border-danger); }
.field__error { color: var(--color-text-danger); }
.field__error:empty { display: none; }
.consent { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; color: var(--color-text-secondary); }
.consent input { flex: none; width: var(--space-5); height: var(--space-5); margin: 0; accent-color: var(--color-button-primary-bg); }
.consent a { text-underline-offset: 2px; color: var(--color-text-primary); }
.trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

/* Legal templates */
.legal { max-width: var(--site-text-width); margin: 0 auto; padding: calc(var(--site-header-height) + var(--space-9)) var(--space-3) var(--space-9); }
.legal__body { background: var(--color-bg-elevated); border-radius: var(--site-block-radius); padding: var(--space-7) var(--space-5); }
.legal h1 { font-size: var(--type-display-size); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); line-height: var(--site-lh-title); }
.legal h2 { margin-top: var(--space-8); font-size: var(--type-title3-size); font-weight: var(--type-title3-weight); letter-spacing: var(--type-title3-tracking); line-height: var(--site-lh-title); }
.legal p, .legal ul { margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--type-callout-size); }
.legal .legal__meta { margin-top: var(--space-2); color: var(--color-text-tertiary); font-size: var(--type-subheadline-size); }
.legal b { color: var(--color-text-primary); font-weight: var(--type-headline-weight); }
.legal ul { list-style: disc; padding-left: var(--space-6); }
.legal li + li { margin-top: var(--space-2); }
.legal mark { background: var(--color-status-warning-bg); color: var(--color-text-warning); border-radius: var(--radius-xs); padding: 0 var(--space-1); }

/* Footer on the page's gray: logo, three links in the middle, rights at the end. */
.site-footer { color: var(--color-text-secondary); padding: var(--space-8) var(--space-5); }
.site-footer__inner { max-width: var(--site-content); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.logo--footer { color: var(--color-text-primary); }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); }
.site-footer a { text-decoration: none; }
.site-footer__links a:hover { color: var(--color-text-primary); }
.site-footer__mail { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__mail::before { content: ""; width: var(--space-5); height: var(--space-5); background: currentColor; -webkit-mask: url("/assets/symbols/mail.png") center / contain no-repeat; mask: url("/assets/symbols/mail.png") center / contain no-repeat; }

/* Nothing to install: QR, App Clip and Wallet on one line, a light running along it. */
.path { display: flex; align-items: center; margin-top: var(--space-3); }
.path__stop { flex: none; width: var(--site-path-stop); height: var(--site-path-stop); padding: var(--space-2); border-radius: var(--radius-lg); background: var(--color-bg-elevated); box-shadow: var(--shadow-high); }
.path__stop img { width: 100%; height: 100%; border-radius: var(--radius-sm); }
.path__line { position: relative; flex: 1; height: 2px; overflow: hidden; background: color-mix(in srgb, var(--color-text-inverse) 16%, transparent); }
.path__line i { position: absolute; top: 0; bottom: 0; width: 40%; background: var(--color-scanner-frame); animation: path-run 3s linear infinite; }
.path__line:nth-of-type(n+3) i { animation-delay: 1.5s; }
@keyframes path-run { from { left: -40%; } to { left: 100%; } }



/* Three steps: three phones play in turn, one after another. */
.trio { --site-phone-width: 230px; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); margin-top: var(--space-9); }
.trio__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.trio__step .iphone { margin-bottom: var(--space-4); animation: trio-focus 12s ease-in-out infinite; }
.trio__step--2 .iphone { animation-delay: -8s; }
.trio__step--3 .iphone { animation-delay: -4s; }
@keyframes trio-focus { 0%, 30% { transform: translateY(calc(var(--space-2) * -1)) scale(1.03); opacity: 1; } 38%, 94% { transform: none; opacity: 0.55; } 100% { transform: translateY(calc(var(--space-2) * -1)) scale(1.03); opacity: 1; } }
.trio__beam i { animation-duration: 12s; }
.trio__beam--1 i { animation-name: trio-beam; }
.trio__beam--2 i { animation-name: trio-beam; animation-delay: -8s; }
.trio__beam--2 i:nth-child(2) { animation-delay: -7.8s; }
.trio__beam--2 i:nth-child(3) { animation-delay: -7.6s; }
@keyframes trio-beam { 0%, 26%, 40%, 100% { opacity: 0.2; transform: none; } 30%, 34% { opacity: 1; transform: scale(1.5); } }
.trio-line { position: absolute; left: 24%; right: 26%; top: 27%; height: 2px; background: var(--color-scanner-frame); box-shadow: 0 0 var(--space-3) var(--color-scanner-frame); opacity: 0; animation: trio-line 12s ease-in-out infinite; }
@keyframes trio-line { 0% { top: 27%; opacity: 0; } 2% { opacity: 1; } 11% { top: 49%; } 20% { top: 27%; opacity: 1; } 22%, 100% { top: 27%; opacity: 0; } }
.trio-ok { position: absolute; left: 50%; top: 38%; width: 14%; aspect-ratio: 1; margin: -7% 0 0 -7%; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-scanner-success); transform: scale(0); animation: trio-ok 12s var(--site-spring) infinite; }
.trio-ok svg { width: 60%; height: 60%; fill: none; stroke: var(--color-scanner-fg); stroke-width: 2; }
@keyframes trio-ok { 0%, 21% { transform: scale(0); } 25%, 31% { transform: scale(1); } 34%, 100% { transform: scale(0); } }
.trio .typed { animation: trio-typed-box 12s linear infinite; animation-delay: calc(-8s + var(--typed-step)); }
.trio .t-typed { animation: typed-text 12s steps(14) infinite; animation-delay: calc(-8s + var(--typed-step)); }
@keyframes trio-typed-box { 0%, 1% { opacity: 0; } 2%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
.trio .typed--first { --typed-step: 0.2s; }
.trio .typed--last { --typed-step: 1.3s; }
.trio .typed--phone { --typed-step: 2.4s; }
.trio .press-dim { animation: trio-press 12s linear -4s infinite; }
.trio .fly-cover { animation: trio-cover 12s linear -4s infinite; }
.trio .iphone__screen picture img.screen-fly { animation: trio-fly 12s ease-in -4s infinite; }
.trio .ds-toast--wallet { left: var(--space-2); right: var(--space-2); padding: var(--space-2) var(--space-3); gap: var(--space-2); animation: trio-toast 12s var(--site-spring) -4s infinite; }
@keyframes trio-press { 0%, 3% { opacity: 0; } 4%, 7% { opacity: 1; } 8%, 100% { opacity: 0; } }
@keyframes trio-cover { 0%, 8% { opacity: 0; } 9%, 22% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes trio-fly { 0%, 8% { opacity: 0; transform: none; } 9% { opacity: 1; transform: none; } 13% { opacity: 1; transform: translateY(-62%) scale(0.5); } 14%, 100% { opacity: 0; transform: translateY(-62%) scale(0.5); } }
@keyframes trio-toast { 0%, 13% { transform: translateY(-260%); opacity: 0; } 17%, 32% { transform: none; opacity: 1; } 38%, 100% { transform: translateY(-260%); opacity: 0; } }

/* Lock screen: the card's notifications drop in, one under the other. */
.lock { position: absolute; inset: 0; container-type: inline-size; }
.lock__time { position: absolute; left: 0; right: 0; top: 11%; font-size: clamp(var(--type-title1-size), 20cqw, var(--type-hero-size)); text-align: center; color: var(--color-scanner-fg); font-size: var(--type-hero-size); font-weight: var(--type-display-weight); letter-spacing: var(--type-hero-tracking); line-height: 1; }
.lock__stack { position: absolute; left: var(--space-3); right: var(--space-3); top: 30%; display: flex; flex-direction: column; gap: var(--space-2); }
.lock__note { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); color: var(--color-text-primary); background: color-mix(in srgb, var(--color-bg-elevated) 78%, transparent); -webkit-backdrop-filter: blur(var(--space-4)); backdrop-filter: blur(var(--space-4)); box-shadow: var(--shadow-high); line-height: var(--site-lh-title); }
.lock__note img { flex: none; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-sm); }
.lock__note--1 { animation: note-one 9s var(--site-spring) infinite; }
.lock__note--2 { animation: note-two 9s var(--site-spring) infinite; }
@keyframes note-one { 0%, 6% { transform: translateY(-40%) scale(0.92); opacity: 0; } 12%, 88% { transform: none; opacity: 1; } 96%, 100% { transform: translateY(-20%); opacity: 0; } }
@keyframes note-two { 0%, 36% { transform: translateY(-40%) scale(0.92); opacity: 0; } 42%, 88% { transform: none; opacity: 1; } 96%, 100% { transform: translateY(-20%); opacity: 0; } }

/* Compare: why paper and a custom app fall short. */
.compare { width: 100%; margin-top: var(--space-8); border-collapse: separate; border-spacing: 0; }
.compare th, .compare td { padding: var(--space-4) var(--space-3); text-align: center; font-weight: var(--type-body-weight); border-bottom: 1px solid var(--color-border-subtle); }
.compare tbody th { text-align: left; }
.compare thead th { color: var(--color-text-secondary); vertical-align: bottom; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare .compare__us { color: var(--color-accent-default); font-weight: var(--type-title3-weight); background: var(--color-accent-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom-color: transparent; }
.compare__mark svg { display: inline-block; width: var(--space-6); height: var(--space-6); fill: none; stroke-width: 2; vertical-align: middle; }
.compare__mark--yes svg { stroke: var(--color-status-success); }
.compare__mark--no svg { stroke: var(--color-status-danger); }
.compare__mark--us { background: var(--color-accent-soft); border-bottom-color: transparent; }
.compare tr:last-child .compare__mark--us { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Control: small live scenes on a dark bento. */
.controls { display: grid; gap: var(--space-2); margin-top: var(--space-8); }
/* Short tiles under the live ones: 3D icon, title and one line, like the app's feature tiles. */
.perk--mini { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
.perk--mini .benefit-icon { margin: calc(var(--space-3) * -1) calc(var(--space-2) * -1); }
.perk--mini p { margin-top: var(--space-1); }
.cool, .staff { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-text-inverse) 8%, transparent); }
.cool .benefit-icon, .staff .benefit-icon { width: var(--site-space-10); height: var(--site-space-10); margin: 0; }
.cool__time { color: var(--site-scanner-fg-soft); font-variant-numeric: tabular-nums; }
.cool__time b { font-weight: var(--type-headline-weight); color: var(--color-status-warning); }
.log { display: flex; flex-direction: column; gap: var(--space-1); }
.log__row { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-text-inverse) 8%, transparent); animation: log-in 9s var(--site-ease) both infinite; }
.log__row--2 { animation-delay: 0.6s; }
.log__row--3 { animation-delay: 1.2s; }
.log__plus { color: var(--color-status-success); }
.log__minus { color: var(--color-status-danger); }
.log__off { color: var(--site-scanner-fg-soft); text-decoration: line-through; }
.log b { font-weight: var(--type-headline-weight); font-variant-numeric: tabular-nums; }
@keyframes log-in { 0% { opacity: 0; transform: translateY(var(--space-3)); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.staff__text { flex: 1; min-width: 0; }
.staff__text .t-footnote { color: var(--site-scanner-fg-soft); }
.staff__switch { flex: none; width: var(--site-switch-width); height: var(--site-switch-height); padding: 2px; border-radius: var(--radius-full); background: var(--color-accent-default); animation: switch-bg 6s linear infinite; }
.staff__switch i { display: block; width: calc(var(--site-switch-height) - 4px); height: calc(var(--site-switch-height) - 4px); border-radius: var(--radius-full); background: var(--color-scanner-fg); box-shadow: var(--shadow-low); animation: switch-knob 6s var(--site-ease) infinite; }
@keyframes switch-bg { 0%, 45% { background: var(--color-accent-default); } 50%, 90% { background: color-mix(in srgb, var(--color-text-inverse) 22%, transparent); } 95%, 100% { background: var(--color-accent-default); } }
@keyframes switch-knob { 0%, 45% { transform: translateX(calc(var(--site-switch-width) - var(--site-switch-height))); } 50%, 90% { transform: none; } 95%, 100% { transform: translateX(calc(var(--site-switch-width) - var(--site-switch-height))); } }

/* Word of mouth from customers to businesses. */
.refer { display: flex; flex-direction: column; align-items: center; text-align: center; }
.refer__art { width: calc(var(--site-phone-width) * 0.8); margin-top: calc(var(--space-8) * -1); }
.refer .button { margin-top: var(--space-7); }

/* Questions: icons drifting on both sides. */
.faq-floats .floats { display: none; }

/* Waitlist: loyalty cards of different businesses fanned on both sides of the form. */
.fan { position: absolute; top: 50%; display: none; width: var(--site-fan-card); }
.fan--left { left: 3%; }
.fan--right { right: 3%; }
.fan__card { display: flex; flex-direction: column; justify-content: space-between; height: calc(var(--site-fan-card) * 0.63); margin-top: calc(var(--site-fan-card) * -0.3); padding: var(--space-5); animation: fan 7s ease-in-out infinite alternate; text-align: left; }
.fan__top, .fan__bottom { display: flex; justify-content: space-between; gap: var(--space-3); }
.fan__top { align-items: flex-start; }
.fan__bottom { align-items: flex-end; }
.fan__top > span, .fan__bottom > span { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fan__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fan__soft { color: var(--color-surface-metal-fg-secondary); }
.fan__logo { flex: none; width: var(--space-8); height: var(--space-8); }
.fan__bottom > span:first-child { gap: 0; }
.fan__meta { align-items: flex-end; text-align: right; }
.fan__meta .t-caption { white-space: nowrap; }
.fan__balance { font-size: var(--type-balance-size); font-weight: var(--type-balance-weight); letter-spacing: var(--type-balance-tracking); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fan--left .fan__card:nth-child(1) { transform: rotate(-10deg) translate(0, -22%); }
.fan--left .fan__card:nth-child(2) { transform: rotate(-3deg) translate(4%, 18%); animation-delay: -2s; }
.fan--right .fan__card:nth-child(1) { transform: rotate(10deg) translate(0, -22%); animation-delay: -4s; }
.fan--right .fan__card:nth-child(2) { transform: rotate(3deg) translate(-4%, 18%); animation-delay: -1s; }
@keyframes fan { to { translate: 0 calc(var(--space-5) * -1); } }

/* Word of mouth: the world as faint dots behind the whole block, links running between places. */
.block--refer { overflow: hidden; }
.world { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.3; -webkit-mask-image: radial-gradient(ellipse 42% 38% at 50% 55%, transparent 40%, black 100%); mask-image: radial-gradient(ellipse 42% 38% at 50% 55%, transparent 40%, black 100%); }
.refer { position: relative; }


/* Cost calculator: one centred form from the site's own parts (the waitlist field, the page tabs), the result on the brand surface
   with the business card's sheen and the comet running round its edge (BrandOrbitBorder in the app). */
@property --site-orbit { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.calc-block { display: flex; flex-direction: column; align-items: center; gap: var(--space-9); }
.calc-block__head { display: flex; flex-direction: column; align-items: center; max-width: var(--site-text-width); }
.calc-block__head .block__lead { margin-top: var(--space-5); }
.calc { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: var(--site-form-width); }
.calc__field { gap: var(--space-2); }
.calc__field input { -moz-appearance: textfield; appearance: textfield; }
.calc__field input::-webkit-outer-spin-button, .calc__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.calc__tabs { display: flex; align-self: stretch; }
.calc__tabs button { flex: 1; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); }
/* Currency: the language menu's dropdown, any currency, its local name from the browser. */
.calc__currency .lang-menu__list { max-height: calc(var(--size-tap-target) * 6.5); overflow-y: auto; z-index: 1; }
.calc__currency .lang-menu__list .check { margin-left: 0; }
.calc__currency .lang-menu__list .muted { margin-left: auto; }
.calc__currency .lang-menu__list button:not([aria-current])::after { content: ""; width: var(--space-5); flex: none; }
.calc__save { padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--color-status-success-bg); color: var(--color-text-success); }
.calc__save:empty { display: none; }
.calc__result { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); text-align: center; color: var(--color-surface-brand-fg); background: linear-gradient(145deg, var(--color-surface-brand-a), var(--color-surface-brand-b) 45%, var(--color-surface-brand-c) 70%, var(--color-surface-brand-d)); }
.calc__result::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, transparent 35%, color-mix(in srgb, var(--color-surface-brand-fg) 14%, transparent) 50%, transparent 65%); background-size: 280% 280%; animation: calc-sheen 5s linear infinite; mix-blend-mode: plus-lighter; }
.calc__result::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--site-orbit), transparent 0 70%, color-mix(in srgb, var(--color-surface-brand-line) 85%, transparent) 100%), color-mix(in srgb, var(--color-surface-brand-line) 25%, transparent); -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0); animation: calc-orbit 4.5s linear infinite; pointer-events: none; }
@keyframes calc-sheen { from { background-position: 100% 100%; } to { background-position: 0 0; } }
@keyframes calc-orbit { to { --site-orbit: 360deg; } }
.calc__badge { margin-bottom: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-surface-brand-fg) 16%, transparent); }
.calc__value { font-size: var(--type-hero-size); font-weight: var(--type-display-weight); letter-spacing: var(--type-hero-tracking); line-height: 1; font-variant-numeric: tabular-nums; }
.calc__sub { font-weight: var(--type-headline-weight); }
.calc__compare { margin-top: var(--space-4); color: var(--color-surface-brand-fg-secondary); }
.calc__note { color: var(--color-text-secondary); text-align: center; }

/* Loops rest while their block is off screen. */
.is-resting, .is-resting * { animation-play-state: paused !important; }
.is-buried > * { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .art img, .float, .iphone__screen img, .aurora__mesh, .aurora__sheen, .ds-toast, .press-dim, .fly-cover, .path__line i, .ribbon__fill, .ribbon__node .benefit-icon, .duo__beam i, .scan-frame, .scan-frame i, .scan-frame__sweep, .scan-frame__ok, .calc__result::before, .calc__result::after, .fan__card, .clip-card, .trio__step .iphone, .trio-line, .trio-ok, .lock__note, .log__row, .staff__switch, .staff__switch i { animation: none; }
  .iphone__screen picture img.screen-fly, .press-dim, .fly-cover, .ds-toast--wallet { display: none; }
  .comet { display: none; }
  .typed { animation: none; opacity: 1; }
  .t-typed { animation: none; }
  .float { transform: translate(-50%, -50%) rotate(var(--r)); }
  .iphone__screen--swap picture:nth-of-type(2) img { opacity: 0; }
  .js [data-reveal], .has-words .word { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 600px) {
  .site-header__cta { display: inline-flex; }
  .join-form__row { flex-direction: row; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits--metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  :root { --site-block-radius: 48px; }
  .block { padding-left: var(--space-8); padding-right: var(--space-8); }
  .iphone--back { display: block; left: 50%; margin-left: calc(var(--site-phone-width) * -0.15); top: var(--space-9); transform: rotate(4deg); }
  .iphone--front { margin-left: calc(var(--site-phone-width) * -0.85); transform: rotate(-2deg); }
  /* Text and phone as one centred group, so neither hugs an edge of its half. */
  .feature { grid-template-columns: minmax(0, var(--site-feature-text)) auto; justify-content: center; gap: calc(var(--site-space-11) * 1.5); }
  .feature--flip { grid-template-columns: auto minmax(0, var(--site-feature-text)); }
  .feature--flip .feature__visual { order: 1; }
  .feature--flip .feature__text { order: 2; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perk--tall { grid-row: span 2; }
  .perk--side { flex-direction: row; align-items: center; gap: var(--space-5); }
  .duo { flex-direction: row; justify-content: center; gap: var(--space-8); align-items: flex-start; }
  .duo__beam { transform: none; align-self: center; }
  .iphone--tilt-left { transform: rotate(-4deg); }
  .iphone--tilt-right { transform: rotate(4deg); }
  .benefits--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .final__card { padding: var(--space-7); }
  .site-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 960px) {
  .trio { flex-direction: row; align-items: flex-start; justify-content: center; gap: var(--space-4); }
  .trio__step { flex: 1; min-width: 0; }
  .trio__beam { transform: none; flex: none; align-self: flex-start; margin-top: var(--site-trio-beam); }
  .tiles--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .floats, .faq-floats .floats { display: block; }
  .fan { display: block; }
}

/* Mid widths: the side phone shrinks as a whole, so the text next to it keeps room. */
@media (min-width: 760px) and (max-width: 1139px) {
  .perk__phone--side { zoom: 0.72; }
}

/* Toasts as in the app (DSToast): a dark plate drops in from the top of the screen, newest on top, gone after 4 s or on a tap. */
.toasts { position: fixed; z-index: 4; top: var(--site-header-top); left: 50%; display: flex; flex-direction: column; gap: var(--space-2); width: min(calc(100% - var(--space-5) * 2), var(--site-toast-width)); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: var(--space-4); min-height: var(--size-button-lg); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border-radius: var(--radius-xl); background: var(--color-bg-inverse); color: var(--color-text-inverse); box-shadow: var(--shadow-high); cursor: pointer; pointer-events: auto; transition: transform var(--duration-base) var(--site-spring), opacity var(--duration-base) var(--site-ease); }
.toast[data-state="enter"] { opacity: 0; transform: translateY(calc(var(--space-9) * -1)) scale(0.9); }
.toast[data-state="leave"] { opacity: 0; transform: translateY(calc(var(--space-6) * -1)) scale(0.85); }
.toast__icon { flex: none; display: grid; place-items: center; width: var(--space-6); height: var(--space-6); margin-top: var(--space-1); border-radius: var(--radius-full); color: var(--color-scanner-fg); }
.toast__icon svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.toast[data-style="success"] .toast__icon { background: var(--color-status-success); }
.toast[data-style="error"] .toast__icon { background: var(--color-status-danger); }
.toast[data-style="info"] .toast__icon { background: var(--color-surface-brand-line); color: var(--color-surface-brand-a); }
.toast__text { flex: 1; align-self: center; }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity var(--duration-base); } .toast[data-state] { transform: none; } }