/* The coming-soon site: Coming soon, Waitlist and Vision (Hicham's format, 16 October 2026). The wordmark set in Neue
   Haas Unica; Sabon for titles; the warm paper of his mock; no sign-in (anyone could sign up there: a back door).
   No inline script: the graphic is graphic.js and the form is waitlist.js, files of the site. */
:root { --paper: #FAFAF9; --blue-soft: #EEF2FF; --card: #FFFFFF; --line: #E4E1DB; --ink: #0F0E0D; --ink-2: #3A3733; --ink-3: #74706A; --blue: #274BD8; --blue-d: #1F3FC2;
  --serif: "linotype-sabon", "EB Garamond", Georgia, serif; --sans: "neue-haas-unica", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 400 17px/1.75 var(--sans); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
a { color: inherit; }

header { background: #fff; padding: 16px 30px 14px; }
.wordmark { font: 700 33px/1 var(--sans); letter-spacing: -.035em; color: var(--ink); text-decoration: none; }

main { overflow-x: clip; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; width: min(1800px, 100%); margin: 0 auto; padding: 68px clamp(56px, 8.4vw, 150px); column-gap: clamp(48px, 5vw, 90px); }
h1 { margin: 0 0 30px; font: 400 clamp(46px, 4.4vw, 64px)/1.05 var(--serif); letter-spacing: -.01em; }
.copy p { margin: 0 0 22px; max-width: 720px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.75; color: var(--ink); }

/* the two calls to action, as Hicham drew them: Waitlist filled, Vision outlined */
.cta { display: flex; gap: 13px; margin-top: 62px; }
.cta-btn { display: inline-grid; place-items: center; min-width: 150px; height: 39px; padding: 0 22px; border: 1px solid var(--blue); border-radius: 8px; background: #fff; color: var(--blue); font: 600 16px/1 var(--sans); text-decoration: none; letter-spacing: .005em; transition: background-color 160ms, color 160ms; }
.cta-btn:hover { background: rgba(39,75,216,.06); }
.cta-btn.primary { background: var(--blue); color: #fff; }
.cta-btn.primary:hover { background: var(--blue-d); border-color: var(--blue-d); }

.art { position: relative; aspect-ratio: 1 / 1; max-height: calc(100vh - 220px); justify-self: center; width: 100%; max-width: 840px; background: var(--card); border: 1px solid var(--line); border-radius: 30px; overflow: hidden; }
.art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

footer { padding: 18px 30px 22px; font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; }
footer nav { display: flex; gap: 18px; } footer a { color: var(--ink-2); text-decoration: none; } footer a:hover { text-decoration: underline; }

@media (max-width: 1080px) { main { grid-template-columns: 1fr; padding: 48px 28px; gap: 40px; } .art { max-height: none; max-width: 640px; } }
@media (max-width: 560px) { header { padding: 14px 18px 12px; } .wordmark { font-size: 28px; } main { padding: 36px 18px 40px; } h1 { margin-bottom: 22px; } .cta { margin-top: 40px; } .cta-btn { min-width: 0; flex: 1; } footer { padding: 16px 18px 20px; flex-direction: column; } .art { border-radius: 22px; } }

/* ── shared pieces ── */
header { display: flex; align-items: center; justify-content: space-between; }
.back { font-size: 14px; color: var(--ink-2); text-decoration: none; } .back:hover { color: var(--ink); }
.kicker { display: block; margin: 0 0 18px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.copy .lead { color: var(--ink-2); }

/* ── waitlist ── */
.form { margin-top: 36px; max-width: 560px; }
.field { margin-bottom: 20px; }
.field label, .field legend { display: block; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.field label small, .field legend small { font-weight: 400; color: var(--ink-3); }
.field input[type=text], .field input[type=email] { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 400 15.5px var(--sans); color: var(--ink); transition: border-color 160ms, box-shadow 160ms; }
.field input::placeholder { color: #A29D95; }
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(39,75,216,.14); }
.field.bad input { border-color: #B4233C; box-shadow: 0 0 0 3px rgba(180,35,60,.10); }
.field .err { display: none; margin: 6px 0 0; font-size: 13px; color: #B4233C; }
.field.bad .err { display: block; }
fieldset.field { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { margin: 0; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 400 14px var(--sans); color: var(--ink-2); cursor: pointer; transition: border-color 140ms, background-color 140ms, color 140ms; }
.chips label:hover { border-color: #C9C4BA; color: var(--ink); }
.chips input:checked + label { border-color: var(--blue); background: rgba(39,75,216,.07); color: var(--blue); }
.chips input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }
.copy .consent { margin: 4px 0 26px; max-width: 520px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.copy .consent a { color: var(--ink-2); }
.submit { height: 46px; min-width: 200px; padding: 0 26px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font: 600 16px var(--sans); cursor: pointer; transition: background-color 160ms; }
.submit:hover { background: var(--blue-d); }
.submit[disabled] { opacity: .7; cursor: progress; }
.done { display: none; max-width: 560px; margin-top: 8px; }
.done .tick { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,107,78,.1); }
.done .tick svg { width: 26px; height: 26px; stroke: #0F6B4E; stroke-width: 2.4; fill: none; stroke-dasharray: 30; stroke-dashoffset: 30; animation: tick 600ms 150ms ease forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.done h2 { margin: 24px 0 14px; font: 400 clamp(44px, 4.4vw, 64px)/1.05 var(--serif); letter-spacing: -.01em; }
.done p { margin: 0 0 14px; color: var(--ink-2); font-size: 18px; }
.done .next { margin-top: 30px; display: flex; gap: 13px; }
body.joined .form, body.joined .copy .lead, body.joined .copy > h1 { display: none; }
body.joined .done { display: block; animation: fadein 500ms ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── vision ── */
.essay { width: min(760px, 100%); margin: 0 auto; padding: 72px 28px 40px; }
.essay h1 { margin: 0 0 26px; }
.essay .intro { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.7; color: var(--ink); }
.film { position: relative; margin: 52px 0 18px; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; }
.film canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.film .play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; }
.film .play span:first-child { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -18px rgba(18,17,16,.45); }
.film .play svg { width: 22px; height: 22px; margin-left: 4px; fill: var(--ink-3); }
.film .play em { font-style: normal; font-size: 14px; color: var(--ink-2); background: rgba(255,255,255,.85); padding: 4px 12px; border-radius: 999px; }
.film-note { margin: 0 0 56px; font-size: 13px; color: var(--ink-3); text-align: center; }
.belief { display: grid; grid-template-columns: 56px 1fr; gap: 0 20px; padding: 34px 0; border-top: 1px solid var(--line); }
.belief:last-of-type { border-bottom: 1px solid var(--line); }
.belief .n { font: 400 20px/1.3 var(--serif); color: var(--blue); padding-top: 4px; }
.belief h2 { margin: 0 0 10px; font: 400 28px/1.2 var(--serif); letter-spacing: -.005em; }
.belief p { margin: 0; font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.closing { margin: 64px 0 24px; text-align: center; }
.closing p { margin: 0 0 28px; font: 400 clamp(26px, 2.6vw, 34px)/1.3 var(--serif); }
.closing .cta { justify-content: center; margin: 0; }

@media (max-width: 560px) {
  .essay { padding: 44px 18px 30px; }
  .belief { grid-template-columns: 1fr; gap: 6px; padding: 28px 0; }
  .submit { width: 100%; }
  .done .next { flex-direction: column; }
}

/* the homepage's paper: our off-white, shading very faintly towards the animation, so it never looks flat */
body.home { background: linear-gradient(100deg, var(--paper) 0%, var(--paper) 36%, #F4F6FD 76%, var(--blue-soft) 100%) fixed; }
@media (max-width: 1080px) { .flow { justify-self: center; } body.home { background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 40%, #F4F6FD 80%, var(--blue-soft) 100%) fixed; } }
/* ── the homepage: Jawahir's net behind the page, Hicham's documents and tray (net.js, flow.js) ── */
canvas.net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.flow { position: relative; width: 100%; max-width: 660px; justify-self: end; --doc-w: 198px; --doc-h: 214px; }
.flow::before { content: ""; position: absolute; inset: 30% -12% -14% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 52% at 28% 72%, rgba(39,75,216,.10), transparent 70%), radial-gradient(42% 46% at 78% 82%, rgba(18,73,94,.08), transparent 70%), radial-gradient(40% 40% at 55% 40%, rgba(147,168,244,.12), transparent 70%); filter: blur(8px); }
.flow canvas.fly { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* the carousel: paper documents drifting left, fading in at the right and out at the left */
.docs { position: relative; height: calc(var(--doc-h) + 34px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 84%, transparent 100%); }
.doc { position: absolute; top: 18px; left: 0; width: var(--doc-w); height: var(--doc-h); padding: 14px 15px; overflow: hidden; will-change: transform;
  background: #fff; border: 1px solid rgba(18,17,16,.07); border-radius: 16px; box-shadow: 0 1px 2px rgba(18,17,16,.04), 0 10px 24px -16px rgba(18,17,16,.18);
  transition: box-shadow .35s, border-color .35s, opacity .5s; }
.doc.reading { border-color: rgba(39,75,216,.28); box-shadow: 0 1px 2px rgba(18,17,16,.04), 0 18px 34px -16px rgba(39,75,216,.30); }
.doc.read { opacity: .8; }
.doc header { all: unset; display: flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--sans); color: var(--ink-2); }
.doc header svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.doc time { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font: 400 10.5px/1 var(--sans); color: var(--ink-3); }
.doc time svg { width: 12px; height: 12px; stroke: var(--blue); stroke-width: 2.4; }
.doc.read time { color: var(--blue); }
.doc h3 { margin: 12px 0 7px; font: 400 18px/1.15 var(--serif); color: var(--ink); letter-spacing: -.005em; }
.doc p { margin: 0; font: 400 11.5px/1.6 var(--sans); color: var(--ink-3); }
.doc mark { background: transparent; color: inherit; border-radius: 3px; padding: 0 1px; transition: background-color .25s, color .25s; }
.doc mark.hit { background: rgba(39,75,216,.13); color: var(--blue); }
.doc .tbl { display: grid; gap: 9px; margin-top: 12px; }
.doc .tbl > div { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #F0EEEA; }
.doc .tbl i { display: block; height: 6px; border-radius: 3px; background: #E6E4DF; }
.doc .tbl > div > i:first-child { background: #D9D6D0; }
.doc .tbl mark { display: block; padding: 3px; margin: -3px; }
.doc .tbl mark.hit i { background: var(--blue); }
.doc p b { font-weight: 600; color: var(--ink-2); }
.doc .chart { display: flex; align-items: flex-end; gap: 9px; height: 96px; margin-top: 16px; padding: 0 2px; border-bottom: 1px solid #E6E4DF; }
.doc .chart i, .doc .chart mark { display: block; flex: 1; padding: 0; border-radius: 3px 3px 0 0; background: #E6E4DF; }
.doc .chart mark.hit { background: var(--blue); }
.doc .prov { position: absolute; left: 15px; bottom: 12px; display: flex; align-items: center; gap: 5px; font: 400 10px/1 var(--sans); color: var(--ink-3); }
.doc .prov::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: .6; }
.doc .scan { position: absolute; left: 10px; right: 10px; height: 1.5px; top: 0; opacity: 0; background: rgba(39,75,216,.65); transition: opacity .2s; }
.doc .scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, rgba(39,75,216,0), rgba(39,75,216,.10)); }
.doc.reading .scan { opacity: 1; }

/* the tray: frosted glass holding three white cards; each card's puzzle is drawn by flow.js */
.tray { margin-top: 74px; padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* liquid glass, shared by the tray and the Coming soon panel: frosted and a little saturated, so the grid and the
   squares the mouse uncovers blur through it; a bright rim, a sheen from the top left, a cool glow below */
.glass { position: relative; border-radius: 26px; border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(140deg, rgba(255,255,255,.64), rgba(255,255,255,.30) 55%, rgba(255,255,255,.44));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.4), inset 0 0 0 .5px rgba(255,255,255,.5), 0 1px 2px rgba(15,14,13,.04), 0 28px 60px -32px rgba(39,75,216,.30);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(110% 70% at 0% 0%, rgba(255,255,255,.6), transparent 46%), radial-gradient(90% 60% at 100% 100%, rgba(238,242,255,.55), transparent 62%); }
.glass > * { position: relative; }

/* the Coming soon panel stands as tall as the illustration beside it: its top level with the documents, its foot
   level with the tray; the words sit in the middle of it */
body.home main { align-items: stretch; align-content: center; }
body.home .copy.glass { --pad: clamp(30px, 3.2vw, 52px); align-self: stretch; margin-top: 18px; display: flex; flex-direction: column; justify-content: center; padding: var(--pad); }
body.home .copy.glass h1 { font-size: clamp(40px, 3.8vw, 58px); margin-bottom: 22px; }
body.home .copy.glass .intro p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.62; margin-bottom: 16px; }
body.home .copy.glass .cta { margin-top: 30px; }
.tray .card { aspect-ratio: 1.42 / 1; background: #fff; border: 1px solid rgba(18,17,16,.06); border-radius: 14px; box-shadow: 0 1px 2px rgba(18,17,16,.04), 0 8px 18px -12px rgba(18,17,16,.16); }
.tray .lab { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 11px 0 1px; font: 600 12.5px/1 var(--sans); color: var(--ink-2); transition: color .4s; }
.tray .lab svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tray .slot.full .lab { color: var(--blue); }
.tray .slot.waiting .lab { opacity: .45; } .tray .lab { transition: color .4s, opacity .4s; }
@media (max-width: 560px) {
  .flow { --doc-w: 162px; --doc-h: 186px; }
  .doc { padding: 12px; } .doc h3 { font-size: 16px; margin-top: 10px; } .doc p { font-size: 10.5px; }
  .tray { margin-top: 56px; padding: 10px 10px 8px; gap: 8px; border-radius: 20px; } body.home .copy.glass { margin-top: 0; padding: 28px 22px; border-radius: 22px; } .tray .card { border-radius: 11px; } .tray .lab { font-size: 10.5px; gap: 4px; margin-top: 8px; } .tray .lab svg { width: 12px; height: 12px; }
}
/* stacked (tablet, phone): the panel takes its own height above the illustration */
@media (max-width: 1080px) { body.home .copy.glass { margin-top: 0; } }

/* ── the waitlist, in place (join.js): the words slide up and out, the form slides up into the same glass panel;
   the panel keeps the words' height, so it stays level with the illustration. On a laptop the form sits inside
   that height (scrolling within it on a very short window); stacked, on tablet and phone, the panel grows. ── */
.panel .face { transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease, visibility 0s linear .5s; }
.panel .face:not(.intro) { position: absolute; inset: var(--pad, 30px); overflow: auto; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(36px); }
.panel .face:not(.intro) > :first-child { margin-top: auto; } .panel .face:not(.intro) > :last-child { margin-bottom: auto; }
.panel:not([data-face="intro"]) .face.intro { opacity: 0; visibility: hidden; transform: translateY(-36px); }
.panel[data-face="sent"] .face.join { transform: translateY(-36px); }
.panel[data-face="intro"] .face.intro, .panel[data-face="form"] .face.join, .panel[data-face="sent"] .face.sent {
  opacity: 1; visibility: visible; transform: none; transition: transform .5s cubic-bezier(.2,.8,.2,1) .06s, opacity .4s ease .06s, visibility 0s; }
.panel .face.intro { transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease, visibility 0s linear .5s; }
@media (prefers-reduced-motion: reduce) { .panel .face, .panel[data-face] .face { transition: none !important; transform: none !important; } }

.back-link { align-self: flex-start; font-size: 13.5px; color: var(--ink-2); text-decoration: none; margin-bottom: 10px; }
.back-link:hover { color: var(--ink); text-decoration: underline; }
.join-title { margin: 0 0 8px; font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); letter-spacing: -.01em; outline: none; }
.join-lead { margin: 0 0 18px !important; font-size: 14.5px !important; line-height: 1.55 !important; color: var(--ink-2); }
.join-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.join-form .field { margin-bottom: 12px; }
.join-form .field label { margin-bottom: 6px; font-size: 13px; }
.join-form .field input[type=text], .join-form .field input[type=email] { height: 42px; font-size: 15px; background: rgba(255,255,255,.9); }
.join-form .field .err { font-size: 12.5px; margin-top: 5px; }
.join-form .tickbox { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink-2); cursor: pointer; }
.join-form .tickbox input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--blue); cursor: pointer; }
.join-form .tickbox a { color: var(--blue); }
.join-form .field.check.bad .tickbox { color: #B4233C; }
.join-form .submit { height: 44px; min-width: 190px; margin-top: 4px; }
.join-form .form-error { margin: 10px 0 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; color: #B4233C; }
.join-form .form-error:empty { display: none; }
.join-form .consent { margin: 12px 0 0 !important; font-size: 12.5px !important; line-height: 1.55 !important; color: var(--ink-3); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.face.sent .tick { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(39,75,216,.10); }
.face.sent .tick svg { width: 24px; height: 24px; stroke: var(--blue); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.face.sent h2 { margin: 20px 0 12px; font: 400 clamp(32px, 3vw, 44px)/1.08 var(--serif); letter-spacing: -.01em; outline: none; }
.face.sent p { margin: 0 0 10px; font-size: 16px; color: var(--ink-2); }
.face.sent .back-link { margin: 14px 0 0; }
.fine { font-size: 13px !important; color: var(--ink-3) !important; }
@media (max-width: 1080px) {
  .panel { display: grid !important; }
  .panel .face { grid-area: 1 / 1; }
  .panel .face:not(.intro) { position: static; inset: auto; overflow: visible; }
}
@media (max-width: 560px) { .join-form .row { grid-template-columns: 1fr; gap: 0; } .join-form .submit { width: 100%; } }

/* the form fits the panel's height, error lines included: a tighter inset, the way back in the corner */
.panel .face.join { inset: calc(var(--pad, 30px) * .62) var(--pad, 30px); }
.panel .face.join .back-link { position: absolute; top: 2px; right: 0; margin: 0; }
.panel .face.join > .join-title { margin-top: auto; }
.join-lead { margin-bottom: 14px !important; font-size: 14px !important; }
.join-form .field { margin-bottom: 10px; }
.join-form .field label { margin-bottom: 5px; font-size: 12.5px; }
.join-form .field input[type=text], .join-form .field input[type=email] { height: 40px; }
.join-form .field .err { margin-top: 4px; font-size: 12px; }
.join-form .consent { margin-top: 10px !important; font-size: 12px !important; }
@media (max-width: 1080px) { .panel .face.join .back-link { position: static; margin: 0 0 10px; } }

/* the waitlist confirmation page (waitlist-confirm.html): one glass panel in the middle of the paper */
main.single { grid-template-columns: minmax(0, 620px); justify-content: center; }
body.confirm main.single { align-content: center; }
.confirm-panel { padding: clamp(30px, 4vw, 56px) !important; margin-top: 0 !important; }
.confirm-panel h1 { font-size: clamp(36px, 3.6vw, 52px) !important; outline: none; }
.confirm-panel p { font-size: 17px !important; line-height: 1.6 !important; color: var(--ink-2); }
.confirm-panel .submit { margin-top: 10px; }
.confirm-panel .form-error { margin: 12px 0 0 !important; font-size: 14px !important; color: #B4233C; }
.confirm-panel .form-error:empty { display: none; }
.confirm-panel .tick { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(39,75,216,.10); margin-bottom: 18px; }
.confirm-panel .tick svg { width: 24px; height: 24px; stroke: var(--blue); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.confirm-panel [hidden] { display: none !important; }
/* stacked (tablet, phone): only the part on show takes room, so the panel is as tall as what it shows */
@media (max-width: 1080px) {
  .panel[data-face="intro"] .face:not(.intro), .panel[data-face="form"] .face:not(.join), .panel[data-face="sent"] .face:not(.sent) { display: none; }
}

/* ── 16 October 2026 evening (founder): the halftone sky behind every page (sky.js), and matte liquid glass: the
   banner and every card frosted, with the sky only softly felt through them, never see-through. ── */
canvas.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
body.paper { background: var(--paper); } /* the paper and Jawahir's grid (net.js); body.home keeps its soft shading to pale blue, above */
header { position: relative; z-index: 5; background: rgba(250,250,249,.78); border-bottom: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(15,14,13,.04), 0 10px 30px -22px rgba(39,75,216,.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.25); backdrop-filter: blur(28px) saturate(1.25); }
.glass { background: linear-gradient(150deg, rgba(255,255,255,.86), rgba(250,250,249,.74) 55%, rgba(255,255,255,.80)) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(15,14,13,.05), 0 30px 60px -30px rgba(23,46,140,.35) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.2) !important; backdrop-filter: blur(34px) saturate(1.2) !important; }
.glass::before { background: radial-gradient(110% 70% at 0% 0%, rgba(255,255,255,.5), transparent 46%) !important; }
.flow::before { display: none; }
.doc, .tray .card { background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(250,250,249,.8)) !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,14,13,.05), 0 14px 30px -18px rgba(23,46,140,.32) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); }
.doc.reading { border-color: rgba(39,75,216,.35) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,14,13,.05), 0 20px 38px -16px rgba(39,75,216,.42) !important; }
.tray .lab { gap: 0; }

/* ── 16 October 2026, late (Hicham): the words out of the card, with room to breathe; the card comes up only for
   the waitlist (matte glass, as the tray). A subtle gradient behind the page instead of the grid. ── */
body.home, body.paper { background:
  radial-gradient(70% 60% at 85% 70%, rgba(39,75,216,.10), transparent 70%),
  radial-gradient(90% 80% at 10% 15%, rgba(147,168,244,.06), transparent 70%),
  linear-gradient(135deg, #FAFAF9 0%, #F6F7FB 45%, #EEF2FF 100%) fixed; }
body.home .copy.glass.panel { transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease; }
body.home .copy.glass.panel[data-face="intro"] { background: transparent !important; border-color: transparent !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.home .copy.glass.panel[data-face="intro"]::before { opacity: 0; }
body.home .copy.glass.panel::before { transition: opacity .45s ease; }
body.home .copy.glass.panel .intro h1 { font-size: clamp(46px, 4.4vw, 64px); margin-bottom: 28px; }
body.home .copy.glass.panel .intro p { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.72; margin-bottom: 20px; }
body.home .copy.glass.panel .intro .cta { margin-top: 44px; }
/* the words keep one size before and after, so the page never jumps when the card comes up */
/* the card rises in with the form */
body.home .copy.glass.panel:not([data-face="intro"]) { animation: card-in .5s cubic-bezier(.2,.8,.2,1); }
@keyframes card-in { from { transform: translateY(14px) scale(.985); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { body.home .copy.glass.panel:not([data-face="intro"]) { animation: none; } }

/* ── 16 October 2026, later (founder): the waitlist off the card too: no box in any state, the form on the open
   page like the words; the tray's labels in the one blue ── */
body.home .copy.glass.panel, body.home .copy.glass.panel:not([data-face="intro"]) { background: transparent !important; border-color: transparent !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none; }
body.home .copy.glass.panel::before { display: none; }
.join-form .field input[type=text], .join-form .field input[type=email] { background: #fff; }

/* ── 17 October 2026 (founder): the form's fields and the buttons in the same matte liquid glass as the tray and
   the document cards, so everything on the page is one material ── */
.join-form .field input[type=text], .join-form .field input[type=email] {
  height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.95);
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(250,250,249,.80)) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,14,13,.05), 0 10px 24px -18px rgba(23,46,140,.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  transition: border-color 160ms, box-shadow 160ms; }
.join-form .field input:focus { border-color: rgba(39,75,216,.55); box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(39,75,216,.14), 0 12px 26px -18px rgba(39,75,216,.45); }
.join-form .field.bad input { border-color: rgba(180,35,60,.6); box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(180,35,60,.10); }
.join-form .tickbox input { width: 18px; height: 18px; }

/* the buttons: Waitlist and Join in blue glass, Vision in white glass with blue text */
.cta-btn, .join-form .submit { position: relative; overflow: hidden; border-radius: 12px; font-weight: 600;
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.cta-btn { border: 1px solid rgba(255,255,255,.95); color: var(--blue);
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(250,250,249,.78));
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,14,13,.05), 0 12px 26px -18px rgba(23,46,140,.4); }
.cta-btn:hover { background: linear-gradient(160deg, #fff, rgba(250,250,249,.88)); transform: translateY(-1px); }
.cta-btn.primary, .join-form .submit { color: #fff; border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(160deg, rgba(64,100,240,.96), rgba(39,75,216,.94) 55%, rgba(31,63,194,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.08), 0 1px 2px rgba(15,14,13,.08), 0 14px 28px -16px rgba(39,75,216,.6); }
.cta-btn.primary:hover, .join-form .submit:hover { background: linear-gradient(160deg, rgba(74,110,246,.98), rgba(39,75,216,.98) 55%, rgba(28,58,182,.98)); border-color: rgba(255,255,255,.34); transform: translateY(-1px); }
.cta-btn::after, .join-form .submit::after { content: ""; position: absolute; inset: 0 0 52% 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); }
.cta-btn:not(.primary)::after { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.join-form .submit { height: 46px; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .cta-btn:hover, .join-form .submit:hover { transform: none; } }
/* the tick box in the same glass: a frosted square, blue glass with a white tick once checked */
.join-form .tickbox input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.95); background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(250,250,249,.82));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15,14,13,.08), 0 6px 14px -10px rgba(23,46,140,.4); transition: background 140ms, box-shadow 140ms; }
.join-form .tickbox input:checked { border-color: rgba(255,255,255,.3); background: linear-gradient(160deg, rgba(64,100,240,.96), rgba(31,63,194,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 8px 16px -10px rgba(39,75,216,.6); }
.join-form .tickbox input:checked::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.join-form .tickbox input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.join-form .field.check.bad .tickbox input { box-shadow: inset 0 1px 0 #fff, 0 0 0 1.5px rgba(180,35,60,.55); }
.join-form .tickbox { align-items: center; }

/* ── 17 October 2026 (founder): the words and the animation exactly level. The row is as tall as the taller of the
   two; the heading's capital starts level with the document cards' top, the buttons end level with the tray's
   foot (the words keep the top, the buttons drop to the foot; the tray drops to the foot when the words are the
   taller). The waitlist form takes the same box. ── */
@media (min-width: 1081px) {
  body.home main { align-items: stretch; }
  body.home .copy.glass.panel { --pad: 0px; padding: 0 !important; margin-top: 0 !important; justify-content: flex-start; }
  body.home .panel .face.intro { display: flex; flex-direction: column; height: 100%; padding-top: var(--cap-nudge, 0px); }
  body.home .panel .face.intro .cta { margin-top: auto !important; padding-top: 36px; }
  body.home .panel .face:not(.intro) { inset: 0 !important; }
  body.home .flow { display: flex; flex-direction: column; }
  body.home .flow .tray { margin-top: auto; }
  body.home .flow .docs { margin-bottom: 56px; }
}
@media (min-width: 1081px) {
  body.home .panel .face.intro { --cap-nudge: 7px; }          /* the serif's own space above its capitals */
  body.home .panel .face.intro .cta { transform: translateY(1px); }
}
@media (min-width: 1081px) {
  /* the form and the thank-you in the same box, on the same lines: title level with the cards, button with the tray's foot */
  body.home .panel .face:not(.intro) > :first-child, body.home .panel .face:not(.intro) > :last-child { margin-top: 0; margin-bottom: 0; }
  body.home .panel .face.join .join-title { margin-top: 0; padding-top: 10px; }
  body.home .panel .face.join .join-form { flex: 1; display: flex; flex-direction: column; }
  body.home .panel .face.join .join-form .submit { margin-top: auto; align-self: flex-start; transform: translateY(1px); }
  body.home .panel .face.join .join-form .form-error { position: absolute; bottom: -30px; left: 0; margin: 0 !important; }
  body.home .panel .face.sent { justify-content: flex-start; padding-top: 7px; }
  body.home .panel .face.sent .back-link { margin-top: auto !important; }
}
@media (min-width: 1081px) {
  /* the form's rows share the height evenly, so it meets the tray's foot without a hole above the button */
  body.home .panel .face.join .join-form { justify-content: space-between; padding-top: 18px; }
  body.home .panel .face.join .join-form .submit { margin-top: 0; }
  body.home .panel .face.join .join-form .field { margin-bottom: 0; }
}
@media (min-width: 1081px) {
  /* the form fills the same height as the words with the same rhythm: its title the size of Coming Soon, taller
     glass fields, and error lines that hang under their field without moving the rows */
  body.home .panel .face.join .join-title { font-size: clamp(46px, 4.4vw, 64px); line-height: 1.05; margin-bottom: 0; padding-top: 7px; }
  body.home .panel .face.join .join-form { padding-top: 28px; }
  body.home .panel .face.join .join-form .field { position: relative; }
  body.home .panel .face.join .join-form .field .err { position: absolute; left: 0; top: calc(100% + 5px); margin: 0; white-space: nowrap; }
  body.home .panel .face.join .join-form .field input[type=text], body.home .panel .face.join .join-form .field input[type=email] { height: 52px; font-size: 16px; }
  body.home .panel .face.join .join-form .field label { font-size: 14px; margin-bottom: 8px; }
  body.home .panel .face.join .join-form .tickbox { font-size: 14px; }
  body.home .panel .face.join .join-form .submit { height: 48px; min-width: 200px; }
  body.home .panel .face.join .back-link { top: 18px; }
}

/* ── 17 October 2026 (Hicham's storyboard): three panes below the documents, one in focus at a time; simple cards,
   ticks, a cursor that carries the work from pane to pane along a dashed path ── */
.flow .tray { display: none; }
.stage { position: relative; height: 282px; margin-top: 56px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.panes { position: absolute; top: 8px; bottom: 22px; left: 0; display: flex; gap: 22px; will-change: transform; }
.pane { flex: none; width: calc(var(--stage-w, 660px) * .8); display: flex; flex-direction: column; border-radius: 22px !important; transition: opacity .5s ease; }
.pane:not(.focus) { opacity: .45; }
.pane header { display: flex; align-items: center; gap: 9px; padding: 12px 16px 11px; font: 600 14px/1 var(--sans); color: var(--ink); border-bottom: 1px solid rgba(15,14,13,.05); }
.pane header svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pane .body { flex: 1; min-height: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.pane .cards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pane .lead-row { flex: none; }
.pane .alerts { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 7px 10px; }

.slot { position: relative; border-radius: 12px; border: 1px dashed rgba(15,14,13,.11); background: rgba(255,255,255,.22); transition: background .3s, border-color .3s, box-shadow .3s, transform .2s ease; }
.slot.lead { height: 44px; }
.slot.on, .clone { border: 1px solid rgba(255,255,255,.95); background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(250,250,249,.86));
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,14,13,.05), 0 10px 22px -16px rgba(23,46,140,.38); }
.slot.lifted { transform: translateY(-2px) scale(1.03); box-shadow: inset 0 1px 0 #fff, 0 16px 30px -14px rgba(23,46,140,.5); }
.slot .in { opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.slot.on .in { opacity: 1; transform: none; }
.ln { display: block; height: 4px; border-radius: 2px; background: #D9D6D0; }
.ico { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.card-in { height: 100%; padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.card-in .ico { margin-bottom: 4px; }
.lead-in { height: 100%; padding: 0 14px; display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 14px; }
.lead-in > div, .alert-in > div { display: flex; flex-direction: column; gap: 6px; }
.alert-in { height: 100%; padding: 0 30px 0 10px; display: flex; align-items: center; gap: 9px; }
.alert-in .ln { height: 3.5px; }
.alert-in .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; opacity: .8; }
.mini-doc { height: 100%; padding: 14px 15px; display: flex; flex-direction: column; gap: 10px; }
.tick { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; opacity: 0; transform: scale(.4);
  background: linear-gradient(160deg, #4064F0, #1F3FC2); box-shadow: 0 4px 10px -4px rgba(39,75,216,.6); transition: opacity .3s ease .45s, transform .35s cubic-bezier(.3,1.6,.5,1) .45s; }
.tick::after { content: ""; position: absolute; left: 5.4px; top: 3.2px; width: 3.6px; height: 7px; border: solid #fff; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); }
.slot.alert .tick { top: 50%; margin-top: -8px; }
.slot.on .tick { opacity: 1; transform: none; }

.clone { position: absolute; z-index: 5; border-radius: 12px; overflow: hidden; pointer-events: none; box-shadow: inset 0 1px 0 #fff, 0 22px 40px -16px rgba(23,46,140,.5); }
.clone > div { position: absolute; inset: 0; }
.clone > div > .in { opacity: 1; transform: none; }
.clone.gone { transition: opacity .45s ease, transform .45s ease; opacity: 0; transform: scale(.9); }
svg.trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
svg.trail path { fill: none; stroke: #1E2A4A; stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; opacity: .75; }
.cursor { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; transform-origin: 0 0; will-change: transform; }
.cursor svg { display: block; width: 22px; height: 22px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(15,14,13,.25)); }
.cursor svg path { fill: #0F0E0D; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.cursor span { position: absolute; left: 17px; top: 19px; padding: 3px 8px; border-radius: 3px 8px 8px 8px; background: var(--blue); color: #fff; font: 600 11px/1.2 var(--sans); white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(39,75,216,.6); }
@media (min-width: 1081px) { body.home .flow .stage { margin-top: auto; } }
@media (max-width: 560px) {
  .stage { height: 250px; margin-top: 44px; }
  .pane header { font-size: 12.5px; padding: 10px 12px 9px; } .pane .body { padding: 10px 12px 12px; gap: 9px; } .pane .cards { gap: 8px; }
  .card-in { padding: 9px; gap: 7px; } .slot.lead { height: 38px; }
}
.pane header { justify-content: flex-start; background: rgba(255,255,255,.35); border-radius: 22px 22px 0 0; }
.alert-in > div { flex: 1; min-width: 0; }
@media (min-width: 1081px) { body.home .flow .stage { margin-bottom: -22px; } } /* the panes' foot, not their shadow room, meets the buttons' line */

/* ══ 17 October 2026 (founder): clean, after the Claude sign-in page. Flat warm paper, a plain header, one centered
   column (a large serif title, a short serif line, the words, then a soft white card holding the actions) beside the
   animation in a rounded panel, the two centered on each other. The waitlist happens inside the card. ══ */
body.clean { background: #FAF9F6 !important; }
body.clean > header { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 26px clamp(24px, 8.4vw, 150px) 0; }
body.clean main { align-items: center !important; align-content: center; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: clamp(40px, 6vw, 110px); padding: 36px clamp(24px, 8.4vw, 150px) 56px; }

.hero { justify-self: center; width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { margin: 0 0 14px; font: 400 clamp(46px, 4.6vw, 68px)/1.04 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.hero .sub { margin: 0 0 20px; font: 400 clamp(18px, 1.5vw, 21px)/1.4 var(--serif); color: var(--ink); }
.hero .lede { margin: 0 0 10px; max-width: 440px; font: 400 15px/1.65 var(--sans); color: var(--ink-2); }

.join-card { width: 100%; max-width: 380px; margin-top: 26px; padding: 20px; text-align: left; background: #fff; border: 1px solid rgba(15,14,13,.08); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,14,13,.04), 0 14px 34px -20px rgba(15,14,13,.22); }
.join-card .face { display: none; }
.join-card[data-face="intro"] .face.intro { display: grid; gap: 10px; animation: face-in .4s ease both; }
.join-card[data-face="form"] .face.join, .join-card[data-face="sent"] .face.sent { display: block; position: relative; animation: face-in .4s ease both; }
@keyframes face-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .join-card .face { animation: none !important; } }
.join-card .cta-btn { width: 100%; min-width: 0; height: 42px; margin: 0; }
.join-card .join-title { margin: 2px 0 14px; font: 400 24px/1.15 var(--serif); letter-spacing: -.005em; outline: none; }
.join-card .back-link { position: absolute; top: 4px; right: 0; margin: 0; font-size: 12.5px; }
.join-card .join-form .row { grid-template-columns: 1fr 1fr; gap: 10px; }
.join-card .join-form .field { margin-bottom: 10px; }
.join-card .join-form .field label { font-size: 12.5px; margin-bottom: 5px; color: var(--ink-2); }
.join-card .join-form .field input[type=text], .join-card .join-form .field input[type=email] { height: 40px; font-size: 15px; border-radius: 10px; border: 1px solid rgba(15,14,13,.13);
  background: #fff !important; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.join-card .join-form .field input:focus { border-color: rgba(39,75,216,.6); box-shadow: 0 0 0 3px rgba(39,75,216,.12); }
.join-card .join-form .field.bad input { border-color: rgba(180,35,60,.6); box-shadow: 0 0 0 3px rgba(180,35,60,.08); }
.join-card .join-form .tickbox { font-size: 12.5px; line-height: 1.45; }
.join-card .join-form .submit { width: 100%; height: 42px; margin-top: 6px; }
.join-card .join-form .form-error { margin: 8px 0 0 !important; font-size: 12.5px !important; }
.join-card .face.sent { text-align: center; padding: 6px 0 2px; }
.join-card .face.sent .tick { margin: 0 auto 12px; width: 42px; height: 42px; }
.join-card .face.sent h2 { margin: 0 0 8px; font: 400 24px/1.15 var(--serif); }
.join-card .face.sent p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.join-card .face.sent .back-link { position: static; display: inline-block; margin-top: 10px; }

/* the animation in a rounded panel, like the picture beside the Claude sign-in */
body.clean .flow { justify-self: center; max-width: 640px; padding: 28px 0 34px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, #F3F2EE 0%, #EEF1F9 100%); border: 1px solid rgba(15,14,13,.05); }
body.clean .flow::before { display: none; }
body.clean .flow .stage { margin-bottom: -22px; }
@media (min-width: 1081px) { body.clean .flow { display: block; } body.clean .flow .stage { margin-top: 40px; } }
@media (max-width: 1080px) { body.clean main { grid-template-columns: 1fr; row-gap: 44px; } body.clean .flow { width: 100%; } }
@media (max-width: 560px) { body.clean .flow { padding: 20px 0 26px; border-radius: 16px; } .join-card { padding: 16px; } .join-card .join-form .row { grid-template-columns: 1fr; gap: 0; } }

/* Vision, in the same hand */
body.clean .essay { max-width: 720px; text-align: center; padding-top: 56px; }
body.clean .essay .kicker { margin-bottom: 14px; }
body.clean .essay h1 { font: 400 clamp(44px, 4.6vw, 66px)/1.05 var(--serif); letter-spacing: -.015em; margin: 0 0 18px; }
body.clean .essay .intro { max-width: 560px; margin: 0 auto 36px; font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--serif); color: var(--ink); }
body.clean .essay .film { border-radius: 20px; border: 1px solid rgba(15,14,13,.05); background: linear-gradient(160deg, #F3F2EE 0%, #EEF1F9 100%); box-shadow: none; }
body.clean .essay .film-note { text-align: center; }
body.clean .essay .belief { text-align: left; max-width: 600px; margin-left: auto; margin-right: auto; border-top-color: rgba(15,14,13,.08); }
body.clean .essay .belief .n { color: var(--blue); }
body.clean .essay .closing { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.clean .essay .closing .join-card { max-width: 300px; margin-top: 14px; padding: 16px; }

.join-card .cta-btn:not(.primary) { border: 1px solid rgba(15,14,13,.12); box-shadow: 0 1px 2px rgba(15,14,13,.04); background: #fff; }
.join-card .cta-btn:not(.primary)::after { display: none; }
.join-card .join-form .tickbox input { border: 1px solid rgba(15,14,13,.22); box-shadow: none; background: #fff; }
.join-card .join-form .tickbox input:checked { border-color: transparent; background: linear-gradient(160deg, rgba(64,100,240,.96), rgba(31,63,194,.96)); }
.hero .sub, .hero .lede { text-wrap: balance; }
@media (min-width: 1081px) { body.clean main { align-items: start !important; } body.clean .hero { margin-top: var(--hero-top, 0px); } }
@media (min-width: 1081px) { body.clean .hero { height: var(--row-h, auto); margin-top: 0; padding-top: var(--hero-top, 0px); box-sizing: border-box; } }

/* ══ 17 October 2026 (Hicham): never centred text; the buttons flat, as first drawn (Waitlist filled, Vision
   outlined), not glass; the four colours only (#0F0E0D, #274BD8, #EEF2FF, #FAFAF9) on a background of #FAFAF9 with
   a gradient one shade deep (#F5F5F4), so it is never flat yet the change is all but invisible ══ */
body.clean { background: linear-gradient(180deg, #FAFAF9 0%, #F5F5F4 100%) fixed !important; }
.hero { align-items: flex-start; text-align: left; justify-self: start; }
.hero .sub, .hero .lede { text-wrap: pretty; }
.join-card .face.sent { text-align: left; }
.join-card .face.sent .tick { margin: 0 0 12px; }
body.clean .essay, body.clean .essay .film-note, body.clean .essay .closing { text-align: left; }
body.clean .essay .intro { margin-left: 0; }
body.clean .essay .closing { align-items: flex-start; }
body.clean .essay .belief { margin-left: 0; }

.cta-btn, .join-card .cta-btn, .join-form .submit, .join-card .join-form .submit { position: static; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none !important;
  border-radius: 8px; box-shadow: none; transition: background-color 160ms, border-color 160ms, color 160ms; font-weight: 600; }
.cta-btn::after, .join-form .submit::after { display: none !important; }
.cta-btn:not(.primary), .join-card .cta-btn:not(.primary) { background: #fff; color: #274BD8; border: 1px solid #274BD8; }
.cta-btn:not(.primary):hover { background: #EEF2FF; }
.cta-btn.primary, .join-form .submit { background: #274BD8; color: #fff; border: 1px solid #274BD8; }
.cta-btn.primary:hover, .join-form .submit:hover { background: #1F3FC2; border-color: #1F3FC2; }
.join-card .join-form .tickbox input:checked { background: #274BD8; border-color: #274BD8; box-shadow: none; }
.tick { background: #274BD8 !important; box-shadow: none !important; }

/* the animation's panel and the cards in the same colours */
body.clean .flow, body.clean .essay .film { background: linear-gradient(160deg, #FAFAF9 0%, #EEF2FF 100%); border-color: rgba(15,14,13,.06); }
.join-card { border-color: rgba(15,14,13,.08); }
/* the page grows downward when the waitlist card does: the row keeps at least the animation's height, the words never
   move, and the footer is pushed down rather than overlapped */
body.clean { background: linear-gradient(180deg, #FAFAF9 0%, #F5F5F4 100%) !important; background-attachment: scroll !important; }
@media (min-width: 1081px) {
  body.clean main { align-content: start !important; padding-top: clamp(40px, 9vh, 110px); }
  body.clean .hero { height: auto; min-height: var(--row-h, auto); }
}
body.clean .essay .closing .join-card { max-width: none; width: auto; margin-top: 16px; padding: 0; border: 0; background: none; box-shadow: none; }
body.clean .essay .closing .join-card .cta-btn { width: auto; min-width: 150px; height: 39px; }
/* ── 17 October 2026 (founder): the two columns closer, and level: the title's capitals start at the animation
   panel's top edge, the card ends at its bottom edge; the pair centred on the page with a fixed gap ── */
@media (min-width: 1081px) {
  body.clean main { grid-template-columns: minmax(0, 500px) minmax(0, 640px); justify-content: center; column-gap: clamp(48px, 4.5vw, 72px); }
  body.clean .hero { justify-self: stretch; max-width: none; padding-top: 0 !important; min-height: var(--row-h, auto); }
  body.clean .hero h1 { margin-top: -.17em; }
  body.clean .hero .sub { font-size: clamp(20px, 1.6vw, 23px); margin-bottom: 22px; }
  body.clean .hero .lede { font-size: 16px; line-height: 1.7; max-width: 470px; margin-bottom: 12px; }
  body.clean .hero .join-card { margin-top: auto; max-width: 400px; }
  body.clean .flow { justify-self: stretch; }
}
@media (min-width: 1081px) {
  /* a shorter panel, so the words and the card sit together: less air above, between and below the animation */
  body.clean .flow { padding: 20px 0 24px; --doc-h: 196px; }
  body.clean .flow .docs { height: calc(var(--doc-h) + 30px); }
  body.clean .flow .stage { margin-top: 22px; height: 256px; }
}
svg.trail { display: none; } /* founder, 17 October 2026: no dotted trail behind the cursor */
.slot:not(.on) .tick { transition-delay: 0s; transition-duration: .2s; } /* ticks go with their cards, not after them */
/* ── 17 October 2026 (Hicham): the idea card's + (the cursor's first judgement), and the confirmed position ── */
.card-in { position: relative; }
.card-in .add { margin-top: auto; align-self: flex-start; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  border: 1px solid rgba(15,14,13,.14); background: #fff; color: #0F0E0D; font: 500 16px/1 var(--sans); transition: background .2s, color .2s, border-color .2s; }
.card-in .add.pressed, .clone .card-in .add { background: #274BD8; border-color: #274BD8; color: #fff; }
.slot.lead.confirmed { border-color: #274BD8 !important; box-shadow: 0 0 0 1px #274BD8, 0 10px 22px -16px rgba(39,75,216,.5) !important; }
.slot.lead::after { content: ""; position: absolute; top: 50%; right: 12px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #274BD8;
  opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .3s cubic-bezier(.3,1.6,.5,1);
  -webkit-mask: none; }
.slot.lead::before { content: ""; position: absolute; z-index: 1; top: 50%; right: 18.4px; width: 4px; height: 8px; margin-top: -5.5px; border: solid #fff; border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg) scale(.4); opacity: 0; transition: opacity .25s ease, transform .3s ease; }
.slot.lead.confirmed::after { opacity: 1; transform: none; }
.slot.lead.confirmed::before { opacity: 1; transform: rotate(45deg); }
.slot.lead.confirmed .lead-in { padding-right: 40px; }

/* ══ 17 October 2026 (Hicham): the words with their two buttons beneath, no card; Waitlist turns the animation's
   panel into the form (the animation fades out, the form in, the same place and size); ← Back brings it back ══ */
.hero .cta { display: flex; gap: 13px; margin-top: 30px; }
.hero .cta .cta-btn { min-width: 150px; height: 39px; padding: 0 22px; }
@media (min-width: 1081px) { body.clean .hero { min-height: 0; } }
body.clean .flow { position: relative; }
.flow > .face { transition: opacity .45s ease, visibility 0s linear .45s; }
.flow > .face.intro { opacity: 1; }
.flow > .face.join, .flow > .face.sent { position: absolute; inset: 0; z-index: 8; padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; background: linear-gradient(160deg, #FAFAF9 0%, #EEF2FF 100%); }
.flow[data-face="intro"] > .face.intro, .flow[data-face="form"] > .face.join, .flow[data-face="sent"] > .face.sent { opacity: 1; visibility: visible; transition: opacity .45s ease .1s, visibility 0s; }
.flow:not([data-face="intro"]) > .face.intro { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .flow > .face { transition: none !important; } }
.flow .face.join > *, .flow .face.sent > * { width: 100%; max-width: 440px; }
.flow .back-link { position: absolute; top: 20px; right: 24px; width: auto !important; font-size: 13px; color: #0F0E0D; text-decoration: none; opacity: .75; }
.flow .back-link:hover { opacity: 1; text-decoration: underline; }
.flow .join-title { margin: 0 0 22px; font: 400 clamp(30px, 2.6vw, 38px)/1.1 var(--serif); letter-spacing: -.01em; color: #0F0E0D; outline: none; }
.flow .join-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flow .join-form .field { margin-bottom: 14px; position: relative; }
.flow .join-form .field label { display: block; margin-bottom: 6px; font-size: 13px; color: #0F0E0D; opacity: .8; }
.flow .join-form .field input[type=text], .flow .join-form .field input[type=email] { width: 100%; height: 44px; padding: 0 14px; font: 400 15px var(--sans); color: #0F0E0D;
  background: #fff !important; border: 1px solid rgba(15,14,13,.14); border-radius: 10px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.flow .join-form .field input:focus { outline: none; border-color: #274BD8; box-shadow: 0 0 0 3px rgba(39,75,216,.12); }
.flow .join-form .field.bad input { border-color: #B4233C; box-shadow: 0 0 0 3px rgba(180,35,60,.08); }
.flow .join-form .field .err { margin: 5px 0 0; font-size: 12.5px; }
.flow .join-form .tickbox { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: #0F0E0D; }
.flow .join-form .tickbox input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 5px; border: 1px solid rgba(15,14,13,.25); background: #fff; cursor: pointer; }
.flow .join-form .tickbox input:checked { background: #274BD8; border-color: #274BD8; }
.flow .join-form .tickbox input:checked::after { content: ""; position: absolute; left: 5.5px; top: 2px; width: 4.5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.flow .join-form .tickbox a { color: #274BD8; }
.flow .join-form .submit { margin-top: 8px; height: 44px; min-width: 200px; padding: 0 26px; border-radius: 8px; font: 600 15.5px var(--sans); cursor: pointer; }
.flow .join-form .form-error { margin: 10px 0 0; font-size: 13px; color: #B4233C; }
.flow .join-form .form-error:empty { display: none; }
.flow .face.sent .tick { position: static; width: 44px; height: 44px; margin: 0 0 16px; border-radius: 50%; display: grid; place-items: center; opacity: 1; transform: none; background: #EEF2FF !important; }
.flow .face.sent .tick::after { display: none; }
.flow .face.sent .tick svg { width: 22px; height: 22px; fill: none; stroke: #274BD8; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flow .face.sent h2 { margin: 0 0 10px; font: 400 clamp(30px, 2.6vw, 38px)/1.1 var(--serif); outline: none; }
.flow .face.sent p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: #0F0E0D; opacity: .85; }
.flow .face.sent .back-link { position: static; margin-top: 14px; display: inline-block; }
@media (max-width: 560px) { .flow .join-form .row { grid-template-columns: 1fr; gap: 0; } .flow > .face.join, .flow > .face.sent { padding: 52px 20px 22px; } .flow .join-form .submit { width: 100%; } }
.flow .join-form label.tickbox { display: flex !important; gap: 10px; }
.hero .cta .cta-btn, .flow .join-form .submit { box-shadow: none !important; }

/* ══ 17 October 2026 (Hicham's form): pill fields with a round icon at the right, the icon green once right and a red
   warning with a line beneath when not; a Signup button with a paper plane; after signing up the form clears and the
   button gives way to the confirmation line ══ */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.flow > .face.join { justify-content: center; }
.flow .join-form.pills { width: 100%; max-width: 470px; }
.flow .join-form .field.pill { position: relative; margin-bottom: 22px; }
.flow .join-form .field.pill input { height: 60px !important; padding: 0 70px 0 22px !important; border: 0 !important; border-radius: 16px !important; background: #fff !important;
  font: 400 17px var(--sans) !important; color: #0F0E0D; box-shadow: 0 1px 2px rgba(15,14,13,.04), 0 8px 20px -14px rgba(15,14,13,.18) !important; transition: box-shadow .2s; }
.flow .join-form .field.pill input::placeholder { color: #A8A6A1; }
.flow .join-form .field.pill input:focus { outline: none; box-shadow: 0 0 0 2px rgba(39,75,216,.35), 0 8px 20px -14px rgba(15,14,13,.18) !important; }
.flow .join-form .field.pill.bad input { box-shadow: 0 0 0 2px rgba(196,30,30,.35), 0 8px 20px -14px rgba(15,14,13,.18) !important; }
.flow .join-form .badge { position: absolute; right: 9px; top: 9px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #274BD8; transition: background-color .25s ease; pointer-events: none; }
.flow .join-form .badge svg { grid-area: 1 / 1; width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s ease, transform .25s ease; }
.flow .join-form .badge .i-bad { opacity: 0; transform: scale(.6); }
.flow .join-form .field.pill.good .badge { background: #2F7D32; }
.flow .join-form .field.pill.bad .badge { background: #C41E1E; }
.flow .join-form .field.pill.bad .badge .i-ok { opacity: 0; transform: scale(.6); }
.flow .join-form .field.pill.bad .badge .i-bad { opacity: 1; transform: none; }
.flow .join-form .field.pill .err { position: absolute; left: 6px; top: calc(100% + 6px); margin: 0; font-size: 13.5px; color: #C41E1E; display: none; }
.flow .join-form .field.pill.bad .err { display: block; }
.flow .join-form .field.check { margin: 28px 0 0; }
.flow .join-form .field.check .err { display: none; margin: 6px 0 0 28px; font-size: 13px; color: #C41E1E; }
.flow .join-form .field.check.bad .err { display: block; }
.flow .join-form .field.check.bad .tickbox input { border-color: #C41E1E; }
.flow .join-form .send { position: relative; margin-top: 22px; min-height: 52px; display: flex; align-items: center; }
.flow .join-form .submit { display: inline-flex; align-items: center; gap: 12px; height: 52px; min-width: 0 !important; padding: 0 22px !important; border-radius: 10px !important; font: 500 18px var(--sans) !important; }
.flow .join-form .submit svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.flow .join-form .submit[disabled] svg { animation: fly .7s ease-in-out infinite alternate; }
@keyframes fly { to { transform: translate(3px, -3px); } }
.flow .join-form .done { position: absolute; left: 0; top: 50%; margin: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 14px; font: 600 16px/1.35 var(--sans); color: #2F7D32;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.flow .join-form .done .plane { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #2F7D32; }
.flow .join-form .done .plane svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.flow .join-form.sent .submit { opacity: 0; visibility: hidden; }
.flow .join-form.sent .done { opacity: 1; visibility: visible; transition: opacity .35s ease .1s, visibility 0s; }
.flow .join-form.sent .done .plane { animation: plane-in .6s cubic-bezier(.2,.8,.2,1); }
@keyframes plane-in { from { transform: translate(-14px, 10px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flow .join-form .submit[disabled] svg, .flow .join-form.sent .done .plane { animation: none; } }
@media (max-width: 560px) { .flow .join-form .field.pill input { height: 54px !important; font-size: 16px !important; } .flow .join-form .badge { width: 38px; height: 38px; top: 8px; } .flow .join-form .done { font-size: 14.5px; } .flow .join-form .submit { width: auto !important; } }
.flow .join-form .field.pill .err { position: static; margin: 9px 0 0 6px; }
.flow .join-form .field.check { margin-top: 26px; }

/* ── the Signup button's send animation (founder, 17 October 2026) ── */
.flow .join-form .submit { position: relative; overflow: hidden; justify-content: center;
  transition: width .4s cubic-bezier(.6,0,.2,1), border-radius .4s cubic-bezier(.6,0,.2,1), padding .4s ease, background-color .35s ease !important; }
.flow .join-form .submit span { transition: opacity .2s ease, transform .3s ease; white-space: nowrap; }
.flow .join-form .submit svg { flex: none; transition: transform .35s ease; }
.flow .join-form.sending .submit, .flow .join-form.sent .submit { width: 52px !important; padding: 0 !important; border-radius: 26px !important; gap: 0; }
.flow .join-form.sending .submit span, .flow .join-form.sent .submit span { opacity: 0; width: 0; transform: translateX(-8px); overflow: hidden; }
.flow .join-form.sending .submit svg { animation: plane-loop 1.1s cubic-bezier(.5,0,.4,1) .3s infinite; }
@keyframes plane-loop {
  0% { transform: none; opacity: 1; } 45% { transform: translate(34px, -34px) rotate(8deg) scale(.7); opacity: 0; }
  46% { transform: translate(-30px, 30px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.flow .join-form.sent .submit { opacity: 1 !important; visibility: visible !important; background: #2F7D32 !important; border-color: #2F7D32 !important; cursor: default; }
.flow .join-form.sent .submit svg { animation: plane-land .5s cubic-bezier(.2,.8,.2,1); }
@keyframes plane-land { from { transform: translate(-22px, 22px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.flow .join-form .done { left: 66px; }
.flow .join-form .done .plane { display: none; }
.flow .join-form .done > span:last-child { display: inline-block; }
.flow .join-form.sent .done > span:last-child { animation: done-in .45s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes done-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .flow .join-form .submit svg, .flow .join-form.sent .done > span:last-child { animation: none !important; } }
.flow .join-form .submit[disabled] { opacity: 1 !important; cursor: progress; }

/* ── the send animation, as the founder's reference: press, shrink to a circle, then the line drawing takes over ── */
.flow .join-form.sending .submit { animation: press .22s ease both; opacity: 0 !important; transition: width .3s cubic-bezier(.6,0,.2,1) .08s, border-radius .3s ease .08s, padding .3s ease .08s, opacity .06s linear .34s !important; }
.flow .join-form.sending .submit svg { animation: none !important; opacity: 0; }
@keyframes press { 0% { transform: scale(1); } 45% { transform: scale(.93); } 100% { transform: scale(1); } }
.flow .join-form.sent .submit { opacity: 0 !important; visibility: hidden !important; width: 52px !important; }
.flow .join-form .mail { position: absolute; left: -44px; top: 50%; width: 140px; height: 140px; margin-top: -70px; overflow: visible; pointer-events: none; opacity: 0; z-index: 2; }
.flow .join-form .mail.on { opacity: 1; }
.flow .join-form .mail path { fill: none; stroke: #274BD8; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.flow .join-form .mail .o { fill: #fff; }
.flow .join-form .mail .trail { stroke-dasharray: 1 0; }
.flow .join-form .done { left: 0 !important; }
.flow .join-form.sent .done > span:last-child { animation: done-fade .6s ease both !important; }
@keyframes done-fade { from { opacity: 0; } to { opacity: 1; } }
.flow > .face.join, .flow .join-form .send { overflow: visible; }
/* founder, 17 October 2026: the words centred on the animation's panel, not pinned to its top edge */
@media (min-width: 1081px) {
  body.clean main { align-items: center !important; }
  body.clean .hero { align-self: center; padding-top: 0 !important; min-height: 0 !important; height: auto !important; }
  body.clean .hero h1 { margin-top: 0; }
}
/* Hicham, 17 October 2026: Waitlist greyed out while its form is open; the form centred in its panel */
.hero .cta .cta-btn.primary { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
body.joining .hero .cta .cta-btn.primary { background: #E4E3DF; border-color: #E4E3DF; color: #8E8C87; pointer-events: none; cursor: default; }
.flow > .face.join { align-items: center; }
.flow .join-form.pills { max-width: 470px; }

/* ══ 17 October 2026 (founder): no green. The confirmation is a document card like the ones the animation reads:
   a reading line passes once, the email lights up as evidence, "just now" turns to "✓ Received". All in the blue.
   The fields' correct state is the blue with a white tick ══ */
.flow .join-form .field.pill.good .badge { background: #274BD8; }
.flow .join-form .badge .i-good { opacity: 0; }
.flow .join-form .field.pill.good .badge .i-ok { opacity: 0; transform: scale(.6); }
.flow .join-form .field.pill.good .badge::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 13px; margin: -9px 0 0 -4px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: tick-in .25s ease; }
@keyframes tick-in { from { opacity: 0; transform: rotate(45deg) scale(.4); } to { opacity: 1; transform: rotate(45deg); } }

.flow .confirm { display: none; position: relative; width: 100%; max-width: 420px; padding: 20px 22px 18px; overflow: hidden; background: #fff; border: 1px solid rgba(15,14,13,.07); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,14,13,.04), 0 18px 40px -22px rgba(23,46,140,.35); }
.flow > .face.join.done .join-form { display: none; }
.flow > .face.join.done > .back-link { display: none; }
.flow > .face.join.done .confirm { display: block; animation: card-rise .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes card-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.flow .confirm header { display: flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--sans); color: #0F0E0D; }
.flow .confirm header svg { width: 16px; height: 16px; fill: none; stroke: #0F0E0D; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.flow .confirm time { margin-left: auto; position: relative; font: 400 11.5px/1 var(--sans); color: #8E8C87; }
.flow .confirm time b { font-weight: 500; }
.flow .confirm time .got { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: #274BD8; opacity: 0; }
.flow .confirm time .got svg { width: 13px; height: 13px; fill: none; stroke: #274BD8; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flow .confirm h3 { margin: 16px 0 8px; font: 400 clamp(26px, 2.3vw, 32px)/1.1 var(--serif); letter-spacing: -.01em; color: #0F0E0D; outline: none; }
.flow .confirm p { margin: 0; font: 400 14.5px/1.6 var(--sans); color: #0F0E0D; opacity: .82; }
.flow .confirm mark { background: transparent; color: inherit; border-radius: 4px; padding: 1px 3px; margin: 0 -3px; font-weight: 600; }
.flow .confirm .scan { position: absolute; left: 12px; right: 12px; top: 0; height: 1.5px; background: rgba(39,75,216,.7); opacity: 0; pointer-events: none; }
.flow .confirm .scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(180deg, rgba(39,75,216,0), rgba(39,75,216,.10)); }
.flow > .face.join.done .confirm .scan { animation: confirm-scan 1.1s cubic-bezier(.45,0,.3,1) .45s both; }
@keyframes confirm-scan { 0% { top: 22%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 97%; opacity: 0; } }
.flow > .face.join.done .confirm mark { animation: evidence .4s ease 1.05s both; }
@keyframes evidence { from { background: transparent; color: inherit; } to { background: rgba(39,75,216,.12); color: #274BD8; } }
.flow > .face.join.done .confirm .now { animation: fade-out .25s ease 1.45s both; }
.flow > .face.join.done .confirm .got { animation: fade-in .35s ease 1.5s both; }
@keyframes fade-out { to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.flow .confirm .back-link { position: static !important; display: inline-block; margin-top: 16px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .flow > .face.join.done .confirm, .flow > .face.join.done .confirm * { animation-duration: 0s !important; animation-delay: 0s !important; } .flow .confirm .scan { display: none; } }
.flow .confirm header { background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: static !important; }
.flow .join-form.pills { transform: translateY(var(--form-shift, 0px)); } /* the fields level with the words (join.js alignForm) */
/* the confirmation card centred in the panel, and level with the middle of the Coming soon column (join.js) */
.flow > .face.join.done .confirm { margin: 0 auto; align-self: center; translate: 0 var(--card-shift, 0px); }
.flow > .face.join, .flow > .face.sent { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; }
/* founder, 17 October 2026: the words and the animation in the middle of the page, between header and footer */
@media (min-width: 1081px) { body.clean main { align-content: center !important; padding-top: 40px !important; padding-bottom: 40px !important; } }

/* ══ 17 October 2026 (Hicham): take up the page. The pair spans the page with the wordmark's margin on both sides
   (left edge level with the wordmark, the same space on the right), the columns grow with the screen, the type
   with them; inside the panel the space above the documents equals the space below the panes ══ */
@media (min-width: 1081px) {
  body.clean main { width: 100%; max-width: none; padding-left: clamp(24px, 8.4vw, 150px) !important; padding-right: clamp(24px, 8.4vw, 150px) !important;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important; justify-content: stretch !important; column-gap: clamp(48px, 5.2vw, 110px) !important; }
  body.clean .hero { max-width: none; justify-self: stretch; }
  body.clean .hero h1 { font-size: clamp(48px, 4.6vw, 84px); }
  body.clean .hero .sub { font-size: clamp(20px, 1.65vw, 28px); margin-bottom: clamp(18px, 1.6vw, 28px); }
  body.clean .hero .lede { max-width: 36em; font-size: clamp(15.5px, 1.08vw, 19px); }
  body.clean .hero .cta { margin-top: clamp(26px, 2.2vw, 40px); }
  body.clean .flow { max-width: none; justify-self: stretch; padding-top: 13px !important; padding-bottom: 31px !important; }
}
@media (min-width: 1081px) {
  body.clean .flow { --doc-w: clamp(198px, 13.5vw, 250px); --doc-h: clamp(196px, 21vh, 250px); }
  body.clean .flow .stage { height: clamp(256px, 30vh, 380px) !important; margin-top: clamp(22px, 3vh, 44px) !important; }
  body.clean .doc h3 { font-size: clamp(18px, 1.25vw, 22px); }
}
@media (min-width: 1081px) { body.clean footer { padding-left: clamp(24px, 8.4vw, 150px); padding-right: clamp(24px, 8.4vw, 150px); } } /* the footer on the same margins as the wordmark and the content */
/* Hicham, 17 October 2026: "Join Waitlist"; Vision in regular type, not bold */
.hero .cta .cta-btn.primary { min-width: 168px; }
.hero .cta .cta-btn:not(.primary) { font-weight: 400; }
body.clean footer, body.paper footer { justify-content: flex-end; } /* only the legal links remain: on the right */