:root {
  --ink: #0a0a0a;
  --bg: #f6f6f6;
  --surface: #fff;
  --label: #0a0a0a;
  --secondary-label: #636363;
  --placeholder: rgb(0 0 0 / 0.55);
  --fill: rgb(0 0 0 / 0.05);
  --fill-strong: rgb(0 0 0 / 0.07);
  --pressed-fill: #e8e8ea;
  --hairline: #e5e5e5;
  --hairline-soft: #ededed;
  --amber: #ffaa40;
  --accent: #174bba;
  --accent-pressed: #113a92;
  --focus-ring: var(--accent);
  --danger: #c42b1c;
  --warning: #b45f06;
  --running: #2f9e57;
  --success-text: #1b7a3e;
  --success-fill: rgb(47 158 87 / 0.1);
  --navy: #0f2364;

  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Montserrat", ui-sans-serif, system-ui, sans-serif;

  --radius-window: 16px;
  --radius-notification: 12px;
  --radius-field: 8px;

  --ring: 0 0 0 1px var(--hairline);
  --shadow-control: 0 0 0 1px var(--hairline), 0 1px 3px rgb(0 0 0 / 0.06);
  --shadow-prominent: 0 12px 12px -6px rgb(3 7 18 / 0.2);
  --shadow-field: 0 0 0 1px var(--hairline), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-banner: 0 0 0 1px var(--hairline), 0 1px 3px rgb(0 0 0 / 0.1), 0 8px 10px -1px rgb(0 0 0 / 0.08);
  --shadow-sheet: 0 0 0 1px var(--hairline), 0 1px 3px rgb(0 0 0 / 0.06), 0 8px 24px -6px rgb(0 0 0 / 0.08);
  --card-top: linear-gradient(90deg, transparent, rgb(23 75 186 / 0.35), transparent) top / 100% 1px no-repeat;

  --spring-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --spring-smooth-ms: 700ms;
  --spring-snappy: cubic-bezier(0.22, 1, 0.36, 1);
  --spring-snappy-ms: 500ms;
  --spring-quick: cubic-bezier(0.22, 1, 0.36, 1);
  --spring-quick-ms: 350ms;

  --gutter: clamp(18px, 5vw, 48px);
  --foot-h: clamp(380px, 44vw, 520px);
  --z-nav: 100;
  --z-toast: 300;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; scroll-snap-type: y proximity; color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font-ui); background: var(--ink); color: var(--ink); font-size: 14px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

main { position: relative; z-index: 1; background: var(--bg); margin-bottom: var(--foot-h); border-radius: 0 0 var(--radius-window) var(--radius-window); overflow-x: clip; }

.wrap { width: 100%; max-width: var(--wrap-max, 1160px); margin: 0 auto; padding: 0 var(--gutter); }
.label { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--secondary-label); }
.h2 { font-size: clamp(28px, 3.8vw, 46px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.lead { font-size: 17px; line-height: 1.5; color: var(--secondary-label); text-wrap: pretty; }

.legal a { color: var(--accent); text-decoration: none; border-radius: 3px; }
.legal a:hover { text-decoration: underline; }

.btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-control); color: var(--label); font: 500 14px/1 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--spring-quick-ms) var(--spring-quick), opacity var(--spring-quick-ms) var(--spring-quick); }
.btn:active:not(:disabled) { background: var(--pressed-fill); transition: none; }
.btn-primary { background: var(--accent); box-shadow: var(--shadow-prominent); color: #fff; font-weight: 600; }
.btn-primary:active:not(:disabled) { background: var(--accent-pressed); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-ghost { background: var(--surface); }
.text-btn { margin-top: 12px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--accent); font: 500 13px var(--font-ui); cursor: pointer; }
.text-btn:hover { text-decoration: underline; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

.field, .join-form input[type="email"], .name-form input[type="text"], .sd-link input, .ticket-link input { box-sizing: border-box; border: 0; border-radius: var(--radius-field); background: rgb(255 255 255 / 0.92); box-shadow: var(--shadow-field); color: var(--label); font: 400 14px var(--font-ui); outline: none; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
.join-form input[aria-invalid="true"] { box-shadow: 0 0 0 1.5px var(--danger), 0 1px 2px rgb(0 0 0 / 0.04); }
:is(.field, .join-form input[type="email"], .name-form input[type="text"], .sd-link input, .ticket-link input):focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 4.5px rgb(23 75 186 / 0.16); animation: none; }
.join-form input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1.5px var(--danger), 0 0 0 4.5px rgb(196 43 28 / 0.14); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; animation: focus-in var(--spring-quick-ms) var(--spring-quick); }
.foot :focus-visible { outline-color: rgb(255 255 255 / 0.7); outline-offset: 2px; }
@keyframes focus-in { from { outline-color: transparent; outline-offset: 8px; } }

.nav { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; width: min(var(--wrap-max, 1160px), calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 999px; background: transparent; transition: background-color var(--spring-quick-ms) var(--spring-quick), box-shadow var(--spring-quick-ms) var(--spring-quick); }
.nav.scrolled { background: rgb(255 255 255 / 0.96); box-shadow: var(--ring), 0 8px 24px -12px rgb(0 0 0 / 0.2); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav:has(> .nav-links) { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav:has(> .nav-links) .brand { justify-self: start; }
.nav:has(> .nav-links) .nav-right { grid-column: 3; justify-self: end; }
.brand-tile { width: 38px; height: 38px; border-radius: var(--radius-field); flex: none; }
.brand-word { font-weight: 700; font-size: 13px; letter-spacing: 0.2em; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--secondary-label); }
.nav-links a:hover { color: var(--label); text-decoration: underline; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-right .btn { height: 30px; padding: 0 14px; font-size: 13px; }
.nav-cta { opacity: 0; visibility: hidden; transition: opacity var(--spring-quick-ms) var(--spring-quick), visibility 0s var(--spring-quick-ms); }
.nav.cta-on .nav-cta { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav-menu { display: none; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-control); cursor: pointer; place-content: center; gap: 5px; }
.nav-menu i { display: block; width: 16px; height: 1.5px; border-radius: 1px; background: var(--label); }
.nav-menu:active { background: var(--pressed-fill); }
.menu-sheet { position: fixed; inset: auto 12px auto auto; top: calc(max(12px, env(safe-area-inset-top)) + 64px); right: max(12px, env(safe-area-inset-right)); width: min(280px, calc(100vw - 24px)); margin: 0; padding: 8px; border: 0; border-radius: var(--radius-notification); background: var(--surface); box-shadow: var(--shadow-sheet); color: var(--label); opacity: 1; translate: 0 0; transition: opacity var(--spring-quick-ms) var(--spring-quick), translate var(--spring-smooth-ms) var(--spring-smooth), display var(--spring-quick-ms) allow-discrete, overlay var(--spring-quick-ms) allow-discrete; @starting-style { opacity: 0; translate: 0 -8px; } }
.menu-sheet:not(:popover-open) { opacity: 0; translate: 0 -8px; }
.menu-sheet nav { display: flex; flex-direction: column; }
.menu-sheet a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-field); font-size: 16px; font-weight: 500; text-decoration: none; }
.menu-sheet a:active, .menu-lang:active { background: var(--fill-strong); }
.menu-sheet a[aria-current] { background: var(--fill); }
.menu-lang { display: none; min-height: 44px; margin-top: 4px; padding: 0 14px; border: 0; border-radius: 0 0 var(--radius-field) var(--radius-field); background: none; box-shadow: inset 0 0.5px 0 var(--hairline-soft); font: 500 16px var(--font-ui); color: var(--accent); text-align: left; cursor: pointer; }

.js .rv { opacity: 0; translate: 0 14px; transition: opacity var(--spring-smooth-ms) var(--spring-smooth), translate var(--spring-smooth-ms) var(--spring-smooth), filter var(--spring-smooth-ms) var(--spring-smooth); }
.js .rv.in { opacity: 1; translate: 0 0; }
.js .h2.rv, .js .last-title.rv { translate: 0 28px; filter: blur(12px); }
.js .h2.rv.in, .js .last-title.rv.in { translate: 0 0; filter: none; }

.hero { position: relative; padding: clamp(96px, 12vh, 120px) max(var(--gutter), env(safe-area-inset-right)) clamp(56px, 8vh, 96px) max(var(--gutter), env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-stage { position: relative; width: min(1040px, 100%); display: flex; justify-content: center; }
.hero-copy { width: 100%; display: flex; flex-direction: column; align-items: center; }

.vwin { position: relative; z-index: 2; width: min(var(--video-max, 720px), 100%, max(320px, (100svh - 160px) * 1.6)); aspect-ratio: 16 / 9; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-window); background: var(--surface); box-shadow: var(--shadow-sheet); animation: win-in 1100ms var(--spring-smooth) both; }
@keyframes win-in { from { opacity: 0; scale: 0.94; translate: 0 24px; } }
.vbar { height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; box-shadow: 0 0.5px 0 var(--hairline); }
.vchip { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vby { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--secondary-label); white-space: nowrap; }
.vby img { width: 18px; height: 18px; border-radius: 4px; }
.vby .brand-word { margin-left: -1px; font-size: 11px; color: var(--label); }
.vposter { position: relative; flex: 1; min-height: 0; border: 0; padding: 0; cursor: pointer; overflow: hidden; display: grid; place-items: end start; background: var(--navy) center / cover; }
.vthumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: scale var(--spring-smooth-ms) var(--spring-smooth); }
.vposter:hover .vthumb { scale: 1.02; }
.vplay-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: clamp(10px, 2.2cqi, 16px); padding: 0 16px 0 13px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; background: rgb(10 10 10 / 0.52); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2), 0 8px 24px -8px rgb(0 0 0 / 0.5); transition: scale var(--spring-quick-ms) var(--spring-quick), background-color var(--spring-quick-ms) var(--spring-quick); }
.vplay-btn svg { width: 15px; height: 15px; flex: none; }
.vdur { font-weight: 500; color: rgb(255 255 255 / 0.78); font-variant-numeric: tabular-nums; }
.vdur::before { content: "·"; margin-right: 8px; }
.vposter:hover .vplay-btn { background: rgb(10 10 10 / 0.68); }
.vposter:has(.vsoon:not([hidden])) .vplay-btn { display: none; }
.vposter:focus-visible { outline-color: transparent; }
.vwin:has(.vposter:focus-visible) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring), var(--shadow-sheet); }
.vposter:active .vplay-btn { scale: 0.95; transition: none; }
.vsoon { position: absolute; left: 14px; bottom: 12px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.5); }

.floats { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.floats { --settle: 4300ms; }
.float { --in: 500ms; position: absolute; box-sizing: border-box; width: 300px; display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px 12px 12px; border-radius: var(--radius-notification); background: rgb(246 246 248 / 0.8); -webkit-backdrop-filter: blur(28px) saturate(1.9); backdrop-filter: blur(28px) saturate(1.9); box-shadow: var(--shadow-banner); text-align: left; animation: banner-in var(--spring-snappy-ms) var(--spring-snappy) var(--in) both, banner-settle 700ms var(--spring-smooth) var(--settle) forwards; }
.float::before { content: ""; position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7.5 7.5l7 7m0-7l-7 7' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: 0 0 0 2px #fff; }
.f1 { left: 0; top: 24%; }
.f2 { --in: 1300ms; right: 0; top: 26%; }
.f3 { --in: 2100ms; left: 0; bottom: 22%; }
.f4 { --in: 2900ms; right: 0; bottom: 8%; animation-name: banner-in, banner-tuck; }
.f5 { --in: var(--settle); right: 0; bottom: 8%; animation: banner-in var(--spring-snappy-ms) var(--spring-snappy) var(--in) both, banner-buzz 520ms linear calc(var(--in) + 220ms); }
.f4::before, .f5::before { content: none; }
/* Earlier banners fade under a pale veil rather than with opacity: a faded card would let the video show
   through its glass, and an animated opacity could not be lifted on hover. */
.float::before { animation: banner-dim 700ms var(--spring-smooth) var(--settle) forwards; }
.float:not(.f5)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(255 255 255 / 0.4); opacity: 0; pointer-events: none; transition: background-color 400ms var(--spring-smooth); animation: banner-veil 700ms var(--spring-smooth) var(--settle) forwards; }
@keyframes banner-in { from { opacity: 0; translate: 0 -14px; } }
@keyframes banner-settle { to { scale: 0.97; } }
@keyframes banner-tuck { to { translate: 0 12px; scale: 0.94; } }
@keyframes banner-dim { to { opacity: 0.6; } }
@keyframes banner-veil { to { opacity: 1; } }
@keyframes banner-buzz {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  10%, 50% { translate: -3px 0; rotate: -0.8deg; }
  20%, 60% { translate: 3px 0; rotate: 0.8deg; }
  30% { translate: -2px 0; rotate: -0.5deg; }
  40% { translate: 2px 0; rotate: 0.5deg; }
  70% { translate: -1px 0; rotate: -0.3deg; }
  80% { translate: 1px 0; rotate: 0.3deg; }
}
.tile { position: relative; display: grid; flex: none; place-items: center; width: 38px; height: 38px; margin-top: 2px; border-radius: var(--radius-field); background: var(--surface); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12); }
.tile-glyph svg { width: 22px; height: 22px; fill: none; stroke: var(--secondary-label); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ntext { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; line-height: 17px; }
.nhead { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.nhead b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nhead time { flex: none; color: var(--secondary-label); font-size: 12px; }
.ntext p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.hero-line { margin-top: clamp(36px, 5vw, 56px); font-family: var(--font-brand); font-weight: 700; font-size: clamp(32px, 4.8vw, 64px); line-height: 1.15; letter-spacing: -0.01em; max-width: 26ch; text-wrap: balance; }
.hero-line > span { display: block; }
.hero-line .soft { color: var(--secondary-label); }
:lang(fr) .hero-line { max-width: 28ch; font-size: clamp(28px, 4vw, 54px); }
.hero-sub { margin-top: 20px; max-width: 46ch; font-size: 17px; color: var(--secondary-label); text-wrap: balance; }
.hero-line > span, .hero-sub, .hero .join { animation: copy-in 800ms var(--spring-smooth) both; }
.hero-line > .soft { animation-delay: 120ms; }
.hero-sub { animation-delay: 240ms; }
.hero .join { animation-delay: 320ms; }
@keyframes copy-in { from { opacity: 0; translate: 0 10px; filter: blur(6px); } }

.join { width: 100%; max-width: 520px; margin-top: 28px; }
.join:has(#ticketSlot:not([hidden])) { max-width: 880px; }
.join-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.consent { flex: 1 0 100%; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--secondary-label); cursor: pointer; text-align: left; }
.consent input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.join-form input[type="email"] { flex: 1; min-width: 0; height: 44px; padding: 0 14px; font-size: 16px; }
.join-form .btn { height: 44px; padding: 0 22px; font-size: 15px; }
.form-msg { min-height: 20px; margin-top: 10px; font-size: 12px; color: var(--danger); }
.form-msg.ok { color: var(--secondary-label); }
.invited { color: var(--label); font-weight: 600; font-size: 15px; }
.flash { margin: 4px 0 10px; padding: 9px 14px; border-radius: 12px; background: var(--success-fill); color: var(--success-text); font-size: 13px; font-weight: 500; }
.flash.bad { background: rgb(196 43 28 / 0.08); color: var(--danger); }

.ticket-shell { width: 100%; margin-top: 8px; }
.ticket { display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.6fr); border-radius: var(--radius-window); text-align: left; overflow: hidden; background: var(--surface); box-shadow: var(--ring); }
.ticket-stub { padding: 22px 28px; box-shadow: 0.5px 0 0 var(--hairline); display: flex; flex-direction: column; justify-content: center; background: var(--fill); }
.ticket-stub .label { margin-bottom: 4px; }
.ticket-num { white-space: nowrap; font-size: clamp(34px, 4.2vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ticket-meta { margin-top: 8px; font-size: 12px; color: var(--secondary-label); }
.ticket-body { padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; min-width: 0; }
.meter { height: 5px; border-radius: 3px; background: var(--fill-strong); overflow: hidden; }
.meter b { display: block; height: 100%; background: var(--ink); clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0 round 3px); transition: clip-path var(--spring-smooth-ms) var(--spring-smooth); }
.ticket-progress p { margin-top: 8px; font-size: 13px; font-weight: 500; }
.ticket-link { display: flex; gap: 8px; }
.ticket-link input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; }
.ticket-consent { justify-content: flex-start; margin-top: 12px; }
.ticket-link .btn { flex: none; height: 36px; min-width: 88px; }
.ticket-note { font-size: 12px; padding: 9px 12px; border-radius: 12px; background: var(--fill); }
.ticket-stub .ticket-note { margin-top: 14px; padding: 0; background: none; line-height: 1.45; color: var(--secondary-label); }

.vdlg { border: 0; padding: 0; background: #000; border-radius: var(--radius-window); width: min(1000px, 94vw, 88svh * 16 / 9); margin: auto; overflow: hidden; box-shadow: var(--shadow-sheet); }
.vdlg::backdrop { background: rgb(0 0 0 / 0.6); }
.vdlg video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vtab { position: absolute; z-index: 2; top: 10px; left: 10px; height: 32px; padding: 0 14px; border-radius: 16px; border: 0; cursor: pointer; background: var(--surface); box-shadow: var(--shadow-control); font-size: 13px; font-weight: 600; }
.vcredits { position: absolute; z-index: 2; top: 50px; left: 10px; max-width: calc(100% - 20px); padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sheet); font-size: 13px; line-height: 1.5; }
.vcredits p { margin: 0; }
.vcredits span { font-weight: 600; }
.vclose { position: absolute; z-index: 2; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; background: var(--surface); box-shadow: var(--shadow-control); font-size: 20px; line-height: 1; }
.vmissing { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: #fff; font-size: clamp(18px, 2.4vw, 24px); font-weight: 600; background: var(--navy); }
.plus { position: relative; width: 15px; height: 15px; }
.plus::before, .plus::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.5); }
.plus::before { left: 7px; top: 0; width: 1px; height: 100%; }
.plus::after { top: 7px; left: 0; height: 1px; width: 100%; }

.backers { padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 6vw, 72px); text-align: center; }
.marquee { overflow: hidden; }
.marquee-track { list-style: none; display: flex; justify-content: center; align-items: center; width: max-content; min-width: 100%; }
.marquee-track li { flex: none; padding: 0 clamp(20px, 4vw, 40px); }
.marquee-track img { height: clamp(28px, 3.6vw, 40px); width: auto; filter: grayscale(1) brightness(0); opacity: 0.55; }
.marquee.is-moving { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee.is-moving .marquee-track { justify-content: flex-start; min-width: 0; animation: marquee var(--marquee-duration, 30s) linear infinite; }
.marquee.is-moving:hover .marquee-track, .marquee.is-moving:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { translate: -50% 0; } }

.how, .about, .faq, .line, .contact { padding: clamp(72px, 10vw, 130px) 0 0; }
.how .h2 { max-width: 18ch; }
.stack { list-style: none; margin-top: clamp(36px, 5vw, 64px); display: flex; flex-direction: column; gap: 14px; }
.card { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; gap: clamp(20px, 4vw, 56px); min-height: min(420px, 64svh); padding: clamp(22px, 3.4vw, 40px); border-radius: var(--radius-window); background: var(--surface); box-shadow: var(--shadow-sheet); transform-origin: 50% 0; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: 0; pointer-events: none; }
.card h3 { margin-top: auto; font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.card p { font-size: 16px; color: var(--secondary-label); max-width: 34ch; text-wrap: pretty; }
.card-art { display: grid; place-items: center; min-height: 220px; padding: 24px; border-radius: var(--radius-notification); background: var(--bg); box-shadow: inset 0 0 0 0.5px var(--hairline-soft); overflow: hidden; }
.banner { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px 12px 12px; border-radius: var(--radius-notification); background: rgb(246 246 248 / 0.92); box-shadow: var(--shadow-banner); text-align: left; }
.banner + .banner { transform: scale(0.96); }

.story { position: relative; background: var(--ink); color: #fff; }
.story .label { color: rgb(255 255 255 / 0.6); }
.pin { display: flex; flex-direction: column; justify-content: center; padding: clamp(80px, 11vw, 140px) var(--gutter); }
.chat { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-window); background: var(--surface); box-shadow: var(--shadow-sheet); color: var(--label); }
.chat-bar { flex: none; height: 44px; display: grid; place-items: center; font-size: 13px; font-weight: 600; box-shadow: 0 0.5px 0 var(--hairline); }
.chat-thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 18px; }
.msg { max-width: 80%; padding: 9px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; }
.msg.you { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--ink); color: #fff; }
.msg.ai { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--fill-strong); }
.paste { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 6px 10px; border-radius: 10px; background: rgb(255 255 255 / 0.14); font-size: 12px; font-weight: 500; }
.paste::before { content: ""; width: 10px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px currentColor; }
.msg > span:last-child { display: block; }
.counters { display: flex; flex-wrap: wrap; gap: 20px clamp(28px, 5vw, 56px); margin: clamp(24px, 4vw, 36px) 0; }
.counter .num { display: block; font-family: var(--font-brand); font-weight: 700; font-size: clamp(48px, 6vw, 84px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.counter span { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--secondary-label); }

.rewards { padding-top: 20px; box-shadow: 0 -0.5px 0 var(--hairline); }
.ms-list { list-style: none; }
.ms { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; box-shadow: 0 -0.5px 0 var(--hairline-soft); opacity: 0.55; transition: opacity var(--spring-quick-ms) var(--spring-quick); }
.ms:first-child { box-shadow: none; }
.ms.next, .ms.done { opacity: 1; }
.ms-n { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.ms-n small { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--secondary-label); }
.ms-r { font-size: 14px; line-height: 1.35; }
.ms-s { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--fill-strong); }
.ms.done .ms-s { background: var(--success-fill); color: var(--success-text); }
.ms.max { margin-top: 6px; padding: 14px 16px; border-radius: var(--radius-notification); background: var(--ink); box-shadow: none; color: #fff; opacity: 1; }
.ms.max .ms-n small { color: rgb(255 255 255 / 0.6); }
.ms.max .ms-r { font-size: 15px; font-weight: 600; }
.ms.max .ms-s { background: rgb(255 255 255 / 0.16); color: #fff; }

.name-box { margin-top: 12px; }
.name-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.name-form input[type="text"] { flex: 1; min-width: 160px; height: 36px; padding: 0 12px; }
.name-form .btn { height: 36px; }
.name-msg { flex-basis: 100%; min-height: 16px; font-size: 12px; color: var(--secondary-label); }

.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.about .h2 { max-width: 12ch; }
.about-lead { margin-top: 18px; max-width: 48ch; font-size: 17px; color: var(--secondary-label); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fact { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 150px; padding: 20px; border-radius: var(--radius-notification); background: var(--surface); box-shadow: var(--ring); }
.fact dt { font-size: 13px; font-weight: 500; color: var(--secondary-label); }
.fact dd { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }

.contact-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.contact-lead { margin-top: 16px; max-width: 40ch; font-size: 17px; color: var(--secondary-label); }
.contact-alt { margin-top: 18px; font-size: 14px; color: var(--secondary-label); }
.link-plain { color: var(--accent); text-decoration: none; border-radius: 3px; overflow-wrap: anywhere; }
.link-plain:hover { text-decoration: underline; }
.contact-form, .contact-done { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-window); background: var(--surface); box-shadow: var(--shadow-sheet); }
.fld-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld label { font-size: 13px; font-weight: 500; }
.field { width: 100%; height: 40px; padding: 0 12px; font-size: 15px; }
select.field { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23000' stroke-opacity='.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
textarea.field { height: auto; min-height: 132px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.field[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--danger), inset 0 0.5px 1px rgb(0 0 0 / 0.06); }
.fld-err { min-height: 0; font-size: 12px; color: var(--danger); }
.fld-err:empty { display: none; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.contact-actions .form-msg { margin: 0; min-height: 0; }
.contact-done { justify-content: center; min-height: 240px; text-align: center; outline: none; }
.contact-done-title { font-size: 20px; font-weight: 700; }
.contact-done p:last-child { color: var(--secondary-label); }

.faq-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-list { box-shadow: 0 0.5px 0 var(--hairline); }
.faq-item { box-shadow: 0 -0.5px 0 var(--hairline); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-size: clamp(16px, 1.6vw, 19px); font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; flex: none; width: 14px; height: 14px; }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--secondary-label); transition: rotate var(--spring-quick-ms) var(--spring-quick); }
.faq-item summary i::after { rotate: 90deg; }
.faq-item[open] summary i::after { rotate: 0deg; }
.faq-item p { padding: 0 34px 22px 0; max-width: 58ch; font-size: 15px; color: var(--secondary-label); }

.last { margin-top: clamp(72px, 10vw, 130px); padding: clamp(80px, 11vw, 140px) var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surface); border-radius: 0 0 var(--radius-window) var(--radius-window); box-shadow: 0 -0.5px 0 var(--hairline); }
.last-title { font-family: var(--font-brand); font-weight: 700; font-size: clamp(36px, 6.4vw, 88px); line-height: 1.05; letter-spacing: -0.02em; max-width: 14ch; text-wrap: balance; }
.last-sub { margin-top: 20px; font-size: 17px; color: var(--secondary-label); }
.joined-note { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 18px; font-size: 20px; font-weight: 600; }

.foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; height: var(--foot-h); display: flex; flex-direction: column; justify-content: flex-end; padding: 56px max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); overflow: hidden; color: #fff; background: var(--ink); }
.foot-inner { width: 100%; max-width: 1160px; margin: 0 auto; }
.foot a { color: #fff; }
.f-label { font-size: 12px; color: rgb(255 255 255 / 0.6); margin-bottom: 3px; }
.f-made { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: rgb(255 255 255 / 0.6); }
.flag { height: 12px; width: auto; border-radius: 2px; box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.25); }
.foot-lang { font-size: 13px; font-weight: 500; text-decoration: none; background: none; border: 0; border-radius: 3px; cursor: pointer; color: #fff; }
.giant { margin-top: 36px; text-align: center; font-family: var(--font-brand); font-weight: 800; font-size: min(20vw, 250px); line-height: 0.78; letter-spacing: -0.045em; white-space: nowrap; user-select: none; color: rgb(255 255 255 / 0.07); translate: 0 9%; }

.sdlg { box-sizing: border-box; max-width: calc(100vw - 24px); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-window); background: var(--surface); box-shadow: var(--shadow-sheet); color: var(--label); overflow: hidden; transition: translate var(--spring-smooth-ms) var(--spring-smooth), opacity var(--spring-quick-ms) var(--spring-quick); @starting-style { translate: 0 -16px; opacity: 0; } }
.sdlg::backdrop { background: rgb(0 0 0 / 0.2); transition: opacity var(--spring-quick-ms) var(--spring-quick); @starting-style { opacity: 0; } }
.sd-card { max-height: calc(100vh - 24px); overflow: auto; padding: clamp(20px, 3vw, 32px); background: var(--card-top), var(--surface); }
.sd-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg); box-shadow: var(--shadow-control); cursor: pointer; color: var(--label); }
.sd-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sd-x:active { background: var(--pressed-fill); }
.mail-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-control); color: var(--accent); }
.mail-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ts-host { display: flex; justify-content: center; }
.ts-host.on { margin-top: 12px; }
.idlg { width: min(400px, calc(100vw - 32px)); margin: auto; padding: 0; border: 0; border-radius: var(--radius-window); background: var(--surface); box-shadow: var(--shadow-sheet); color: var(--label); }
.idlg::backdrop { background: rgb(0 0 0 / 0.2); }
.idlg-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px 24px; text-align: center; background: var(--card-top), var(--surface); }
.idlg-card .mail-ico { width: 48px; height: 48px; margin-bottom: 4px; }
.idlg-card h2 { font: 500 22px/1.15 var(--font-brand); letter-spacing: -0.02em; }
.idlg-card p { font-size: 14px; line-height: 1.5; color: var(--secondary-label); overflow-wrap: anywhere; }
.idlg-card .btn { margin-top: 8px; height: 40px; min-width: 120px; }
.idlg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.analytics-choice .text-btn { margin: 0; font-size: inherit; }
.sd-card { max-height: calc(100vh - 24px); overflow: auto; padding: clamp(20px, 3vw, 28px); background: var(--card-top), var(--surface); }
.sd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.sd-head h2 { font: 500 clamp(24px, 2.6vw, 28px)/1.1 var(--font-brand); letter-spacing: -0.02em; text-wrap: balance; }
.sd-head p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--secondary-label); }
.sd-status { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-window); background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline); }
.sd-pill { flex: none; font: 500 22px/1 var(--font-brand); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-move { font-size: 14px; font-weight: 500; line-height: 1.35; }
.sd-meta { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--secondary-label); }
.sd-notice { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 14px; border-radius: var(--radius-field); background: rgb(23 75 186 / 0.06); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.sd-notice .mail-ico { flex: none; }
.sd-link { display: flex; gap: 8px; margin: 14px 0 0; }
.sd-link input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; font-size: 15px; }
.sd-link .btn { height: 44px; min-width: 88px; }
.sd-sub { margin: 16px 0 8px; font-size: 13px; color: var(--secondary-label); }
.sd-more { border-top: 1px solid var(--hairline-soft); }
.sd-more summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; }
.sd-more summary::-webkit-details-marker { display: none; }
.sd-more summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border: solid var(--secondary-label); border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; transition: rotate var(--spring-quick-ms) var(--spring-quick); }
.sd-more[open] summary::after { rotate: 225deg; translate: 0 2px; }
.sd-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sd-more-body { padding-bottom: 16px; }
.sd-media { display: grid; gap: 14px; }
.sd-media-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.sd-media-item canvas { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: var(--ring); }
.sd-media-item b { font-size: 14px; font-weight: 500; }
.sd-media-item p { margin: 2px 0 8px; font-size: 12px; line-height: 1.4; color: var(--secondary-label); }
.sd-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-ch { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline); cursor: pointer; text-decoration: none; color: var(--label); font: 500 13px var(--font-ui); transition: background-color var(--spring-quick-ms) var(--spring-quick); }
.sd-ch:hover { background: var(--fill-strong); }
.sd-ch:active { background: var(--pressed-fill); transition: none; }
.sd-ch svg { width: 12px; height: 12px; fill: none; stroke: var(--secondary-label); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sd-tip { min-height: 18px; margin-top: 10px; font-size: 12px; color: var(--secondary-label); }
.sd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-actions .btn { height: 34px; padding: 0 16px; font-size: 13px; }
.sd-note { margin-top: 12px; font-size: 12px; color: var(--secondary-label); text-align: center; }

.sub { background: var(--bg); }
.sub .nav { background: rgb(255 255 255 / 0.96); box-shadow: var(--ring); }
.legal { max-width: 760px; margin: 0 auto; padding: 120px var(--gutter) 40px; }
.legal h1 { font-family: var(--font-brand); font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 22px; }
.legal h2 { margin-top: 30px; font-size: 13px; font-weight: 600; color: var(--secondary-label); }
.legal p, .legal li { margin-top: 10px; font-size: 15px; }
.legal ul { padding-left: 20px; }
.legal .meta { font-size: 12px; color: var(--secondary-label); }
.legal-card, .glass { padding: 26px clamp(20px, 4vw, 40px) 34px; border-radius: var(--radius-window); background: var(--surface); box-shadow: var(--ring); }

.story + .how { position: relative; z-index: 1; margin-top: calc(-1 * var(--radius-window)); border-radius: var(--radius-window) var(--radius-window) 0 0; background: var(--bg); }

.fx .chat-thread { height: min(460px, 58svh); -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
.fx .chat-thread > :not(.on, .past) { display: none; }
.fx .chat-thread > * { animation: msg-in var(--spring-snappy-ms) var(--spring-snappy) both; }
@keyframes msg-in { from { opacity: 0; translate: 0 12px; scale: 0.97; } }

.fx .last-title { --k: clamp(0, var(--sp, 0) * 2.4, 1); scale: calc(0.88 + var(--k) * 0.12); }
.fx .giant { translate: 0 calc(9% + (1 - var(--sp, 1)) * 45%); }

.label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary-label); }
.h2 { font-family: var(--font-brand); font-weight: 400; letter-spacing: -0.035em; line-height: 1.08; }
.hero-line { font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; }
.hero-line .soft { color: var(--secondary-label); }
.last-title { font-weight: 500; letter-spacing: -0.045em; }
.counter .num, .legal h1 { font-weight: 500; letter-spacing: -0.035em; }
.card h3, .contact-done-title, .fact dd { font-family: var(--font-brand); font-weight: 500; letter-spacing: -0.02em; }
.btn-primary { background: var(--accent); color: #fafafa; font-weight: 500; }
.btn-primary:hover { background: #000; }
.nav.scrolled { background: rgb(255 255 255 / 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--ring), 0 1px 3px rgb(0 0 0 / 0.06); }
.vwin, .card, .contact-form, .contact-done, .fact, .chat, .ticket { background: var(--card-top), var(--surface); }
.card-art { background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline); }
.float, .banner { background: rgb(255 255 255 / 0.92); }
.ms.max { background: var(--ink); }
.hero { background: radial-gradient(60% 50% at 20% 10%, #fff 0, transparent 70%), radial-gradient(50% 40% at 85% 25%, #fff 0, transparent 70%), radial-gradient(70% 60% at 50% 0, rgb(23 75 186 / 0.05), transparent 70%); }
.backers { position: relative; }
.marquee { position: relative; padding: 22px 0; }
.marquee::before, .marquee::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(17 24 39 / 0.15), transparent); }
.marquee::before { top: 0; }
.marquee::after { bottom: 0; }
.plus::before, .plus::after { background: rgb(10 10 10 / 0.3); }

.story { background: var(--bg); color: var(--ink); }
.story .label { color: var(--secondary-label); }
.story + .how { margin-top: 0; border-radius: 0; }

.last { background: var(--surface); }
.foot { background: var(--ink); }

.wrap { max-width: var(--wrap-max, 1152px); }
.nav { top: max(16px, env(safe-area-inset-top)); width: min(1152px, calc(100% - 2 * var(--gutter))); padding: 8px 8px 8px 16px; border-radius: 16px; background: rgb(255 255 255 / 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--ring), 0 1px 3px rgb(0 0 0 / 0.06); }
.nav.scrolled { box-shadow: var(--ring), 0 1px 3px rgb(0 0 0 / 0.06), 0 12px 24px -12px rgb(0 0 0 / 0.16); }
.nav-links a { border-radius: 8px; }
.nav-links a:hover, .nav-links a[aria-current] { text-decoration: none; color: var(--label); background: var(--fill); }

.sect { padding: clamp(64px, 9vw, 112px) 0 0; }
.sect-head { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.sect-head .h2 { max-width: 20ch; }
.sect-sub { margin-top: 14px; max-width: 58ch; font-size: 17px; color: var(--secondary-label); text-wrap: pretty; }

.hero { padding: clamp(88px, 11vh, 132px) 0 0; overflow: clip; }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-line { font-size: clamp(36px, min(5.6vw, 7.2vh), 72px); max-width: 18ch; }
:lang(fr) .hero-line { font-size: clamp(28px, min(5.2vw, 7.2vh), 72px); max-width: 24ch; }
.hero-sub { max-width: 52ch; font-size: clamp(16px, 1.5vw, 19px); }
.hero-stage { width: min(1040px, calc(100% - 2 * var(--gutter))); margin: 0 auto clamp(32px, 5vh, 56px); }
.hero-copy { padding-bottom: clamp(36px, 5vh, 56px); }
.hero .join { margin-top: 28px; }
.hero .form-msg { min-height: 0; font-size: 13px; line-height: 1.45; }
.hero .form-msg:empty { display: none; }
.hero .form-msg:not(:empty) + .join-note { display: none; }
.hero .invited { margin-bottom: 12px; }
.hero .hero-line { margin-top: 0; }
.hero .vwin { width: min(100%, 880px, max(420px, (100svh - 400px) * 16 / 9)); }
.fx .hero .vwin { animation: stage-in 1.1s var(--spring-smooth) both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } }

.backers { padding-top: clamp(56px, 8vw, 96px); text-align: center; }
.backers .label { justify-content: center; margin-bottom: 18px; }
.marquee { max-width: 1152px; margin: 0 auto; }
.marquee-track img { opacity: 0.7; }

.fcards { display: grid; gap: 20px; }
.fcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-window); background: var(--card-top), var(--surface); box-shadow: var(--shadow-sheet); }
.fcard-art { position: relative; display: grid; place-items: center; padding: clamp(20px, 3.5vw, 40px); background-image: radial-gradient(rgb(10 10 10 / 0.07) 1px, transparent 1px); background-size: 14px 14px; }
.fcard-art::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--hairline); }
.fcard-body { padding: clamp(20px, 3vw, 32px); }
.fcard-body h3 { margin-top: 2px; font-family: var(--font-brand); font-size: clamp(20px, 2vw, 24px); font-weight: 500; letter-spacing: -0.02em; }
.fcard-body > p:not(.label) { margin-top: 6px; max-width: 62ch; font-size: 16px; color: var(--secondary-label); }
.fcard .chat { width: min(100%, 560px); box-shadow: var(--shadow-banner); }
.fx .fcard .chat-thread { height: 400px; }

.features { list-style: none; display: grid; gap: clamp(48px, 6vw, 72px); }
.feature h3 { margin-top: 10px; font-family: var(--font-brand); font-size: clamp(22px, 2.4vw, 28px); font-weight: 400; letter-spacing: -0.025em; }

.perks .ms-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.perks .ms { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 220px; padding: 24px; border-radius: var(--radius-window); background: var(--card-top), var(--surface); box-shadow: var(--shadow-sheet); opacity: 1; }
.perks .ms:first-child { box-shadow: var(--shadow-sheet); }
.perks .ms-n { font-family: var(--font-brand); font-size: 48px; font-weight: 400; letter-spacing: -0.04em; }
.perks .ms-n small { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0; }
.perks .ms-r { margin-top: auto; font-size: 16px; font-weight: 500; line-height: 1.35; }
.perks .ms-s { order: -1; align-self: flex-end; margin-bottom: -38px; }
.perks .ms.max { margin: 0; background: var(--ink); color: #fff; box-shadow: none; }
.perks .ms.next { box-shadow: 0 0 0 1.5px var(--accent), 0 8px 24px -6px rgb(0 0 0 / 0.1); }

.about, .faq, .contact { padding-top: clamp(64px, 9vw, 112px); }

.last { margin-top: clamp(64px, 9vw, 112px); background-color: var(--bg); background-image: radial-gradient(rgb(10 10 10 / 0.06) 1px, transparent 1px); background-size: 14px 14px; box-shadow: 0 -1px 0 var(--hairline); }
.last-title { font-size: clamp(32px, 4.6vw, 56px); font-weight: 400; letter-spacing: -0.035em; max-width: 18ch; }

main { margin-bottom: 0; border-radius: 0; }
.foot { position: relative; height: auto; background: #000; padding-top: clamp(48px, 7vw, 88px); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px clamp(32px, 6vw, 96px); }
.foot-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.2em; }
.foot-logo img { width: 28px; height: 28px; border-radius: 8px; }
.foot-tag { margin-top: 20px; max-width: 18ch; font-family: var(--font-brand); font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: rgb(255 255 255 / 0.7); }
.foot-col .f-label { margin: 0 0 4px; font-family: var(--font-brand); font-size: 15px; font-weight: 500; color: #fff; }
.foot-col a { color: rgb(255 255 255 / 0.7); text-decoration: none; }
.foot-col a:hover { color: #fff; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; box-shadow: 0 -1px 0 rgb(255 255 255 / 0.12); font-size: 13px; color: rgb(255 255 255 / 0.55); }
.foot-lang { color: rgb(255 255 255 / 0.8); background: none; border: 0; cursor: pointer; font: inherit; }

@media (min-width: 1600px) {
  :root { --wrap-max: 1280px; --video-max: 820px; }
}

/* Narrow screens keep the three banners that carry the story: the made-up number, the client's question, the reply. */
@media (max-width: 1100px) {
  .floats { --settle: 2800ms; }
  .float { width: 272px; padding: 10px 12px 10px 10px; }
  .f1, .f3 { display: none; }
  .f2 { --in: 400ms; left: 0; right: auto; top: 18%; }
  .f4 { --in: 1300ms; }
}
/* Short laptop screens (13" MacBooks) leave the stage too short for the left pair at their default spots, so they spread apart. */
@media (min-width: 1101px) and (max-height: 820px) {
  .f1 { top: 8%; }
  .f3 { bottom: 6%; }
}
/* After signup the ticket takes the hero's height, so the stage gets the same three-banner story. */
.hero:has(#ticketSlot:not([hidden])) :is(.f1, .f3) { display: none; }
.hero:has(#ticketSlot:not([hidden])) .f2 { left: 0; right: auto; top: 18%; }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-menu { display: grid; }
  .faq-layout, .about-layout, .contact-layout { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .fx .chat-thread { height: min(400px, 42svh); }
  .msg { font-size: 13px; }
}

@media (max-width: 720px) {
  main { margin-bottom: 0; border-radius: 0; }
  .last { border-radius: 0; }
  .foot { position: static; height: auto; padding-top: 48px; }
  .giant { margin-top: 24px; }
  .plus { display: none; }
  .floats { position: relative; order: 1; display: grid; gap: 10px; width: min(100%, 360px); margin-top: 14px; }
  .float { position: relative; inset: auto; width: 100%; }
  .f4 { animation-name: banner-in, banner-settle; }
  .js .floats:not(.go) .float, .js .floats:not(.go) .float::before, .js .floats:not(.go) .float::after { animation-play-state: paused; }
  .foot { padding-bottom: env(safe-area-inset-bottom); }
  .card { grid-template-columns: 1fr; min-height: 0; gap: 18px; }
  .card h3 { margin-top: 8px; }
  .card-art { min-height: 180px; padding: 18px; }
}

@media (max-width: 640px) {
  .brand-word { display: none; }
  .hero { padding-top: 84px; }
  .vbar { padding: 0 12px; }
  .vby { display: none; }
  .join-form { flex-direction: column; align-items: stretch; }
  .join-form input[type="email"] { flex: none; }
  .join-form .btn { width: 100%; }
  .ticket { grid-template-columns: 1fr; }
  .ticket-stub { box-shadow: 0 0.5px 0 var(--hairline); padding: 20px 22px; }
  .ticket-body { padding: 20px 22px; }
  .ticket-link { flex-wrap: wrap; }
  .ticket-link .ticket-share { flex: 1 1 100%; }
  .ms { grid-template-columns: 54px 1fr; }
  .ms-s { grid-column: 2; justify-self: start; }
  .sdlg { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 96vh; border-radius: var(--radius-window) var(--radius-window) 0 0; }
  .sd-card { max-height: 96vh; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .sd-link { flex-wrap: wrap; }
  .sd-link input { flex-basis: 100%; }
  .sd-link .btn { flex: 1; }
  .h2 { font-size: clamp(26px, 8vw, 34px); }
  .hero-sub, .about-lead, .contact-lead { font-size: 16px; }
}

@media (max-width: 420px) {
  .nav-right > .lang-toggle { display: none; }
  .menu-lang { display: block; }
}

@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .hero-line { font-size: 28px; }
  .nav-right .btn.lang-toggle { padding: 0 10px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .floats { display: none; }
  .hero { padding-top: 76px; }
  .hero-line { margin-top: 0; font-size: clamp(26px, 4vw, 40px); }
  .faq-side { position: static; }
  .fx .stick { --sp: 1 !important; }
  .fx .stick::after { display: none; }
  .fx .stick > .fcard { position: static; }
  .fx .chat-thread { height: auto; -webkit-mask-image: none; mask-image: none; }
  .fx .chat-thread > :not(.on, .past) { display: block; }
  .fx .chat-compose .ph { display: none; }
  .fx .typed-src { display: inline; }
}

.vcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.vcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-window); background: var(--card-top), var(--surface); box-shadow: var(--shadow-sheet); }
.vcard-art { display: grid; place-items: center; align-content: center; gap: 12px; min-height: 220px; padding: 28px 22px; background: radial-gradient(circle, rgb(10 10 10 / 0.07) 1px, transparent 1.5px) 0 0 / 14px 14px, var(--bg); border-bottom: 1px solid var(--hairline-soft); }
.vcard-body { padding: 4px 24px 26px; }
.vcard h3 { margin-top: 8px; font: 400 clamp(20px, 1.9vw, 24px)/1.2 var(--font-brand); letter-spacing: -0.025em; }
.vcard-body h3 + p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--secondary-label); }
.mini-doc { display: grid; gap: 9px; width: min(100%, 260px); padding: 16px 18px; border-radius: var(--radius-notification); background: var(--surface); box-shadow: var(--shadow-banner); text-align: left; }
.mini-doc b { font-size: 13px; font-weight: 600; }
.mini-check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--secondary-label); }
.mini-check::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.mini-ask { display: grid; gap: 14px; width: min(100%, 260px); padding: 18px; border-radius: var(--radius-notification); background: var(--surface); box-shadow: var(--shadow-banner); text-align: center; }
.mini-ask p { margin: 0; font-size: 14px; font-weight: 500; }
.mini-ask div { display: flex; justify-content: center; gap: 8px; }
.mini-btn { padding: 7px 16px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; }
.mini-btn.ghost { background: var(--bg); color: var(--label); box-shadow: inset 0 0 0 1px var(--hairline); }
.ceo-quote { margin: clamp(48px, 7vw, 88px) auto 0; max-width: 820px; text-align: center; }
.ceo-quote blockquote { margin: 0; font: 400 clamp(24px, 3.2vw, 38px)/1.25 var(--font-brand); letter-spacing: -0.03em; text-wrap: balance; }
.ceo-quote blockquote::before { content: "\201C"; }
.ceo-quote blockquote::after { content: "\201D"; }
.ceo-quote figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; text-align: left; font-size: 14px; }
.ceo-quote figcaption b { display: block; font-weight: 600; }
.ceo-quote figcaption span span { color: var(--secondary-label); }
.ceo-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: url("../assets/team/anthony.webp") center / cover no-repeat; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--hairline); }

.about { position: relative; overflow: clip; padding-bottom: calc(12vw + 48px); }
.about .wrap { position: relative; z-index: 1; }
.skyline { position: absolute; inset: auto 0 0; z-index: 0; margin: 0; pointer-events: none; }
.skyline svg { display: block; width: 100%; height: auto; }
.s-lines path { fill: #fff; stroke: #d4d4d4; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.s-lines path:last-child, .s-lines .cable { fill: none; }
.s-lines .cable { stroke-width: 0.75; }
.js .skyline .s-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.js .skyline.in .s-lines path { animation: sky-draw 2.6s var(--spring-smooth) forwards, sky-fill 1s ease 1.4s forwards; }
.js .skyline.in .s-lines path:nth-child(n+5) { animation-delay: 0.35s, 1.75s; }
.js .skyline.in .s-lines path:nth-child(n+12) { animation-delay: 0.7s, 2.1s; }
/* Non-scaling strokes make the normalized dash a little short at some sizes, so the dash is dropped once drawn. */
@keyframes sky-draw { 0% { stroke-dasharray: 1; stroke-dashoffset: 1; } 99% { stroke-dasharray: 1; stroke-dashoffset: 0; } 100% { stroke-dasharray: none; stroke-dashoffset: 0; } }
@keyframes sky-fill { to { fill-opacity: 1; } }

.talk-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.talk .sect-head { margin-bottom: 0; }
.talk-rules { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; color: var(--secondary-label); }
.talk-rules li { display: flex; gap: 10px; align-items: baseline; }
.talk-rules li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); translate: 0 -2px; }
.talk-card { display: flex; flex-direction: column; height: clamp(460px, 62vh, 600px); overflow: hidden; border-radius: var(--radius-window); background: var(--card-top), var(--surface); box-shadow: var(--shadow-sheet); }
.talk-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--hairline-soft); font-size: 13px; font-weight: 500; }
.talk-list { flex: 1; min-height: 0; margin: 0; padding: 18px; list-style: none; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; }
.cmsg { max-width: 82%; align-self: flex-start; }
.cmsg.mine { align-self: flex-end; text-align: right; }
.cmsg-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: 12px; color: var(--secondary-label); }
.cmsg.mine .cmsg-head { justify-content: flex-end; }
.cmsg-head b { font-weight: 500; color: var(--label); }
.cmsg p { margin: 0; display: inline-block; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline-soft); font-size: 15px; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.cmsg.mine p { border-radius: 14px 14px 4px 14px; background: var(--accent); box-shadow: none; color: #fff; }
.cmsg-del { padding: 0; border: 0; background: none; font: inherit; color: var(--secondary-label); text-decoration: underline; cursor: pointer; }
.cempty { margin: auto; color: var(--secondary-label); font-size: 15px; text-align: center; }
.talk-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 14px; border-top: 1px solid var(--hairline-soft); }
.talk-form textarea { min-height: 44px; max-height: 120px; padding: 11px 14px; border: 0; border-radius: var(--radius-field); background: var(--bg); box-shadow: var(--shadow-field); font: 15px/1.45 var(--font-ui); color: var(--label); resize: none; field-sizing: content; }
.talk-form textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.talk-form .btn { height: 44px; align-self: end; }
.talk-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 0; font-size: 12px; color: var(--secondary-label); }
.talk-form .form-msg { grid-column: 1 / -1; min-height: 0; margin: 0; }
.talk-form .form-msg:empty { display: none; }
.talk-card .name-box { margin: 0; padding: 12px 18px; border-top: 1px solid var(--hairline-soft); font-size: 14px; }
.talk-card .name-form { margin-top: 10px; }
.talk-gate { margin: 0; padding: 16px 18px; border-top: 1px solid var(--hairline-soft); font-size: 14px; color: var(--secondary-label); }
.talk-card { position: relative; }
.talk-lock { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-top: 1px solid var(--hairline-soft); background: var(--bg); }
.talk-lock[hidden] { display: none; }
.talk-lock p { flex: 1; min-width: 0; margin: 0; font-size: 14px; color: var(--secondary-label); }
.talk-lock .btn { flex: none; height: 40px; }
.talk-lock-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-control); color: var(--accent); }
.talk-lock-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

@media (max-width: 980px) {
  .foot-top { grid-template-columns: 1fr; }
  .perks .ms-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talk-grid { grid-template-columns: 1fr; }
  .vcards { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .talk-card { height: 520px; }
}
@media (max-width: 640px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-col:last-child { grid-column: 1 / -1; }
  .perks .ms-list { grid-template-columns: 1fr; }
  .perks .ms { min-height: 0; }
  .talk-form textarea { font-size: 16px; }
  .fx .fcard .chat-thread { height: 300px; }
  .hero { padding-top: 104px; }
}

@media (pointer: coarse) {
  .field, .ticket-link input, .sd-link input, .name-form input[type="text"] { font-size: 16px; }
  .field { height: 44px; }
  .btn, .nav-right .btn, .sd-actions .btn, .ticket-link .btn, .sd-link .btn, .name-form .btn { height: 44px; }
  .ticket-link input, .sd-link input, .name-form input[type="text"] { height: 44px; }
  .check { min-height: 44px; }
  .check input { width: 20px; height: 20px; }
  .sd-x, .vclose { width: 44px; height: 44px; }
  .text-btn { min-height: 44px; }
  .faq-item summary { padding: 22px 0; }
  .talk-lock .btn { height: 44px; }
  .nav-menu { width: 44px; height: 44px; }
  .brand { min-height: 44px; }
  .foot-lang { min-height: 44px; padding: 0 6px; }
}

@media (forced-colors: active) {
  .btn, .field, .join-form input[type="email"], .ticket-link input, .sd-link input, .name-form input[type="text"], .vwin, .float, .chat, .card, .card-art, .banner, .fact, .ticket, .contact-form, .contact-done, .sd-ch, .menu-sheet, .nav.scrolled, .nav-menu { border: 1px solid CanvasText; }
  .marquee-track img { filter: none; forced-color-adjust: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .float { background: rgb(246 246 248); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .skyline .s-lines path, .js .skyline.in .s-lines path { animation: none; stroke-dasharray: none; fill-opacity: 1; }
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; translate: 0 0; transition: none; }
  .float, :focus-visible, .hero-line > span, .hero-sub, .hero .join { animation: none; }
  .float::before { animation: none; opacity: 0.6; }
  .float:not(.f5)::after { animation: none; opacity: 1; }
  .vwin, .marquee-track { animation: none; }
  .js .h2.rv, .js .last-title.rv { filter: none; translate: 0 0; }
  .menu-sheet { transition: none; }
  .btn, .sdlg, .sdlg::backdrop, .vplay-btn, .ms, .meter b, .nav, .nav-cta, .faq-item summary i::before, .faq-item summary i::after { transition: none; }
  .chat-thread > * { animation: none; }
}

.steps-title { font-family: var(--font-brand); font-weight: 500; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; line-height: 1.15; text-align: center; text-wrap: balance; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.steps li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: var(--radius-notification); background: var(--surface); box-shadow: var(--shadow-control); }
.step-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
.steps h3 { font-family: var(--font-brand); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.steps p { margin-top: 4px; font-size: 14px; color: var(--secondary-label); text-wrap: pretty; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.ticket-jump { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--label); }
.how-cta { margin-top: 28px; text-align: center; }
.how .counters { display: flex; justify-content: center; margin-top: 22px; }
.how .counter { text-align: center; }
.how .counter .num { font-size: clamp(36px, 5vw, 52px); }
.ticket-num.small { font-size: 22px; letter-spacing: 0; line-height: 1.3; }

/* Montserrat is wider than the old headline face, so headlines get less negative tracking. */
.h2, .hero-line, .last-title, .ceo-quote blockquote, .sd-head h2 { letter-spacing: -0.02em; }

/* Headline lines stay on one row on wider screens; the divisor is the longest line's width in ems.
   French matches English until its longer gray line would run past the nav, then shrinks to fit inside it. */
@media (min-width: 720px) {
  .hero .hero-line { max-width: none; font-size: clamp(30px, min(calc((100vw - 2 * var(--gutter)) / 17.1), 7.2vh), 72px); }
  :lang(fr) .hero .hero-line { font-size: clamp(30px, min(calc((100vw - 2 * var(--gutter)) / 17.1), 7.2vh, calc(min(100vw - 2 * var(--gutter), var(--wrap-max, 1152px)) / 22.4)), 72px); }
  .hero-line > span { white-space: nowrap; }
}

/* The poster keeps the image's own ratio so it is never cropped. */
.vwin { aspect-ratio: auto; }
.vposter { flex: none; aspect-ratio: 1672 / 941; }
/* The hero fills one screen: the copy takes what it needs, the stage gets the rest, and the video
   (44px bar + 1672/941 poster) is sized to that leftover height so it is never cut off at the fold. */
.hero { min-height: 100svh; }
.hero, main > section, .foot { scroll-snap-align: start; }
.hero-stage { flex: 1 0 0; min-height: 260px; container-type: size; align-items: flex-start; }
.hero .vwin { width: min(100%, 880px, (100cqh - 44px) * 1672 / 941); }
/* Phones stack the banners under the video, so the stage grows with its content instead of filling the screen. */
@media (max-width: 720px) {
  .hero-stage { flex: none; flex-direction: column; align-items: center; min-height: 0; container-type: inline-size; }
  .hero .vwin { width: 100%; }
}

/* The feature cards stay pinned while their scroll story plays, so the chat finishes before the page moves on. */
.fx .stick::after { content: ""; display: block; height: var(--dwell, 100vh); }
.fx .stick > .fcard { position: sticky; }

/* Vision cards: the mock UI inside each card tilts up out of the page as the card fades in. */
.vcard-art { perspective: 800px; }
.vcard:nth-child(2) { --d: 90ms; }
.vcard:nth-child(3) { --d: 0ms; }
.vcard:nth-child(4) { --d: 90ms; }
.js .vcard.rv .vcard-art > *,
.js .vcard.rv :is(.mini-check, .mini-btn) {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--d, 0ms) + var(--k, 160ms));
}
.js .vcard.rv .vcard-art > * { transform: rotateX(42deg) translate3d(0, 34px, -90px); transform-origin: 50% 100%; }
.js .vcard.rv .mini-ask { transform: rotateY(-28deg) rotateX(16deg) translate3d(0, 20px, -100px); }
.js .vcard.rv .js .vcard.rv .mini-check { transform: rotateY(-55deg) translate3d(-14px, 0, -40px); transform-origin: 0 50%; }
.js .vcard.rv .mini-btn { transform: translate3d(0, 8px, -60px); }
.mini-check:nth-of-type(1) { --k: 480ms; }
.mini-check:nth-of-type(2) { --k: 570ms; }
.mini-check:nth-of-type(3) { --k: 660ms; }
.mini-btn { --k: 520ms; }
.mini-btn.ghost { --k: 600ms; }
.js .vcard.rv.in .vcard-art > *,
.js .vcard.rv.in :is(.mini-check, .mini-btn) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .vcard.rv .vcard-art > *,
  .js .vcard.rv :is(.mini-check, .mini-btn) { opacity: 1; transform: none; transition: none; }
}

/* The last beat of the chat: you type a reply the AI should not need, and the send button waits for you. */
.chat-compose { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; box-shadow: 0 -0.5px 0 var(--hairline); }
.chat-input { flex: 1; min-height: 38px; display: flex; align-items: center; padding: 8px 14px; border-radius: 19px; background: var(--fill); font-size: 14px; line-height: 1.35; text-align: left; }
.chat-input .ph { display: none; color: var(--secondary-label); }
.fx .typed-src { display: none; }
.fx .chat-compose:not(.on, .past) .ph { display: inline; }
.fx .chat-compose.on .typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.15em; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chat-send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fill-strong); color: var(--secondary-label); transition: background 0.3s, color 0.3s; }
.chat-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-compose.done .chat-send { background: var(--accent); color: #fff; animation: send-ring 1.3s 0.2s ease-out 3; }
@keyframes send-ring { from { box-shadow: 0 0 0 0 rgb(23 75 186 / 0.45); } to { box-shadow: 0 0 0 12px rgb(23 75 186 / 0); } }

/* Context decay: older messages blur and fade as the thread grows, and the header gauge drains with scroll. */
.chat-bar { position: relative; }
.ctx { position: absolute; right: 14px; top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--secondary-label); }
.fx .chat:has(.chat-compose.on) .chat-thread > .past { filter: blur(calc(var(--age, 0) * 0.28px)); opacity: calc(1 - var(--age, 0) * 0.085); transition: filter 0.5s ease-out, opacity 0.5s ease-out; }

.join-note { margin-top: 10px; font-size: 13px; line-height: 1.45; text-wrap: balance; color: var(--secondary-label); text-align: center; }
.join-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.join:has(#ticketSlot:not([hidden])) .join-note { display: none; }

/* What we've noticed: one problem per row, with a sourced real-world case beside it. */
.notices { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.notice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 14px clamp(24px, 5vw, 64px); padding: clamp(24px, 3vw, 34px) 0; border-bottom: 1px solid var(--hairline); }
.notice h3 { font: 400 clamp(22px, 2.4vw, 30px)/1.2 var(--font-brand); letter-spacing: -0.025em; text-wrap: balance; }
.notice-src { margin-top: 10px; font-size: 12px; color: var(--secondary-label); }
.notice-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) { .notice { grid-template-columns: 1fr; gap: 10px; } }

.vcard-wide, .vcard-hero { grid-column: 1 / -1; }
.vcard-wide { flex-direction: row; align-items: center; gap: 18px; padding: 22px 24px; }
.vcard-wide .vcard-body { padding: 0; }
.vcard-wide h3 { margin-top: 0; }
.vcard-lock { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgb(23 75 186 / 0.08); color: var(--accent); }
.vcard-lock svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (max-width: 560px) { .vcard-wide { flex-direction: column; align-items: flex-start; } }


/* Each finding is one short line plus a figure that animates in when its row is revealed. */
.notice-cap { margin-top: 8px; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--secondary-label); text-wrap: pretty; }
.nv { display: grid; gap: 18px; }
.nv-row { display: grid; gap: 8px; }
.nv-k { font-size: 13px; font-weight: 500; color: var(--secondary-label); }
.nv-fig { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-brand); line-height: 1; }
.nv-num { font-size: clamp(40px, 4.6vw, 56px); font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.nv-unit { font-size: clamp(20px, 2vw, 26px); color: var(--secondary-label); }
:lang(fr) .nv-unit { margin-left: 0.15em; }
.nv-track { display: block; height: 8px; border-radius: 4px; background: var(--fill-strong); overflow: hidden; }
.nv-track i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; transform: scaleX(var(--v)); }
.fx .notice .nv-track i { transform: scaleX(0); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.fx .notice.on .nv-track i { transform: scaleX(var(--v)); }
.nv-dots { display: grid; grid-template-columns: repeat(9, 18px); gap: 8px; }
.nv-dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--fill-strong); }
.nv-dots i.on { background: var(--accent); }
.fx .notice .nv-dots i { opacity: 0; scale: 0.4; transition: opacity 0.4s ease-out, scale 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(0.15s + var(--i) * 40ms); }
.fx .notice.on .nv-dots i { opacity: 1; scale: 1; }
.nv-prefs { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-prefs span { position: relative; padding: 7px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-control); font-size: 14px; color: var(--label); transition: color 0.5s ease-out; }
.nv-prefs span::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; background: var(--danger); transform-origin: left; transform: scaleX(1); }
.nv-prefs span { color: var(--secondary-label); }
.fx .notice .nv-prefs span { color: var(--label); }
.fx .notice .nv-prefs span::after { transform: scaleX(0); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.fx .notice.on .nv-prefs span { color: var(--secondary-label); transition-delay: calc(0.9s + var(--n, 0) * 0.25s); }
.fx .notice.on .nv-prefs span::after { transform: scaleX(1); transition-delay: calc(0.9s + var(--n, 0) * 0.25s); }
.nv-prefs span:nth-child(2) { --n: 1; }
.nv-prefs span:nth-child(3) { --n: 2; }
@media (max-width: 720px) {
  .notice { align-items: start; gap: 18px; }
  .nv-dots { grid-template-columns: repeat(9, 1fr); gap: 6px; max-width: 260px; }
  .nv-dots i { width: auto; aspect-ratio: 1; height: auto; }
}
@media (max-width: 720px) { .vcard-art { min-height: 168px; padding: 22px 18px; } }

/* The treadmill clock runs from 0:00 to 3:00 with scroll and warms toward red as time is lost. */
.ctx { font-variant-numeric: tabular-nums; font-weight: 600; color: color-mix(in oklab, var(--danger) calc(var(--sp, 1) * 100%), var(--secondary-label)); }
.ctx svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Vision illustrations. Every animated piece has its finished state as the default, so no-JS and
   reduced-motion visitors see the end of each story. */
.js .vcard.rv .seq { opacity: 0; translate: 0 6px; transition: opacity 0.5s ease-out, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--d, 0ms) + var(--k, 0ms)); }
.js .vcard.rv.in .seq { opacity: 1; translate: 0 0; }

.mini-ai { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 4px rgb(23 75 186 / 0.12); }
.mini-ai svg { width: 16px; height: 16px; fill: currentColor; }
.js .vcard.in .mini-ai { animation: ai-watch 2.6s ease-out infinite; }
@keyframes ai-watch { 0% { box-shadow: 0 0 0 0 rgb(23 75 186 / 0.35); } 100% { box-shadow: 0 0 0 12px rgb(23 75 186 / 0); } }


.mini-rule { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--success-fill); color: var(--success-text); font-size: 12px; font-weight: 500; line-height: 1.3; text-align: left; }
.mini-rule svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini-rule .tick { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .vcard.rv .mini-rule .tick { stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s ease-out calc(var(--d, 0ms) + 1100ms); }
.js .vcard.rv.in .mini-rule .tick { stroke-dashoffset: 0; }

.mini-step { display: flex; align-items: center; gap: 8px; margin: 0 -8px; padding: 7px 8px; border-radius: 8px; background: var(--success-fill); font-size: 13px; color: var(--label); }
.mini-val { margin-left: auto; display: inline-flex; white-space: nowrap; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-val s { position: relative; text-decoration: none; color: var(--secondary-label); }
.mini-val s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; background: var(--danger); transform-origin: left; }
.mini-val em { font-style: normal; color: var(--success-text); }
.mini-edit { padding: 3px 9px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); font-size: 12px; font-weight: 500; }
.vcard .mini-fix .mini-done { --k: 1900ms; }
.js .vcard.rv .mini-step { background: rgb(180 95 6 / 0.1); transition: background 0.5s ease-out calc(var(--d, 0ms) + 1500ms); }
.js .vcard.rv.in .mini-step { background: var(--success-fill); }
.js .vcard.rv .mini-val s::after { transform: scaleX(0); transition: transform 0.4s ease-out calc(var(--d, 0ms) + 1350ms); }
.js .vcard.rv.in .mini-val s::after { transform: scaleX(1); }
.js .vcard.rv .mini-val em { opacity: 0; transition: opacity 0.4s ease-out calc(var(--d, 0ms) + 1550ms); }
.js .vcard.rv.in .mini-val em { opacity: 1; }
.js .vcard.rv.in .mini-edit { animation: edit-press 0.5s ease-out calc(var(--d, 0ms) + 1100ms) both; }
@keyframes edit-press { 40% { scale: 0.88; background: var(--accent); color: #fff; } }

@media (prefers-reduced-motion: reduce) {
  .js .vcard.rv .seq { opacity: 1; translate: 0 0; transition: none; }
  .js .vcard.rv .mini-rule .tick { stroke-dashoffset: 0; transition: none; }
  .js .vcard.rv .mini-step { background: var(--success-fill); transition: none; }
  .js .vcard.rv .mini-val s::after { transform: scaleX(1); transition: none; }
  .js .vcard.rv .mini-val em { opacity: 1; transition: none; }
  .js .vcard .mini-ai, .js .vcard .mini-edit { animation: none; }
}

.mini-kept { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgb(23 75 186 / 0.08); color: var(--accent); font-size: 12px; font-weight: 600; }
.mini-kept::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.mini-ctx { display: grid; gap: 9px; width: min(100%, 270px); padding: 14px 16px 16px; border-radius: var(--radius-notification); background: var(--surface); box-shadow: var(--shadow-banner); text-align: left; }
.mc-msg { display: flex; gap: 10px; padding-bottom: 11px; margin-bottom: 2px; border-bottom: 1px solid var(--hairline); }
.mc-ava { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e4ebf7; color: var(--accent); font-size: 12px; font-weight: 600; }
.mc-msg b { display: block; font-size: 12px; font-weight: 600; }
.mc-msg p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--secondary-label); }
.mc-ready { display: flex; align-items: center; gap: 8px; margin-top: 3px; padding: 8px 10px; border-radius: 10px; background: rgb(23 75 186 / 0.08); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.mc-ready svg { flex: none; width: 14px; height: 14px; fill: currentColor; }

/* Learns how you work. js/vision.js scrubs a looping timeline through inline styles and the custom
   properties below. Their defaults are the end of the story, for no-JS and reduced motion. */
.vcard-hero .vcard-art { container: learn / inline-size; min-height: 330px; padding: 34px 24px; }
.vcard-hero h3 { font-size: clamp(22px, 2.3vw, 30px); }
.vcard-hero .vcard-body { order: -1; max-width: 640px; padding-top: 26px; padding-bottom: 22px; }
.vcard-hero .vcard-art { border-bottom: 0; border-top: 1px solid var(--hairline-soft); }
.learn { --link-a: 1; --link-b: 1; position: relative; display: grid; grid-template-columns: 190px 220px minmax(0, 300px); gap: 40px; align-items: center; justify-content: center; width: 100%; text-align: left; }
.lw-sent { display: grid; gap: 10px; }
.lw-mail { padding: 9px 12px 11px; border-radius: var(--radius-notification); background: var(--surface); box-shadow: var(--shadow-banner); font-size: 11.5px; line-height: 1.45; color: var(--secondary-label); }
.lw-mail:nth-child(2) { margin-left: 14px; }
.lw-mail p { margin: 4px 0 0; }
.lw-mail mark { padding: 0 2px; border-radius: 4px; color: var(--label); font-weight: 600; background: linear-gradient(rgb(23 75 186 / 0.14), rgb(23 75 186 / 0.14)) no-repeat 0 0 / var(--hl, 100%) 100%; }
.lw-from { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; }
.lw-from svg, .lw-trait svg, .learn .chip svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lw-way { position: relative; display: grid; gap: 7px; padding: 14px; border-radius: var(--radius-notification); background: var(--surface); box-shadow: var(--shadow-banner); }
.lw-way::before, .lw-way::after { content: ""; position: absolute; top: 50%; width: 40px; border-top: 1.5px dashed rgb(23 75 186 / 0.5); transform-origin: left; }
.lw-way::before { right: 100%; transform: scaleX(var(--link-a)); }
.lw-way::after { left: 100%; transform: scaleX(var(--link-b)); }
.lw-way b { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.lw-way .mini-ai { width: 24px; height: 24px; box-shadow: 0 0 0 3px rgb(23 75 186 / 0.12); }
.lw-way .mini-ai svg { width: 12px; height: 12px; }
.lw-way small { margin: -3px 0 3px; font-size: 11px; color: var(--secondary-label); }
.lw-trait { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--hairline); font-size: 12px; font-weight: 600; line-height: 1.3; transition: box-shadow 0.25s ease-out, background 0.25s ease-out; }
.lw-trait svg { padding: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgb(23 75 186 / 0.1); color: var(--accent); stroke-width: 2.6; }
.lw-trait.on { background: rgb(23 75 186 / 0.06); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lw-draft { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-notification); background: var(--surface); box-shadow: var(--shadow-banner); }
.lw-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--hairline); font-size: 12px; font-weight: 600; }
.lw-top .lw-flip { margin-left: auto; }
.lw-field { display: flex; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--hairline); font-size: 12px; }
.lw-field span { color: var(--secondary-label); }
.lw-body { height: 184px; overflow: hidden; padding: 10px 12px 0; font-size: 12px; line-height: 1.55; white-space: pre-wrap; -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
.lw-sig { padding: 0 2px; background: linear-gradient(transparent 55%, rgb(23 75 186 / 0.22) 55%, rgb(23 75 186 / 0.22) 92%, transparent 92%) no-repeat 0 0 / var(--hl, 100%) 100%; }
.lw-caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--accent); opacity: 0; }
.lw-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; }
.lw-send { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; transition: background 0.3s, color 0.3s; }
.lw-send.off { background: var(--fill-strong); color: var(--secondary-label); }
.learn .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.learn .chip.neutral { background: var(--fill); color: var(--secondary-label); }
.learn .chip.info { background: rgb(23 75 186 / 0.1); color: var(--accent); }
.learn .chip.bad { background: rgb(196 43 28 / 0.1); color: var(--danger); }
.learn .chip.ok { background: var(--success-fill); color: var(--success-text); }
.lw-flip { --f: 1; display: inline-grid; perspective: 400px; }
.lw-flip > * { grid-area: 1 / 1; justify-self: start; backface-visibility: hidden; }
.lw-flip > :first-child { transform: rotateX(calc(var(--f) * 180deg)); }
.lw-flip > :last-child { transform: rotateX(calc(var(--f) * 180deg - 180deg)); }
.lw-top .lw-flip > * { justify-self: end; }
@container learn (max-width: 800px) {
  .learn { grid-template-columns: minmax(0, 210px) minmax(0, 300px); gap: 32px; }
  .lw-sent, .lw-way::before { display: none; }
  .lw-way::after { width: 32px; }
}
@container learn (max-width: 500px) {
  .learn { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 340px; }
  .lw-way::after { display: none; }
  .lw-way { grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; }
  .lw-way b, .lw-way small { grid-column: 1 / -1; }
  .lw-trait { padding: 6px 7px; font-size: 11px; }
  .lw-body { height: 172px; }
}

/* Apple-style pinned stage: the header and a five-part progress bar hold still while each finding
   takes the stage in turn. Without fx (no JS or reduced motion) it stays a plain list. */
.notice-prog { display: none; }
.fx .stick > .notice-stage { position: sticky; }
.fx .notice-stage { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.fx .notice-head { margin: 0; }
.fx .notice-prog { display: flex; gap: 6px; margin-top: 32px; max-width: 320px; }
.fx .notice-prog i { position: relative; flex: 1; height: 3px; border-radius: 2px; overflow: hidden; background: var(--fill-strong); }
.fx .notice-prog i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(clamp(0, calc(var(--sp, 0) * 5 - var(--i)), 1)); }
.fx .notices { display: grid; border: 0; }
.fx .notice { grid-area: 1 / 1; align-content: start; grid-template-columns: 1fr; gap: 28px; padding: 0; border: 0; opacity: 0; translate: 0 48px; filter: blur(8px); pointer-events: none;
  transition: opacity 0.6s ease-out, translate 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease-out; }
.fx .notice.past { translate: 0 -48px; }
.fx .notice.on { opacity: 1; translate: 0 0; filter: none; pointer-events: auto; }
.fx .notice h3 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; }
.fx .notice .notice-cap { font-size: 17px; }
.fx .notice .nv-num { font-size: clamp(56px, 7vw, 92px); }
.fx .notice .nv-unit { font-size: clamp(24px, 2.6vw, 34px); }
.fx .notice .nv-track { height: 10px; border-radius: 5px; }
.fx .notice .nv-prefs span { padding: 9px 16px; font-size: 15px; }
@media (max-width: 860px) {
  .fx .notice-stage { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .fx .notice-head .sect-sub { display: none; }
  .fx .notice-head .h2 { font-size: clamp(26px, 7vw, 34px); }
  .fx .notice-prog { margin-top: 18px; }
  .fx .notice { gap: 20px; }
  .fx .notice h3 { font-size: clamp(24px, 6.4vw, 30px); }
  .fx .notice .notice-cap { font-size: 15px; }
  .fx .notice .nv-num { font-size: clamp(48px, 13vw, 64px); }
}

/* Low highlight: a marker band under the lower part of the word. In the pinned stage it draws in as the section locks. */
.lowlight { padding: 0 0.08em; margin: 0 -0.04em; color: inherit; background: linear-gradient(transparent 58%, rgb(23 75 186 / 0.2) 58%, rgb(23 75 186 / 0.2) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fx .notice-stick .lowlight { background-size: calc(clamp(0, var(--sp, 1) * 10, 1) * 100%) 100%; }
.hero-line .lowlight { color: var(--label); background-image: linear-gradient(transparent 60%, rgb(23 75 186 / 0.1) 60%, rgb(23 75 186 / 0.1) 92%, transparent 92%); animation: lowlight-in 900ms var(--spring-smooth) 750ms both; }
@keyframes lowlight-in { from { background-size: 0% 100%; } }
@media (prefers-reduced-motion: reduce) { .hero-line .lowlight { animation: none; } }
@media (prefers-reduced-motion: reduce) and (min-width: 721px) { .f4 { translate: 0 12px; scale: 0.94; } .f4, .f5 { transition: none; } }
/* Hovering the reply fans the stack open to show the client's email underneath. The animations own
   translate and scale, so the fan uses transform, which composes on top of them. */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .f4, .f5 { pointer-events: auto; cursor: default; transition: transform 520ms var(--spring-smooth), box-shadow 520ms var(--spring-smooth); }
  .floats:has(.f4:hover, .f5:hover) .f5 { transform: translate(-18px, -62px) rotate(-4deg); box-shadow: 0 0 0 1px var(--hairline), 0 2px 4px rgb(0 0 0 / 0.08), 0 20px 32px -12px rgb(0 0 0 / 0.24); }
  .floats:has(.f4:hover, .f5:hover) .f4 { transform: translate(8px, 14px) rotate(2.5deg) scale(1.064); }
  .floats:has(.f4:hover, .f5:hover) .f4::after { background-color: transparent; }
}