/* NFCeez — home. Rules in DESIGN.md: one object per screen, colour from photos and the product, one accent
   (orange = NFC), Inter Tight 400/500 on the app scale plus one statement size for three moments, glass only on
   the floating layer, motion that carries meaning, a still finished state without motion. */

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* A pinned section is exactly one screen (owner, 1 Nov 2026): --screen is the tallest the screen gets, so nothing shows beneath it when
   Safari's toolbar shrinks; --bar is the toolbar's height, which keeps a section's words clear of it. */
:root { --screen: 100vh; --bar: 0px; }
@supports (height: 100lvh) { :root { --screen: 100lvh; --bar: calc(100lvh - 100svh); } }

:root {
  --bg: #050505;
  --surface: #161616;
  --surface-2: #222224;
  --border: #2B2B2D;
  --hair: rgba(255, 255, 255, .1);
  --ink: #F5F5F5;
  --ink-78: rgba(245, 245, 245, .78);
  --nfc: #FF9E52;
  --live: #6ED4A3;

  /* Golden-ratio type scale (owner, 15 Oct 2026): every heading is the 17 px body times a power of φ = 1.618
     (whole steps 17 · 28 · 44 · 72 · 116, half steps √φ between them). Body line height is φ. Small UI text keeps the app sizes. */
  --phi: 1.618;
  --statement: clamp(44px, 8vw, 116px);                         /* φ² … φ⁴ */
  --hero: 72px; --display: 44px; --title: 35px; --title2: 28px;  /* φ³ · φ² · φ^1.5 · φ */
  --section: 17px; --body: 17px; --detail: 15px; --caption: 13px; --label: 12px;

  --m: clamp(20px, 5.5vw, 88px);   /* side margin */
  --max: 1280px;
  --r: 22px;                        /* one radius for media and tiles */
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* Nothing may ever scroll sideways (owner, 15 Oct 2026): iOS Safari only honours this on html, so both clip. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; scrollbar-gutter: stable; }
/* No bounce past the top or bottom (owner, 16 Oct 2026): Safari's rubber band and pull-to-refresh move the fixed header
   and its blur down and open a black band above the page. The header must never move. */
html, body { overscroll-behavior-y: none; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--body)/1.618 "Inter Tight", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
svg { display: block; }
a { color: inherit; }
b, strong { font-weight: 500; }
em { font-style: normal; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.t-statement { font-size: var(--statement); font-weight: 500; line-height: .94; letter-spacing: -.035em; }
.t-hero    { font-size: var(--hero);    font-weight: 500; line-height: 1.02; letter-spacing: -.8px; }
.t-display { font-size: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -.8px; }
.t-title   { font-size: var(--title);   font-weight: 500; line-height: 1.1;  letter-spacing: -.8px; }
.t-title2  { font-size: var(--title2);  font-weight: 500; line-height: 1.15; letter-spacing: -.5px; }
.t-body    { font-size: var(--body); line-height: 1.618; }
.t-detail  { font-size: var(--detail); line-height: 1.4; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #000; padding: 10px 14px; border-radius: 12px; }
.skip:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; }

/* Glass: only on the floating layer (header capsule, dock, chips over photos). */
.glass { background: rgba(28, 28, 30, .46); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); }
@media (prefers-reduced-transparency: reduce) { .glass { background: rgba(28, 28, 30, .96); backdrop-filter: none; } }

/* ---------- Header + dock ---------- */
.top { position: fixed; z-index: 60; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center;
  padding: max(16px, env(safe-area-inset-top)) var(--m) 0; pointer-events: none; }
.top > * { pointer-events: auto; }
/* A fade behind the header in the colour of the section under it (owner, 1 Nov 2026). A blur here sampled past the screen's edge and
   painted a grey band over white sections, and redrew on every scroll frame. */
.top::before { content: ""; position: absolute; inset: 0 0 -36px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--tone, #050505) 30%, transparent); }
/* The strip behind the iPhone's status bar stays black on every section (owner, 1 Nov 2026). iOS Safari would not follow section colours reliably:
   going back up from a white section left a white strip over dark ones. So nothing on the page tells Safari a colour. */
/* The app's header: the NFCeez mark and the word "Business" (owner, 15 Oct 2026). */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; transition: color .4s; }
.brand img { width: 28px; height: auto; filter: invert(1); transition: filter .4s; }
.brand-word { font-size: var(--section, 17px); font-weight: 500; letter-spacing: -.2px; line-height: 1; }
body.on-colour .brand { color: #050505; }
.top::before { transition: opacity .4s; }
body:not(.scrolled) .top::before { opacity: 0; transition: none; }   /* off at the top and during Safari's bounce */
body.on-colour .brand img { filter: none; }
.lang { height: 44px; padding: 0 16px; border-radius: 999px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-size: var(--detail); font-weight: 500; }
.lang { color: var(--ink); }
/* Apple emoji flags, as on the Smart Page's language pill (owner, 14 Oct 2026). */
.lang-flag, .lm-flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 18px; line-height: 1; }
.lang-menu .lm-name { display: inline-flex; align-items: center; gap: 12px; }
.lang .lang-chev { width: 12px; height: 12px; opacity: .78; transition: transform .2s var(--ease); }
.lang[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-code { min-width: 2ch; font-variant-numeric: tabular-nums; }
/* Language menu: a small glass list under the button that opened it (Apple's pull-down menu). */
.lang-menu.glass { background: rgba(28, 28, 30, .82); }
.lang-menu { position: fixed; z-index: 60; width: 228px; padding: 6px; border-radius: 22px; display: grid; gap: 2px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); }
/* 25 languages (owner, 17 Oct 2026): two columns on wide screens, one on phones; the list scrolls inside the menu. */
.lang-menu { max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.lang-menu::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .lang-menu { width: 452px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lang-menu[hidden] { display: none; }
.lang-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 16px; background: none; color: var(--ink); font: inherit; font-size: var(--detail); font-weight: 400; text-align: left; cursor: pointer;
  transition: background-color .15s var(--ease); }
.lang-menu button:hover, .lang-menu button:focus-visible { background: rgba(255,255,255,.1); outline: none; }
.lang-menu button[aria-checked="true"] { font-weight: 500; }
.lang-menu .lm-check { width: 16px; height: 16px; opacity: 0; }
.lang-menu button[aria-checked="true"] .lm-check { opacity: 1; }

.dock { position: fixed; z-index: 60; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.dock a { height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; text-decoration: none;
  font-size: var(--detail); font-weight: 500; opacity: .62; transition: opacity .25s, background-color .25s; white-space: nowrap; }
.dock a:hover { opacity: 1; }
.dock a.is-on { opacity: 1; background: rgba(255, 255, 255, .12); }
.dock .dock-home { padding: 0 12px; opacity: 1; }
.dock-home img { width: 22px; filter: invert(1); }

/* The two stores (owner, 1 Nov 2026; after Jeton and Wizz on Mobbin): two quiet badges with the logo and a two-line label. Not links until the app is live. */
.stores { display: flex; gap: 10px; }
.store { font: inherit; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; }
.store:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }
.store:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.store { display: inline-flex; align-items: center; gap: 11px; height: 58px; padding: 0 20px 0 16px; border-radius: 14px; color: #fff;
  background: rgba(2,10,58,.24); border: 1px solid rgba(255,255,255,.42); }
.store svg { width: 25px; height: 25px; flex: none; fill: currentColor; }
.store-t { display: grid; gap: 1px; }
.store small { font-size: 11px; line-height: 1.15; letter-spacing: .01em; font-weight: 400; white-space: nowrap; }
.store b { font-size: 18px; line-height: 1.15; letter-spacing: -.015em; font-weight: 500; white-space: nowrap; }
@media (max-width: 400px) { .stores { width: 100%; } .store { flex: 1; justify-content: center; padding: 0 10px; gap: 9px; } .store svg { width: 23px; height: 23px; } .store b { font-size: 17px; } }
.btn-white { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 22px; text-align: left; border-radius: 16px;
  background: var(--ink); color: #000; font-size: var(--detail); font-weight: 500; white-space: nowrap; }
.btn-white svg { width: 15px; height: 18px; flex: none; }
.btn-white > span { white-space: normal; }

/* ---------- Shared logo circles (as in the app's SourceLogo: always circles) ---------- */
.logo { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.logo img { width: 58%; }
.logo i { width: 54%; height: 54%; background: #fff; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.logo svg { width: 56%; height: 56%; }
.logo-google { background: #fff; }
.logo-ig { background: radial-gradient(circle at 25% 105%, #FFD776 0%, #F3A554 18%, #F13A6F 45%, #C13584 68%, #5B51D8 100%); }
.logo-wa { background: #25D366; }
.logo-ig i { --g: url("logos/instagram.svg"); }
.logo-wa i { --g: url("logos/whatsapp.svg"); }
.logo-book { background: #6366F1; }

/* =========================================================
   1 · Hero
   ========================================================= */
/* The hero fills the whole screen, also behind Safari's floating toolbar (owner, 16 Oct 2026: "100 viewport"); its words stay
   above the toolbar (100lvh - 100svh is the toolbar's height, 0 where there is none). */
.hero { position: relative; height: 100vh; height: calc(100lvh + env(safe-area-inset-bottom)); min-height: 640px; overflow: hidden; }
/* The hero (owner, 1 Nov 2026, after their references; 2 Nov: "remove this white"): black space, deep blue, then bright blue at
   the horizon, with no white. One soft band of blue light drifts on transforms only; stars and grain are still pictures, and the stars stay in the black. */
.hero { background: #050505; }
.hero-sky, .hero-grad { position: absolute; inset: 0; }
.hero-sky { will-change: transform; }
.hero-grad { overflow: hidden;
  background: linear-gradient(to bottom, #050505 0%, #03040F 34%, #020A3A 52%, #06298F 66%, #0B3DB0 76%, #1D6FE8 90%, #2A7AF0 100%); }
.hz { position: absolute; border-radius: 50%; will-change: transform; }
.hz1 { left: -40%; width: 180%; height: 18%; bottom: -3%; background: radial-gradient(closest-side, rgba(58,140,250,.55), rgba(58,140,250,0)); animation: hlA 16s ease-in-out infinite alternate; }
@keyframes hlA { from { transform: translate3d(-6%, 3%, 0) scale(.96); } to { transform: translate3d(6%, -5%, 0) scale(1.06); } }
.hero-tex { position: absolute; inset: 0; pointer-events: none; }
.hero-stars { position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700' fill='white'><circle cx='331' cy='154' r='.9' fill-opacity='.25'/><circle cx='74' cy='548' r='.5' fill-opacity='.5'/><circle cx='596' cy='59' r='.5' fill-opacity='.25'/><circle cx='88' cy='444' r='.9' fill-opacity='.25'/><circle cx='246' cy='92' r='.9' fill-opacity='.25'/><circle cx='579' cy='126' r='.5' fill-opacity='.25'/><circle cx='590' cy='599' r='.9' fill-opacity='.25'/><circle cx='226' cy='47' r='.5' fill-opacity='.5'/><circle cx='429' cy='147' r='.5' fill-opacity='.5'/><circle cx='573' cy='698' r='.5' fill-opacity='.25'/><circle cx='595' cy='584' r='.5' fill-opacity='.5'/><circle cx='99' cy='560' r='.5' fill-opacity='.25'/><circle cx='633' cy='210' r='.9' fill-opacity='.7'/><circle cx='321' cy='476' r='.9' fill-opacity='.5'/><circle cx='306' cy='254' r='.5' fill-opacity='.35'/><circle cx='83' cy='588' r='.7' fill-opacity='.7'/><circle cx='351' cy='459' r='.7' fill-opacity='.25'/><circle cx='120' cy='524' r='.9' fill-opacity='.35'/><circle cx='350' cy='155' r='.9' fill-opacity='.7'/><circle cx='40' cy='684' r='.5' fill-opacity='.5'/><circle cx='348' cy='358' r='.9' fill-opacity='.7'/><circle cx='70' cy='95' r='.7' fill-opacity='.7'/><circle cx='680' cy='66' r='.5' fill-opacity='.5'/><circle cx='662' cy='591' r='.9' fill-opacity='.5'/><circle cx='395' cy='684' r='.7' fill-opacity='.25'/><circle cx='472' cy='363' r='.5' fill-opacity='.25'/><circle cx='505' cy='60' r='.5' fill-opacity='.5'/><circle cx='132' cy='253' r='.9' fill-opacity='.7'/><circle cx='508' cy='82' r='.5' fill-opacity='.7'/><circle cx='411' cy='562' r='.7' fill-opacity='.35'/><circle cx='440' cy='563' r='.7' fill-opacity='.7'/><circle cx='367' cy='699' r='.9' fill-opacity='.35'/><circle cx='154' cy='84' r='.5' fill-opacity='.35'/><circle cx='237' cy='674' r='.5' fill-opacity='.25'/><circle cx='496' cy='603' r='.5' fill-opacity='.5'/><circle cx='288' cy='4' r='.5' fill-opacity='.7'/><circle cx='547' cy='378' r='.7' fill-opacity='.35'/><circle cx='527' cy='632' r='.5' fill-opacity='.7'/><circle cx='696' cy='572' r='.9' fill-opacity='.7'/><circle cx='408' cy='403' r='.5' fill-opacity='.7'/><circle cx='649' cy='410' r='.5' fill-opacity='.35'/><circle cx='68' cy='213' r='.9' fill-opacity='.35'/><circle cx='112' cy='348' r='.5' fill-opacity='.25'/><circle cx='0' cy='580' r='.5' fill-opacity='.25'/><circle cx='372' cy='628' r='.5' fill-opacity='.25'/><circle cx='212' cy='628' r='.9' fill-opacity='.35'/><circle cx='649' cy='258' r='.7' fill-opacity='.5'/><circle cx='485' cy='125' r='.5' fill-opacity='.7'/><circle cx='477' cy='491' r='.9' fill-opacity='.5'/><circle cx='87' cy='147' r='.5' fill-opacity='.5'/><circle cx='271' cy='490' r='.5' fill-opacity='.25'/><circle cx='210' cy='540' r='.7' fill-opacity='.35'/><circle cx='556' cy='27' r='.7' fill-opacity='.25'/><circle cx='267' cy='530' r='.7' fill-opacity='.35'/><circle cx='364' cy='228' r='.7' fill-opacity='.35'/><circle cx='627' cy='199' r='.5' fill-opacity='.7'/><circle cx='232' cy='204' r='.9' fill-opacity='.5'/><circle cx='29' cy='28' r='.7' fill-opacity='.7'/><circle cx='265' cy='198' r='.7' fill-opacity='.7'/><circle cx='357' cy='373' r='.5' fill-opacity='.35'/><circle cx='104' cy='232' r='.9' fill-opacity='.35'/><circle cx='345' cy='209' r='.9' fill-opacity='.25'/><circle cx='490' cy='668' r='.7' fill-opacity='.25'/><circle cx='676' cy='122' r='.9' fill-opacity='.35'/><circle cx='489' cy='182' r='.9' fill-opacity='.5'/><circle cx='88' cy='405' r='.9' fill-opacity='.7'/><circle cx='86' cy='162' r='.5' fill-opacity='.35'/><circle cx='28' cy='154' r='.9' fill-opacity='.35'/><circle cx='626' cy='610' r='.9' fill-opacity='.5'/><circle cx='159' cy='561' r='.5' fill-opacity='.25'/><circle cx='14' cy='665' r='.5' fill-opacity='.35'/><circle cx='444' cy='199' r='.5' fill-opacity='.25'/><circle cx='257' cy='217' r='.7' fill-opacity='.35'/><circle cx='600' cy='333' r='.7' fill-opacity='.7'/><circle cx='134' cy='62' r='.7' fill-opacity='.7'/><circle cx='678' cy='597' r='.9' fill-opacity='.35'/><circle cx='544' cy='155' r='.5' fill-opacity='.7'/><circle cx='187' cy='623' r='.5' fill-opacity='.35'/><circle cx='176' cy='144' r='.9' fill-opacity='.25'/><circle cx='569' cy='63' r='.7' fill-opacity='.7'/><circle cx='108' cy='573' r='.5' fill-opacity='.35'/><circle cx='195' cy='283' r='.5' fill-opacity='.25'/><circle cx='519' cy='463' r='.5' fill-opacity='.25'/><circle cx='453' cy='333' r='.5' fill-opacity='.5'/><circle cx='463' cy='520' r='.9' fill-opacity='.35'/><circle cx='535' cy='265' r='.5' fill-opacity='.7'/><circle cx='140' cy='426' r='.5' fill-opacity='.7'/><circle cx='452' cy='323' r='.5' fill-opacity='.35'/><circle cx='438' cy='74' r='.5' fill-opacity='.5'/><circle cx='125' cy='158' r='.7' fill-opacity='.35'/><circle cx='259' cy='140' r='.9' fill-opacity='.35'/><circle cx='96' cy='407' r='.9' fill-opacity='.35'/><circle cx='683' cy='229' r='.5' fill-opacity='.7'/><circle cx='527' cy='413' r='.7' fill-opacity='.7'/><circle cx='200' cy='365' r='.7' fill-opacity='.25'/><circle cx='374' cy='19' r='.7' fill-opacity='.7'/><circle cx='451' cy='18' r='.9' fill-opacity='.5'/><circle cx='529' cy='638' r='.7' fill-opacity='.25'/><circle cx='115' cy='234' r='.5' fill-opacity='.25'/><circle cx='271' cy='278' r='.5' fill-opacity='.35'/><circle cx='276' cy='132' r='.9' fill-opacity='.5'/><circle cx='415' cy='152' r='.9' fill-opacity='.5'/><circle cx='91' cy='285' r='.5' fill-opacity='.35'/><circle cx='435' cy='74' r='.7' fill-opacity='.25'/><circle cx='649' cy='90' r='.7' fill-opacity='.25'/><circle cx='622' cy='227' r='.5' fill-opacity='.5'/><circle cx='124' cy='464' r='.5' fill-opacity='.5'/><circle cx='566' cy='427' r='.7' fill-opacity='.35'/><circle cx='44' cy='539' r='.5' fill-opacity='.25'/><circle cx='165' cy='268' r='.5' fill-opacity='.35'/></svg>");
  -webkit-mask: linear-gradient(to bottom, #000 22%, transparent 50%); mask: linear-gradient(to bottom, #000 22%, transparent 50%); }
.hero-grain { position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@media (max-width: 900px) {
  .hz1 { left: -90%; width: 280%; }   /* a phone is narrow, so the band runs wider */
}
@media (prefers-reduced-motion: reduce) { .hz { animation: none; } }
.hero-chip { position: absolute; left: 60%; top: 21%; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 22px; }
.chip-logo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #F2E3D3; color: #8A3B2A; font-size: 20px; font-weight: 500; border: 2px solid #fff; }
.chip-text { display: grid; gap: 2px; }
.chip-text b { font-size: var(--section); }
.chip-open { display: inline-flex; align-items: center; gap: 6px; font-size: var(--caption); font-weight: 500; }
.chip-open i, .f-hours i, .pill-open i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(110,212,163,.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(110,212,163,0); } }
.chip-nfc { margin-left: 6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--nfc); color: #1a0d03; }
.chip-nfc svg { width: 20px; height: 20px; }

/* After the owner's reference: one huge line at the top left, the rest low over the horizon, above the dock. */
.hero-foot { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: var(--screen); padding: clamp(92px, 13svh, 136px) var(--m) calc(clamp(56px, 16svh, 150px) + var(--bar));
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px; pointer-events: none; }
.hero-foot > * { pointer-events: auto; }
.hero-foot h1 { font-size: min(clamp(46px, 10vw, 168px), 21svh); font-weight: 400; letter-spacing: -.035em; line-height: .96; }
.hero-side { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.hero-side .t-body { max-width: 520px; }
@media (max-width: 900px) { .hero-foot h1 { font-size: 14vw; } }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .06em .24em; margin: -.14em -.06em -.24em; }   /* accents and descenders never cut */
[data-split] .w > span { display: inline-block; }

/* =========================================================
   2 · Problem
   ========================================================= */
.problem { background: #050505; }
/* With motion the sentence lies over the hero inside one pinned scene (site.js); without it, it simply follows the hero. */
.opening { position: relative; }
.opening.is-scene .problem { position: absolute; inset: 0; z-index: 3; background: none; pointer-events: none; }
.opening.is-scene .problem-pin { height: 100vh; height: 100svh; padding-bottom: 0; }   /* centred in what is actually visible, whatever Safari's toolbar does */
.problem-pin { position: relative; height: var(--screen); padding-bottom: var(--bar); display: grid; align-items: center; overflow: hidden; }
.problem-line { position: relative; max-width: 1320px; margin: 0 auto; text-align: center; text-wrap: balance; padding: 0 var(--m); font-size: clamp(36px, 6vw, 100px); font-weight: 400; letter-spacing: -.03em; line-height: 1.02; }
.problem-line .wd { transition: opacity .3s; }



.moments-pin { height: var(--screen); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px;
  padding: 110px var(--m) 104px; max-width: 1440px; margin: 0 auto; }
.moments-title { text-align: center; }
.moments-stage { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 56px; min-height: 0; }
.m-copies, .m-chipset { position: relative; height: 100%; display: grid; align-items: center; }
.m-copy, .m-chips { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.m-copy.is-on, .m-chips.is-on { opacity: 1; transform: none; }
.m-copy { justify-self: end; max-width: 420px; text-align: right; }
.m-pain { position: relative; display: inline; font-size: var(--section); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.m-answer { margin-top: 18px; text-wrap: balance; }
.moments .m-device { width: calc(min(62svh, 620px) * .49); height: auto; }
.m-screen { opacity: 0; transition: opacity .5s var(--ease); }
.m-screen.is-on { opacity: 1; }
.m-chips { justify-self: start; display: grid; gap: 14px; justify-items: start; }
.m-chips .chip:nth-child(2) { margin-left: 48px; }
.chip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.9); font-size: var(--detail); white-space: nowrap; }
.chip > b:only-child { padding-left: 6px; }
.chip em { display: block; color: var(--ink-78); font-size: var(--caption); }
.mc-pass { background: #0E3B2C; border-color: rgba(110,212,163,.25); padding: 12px 16px; }
.mc-dish { padding: 8px 16px 8px 8px; }
.mc-dish img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.mc-pills { padding: 10px; gap: 6px; }
.mc-pills i { height: 26px; padding: 0 10px; border-radius: 13px; display: inline-flex; align-items: center; background: rgba(255,255,255,.09); font-size: 12px; font-weight: 500; font-style: normal; }
.mc-pills .vegan { background: #22A35A; }
.mc-nfc .nfc-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--nfc); }
.mc-island { background: #000; border-color: #1d1d1f; padding: 12px 20px 12px 12px; border-radius: 30px; }
.mc-island .il-dot { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(140deg, #818CF8, #A78BFA); }
.mc-legend { padding: 12px 16px; gap: 16px; font-size: 13px; }
.mc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mc-legend i { width: 10px; height: 10px; border-radius: 3px; }
.m-tabs { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; }
.m-tabs button { position: relative; z-index: 1; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: var(--detail); font-weight: 500; transition: color .3s; white-space: nowrap; }
.m-tabs button[aria-selected="true"] { color: #000; }
.m-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--ink); transition: transform .45s var(--ease), width .45s var(--ease); }

/* =========================================================
   Hero chip: a Wallet notification on the photo
   ========================================================= */
.chip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.chip-row em { font-size: var(--caption); color: var(--ink-78); }
.hero-chip .chip-text > span:last-child { font-size: var(--detail); }
.hero-chip { min-width: 300px; }

/* =========================================================
   Blind spot: three questions
   ========================================================= */
.questions { max-width: var(--max); margin: 0 auto; padding: 180px var(--m) 120px; }
.questions > h2 { max-width: 720px; text-wrap: balance; }
.q-list { margin: 64px 0 0; padding: 0; list-style: none; display: grid; }
.q-list li { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 16px; padding: 34px 0; border-top: 1px solid var(--hair); }
.q-list li:last-child { border-bottom: 1px solid var(--hair); }
.q-n { font-size: var(--detail); font-weight: 500; }
.q-list p { margin: 0; text-wrap: balance; }
.q-answer { margin-top: 48px; color: var(--live); }

/* =========================================================
   Return loop: time passing on a lock screen
   ========================================================= */
.loop-pin { height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr); align-items: center; gap: 64px;
  padding: 100px var(--m) 100px; max-width: 1440px; margin: 0 auto; }
.loop-copy { max-width: 440px; justify-self: end; }
.loop-copy .t-display { text-wrap: balance; }
.loop-copy .t-body { margin-top: 18px; }
.loop-step { position: relative; display: grid; margin: 44px 0 0; }
.ls { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ls.is-on { opacity: 1; transform: none; }
.ls:last-child { color: var(--live); }
.lock-device { width: calc(min(72svh, 700px) * .49); }
.lock { overflow: hidden; container-type: inline-size; }
.lock-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(.62) saturate(1.1); transform: scale(1.06); }
.lock-top { position: absolute; left: 0; right: 0; top: 13%; display: grid; justify-items: center; color: #fff; text-align: center; }
.lock-top span { font-size: 5.2cqw; font-weight: 500; }
.lock-top b { font-size: 26cqw; line-height: .95; letter-spacing: -.04em; font-weight: 500; }
.lock-notes { position: absolute; left: 4%; right: 4%; bottom: 17%; display: grid; gap: 2.4cqw; }
.nt { display: flex; gap: 3cqw; align-items: center; padding: 3.4cqw 3.6cqw; border-radius: 6.4cqw; color: #fff;
  background: rgba(40,40,44,.52); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); font-size: 3.9cqw; line-height: 1.3; transform-origin: 50% 0; }
.nt-icon { flex: none; width: 10cqw; height: 10cqw; border-radius: 2.6cqw; display: grid; place-items: center; background: #B23A2E; color: #fff; font-size: 4.6cqw; font-weight: 500; }
.nt-t { flex: 1; display: grid; min-width: 0; }
.nt-row { display: flex; justify-content: space-between; gap: 2cqw; }
.nt-row b { font-weight: 500; }
.nt-row em { opacity: .7; font-size: 3.4cqw; }
.lock-bottom { position: absolute; left: 10%; right: 10%; bottom: 5.5%; display: flex; justify-content: space-between; }
.lb { width: 12cqw; height: 12cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(40,40,44,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lb svg { width: 50%; height: 50%; }
.lock-bar { position: absolute; left: 50%; bottom: 1.6%; width: 34%; height: .6%; margin-left: -17%; border-radius: 99px; background: #fff; }
.loop-pass { justify-self: start; width: 300px; padding: 20px; border-radius: 18px; color: #fff; transform: rotate(4deg);
  background: linear-gradient(160deg, #B23A2E, #6E1E17); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.lp-head { display: flex; align-items: center; gap: 10px; }
.lp-head .nt-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; background: #F4E6DA; color: #B23A2E; }
.lp-head > b { flex: 1; font-size: 16px; }
.lp-count { font-size: 28px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.lp-stamps { margin: 22px 0 20px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lp-stamps i { width: 100%; min-width: 0; align-self: start; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); position: relative; }
.lp-stamps i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.lp-stamps i.on::after { transform: scale(1); }
.lp-foot { display: grid; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }
.lp-foot em { font-size: 12px; font-weight: 500; }
.lp-foot b { font-size: 15px; }

/* The lead feature (Revolut's form): a centred sentence, one button, the real menu rising on the iPhone. */
.lead { position: relative; overflow: hidden; padding: 160px var(--m) 0; text-align: center; background: #050505; }
.lead::after { content: ""; position: absolute; inset: auto 0 0; height: 70%; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 100%, rgba(150,168,196,.24), transparent 70%); }
.lead-copy { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; justify-items: center; gap: 28px; }
.lead-title { margin: 0; font-weight: 500; font-size: var(--statement); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.lead-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .06em .24em; margin: -.14em -.06em -.24em; }
.lead-title .w > span { display: inline-block; }
.lead-body { max-width: 640px; margin: 0; text-wrap: balance; }
/* Search and AI headline (owner, 15 Oct 2026): Google's logo by "Google", a loose cloud of AI assistants by "KI".
   AI marks: Simple Icons (CC0), assets/logos/ai/LICENSE.txt. They name the assistants whose crawlers the pages allow. */
.lead-title .g-mark { display: inline-grid; place-items: center; width: .62em; height: .62em; margin: 0 .16em 0 .04em; vertical-align: -.02em; }
.lead-title .g-mark img { width: 100%; height: auto; }
.lead-logos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ll { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  opacity: .9; animation: aiFloat 5.5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); will-change: transform; }
.ll::before { content: ""; position: absolute; inset: 0; background: var(--c, #fff); filter: blur(var(--b, 0px));
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ll-far { opacity: .45; }
@keyframes aiFloat { from { translate: 0 -6px; rotate: -4deg; } to { translate: 0 7px; rotate: 4deg; } }
.ll-openai { --m: url("logos/ai/openai.svg"); --c: #fff; }
.ll-claude { --m: url("logos/ai/claude.svg"); --c: #D97757; --d: -1.3s; }
.ll-perplexity { --m: url("logos/ai/perplexity.svg"); --c: #1FB8CD; --d: -2.2s; }
.ll-googlegemini { --m: url("logos/ai/googlegemini.svg"); --c: #A58BDA; --d: -.7s; }
.ll-meta { --m: url("logos/ai/meta.svg"); --c: #3B8BF6; --d: -3.1s; }
.ll-google::before { background: url("logos/google.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.ll-spark { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202c.6%204.9%202.9%207.6%208%2010-5.1%202.4-7.4%205.1-8%2010-.6-4.9-2.9-7.6-8-10%205.1-2.4%207.4-5.1%208-10z%22/%3E%3C/svg%3E"); --c: rgba(255,255,255,.75); --d: -1.8s; }
.ll-chat { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%205.5A2.5%202.5%200%200%201%206.5%203h11A2.5%202.5%200%200%201%2020%205.5v8a2.5%202.5%200%200%201-2.5%202.5H10l-4.5%204v-4h0A1.5%201.5%200%200%201%204%2014.5z%22/%3E%3C/svg%3E"); --c: rgba(255,255,255,.6); --d: -2.7s; }
.lead-copy, .lead-stage { z-index: 1; }
@media (max-width: 640px) {
  /* Phones: six logos at the edges and beside the phone, never behind the words. */
  .ll { --s: 30px !important; filter: none !important; opacity: .9 !important; }
  .ll:nth-child(5), .ll:nth-child(6), .ll:nth-child(n+9) { display: none; }
  .ll:nth-child(1) { --x: 8% !important; --y: 3% !important; } .ll:nth-child(2) { --x: 92% !important; --y: 4% !important; }
  .ll:nth-child(3) { --x: 6% !important; --y: 50% !important; } .ll:nth-child(4) { --x: 94% !important; --y: 56% !important; }
  .ll:nth-child(7) { --x: 7% !important; --y: 76% !important; } .ll:nth-child(8) { --x: 93% !important; --y: 82% !important; }
}
.lead-btn { height: 52px; padding: 0 28px; border-radius: 999px; display: inline-flex; align-items: center; background: #E6E6E4; color: #0B0B0C;
  font-size: var(--body); font-weight: 500; text-decoration: none; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.lead-btn:hover { background: #FFFFFF; }
.lead-btn:active { transform: scale(.97); }
.lead-stage { position: relative; z-index: 1; height: min(80svh, 780px); margin-top: 80px; display: flex; justify-content: center; overflow: hidden; }
.lead .lead-device { width: min(400px, 80vw); flex: none; align-self: flex-start; }
.lead-scan { position: absolute; z-index: 1; left: 9%; right: 9%; top: 6%; height: 2px; border-radius: 1px; opacity: 0; pointer-events: none;
  background: #fff; box-shadow: 0 0 22px 6px rgba(255,255,255,.45); }

/* Speak your guests' language (Jeton's exchange section, in NFCeez's monochrome). */
.speak { position: relative; overflow: hidden; min-height: var(--screen); display: flex; flex-direction: column; justify-content: center; padding: clamp(88px, 11vh, 120px) var(--m) 0; text-align: center; }
.speak-copy { max-width: 860px; margin: 0 auto; display: grid; justify-items: center; gap: 22px; }
.speak-pill { height: 32px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; border: 1.5px solid var(--ink); font-size: var(--detail); font-weight: 500; }
.speak-title { margin: 0; font-weight: 500; font-size: var(--statement); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.speak-note { margin: 0; max-width: 560px; font-size: var(--detail); text-wrap: balance; }
.speak-demo { position: relative; z-index: 2; width: min(460px, 100%); margin: clamp(32px, 6vh, 84px) auto 0; display: grid; gap: 10px; justify-items: center; text-align: left; }
.sk-card { width: 100%; padding: 16px 18px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 50px -30px rgba(0,0,0,.25); }
.sk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-lang { min-height: 44px; padding: 0 12px 0 8px; margin-left: -8px; border: 0; border-radius: 14px; background: none; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: var(--body); }
.sk-lang:hover { background: rgba(0,0,0,.05); }
.sk-lang b { font-weight: 500; }
.sk-lang svg { width: 12px; height: 12px; }
.sk-flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; }
.sk-flag { font-size: 22px; }
.sk-role { font-size: var(--caption); }
.sk-body { margin-top: 10px; display: grid; gap: 10px; }
.sk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.sk-pill { height: 30px; padding: 0 12px; border-radius: 15px; display: inline-flex; align-items: center; gap: 7px; background: rgba(0,0,0,.05); font-size: 14px; font-weight: 500; }
.sk-pill i { width: 7px; height: 7px; border-radius: 50%; background: #1FA463; }
.sk-dish { flex: 1; min-width: 0; font-size: var(--body); font-weight: 500; }
.sk-vegan { height: 24px; padding: 0 9px; border-radius: 12px; display: inline-flex; align-items: center; gap: 5px; background: #22A35A; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; }
.sk-vegan svg { width: 11px; height: 11px; }
.sk-btn { height: 44px; border-radius: 14px; display: grid; place-items: center; background: #0B0B0C; color: #F5F5F5; font-size: var(--detail); font-weight: 500; }
/* Words roll when the language changes: out upwards, in from below; the box glides to the new width. */
.sk-t { display: inline-grid; justify-items: start; overflow: hidden; vertical-align: bottom; transition: width .44s cubic-bezier(.2,.8,.2,1); }
.sk-t.block { display: grid; }
.sk-t > span { grid-area: 1 / 1; white-space: nowrap; }
.sk-t.block > span { white-space: normal; }
.sk-t > .out { animation: skOut .3s cubic-bezier(.4,0,1,1) forwards; }
.sk-t > .in { animation: skIn .44s cubic-bezier(.2,.8,.2,1) both; }
@keyframes skOut { to { transform: translateY(-105%); opacity: 0; } }
@keyframes skIn { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }
.sk-btn .sk-t { justify-items: center; }
.sk-swap { width: 44px; height: 44px; margin: -2px 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.3); transition: transform .4s var(--ease); }
.sk-swap svg { width: 20px; height: 20px; }
.sk-swap.spin { transform: rotate(180deg); }
.sk-list { position: absolute; z-index: 5; width: 240px; padding: 6px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 60px -20px rgba(0,0,0,.3); display: grid; }
.sk-list[hidden] { display: none; }
.sk-list button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; font-size: var(--detail); text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px; }
.sk-list button:hover, .sk-list button:focus-visible { background: rgba(0,0,0,.05); outline: none; }
.sk-list button[aria-selected="true"] { font-weight: 500; }
.speak-flags { flex: 1 0 clamp(120px, 18vh, 220px); }   /* room for the pile; the balls live in .speak-balls */
.speak-balls { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
@media (max-width: 640px) { .lead { padding: 112px var(--m) 0; } .lead-copy { gap: 22px; } .lead-stage { height: min(64svh, 560px); margin-top: 48px; } .lead .lead-device { width: min(340px, 84vw); } }   /* phones: cropped like desktop (owner) */
/* Phones: the language section is exactly one screen (owner, 15 Oct 2026), with compact cards; the flags fall behind
   the text and cards into the space that is left at the bottom. */
@media (max-width: 640px) {
  .speak { height: var(--screen); min-height: 0; padding-top: calc(env(safe-area-inset-top) + 84px); padding-bottom: var(--bar); }
  .speak-copy { position: relative; z-index: 2; gap: 12px; }
  .speak-pill { height: 28px; padding: 0 12px; font-size: var(--caption); }
  .speak-title { font-size: min(44px, 4.8svh); }
  .speak-note { font-size: var(--caption); line-height: 1.5; max-width: 340px; }
  .speak-demo { margin-top: min(24px, 2.4svh); gap: 6px; width: min(360px, 100%); }
  .sk-card { padding: 8px 12px 12px; border-radius: 18px; }
  .sk-lang { min-height: 40px; gap: 8px; font-size: var(--detail); }
  .sk-flag { font-size: 18px; }
  .sk-role { font-size: var(--label); }
  .sk-body { margin-top: 4px; gap: 8px; }
  .sk-row { min-height: 26px; gap: 8px; }
  .sk-pill { height: 26px; padding: 0 10px; font-size: var(--label); }
  .sk-dish { font-size: var(--detail); }
  .sk-vegan { height: 22px; padding: 0 8px; font-size: 11px; }
  .sk-btn { height: 38px; border-radius: 12px; font-size: var(--caption); }
  .sk-swap { width: 36px; height: 36px; margin: -4px 0; }
  .sk-swap svg { width: 16px; height: 16px; }
  .speak-balls { z-index: 1; }
  .speak-flags { flex: 1 1 0; min-height: 0; }
}
/* Short phones (SE class): tighter still, so the cards keep a row of flags below them. */
@media (max-width: 640px) and (max-height: 760px) {
  .speak { padding-top: calc(env(safe-area-inset-top) + 68px); }
  .speak-copy { gap: 8px; }
  .speak-demo { margin-top: 12px; }
  .sk-lang { min-height: 34px; }
  .sk-body { gap: 6px; }
  .sk-btn { height: 34px; }
  .sk-swap { width: 32px; height: 32px; }
}
.fb { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: #e9e9e6 center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); will-change: transform, opacity; }   /* flat (owner) */


/* Numbers panels */
/* ---------- "Auf einen Blick" (owner, 16 Oct 2026, after Mastercard) ----------
   Five true facts. Without motion: a list. With motion (.ff-live): one pinned screen in each fact's colour, the number
   rolling in a white pill like an odometer, the unit and sentence rising underneath. Orange is the NFC fact's colour. */
.ff { position: relative; background: #0B0B0C; color: #fff; }
.ff-pin { padding: 140px var(--m) 120px; max-width: 1000px; margin: 0 auto; }
.ff-head { margin: 0 0 40px; display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(20px, 2vw, 30px); font-weight: 500; }
.ff-count { font-variant-numeric: tabular-nums; } .ff-count b { font-weight: 500; }
.ff-pill { display: none; }
.ff-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 56px; }
.ff-item { display: grid; gap: 8px; }
.ff-num { font-size: clamp(88px, 12vw, 180px); font-weight: 500; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ff-unit { font-size: clamp(28px, 3.4vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.ff-line { margin: 0; max-width: 640px; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.4; text-wrap: balance; }

.ff.ff-live { background: var(--ffc, #E8622C); transition: none; }
.ff-live .ff-pin { height: var(--screen); max-width: none; padding: 0 var(--m) var(--bar); display: grid; grid-template-rows: 1fr auto auto 1fr; justify-items: center; align-items: center; overflow: hidden; }
.ff-live .ff-head { grid-row: 1; align-self: end; width: min(860px, 100%); margin: 0 0 clamp(24px, 5vh, 56px); display: grid; justify-content: start; gap: 2px; }
.ff-live .ff-pill { --pw: min(820px, 88vw, calc((100svh - 340px) / .48)); --ph: calc(var(--pw) * .48); --ih: calc(var(--ph) * .66); grid-row: 2; display: block; position: relative; width: var(--pw); height: var(--ph);
  border-radius: 999px; background: #fff; color: #0B0B0C; overflow: hidden; }
/* The numbers sit on a drum (owner, 16 Oct 2026, "the number on Mastercard feels 3d"): each one is turned round the pill's
   horizontal axis by site.js (--a), so the neighbours lean away and squash at the top and bottom edge, and the edges fade to
   white like light on a cylinder. */
.ff-col { position: absolute; inset: 0; perspective: calc(var(--ph) * 2.4); transform-style: preserve-3d; }
.ff-col span { --a: 0deg; --r: calc(var(--ph) * .7); position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--ph) * .62); font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums;
  transform: translateZ(calc(var(--r) * -1)) rotateX(var(--a)) translateZ(var(--r)); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; }
.ff-live .ff-pill::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.72) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(255,255,255,.72) 86%, #fff 100%); }
.ff-live .ff-list { grid-row: 3; position: relative; width: min(860px, 100%); display: grid; gap: 0; margin-top: clamp(24px, 5vh, 56px); align-self: start; }
.ff-live .ff-item { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s .5s; }
.ff-live .ff-item.on { visibility: visible; transition: visibility 0s; }
.ff-live .ff-num { display: none; }
.ff-live .ff-unit { font-size: clamp(32px, 3.6vw, 56px); }
.ff-live .ff-unit .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .06em .24em; margin: -.14em -.06em -.24em; }
.ff-live .ff-unit .w > span { display: inline-block; transform: translateY(140%); transition: transform .35s cubic-bezier(.4,0,1,1); }
.ff-live .ff-item.on .ff-unit .w > span { transform: none; transition: transform .75s cubic-bezier(.2,.8,.2,1); }
.ff-live .ff-line { opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.ff-live .ff-item.on .ff-line { opacity: 1; transform: none; transition: opacity .6s .25s, transform .7s .25s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 900px) {
  .ff-live .ff-pin { grid-template-rows: 1fr auto auto 1.3fr; padding-top: 92px; padding-bottom: 96px; }
  .ff-live .ff-pill { --pw: 88vw; --ph: calc(var(--pw) * .52); }
  .ff-live .ff-unit { font-size: 34px; }
  .ff-live .ff-line { font-size: 17px; }
  .ff-live .ff-head { font-size: 22px; }
}

/* ---------- "64 Gäste. Eine Geschichte." (owner, 16 Oct 2026) ----------
   A sticky stage: headline on top (word by word), the 64 guests below as dots that site.js moves into a new picture per
   chapter, labels placed by site.js. Without motion (.sx-live missing) it is a plain list of the chapters. */
.sx { position: relative; }
.sx-pin { position: relative; padding: 140px var(--m) 120px; display: grid; gap: 48px; }
.sx-field, .sx-rail { display: none; }
/* Colour lives in a few words now, not in the background (owner, 16 Oct 2026). */
.sx-t .gw { background: linear-gradient(90deg, var(--g1, #6EE7B7), var(--g2, #7DD3FC)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-t[data-k="0"], .sx-t[data-k="1"] { --g1: #6EE7B7; --g2: #2DD4BF; }
.sx-t[data-k="2"] { --g1: #FDA4AF; --g2: #F472B6; }
.sx-t[data-k="3"] { --g1: #7DD3FC; --g2: #818CF8; }
.sx-t[data-k="4"] { --g1: #FDE68A; --g2: #FB7185; }
.sx-t[data-k="5"] { --g1: #7DD3FC; --g2: #C4B5FD; }
.sx-texts { display: grid; gap: 64px; text-align: center; justify-items: center; }
.sx-t { display: grid; gap: 16px; justify-items: center; max-width: 980px; }
.sx-statement { margin: 0; font-size: var(--statement); font-weight: 500; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.sx-title { margin: 0; font-size: clamp(40px, 4.8vw, 80px); font-weight: 500; line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.sx-body { margin: 0; max-width: 620px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; text-wrap: balance; }
.sx-idx { font-size: var(--body); font-variant-numeric: tabular-nums; }
.sx-idx i { font-style: normal; opacity: .55; }
.sx-big { font-size: clamp(56px, 6.4vw, 112px); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sx-mid { font-size: clamp(44px, 4.4vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.sx-grad { background: linear-gradient(90deg, #6EE7B7, #7DD3FC 55%, #A78BFA); -webkit-background-clip: text; background-clip: text; color: transparent; }

.sx.sx-live .sx-pin { height: var(--screen); padding: 0; display: block; overflow: hidden; }
.sx-live .sx-texts { position: absolute; z-index: 2; left: var(--m); right: var(--m); top: clamp(88px, 11vh, 120px); display: grid; gap: 0; }
.sx-live .sx-t { grid-area: 1 / 1; align-self: start; margin: 0 auto; visibility: hidden; transition: visibility 0s .5s; }
.sx-live .sx-t.on { visibility: visible; transition: visibility 0s; }
.sx-live .sx-t[data-k="0"] { padding-top: 14vh; }
/* Words rise into place when their chapter arrives and drop away when it leaves. */
/* Room for accents above and descenders below (Ä, g, y) so the rise mask never cuts a letter. */
.sx-t .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .06em .24em; margin: -.14em -.06em -.24em; }
.sx-t .gw { padding-bottom: .08em; }
.sx-live .sx-t .w > span { display: inline-block; transform: translateY(140%); transition: transform .35s cubic-bezier(.4,0,1,1); }
.sx-live .sx-t.on .w > span { transform: none; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.sx-live .sx-t.on .w:nth-child(2) > span { transition-delay: .06s; } .sx-live .sx-t.on .w:nth-child(3) > span { transition-delay: .12s; }
.sx-live .sx-t.on .w:nth-child(4) > span { transition-delay: .18s; } .sx-live .sx-t.on .w:nth-child(5) > span { transition-delay: .24s; }
.sx-live .sx-t.on .w:nth-child(6) > span { transition-delay: .3s; } .sx-live .sx-t.on .w:nth-child(n+7) > span { transition-delay: .36s; }
.sx-live .sx-t .sx-body, .sx-live .sx-t .sx-idx { opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.sx-live .sx-t.on .sx-body, .sx-live .sx-t.on .sx-idx { opacity: 1; transform: none; transition: opacity .6s .35s, transform .7s .35s cubic-bezier(.2,.8,.2,1); }
.sx-live .sx-t.on .sx-idx { transition-delay: 0s; }
.sx-live .sx-field { display: block; position: absolute; z-index: 1; left: var(--m); right: var(--m); top: 44%; bottom: 7%; }
.sx-dot { position: absolute; left: 0; top: 0; width: var(--d, 18px); height: var(--d, 18px); margin: calc(var(--d, 18px) / -2) 0 0 calc(var(--d, 18px) / -2);
  border-radius: 50%; background: #F5F5F3; will-change: transform; }
.sx-lab { position: absolute; left: 0; top: 0; margin: 0; translate: -50% 0; display: grid; justify-items: center; gap: 6px; text-align: center; white-space: nowrap;
  opacity: 0; visibility: hidden; font-size: clamp(16px, 1.35vw, 20px); }
.sx-lab b { font-weight: 500; font-variant-numeric: tabular-nums; }
.l-c b { font-size: clamp(32px, 3.2vw, 56px); line-height: 1; letter-spacing: -.03em; }
.l-nfc b { color: #FF9E52; }
.l-step { translate: -50% -50%; }
.sx-steps { display: grid; } .sx-steps > span { grid-area: 1 / 1; opacity: 0; transition: opacity .3s; } .sx-steps > span.on { opacity: 1; }
.l-warn { color: #FB7185; white-space: normal; width: min(560px, 90vw); text-wrap: balance; font-size: clamp(17px, 1.5vw, 22px); }
.l-nfcstat em { font-style: normal; font-size: var(--detail); opacity: .7; }
.l-bar { translate: -50% -50%; }
.sx-bar { display: inline-flex; align-items: center; gap: 16px; height: clamp(60px, 6.4vw, 92px); padding: 0 clamp(26px, 3vw, 40px); border-radius: 999px;
  font-size: clamp(24px, 3vw, 44px); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.sx-bar svg { width: .8em; height: .8em; }
.sx-caret { width: 3px; height: 1.1em; background: #fff; animation: stBlink 1s steps(1) infinite; }
@keyframes stBlink { 50% { opacity: 0; } }
.l-miss { color: #FB7185; font-size: clamp(20px, 2vw, 30px); }
.l-ai { translate: -50% -50%; }
.l-ai.tight .sx-ai-k, .l-ai.tight .sx-ai-n { display: none; }
.sx-ai-k { display: inline-flex; align-items: center; gap: 8px; } .sx-ai-k svg { width: 18px; height: 18px; }
.sx-ai-n { white-space: normal; width: min(260px, 50vw); text-wrap: balance; }
.l-quote { --rv: 1; white-space: normal; width: min(860px, 92vw); font-size: clamp(20px, 2vw, 30px); line-height: 1.3; text-wrap: balance;
  clip-path: inset(0 0 calc(100% - var(--rv) * 100%) 0); }
.sx-live .sx-rail { display: flex; position: absolute; z-index: 3; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); translate: -50% 0; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sx-rail li { width: 28px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.sx-rail li::before { content: ""; display: block; height: 100%; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: left; }
@media (min-width: 901px) { .sx-live .sx-rail { bottom: 28px; left: auto; right: var(--m); translate: none; } }
@media (max-width: 900px) {
  .sx-title { font-size: 40px; }
  .sx-live .sx-texts { top: 92px; }
  .sx-live .sx-t[data-k="0"] { padding-top: 18vh; }
  .sx-live .sx-t .sx-body { font-size: var(--detail); }
  .sx-live .sx-field { top: 40%; bottom: 15%; }
  .sx-lab { font-size: var(--detail); }
  .sx-big { font-size: 52px; }
  .sx-mid { font-size: 40px; }
  .l-c b { font-size: 28px; }
  .sx-bar { font-size: 24px; height: 58px; }
  .l-ai .sx-big { font-size: 40px; } .l-ai { gap: 2px; font-size: var(--caption); } .sx-ai-n { width: 170px; }
  /* Phones: compact headline, labels on one line each, the progress bar under the header. */
  .sx-live .sx-texts { top: 96px; }
  .sx-live .sx-t { gap: 8px; }
  .sx-title { font-size: 32px; }
  .sx-live .sx-t .sx-body { font-size: 14px; line-height: 1.45; }
  .sx-live .sx-idx { font-size: var(--caption); }
  .l-step { translate: -50% 0; grid-auto-flow: column; align-items: baseline; gap: 10px; }
  .l-step .sx-big, .l-count .sx-big { font-size: 40px; }
  .l-count { grid-auto-flow: column; align-items: baseline; gap: 10px; }
  .l-warn { font-size: var(--detail); width: min(340px, 88vw); }
  .l-c { gap: 0; } .l-c b { font-size: 24px; }
  .l-nfcstat { gap: 2px; } .l-nfcstat em { display: none; } .sx-mid { font-size: 34px; }
  .l-nfcstat span { white-space: normal; width: min(320px, 86vw); }
  .l-quote { font-size: 16px; }
  .l-miss { font-size: 20px; }
  .sx-live .sx-rail { top: 78px; bottom: auto; }
}
.p-stats   { --fill: radial-gradient(90% 80% at 85% 110%, #14B8A6 0%, transparent 60%), radial-gradient(80% 70% at 10% 0%, #34D399 0%, transparent 55%), #0b3b2d; }
.p-journey { --fill: radial-gradient(90% 80% at 85% 110%, #F472B6 0%, transparent 58%), radial-gradient(80% 70% at 10% 0%, #FF8A65 0%, transparent 55%), #4a1730; }
.p-search  { --fill: radial-gradient(90% 80% at 85% 110%, #FF7A59 0%, transparent 60%), radial-gradient(80% 70% at 10% 0%, #FFB547 0%, transparent 55%), #5a2a12; }
.p-ai      { --fill: radial-gradient(90% 80% at 85% 110%, #7DD3FC 0%, transparent 55%), radial-gradient(80% 70% at 10% 0%, #A78BFA 0%, transparent 55%), #26215e; }

/* Compare */
.compare .moments-pin { padding-top: 110px; }
.compare .m-copy { max-width: 460px; }

/* =========================================================
   3 · Unify + the iPhone
   ========================================================= */
/* ---------- People (owner, 15 Oct 2026: "images and sections like Revolut") ---------- */
/* Regulars: a real guest fills the screen; Revolut's thin phone outline stands on her with the Wallet stamp card. */
.regulars { position: relative; height: var(--screen); overflow: hidden; background: #050505; }
.rg-photo { position: absolute; top: 0; bottom: 0; left: 24%; width: 76%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.regulars::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #050505 0%, #050505 24%, rgba(5,5,5,.6) 34%, rgba(5,5,5,0) 52%), linear-gradient(to top, rgba(5,5,5,.5), rgba(5,5,5,0) 35%); }
.rg-copy { position: absolute; z-index: 2; left: var(--m); top: 50%; translate: 0 -50%; max-width: min(560px, 38vw); display: grid; gap: 22px; }
.rg-copy h2 { margin: 0; text-wrap: balance; }
.rg-copy p { margin: 0; max-width: 440px; }
.rg-phone { position: absolute; z-index: 2; left: 80%; top: 55%; width: min(360px, 28vw); aspect-ratio: 300 / 560;
  margin: calc(min(360px, 28vw) * -.9333) 0 0 calc(min(360px, 28vw) / -2);   /* centred by margins: GSAP owns the transform */
  border: 1.5px solid rgba(255,255,255,.7); border-radius: 46px; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 18px;
  background: rgba(255,255,255,.06); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #fff; text-align: center; }
.rg-label { font-size: var(--detail); }
.rg-big { font-size: clamp(44px, 4.6vw, 72px); font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.rg-pill { height: 36px; padding: 0 16px; border-radius: 18px; display: inline-flex; align-items: center; background: #fff; color: #0B0B0C; font-size: var(--detail); font-weight: 500; }
.rg-note { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; text-align: left; }
.rg-note > span:nth-child(2) { flex: 1; display: grid; gap: 2px; min-width: 0; }
.rg-note b { font-weight: 500; font-size: var(--detail); white-space: nowrap; }
.rg-note em { font-size: var(--caption); color: rgba(255,255,255,.78); }
/* Glass on the photos (owner, 15 Oct 2026): the booking, stamp and review blocks blur what is behind them. */
.rg-note, .fc-ui { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 20px 40px -20px rgba(0,0,0,.55); }
@media (prefers-reduced-transparency: reduce) { .rg-note, .fc-ui { background: rgba(28,28,30,.92); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.rg-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #0E8A52; color: #fff; flex: none; }
.rg-icon svg { width: 20px; height: 20px; }
.rg-plus { font-variant-numeric: tabular-nums; }
/* The scene (owner, 15 Oct 2026): dim and grey like the empty table before it, the photo opens from a card to the screen
   while warmth floods in, the stamp card grows out of the phone in her hands, and the seventh stamp lands. */
.rg-photo { will-change: clip-path, transform; }
.rg-grey { filter: grayscale(1); }
.rg-dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #050505; opacity: 0; }
.rg-glow { position: absolute; z-index: 2; left: 0; top: 0; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(196,181,253,.55) 35%, rgba(110,212,163,.25) 60%, transparent); filter: blur(6px); mix-blend-mode: screen; }
.rg-n { display: inline-block; }
/* The official Add to Apple Wallet and Add to Google Wallet badges, unmodified (assets/wallet, sources in GOOGLE-SOURCE.txt). */
/* Bottom right of the photo: a short line and the badges (owner, 15 Oct 2026). */
.rg-wallet { position: absolute; z-index: 3; left: var(--m); bottom: 48px; max-width: 380px; display: grid; gap: 14px; justify-items: start; text-align: left; }
.rg-wallet p { margin: 0; font-size: var(--detail); line-height: 1.5; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.rg-wallets { display: flex; gap: 10px; align-items: center; }
.rg-wallets .wb { height: 44px; width: auto; display: block; }
.rg-phone { padding-bottom: 96px; }
@media (min-width: 901px) {
  /* The card sits higher so the badges have the corner to themselves. */
  .rg-phone { top: 45%; width: min(330px, 25vw); aspect-ratio: 300 / 540; margin: calc(min(330px, 25vw) * -.9) 0 0 calc(min(330px, 25vw) / -2); }
}
@media (min-width: 901px) and (max-width: 1240px) { .rg-wallet { bottom: 104px; } }
@media (min-width: 901px) { .rg-copy { top: 42%; } }
.rg-dots { display: grid; grid-template-columns: repeat(5, 10px); gap: 6px; margin: 4px 0 6px; }
.rg-dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px rgba(255,255,255,.7); }
.rg-dots i.on { background: #fff; box-shadow: none; }

/* Faces: three tall photo cards (Revolut's "Your details, protected"), each with one real piece of NFCeez on it. */
.faces { padding: clamp(120px, 14vh, 160px) var(--m) clamp(120px, 16vh, 180px); }
.fc-head { max-width: 760px; margin: 0 auto; text-align: center; display: grid; gap: 18px; justify-items: center; }
.fc-head h2, .fc-head p { margin: 0; text-wrap: balance; }
.fc-head p { max-width: 560px; }
.fc-row { max-width: 1180px; margin: clamp(48px, 7vh, 80px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fc-card { position: relative; margin: 0; aspect-ratio: 3 / 4.1; border-radius: var(--r); overflow: hidden; background: #161616; isolation: isolate; }
.fc-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.fc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(5,5,5,.55), rgba(5,5,5,0) 38%, rgba(5,5,5,0) 70%, rgba(5,5,5,.35)); }
.fc-card:hover > img { transform: scale(1.04); }
.fc-card figcaption { padding: 24px 24px 0; font-size: var(--title2); font-weight: 500; line-height: 1.15; letter-spacing: -.5px; color: #fff; max-width: 15ch; }
.fc-ui { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; }
.fc-ui > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.fc-ui b { font-weight: 500; font-size: var(--detail); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-ui em { font-size: var(--caption); color: rgba(255,255,255,.78); }
.fc-ui em.ok { color: #6ED4A3; font-weight: 500; }
.fc-ui em.stars { color: #F5A623; letter-spacing: 2px; }
.fc-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.2); color: #fff; }
.fc-ic svg { width: 20px; height: 20px; }
.fc-m { background: #F2E3D3; color: #8A3B2A; font-weight: 500; font-size: var(--detail); }
.fc-g { background: #fff; }
.fc-g img { width: 20px; height: 20px; }

.unify { position: relative; }
.unify-pin { position: relative; height: var(--screen); overflow: hidden; --s: .7; --pw: calc(490px * var(--s)); --ph: calc(1000px * var(--s)); }
.unify-title { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 1; }
.frags { position: absolute; inset: 0; z-index: 2; }
.frag { position: absolute; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 50px -24px rgba(0,0,0,.9); font-size: var(--detail); white-space: nowrap; }
.frag b { font-weight: 500; }
.frag em { display: block; color: var(--ink-78); font-size: var(--caption); }
.f-review { left: 9%;  top: 18%; }
.f-hours  { left: 66%; top: 12%; padding: 12px 16px; gap: 8px; font-weight: 500; }
.f-ig     { left: 74%; top: 44%; }
.f-dish   { left: 5%;  top: 58%; padding: 8px 16px 8px 8px; }
.f-dish img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.f-pass   { left: 62%; top: 76%; padding: 12px 16px; background: #0E3B2C; border-color: rgba(110,212,163,.25); }
.pass-mini-logo { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #F2E3D3; color: #8A3B2A; font-size: 13px; font-weight: 500; }
.mini-stamps { display: grid; grid-template-columns: repeat(5, 9px); gap: 4px; }
.mini-stamps i { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.mini-stamps i.off { background: none; box-shadow: inset 0 0 0 1.3px rgba(255,255,255,.6); }
.f-book   { left: 22%; top: 80%; }
.f-wa     { left: 30%; top: 8%; }

.phone-slot { position: absolute; z-index: 3; left: calc(50% - var(--pw) / 2); top: calc(50% - var(--ph) / 2); width: var(--pw); height: var(--ph); }
/* Apple's iPhone 17 Pro Max frame (Apple Design Resources, Deep Blue) over a real 1320 × 2868 screenshot.
   The screen sits at 75/66 px in the 1470 × 3000 frame; corners follow the display's 62 pt rounding. */
.device { position: relative; margin: 0; width: 100%; aspect-ratio: 980 / 2000; filter: drop-shadow(0 50px 60px rgba(0,0,0,.55)); }
.device-screen { position: absolute; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; object-fit: cover; border-radius: 14.09% / 6.49%; background: #000; }
/* Guest pages end in a soft fade with the home indicator, like a live scrolling page, instead of a cut card. */
.device.web::after { content: ""; position: absolute; z-index: 1; left: 5.102%; width: 89.796%; bottom: 2.2%; height: 15%; pointer-events: none;
  border-radius: 0 0 14.09% 14.09% / 0 0 41% 41%; background: linear-gradient(to bottom, rgba(11,11,12,0) 0%, rgba(11,11,12,.85) 55%, #0B0B0C 100%); }
.device.web::before { content: ""; position: absolute; z-index: 2; left: 50%; bottom: 3.3%; width: 31%; height: .5%; margin-left: -15.5%; border-radius: 99px; background: #fff; pointer-events: none; }
.device-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.sample-note { margin-top: 18px; color: var(--ink-78); }

.callouts { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.callouts li { position: absolute; display: flex; align-items: center; font-size: var(--detail); font-weight: 500; white-space: nowrap; }
.callouts li span { padding: 10px 14px; border-radius: 14px; background: rgba(22,22,22,.86); border: 1px solid var(--border); }
.callouts li::before { content: ""; width: 56px; height: 1px; background: rgba(255,255,255,.5); }
.callouts .c1, .callouts .c2, .callouts .c3 { right: calc(50% + var(--pw) / 2 - 24px); flex-direction: row-reverse; }
.callouts .c4 { left: calc(50% + var(--pw) / 2 - 24px); }
.callouts .c1 { top: calc(50% - var(--ph) / 2 + var(--ph) * .43); }
.callouts .c2 { top: calc(50% - var(--ph) / 2 + var(--ph) * .70); }
.callouts .c3 { top: calc(50% - var(--ph) / 2 + var(--ph) * .9); }
.callouts .c4 { top: calc(50% - var(--ph) / 2 + var(--ph) * .885); }
.unify-note { position: absolute; z-index: 4; left: var(--m); top: 128px; max-width: 330px; }
/* Mit OpenAI: the same gathering as "Alles an einem Ort.", with what the AI reads out of one photo (owner, 15 Oct 2026). */
.ai-title { gap: 0; align-content: center; }
.ai-title > span { display: block; }
.ai-mark { display: grid !important; place-items: center; margin-bottom: 28px; }
.ai-mark svg { width: clamp(48px, 5vw, 72px); height: auto; }
.f-photo  { left: 8%;  top: 16%; padding: 8px 16px 8px 8px; }
.f-dish2  { left: 63%; top: 13%; padding: 12px 16px; }
.f-allerg { left: 72%; top: 42%; padding: 10px 12px 10px 16px; gap: 8px; }
.f-vegan  { left: 13%; top: 45%; padding: 10px 16px; gap: 8px; background: #22A35A; border-color: transparent; color: #fff; font-weight: 500; }
.f-vegan svg { width: 16px; height: 16px; }
.f-langs  { left: 6%;  top: 72%; padding: 12px 16px; display: grid; gap: 2px; }
.f-pages  { left: 61%; top: 75%; padding: 12px 16px; gap: 10px; }
.f-cats   { left: 30%; top: 87%; padding: 12px 16px; }
.mini-paper { width: 40px; height: 52px; border-radius: 6px; padding: 7px 6px; background: #F4EFE6; display: grid; align-content: start; gap: 5px; transform: rotate(-4deg); }
.mini-paper i { display: block; height: 3px; border-radius: 2px; background: rgba(42,32,24,.5); }
.mini-paper i:first-child { width: 60%; background: #2A2018; }
.mini-paper i:nth-child(3) { width: 80%; } .mini-paper i:nth-child(5) { width: 70%; }
.chip-l { width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); font-size: var(--caption); font-weight: 500; }
.langs-row { letter-spacing: .04em; }
.dot-done { width: 18px; height: 18px; border-radius: 50%; background: #30D158; box-shadow: inset 0 0 0 5px #30D158, inset 0 0 0 8px #0B0B0C; }
/* Callouts point at the real menu screen: prices, the vegan pill, allergens, and the menu's language at the top. */
.ai-pin .callouts .c1 { top: calc(50% - var(--ph) / 2 + var(--ph) * .44); }
.ai-pin .callouts .c2 { top: calc(50% - var(--ph) / 2 + var(--ph) * .68); }
.ai-pin .callouts .c3 { top: calc(50% - var(--ph) / 2 + var(--ph) * .76); }
.ai-pin .callouts .c4 { top: calc(50% - var(--ph) / 2 + var(--ph) * .14); }

/* =========================================================
   4 · Ways in
   ========================================================= */
.ways { background: var(--bg); transition: background-color .6s var(--ease), color .6s var(--ease); }
.ways-pin { height: var(--screen); display: grid; place-content: center; justify-items: center; gap: 48px; padding: 0 var(--m) var(--bar); text-align: center; }
.ways-words { display: grid; gap: 0; font-size: clamp(56px, min(15vw, calc((100svh - 230px) / 2.7)), 188px); line-height: .9; letter-spacing: -.045em; }
.ways-words li { transition: opacity .5s var(--ease); }
.ways-note { max-width: 520px; text-wrap: balance; }

/* =========================================================
   Socials — S1: logo ribbon behind the phone
   ========================================================= */
.socials { padding: 160px 0 40px; overflow: hidden; }
.socials-head { max-width: 760px; margin: 0 auto; padding: 0 var(--m); text-align: center; }
.socials-head p { margin-top: 14px; text-wrap: balance; }
.ribbon-stage { position: relative; height: min(88svh, 820px); min-height: 560px; margin-top: 24px; }
.ribbon-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.ribbon { position: absolute; inset: 0; }
.rb { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); will-change: transform, opacity; }
.rb i, .lift-logo i { width: 50%; height: 50%; background: #fff; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.rb img { width: 56%; }
.rb.round i { width: 100%; height: 100%; background: var(--c); }
.rb.ring { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 18px 40px -16px rgba(0,0,0,.8); }
.socials .s-device { position: absolute; z-index: 2; left: 50%; top: 50%; width: calc(min(70svh, 640px) * .49); transform: translate(-50%, -50%); }
.lift { position: absolute; z-index: 3; left: calc(50% + min(70svh, 640px) * .17); top: 46%; display: flex; align-items: center; gap: 12px; width: 300px;
  padding: 12px 16px 12px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 60px -24px rgba(0,0,0,.9);
  opacity: 0; transform: translate(-20px, 8px) scale(.96); transition: opacity .45s var(--ease), transform .55s cubic-bezier(.3,1.3,.5,1); }
.lift.is-on { opacity: 1; transform: none; }
.lift-logo { width: 40px; height: 40px; }
.lift-t { flex: 1; display: grid; }
.lift-t b { font-size: 17px; }
.lift-t em { font-size: 15px; color: var(--ink-78); }

/* =========================================================
   AI — A2: annotated paper menu
   ========================================================= */
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   Features — one morphing rectangle
   ========================================================= */
.morph-pin { height: var(--screen); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 48px;
  max-width: var(--max); margin: 0 auto; padding: 100px var(--m) 100px; }
.morph-copy { position: relative; display: grid; align-content: center; min-height: 380px; }
.morph-rail { position: relative; display: flex; gap: 22px; margin-bottom: 30px; padding-bottom: 14px; }
.morph-rail button { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--detail); font-weight: 500; opacity: .5; transition: opacity .3s; }
.morph-rail button.is-on, .morph-rail button:hover { opacity: 1; }
.rail-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: rgba(255,255,255,.14); overflow: hidden; }
.rail-line i { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(var(--rp, 0)); transform-origin: left; }
.mch li { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.mch.is-on li { opacity: 1; transform: none; }
.mch.is-on li:nth-child(1) { transition-delay: .15s; } .mch.is-on li:nth-child(2) { transition-delay: .3s; } .mch.is-on li:nth-child(3) { transition-delay: .45s; }
.mch { grid-area: 2 / 1; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.mch.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mch p { margin-top: 14px; max-width: 420px; }
.morph-stage { position: relative; height: min(78svh, 760px); --g1: #FFB547; --g2: #FF7A59; }
.morph-stage[data-ch="1"] { --g1: #34D399; --g2: #14B8A6; }
.morph-stage[data-ch="2"] { --g1: #818CF8; --g2: #A78BFA; }
@property --g1 { syntax: "<color>"; inherits: true; initial-value: #FFB547; }
@property --g2 { syntax: "<color>"; inherits: true; initial-value: #FF7A59; }
.morph-stage { transition: --g1 .9s ease, --g2 .9s ease; }
.morph-glow { position: absolute; left: 50%; top: 50%; width: min(120%, 100vw); height: 90%; translate: -50% -50%; border-radius: 50%; filter: blur(70px); opacity: .32; pointer-events: none;
  background: radial-gradient(closest-side, var(--g1), var(--g2) 45%, transparent 75%); }
.mp-toast { position: absolute; z-index: 3; left: 50%; top: calc(50% - 150px); translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 12px;
  border-radius: 22px; background: rgba(24,24,26,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  font-size: var(--detail); white-space: nowrap; opacity: 0; pointer-events: none; }
.mp-toast i { width: 20px; height: 20px; border-radius: 50%; background: var(--live); position: relative; }
.mp-toast i::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border-right: 2px solid #04150d; border-bottom: 2px solid #04150d; transform: rotate(45deg); }
.mp-toast b { font-weight: 500; }
.mp-toast.pop { animation: toast 1.6s var(--ease) both; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.mi-dot { animation: islandPulse 1.8s ease-in-out infinite; }
@keyframes islandPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,.55); } 60% { box-shadow: 0 0 0 12px rgba(167,139,250,0); } }
.morph { position: absolute; left: 50%; top: 50%; translate: -50% -50%; overflow: hidden; background: #0B0B0C; will-change: width, height, border-radius;
  width: calc(min(78svh, 760px) * .44); height: calc(min(78svh, 760px) * .956); border-radius: calc(min(78svh, 760px) * .06); }
.ml { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ml-menu { inset: auto; left: 0; top: 0; max-width: none; }
.ml-pass { padding: 24px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: linear-gradient(160deg, #B23A2E, #6E1E17); }
.ml-pass .lp-stamps { gap: 14px; padding: 0 4px; }
.ml-pass .lp-stamps { margin: 0; }
.ml-island { display: flex; align-items: center; gap: 14px; padding: 0 26px 0 14px; background: #000; color: #fff; }
.mi-dot { flex: none; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(140deg, #818CF8, #A78BFA); }
.mi-t { flex: 1; display: grid; min-width: 0; }
.mi-t b { font-size: 17px; }
.mi-t em { font-size: 15px; color: var(--ink-78); white-space: nowrap; }
.mi-time { font-size: 22px; font-weight: 500; color: #A78BFA; font-variant-numeric: tabular-nums; }
.morph-frame { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: calc(min(78svh, 760px) * .49); height: auto; pointer-events: none; z-index: 2; filter: drop-shadow(0 50px 60px rgba(0,0,0,.55)); }

/* =========================================================
   5 · Features — stacking panels
   ========================================================= */
.features { padding: 180px 0 120px; }
.features-head { max-width: var(--max); margin: 0 auto 72px; padding: 0 var(--m); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.features-head p { max-width: 440px; justify-self: end; }
.stack { margin: 0 auto; }
.panel { position: sticky; top: 0; height: var(--screen); overflow: hidden; padding: 0 max(var(--m), calc((100vw - var(--max)) / 2));
  display: grid; grid-template-columns: 5fr 7fr; isolation: isolate; transform-origin: 50% 50%; contain: paint; }
.panel-dim { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.p-menu    { --fill: radial-gradient(90% 80% at 85% 110%, #FF7A59 0%, transparent 60%), radial-gradient(80% 70% at 10% 0%, #FFB547 0%, transparent 55%), #5a2a12; }
.p-loyalty { --fill: radial-gradient(90% 80% at 85% 110%, #14B8A6 0%, transparent 60%), radial-gradient(80% 70% at 10% 0%, #34D399 0%, transparent 55%), #0b3b2d; }
.p-booking { --fill: radial-gradient(90% 80% at 85% 110%, #7DD3FC 0%, transparent 55%), radial-gradient(80% 70% at 10% 0%, #A78BFA 0%, transparent 55%), #26215e; }
.p-reach   { --fill: radial-gradient(90% 80% at 85% 110%, #0F766E 0%, transparent 60%), radial-gradient(80% 70% at 10% 0%, #1E40AF 0%, transparent 55%), #0c1638; }
.panel-copy { padding: 112px 0 104px; display: flex; flex-direction: column; }
.panel-index { font-size: var(--detail); font-weight: 500; margin-bottom: auto; }
.panel-copy p { margin-top: 14px; max-width: 380px; }
.facts { margin-top: 28px; max-width: 380px; }
.facts li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.2); }
.panel-art { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 48px 40px 0; }

/* Each panel shows a real screen on the iPhone 17 Pro Max, rising from the panel's lower edge. */
.panel-art .device { position: absolute; top: 112px; left: calc(50% - min(180px, 39%)); width: min(360px, 78%); }

/* =========================================================
   6 · Venues
   ========================================================= */
.venues { padding: 120px 0 180px; }
.venues-head { max-width: var(--max); margin: 0 auto 48px; padding: 0 var(--m); }
.venue-row { max-width: 1600px; margin: 0 auto; padding: 0 var(--m); display: flex; gap: 12px; height: min(72svh, 620px); }
.venue { position: relative; flex: 1; min-width: 0; border-radius: var(--r); overflow: hidden; transition: flex-grow .7s var(--ease); cursor: default; }
.venue.is-open { flex-grow: 2.6; }
.venue img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.venue::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 50%); }
.venue figcaption { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; display: grid; gap: 12px; justify-items: start; }
.v-chip { height: 40px; padding: 0 14px; border-radius: 20px; display: inline-flex; align-items: center; font-size: var(--detail); font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); }
.venue.is-open .v-chip { opacity: 1; transform: none; }

/* =========================================================
   7 · Footer — Revolut's structure on NFCeez's dark
   ========================================================= */
.rfoot { background: #15171a; padding: 120px 0 calc(110px + env(safe-area-inset-bottom)); }
.rf-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--m); }
.rf-head { display: flex; align-items: center; gap: 22px; margin-bottom: 40px; }
.rf-icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 16px 40px -14px rgba(34,211,238,.5); }
.rf-head p { margin-top: 6px; }
.rf-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.rf-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 230px; padding: 26px 24px 64px; border-radius: 28px; background: #000; text-decoration: none;
  transition: transform .35s var(--ease), background-color .35s; }
.rf-card:hover { transform: translateY(-4px); background: #0b0b0c; }
.rf-card p { margin: 0; font-size: var(--detail); color: var(--ink-78); line-height: 1.45; }
.rf-arrow { position: absolute; right: 24px; bottom: 22px; width: 26px; height: 26px; transition: transform .35s var(--ease); }
.rf-card:hover .rf-arrow { transform: translateX(4px); }
.rf-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 88px; }
.rf-group summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; cursor: default; }
.rf-group summary::-webkit-details-marker { display: none; }
.rf-plus { width: 20px; height: 20px; display: none; transition: transform .3s var(--ease); }
.rf-group ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.rf-group a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-size: var(--detail); }
.rf-group a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rf-bar { margin-top: 72px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.rf-brandrow { display: flex; justify-content: space-between; align-items: center; min-height: 96px; }
.rf-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.rf-logo img { width: 32px; height: auto; filter: invert(1); }
.rf-logo .brand-word { font-size: 22px; letter-spacing: -.3px; }
.rf-slogan { font-size: var(--section); font-weight: 500; }
.rf-bottom { padding-top: 40px; display: grid; gap: 22px; }
.rf-locale { display: flex; gap: 32px; align-items: center; font-size: var(--detail); }
.rf-country { display: inline-flex; align-items: center; gap: 10px; }
.rf-flag { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#000 0 33.3%, #DD0000 33.3% 66.6%, #FFCE00 66.6%); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.rf-lang { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--detail); }
.rf-lang svg { width: 22px; height: 22px; }
.rf-legal { display: flex; gap: 28px; flex-wrap: wrap; font-size: var(--detail); }
.rf-legal a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.rf-legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rf-fine { margin-top: 18px; display: grid; gap: 6px; max-width: 760px; font-size: var(--caption); color: var(--ink-78); line-height: 1.5; }
.rf-fine p { margin: 0; }

/* =========================================================
   White sections (owner, 15 Oct 2026). Between black and white sits a portal: an empty screen in the old colour, where
   a white rectangle opens out of a line into white; leaving white, the white closes back into a line over black (site.js).
   ========================================================= */
.light { --bg: #F5F5F3; --surface: #FFFFFF; --surface-2: #ECECE9; --border: #DEDED9; --hair: rgba(0,0,0,.1);
  --ink: #0B0B0C; --ink-78: rgba(11,11,12,.74); --live: #0E8A52;
  position: relative; background: var(--bg); color: var(--ink); color-scheme: light; }
.sheet-dark { position: relative; background: #050505; }
.light .glass { background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.08); color: var(--ink); }
.light .m-tabs button[aria-selected="true"] { color: #F5F5F5; }
.light .chip { box-shadow: 0 20px 40px -24px rgba(0,0,0,.3); }
.light .mc-pills i { background: rgba(0,0,0,.06); }
.light .mc-pass, .light .mc-island { color: #F5F5F5; }
.light .rb { box-shadow: 0 14px 30px -16px rgba(0,0,0,.35); }
.light .rb.ring { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 14px 30px -16px rgba(0,0,0,.35); }
.light .lift { box-shadow: 0 24px 50px -24px rgba(0,0,0,.3); }
.light .venue figcaption { color: #F5F5F5; }
.light .device { filter: drop-shadow(0 40px 50px rgba(0,0,0,.25)); }
.light .loop-pass { box-shadow: 0 40px 70px -34px rgba(0,0,0,.35); }
.portal { position: relative; z-index: 1; height: var(--screen); overflow: hidden; background: #050505; }
.portal-rect { position: absolute; inset: 0; background: #F5F5F3; transform: scale(0); will-change: transform; }
/* The header over a white section: no dark fade, and the mark and "Business" turn dark. */
body.head-light .brand { color: #0B0B0C; }
body.head-light .brand img { filter: none; }
body.head-light .lang.glass, body.on-colour .lang.glass { background: rgba(245,245,243,.46); border-color: rgba(11,11,12,.14); box-shadow: none; color: #0B0B0C; }   /* the dark pill's twin: flat, hairline border */
.lang.glass { transition: background-color .4s, color .4s, border-color .4s, box-shadow .4s; }
/* Over a white section the dock turns into the light twin of itself: flat, hairline border, dark text. */
.dock.glass { transition: background-color .4s, color .4s, border-color .4s, box-shadow .4s; }
body.dock-light .dock.glass, body.on-colour .dock.glass { background: rgba(245,245,243,.72); border-color: rgba(11,11,12,.14); box-shadow: none; color: #0B0B0C; }
body.dock-light .dock a, body.on-colour .dock a { color: #0B0B0C; }
body.dock-light .dock a.is-on, body.on-colour .dock a.is-on { background: rgba(11,11,12,.08); }
body.dock-light .dock-home img, body.on-colour .dock-home img { filter: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .frag.f-wa, .frag.f-book { display: none; }
  .callouts { display: none; }
}
@media (max-width: 900px) {
  :root { --display: 35px; --title: 28px; --title2: 22px; --hero: 44px; }   /* one φ half-step down on phones */
  /* Phones: Safari's floating toolbar sits below the large viewport, so the hero bleeds 72px further and its words move up by the same. */
  .hero { height: calc(100lvh + env(safe-area-inset-bottom) + 72px); }
  .hero-chip { left: auto; right: var(--m); top: 16%; }
  .ways-words { font-size: min(19vw, calc((100svh - 300px) / 2.7)); }
  .morph-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; padding: 88px var(--m) calc(92px + var(--bar)); min-height: 0; }
  .morph-copy { min-height: 0; text-align: center; justify-items: center; }
  .morph-count { margin-bottom: 8px; }
  .mch .t-title { font-size: 28px; }
  .mch p { margin: 8px auto 0; font-size: var(--detail); }
  .mch .facts { display: none; }
  .morph-stage { height: 100%; min-height: 0; }
  .socials { padding-top: 110px; }
  .ribbon-stage { height: 640px; min-height: 0; }
  .socials .s-device { width: 210px; }
  .rb { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .lift { left: 50%; top: auto; bottom: 18px; width: 280px; margin-left: -140px; }
  .moments-pin { padding-top: 92px; gap: 14px; }
  .moments-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 14px; justify-items: center; }
  .m-copies { height: auto; min-height: 112px; }
  .m-copy { justify-self: center; text-align: center; }
  .m-answer { margin-top: 8px; font-size: 22px; }
  .m-chipset { display: none; }
  .moments .m-device { width: calc(min(48svh, 480px) * .49); }
  .moments-title { font-size: 28px; }
  .m-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
  .m-tabs::-webkit-scrollbar { display: none; }
  .m-tabs button { padding: 0 10px; font-size: 13px; }
  .questions { padding: 120px var(--m) 80px; }
  .q-list li { grid-template-columns: 36px 1fr; padding: 24px 0; }
  .q-list .t-title { font-size: 22px; }
  .loop-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; justify-items: center; gap: 18px; padding: 92px var(--m) calc(96px + var(--bar)); min-height: 0; }
  .loop-copy { justify-self: center; text-align: center; }
  .loop-copy .t-display { font-size: 28px; }
  .loop-copy .t-body { display: none; }
  .loop-step { margin-top: 10px; font-size: 22px; }
  .lock-device { width: min(70vw, calc(min(62svh, 600px) * .49)); align-self: start; }
  .loop-pass { display: none; }
  .hero-chip { min-width: 0; }
  .features-head { grid-template-columns: 1fr; gap: 16px; }
  .features-head p { justify-self: start; }
  .unify-pin { min-height: 0; }
  .phone-slot { top: 84px; }
  .frag { font-size: 13px; padding: 8px 12px 8px 8px; }
  .frag .logo { width: 28px; height: 28px; }
  .f-review { left: 4%; top: 10%; } .f-hours { left: 50%; top: 20%; } .f-ig { left: 52%; top: 70%; } .f-dish { left: 3%; top: 64%; } .f-pass { left: 34%; top: 84%; }
  .f-photo { left: 4%; top: 12%; } .f-dish2 { left: 42%; top: 22%; } .f-allerg { left: 46%; top: 66%; } .f-vegan { left: 6%; top: 58%; } .f-langs { left: 12%; top: 80%; }
  .f-pages, .f-cats { display: none; }
  .ai-mark { margin-bottom: 18px; }
  .unify-note { left: var(--m); right: var(--m); top: auto; bottom: 96px; max-width: none; text-align: center; font-size: var(--detail); }
  .regulars { min-height: 0; }
  .regulars::after { background: linear-gradient(rgba(5,5,5,.8), rgba(5,5,5,.25) 40%, rgba(5,5,5,0) 60%, rgba(5,5,5,.5)); }
  .rg-photo { left: 0; width: 100%; object-position: 40% 35%; }
  .rg-copy { left: var(--m); right: var(--m); top: 96px; translate: none; max-width: none; gap: 14px; }
  .rg-copy p { font-size: var(--detail); }
  .rg-phone { left: auto; right: var(--m); top: auto; bottom: calc(230px + env(safe-area-inset-bottom)); margin: 0; width: min(214px, 52vw); aspect-ratio: 300 / 470; border-radius: 32px; gap: 4px; padding-bottom: 70px; }
  .rg-big { font-size: 44px !important; }
  .rg-label { font-size: var(--caption); }
  .rg-note b { font-size: var(--caption); }
  .rg-big { font-size: 52px; }
  /* Phones: the wallet block on its own at the bottom left; the stamp card moves up to the right. */
  .rg-wallet { left: var(--m); right: var(--m); bottom: calc(100px + env(safe-area-inset-bottom)); max-width: none; gap: 10px; }
  .rg-wallet p { font-size: var(--caption); max-width: 300px; }
  .rg-photo { object-position: 50% 35%; }
  .rg-wallets .wb { height: 32px; }
  .rg-pill { height: 32px; font-size: var(--caption); }
  .rg-note { padding: 10px 12px; border-radius: 18px; gap: 10px; }
  .rg-icon { width: 30px; height: 30px; } .rg-icon svg { width: 17px; height: 17px; }
  /* Phones: the cards stand side by side. With motion the section holds and vertical scrolling slides the row left
     (owner, 15 Oct 2026); without it the row is a swipeable strip of its own (never the page). */
  .faces { padding-top: 96px; padding-bottom: 96px; overflow: hidden; }
  .fc-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(var(--m) * -1); margin-right: calc(var(--m) * -1); padding: 0 var(--m); }
  .fc-row::-webkit-scrollbar { display: none; }
  .fc-card { flex: none; width: min(78vw, 340px); aspect-ratio: 3 / 4.1; scroll-snap-align: center; }
  .faces.is-pinned { height: var(--screen); display: grid; grid-template-columns: 100%; align-content: center; padding-top: 72px; padding-bottom: calc(72px + var(--bar)); }
  .faces.is-pinned .fc-row { overflow: visible; width: max-content; margin: clamp(28px, 4vh, 48px) 0 0; padding: 0; will-change: transform; }
  .fc-card figcaption { font-size: 22px; padding: 20px 20px 0; }
  .features { padding-top: 120px; }
  .stack { max-width: var(--max); padding: 0 var(--m); }
  .panel { position: relative; top: auto; height: auto; min-height: 0; padding: 0; contain: none; grid-template-columns: 1fr; margin-bottom: 16px; border-radius: 28px; }
  .panel-copy { padding: 28px 24px 8px; }
  .panel-index { margin-bottom: 18px; }
  .panel-art { padding: 28px 16px 0; overflow: hidden; }
  .panel-art .device { position: relative; top: auto; left: auto; width: min(76%, 280px); margin-bottom: -46%; }
  .venue-row { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .venue { flex: 0 0 76vw; height: 460px; scroll-snap-align: center; }
  .v-chip { opacity: 1; transform: none; }
  .rfoot { padding-top: 90px; }
  .rf-head { align-items: flex-start; }
  .rf-icon { width: 52px; height: 52px; border-radius: 12px; }
  .rf-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; margin: 0 calc(var(--m) * -1); padding-left: var(--m); padding-right: var(--m); scroll-padding: var(--m); }
  .rf-card { scroll-snap-align: start; min-height: 200px; }
  .rf-groups { grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
  .rf-group { border-bottom: 1px solid var(--hair); }
  .rf-group summary { min-height: 60px; cursor: pointer; }
  .rf-plus { display: block; }
  .rf-group[open] .rf-plus { transform: rotate(45deg); }
  .rf-group ul { margin: 0 0 14px; }
  .rf-bar { margin-top: 48px; }
  .rf-locale { gap: 24px; }
  .dock .dock-home { display: none; }
  .dock a { padding: 0 12px; font-size: 14px; }
}
@media (max-width: 380px) { .dock a { padding: 0 9px; font-size: 13px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .frags, .callouts { display: none; }
  .morph-pin { height: auto; }
  .mch { position: static; opacity: 1; transform: none; grid-area: auto; margin-bottom: 28px; }
  .ml-pass, .ml-island, .ml-book, .mp-toast, .morph-rail { display: none; }
  .mch li { opacity: 1; transform: none; }
  .loop-pin { height: auto; }
  .unify-title { position: relative; height: auto; padding-top: 120px; }
  .unify-pin { height: auto; display: grid; justify-items: center; gap: 40px; padding-bottom: 80px; }
  .phone-slot { position: relative; left: auto; top: auto; }
  .unify-note { position: static; text-align: center; }
  .panel { position: relative; top: auto; }
}

/* ---------- One system instead of five (owner, 16 Oct 2026, after Origin on Mobbin) ----------
   Without motion: the six tiles and the list. With motion (.dl-live): the five tools wiggle, lose a minus and go one by one,
   NFCeez moves to the middle and the list of what it covers rises inside the box. */
.dl-pin { min-height: var(--screen); padding: 132px var(--m) 120px; display: grid; align-content: center; justify-items: center; text-align: center; }
.dl-title { margin: 0; }
.dl-lead { margin: 16px 0 0; max-width: 460px; font-size: var(--body); line-height: 1.5; }
.dl-box { --t: 112px; --gap: 44px; position: relative; margin-top: clamp(32px, 5vh, 56px); padding: 40px 48px 36px; border: 1.5px dashed rgba(11,11,12,.2); border-radius: 36px; }
.dl-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, var(--t)); gap: 28px var(--gap); }
.dl-app { position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; }
.dl-tile { display: grid; place-items: center; width: var(--t); height: var(--t); border-radius: 26%; background: #fff; color: #0B0B0C;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 28px -10px rgba(0,0,0,.22); }
.dl-tile svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dl-me .dl-tile { background: #0B0B0C; color: #fff; }
.dl-me .dl-tile svg { width: 46%; height: 46%; fill: #fff; stroke: none; }
.dl-name { max-width: calc(var(--t) + var(--gap) - 8px); font-size: var(--detail); line-height: 1.25; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.dl-minus { position: absolute; left: -9px; top: -9px; width: 28px; height: 28px; border-radius: 50%; background: #0B0B0C; box-shadow: 0 0 0 3px var(--bg, #F5F5F3); }
.dl-minus::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 1px; background: #fff; }
.dl-end { margin-top: 32px; display: grid; justify-items: center; gap: 14px; }
.dl-all { margin: 0; font-size: var(--title2); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.dl-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; }
.dl-checks li { height: 36px; padding: 0 14px 0 8px; border-radius: 18px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #0B0B0C;
  border: 1px solid rgba(11,11,12,.1); font-size: var(--detail); white-space: nowrap; }
.dl-checks svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #0B0B0C; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.dl-live .dl-pin { height: var(--screen); min-height: 0; padding-top: 104px; padding-bottom: calc(104px + var(--bar)); }
.dl-live .dl-end { position: absolute; left: 24px; right: 24px; bottom: 40px; margin: 0; }
/* Edit mode: the five tools wiggle like apps about to be deleted. */
.dl-jiggle .dl-old .dl-tile { animation: dlJiggle .26s ease-in-out infinite alternate; }
.dl-jiggle .dl-old:nth-child(odd) .dl-tile { animation-delay: -.13s; animation-direction: alternate-reverse; }
@keyframes dlJiggle { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }

@media (max-width: 900px) {
  .dl-pin { padding: 104px var(--m) 110px; }
  .dl-box { --t: min(76px, 20vw); --gap: min(30px, 7vw); padding: 26px 20px 22px; border-radius: 28px; }
  .dl-grid { row-gap: 20px; }
  .dl-app { gap: 8px; }
  .dl-name { font-size: 12px; }
  .dl-minus { width: 24px; height: 24px; left: -7px; top: -7px; }
  .dl-minus::after { left: 7px; right: 7px; top: 11px; }
  .dl-all { font-size: 18px; }
  .dl-checks { gap: 6px; }
  .dl-checks li { height: 32px; font-size: 13px; padding: 0 12px 0 6px; gap: 6px; }
  .dl-checks svg { width: 18px; height: 18px; }
  .dl-live .dl-pin { padding-top: 88px; padding-bottom: 92px; }
  .dl-live .dl-end { left: 12px; right: 12px; bottom: 22px; gap: 10px; }
}

/* ---------- Ready in three steps (owner, 16 Oct 2026; after Mews and Browserbase on Mobbin) ----------
   A statement, then three cards, each with a real picture: the app icon, the stamp-card designer, the guest's page with
   the NFC rings at the moment of the tap (orange: NFC). */
.go { padding: clamp(120px, 14vh, 180px) var(--m) clamp(100px, 12vh, 160px); }
.go-head { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px 64px; align-items: end; }
.go-title { margin: 0; max-width: 11ch; text-wrap: balance; }
.go-lead { margin: 0; }
.go-steps { max-width: var(--max); margin: clamp(48px, 7vh, 80px) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.go-step { display: grid; align-content: start; gap: 10px; }
.go-step h3 { margin: 10px 0 0; }
.go-step p { margin: 0; max-width: 34ch; }
.go-n { font-size: var(--detail); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 14px; }
.go-pic { position: relative; aspect-ratio: 1 / .92; border-radius: 28px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 100%, #FFFFFF 0%, rgba(255,255,255,0) 70%), #E9E9E5; }
.go-device { position: absolute; left: 50%; top: 11%; width: 64%; translate: -50% 0; filter: drop-shadow(0 30px 40px rgba(0,0,0,.18)); }
.go-pic-app { display: grid; place-content: center; justify-items: center; gap: 16px; }
.go-icon { width: clamp(96px, 9vw, 132px); aspect-ratio: 1; border-radius: 23%; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 24px 44px -18px rgba(0,0,0,.35); }
.go-icon img { width: 100%; height: 100%; display: block; }
.go-name { font-size: var(--detail); font-weight: 500; }
.go-ring { position: absolute; left: 50%; top: 14%; width: 120px; aspect-ratio: 1; margin: -60px 0 0 -60px; border-radius: 50%;
  border: 2px solid var(--nfc); opacity: 0; pointer-events: none; animation: goRing 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.go-ring + .go-ring { animation-delay: 1.3s; }
@keyframes goRing { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- Questions (owner, 16 Oct 2026; after Fiasco, Büro and Paraform on Mobbin) ----------
   The statement stays on the left; numbered questions open on the right. Answers stay in the page (only their height
   changes), so search engines and AI assistants read every one. */
.fq { padding: clamp(100px, 12vh, 160px) var(--m) clamp(120px, 14vh, 180px); }
.fq-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.fq-side { position: sticky; top: 120px; display: grid; gap: 22px; justify-items: start; }
.fq-title { margin: 0; max-width: 11ch; text-wrap: balance; }
.fq-lead { margin: 0; max-width: 360px; }
.fq-mail { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; background: #0B0B0C; color: #F5F5F5;
  text-decoration: none; font-size: var(--detail); font-weight: 500; transition: transform .2s var(--ease), background-color .2s; }
.fq-mail:hover { background: #2A2A2C; }
.fq-mail:active { transform: scale(.97); }
.fq-mail svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.fq-mail:hover svg { transform: translateX(3px); }
.fq-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.fq-item { border-bottom: 1px solid var(--hair); }
.fq-q { margin: 0; font: inherit; }
.fq-q button { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) 22px; align-items: start; gap: 12px; padding: 28px 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fq-q button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 8px; }
.fq-n { font-size: var(--detail); font-weight: 500; font-variant-numeric: tabular-nums; padding-top: .45em; }
.fq-text { font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.fq-ico { width: 20px; height: 20px; margin-top: .25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; transition: transform .45s var(--ease); }
.fq-v { transform-origin: 10px 10px; transition: transform .45s var(--ease); }
.fq-item.is-open .fq-v { transform: rotate(90deg); }
.fq-item.is-open .fq-ico { transform: rotate(180deg); }
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.fq-a > div { overflow: hidden; }
.fq-item.is-open .fq-a { grid-template-rows: 1fr; }
.fq-a p { margin: 0; padding: 0 34px 30px 60px; max-width: 62ch; font-size: var(--body); line-height: 1.618;
  opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .45s var(--ease); }
.fq-item.is-open .fq-a p { opacity: 1; transform: none; transition: opacity .5s .1s, transform .55s .1s var(--ease); }

@media (max-width: 900px) {
  .go-head { grid-template-columns: 1fr; gap: 18px; }
  .go-steps { grid-template-columns: 1fr; gap: 44px; }
  .go-pic { aspect-ratio: 1 / .8; border-radius: 24px; }
  .go-device { width: 58%; }
  .fq-grid { grid-template-columns: 1fr; gap: 36px; }
  .fq-side { position: static; gap: 18px; }
  .fq-q button { grid-template-columns: 34px minmax(0, 1fr) 20px; padding: 22px 0; }
  .fq-text { font-size: 19px; }
  .fq-a p { padding: 0 8px 24px 46px; font-size: 16px; }
}

/* ---------- "Mehr zu …" (owner, 16 Oct 2026): each home section links to the page that tells its whole story.
   Quiet text links in the section's own ink, Apple-style "Learn more" with an arrow that nudges on hover. ---------- */
.more { display: block; margin: 22px 0 0; }   /* follows the section's own alignment */
.more-link + .more-link { margin-left: 28px; }
.more-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--detail); font-weight: 500; color: inherit; text-decoration: none; }
.more-link span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.more-link svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.more-link:hover svg { transform: translateX(4px); }
.venue-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.venue:has(.venue-link) { cursor: pointer; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Data safety (owner, 16 Oct 2026; after Dovetail and Customer.io on Mobbin): a dark panel inside the light
   chapter, six facts in a hairline grid with thin line icons. Every sentence comes from the legal pages. ---------- */
.sf { padding: 0 var(--m) clamp(40px, 6vh, 80px); }
.sf-panel { max-width: var(--max); margin: 0 auto; border-radius: 32px; background: #0B0B0C; color: #F5F5F5; padding: clamp(40px, 6vw, 88px); }
.sf-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.sf-head h2 { margin: 0; }
.sf-head p { margin: 0; color: rgba(245,245,245,.78); }
.sf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.12); border-left: 1px solid rgba(255,255,255,.12); }
.sf-cell { padding: 34px 32px 38px; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.sf-ic { display: block; width: 48px; height: 48px; margin-bottom: 26px; color: #F5F5F5; }
.sf-ic svg { width: 100%; height: 100%; }
.sf-cell h3 { margin: 0 0 8px; font-size: var(--body); font-weight: 500; letter-spacing: -.01em; }
.sf-cell p { margin: 0; font-size: var(--detail); line-height: 1.55; color: rgba(245,245,245,.72); max-width: 34ch; }
.sf-more { margin: 34px 0 0; }
@media (max-width: 900px) {
  .sf-head { grid-template-columns: 1fr; }
  .sf-grid { grid-template-columns: 1fr; }
  .sf-cell { padding: 26px 22px 28px; display: grid; grid-template-columns: 40px 1fr; gap: 4px 18px; }
  .sf-ic { width: 40px; height: 40px; margin: 0; grid-row: span 2; }
  .sf-panel { border-radius: 26px; padding: 40px 22px; }
}
/* Badges flat like Jeton's store buttons: a thin outline, a flat icon, a small line on top and the label below. */
.sf-badges { list-style: none; margin: 0 0 clamp(40px, 6vw, 64px); padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.sf-badges li { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px 0 16px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(245,245,245,.85); color: #F5F5F5; }
.sf-badges svg { width: 28px; height: 28px; flex: none; }
.sf-badges span { display: grid; line-height: 1.05; }
.sf-badges small { font-size: 11px; letter-spacing: .01em; opacity: .85; }
.sf-badges b { font-size: 21px; font-weight: 500; letter-spacing: -.02em; margin-top: 2px; }
@media (max-width: 900px) { .sf-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sf-badges li { height: 56px; padding: 0 12px; gap: 10px; } .sf-badges b { font-size: 18px; } .sf-badges small { font-size: 10px; } }

/* Fitts's law (16 Oct 2026): every tap target at least 44 px, without changing how anything looks. The extra area is
   invisible padding taken back by a negative margin. */
.more-link { padding: 9px 0; margin: -9px 0; }
.brand { padding: 10px 0; margin: -10px 0; }
.sk-swap { position: relative; } .sk-swap::after { content: ""; position: absolute; inset: -4px; }
.sk-lang { position: relative; } .sk-lang::after { content: ""; position: absolute; inset: -2px 0; }
.rf-logo { padding: 8px 0; margin: -8px 0; }

/* Motion budget (owner, 1 Nov 2026): anything off screen stands still, and phones draw lighter glass. */
.is-away, .is-away * { animation-play-state: paused !important; }
.morph { contain: layout paint; }
@media (max-width: 900px) {
  .glass { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .light .device { filter: none; }
}

/* ---------- The waitlist pop-up (owner, 1 Nov 2026, after Veyra: "white space and elegant") ----------
   A tall, quiet card: small words at the top and bottom, nothing between them but the blurred page. */
html.wl-open { overflow: hidden; }
html.wl-open .hz { animation-play-state: paused !important; }
.is-away .wl-card, .is-away .wl::backdrop { animation-play-state: running !important; }   /* it lives in the footer, but it is on screen when open */
.wl { position: fixed; inset: 0; width: min(360px, calc(100vw - 32px)); height: min(512px, calc(100svh - 48px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: none; color: #fff; overflow: visible; }
.wl::backdrop { background: rgba(2,3,10,.46); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: wlFade .4s ease both; }
.wl-card { position: relative; height: 100%; display: flex; flex-direction: column; padding: 16px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(to bottom, rgba(0,0,0,.74) 0%, rgba(0,0,0,.62) 34%, rgba(150,165,190,.2) 68%, rgba(10,16,34,.5) 100%);
  border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); animation: wlIn .5s cubic-bezier(.2,.8,.2,1) both; }
.wl.is-closing .wl-card { animation: wlOut .2s ease-in both; }
.wl.is-closing::backdrop { animation: wlFade .2s ease-in reverse both; }
@keyframes wlIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wlOut { to { opacity: 0; transform: translateY(6px); } }
@keyframes wlFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wl::backdrop, .wl-card { animation: none; } }
@media (prefers-reduced-transparency: reduce) { .wl-card { background: #0B0F1C; backdrop-filter: none; -webkit-backdrop-filter: none; } }
.wl-mark { width: 26px; height: auto; flex: none; filter: invert(1); }
.wl-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; background: none; color: #fff; cursor: pointer; opacity: .8; transition: opacity .2s; }
.wl-x:hover { opacity: 1; }
.wl-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.wl-ask, .wl-done { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; margin-top: 16px; }
.wl-done { display: none; }
.wl.is-done .wl-ask { display: none; }
.wl.is-done .wl-done { display: flex; }
.wl-title { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.18; letter-spacing: -.02em; }
.wl-low { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }   /* some browsers size a field by its natural width: it may not stretch the card */
.wl-lead { margin: 0; max-width: 270px; font-size: 14px; line-height: 1.4; text-wrap: balance; }
.wl form { margin: 0; }
.wl-field { display: flex; align-items: center; gap: 6px; height: 44px; padding: 4px 4px 4px 12px; border-radius: 9px; background: #000; transition: box-shadow .2s; }
.wl-field:focus-within { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.wl-field input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; font-size: 16px; }   /* 16 px: iPhones don't zoom */
.wl-field input::placeholder { color: rgba(255,255,255,.6); }
.wl-field input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.wl-go, .wl-ok { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: #fff; color: #000; font: inherit; font-size: 13px; font-weight: 500; letter-spacing: -.005em; cursor: pointer; transition: opacity .2s; }
.wl-go.is-busy { opacity: .55; pointer-events: none; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-check { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; margin-top: 12px; padding: 2px 0; font-size: 12px; line-height: 1.38; cursor: pointer; }
.wl-check input { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.wl-check i { width: 18px; height: 18px; margin-top: 1px; border-radius: 4px; border: 1px solid rgba(255,255,255,.62); background: rgba(0,0,0,.35) center / 12px no-repeat; transition: background-color .15s, border-color .15s; }
.wl-check input:checked + i { background-color: #fff; border-color: #fff; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.2 6.3l2.5 2.5 5.1-5.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.wl-check input:focus-visible + i { outline: 2px solid #fff; outline-offset: 2px; }
.wl-cf:not(:empty) { margin-top: 8px; }
.wl-err { margin: 8px 0 0; font-size: 12px; line-height: 1.35; }
.wl-err:empty { margin: 0; }
.wl-fine { margin: 0; font-size: 11px; line-height: 1.4; }
.wl-fine a { color: inherit; text-underline-offset: 2px; }
.wl-sent { display: block; margin-top: 2px; font-weight: 500; overflow-wrap: anywhere; }
.wl-ok { width: 100%; height: 44px; border-radius: 9px; font-size: 14px; }
.rf-head .stores { margin-top: 20px; flex-wrap: wrap; }
.rf-head .store { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.26); }

/* ---------- The capsule (owner, 2 Nov 2026: option 3, with the idea of analogueagency.com, not its look). The app's dark glass and white button;
   it opens into itself, tightens as you scroll, names the chapter and shows progress. Pages not yet rebuilt keep their old header and dock. ---------- */
body:has(.nv) .dock { display: none; }
.top:has(.nv) { justify-content: center; padding: max(14px, env(safe-area-inset-top)) 12px 0; }
.top:has(.nv)::before { display: none; }
.nv { --nv-ink: #FFFFFF; --nv-key: rgba(255, 255, 255, .12); --nv-line: rgba(255, 255, 255, .14); --nv-cta: #FFFFFF; --nv-cta-ink: #0B0B0C;
  position: relative; width: min(480px, 100%); height: 52px; overflow: hidden; border-radius: 19px; color: var(--nv-ink);
  background: rgba(22, 22, 26, .56); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2), 0 16px 44px -22px rgba(0, 0, 0, .6);
  transition: height .6s var(--ease), width .6s var(--ease), background-color .4s, color .4s; }
.nv.is-scrolled { width: min(392px, 100%); }
.nv.is-open { width: min(480px, 100%); background: rgba(22, 22, 26, .8); }
body.head-light .nv { --nv-ink: #0B0B0C; --nv-key: rgba(11, 11, 12, .06); --nv-line: rgba(11, 11, 12, .12); --nv-cta: #0B0B0C; --nv-cta-ink: #FFFFFF; background: rgba(245, 245, 243, .72);
  box-shadow: inset 0 0 0 .5px rgba(11, 11, 12, .1), 0 16px 44px -24px rgba(0, 0, 0, .28); }
body.head-light .nv.is-open { background: rgba(245, 245, 243, .9); }
.nv-bar { height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 7px; }
/* The two keys match in size, so the logo sits with the same space on both sides (owner, 2 Nov 2026: "balance the logo"). */
.nv-toggle, .nv-cta { min-width: 92px; height: 38px; padding: 0 12px; border: 0; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -.005em; cursor: pointer; }
.nv-toggle { justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: inherit; background: var(--nv-key); transition: background-color .4s, color .4s; }
.nv-lines { position: relative; width: 16px; height: 10px; }
.nv-lines i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.nv-lines i:first-child { top: 0; }
.nv-lines i:last-child { top: 8.5px; }
.nv.is-open .nv-lines i { top: 4.25px; }
.nv.is-open .nv-lines i:first-child { transform: rotate(45deg); }
.nv.is-open .nv-lines i:last-child { transform: rotate(-45deg); }
.nv .brand { color: inherit; gap: 8px; }
.nv .brand img { width: 22px; filter: invert(1); transition: filter .4s; }
body.head-light .nv .brand img { filter: none; }
.nv-words { display: inline-grid; height: 20px; line-height: 20px; overflow: hidden; font-size: 16px; }
.nv-words > span { grid-area: 1 / 1; white-space: nowrap; transition: transform .5s var(--ease), opacity .3s; }
.nv-words > span:last-child { transform: translateY(100%); opacity: 0; }
.nv.has-chapter:not(.is-open) .nv-words > span:first-child { transform: translateY(-100%); opacity: 0; }
.nv.has-chapter:not(.is-open) .nv-words > span:last-child { transform: none; opacity: 1; }
.nv-cta { justify-self: end; background: var(--nv-cta); color: var(--nv-cta-ink); transition: background-color .4s, color .4s, transform .15s var(--ease); }
.nv-cta:active { transform: scale(.97); }
.nv-panel { max-height: calc(100svh - 92px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.nv-panel::-webkit-scrollbar { display: none; }
.nv-list { padding: 8px 8px 10px; display: grid; }
.nv-list a { height: 50px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; color: inherit; text-decoration: none;
  font-size: 26px; letter-spacing: -.025em; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .6s var(--ease), background-color .2s; }
.nv.is-open .nv-list a { opacity: 1; transform: none; }
.nv.is-open .nv-list a:nth-child(2) { transition-delay: .03s; }
.nv.is-open .nv-list a:nth-child(3) { transition-delay: .06s; }
.nv.is-open .nv-list a:nth-child(4) { transition-delay: .09s; }
.nv.is-open .nv-list a:nth-child(5) { transition-delay: .12s; }
.nv.is-open .nv-list a:nth-child(6) { transition-delay: .15s; }
.nv-list a span { transition: transform .35s var(--ease); }
.nv-list svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .35s var(--ease); }
.nv-list a:hover span, .nv-list a:focus-visible span { transform: translateX(6px); }
.nv-list a:hover svg, .nv-list a:focus-visible svg { opacity: 1; transform: none; }
.nv-list a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.nv-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 20px; padding: 12px 0 14px; border-top: .5px solid var(--nv-line); }
.nv-line { font-size: 14px; font-weight: 500; letter-spacing: -.005em; }
.nv .lang { flex: none; height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 500; }
.nv-progress { position: absolute; left: 19px; right: 19px; bottom: 0; height: 1.5px; border-radius: 1px; background: currentColor; opacity: 0; transform: scaleX(var(--p, 0)); transform-origin: left; transition: opacity .4s; }
.nv.is-scrolled:not(.is-open) .nv-progress { opacity: .85; }
a.nv-cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
/* Inside the iPhone app (assets/app-view.js): the language stays, and nothing leads to the website or the waitlist. */
html[data-app="ios"] .nv-list, html[data-app="ios"] .nv-cta { display: none; }
html[data-app="ios"] .nv-foot { border-top: 0; }
@media (max-width: 360px) { .nv-toggle, .nv-cta { min-width: 80px; padding: 0 6px; } .nv .brand { gap: 6px; } }
@media (prefers-reduced-transparency: reduce) { .nv { background: #161618; -webkit-backdrop-filter: none; backdrop-filter: none; } body.head-light .nv { background: #F5F5F3; } }
@media (prefers-reduced-motion: reduce) { .nv, .nv-list a, .nv-list a span, .nv-list svg, .nv-words > span, .nv-lines i { transition: none; } }

/* End of the capsule: the help center's build copies everything from "The capsule" to this line. */

/* Frag die Karte (owner, 2 Nov 2026). The phone uses the guest page's measures from public-profile menu-view.css, scaled with the phone:
   --u is one point on a 440 pt wide iPhone. No filter on the device and no backdrop blur here: words change inside it, and both would repaint it all. */
.ak { position: relative; padding: clamp(96px, 16vh, 180px) var(--m); overflow: clip; background: #050505; color: var(--ink); }
.ak-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: center; gap: clamp(48px, 7vw, 128px); max-width: var(--max); margin: 0 auto; }
.ak-by { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: var(--detail); font-weight: 500; }
.ak-orb { position: relative; display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8eeff, #8cc8ff 38%, #3a8bff 68%, #0038fc); animation: ak-breathe 3.2s ease-in-out infinite; }
.ak-orb::before, .ak-av::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(140,200,255,0), rgba(214,236,255,.85) 18%, rgba(140,200,255,0) 36%, rgba(124,92,255,.55) 62%, rgba(140,200,255,0) 80%); -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 70%); mask-image: radial-gradient(circle, transparent 18%, #000 70%); animation: ak-turn 4.5s linear infinite; }
.ak-orb::after, .ak-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.8), rgba(255,255,255,0) 40%); }
@keyframes ak-turn { to { transform: rotate(1turn); } }
@keyframes ak-breathe { 50% { transform: scale(1.06); } }
.ak-lead { max-width: 520px; margin: 24px 0 0; color: var(--ink-78); }
.ak-copy .t-statement { text-wrap: balance; }
.ak-qs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; margin: 32px 0 0; }
.ak-qs button { min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); font: inherit; font-size: var(--detail); font-weight: 500; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.ak-qs button:hover { background: rgba(255,255,255,.13); }
.ak-qs button[aria-pressed="true"] { background: #F5F5F7; color: #0A0A0B; }
.ak-foot-line { margin: 28px 0 0; }
.ak-note { margin: 22px 0 0; font-size: var(--caption); line-height: 1.5; color: var(--ink-78); }
.ak-stage { position: relative; width: 100%; max-width: min(400px, calc((100vh - 112px) * .49)); justify-self: center; }
.ak-stage::before { content: ""; position: absolute; inset: 8% -38%; border-radius: 50%; background: radial-gradient(closest-side, rgba(58,139,255,.26), rgba(58,139,255,0)); pointer-events: none; }
.ak-device { filter: none; }
.ak-screen { container-type: inline-size; overflow: hidden; background: #0b0b0d; }
.ak-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ak-screen::after { content: ""; position: absolute; inset: 62% 0 0; background: linear-gradient(rgba(11,11,13,0), #0b0b0d 88%); }
.ak-drawer { z-index: 1; --u: calc(100cqw / 440); position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); bottom: calc(var(--u) * 8); max-height: calc(var(--u) * 860); display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.09); border-radius: calc(var(--u) * 36); background: rgb(28,28,32); color: #F5F5F7; overflow: hidden; font-size: calc(var(--u) * 14); line-height: 1.5; }
.ak-grab { flex: none; align-self: center; width: calc(var(--u) * 38); height: calc(var(--u) * 5); margin: calc(var(--u) * 9) 0 calc(var(--u) * 4); border-radius: 99px; background: rgba(245,245,247,.25); }
.ak-close { position: absolute; z-index: 2; top: calc(var(--u) * 14); right: calc(var(--u) * 14); display: grid; place-items: center; width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%; background: rgba(255,255,255,.09); }
.ak-close svg, .ak-send svg, .ak-add svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ak-tray { display: none; flex: none; align-items: center; gap: calc(var(--u) * 10); margin: calc(var(--u) * 2) calc(var(--u) * 58) calc(var(--u) * 8) calc(var(--u) * 16); padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 20); background: rgba(255,255,255,.05); }
.has-tray .ak-tray { display: flex; animation: ak-msg .32s var(--ease) both; }
.ak-slots { display: flex; flex: none; gap: calc(var(--u) * 5); }
.ak-slot { position: relative; display: grid; place-items: center; width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: calc(var(--u) * 11); overflow: hidden; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(255,255,255,.09); color: rgba(245,245,247,.78); background: rgba(255,255,255,.05); }
.ak-slot svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ak-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ak-slot.is-filled { box-shadow: 0 0 0 calc(var(--u) * 2) #A8322A; }
.ak-slot[data-slot] img { display: none; }
.ak-slot[data-slot]::before { content: ""; width: 44%; height: 44%; border-radius: 30%; border: calc(var(--u) * 1.5) solid currentColor; }
.tray-2 .ak-slot[data-slot] { box-shadow: 0 0 0 calc(var(--u) * 2) #A8322A; }
.tray-2 .ak-slot[data-slot] img { display: block; }
.tray-2 .ak-slot[data-slot]::before { display: none; }
.ak-tray-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ak-tray-text b { font-size: calc(var(--u) * 13); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-tray-text small { font-size: calc(var(--u) * 12); color: rgba(245,245,247,.78); }
.ak-tray2 { display: none; } .tray-2 .ak-tray1 { display: none; } .tray-2 .ak-tray2 { display: inline; }
.ak-total { flex: none; padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: 999px; background: #A8322A; font-size: calc(var(--u) * 13); font-weight: 500; font-variant-numeric: tabular-nums; }
.ak-host { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 4) calc(var(--u) * 58) calc(var(--u) * 8) calc(var(--u) * 20); }
.ak-orb.is-host { width: calc(var(--u) * 40); height: calc(var(--u) * 40); box-shadow: 0 0 calc(var(--u) * 18) rgba(58,139,255,.45); }
.ak-hostname { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ak-hostname b { font-size: calc(var(--u) * 16); font-weight: 500; letter-spacing: -.2px; }
.ak-hostname small { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); color: rgba(245,245,247,.78); }
.ak-hostname small i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #A8322A; }
.ak-thread { flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 calc(var(--u) * 20); }
.ak-conv { display: none; flex-direction: column; gap: calc(var(--u) * 12); flex: none; }
.ak-conv.on { display: flex; }
.ak-q { align-self: flex-end; max-width: 82%; margin: 0; padding: calc(var(--u) * 9) calc(var(--u) * 14); border-radius: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 6) calc(var(--u) * 20); background: #F5F5F7; color: #0A0A0B; line-height: 1.4; }
.ak-a { display: flex; align-items: flex-end; gap: calc(var(--u) * 8); max-width: 96%; }
.ak-av { position: relative; flex: none; width: calc(var(--u) * 28); height: calc(var(--u) * 28); margin-bottom: calc(var(--u) * 2); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8eeff, #8cc8ff 38%, #3a8bff 68%, #0038fc); }
.ak-bubble { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 6); background: rgba(255,255,255,.09); }
.ak-text { margin: 0; overflow-wrap: anywhere; }
.ak-cards { display: flex; gap: calc(var(--u) * 8); margin: calc(var(--u) * 2) calc(var(--u) * -4) 0; padding: 0; list-style: none; }
.ak-card { flex: none; display: flex; flex-direction: column; gap: calc(var(--u) * 6); width: calc(var(--u) * 146); padding: calc(var(--u) * 6); border-radius: calc(var(--u) * 18); background: rgba(255,255,255,.05); }
.ak-photo { position: relative; display: block; height: calc(var(--u) * 96); border-radius: calc(var(--u) * 13); overflow: hidden; background: #fff; }
.ak-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ak-name { padding: 0 calc(var(--u) * 4); font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ak-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-left: calc(var(--u) * 4); font-size: calc(var(--u) * 12); font-variant-numeric: tabular-nums; }
.ak-add { display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; background: #F5F5F7; color: #0A0A0B; }
.ak-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); padding-left: calc(var(--u) * 36); }
.ak-chips span { display: flex; align-items: center; min-height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 14); border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); font-weight: 500; }
.ak-added { display: flex; align-items: center; gap: calc(var(--u) * 6); margin: 0; padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 16); background: rgba(168,50,42,.32); font-size: calc(var(--u) * 12); line-height: 1.35; }
.ak-added svg, .ak-done svg { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ak-offer { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 16); background: rgba(255,255,255,.05); }
.ak-thumb { position: relative; flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 10); overflow: hidden; }
.ak-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-oname { flex: 1; display: flex; flex-direction: column; font-weight: 500; line-height: 1.25; }
.ak-oname small { font-size: calc(var(--u) * 12); font-weight: 400; color: rgba(245,245,247,.78); }
.ak-actions { display: flex; gap: calc(var(--u) * 6); width: 100%; }
.ak-actions b { flex: 1; display: grid; place-items: center; min-height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 12); border-radius: 999px; background: rgba(255,255,255,.09); font-weight: 500; white-space: nowrap; }
.ak-actions b.is-yes { background: #F5F5F7; color: #0A0A0B; transition: transform .16s var(--ease); }
.ak-actions b.is-pressed { transform: scale(.95); }
.ak-done { display: none; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); font-weight: 500; color: #E8887F; }
.ak-offer.is-done .ak-actions, .ak-bubble .ak-actions.is-done { display: none; }
.ak-offer.is-done .ak-done { display: flex; }
.ak-cta { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); }
.ak-cta b { display: flex; align-items: center; min-height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 14); border-radius: 999px; font-weight: 500; }
.ak-staff { background: #F5F5F7; color: #0A0A0B; } .ak-join { background: #A8322A; color: #fff; }
.ak-allergy { flex: none; margin: calc(var(--u) * 8) calc(var(--u) * 20) 0; font-size: calc(var(--u) * 12); color: rgba(245,245,247,.78); }
.ak-form { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 8); margin: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 16); padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 16); border-radius: 999px; background: rgba(255,255,255,.09); }
.ak-field { flex: 1; min-width: 0; height: calc(var(--u) * 42); display: flex; align-items: center; font-size: calc(var(--u) * 16); white-space: nowrap; overflow: hidden; }
.ak-ph { color: rgba(245,245,247,.78); } .is-typing .ak-ph { display: none; }
.ak-send { flex: none; display: grid; place-items: center; width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%; background: #F5F5F7; color: #0A0A0B; opacity: .4; transition: opacity .2s; }
.is-typing .ak-send { opacity: 1; }
/* With its script the conversation appears turn by turn; without, everything just stands there. */
.ak-live .ak-t { display: none; }
.ak-live .ak-t.in { display: flex; animation: ak-msg .32s cubic-bezier(.2,.85,.25,1) both; }
.ak-live .ak-q.in { display: block; }
.ak-live .ak-bubble > :not(.ak-text) { display: none; }
.ak-live .ak-bubble.is-open > :not(.ak-text) { display: flex; animation: ak-msg .32s cubic-bezier(.2,.85,.25,1) both; }
.ak-live .ak-bubble.is-open > .ak-actions.is-done { display: none; }
.ak-t.is-dots .ak-text { height: calc(var(--u) * 21); width: calc(var(--u) * 44); background: radial-gradient(circle closest-side, rgba(245,245,247,.78) 90%, transparent) 0 50% / calc(var(--u) * 7) calc(var(--u) * 7) no-repeat, radial-gradient(circle closest-side, rgba(245,245,247,.78) 90%, transparent) 50% 50% / calc(var(--u) * 7) calc(var(--u) * 7) no-repeat, radial-gradient(circle closest-side, rgba(245,245,247,.78) 90%, transparent) 100% 50% / calc(var(--u) * 7) calc(var(--u) * 7) no-repeat; animation: ak-dots 1s ease-in-out infinite; }
@keyframes ak-dots { 50% { opacity: .4; } }
@keyframes ak-msg { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (max-width: 900px) {
  /* On phones the phone comes straight after the words, and the questions are one row to swipe right under it. */
  .ak-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ak-copy { display: contents; }
  .ak-copy > .ak-by { order: 1; } .ak-copy > h2 { order: 2; } .ak-copy > .ak-lead { order: 3; } .ak-copy > .ak-foot-line { order: 4; }
  .ak-stage { order: 5; align-self: center; max-width: min(78vw, 360px); margin-top: 44px; }
  .ak-qs { order: 6; flex-wrap: nowrap; max-width: none; margin: 24px calc(var(--m) * -1) 0; padding: 0 var(--m); overflow-x: auto; scrollbar-width: none; }
  .ak-qs::-webkit-scrollbar { display: none; }
  .ak-qs button { flex: none; }
  .ak-copy > .ak-note { order: 7; }
}
@media (prefers-reduced-motion: reduce) { .ak-orb, .ak-orb::before, .ak-av::before { animation: none; } }

/* Erstellt eure Speisekarte mit KI (home, 3 Nov 2026): three real screenshots of the app in Apple's frame, a short line under each.
   The drawn film before it was rejected as "vibe coded"; real screens only (screens-src README). */
.mr { padding: clamp(120px, 16vh, 180px) var(--m) clamp(110px, 14vh, 170px); background: #050505; color: var(--ink); }
.mr-head { max-width: 760px; margin: 0 auto; text-align: center; }
.mr-head .t-body { margin: 22px auto 0; max-width: 52ch; }
.mr-head .more { display: block; margin-top: 18px; }
.mr-steps { max-width: 1040px; margin: clamp(56px, 8vh, 96px) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.mr-step { display: grid; justify-items: center; align-content: start; gap: 26px; }
.mr-step .device { max-width: 290px; filter: drop-shadow(0 40px 50px rgba(0,0,0,.6)); }
.mr-step p { margin: 0; max-width: 30ch; text-align: center; font-size: var(--detail); line-height: 1.5; }
.mr-step p b { display: block; margin-bottom: 4px; font-size: var(--section); font-weight: 500; }
@media (max-width: 760px) {
  .mr-steps { margin-left: calc(-1 * var(--m)); margin-right: calc(-1 * var(--m)); padding: 0 var(--m) 8px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mr-steps::-webkit-scrollbar { display: none; }
  .mr-step { scroll-snap-align: center; }
}
/* One section per feature on a feature page (pages.specs_html, owner 3 Nov 2026: "a section for each feature", "with components").
   After Unify: words on one side, the real guest-menu component large on a calm stage on the other, sides alternating. */
.fxs { padding: clamp(40px, 6vh, 80px) var(--m) clamp(80px, 12vh, 140px); }
.fxs-head { max-width: var(--max); margin: 0 auto clamp(24px, 4vw, 48px); }
.fxs-head h2 { margin: 0; }
.fx { max-width: var(--max); margin: 0 auto; padding: clamp(36px, 6vh, 72px) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px); align-items: center; }
.fx + .fx { border-top: 1px solid var(--hair); }
.fx-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fx-flip .fx-copy { order: 2; }
.fx-n { display: block; margin-bottom: 18px; font-size: var(--caption); font-weight: 500; letter-spacing: .02em; color: var(--ink-78); font-variant-numeric: tabular-nums; }
.fx-copy h3 { margin: 0; }
.fx-copy p { margin: 18px 0 0; max-width: 40ch; color: var(--ink-78); }
.fx-stage { position: relative; height: clamp(420px, 42vw, 580px); border-radius: var(--r);
  background: linear-gradient(180deg, #EAEAE6 0%, #F1F1EE 100%); display: flex; align-items: center; justify-content: center; gap: 20px; overflow: hidden; }
.fx-stage img, .fx-stage video { display: block; max-width: 84%; height: auto; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 48px -16px rgba(0,0,0,.18); }
/* A tall component rises from the bottom edge: it starts below the top and the stage cuts it. */
.fx-rise { align-items: flex-start; padding-top: clamp(40px, 5vw, 64px); }
.fx-rise img, .fx-rise video { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fx-pair img { max-width: 44%; }
@media (max-width: 900px) {
  .fx, .fx-flip { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .fx-flip .fx-copy { order: 0; }
  .fx-stage { height: clamp(380px, 110vw, 460px); }
  .fx-stage img, .fx-stage video { max-width: 88%; }
  /* Two brand colours on a phone: two stacked screens, the first behind on the left, the second in front on the right. */
  .fx-pair img { position: absolute; width: 62% !important; max-width: none; }
  .fx-pair img:first-child { left: 6%; top: 28px; }
  .fx-pair img:last-child { right: 6%; top: 68px; }
}