/* Helvetic Fidelity — landing page styles.
   Colour tokens mirror the app's light theme: HF-Mob-App core-ui/.../theme/HelveticColors.kt
   (source of truth). Change them there first, then here. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cyrillic subset of Onest (Ukrainian page). The browser only downloads it when Cyrillic text appears. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* App light theme (HelveticColors.kt) */
  --cream: #FBFFF5;          /* background */
  --surface: #FFFFFF;
  --surface-2: #F3F6EC;
  --surface-3: #E8ECDF;
  --text: #0E1731;           /* textPrimary */
  --text-dim: #4A5670;       /* textSecondary */
  --text-faint: #656F84;     /* textTertiary (≈4.9:1 on cream) */
  --brand: #2C8209;          /* brand / ctaFill / positive (white text ≈4.9:1) */
  --brand-hover: #236B07;
  --brand-bright: #37A60C;   /* dark-theme brand: accents on navy */
  --navy: #224E93;           /* secondary / info */
  --navy-deep: #0E274D;
  --navy-black: #0E1731;     /* cardFace */
  --negative: #DB1F25;
  --caution: #E8A93C;
  --caution-text: #936411;
  --periwinkle: #8BA1E2;
  --periwinkle-lt: #A7BCF6;
  --border: rgba(14,23,49,0.10);  /* borderSubtle */
  --border-strong: rgba(14,23,49,0.18);

  /* On dark (app dark theme text) */
  --on-dark: #ECF1FB;
  --on-dark-dim: #A9B4CE;
  --on-dark-faint: #8D96AD;
  --dark-border: rgba(139,161,226,0.18);
  --dark-input: #0B1A34;
  --dark-surface: #15213F;

  --shadow-sm: 0 1px 2px rgba(14,23,49,0.06);
  --shadow-md: 0 6px 20px rgba(14,23,49,0.08);
  --shadow-lg: 0 24px 50px rgba(14,23,49,0.16);

  --maxw: 1160px;
  --font: "Onest", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- M3 Expressive motion tokens ----------
   Springs from Material 3's expressive motion scheme, sampled into CSS linear() easings:
   spatial = position/size/shape (damped spring with overshoot), effects = colour/opacity (no bounce).
   fast: damping 0.6, stiffness 800 · default: 0.8/380 · slow: 0.8/200 · effects: 1.0/1600.
   Browsers without linear() fall back to a plain decelerate curve. */
:root {
  --m3-spatial-fast: cubic-bezier(.34,1.56,.64,1); --m3-spatial-fast-d: 400ms;
  --m3-spatial: cubic-bezier(.22,1,.36,1);          --m3-spatial-d: 450ms;
  --m3-spatial-slow: cubic-bezier(.22,1,.36,1);     --m3-spatial-slow-d: 610ms;
  --m3-effects: cubic-bezier(.2,0,0,1);             --m3-effects-d: 180ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --m3-spatial-fast: linear(0, 0.0261, 0.0941, 0.1901, 0.3025, 0.4214, 0.5394, 0.6508, 0.7517, 0.8397, 0.9137, 0.9735, 1.0196, 1.0532, 1.0758, 1.0889, 1.0944, 1.0938, 1.0886, 1.0804, 1.0702, 1.0591, 1.0478, 1.0369, 1.027, 1.0181, 1.0106, 1.0045, 0.9996, 0.996, 0.9935, 0.9919, 0.9912, 0.991, 0.9914, 0.9921, 0.993, 0.994, 0.9951, 0.9961, 0.9971, 0.998, 0.9987, 0.9994, 0.9999, 1.0003, 1.0005, 1.0007, 1);
    --m3-spatial: linear(0, 0.0147, 0.0533, 0.1089, 0.1755, 0.2486, 0.3245, 0.4003, 0.474, 0.544, 0.6093, 0.6692, 0.7235, 0.7719, 0.8146, 0.8518, 0.8838, 0.9111, 0.9341, 0.9532, 0.9688, 0.9814, 0.9913, 0.999, 1.0049, 1.0091, 1.012, 1.0138, 1.0148, 1.0152, 1.015, 1.0144, 1.0136, 1.0126, 1.0115, 1.0104, 1.0092, 1.0081, 1.007, 1.006, 1.0051, 1.0043, 1.0035, 1.0029, 1.0023, 1.0018, 1.0014, 1.001, 1);
    --m3-spatial-slow: linear(0, 0.0147, 0.0533, 0.1089, 0.1755, 0.2486, 0.3245, 0.4003, 0.474, 0.544, 0.6093, 0.6692, 0.7235, 0.7719, 0.8146, 0.8518, 0.8838, 0.9111, 0.9341, 0.9532, 0.9688, 0.9814, 0.9913, 0.999, 1.0049, 1.0091, 1.012, 1.0138, 1.0148, 1.0152, 1.015, 1.0144, 1.0136, 1.0126, 1.0115, 1.0104, 1.0092, 1.0081, 1.007, 1.006, 1.0051, 1.0043, 1.0035, 1.0029, 1.0023, 1.0018, 1.0014, 1.001, 1);
    --m3-effects: linear(0, 0.0097, 0.0351, 0.0719, 0.1164, 0.166, 0.2184, 0.2719, 0.3253, 0.3776, 0.4281, 0.4764, 0.5221, 0.5651, 0.6052, 0.6424, 0.6768, 0.7084, 0.7374, 0.7639, 0.7881, 0.81, 0.8299, 0.8479, 0.8641, 0.8787, 0.8919, 0.9037, 0.9143, 0.9238, 0.9323, 0.9399, 0.9467, 0.9528, 0.9581, 0.9629, 0.9672, 0.971, 0.9744, 0.9773, 0.98, 0.9823, 0.9844, 0.9863, 0.9879, 0.9893, 0.9906, 0.9917, 1);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; } /* JS toggles `hidden`; component display rules must never override it */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--font); background: var(--cream); color: var(--text);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  font-feature-settings: "tnum" 0;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Focus, skip link, utilities ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.hero a:focus-visible, .hero button:focus-visible, .waitlist-panel a:focus-visible, .waitlist-panel button:focus-visible, .waitlist-panel input:focus-visible { outline-color: var(--periwinkle-lt); }
.skip-link {
  position: absolute; left: 14px; top: -60px; z-index: 60; padding: 11px 18px; border-radius: 10px;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-md);
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 14px; }
body:has(.draft-banner) nav { top: 48px; } /* preview-only banner sits above the fixed nav */
.draft-banner {
  position: sticky; top: 0; z-index: 70; padding: 8px 16px; text-align: center;
  background: var(--caution); color: var(--navy-black); font-size: 13px; font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 16px/1.2 var(--font); padding: 15px 28px; border-radius: 12px; min-height: 48px;
  background: var(--brand); color: #fff; border: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 18px rgba(44,130,9,0.22), 0 2px 4px rgba(14,23,49,0.18);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary:hover { background: var(--brand-hover); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .7; cursor: progress; transform: none; }
.btn-primary svg, .btn-ghost svg { width: 18px; height: 18px; flex: none; transition: transform .2s var(--ease); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 16px/1.2 var(--font); padding: 15px 26px; border-radius: 12px; min-height: 48px;
  background: rgba(255,255,255,0.06); color: var(--on-dark); border: 1px solid rgba(255,255,255,0.22);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.12); }

/* ---------- Nav: dark glass over the hero, light glass over cream ---------- */
nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; padding: 0 16px; }
nav .bar {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 10px 8px 16px;
  display: flex; align-items: center; gap: 20px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(14,23,49,0.45); color: var(--on-dark);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
nav.scrolled .bar {
  background: rgba(251,255,245,0.86); color: var(--text); border-color: var(--border);
  box-shadow: 0 10px 30px rgba(14,23,49,0.10);
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; font-size: 17px; }
.logo-mark { height: 22px; width: auto; display: block; flex: none; }
.logo-mark .h { fill: #E5484D; }
.logo-mark .f { fill: var(--brand-bright); }
.nav-links { display: flex; gap: 4px; margin-left: 12px; }
.nav-links a { font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 8px; opacity: .82; transition: opacity .15s, background .15s; }
.nav-links a:hover { opacity: 1; background: rgba(127,140,170,0.14); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang-dd { position: relative; }
.lang-dd summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 10px 0 11px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(127,140,170,0.35); transition: background .15s, border-color .15s;
}
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary:hover, .lang-dd[open] summary { background: rgba(127,140,170,0.16); border-color: rgba(127,140,170,0.55); }
.lang-dd summary .lang-globe { width: 16px; height: 16px; opacity: .85; }
.lang-dd summary .chev { width: 14px; height: 14px; opacity: .7; transition: transform .2s var(--ease); }
.lang-dd[open] summary .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 200px; padding: 6px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(14,23,49,0.18);
  animation: langIn .16s var(--ease);
}
@keyframes langIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lang-menu a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 9px;
  font-size: 15px; font-weight: 500; color: var(--text);
}
.lang-menu a:hover { background: var(--surface-2); }
.lang-menu .lang-code { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-faint); letter-spacing: .04em; }
.lang-menu .lang-tick { width: 15px; height: 15px; color: var(--brand); visibility: hidden; }
.lang-menu a[aria-current="true"] { font-weight: 600; }
.lang-menu a[aria-current="true"] .lang-tick { visibility: visible; }
.nav-cta {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; padding: 0 16px;
  border-radius: 10px; background: var(--brand); color: #fff; white-space: nowrap;
  transition: background .18s var(--ease);
}
.nav-cta:hover { background: var(--brand-hover); }

/* ---------- Sections ---------- */
section { padding: 104px 0; position: relative; }
.section-head { max-width: 60ch; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { display: inline-block; color: var(--navy); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.section-head h2 { margin-top: 12px; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.02em; }
.section-head p { margin-top: 16px; color: var(--text-dim); font-size: 18px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--on-dark); padding: 148px 0 96px;
  background:
    radial-gradient(60% 70% at 88% 100%, rgba(55,166,12,0.16) 0%, transparent 60%),
    radial-gradient(90% 120% at 10% 0%, #1B3A68 0%, #0E274D 45%, #0B1A34 100%);
}
.hero-flower { position: absolute; right: -140px; top: -60px; width: 720px; height: 720px; fill: #fff; opacity: .045; pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; color: #fff; }
.hero h1 span { display: block; }
.hero .sub { margin-top: 24px; max-width: 52ch; font-size: clamp(16px, 1.4vw, 19px); color: var(--on-dark-dim); }
.hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-visual { display: flex; justify-content: center; }
/* Desktop background video (source attached by app.js only on wide screens); mobile keeps the gradient. */
.hero-media, .hero-scrim { display: none; }
.video-toggle {
  position: absolute; z-index: 3; right: 24px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(14,23,49,0.55); border: 1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .15s;
}
.video-toggle:hover { background: rgba(14,23,49,0.8); }
.video-toggle[hidden] { display: none; } /* `hidden` must win over display:grid */
.video-toggle svg { width: 16px; height: 16px; }
.video-toggle .i-play, .video-toggle.paused .i-pause { display: none; }
.video-toggle.paused .i-play { display: block; }
@media (min-width: 1061px) {
  .hero { min-height: min(100vh, 920px); display: flex; align-items: center; }
  .hero > .wrap { width: 100%; }
  /* The poster is a background here (not the video's poster attribute) so phones, where the video is hidden,
     never download it; page.mjs preloads it for this same breakpoint. */
  .hero-media { display: block; position: absolute; inset: 0; background: var(--navy-black) url("/hero-poster.jpg") center / cover no-repeat; filter: saturate(0.95) brightness(0.85); }
  .hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-scrim {
    display: block; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(11,26,52,0.88) 0%, rgba(11,26,52,0.62) 42%, rgba(11,26,52,0.30) 100%),
      linear-gradient(180deg, rgba(11,26,52,0.40) 0%, rgba(11,26,52,0.10) 35%, rgba(11,26,52,0.70) 100%);
  }
  .hero-flower { display: none; }
}

/* ---------- Phone mockup ---------- */
.phone-stage { position: relative; }
/* Phones are shown rising out of their panel: cropped below the content with a soft fade, so
   there's no dead screen area. Heights are tuned per screen to end just after its content. */
.phone-crop {
  height: var(--crop, 480px); overflow: hidden; padding: 0 34px; margin: 0 -34px;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
}
.crop-hero { --crop: 540px; }
.phone {
  position: relative; width: 300px; aspect-ratio: 9 / 19; border-radius: 46px; padding: 10px;
  background: linear-gradient(160deg, #2A3550, #0A0F1C 60%);
  box-shadow: 0 28px 56px -28px rgba(6,12,28,0.6), inset 0 0 0 1px rgba(255,255,255,0.10); /* side spread < crop padding */
}
.phone-screen {
  position: relative; height: 100%; border-radius: 37px; overflow: hidden;
  background: var(--cream); color: var(--text); font-size: 13px; line-height: 1.4;
}
.ph-status { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 0; font-size: 12px; font-weight: 600; }
.ph-island { width: 86px; height: 24px; border-radius: 14px; background: #05070D; }
.ph-sys { display: flex; align-items: flex-end; gap: 2px; }
.ph-sys i { display: block; width: 3px; background: var(--text); border-radius: 1px; }
.ph-sys i:nth-child(1) { height: 5px; } .ph-sys i:nth-child(2) { height: 7px; } .ph-sys i:nth-child(3) { height: 9px; }
.ph-sys b { display: block; width: 20px; height: 10px; margin-left: 5px; border-radius: 3px; border: 1.5px solid var(--text); background: linear-gradient(90deg, var(--text) 70%, transparent 70%); background-clip: content-box; padding: 1px; }
.ph-body { padding: 14px 18px 18px; }
.ph-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ph-back { width: 20px; height: 20px; color: var(--text); }
.ph-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ph-sub { color: var(--text-dim); font-size: 12px; margin: 2px 0 12px; }
.ph-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 4px 14px; box-shadow: var(--shadow-sm); }
.ph-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ph-row:last-child { border-bottom: 0; }
.ph-row-col { flex-direction: column; gap: 2px; }
.ph-label { color: var(--text-faint); font-size: 12px; }
.ph-val { font-weight: 600; font-size: 12.5px; text-align: right; }
.ph-row-col .ph-val { text-align: left; }
.ph-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ph-small { font-size: 11.5px; }
.ph-qr-svg { width: 96px; height: 96px; flex: none; border-radius: 6px; }
.ph-actions { display: flex; gap: 8px; }
.ph-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 12px; font-weight: 600; font-size: 12.5px; border: 1px solid var(--border-strong); color: var(--text); background: var(--surface); }
.ph-btn svg { width: 15px; height: 15px; }
.ph-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.ph-toast {
  position: absolute; left: -64px; bottom: 36px; width: 326px; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px; background: var(--surface); color: var(--text);
  box-shadow: 0 18px 40px rgba(6,12,28,0.35);
}
.ph-toast-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(44,130,9,0.12); color: var(--brand); }
.ph-toast-ico svg { width: 18px; height: 18px; }
.ph-toast-txt { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.ph-toast-txt b { color: var(--text); font-size: 13px; white-space: nowrap; }
.ph-toast-amt { margin-left: auto; flex: none; display: inline-grid; justify-items: end; font-weight: 700; color: var(--brand); font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ph-toast-amt > span { grid-area: 1 / 1; }
.ph-toast-amt .amt-size { visibility: hidden; }
.ph-toast-txt { flex: 1; }

/* ---------- At launch: grouped list ---------- */
.launch { padding-top: 104px; }
.launch .section-head { max-width: none; }
@media (min-width: 861px) { .launch .section-head h2 { white-space: nowrap; } }
.launch-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.group { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 26px 24px 10px; box-shadow: var(--shadow-sm); }
.group-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.group-ico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: rgba(44,130,9,0.10); color: var(--brand); }
.group-ico svg { width: 21px; height: 21px; }
.group-head h3 { font-size: 20px; letter-spacing: -0.01em; }
.group-list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.group-list li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; }
.group-list li + li { border-top: 1px solid var(--border); }
.group-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.group-list b { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.group-list li > span:last-child > span { color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
/* "Get paid" tile: payment part of a Swiss QR-bill */
.qb-mock { margin-top: 16px; padding: 16px 14px 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.qb-slip { position: relative; padding: 18px 16px 16px; border-radius: 4px; background: #fff; border-top: 1.5px dashed var(--text-faint); box-shadow: var(--shadow-md); color: var(--navy-black); }
.qb-title { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.qb-h { font-weight: 700; font-size: 10.5px; margin-bottom: 1px; }
.qb-amt { display: flex; gap: 16px; margin-top: 10px; }
.qb-amt > div { display: flex; flex-direction: column; }
.qb-box { width: 76px; height: 24px; border: 1.5px solid var(--navy-black); border-image: linear-gradient(90deg, var(--navy-black) 18%, transparent 18% 82%, var(--navy-black) 82%) 1; }

/* Hero phone: the Get-paid sheet shows the same QR-bill payment part as the launch tile */
.ph-slip { position: relative; margin: 10px 0 12px; padding: 14px 14px 12px; background: #fff; border-radius: 4px; border-top: 1.5px dashed var(--text-faint); box-shadow: var(--shadow-md); color: var(--navy-black); }
.ph-slip .qb-title { font-size: 12.5px; margin-bottom: 8px; }
.ph-slip-top { display: flex; align-items: flex-start; gap: 14px; }
.ph-slip-top .ph-qr-svg { width: 104px; height: 104px; flex: none; border-radius: 0; }
.ph-slip-amt { flex-direction: column; gap: 8px; margin-top: 0; font-size: 12px; }
.ph-slip-amt .qb-box { width: 70px; height: 22px; }
.ph-slip-acct { display: flex; flex-direction: column; margin-top: 10px; font-size: 11.5px; line-height: 1.45; }
.ph-slip-acct .ph-mono { white-space: nowrap; }

/* "Set goals" tile: the app's goal card (tinted, ring around the icon) + contribution sources */
.goal-mock { margin-top: 16px; padding: 12px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.goal-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #E4F2D8; color: #1F5C06; }
.goal-ring { position: relative; width: 58px; height: 58px; flex: none; }
.goal-ring svg { width: 100%; height: 100%; display: block; }
.goal-track { fill: none; stroke: rgba(44,130,9,0.20); stroke-width: 5; }
.goal-prog { fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round; }
.goal-ico { position: absolute; inset: 11px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; }
.goal-ico svg { width: 18px; height: 18px; }
.goal-txt { display: flex; flex-direction: column; line-height: 1.2; }
.goal-name { font-weight: 600; font-size: 15px; }
.goal-pct { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0; }
.goal-amt { font-size: 12.5px; font-variant-numeric: tabular-nums; color: #2F6B14; }
.goal-hist { display: flex; flex-direction: column; margin-top: 6px; }
.goal-hist-title { color: var(--text-faint); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 2px 6px; }
.goal-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 14px; color: var(--text); }
.goal-row + .goal-row { border-top: 1px solid var(--border); }
.goal-row b { margin-left: auto; color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.goal-row-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: rgba(44,130,9,0.10); color: var(--brand); }
.goal-row-ico svg { width: 15px; height: 15px; }
.group-note { margin: 12px 2px 14px; color: var(--text-dim); font-size: 14.5px; line-height: 1.55; }

/* "Know your spend" tile: purchase-tracking check-in on a categorised online card payment */
.pt-mock { margin-top: 16px; padding: 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.pt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.pt-title { font-weight: 700; font-size: 15px; }
.pt-badge { padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(232,169,60,0.18); color: var(--caution-text); white-space: nowrap; }
.pt-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.pt-ico { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(34,78,147,0.10); color: var(--navy); }
.pt-ico svg { width: 18px; height: 18px; }
.pt-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pt-txt b { font-size: 14.5px; font-weight: 600; }
.pt-cat { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-size: 11.5px; font-weight: 600; }
.pt-amt { margin-left: auto; font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-ask { margin-top: 12px; padding: 0 2px; }
.pt-prompt { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.pt-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-opt { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; font-size: 13px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-dim); }
.pt-opt svg { width: 13px; height: 13px; }
.pt-on { border-color: var(--brand); background: rgba(44,130,9,0.10); color: var(--brand); font-weight: 600; }

/* Fourth tile: debit card in front of the account it spends from */
.group-card { display: flex; flex-direction: column; }
.dc-stage { position: relative; height: 290px; margin: 20px 0 4px; }
.dc-account {
  position: absolute; padding: 16px 18px; border-radius: 18px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.dc-acc-savings { left: 0; top: 0; width: 70%; height: 150px; background: var(--surface-3); z-index: 1; }
.dc-acc-everyday { left: 9%; top: 52px; width: 64%; height: 170px; z-index: 2; }
.dc-acc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dc-acc-name { font-weight: 700; font-size: 15px; }
.dc-acc-label { margin-top: 8px; color: var(--text-faint); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dc-acc-bal { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dc-acc-savings .dc-acc-bal { font-size: 15px; color: var(--text-dim); }
.dc-acc-iban { color: var(--text-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dc-acc-linked { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dc-acc-linked i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.dc-card {
  position: absolute; z-index: 3; right: 0; bottom: 0; width: 56%; aspect-ratio: 85.6 / 54; border-radius: 16px; overflow: hidden;
  color: #fff; padding: 16px 18px; display: flex; flex-direction: column;
  background: linear-gradient(150deg, #1B3A68 0%, #12294C 48%, #0B1A34 100%);
  box-shadow: 0 22px 40px -14px rgba(11,26,52,0.55), inset 0 1px 0 rgba(255,255,255,0.14);
  transform: rotate(-4deg);
}
.dc-sheen { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.10) 48%, transparent 60%); pointer-events: none; }
.dc-brand { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: .14em; line-height: 1.15; }
.dc-mark { height: 16px; width: auto; }
.dc-num { margin-top: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: 2px; }
.dc-type { margin-top: 4px; font-size: 10px; letter-spacing: .16em; color: var(--periwinkle-lt); }
.points { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; color: var(--text); }
.tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; background: rgba(44,130,9,0.12); color: var(--brand); }
.tick svg { width: 12px; height: 12px; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; width: 20px; height: 20px; color: var(--navy); transition: transform .25s var(--ease); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .ans { color: var(--text-dim); font-size: 15px; line-height: 1.65; }
.faq .ans b { color: var(--text); font-weight: 600; }

/* ---------- Waitlist ---------- */
/* The page's closing band: full-width navy that flows on into the footer (see "Waitlist band" below) */
.waitlist-section { position: relative; overflow: hidden; isolation: isolate; padding: 112px 0 76px; color: var(--on-dark);
  background: radial-gradient(70% 90% at 50% 0%, #1B3A68 0%, #0E274D 70%); }
.waitlist-panel { display: flex; flex-direction: column; align-items: center; text-align: center; }
.waitlist-pitch h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
.waitlist-pitch > p { margin: 16px auto 0; max-width: 40ch; color: var(--on-dark-dim); font-size: 18px; }
.points-dark li { color: var(--on-dark); }
.points-dark .tick { background: rgba(55,166,12,0.18); color: var(--brand-bright); }
form.waitlist { display: flex; flex-direction: column; gap: 12px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--on-dark-dim); margin-bottom: -4px; }
.field input {
  width: 100%; padding: 14px 16px; min-height: 50px; border-radius: 10px; font: 16px var(--font);
  background: var(--dark-input); border: 1px solid var(--dark-border); color: var(--on-dark); outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus { border-color: var(--brand-bright); box-shadow: 0 0 0 3px rgba(55,166,12,0.25); }
.field input::placeholder { color: var(--on-dark-faint); }
.field input[aria-invalid="true"] { border-color: #FF6B61; }
.field-error { margin-top: 6px; font-size: 13px; color: #FF8A82; }
fieldset.choices { border: 0; margin-top: 6px; min-width: 0; }
fieldset.choices legend { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--on-dark-dim); }
fieldset.choices legend .opt { font-weight: 400; color: var(--on-dark-faint); }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 22px;
  border: 1px solid var(--dark-border); background: var(--dark-input); color: var(--on-dark-dim); font-size: 14.5px;
  transition: border-color .15s, background .15s, color .15s;
}
.choice:hover span { border-color: rgba(255,255,255,0.32); }
.choice input:checked + span { border-color: var(--brand-bright); background: rgba(55,166,12,0.18); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--periwinkle-lt); outline-offset: 2px; }
form.waitlist .btn-primary { width: 100%; margin-top: 10px; }
.form-note { margin-top: 12px; min-height: 20px; font-size: 14px; }
.form-note.ok { color: #7BD653; }
.form-note.err { color: #FF8A82; }
.privacy { margin-top: 6px; color: var(--on-dark-faint); font-size: 13px; }
.privacy a { color: var(--on-dark-dim); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */

/* ---------- Legal shells ---------- */
.legal-page nav .bar { background: rgba(251,255,245,0.9); color: var(--text); border-color: var(--border); }
.legal { max-width: 760px; padding-top: 140px; padding-bottom: 40px; }
.legal-back { display: inline-block; color: var(--navy); font-weight: 600; font-size: 14px; margin-bottom: 18px; }
.legal h1 { font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.02em; line-height: 1.1; }
.legal-intro { margin-top: 12px; color: var(--text-dim); font-size: 17px; }
.draft-box { margin: 28px 0 8px; padding: 16px 18px; border-radius: 12px; background: #FFF6E3; border: 1px solid rgba(232,169,60,0.5); color: var(--caution-text); display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.legal-sec { padding: 22px 0; border-bottom: 1px solid var(--border); }
.legal-sec h2 { font-size: 20px; letter-spacing: -0.01em; }
.legal-sec p { margin-top: 8px; color: var(--text-dim); }
.legal-sec ul { margin-top: 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--text-dim); list-style: disc; }
.legal-sec li::marker { color: var(--brand); }
.legal-sec li b { color: var(--text); }
.legal-sec a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
mark.todo { background: #FFF1CC; color: var(--caution-text); padding: 2px 6px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .nav-links { display: none; }
  .hero-grid, .faq-grid { grid-template-columns: 1fr; }
  .hero-visual { justify-content: flex-start; padding-left: 44px; }
  .faq-side { position: static; }
}
@media (max-width: 860px) {
  section { padding: 80px 0; }
  .hero { padding: 124px 0 72px; }
  .launch-groups { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  nav { padding: 0 10px; }
  nav .bar { gap: 10px; padding: 6px 6px 6px 12px; }
  nav .logo-txt { display: none; }
  .qb-slip { padding: 16px 12px 14px; }
  .dc-stage { height: 270px; }
  .dc-account { padding: 13px 14px; }
  .dc-acc-savings { width: 86%; height: 128px; }
  .dc-acc-everyday { left: 6%; top: 46px; width: 80%; height: 160px; }
  .dc-acc-bal { font-size: 21px; }
  .dc-acc-savings .dc-acc-bal { font-size: 13.5px; }
  .dc-card { width: 68%; padding: 13px 14px; }
  .dc-num { font-size: 11.5px; letter-spacing: 1px; white-space: nowrap; }
  .hero-flower { opacity: .03; right: -260px; top: 40px; }
  .hero-visual { padding-left: 24px; }
  .phone { width: 264px; border-radius: 40px; }
  .phone-screen { border-radius: 31px; }
  .ph-toast { left: 50%; bottom: -22px; width: min(300px, calc(100vw - 40px)); transform: translateX(-50%); }
  .hero-visual .phone-stage { margin-bottom: 26px; }
  .ph-toast-txt span { display: none; }
  .ph-row-col .ph-val { font-size: 11.5px; letter-spacing: 0; }
  .crop-hero { --crop: 505px; }
}

/* ---------- At-launch tile animations ----------
   Tiles get .in when they scroll into view (app.js), which plays each mockup's "extend" motion;
   on hover-capable screens the tile lifts and the mockup extends a bit further. Gated on html.js so
   no-JS and reduced-motion users (who get .in immediately) always see the finished state. */
.group { transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .6s var(--ease); }
@media (hover: hover) {
  .group:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,23,49,0.12); }
}
/* QR-bill: slip settles into place, scan line sweeps the code */
.qb-slip { transition: transform .6s var(--ease), box-shadow .3s var(--ease); }
html.js .group:not(.in) .qb-slip { transform: translateY(14px) rotate(-1.5deg); }
@media (hover: hover) { .group:hover .qb-slip { transform: translateY(-3px) rotate(-.6deg); box-shadow: var(--shadow-lg); } }
.qb-qr { position: relative; display: block; flex: none; overflow: hidden; }
.qb-qr::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: -10%; height: 3px; border-radius: 2px; opacity: 0;
  background: var(--brand-bright); box-shadow: 0 0 10px 2px rgba(55,166,12,0.45);
}
.group.in .qb-qr::after { animation: qbScan 1.4s var(--ease) .25s 1 both; }
@media (hover: hover) { .group:hover .qb-qr::after { animation: qbScan 1.4s var(--ease) 0s 1 both; } }
@keyframes qbScan { 0% { top: -5%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
/* Goal: ring fills to its share, contributions slide in */
.goal-prog { transition: stroke-dashoffset 1.3s var(--ease) .2s; }
html.js .group:not(.in) .goal-prog, .group.collapsed .goal-prog { stroke-dashoffset: 125.7; }
.goal-row { transition: transform .5s var(--ease), opacity .5s var(--ease); }
.goal-row:nth-child(2) { transition-delay: .15s; }
html.js .group:not(.in) .goal-row, .group.collapsed .goal-row { transform: translateX(-10px); opacity: 0; }
@media (hover: hover) { .group:hover .goal-card { transform: scale(1.015); } }
.goal-card { transition: transform .35s var(--ease); }
/* Purchase check-in: "I'm returning it" gets picked */
.pt-on, .pt-on svg { transition: background .35s var(--ease) .7s, border-color .35s var(--ease) .7s, color .35s var(--ease) .7s, transform .35s var(--ease) .7s; }
html.js .group:not(.in) .pt-on, .group.collapsed .pt-on { border-color: var(--border-strong); background: var(--surface); color: var(--text-dim); font-weight: 400; }
html.js .group:not(.in) .pt-on svg, .group.collapsed .pt-on svg { transform: scale(0); }
.pt-item { transition: transform .35s var(--ease); }
@media (hover: hover) { .group:hover .pt-item { transform: translateY(-2px); } }
/* Card over accounts: the card slides out from behind; on hover the stack fans further */
.dc-card, .dc-acc-savings, .dc-acc-everyday { transition: transform .7s var(--ease), box-shadow .35s var(--ease); }
html.js .group:not(.in) .dc-card, .group.collapsed .dc-card { transform: translate(-34%, -12%) rotate(0deg); }
html.js .group:not(.in) .dc-acc-savings, .group.collapsed .dc-acc-savings { transform: translate(6%, 10%); }
@media (hover: hover) {
  .group:hover .dc-card { transform: translate(8px, 6px) rotate(-7deg); }
  .group:hover .dc-acc-savings { transform: translate(-6px, -8px); }
  .group:hover .dc-acc-everyday { transform: translate(-4px, -2px); }
}

/* ---------- Button sizes: one system ----------
   48px on desktop, 44px on phones (still a full touch target); hero pair sits side by side. */
.btn-primary, .btn-ghost { min-height: 48px; padding: 0 22px; font-size: 15.5px; border-radius: 12px; }
.btn-primary svg, .btn-ghost svg { width: 17px; height: 17px; }
form.waitlist .btn-primary { min-height: 50px; }
@media (max-width: 520px) {
  .btn-primary, .btn-ghost { min-height: 44px; padding: 0 16px; font-size: 14.5px; gap: 8px; border-radius: 11px; --pill: 22px; }
  .nav-cta { min-height: 38px; padding: 0 12px; font-size: 13px; border-radius: 9px; --pill: 19px; }
  .lang-dd summary { min-height: 38px; padding: 0 8px 0 9px; --pill: 19px; }
  form.waitlist .btn-primary { min-height: 48px; font-size: 15.5px; --pill: 24px; }
}

/* ---------- Mobile pass ---------- */
@media (max-width: 860px) {
  section { padding: 64px 0; }
  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: clamp(28px, 7.4vw, 34px); }
  .section-head p { font-size: 16.5px; }
  .launch { padding-top: 64px; }
  .launch-groups { gap: 14px; }
  .group { padding: 20px 16px 6px; border-radius: 18px; }
  .group-head { padding-bottom: 14px; }
  .group-head h3 { font-size: 18px; }
  .group-ico { width: 38px; height: 38px; }
  .qb-mock, .goal-mock, .pt-mock { padding: 10px; border-radius: 14px; }
  .pt-txt b { font-size: 13.5px; white-space: nowrap; }
  .pt-amt { font-size: 13.5px; }
  .group-note { font-size: 14px; }
  .faq-grid { gap: 28px; }
  .faq summary { padding: 16px 18px; font-size: 15.5px; }

}
@media (max-width: 520px) {
  .hero { padding: 108px 0 40px; }
  .hero .sub { margin-top: 18px; font-size: 16px; }
  .hero-cta { margin-top: 24px; gap: 10px; flex-wrap: nowrap; }
  .hero-cta .btn-primary, .hero-cta .btn-ghost { flex: 0 1 auto; }
  .hero-visual { justify-content: center; padding-left: 0; margin-top: 8px; }
  .phone { width: 252px; border-radius: 38px; padding: 8px; }
  .phone-screen { border-radius: 31px; }
  .crop-hero { --crop: 440px; }
  .ph-slip-top .ph-qr-svg { width: 88px; height: 88px; }
  .ph-slip-acct { font-size: 10.5px; }
}


/* ---------- Hero phone animation (see app.js "Hero phone") ----------
   .intro plays once (copy fades up); .play runs the phone story once (~4.6 s) and it ends on a
   still frame — no idle loop, so there's no automatic motion longer than 5 s (WCAG 2.2.2).
   Individual translate/scale properties are used so they compose with the tilt transform and
   with the mobile toast's centring transform. */
.hero .phone-stage { transition: transform .5s var(--ease); transform-style: preserve-3d; will-change: transform; }
.hero.intro .hero-copy > * { animation: heroUp .8s var(--ease) both; }
.hero.intro .hero-copy > :nth-child(2) { animation-delay: .1s; }
.hero.intro .hero-copy > :nth-child(3) { animation-delay: .2s; }
.hero.play .phone-crop { animation: phIn .9s var(--ease) both; }
.hero.play .ph-slip { animation: slipPrint .8s var(--ease) .5s both; }
.hero.play .ph-slip .qb-qr::after { animation: qbScan 1.3s var(--ease) 1.2s 1 both; }
.hero.play .ph-btn-primary { position: relative; animation: tapPress .35s ease 2.45s both; }
.hero.play .ph-btn-primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px var(--brand-bright);
  opacity: 0; animation: tapRing .8s ease-out 2.5s both;
}
.hero.play .ph-toast { animation: toastIn .65s var(--ease) 3s both; }
.hero.play .ph-toast-ico { animation: iconPop .55s var(--ease) 3.35s both; }
@keyframes heroUp { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes phIn { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
@keyframes slipPrint { from { clip-path: inset(-24px -24px 100% -24px); translate: 0 -6px; } to { clip-path: inset(-24px -24px -24px -24px); translate: 0 0; } }
@keyframes tapPress { 0%, 100% { scale: 1; } 45% { scale: .94; } }
@keyframes tapRing { 0% { opacity: .7; scale: 1; } 100% { opacity: 0; scale: 1.25; } }
@keyframes toastIn { from { opacity: 0; translate: 0 26px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes iconPop { 0% { scale: .3; } 60% { scale: 1.18; } 100% { scale: 1; } }


/* ---------- FAQ interactions (see app.js "FAQ") ---------- */
.faq-grid > * { min-width: 0; } /* the chip row scrolls on phones; don't let it widen the column */
.faq-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.faq-chip {
  min-height: 40px; padding: 0 16px; border-radius: 20px; cursor: pointer; font: 600 14px/1 var(--font);
  background: var(--surface); color: var(--text-dim); border: 1px solid var(--border-strong);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.faq-chip:hover { border-color: var(--navy); color: var(--text); }
.faq-chip:active { transform: scale(.97); }
.faq-chip[aria-pressed="true"] { background: var(--navy-black); border-color: var(--navy-black); color: #fff; }
.faq-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.faq details[hidden] { display: none; }
.faq summary { transition: background .2s var(--ease); }
.faq summary:hover { background: var(--surface-2); }
.faq .chev-wrap {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--navy); transition: background .25s var(--ease), color .25s var(--ease), transform .3s var(--ease);
}
.faq .chev-wrap .chev { width: 18px; height: 18px; color: currentColor; }
.faq summary:hover .chev-wrap { transform: scale(1.06); }
.faq details[open] .chev-wrap { background: var(--brand); color: #fff; }
.faq details[open] summary { color: var(--text); }
.faq details { transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.faq details[open] { border-color: rgba(44,130,9,0.35); box-shadow: 0 10px 28px rgba(14,23,49,0.08); }
.faq .ans { overflow: hidden; padding: 0; }
.faq .ans-inner { padding: 0 22px 20px; }
.faq details:target summary { background: var(--surface-2); }
@media (max-width: 860px) {
  .faq .ans-inner { padding: 0 18px 18px; }
  .faq-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px; scrollbar-width: none; }
  .faq-filters::-webkit-scrollbar { display: none; }
  .faq-chip { flex: none; }
}


/* ---------- Waitlist interactions (see app.js "Waitlist") ---------- */
.wl-progress { margin-bottom: 6px; }
.wl-stepno { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--periwinkle-lt); }
.wl-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wl-bar i { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.14); transition: background .35s var(--ease); }
.wl-bar i.on { background: var(--brand-bright); }
.wl-step { display: flex; flex-direction: column; gap: 12px; }
.wl-step[hidden], .wl-nav[hidden], .wl-progress[hidden], .wl-back[hidden] { display: none; } /* `hidden` must beat display:flex */
form.waitlist.stepped .wl-step { min-height: 200px; }
.wl-nav, .wl-submit { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wl-nav .btn-primary, .wl-submit .btn-primary { margin-top: 0; }
.wl-nav .wl-next, .wl-submit .btn-primary { flex: 1; }
.wl-back {
  min-height: 48px; padding: 0 18px; border-radius: 12px; cursor: pointer; font: 600 15px var(--font);
  background: transparent; color: var(--on-dark); border: 1px solid rgba(255,255,255,0.24); transition: background .2s, border-color .2s;
}
.wl-back:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); }
.wl-back:focus-visible { outline: 2px solid var(--periwinkle-lt); outline-offset: 3px; }
.wl-note { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--on-dark); background: rgba(139,161,226,0.12); border: 1px solid rgba(139,161,226,0.28); }
.field .field-ok {
  position: absolute; right: 12px; top: 13px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-bright); color: #fff;
  opacity: 0; transform: scale(.5); transition: opacity .2s var(--ease), transform .3s var(--ease); pointer-events: none;
}
.field .field-ok svg { width: 13px; height: 13px; }
.field.valid .field-ok { opacity: 1; transform: none; }
.field.valid input { border-color: rgba(55,166,12,0.55); padding-right: 46px; }
.choice input:checked + span { animation: pillPop .28s var(--ease); }
@keyframes pillPop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.btn-primary.loading { position: relative; color: transparent; }
.btn-primary.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wl-success { padding: 28px 8px; text-align: center; color: var(--on-dark); outline: none; }
.wl-success h3 { margin-top: 14px; font-size: 26px; color: #fff; letter-spacing: -0.01em; }
.wl-success p { margin-top: 8px; color: var(--on-dark-dim); }
.wl-success-check { width: 72px; height: 72px; }
.wl-success-check circle { fill: none; stroke: var(--brand-bright); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .7s var(--ease) forwards; }
.wl-success-check path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s var(--ease) .55s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (max-width: 520px) {
  form.waitlist.stepped .wl-step { min-height: 0; }
  .wl-back { min-height: 44px; padding: 0 14px; font-size: 14.5px; --pill: 22px; }
}


/* ---------- M3 Expressive: springs + shape morphing everywhere ----------
   Spatial props (transform, radius, size) ride springs; colours/opacity use the effects curve.
   Shape morph: controls go pill-shaped on hover, squish to a tighter radius on press, and
   selected chips/pills morph from pill to rounded square. */
/* Scroll reveal on a slow spatial spring */
.rv { transform: translateY(28px) scale(.985); transition: opacity .5s var(--m3-effects), transform var(--m3-spatial-slow-d) var(--m3-spatial-slow); }
.btn-primary, .btn-ghost, .nav-cta, .wl-back, .lang-dd summary {
  transition:
    transform var(--m3-spatial-fast-d) var(--m3-spatial-fast),
    border-radius var(--m3-spatial-d) var(--m3-spatial),
    background-color var(--m3-effects-d) var(--m3-effects), border-color var(--m3-effects-d) var(--m3-effects),
    color var(--m3-effects-d) var(--m3-effects), box-shadow var(--m3-spatial-d) var(--m3-spatial);
}
.btn-primary, .btn-ghost, .wl-back { --pill: 24px; }
.nav-cta { --pill: 22px; }
.lang-dd summary { --pill: 20px; }
form.waitlist .btn-primary { --pill: 25px; }
.btn-primary:hover, .btn-ghost:hover, .nav-cta:hover, .wl-back:hover,
.btn-primary:focus-visible, .btn-ghost:focus-visible, .nav-cta:focus-visible, .wl-back:focus-visible { border-radius: var(--pill); }
.btn-primary:active, .btn-ghost:active, .nav-cta:active, .wl-back:active, .lang-dd summary:active { transform: scale(.95); border-radius: 8px; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:hover:active { transform: translateY(0) scale(.95); }
.btn-primary:hover svg, .next-foot a:hover svg { transition: transform var(--m3-spatial-fast-d) var(--m3-spatial-fast); }
.lang-dd summary:hover, .lang-dd[open] summary, .lang-dd summary:focus-visible { border-radius: var(--pill); }

/* Chips & choice pills: pill at rest, rounded square when selected */
.faq-chip, .choice span {
  transition:
    transform var(--m3-spatial-fast-d) var(--m3-spatial-fast),
    border-radius var(--m3-spatial-d) var(--m3-spatial),
    background-color var(--m3-effects-d) var(--m3-effects), border-color var(--m3-effects-d) var(--m3-effects),
    color var(--m3-effects-d) var(--m3-effects);
}
.faq-chip[aria-pressed="true"] { border-radius: 12px; }
.faq-chip:active { transform: scale(.94); }
.choice input:checked + span { border-radius: 12px; animation: pillPop var(--m3-spatial-fast-d) var(--m3-spatial-fast); }
.choice:active span { transform: scale(.95); }

/* Cards: spring lift; icons morph toward a circle and tilt */
.group, .step {
  transition: transform var(--m3-spatial-d) var(--m3-spatial), box-shadow var(--m3-spatial-d) var(--m3-spatial),
    border-color var(--m3-effects-d) var(--m3-effects), opacity .5s var(--m3-effects);
}
@media (hover: hover) {
  .group:hover { transform: translateY(-6px); }
  .step:hover { transform: translateY(-4px); }
}
.group-ico, .step-num, .pt-ico, .goal-row-ico {
  transition: border-radius var(--m3-spatial-d) var(--m3-spatial), transform var(--m3-spatial-fast-d) var(--m3-spatial-fast);
}
@media (hover: hover) {
  .group:hover .group-ico, .step:hover .step-num { border-radius: 50%; transform: rotate(-8deg) scale(1.06); }
}

/* FAQ: chevron container morphs circle -> rounded square when open; chevron flips on a spring */
.faq .chev-wrap {
  transition: border-radius var(--m3-spatial-d) var(--m3-spatial), transform var(--m3-spatial-fast-d) var(--m3-spatial-fast),
    background-color var(--m3-effects-d) var(--m3-effects), color var(--m3-effects-d) var(--m3-effects);
}
.faq details[open] .chev-wrap { border-radius: 10px; }
.faq summary .chev { transition: transform var(--m3-spatial-fast-d) var(--m3-spatial-fast); }
.faq details { transition: border-color var(--m3-effects-d) var(--m3-effects), box-shadow var(--m3-spatial-d) var(--m3-spatial); }

/* Language menu springs open from its corner */
.lang-menu { transform-origin: top right; animation: langIn var(--m3-spatial-fast-d) var(--m3-spatial-fast); }
@keyframes langIn { from { opacity: 0; transform: scale(.88) translateY(-6px); } to { opacity: 1; transform: none; } }
.lang-menu a { transition: background-color var(--m3-effects-d) var(--m3-effects), border-radius var(--m3-spatial-d) var(--m3-spatial); }
.lang-menu a:hover { border-radius: 14px; }


/* Launch-tile mockups */
.qb-slip { transition: transform var(--m3-spatial-d) var(--m3-spatial), box-shadow var(--m3-spatial-d) var(--m3-spatial); }
.goal-prog { transition: stroke-dashoffset 1.2s var(--m3-spatial-slow) .2s; }
.goal-card, .pt-item { transition: transform var(--m3-spatial-fast-d) var(--m3-spatial-fast); }
.goal-row { transition: transform var(--m3-spatial-d) var(--m3-spatial), opacity var(--m3-effects-d) var(--m3-effects); }
.dc-card, .dc-acc-savings, .dc-acc-everyday { transition: transform var(--m3-spatial-slow-d) var(--m3-spatial-fast), box-shadow var(--m3-spatial-d) var(--m3-spatial); }

/* Hero: phone and toast arrive on springs; tilt follows the cursor without wobble (effects curve) */
.hero .phone-stage { transition: transform var(--m3-spatial-d) var(--m3-effects); }
.hero.play .phone-crop { animation: phIn var(--m3-spatial-slow-d) var(--m3-spatial-slow) both; }
.hero.play .ph-toast { animation: toastIn var(--m3-spatial-fast-d) var(--m3-spatial-fast) 3s both; }
.hero.play .ph-toast-ico { animation: iconPop var(--m3-spatial-fast-d) var(--m3-spatial-fast) 3.35s both; }
.hero.play .ph-btn-primary { animation: tapPress var(--m3-spatial-fast-d) var(--m3-spatial-fast) 2.45s both; }
@keyframes tapPress { 0% { scale: 1; border-radius: 12px; } 35% { scale: .92; border-radius: 20px; } 100% { scale: 1; border-radius: 12px; } }
@keyframes iconPop { from { scale: .3; border-radius: 50%; } to { scale: 1; border-radius: 10px; } }

/* Waitlist: progress segments fill on a spring; valid-email check pops */
.wl-bar i { position: relative; overflow: hidden; background: rgba(255,255,255,0.14); }
.wl-bar i::after { content: ""; position: absolute; inset: 0; background: var(--brand-bright); transform: scaleX(0); transform-origin: left; transition: transform var(--m3-spatial-d) var(--m3-spatial); }
.wl-bar i.on { background: rgba(255,255,255,0.14); }
.wl-bar i.on::after { transform: none; }
.field .field-ok { transition: opacity var(--m3-effects-d) var(--m3-effects), transform var(--m3-spatial-fast-d) var(--m3-spatial-fast); }
.wl-success-check circle { animation: draw var(--m3-spatial-slow-d) var(--m3-spatial) forwards; }
.wl-success-check { animation: iconPopSvg var(--m3-spatial-fast-d) var(--m3-spatial-fast) both; }
@keyframes iconPopSvg { from { transform: scale(.4); } to { transform: none; } }


/* Phone-size pill radii (after the base --pill declarations so they win) */
@media (max-width: 520px) {
  .btn-primary, .btn-ghost, .wl-back { --pill: 22px; }
  .nav-cta, .lang-dd summary { --pill: 19px; }
  form.waitlist .btn-primary { --pill: 24px; }
}


/* Waitlist backend bits: Turnstile slot (empty unless Cloudflare asks for a click), notice pages */
.wl-turnstile:empty { display: none; }
.wl-turnstile { min-height: 0; }
.notice-page { background: var(--cream); }
.notice { max-width: 560px; padding-top: 72px; padding-bottom: 72px; }
.notice-logo { color: var(--text); margin-bottom: 40px; }
.notice h1 { font-size: clamp(30px, 5vw, 40px); letter-spacing: -0.02em; line-height: 1.1; }
.notice > p { margin-top: 14px; color: var(--text-dim); font-size: 17px; }
.notice .btn-primary, .notice-form { margin-top: 28px; }
.notice .notice-legal { margin-top: 40px; font-size: 13px; color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1 !important; transform: none !important; }
}

/* ---------- OG image source (og-image.html only, 1200x630) ---------- */
body.og {
  width: 1200px; height: 630px; overflow: hidden; position: relative; color: var(--on-dark);
  background: radial-gradient(60% 70% at 92% 100%, rgba(55,166,12,0.16) 0%, transparent 60%), radial-gradient(125% 130% at 14% 8%, #16305C 0%, #0E274D 44%, #0B1A34 100%);
}
.og-flower { position: absolute; right: -80px; top: -120px; width: 620px; height: 620px; fill: #fff; opacity: .05; }
.og-pad { position: relative; display: flex; align-items: center; gap: 40px; height: 100%; padding: 0 70px 0 84px; }
.og-left { flex: 1; }
.og-brand { display: flex; align-items: center; gap: 14px; font-size: 26px; font-weight: 600; color: #fff; margin-bottom: 40px; }
.og-brand .logo-mark { height: 32px; }
body.og h1 { font-size: 60px; line-height: 1.04; letter-spacing: -0.03em; color: #fff; }
.og-tag { margin-top: 24px; font-size: 26px; line-height: 1.35; color: var(--on-dark-dim); max-width: 20ch; }
.og-right { flex: none; transform: scale(0.8); transform-origin: center; margin: -60px -30px -60px 0; }


/* ======================================================================
   Conversion + clarity pass (2026-10)
   ====================================================================== */

/* ---------- Hero CTAs: full labels; short ones on phones. Labels never wrap — if a translation
   doesn't fit side by side, the two buttons stack instead. ---------- */
.hero-cta .btn-primary, .hero-cta .btn-ghost { white-space: nowrap; }
.lbl-short { display: none; }
@media (max-width: 520px) {
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
  .hero-cta { flex-wrap: wrap; }
  .hero-cta .btn-primary, .hero-cta .btn-ghost { flex: 1 1 auto; justify-content: center; padding: 0 14px; }
}

/* ---------- Mobile hero: the copy and the primary CTA lead; the phone is a smaller supporting
   visual, cropped short, with the "Payment received" toast on top of it so the payment story is
   visible without scrolling. ---------- */
@media (max-width: 520px) {
  .hero { padding: 88px 0 24px; }
  .hero .sub { margin-top: 14px; }
  .hero-cta { margin-top: 20px; }
  .hero-visual { margin-top: 16px; }
  .hero-visual .phone-crop { zoom: .72; --crop: 350px; }
  .hero-visual .phone-stage { margin-bottom: 0; }
  .ph-toast { bottom: 10px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 33px; }            /* "Keep what’s yours." stays on one line at 320px */
  .ph-toast { width: calc(100vw - 24px); padding: 10px 12px; gap: 8px; }
  .ph-toast-ico { width: 30px; height: 30px; }
}
/* German: the headline always takes three lines on phones, so it runs a little smaller and the phone
   sits a little closer, keeping the payment toast in the first screen (667px-tall phones). */
@media (max-width: 520px) {
  html[lang="de"] .hero h1 { font-size: 30px; }
  html[lang="de"] .hero-visual { margin-top: 10px; }
}

/* ---------- Hero → page transition: the cream page rises into the hero in a soft arc, with a green
   line along its edge fading out towards both sides. Crisp (no blur or fade). Sized to stay inside the
   hero's bottom padding. ---------- */
.hero-curve { position: absolute; left: 0; bottom: -1px; z-index: 1; display: block; width: 100%; height: 64px; pointer-events: none; }
.hc-fill { fill: var(--cream); }
.hc-line { fill: none; stroke-width: 2px; }
.hc-stop-0 { stop-color: var(--brand-bright); stop-opacity: 0; }
.hc-stop-1 { stop-color: var(--brand-bright); stop-opacity: .85; }
@media (max-width: 1060px) { .hero-curve { height: 52px; } }
@media (max-width: 860px) { .hero-curve { height: 44px; } }
@media (max-width: 520px) {
  .hero { padding-bottom: 56px; }
  .hero-curve { height: 34px; }
}

/* ---------- Pre-launch note, right under the hero curve: typographic, in the page's own voice —
   the section kicker, one plain statement, the facts as a paragraph. No badges or icon tiles. ---------- */
.trust { position: relative; padding-top: 20px; }
.trust-card {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); align-items: center;
  padding: 26px 32px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.trust-head { padding-right: 32px; }
.trust-lead { margin-top: 6px; color: var(--text); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.trust-body { padding-left: 32px; border-left: 1px solid var(--border); color: var(--text-dim); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.trust-link { color: var(--navy); font-weight: 600; white-space: nowrap; }
.trust-link svg { width: 15px; height: 15px; vertical-align: -2px; transition: transform var(--m3-spatial-fast-d, .3s) var(--m3-spatial-fast, ease); }
.trust-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.trust-link:hover svg { transform: translateX(3px); }
.trust-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
.trust + .launch { padding-top: 80px; }
@media (max-width: 860px) {
  .trust-card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 18px; border-radius: 18px; }
  .trust-head { padding-right: 0; }
  .trust-lead { font-size: 19px; }
  .trust-body { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border); font-size: 15px; }
  .trust + .launch { padding-top: 56px; }
}

/* ---------- At launch: "Get paid" leads (wide, navy); spend, goals and the card follow ---------- */
.launch-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* minmax(0): long unbreakable demo text never widens a column */
.group-lead {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: center;
  padding: 36px 40px; border: 0; color: var(--on-dark);
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(55,166,12,0.18) 0%, transparent 60%),
    linear-gradient(150deg, #16305C 0%, #0E274D 50%, #0B1A34 100%);
  box-shadow: var(--shadow-md);
}
.group-lead .group-head { border-bottom-color: rgba(255,255,255,0.14); }
.group-lead .group-head h3 { font-size: clamp(24px, 2.6vw, 32px); color: #fff; letter-spacing: -0.02em; }
.group-lead .group-ico { background: rgba(55,166,12,0.22); color: var(--brand-bright); }
.group-lead .group-list { justify-content: flex-start; }
.group-lead .group-list li + li { border-top-color: rgba(255,255,255,0.12); }
.group-lead .group-list b { color: #fff; font-size: 16.5px; }
.group-lead .group-list li > span:last-child > span { color: var(--on-dark-dim); font-size: 15px; }
.group-lead .tick { background: rgba(55,166,12,0.22); color: var(--brand-bright); }
.group-lead .qb-mock { margin: 0; padding: 0; background: none; border: 0; }
.group-lead .qb-slip { box-shadow: 0 24px 48px -20px rgba(0,0,0,0.55); }
/* Supporting tiles: one surface each — the mockups sit on the tile, not in another box */
.goal-mock, .pt-mock { padding: 0; background: none; border: 0; border-radius: 0; }
@media (min-width: 1061px) {
  .group-card .dc-account { padding: 13px 14px; }
  .group-card .dc-acc-bal { font-size: 20px; }
  .group-card .dc-acc-savings .dc-acc-bal { font-size: 13.5px; }
  .group-card .dc-stage { height: 272px; }
  .group-card .dc-acc-savings { width: 86%; height: 112px; }
  .group-card .dc-acc-everyday { left: 6%; top: 38px; width: 80%; height: 140px; }
  .group-card .dc-card { width: 58%; padding: 11px 13px; }
  .group-card .dc-num { font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
}
@media (max-width: 1060px) {
  .launch-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-card { grid-column: 1 / -1; }
  .group-lead { gap: 28px; padding: 30px 28px; }
}
@media (min-width: 861px) and (max-width: 1060px) {
  /* The card tile runs full width here: stage on the left at its usual size, text beside it */
  .group-card { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 36px; }
  .group-card .group-head { grid-column: 2; grid-row: 1; align-self: end; }
  .group-card .group-note { grid-column: 2; grid-row: 2; align-self: start; }
  .group-card .dc-stage { grid-column: 1; grid-row: 1 / 3; margin: 6px 0 16px; }
}
@media (max-width: 860px) {
  .launch-groups { grid-template-columns: minmax(0, 1fr); }
  .group-lead { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 20px; gap: 18px; }
  .group-lead .group-list li { padding: 12px 0; }
  .group-lead .group-list b { font-size: 15.5px; }
  .group-lead .group-list li > span:last-child > span { font-size: 14px; }
}

/* ---------- Optional survey after confirming (functions/_lib/pages.js "survey"): light page, so the
   dark-panel choice pills get light-surface colours here. ---------- */
.survey-page .notice { max-width: 620px; }
.survey { margin-top: 32px; padding: 24px; display: flex; flex-direction: column; gap: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.survey-intro h2 { font-size: 19px; letter-spacing: -0.01em; }
.survey-intro p { margin-top: 4px; color: var(--text-dim); font-size: 15px; }
.survey fieldset.choices { margin-top: 0; }
.survey fieldset.choices legend { color: var(--text); font-size: 14px; }
.survey fieldset.choices legend .opt { color: var(--text-faint); }
.survey .choice span { border-color: var(--border-strong); background: var(--surface); color: var(--text-dim); }
.survey .choice:hover span { border-color: var(--navy); color: var(--text); }
.survey .choice input:checked + span { border-color: var(--brand); background: rgba(44,130,9,0.10); color: var(--brand); font-weight: 600; }
.survey .choice input:focus-visible + span { outline-color: var(--navy); }
.survey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 4px; }
.survey-actions .btn-primary { margin-top: 0; } /* .notice .btn-primary adds a top margin */
.survey-skip { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-weight: 600; font-size: 15px; }
.survey-skip:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.survey-skip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 520px) {
  .survey { padding: 18px 16px; }
  .survey-actions .btn-primary { flex: 1 1 auto; }
}

/* ---------- "Get paid" QR-bill: the full slip after the SIX style guide — receipt | payment part | details,
   perforated top and between receipt and payment part (proportions 62 : 56 : 92 mm). Phones show the
   payment part only, as when it's shared from the app. ---------- */
.qb-slip.qb-bill {
  display: grid; grid-template-columns: 62fr 56fr 92fr; padding: 0; border-radius: 6px;
  font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.qb-bill > div { padding: 16px 14px 18px; min-width: 0; }
.qb-bill .qb-receipt { display: flex; flex-direction: column; gap: 9px; padding-right: 12px; font-size: 10px; }
.qb-bill .qb-pay { display: flex; flex-direction: column; gap: 10px; border-left: 1.5px dashed var(--text-faint); }
.qb-bill .qb-detail { display: flex; flex-direction: column; gap: 12px; padding-left: 4px; padding-top: 38px; font-size: 11.5px; }
.qb-bill .qb-title { margin: 0; font-size: 13px; }
.qb-bill .qb-receipt .qb-title { font-size: 12px; }
.qb-bill .qb-sec { display: flex; flex-direction: column; }
.qb-bill .qb-detail .qb-sec > span:not(.qb-h) { white-space: nowrap; } /* receipt lines wrap, like on a printed receipt */
.qb-bill .qb-h { font-size: 8.5px; margin-bottom: 1px; }
.qb-bill .qb-detail .qb-h { font-size: 9.5px; }
.qb-bill .qb-amt { margin-top: 0; gap: 14px; }
.qb-bill .qb-box { width: 64px; height: 22px; }
.qb-bill .qb-receipt .qb-box { width: 52px; height: 18px; }
.qb-bill .qb-accept { margin-top: auto; align-self: flex-end; font-size: 8.5px; font-weight: 700; }
.qb-bill .qb-qr { width: min(100%, 124px); }
.qb-bill .qb-qr .ph-qr-svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
/* Blank fields: corner marks only, as printed on the slip */
.qb-blank {
  display: block; height: 30px; margin-top: 2px;
  --m: var(--navy-black);
  background:
    linear-gradient(var(--m), var(--m)) left top / 9px 1.5px, linear-gradient(var(--m), var(--m)) left top / 1.5px 7px,
    linear-gradient(var(--m), var(--m)) right top / 9px 1.5px, linear-gradient(var(--m), var(--m)) right top / 1.5px 7px,
    linear-gradient(var(--m), var(--m)) left bottom / 9px 1.5px, linear-gradient(var(--m), var(--m)) left bottom / 1.5px 7px,
    linear-gradient(var(--m), var(--m)) right bottom / 9px 1.5px, linear-gradient(var(--m), var(--m)) right bottom / 1.5px 7px;
  background-repeat: no-repeat;
}
.qb-detail .qb-blank { height: 44px; }
/* Scissors on the perforations */
.qb-cut { position: absolute; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; padding: 2px; border-radius: 4px; background: var(--surface); color: var(--text-dim); }
.qb-cut svg { width: 100%; height: 100%; }
.qb-cut-top { top: -10px; left: 14px; }
.qb-cut-side { top: 12px; left: calc(62 / 210 * 100%); translate: -50% 0; rotate: 90deg; }
.group-lead .qb-cut { background: #0E274D; color: rgba(255,255,255,0.75); }
.group-lead .qb-cut-side { background: #fff; color: var(--text-dim); }
@media (max-width: 1060px) {
  .qb-bill > div { padding: 14px 10px 16px; }
  .qb-bill .qb-detail { padding-top: 34px; }
  .qb-bill .qb-receipt .qb-sec > span:not(.qb-h) { font-size: 9px; white-space: nowrap; } /* keep the IBAN on one line */
}
@media (max-width: 600px) {
  .qb-slip.qb-bill { grid-template-columns: 56fr 92fr; }
  .qb-bill .qb-receipt, .qb-cut-side { display: none; }
  .qb-bill .qb-pay { border-left: 0; }
  .qb-bill .qb-detail { font-size: 10.5px; padding-right: 12px; }
  .qb-bill .qb-qr { width: min(100%, 104px); }
  .qb-bill .qb-pay { padding-right: 6px; }
  .qb-bill .qb-amt { gap: 8px; }
  .qb-bill .qb-box { width: 40px; }   /* currency + amount fit the payment-part column */
  .qb-bill .qb-title { font-size: 12px; white-space: nowrap; }
}

/* ---------- Entry notice (own initiative / cross-border): modal card over a dimmed page, opened by
   app.js until the visitor chooses Continue. The text scrolls inside the card; the buttons stay put. ---------- */
html.gate-open { overflow: hidden; }
dialog.gate { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; }
dialog.gate[open] { display: grid; place-items: center; }
dialog.gate::backdrop { background: rgba(11,26,52,0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gate-card {
  display: flex; flex-direction: column; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: hidden;
  border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 30px 80px -20px rgba(6,12,28,0.55);
}
dialog.gate[open] .gate-card { animation: gateIn var(--m3-spatial-d, .5s) var(--m3-spatial, ease) both; }
dialog.gate[open]::backdrop { animation: gateFade .3s ease both; }
@keyframes gateIn { from { opacity: 0; translate: 0 18px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes gateFade { from { opacity: 0; } to { opacity: 1; } }
.gate-brand { display: flex; align-items: center; gap: 10px; padding: 24px 32px 0; font-weight: 600; font-size: 15px; }
.gate-brand .logo-mark { height: 18px; }
.gate-notice { overflow-y: auto; padding: 18px 32px 6px; overscroll-behavior: contain; }
.gate-notice:focus { outline: none; } /* focused on open so reading starts at the top; not a control */
.gate h2, .gate-static h2 { margin-top: 8px; font-size: clamp(24px, 3.2vw, 30px); line-height: 1.15; letter-spacing: -0.02em; }
.gate-text { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.gate-confirm-intro { margin-top: 4px; color: var(--text); font-weight: 600; }
.gate-list { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; counter-reset: gate; }
.gate-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.gate-list li::before {
  counter-increment: gate; content: counter(gate);
  display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px;
  background: rgba(34,78,147,0.10); color: var(--navy); font-size: 12px; font-weight: 700;
}
.gate-remember { margin: 16px 0 10px; color: var(--text-faint); font-size: 13px; }
.gate-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 32px 24px; border-top: 1px solid var(--border); }
.gate-actions .btn-primary { min-width: 150px; justify-content: center; }
.gate-btn-back {
  min-height: 48px; padding: 0 22px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 600 15.5px var(--font);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.gate-btn-back:hover { border-color: var(--navy); background: var(--surface-2); }
.gate-btn-back:focus-visible, .gate .btn-primary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.gate-declined { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 32px 30px; font-size: 16px; }
@media (max-width: 520px) {
  dialog.gate { padding: 10px; }
  .gate-card { max-height: calc(100dvh - 20px); border-radius: 20px; }
  .gate-brand { padding: 18px 18px 0; }
  .gate-notice { padding: 14px 18px 4px; }
  .gate-text { font-size: 14.5px; }
  .gate-actions { padding: 12px 18px 16px; }
  .gate-actions > * { flex: 1 1 0; min-width: 0; }
  .gate-declined { padding: 18px 18px 22px; }
}
/* Without JavaScript the notice is a plain block above the page */
.gate-static { padding: 104px 0 28px; background: var(--surface); border-bottom: 1px solid var(--border); }
.gate-static .gate-text { max-width: 72ch; }

/* ---------- Expandable launch cards on phones (app.js "Launch cards"). On wider screens the body
   wrapper is layout-neutral, so tiles look exactly as before; without JS everything stays open. ---------- */
.group-body { display: contents; }
.group-toggle { display: none; }
@media (max-width: 860px) {
  .group-body { display: block; }
  .group-body.animating { overflow: hidden; }
  .group-expandable .group-head { position: relative; }
  .group-expandable h3 { flex: 1; min-width: 0; }
  .group-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px;
    padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
  }
  .group-toggle::after { content: ""; position: absolute; inset: -8px 0; } /* the whole header row is the tap target */
  .group-toggle:focus-visible { outline: none; }
  .group-expandable .group-head:has(.group-toggle:focus-visible) { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 12px; }
  .group-chev {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--surface-2); color: var(--navy); transition: transform var(--m3-spatial-d, .4s) var(--m3-spatial, ease), background .2s var(--ease), color .2s var(--ease);
  }
  .group-chev svg { width: 18px; height: 18px; }
  .group-toggle[aria-expanded="true"] .group-chev { transform: rotate(180deg); background: var(--brand); color: #fff; }
  .group.collapsed { padding-bottom: 14px; }
  .group.collapsed .group-head { padding-bottom: 0; border-bottom-color: transparent; }
  .group-expandable .group-head { transition: padding-bottom .25s var(--ease), border-color .25s var(--ease); }

}

/* ---------- FAQ on phones: each question is a card like the launch cards — same surface, radius and
   padding, a bold title row, the round chevron that flips and turns green when open, and a divider
   between question and answer. Behaviour is unchanged (one open at a time, app.js "FAQ"). ---------- */
@media (max-width: 860px) {
  .faq { gap: 12px; }
  .faq details, .faq details[open] { border-radius: 18px; border-color: var(--border); box-shadow: var(--shadow-sm); }
  .faq summary { position: relative; min-height: 64px; padding: 18px 16px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
  .faq summary:hover, .faq details:target summary { background: none; }
  .faq summary::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: var(--border); opacity: 0; transition: opacity .25s var(--ease); }
  .faq details[open] summary::after { opacity: 1; }
  .faq .chev-wrap, .faq details[open] .chev-wrap { border-radius: 50%; }
  .faq .ans { font-size: 14.5px; line-height: 1.6; }
  .faq .ans-inner { padding: 14px 16px 18px; }
}

/* ---------- Waitlist band: centered column — headline, lead, the form on a solid white card, then the
   three promises in one quiet row. A large faint edelweiss sits behind. Inputs, choices and messages use
   light-surface colours inside the card. ---------- */
.wl-flower { position: absolute; z-index: -1; left: 50%; top: 50%; width: 900px; height: 900px; translate: -50% -46%; fill: #fff; opacity: .045; pointer-events: none; }
.wl-points { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 30px; padding: 0; list-style: none; }
.wl-points li { padding: 2px 20px; color: var(--on-dark-dim); font-size: 14.5px; line-height: 1.45; }
.wl-points li + li { border-left: 1px solid rgba(255,255,255,0.2); }

.waitlist-form {
  width: min(560px, 100%); margin-top: 36px; padding: 28px; border-radius: 22px; text-align: left;
  background: var(--surface); color: var(--text); box-shadow: 0 30px 60px -30px rgba(3,8,20,0.6);
}
/* Step 1 on wide screens: email and Continue in one row */
@media (min-width: 521px) {
  .waitlist-form .wl-step[data-step="1"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 12px; align-items: start; }
  .waitlist-form .wl-step[data-step="1"] .field-label { grid-column: 1 / -1; }
  .waitlist-form .wl-step[data-step="1"] .wl-nav { margin-top: 0; }
  .waitlist-form .wl-step[data-step="1"] .wl-next { min-width: 150px; margin-top: 0; } /* level with the email field */
}
.waitlist-form form.waitlist.stepped .wl-step { min-height: 0; }
.waitlist-form .wl-progress { margin-bottom: 10px; }
.waitlist-form .wl-stepno { color: var(--navy); }
.waitlist-form .wl-bar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.waitlist-form .wl-bar i, .waitlist-form .wl-bar i.on { background: var(--surface-3); }
.waitlist-form .wl-bar i::after { background: var(--brand); }
.waitlist-form .field-label { color: var(--text); margin-bottom: -2px; }
.waitlist-form .field input { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.waitlist-form .field input::placeholder { color: var(--text-faint); }
.waitlist-form .field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(44,130,9,0.18); }
.waitlist-form .field input[aria-invalid="true"] { border-color: var(--negative, #DB1F25); }
.waitlist-form .field-error { color: var(--negative, #DB1F25); }
.waitlist-form .field.valid input { border-color: rgba(44,130,9,0.6); }
.waitlist-form fieldset.choices legend { color: var(--text); font-size: 14px; }
.waitlist-form .choice span { border-color: var(--border-strong); background: var(--surface); color: var(--text-dim); }
.waitlist-form .choice:hover span { border-color: var(--navy); color: var(--text); }
.waitlist-form .choice input:checked + span { border-color: var(--brand); background: rgba(44,130,9,0.10); color: var(--brand); font-weight: 600; }
.waitlist-form .wl-note { background: rgba(34,78,147,0.07); border-color: rgba(34,78,147,0.18); color: var(--text); }
.waitlist-form .wl-back { min-height: 50px; border-color: var(--border-strong); color: var(--text); background: var(--surface); } /* same height as the submit button */
.waitlist-form .wl-back:hover { background: var(--surface-2); border-color: var(--navy); }
.waitlist-form a:focus-visible, .waitlist-form button:focus-visible, .waitlist-form input:focus-visible,
.waitlist-form .choice input:focus-visible + span, .waitlist-form .wl-back:focus-visible { outline-color: var(--navy); }
.waitlist-form .form-note { margin-top: 10px; }
.waitlist-form .form-note:empty { min-height: 0; margin-top: 0; } /* stays in the DOM for aria-live, takes no space */
.waitlist-form .form-note.ok { color: var(--brand); }
.waitlist-form .form-note.err { color: var(--negative, #DB1F25); }
.waitlist-form .privacy { margin-top: 14px; color: var(--text-faint); }
.waitlist-form .privacy a { color: var(--navy); }
.waitlist-form .wl-success { color: var(--text); padding: 20px 4px; }
.waitlist-form .wl-success h3 { color: var(--text); }
.waitlist-form .wl-success p { color: var(--text-dim); }
.waitlist-form .wl-success-check circle { stroke: var(--brand); }
.waitlist-form .wl-success-check path { stroke: var(--brand); }
@media (max-width: 860px) {
  .waitlist-section { padding: 72px 0 64px; }
  .waitlist-form { margin-top: 28px; padding: 22px 16px 18px; border-radius: 18px; }
  .wl-flower { width: 620px; height: 620px; }
}
@media (max-width: 520px) {
  .waitlist-pitch h2 { font-size: 34px; }
  .waitlist-pitch > p { font-size: 16.5px; }
  .wl-points { flex-direction: column; align-items: center; gap: 6px; margin-top: 24px; }
  .wl-points li, .wl-points li + li { padding: 0; border-left: 0; }
}
@media (max-width: 520px) { .waitlist-form .wl-back { min-height: 48px; } } /* the submit button is 48px on phones */


/* ======================================================================
   Expressive shapes: where the M3 Expressive design used a circle, it now uses an 8-petal flower.
   Both shapes are polygons with the same number of points (96), so clip-path morphs smoothly between
   them. The shape sits on a ::before layer, so icons, numbers and shadows are never clipped.
   Buttons, chips and choice pills keep their own pill/rounded shapes. Generated by flower.py.
   ====================================================================== */
:root {
  --shape-squircle: polygon(50.00% 0.00%, 53.28% 0.00%, 56.58% 0.00%, 59.94% 0.00%, 63.39% 0.01%, 66.96% 0.04%, 70.66% 0.12%, 74.52% 0.29%, 78.51% 0.62%, 82.58% 1.23%, 86.60% 2.30%, 90.33% 4.01%, 93.53% 6.47%, 95.99% 9.67%, 97.70% 13.40%, 98.77% 17.42%, 99.38% 21.49%, 99.71% 25.48%, 99.88% 29.34%, 99.96% 33.04%, 99.99% 36.61%, 100.00% 40.06%, 100.00% 43.42%, 100.00% 46.72%, 100.00% 50.00%, 100.00% 53.28%, 100.00% 56.58%, 100.00% 59.94%, 99.99% 63.39%, 99.96% 66.96%, 99.88% 70.66%, 99.71% 74.52%, 99.38% 78.51%, 98.77% 82.58%, 97.70% 86.60%, 95.99% 90.33%, 93.53% 93.53%, 90.33% 95.99%, 86.60% 97.70%, 82.58% 98.77%, 78.51% 99.38%, 74.52% 99.71%, 70.66% 99.88%, 66.96% 99.96%, 63.39% 99.99%, 59.94% 100.00%, 56.58% 100.00%, 53.28% 100.00%, 50.00% 100.00%, 46.72% 100.00%, 43.42% 100.00%, 40.06% 100.00%, 36.61% 99.99%, 33.04% 99.96%, 29.34% 99.88%, 25.48% 99.71%, 21.49% 99.38%, 17.42% 98.77%, 13.40% 97.70%, 9.67% 95.99%, 6.47% 93.53%, 4.01% 90.33%, 2.30% 86.60%, 1.23% 82.58%, 0.62% 78.51%, 0.29% 74.52%, 0.12% 70.66%, 0.04% 66.96%, 0.01% 63.39%, 0.00% 59.94%, 0.00% 56.58%, 0.00% 53.28%, 0.00% 50.00%, 0.00% 46.72%, 0.00% 43.42%, 0.00% 40.06%, 0.01% 36.61%, 0.04% 33.04%, 0.12% 29.34%, 0.29% 25.48%, 0.62% 21.49%, 1.23% 17.42%, 2.30% 13.40%, 4.01% 9.67%, 6.47% 6.47%, 9.67% 4.01%, 13.40% 2.30%, 17.42% 1.23%, 21.49% 0.62%, 25.48% 0.29%, 29.34% 0.12%, 33.04% 0.04%, 36.61% 0.01%, 40.06% 0.00%, 43.42% 0.00%, 46.72% 0.00%);
  --shape-flower: polygon(50.00% 0.00%, 53.21% 1.08%, 56.16% 3.21%, 58.80% 5.75%, 61.19% 8.23%, 63.49% 10.27%, 65.88% 11.66%, 68.56% 12.37%, 71.62% 12.55%, 75.07% 12.49%, 78.73% 12.56%, 82.32% 13.14%, 85.36% 14.64%, 86.86% 17.68%, 87.44% 21.27%, 87.51% 24.93%, 87.45% 28.38%, 87.63% 31.44%, 88.34% 34.12%, 89.73% 36.51%, 91.77% 38.81%, 94.25% 41.20%, 96.79% 43.84%, 98.92% 46.79%, 100.00% 50.00%, 98.92% 53.21%, 96.79% 56.16%, 94.25% 58.80%, 91.77% 61.19%, 89.73% 63.49%, 88.34% 65.88%, 87.63% 68.56%, 87.45% 71.62%, 87.51% 75.07%, 87.44% 78.73%, 86.86% 82.32%, 85.36% 85.36%, 82.32% 86.86%, 78.73% 87.44%, 75.07% 87.51%, 71.62% 87.45%, 68.56% 87.63%, 65.88% 88.34%, 63.49% 89.73%, 61.19% 91.77%, 58.80% 94.25%, 56.16% 96.79%, 53.21% 98.92%, 50.00% 100.00%, 46.79% 98.92%, 43.84% 96.79%, 41.20% 94.25%, 38.81% 91.77%, 36.51% 89.73%, 34.12% 88.34%, 31.44% 87.63%, 28.38% 87.45%, 24.93% 87.51%, 21.27% 87.44%, 17.68% 86.86%, 14.64% 85.36%, 13.14% 82.32%, 12.56% 78.73%, 12.49% 75.07%, 12.55% 71.62%, 12.37% 68.56%, 11.66% 65.88%, 10.27% 63.49%, 8.23% 61.19%, 5.75% 58.80%, 3.21% 56.16%, 1.08% 53.21%, 0.00% 50.00%, 1.08% 46.79%, 3.21% 43.84%, 5.75% 41.20%, 8.23% 38.81%, 10.27% 36.51%, 11.66% 34.12%, 12.37% 31.44%, 12.55% 28.38%, 12.49% 24.93%, 12.56% 21.27%, 13.14% 17.68%, 14.64% 14.64%, 17.68% 13.14%, 21.27% 12.56%, 24.93% 12.49%, 28.38% 12.55%, 31.44% 12.37%, 34.12% 11.66%, 36.51% 10.27%, 38.81% 8.23%, 41.20% 5.75%, 43.84% 3.21%, 46.79% 1.08%);
}

/* Icon tiles: rounded square at rest, flower on hover (was: circle) */
.group-ico, .step-num { position: relative; isolation: isolate; background: none; border-radius: 0; }
.group-ico { --tile-bg: rgba(44,130,9,0.10); }
.group-lead .group-ico { --tile-bg: rgba(55,166,12,0.22); background: none; }
.step-num { --tile-bg: linear-gradient(135deg, var(--navy), var(--navy-deep)); box-shadow: none; filter: drop-shadow(0 6px 10px rgba(14,39,77,0.22)); }
.group-ico::before, .step-num::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tile-bg);
  clip-path: var(--shape-squircle); transition: clip-path var(--m3-spatial-d, .5s) var(--m3-spatial, ease);
}
@media (hover: hover) {
  .group:hover .group-ico, .step:hover .step-num { border-radius: 0; }
  .group:hover .group-ico::before, .step:hover .step-num::before { clip-path: var(--shape-flower); }
}

/* Chevron badges (FAQ, launch cards, steps): a flower instead of a circle; when open it turns green and
   the petals turn a little, while the chevron itself flips as before. */
.faq details .chev-wrap, .group-toggle .group-chev { position: relative; isolation: isolate; background: none; border-radius: 0; }
.faq details .chev-wrap::before, .group-toggle .group-chev::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--chev-bg, var(--surface-2));
  clip-path: var(--shape-flower);
  transition: background-color var(--m3-effects-d, .2s) var(--m3-effects, ease), rotate var(--m3-spatial-d, .5s) var(--m3-spatial, ease);
}
.faq details[open] .chev-wrap, .group-toggle[aria-expanded="true"] .group-chev { --chev-bg: var(--brand); background: none; border-radius: 0; }
.faq details[open] .chev-wrap::before { rotate: 22.5deg; }
.group-toggle[aria-expanded="true"] .group-chev::before { rotate: 22.5deg; }

/* ======================================================================
   Nav morph (app.js "NAV"): at the very top of the home page the menu is a flat row on the hero —
   no glass, no border, a larger logo, aligned with the hero content. Scrolling morphs it into the
   floating glass bar (dark over the hero, light over cream) and back. Without JS the flat header is
   position:absolute, so it scrolls away with the hero and never floats over light sections.
   ====================================================================== */
nav { transition: top var(--m3-spatial-d, .5s) var(--m3-spatial, ease), padding var(--m3-spatial-d, .5s) var(--m3-spatial, ease); }
nav .bar {
  transition: padding var(--m3-spatial-d, .5s) var(--m3-spatial, ease), border-radius var(--m3-spatial-d, .5s) var(--m3-spatial, ease),
    background-color var(--m3-effects-d, .3s) var(--m3-effects, ease), border-color var(--m3-effects-d, .3s) var(--m3-effects, ease),
    box-shadow var(--m3-effects-d, .3s) var(--m3-effects, ease), color var(--m3-effects-d, .3s) var(--m3-effects, ease),
    -webkit-backdrop-filter var(--m3-effects-d, .3s) var(--m3-effects, ease), backdrop-filter var(--m3-effects-d, .3s) var(--m3-effects, ease);
}
nav .logo { transition: font-size var(--m3-spatial-d, .5s) var(--m3-spatial, ease), gap var(--m3-spatial-d, .5s) var(--m3-spatial, ease); }
nav .logo-mark { transition: height var(--m3-spatial-d, .5s) var(--m3-spatial, ease); }
nav.instant, nav.instant .bar, nav.instant .logo, nav.instant .logo-mark { transition: none !important; }

nav.top { position: absolute; top: 0; padding: 0; }
html.js nav.top { position: fixed; }
nav.top .bar {
  padding: 24px 24px 0; border-radius: 0; border-color: transparent; box-shadow: none;
  background-color: transparent; color: var(--on-dark);
  -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%);
}
nav.top .logo { font-size: 20px; gap: 12px; }
nav.top .logo-mark { height: 30px; }
nav.top .nav-links a { font-size: 15px; opacity: .9; }
nav.top .lang-dd summary { border-color: rgba(255,255,255,0.28); }
body:has(.draft-banner) nav.top { top: 37px; } /* preview-only banner */
@media (max-width: 520px) {
  nav.top .bar { padding: 16px 16px 0; }
  nav.top .logo-mark { height: 28px; }
}

/* ======================================================================
   404 page: a navy hero-style section with the edelweiss, a large outlined "404", and a Swiss hiking
   signpost whose arrow signs are the links back onto the site. The arrow shape is on a ::before layer,
   so focus outlines on the links aren't clipped. On phones the pole moves left and all signs point right.
   ====================================================================== */
.page-404 main.nf {
  position: relative; overflow: hidden; min-height: 100svh; padding: 150px 0 110px; color: var(--on-dark); display: flex; align-items: center;
  background:
    radial-gradient(60% 70% at 88% 100%, rgba(55,166,12,0.16) 0%, transparent 60%),
    radial-gradient(90% 120% at 10% 0%, #1B3A68 0%, #0E274D 45%, #0B1A34 100%);
}
.nf-flower { position: absolute; right: -160px; top: -80px; width: 720px; height: 720px; fill: #fff; opacity: .05; pointer-events: none; }
.nf-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 48px; }
.nf-code {
  margin: 0 0 8px; font-size: clamp(110px, 17vw, 220px); font-weight: 700; line-height: .9; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.32);
}
.nf-copy h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
.nf-body { margin-top: 16px; max-width: 36ch; color: var(--on-dark-dim); font-size: 18px; }

.nf-post { position: relative; padding: 28px 0 0; }
.nf-pole {
  position: absolute; left: 50%; top: 0; bottom: -100vh; width: 10px; /* stands on the section floor (main clips it) */ translate: -50% 0; border-radius: 5px 5px 0 0;
  background: linear-gradient(90deg, #7E889B, #D6DBE4 45%, #8C96A8);
}
.nf-signs { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 0; list-style: none; }
.nf-signs li { display: flex; filter: drop-shadow(0 8px 12px rgba(3,8,20,0.35)); }
.nf-signs li:has(.nf-sign-left) { justify-content: flex-end; }
.nf-sign {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 52px;
  margin-left: calc(50% - 5px); padding: 0 40px 0 20px;
  color: var(--navy-black); font-size: 16px; font-weight: 700; letter-spacing: -0.005em; white-space: nowrap;
  transition: translate var(--m3-spatial-fast-d, .35s) var(--m3-spatial-fast, ease);
}
.nf-sign::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--caution);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}
.nf-sign-left { margin-left: 0; margin-right: calc(50% - 5px); padding: 0 20px 0 40px; }
.nf-sign-left::before { clip-path: polygon(24px 0, 100% 0, 100% 100%, 24px 100%, 0 50%); }
.nf-sign:hover { translate: 6px 0; }
.nf-sign-left:hover { translate: -6px 0; }
.nf-sign:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 860px) {
  .page-404 main.nf { padding: 120px 0 90px; }
  .nf-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 720px) {
  .nf-pole { left: 22px; }
  .nf-signs li, .nf-signs li:has(.nf-sign-left) { justify-content: flex-start; }
  .nf-sign, .nf-sign-left { margin: 0 0 0 17px; padding: 0 40px 0 18px; min-height: 48px; font-size: 15px; }
  .nf-sign-left::before { clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%); }
  .nf-sign-left:hover { translate: 6px 0; }
}

/* ======================================================================
   Footer: closes the page in the brand navy. Top: brand (logo, tagline) and contact (the email as the
   footer's call to action). Then the "not a bank" line under a hairline, and a base row with ©, the
   legal links and Back to top. Section links live in the header.
   ====================================================================== */
.site-foot {
  padding: 72px 0 28px; color: var(--on-dark); border-top: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(60% 90% at 100% 100%, rgba(55,166,12,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #0E274D 0%, #0B1A34 100%);
}
/* The footer's <nav> isn't the fixed site bar: undo the global nav positioning */
.site-foot nav { position: static; top: auto; left: auto; right: auto; z-index: auto; padding: 0; transition: none; }
.foot-main { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 48px; flex-wrap: wrap; }
.site-foot .logo { color: #fff; }
.site-foot .logo-mark { height: 26px; }
.foot-tagline { margin-top: 16px; color: var(--on-dark-dim); font-size: 16px; line-height: 1.5; white-space: nowrap; }
.foot-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.foot-h { color: var(--periwinkle-lt); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.foot-mail {
  color: #fff; font-size: 15px; font-weight: 600; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 4px;
  transition: text-decoration-color .2s var(--ease);
}
.foot-mail:hover { text-decoration-color: var(--brand-bright); }
.site-foot .foot-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); color: var(--on-dark-dim); font-size: 14px; max-width: none; text-wrap: balance; }
.foot-base { display: flex; align-items: center; gap: 8px 28px; margin-top: 14px; flex-wrap: wrap; }
.site-foot .foot-copy { margin: 0; color: var(--on-dark-faint); font-size: 13px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-links a, .foot-top { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-dim); font-size: 13.5px; transition: color .15s var(--ease); }
.foot-links a:hover, .foot-top:hover { color: #fff; }
.foot-top { margin-left: auto; gap: 6px; font-weight: 600; }
.foot-top svg { width: 15px; height: 15px; transition: translate var(--m3-spatial-fast-d, .3s) var(--m3-spatial-fast, ease); }
.foot-top:hover svg { translate: 0 -2px; }
.site-foot a:focus-visible { outline: 2px solid var(--periwinkle-lt); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 860px) {
  .site-foot { padding: 56px 0 22px; }
  .foot-main { flex-direction: column; align-items: flex-start; }
  .foot-contact { align-items: flex-start; text-align: left; }
  .site-foot .foot-legal { margin-top: 36px; }
}
@media (max-width: 380px) { .foot-tagline { white-space: normal; } } /* too wide for the narrowest phones */
@media (max-width: 520px) {
  .foot-tagline { font-size: 15px; }
  .foot-base { gap: 0 20px; }
  .foot-copy { flex-basis: 100%; padding-top: 10px; }
  .foot-top { margin-left: 0; }
}

/* ======================================================================
   How it works: three cards, each with a small product picture (install the app, scan your ID, IBAN and
   card ready), then the number, title and text. On phones each card collapses to number + title and
   opens to the picture and text (app.js expandableOnPhones). Pictures animate once when they scroll in.
   ====================================================================== */
.how { padding: 96px 0; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; list-style: none; counter-reset: none; }
.step {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .6s var(--ease);
}
@media (hover: hover) { .step:hover { box-shadow: var(--shadow-md); } }
.step-body { display: contents; }
.step-visual { order: -1; position: relative; height: 188px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(165deg, #EDF2E2 0%, var(--surface-2) 55%, var(--surface) 100%); border-bottom: 1px solid var(--border); }
.step-head { display: flex; align-items: center; gap: 14px; padding: 22px 22px 0; }
.step-num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; font-weight: 700; font-size: 15px; color: #fff; }
.step h3 { font-size: 19px; letter-spacing: -0.01em; line-height: 1.25; }
.step-body p { margin: 0; padding: 10px 22px 26px; color: var(--text-dim); font-size: 15px; line-height: 1.55; }

/* 01 · app icon among others on a home screen */
.sv-grid { display: grid; grid-template-columns: repeat(4, 46px); gap: 14px; }
.sv-grid i { width: 46px; height: 46px; border-radius: 13px; background: rgba(14,23,49,0.07); }
.sv-app-icon {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(140deg, #16305C, #0B1A34); box-shadow: 0 10px 22px -8px rgba(14,39,77,0.55);
  transition: scale .6s var(--m3-spatial, ease), opacity .4s var(--ease);
}
.sv-app-icon .logo-mark { height: 15px; }
.sv-app-icon b { position: absolute; right: -7px; bottom: -7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 3px var(--surface); }
.sv-app-icon b svg { width: 11px; height: 11px; }

/* 02 · ID card in camera corners, scan line, selfie check */
.sv-frame { position: relative; padding: 14px;
  --c: var(--navy); background:
    linear-gradient(var(--c), var(--c)) left top / 16px 2.5px, linear-gradient(var(--c), var(--c)) left top / 2.5px 16px,
    linear-gradient(var(--c), var(--c)) right top / 16px 2.5px, linear-gradient(var(--c), var(--c)) right top / 2.5px 16px,
    linear-gradient(var(--c), var(--c)) left bottom / 16px 2.5px, linear-gradient(var(--c), var(--c)) left bottom / 2.5px 16px,
    linear-gradient(var(--c), var(--c)) right bottom / 16px 2.5px, linear-gradient(var(--c), var(--c)) right bottom / 2.5px 16px;
  background-repeat: no-repeat; }
.sv-idcard { position: relative; overflow: hidden; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; gap: 10px 12px; width: 178px; padding: 12px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.sv-photo { grid-row: 1; width: 42px; height: 52px; border-radius: 6px;
  background: radial-gradient(circle at 50% 38%, #B9C2D3 0 9px, transparent 10px), radial-gradient(ellipse 18px 13px at 50% 100%, #B9C2D3 98%, transparent 100%), #E6EAF1; }
.sv-lines { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.sv-lines i { display: block; height: 6px; border-radius: 3px; background: #DDE2EA; }
.sv-lines i:nth-child(1) { width: 80%; background: #C9D0DC; } .sv-lines i:nth-child(3) { width: 55%; }
.sv-mrz { grid-column: 1 / -1; height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #D3D9E3 0 5px, transparent 5px 8px); }
.sv-scan { position: absolute; left: 0; right: 0; top: -10%; height: 3px; opacity: 0; background: var(--brand-bright); box-shadow: 0 0 10px 2px rgba(55,166,12,0.45); }
.step.in .sv-scan { animation: svScan 1.5s var(--ease) .4s 2 both; } /* plays twice (~3s), then stops */
@keyframes svScan { 0% { top: -5%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.sv-selfie { position: absolute; right: calc(50% - 128px); bottom: 26px; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #B9C2D3 0 8px, transparent 9px), radial-gradient(ellipse 16px 11px at 50% 100%, #B9C2D3 98%, transparent 100%), #E6EAF1;
  box-shadow: 0 0 0 3px var(--surface), var(--shadow-md); }
.sv-selfie b { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.sv-selfie b svg { width: 11px; height: 11px; }

/* 03 · virtual debit card + IBAN ready */
.sv-card { align-content: center; gap: 0; }
.sv-debit { position: relative; display: grid; grid-template-rows: 1fr auto; width: 176px; aspect-ratio: 85.6 / 54; padding: 12px 14px; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, #1B3A68, #0B1A34 70%); box-shadow: 0 16px 30px -12px rgba(11,26,52,0.6); rotate: -6deg;
  transition: translate .7s var(--m3-spatial, ease), rotate .7s var(--m3-spatial, ease), opacity .4s var(--ease); }
.sv-debit-brand .logo-mark { height: 14px; }
.sv-debit-num { align-self: end; font-size: 11px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.sv-debit-type { position: absolute; right: 12px; bottom: 11px; font-size: 8.5px; letter-spacing: .14em; opacity: .75; }
.sv-iban { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin: -12px auto 0; padding: 7px 8px 7px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
  transition: translate .6s var(--m3-spatial, ease) .15s, opacity .4s var(--ease) .15s; }
.sv-iban b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; }
.sv-iban b svg { width: 10px; height: 10px; }

/* Pictures arrive once when the card scrolls in (and replay when a phone card opens) */
html.js .step:not(.in) .sv-app-icon, .step.collapsed .sv-app-icon { scale: .6; opacity: 0; }
html.js .step:not(.in) .sv-debit, .step.collapsed .sv-debit { translate: 0 18px; rotate: 0deg; opacity: 0; }
html.js .step:not(.in) .sv-iban, .step.collapsed .sv-iban { translate: 0 10px; opacity: 0; }

@media (max-width: 1060px) and (min-width: 861px) {
  .step-visual { height: 168px; }
  .sv-grid { grid-template-columns: repeat(4, 38px); gap: 10px; }
  .sv-grid i, .sv-app-icon { width: 38px; height: 38px; border-radius: 11px; }
}
@media (max-width: 860px) {
  .how { padding: 64px 0; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .step { border-radius: 18px; }
  .step-head { position: relative; padding: 14px 16px; }
  .step-num { width: 40px; height: 40px; font-size: 14px; }
  .step h3 { flex: 1; min-width: 0; font-size: 17px; }
  .step-body { display: block; padding: 0 16px 16px; }
  .step-body.animating { overflow: hidden; }
  .step-visual { order: 0; height: 156px; border: 1px solid var(--border); border-radius: 14px; }
  .step-body p { padding: 12px 2px 0; font-size: 14.5px; }
  .step-expandable .group-toggle::after { inset: -14px -16px; } /* the whole header row is the tap target */
  .step-expandable:has(.group-toggle:focus-visible) { outline: 2px solid var(--navy); outline-offset: 3px; }
}

/* ======================================================================
   FAQ: header across the top; on wide screens a sticky topic menu (with question counts) and a plain
   contact line on the left, numbered question cards on the right. On phones the topics are the
   scrolling chips and the cards keep the launch-card style. Behaviour: app.js "FAQ".
   ====================================================================== */
.faq-head { max-width: 60ch; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 48px; align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-count { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .7; }
.faq-chip { display: inline-flex; align-items: center; gap: 8px; }
.faq-ask { margin-top: 24px; color: var(--text-dim); font-size: 14.5px; line-height: 1.6; }
.faq-ask b { display: block; color: var(--text); font-weight: 700; }
.faq-ask a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.faq-ask a:hover { color: var(--text); }
.faq details, .faq details[open] { border-radius: 18px; }
.faq summary { justify-content: flex-start; gap: 14px; }
.faq-q { flex: 1; min-width: 0; }
@media (min-width: 861px) {
  /* Topic menu: a quiet vertical list; the chosen topic is a white tab */
  .faq-filters { flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; }
  .faq-chip, .faq-chip[aria-pressed="true"] {
    justify-content: space-between; width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px;
    border: 1px solid transparent; background: transparent; color: var(--text-dim); font-size: 15px; text-align: left;
  }
  .faq-chip:hover { border-color: transparent; background: rgba(14,23,49,0.04); color: var(--text); }
  .faq-chip[aria-pressed="true"] { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-sm); }
  .faq-chip[aria-pressed="true"] .faq-count { color: var(--brand); opacity: 1; }
  .faq-chip:active { transform: scale(.98); }
}
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .faq-side { position: static; display: contents; }
  .faq-filters { order: 0; }
  .faq-main { order: 1; }
  .faq-ask { order: 2; margin-top: 20px; }
  .faq summary { gap: 12px; }
}

/* ======================================================================
   Hero (wide screens): a larger headline with "Stress free." in brand green; the phone is a touch larger
   with a soft green glow behind it. Phones keep the compact hero (only the green accent).
   ====================================================================== */
.hero-accent { color: var(--brand-bright); }
@media (min-width: 1061px) {
  .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .hero h1 { font-size: clamp(52px, 5.3vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }
  .hero .sub { margin-top: 22px; font-size: 19px; max-width: 46ch; }
  .hero-cta { margin-top: 32px; }
  .hero-visual { position: relative; }
  .hero-visual::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: 46%; width: 520px; height: 520px; translate: -50% -50%;
    border-radius: 50%; background: radial-gradient(circle, rgba(55,166,12,0.28) 0%, rgba(55,166,12,0.08) 45%, transparent 70%);
    pointer-events: none;
  }
  .hero-visual .phone-stage { position: relative; z-index: 1; }
  .hero-visual .phone { width: 318px; }
  .hero-visual .crop-hero { --crop: 568px; }
}

/* ======================================================================
   FAQ as a conversation: each question is a left-aligned message bubble (white, our border and shadow,
   the flower chevron); opening it brings the answer in as a navy reply bubble on the right, with a small
   flower-shaped Helvetic Fidelity avatar. Behaviour is unchanged (app.js "FAQ": one open at a time,
   filters, #faq-* deep links); without JS the native <details> still works.
   ====================================================================== */
.faq { gap: 12px; }
.faq details, .faq details[open] { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.faq summary, .faq details[open] summary {
  position: relative; width: fit-content; max-width: min(88%, 640px); min-height: 0; margin: 0;
  display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 13px 13px 13px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px 22px 22px 6px; box-shadow: var(--shadow-sm);
  color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), translate .25s var(--m3-spatial-fast, ease);
}
.faq summary:hover, .faq details:target summary { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.faq details[open] summary { border-color: rgba(44,130,9,0.45); }
.faq summary::after { content: none; }
.faq summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.faq-q { flex: 1 1 auto; min-width: 0; }
.faq .chev-wrap { width: 28px; height: 28px; }
.faq .chev-wrap .chev { width: 16px; height: 16px; }
.faq .ans { color: inherit; font-size: inherit; line-height: inherit; }
.faq .ans-inner, .faq details .ans-inner { display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px; padding: 10px 0 24px 12%; }
/* .ans clips while its height animates; 24px of bottom padding is exactly the reach of the bubble's shadow
   (0 12px 26px -14px), so it's never cut off */
.ans-bubble {
  max-width: 580px; padding: 14px 18px; border-radius: 22px 22px 6px 22px;
  background: var(--navy-black); color: var(--on-dark); font-size: 15.5px; line-height: 1.6;
  box-shadow: 0 12px 26px -14px rgba(11,26,52,0.55); transform-origin: 100% 100%;
}
.faq .ans-bubble b { color: #fff; } /* beats the older .faq .ans b (dark) */
.faq details[open] .ans-bubble { animation: faqReply var(--m3-spatial-fast-d, .4s) var(--m3-spatial-fast, ease) .06s both; }
@keyframes faqReply { from { opacity: 0; translate: 12px 8px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
.ans-avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 2px; background: var(--surface-2); clip-path: var(--shape-flower); }
.ans-avatar .logo-mark { height: 11px; }
@media (max-width: 860px) {
  .faq { gap: 10px; }
  .faq summary, .faq details[open] summary { max-width: 94%; padding: 12px 12px 12px 16px; font-size: 15.5px; }
  .faq .ans-inner, .faq details .ans-inner { padding: 8px 0 24px 8%; gap: 8px; }
  .ans-bubble { padding: 12px 15px; font-size: 15px; }
  .ans-avatar { width: 30px; height: 30px; }
}

/* ======================================================================
   Forced colours (Windows contrast themes): the browser drops our backgrounds and shadows, so anything
   whose shape came from a background or shadow gets a real border, and the decorative shapes step aside.
   ====================================================================== */
@media (forced-colors: active) {
  .btn-primary, .btn-ghost, .nav-cta, .wl-back, .gate-btn-back, .faq-chip, .lang-dd summary,
  .choice span, .faq summary, .ans-bubble, .group, .step, .trust-card, .waitlist-form, .gate-card,
  .survey, .ph-toast, .field input, .nf-sign { border: 1px solid CanvasText; }
  .btn-primary, .nav-cta, .faq-chip[aria-pressed="true"], .choice input:checked + span { border-width: 2px; }
  .faq-chip[aria-pressed="true"], .choice input:checked + span { text-decoration: underline; }
  nav .bar { border: 1px solid CanvasText; }
  .wl-bar i.on::after { background: Highlight; forced-color-adjust: none; }
  .hero-media, .hero-scrim, .hero-flower, .wl-flower, .nf-flower, .hero-curve { display: none; }
  .step-visual { display: none; } /* decorative pictures built from backgrounds; the step text carries the meaning */
  /* keep these as one unit (shape + its own text/mark colours); chevron badges fall back to system colours */
  .ans-avatar, .step-num { forced-color-adjust: none; }
  .group-ico::before { forced-color-adjust: none; }
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 3px; }
}

/* Waitlist closed (src/site.config.json → waitlistOpen: false): a short note in place of the form card. */
.waitlist-closed { text-align: center; }
.waitlist-closed h3 { font-size: 20px; letter-spacing: -0.01em; color: var(--text); }
.waitlist-closed p { margin-top: 8px; color: var(--text-dim); font-size: 15.5px; line-height: 1.55; }
.waitlist-closed a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }