/* B-full v3: B's chat-window hero (Antti's pick) plus the whole website below it. v3 = v2 + Antti's two changes (2026-10-19):
   the waitlist signup as mdil.ai's AIRUT card draws it, and the title marks unified to mdil.ai's AIRUT area (search "v3 ·").
   Every value is an Airut design-system token (shared/tokens/tokens.css) unless copied from mdil.ai. Mobile first: 390 px is the main view. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--accent-text); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[data-side="business"] [data-for="personal"], [data-side="personal"] [data-for="business"] { display: none !important; }
.wrap { max-width: calc(1120px + 2 * var(--space-4)); margin: 0 auto; padding: 0 var(--space-4); }

/* ---------- shared bits ---------- */
/* v3 · the title mark, unified: mdil.ai's AIRUT step mark (mdil.ai .a-card .bars, named .tmark here: .bars is the cost chart's), ONE line 64 x 6, radius 3, three equal
   steps in the step greens with no gaps, on the --line track. Full (3 of 3) above every section title and "Your turn";
   lit to the box's step (1, 2, 3) in the Why boxes, exactly as mdil.ai lights its Trust, Reach and Cost cards. */
.tmark { --step: 3; position: relative; display: block; flex: none; width: 64px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tmark::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--forest) 0 33.3333%, var(--meadow) 33.3333% 66.6667%, var(--signal) 66.6667% 100%);
  clip-path: inset(0 calc(100% - var(--step) * 100% / 3) 0 0); }
/* the dotted trio stays only where mdil.ai's AIRUT area has it: the "Waitlist" badge (mdil.ai .a-badge .trio) */
.trio { display: inline-flex; gap: 3px; }
.trio i { width: 7px; height: 7px; border-radius: 99px; background: var(--forest); }
.trio i:nth-child(2) { background: var(--meadow); } .trio i:nth-child(3) { background: var(--signal); }
.av { flex: none; width: 36px; height: 36px; border-radius: 99px; display: grid; place-items: center; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.av--airut { background: var(--brand-ink); }
.av--airut img { height: 15px; width: auto; }
.av--guest { background: var(--accent-soft); color: var(--accent-text); }
.av--s { width: 22px; height: 22px; } .av--s img { height: 9px; }
.pres { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.pres::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--presence); }
.soon { display: inline-block; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 11px; line-height: 20px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.ic { flex: none; width: 40px; height: 40px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; }

/* ---------- 0 · hero: the chat window ---------- */
.hero { padding: 24px 16px 0; display: flex; flex-direction: column; gap: 22px; }
.brand { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; font-weight: inherit; }
.logo { height: 68px; width: auto; margin-left: -2px; }
.headline { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.headline em { font-style: normal; color: var(--accent-text); }
.hero__lead { display: none; margin: 18px 0 0; font-size: 17px; line-height: 26px; color: var(--ink-muted); max-width: 30em; }
.chips { display: none; margin: 22px 0 0; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); border: var(--stroke-control) solid var(--line); background: var(--surface-raised); font-size: 13px; font-weight: 600; color: var(--ink); }
.chip--wait { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.chip .trio i { width: 6px; height: 6px; }

.win { position: relative; border-radius: var(--radius-xl); background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line);
  box-shadow: 0 2px 6px rgba(14, 22, 18, 0.05), 0 22px 44px -16px rgba(14, 22, 18, 0.20), 0 60px 90px -50px rgba(14, 22, 18, 0.28); }
.win__head { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 12px; border-bottom: var(--stroke-hairline) solid var(--line); }
.win__head .av { display: none; width: 40px; height: 40px; }
.win__head .av img { height: 17px; }
.win__who { display: none; flex: 1; min-width: 0; flex-direction: column; }
.win__who b { font-size: 17px; line-height: 22px; font-weight: 600; }
.win__who .pres { font-size: 13px; line-height: 18px; }
.sides { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.side { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted);
  font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 160ms cubic-bezier(.2,.8,.2,1), color 160ms cubic-bezier(.2,.8,.2,1); }
.side:hover { color: var(--ink); }
.side[aria-selected="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-1); }
.film { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #F3F5F4; }
.film picture, .film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 8px; border: 0; border-radius: var(--radius-pill);
  background: var(--brand-ink); color: #FFFFFF; font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-2); cursor: pointer; }
.play:hover { background: var(--neutral-800); }
.play__dot { width: 32px; height: 32px; border-radius: 99px; background: var(--signal); color: var(--brand-ink); display: grid; place-items: center; padding-left: 2px; }
.play__time { color: var(--neutral-300); font-weight: 500; font-variant-numeric: tabular-nums; }
.film.is-playing .play { display: none; }
.upcoming { position: absolute; left: 12px; top: 12px; z-index: 3; margin: 0; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--ink); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-1); }
.upcoming svg { color: var(--accent-text); }

/* ---------- the join (used twice: the window's foot and the final card) ----------
   v3 · NOW: mdil.ai's AIRUT waitlist form, as mdil.ai's #beta-airut draws it (.beta-form, .field-in, .btn-airut, .hp, .note in
   mdil.ai's .airut scope): one email field, one press, a honeypot, a status note. No tick: its consent is the quiet fine line
   (mdil.ai's #privacy words) + Details. LATER (data-joins="on"): the messenger joins, each still behind its one tick, sit under
   the form on phones and as a row under it on wide screens; the email press stays the one green action. */
[data-joins="off"] [data-joins-only] { display: none !important; }
.join { position: relative; display: flex; flex-direction: column; }
.join--win { padding: 16px; border-top: var(--stroke-hairline) solid var(--line); }

.beta-form { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.field-in { width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface-raised);
  color: var(--ink); font: 400 16px/1 var(--font-sans); }
.field-in::placeholder { color: var(--line-strong); opacity: 1; }
.field-in[aria-invalid="true"] { border-color: var(--danger); }
.btn-row { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 1 auto; min-width: 0; min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; }
.btn:active { transform: translateY(1px); }
.btn-airut { background: var(--accent); color: #FFFFFF; font: 600 15px/20px var(--font-sans); letter-spacing: .005em; }
.btn-airut:hover { background: var(--accent-hover); color: #FFFFFF; }
/* the honeypot field: off screen, out of the tab order, read by nobody but a bot (mdil.ai .hp, verbatim) */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* what the form says after a press (mdil.ai .note in its .airut scope; scoped to the form, .note is also the control section's line): ok, bad (fix the field), and the plain note */
.beta-form .note { display: block; margin: 0; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--line-strong); background: rgba(14, 22, 18, 0.04); color: var(--ink); font: 500 12px/1.5 var(--font-sans); }
.beta-form .note.ok { border: 1px solid transparent; background: var(--accent-soft); color: #0A6B40; }
.beta-form .note.bad { padding: 0; border: 0; background: none; color: var(--danger); font: 400 13px/1.4 var(--font-sans); }
/* the one quiet legal line (mdil.ai .fine: 12 px, 1.55, muted), ending in Details */
.fine { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-muted); overflow-wrap: anywhere; text-wrap: pretty; }
.fine .details-link { position: relative; min-height: 0; padding: 0; vertical-align: baseline; text-underline-offset: 2px; }
.fine .details-link::after { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; }

/* the messenger joins: declared and turned on later; until then nothing of them shows, not even the tick */
.msgr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin-top: 16px; padding-top: 4px; border-top: var(--stroke-hairline) solid var(--line); }
.msgr .consent { order: 1; flex: 1 1 100%; }
.msgr .btn-msg { order: 2; margin-top: 4px; }
.msgr .alt { order: 3; margin-top: 4px; }
/* the second press, as mdil.ai's AIRUT area draws its second press (.btn-a-sec) */
.btn-msg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--line-strong);
  background: var(--surface-raised); color: var(--ink); font: 600 15px/20px var(--font-sans); white-space: nowrap; text-decoration: none; transition: background-color .15s ease; }
.btn-msg:hover { background: var(--surface-sunken); }
.btn-msg svg { color: var(--accent-text); }
.consent { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.tick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.tick__box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: var(--stroke-control) solid var(--line-strong); background: var(--surface-raised); display: grid; place-items: center; color: transparent;
  transition: background-color 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms cubic-bezier(.2,.8,.2,1); }
.tick__box svg { stroke-width: 3; }
.tick input:checked + .tick__box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tick input:focus-visible + .tick__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.details-link { min-height: 44px; padding: 0 2px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.need-hint { display: none; flex-basis: 100%; margin-top: -6px; padding-left: 34px; font-weight: 600; color: var(--danger); }
.consent.need .tick__box { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.consent.need .need-hint { display: block; }
.alt { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.alt:hover { text-decoration: underline; text-underline-offset: 3px; }
.details { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; padding: 20px 20px 16px; border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink);
  border: var(--stroke-hairline) solid var(--line); box-shadow: var(--shadow-2); text-align: left; }
.details__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.details h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.details ul { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 8px; }
.details li { position: relative; padding-left: 18px; font-size: 14px; line-height: 20px; }
.details li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 99px; background: var(--forest); }
.details li:nth-child(3n+2)::before { background: var(--meadow); } .details li:nth-child(3n)::before { background: var(--signal); }
.details__fine { margin: 0 0 8px; font-size: 14px; line-height: 20px; }
.details__fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.details__fine + ul { margin-top: 12px; }
.details__more { display: flex; width: fit-content; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.x { width: 44px; height: 44px; margin: -10px -10px -10px 0; border: 0; border-radius: 99px; background: transparent; color: var(--ink-muted); display: grid; place-items: center; cursor: pointer; }
.x:hover { background: var(--surface-sunken); color: var(--ink); }

/* ---------- sections ---------- */
.sec { padding: var(--space-7) 0; }
.sec--tint { background: var(--neutral-50); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-3); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--accent-text); }
.h2 { margin: 0; max-width: 22em; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.h2 em { font-style: normal; color: var(--accent-text); }
.lead { margin: var(--space-3) 0 0; max-width: 40em; font-size: 17px; line-height: 26px; color: var(--ink-muted); }
.lead--ink { color: var(--ink); font-weight: 600; }
.aside { color: var(--ink); font-weight: 500; }
.card { background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-1); }
.card h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.card > p { margin: 0; color: var(--ink-muted); }
.grid2, .grid3, .grid4 { display: grid; gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }

/* 1 · why: the one-line mark, lit to each box's step (mdil.ai .a-card:nth-child(n){--step:n}) */
.why:nth-child(1) .tmark { --step: 1; } .why:nth-child(2) .tmark { --step: 2; } .why:nth-child(3) .tmark { --step: 3; }
.card .kicker { margin: 16px 0 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--accent-text); }
.why h3 { margin-bottom: 8px; }
.bridge { margin: var(--space-6) auto 0; max-width: 20em; text-align: center; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.bridge em { font-style: normal; color: var(--accent-text); }

/* 2 · how it works: four boxes, each with its own small picture */
.step { display: flex; flex-direction: column; }
.pic { display: flex; align-items: center; justify-content: center; padding: 18px 16px; border-radius: var(--radius-md); background: var(--surface); border: var(--stroke-hairline) solid var(--line); }
.num { width: 28px; height: 28px; margin: var(--space-4) 0 0 !important; border-radius: 99px; background: var(--brand-ink); color: #FFFFFF !important; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.step h3 { margin: 10px 0 6px; }
.chanlist { display: flex; flex-direction: column; gap: 8px; }
.chan { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); border: var(--stroke-control) solid var(--line); background: var(--surface-raised); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chan svg { color: var(--ink-muted); }
.chan--more { color: var(--ink-muted); border-style: dashed; }
.threads { width: 40px; height: 136px; flex: none; }
.threads path { fill: none; stroke: var(--signal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mini { width: 150px; flex: none; border-radius: 14px; background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; }
.mini__head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: var(--stroke-hairline) solid var(--line); font-size: 12px; }
.mini .b { margin: 10px 9px 12px; font-size: 12px; line-height: 16px; }
.pic--portal { flex-direction: column; align-items: stretch; gap: 10px; }
.portal__name { margin: 0 !important; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink) !important; }
.portal__name svg { color: var(--accent-text); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); font-size: 12px; font-weight: 600; }
.tile svg { color: var(--accent-text); }
.pic--chat { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.pic--rooms { flex-direction: column; align-items: stretch; gap: 10px; }
.agent { margin: 0 !important; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink) !important; }
.agent__where { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.rooms { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rooms li { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 12px; border-radius: 12px; background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); font-size: 14px; font-weight: 600; }
.rooms svg { color: var(--accent-text); }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 600; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--presence); }

/* chat bubbles (DS ChatBubble shape) */
.b { margin: 0; max-width: 86%; padding: 10px 12px; border-radius: 16px; font-size: 14px; line-height: 20px; }
.b--you { align-self: flex-end; background: var(--bubble-guest); color: var(--on-bubble-guest); border-bottom-right-radius: var(--radius-xs); }
.b--airut { align-self: flex-start; background: var(--bubble-airut); color: var(--ink); border-bottom-left-radius: var(--radius-xs); }
.pic .b--airut { display: flex; gap: 8px; align-items: flex-start; }
.b .t { display: block; margin-top: 2px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.b--you .t { color: rgba(255, 255, 255, 0.72); text-align: right; }

/* 3 · one conversation */
.convo { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: var(--space-5); }
.panel { margin: 0; }
.panel figcaption { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.pn { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; background: var(--forest); color: #FFFFFF; font-size: 12px; font-weight: 700; }
.panel:nth-of-type(2) .pn { background: var(--meadow); }
.panel:nth-of-type(3) .pn { background: var(--signal); color: var(--brand-ink); }
.phone { border-radius: var(--radius-lg); background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; }
.phone__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: var(--stroke-hairline) solid var(--line); }
.phone__head b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.phone__body { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.tag { align-self: flex-start; margin: -2px 0 0 4px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--accent-text); }
.offer { padding: 12px; border-radius: 14px; border: var(--stroke-hairline) solid var(--line); background: var(--surface-raised); box-shadow: var(--shadow-1); }
.offer__q { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.offer__s { margin: 0 0 10px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.offer__btns { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.mbtn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); border: var(--stroke-control) solid var(--line-strong); font-size: 13px; font-weight: 600; }
.mbtn--on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mbtn--quiet { border-color: transparent; color: var(--accent-text); }
.hop { align-self: center; color: var(--line-strong); transform: rotate(90deg); }
.hop svg { display: block; }
.convo__foot { margin: var(--space-4) 0 0; max-width: 46em; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.convo__foot b { color: var(--ink); }

/* 4 · use cases */
.group { margin-top: var(--space-5); }
.group__h { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 28px; font-weight: 600; }
.group__lead { margin: 6px 0 0; max-width: 40em; color: var(--ink-muted); }
.group .grid3, .group .grid4 { margin-top: var(--space-3); }
.group--personal { margin-top: var(--space-6); }
.use { padding: var(--space-4); }
.use__top { margin: 0 !important; display: flex; align-items: center; gap: 12px; color: var(--ink) !important; }
.use__top b { font-size: 17px; line-height: 24px; font-weight: 600; }
.use .q { display: inline-block; margin: var(--space-3) 0 var(--space-2); padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--neutral-50); color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 500; }
.use--soon { background: var(--surface); border: var(--stroke-control) dashed var(--neutral-300); box-shadow: none; }
.use--soon .q { background: var(--surface-raised); }

/* 5 · control */
.ctlc h3 { margin: 0; font-size: 18px; line-height: 24px; }
.ctlc, .tcard { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; }
.ctlc > p, .tcard > p { grid-column: 1 / -1; margin-top: var(--space-2) !important; }
.note { margin: var(--space-4) 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* 6 · economics */
.chart { margin: var(--space-5) 0 0; padding: var(--space-5); }
.chart figcaption { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.row { margin-top: var(--space-4); }
.row__h { margin: 0 0 8px !important; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.row__h--airut { color: var(--accent-text) !important; font-weight: 600; }
.bars { margin: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; }
.bars i { display: block; height: 12px; border-radius: 4px; }
.bars--flat i { background: var(--neutral-300); }
.bars--airut i:nth-child(1) { background: var(--forest); }
.bars--airut i:nth-child(2) { background: var(--meadow); width: 40%; }
.bars--airut i:nth-child(3) { background: var(--signal); width: 9%; }
.axis { margin: 12px 0 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 12px; line-height: 16px; font-weight: 500; }

/* 7 · outcomes */
.outs { margin: var(--space-5) 0 0; }
.outs div { display: grid; gap: 4px; padding: var(--space-3) 0; border-top: var(--stroke-hairline) solid var(--line); }
.outs div:last-child { border-bottom: var(--stroke-hairline) solid var(--line); }
.outs dt { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.outs dd { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }

/* 8 · trust: the one dark band */
.sec--dark { background: var(--green-950); color: #EEF3F0; }
.sec--dark .h2 { color: #EEF3F0; }
.sec--dark .h2 em, .eyebrow--dark { color: #56D493; }
.tcard { padding: var(--space-4); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
.tcard .ic { background: rgba(51, 196, 125, 0.14); color: #56D493; }
.tcard h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: #EEF3F0; }
.tcard p { margin: 0; color: #A3AEA8; }

/* 9 · FAQ */
.faq { margin-top: var(--space-5); }
.faq details { margin-bottom: 10px; break-inside: avoid; }
.faq details { background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); border-radius: 16px; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 18px 16px 20px; font-size: 17px; line-height: 24px; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--accent-text); transition: transform 160ms cubic-bezier(.2,.8,.2,1); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 20px 20px; color: var(--ink-muted); }

/* 10 · your turn */
.final { text-align: center; }
.final .h2, .final .lead { margin-left: auto; margin-right: auto; }
.kick { margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--accent-text); }
.final .h2 { font-size: 36px; line-height: 42px; }
/* the final card is the AIRUT waitlist card: mdil.ai #beta-airut's padding and its decorative top (.beta-top, three flush
   segments in the step greens, 4 px). The top is clipped to the card's corner by its own rounded layer, so the card itself
   need not clip (its Details popover opens above it). */
.joincard { position: relative; max-width: 520px; margin: var(--space-5) auto 0; padding: 26px 20px 16px; border-radius: var(--radius-xl); background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); box-shadow: var(--shadow-2); text-align: left; }
.beta-top { position: absolute; inset: 0; display: flex; align-items: flex-start; border-radius: calc(var(--radius-xl) - 1px); overflow: hidden; pointer-events: none; }
.beta-top i { flex: 1; height: 4px; }
.beta-top i:nth-child(1) { background: var(--forest); } .beta-top i:nth-child(2) { background: var(--meadow); } .beta-top i:nth-child(3) { background: var(--signal); }
.final__quiet { margin: var(--space-4) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- footer ---------- */
.foot { border-top: var(--stroke-hairline) solid var(--line); padding: var(--space-5) 0 80px; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.foot__row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.foot__logo { height: 26px; width: auto; }
.foot p { margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 500; }
.foot a:hover { text-decoration: underline; }

/* ---------- Ask Airut: a bubble the visitor opens, never a section ---------- */
.ask { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 8px;
  border-radius: var(--radius-pill); border: var(--stroke-hairline) solid var(--line); background: var(--surface-raised); color: var(--ink); font-size: 15px; font-weight: 600; box-shadow: var(--shadow-2); cursor: pointer; }
.ask__av { width: 32px; height: 32px; border-radius: 99px; background: var(--brand-ink); display: grid; place-items: center; flex: none; }
.ask__av img { height: 14px; width: auto; }
.askp { position: fixed; right: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 60px); z-index: 45; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column;
  border-radius: var(--radius-lg); background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; }
.askp__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: var(--stroke-hairline) solid var(--line); }
.askp__head .ask__av { width: 36px; height: 36px; }
.askp__who { flex: 1; display: flex; flex-direction: column; }
.askp__who b { font-size: 17px; line-height: 22px; }
.askp__who span { font-size: 12px; color: var(--ink-muted); }
.askp__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 180px; justify-content: flex-end; }
.bub { margin: 0; max-width: 88%; padding: 12px 16px; border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-xs); background: var(--bubble-airut); }
.chips2 { display: flex; flex-wrap: wrap; gap: 8px; }
.chips2 button { height: 36px; padding: 0 12px; border-radius: var(--radius-pill); border: var(--stroke-control) solid var(--line-strong); background: var(--surface-raised); font-size: 14px; font-weight: 600; cursor: pointer; }
.askp__foot { padding: 0 16px 12px; }
.cmp { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 6px 0 16px; border-radius: var(--radius-pill); border: var(--stroke-control) solid var(--line); color: var(--ink-muted); }
.cmp i { width: 36px; height: 36px; border-radius: 99px; background: var(--surface-sunken); display: grid; place-items: center; }
.askp__foot p { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* ---------- 720 px and up ---------- */
@media (min-width: 720px) {
  .wrap { max-width: calc(1120px + 2 * 40px); padding: 0 40px; }
  .hero { padding: var(--space-7) 40px 0; }
  .logo { height: 88px; }
  .headline { font-size: 48px; line-height: 54px; }
  .hero__lead { display: block; }
  .chips { display: flex; }
  .win__head { justify-content: flex-start; padding: 12px 14px 12px 16px; }
  .win__head .av { display: grid; }
  .win__who { display: flex; }
  .film { aspect-ratio: 16 / 9; }
  .play { left: 18px; top: 18px; height: 52px; font-size: 16px; padding-right: 22px; }
  .play__dot { width: 36px; height: 36px; }
  .upcoming { left: 18px; top: 18px; }
  /* the window's foot is its composer: the field where you would type, the press where Send would be */
  .join--win { padding: var(--space-4) var(--space-4) 14px; }
  .join--win .beta-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .join--win .beta-form .note { grid-column: 1 / -1; }
  .join--win .fine { margin-top: 10px; text-wrap: balance; }
  .join--win .msgr { flex-wrap: nowrap; column-gap: var(--space-3); margin-top: 14px; padding-top: 10px; }
  .join--win .msgr .consent { flex: 1 1 auto; min-width: 0; }
  .join--win .msgr .alt { order: 2; margin-top: 0; }
  .join--win .msgr .btn-msg { order: 3; margin-top: 0; }
  .details { position: absolute; left: 0; right: auto; bottom: calc(100% + 12px); width: 440px; }
  .join--win .details { left: 12px; }
  .sec { padding: var(--space-8) 0; }
  .card, .use, .tcard { padding: var(--space-5); }
  .pic { min-height: 176px; }
  .ctlc, .tcard { display: block; }
  .ctlc h3, .tcard h3 { margin: var(--space-3) 0 6px; }
  .ctlc > p, .tcard > p { margin-top: 0 !important; }
  .h2 { font-size: 40px; line-height: 46px; }
  .grid2, .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .bridge { font-size: 32px; line-height: 40px; }
  .outs div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: baseline; }
  .faq { columns: 2; column-gap: 16px; }
  .faq details { margin-bottom: 12px; }
  .final .h2 { font-size: 48px; line-height: 54px; }
  .joincard { padding: 28px 24px 18px; }
  .foot { padding-bottom: var(--space-6); }
  .foot__row { flex-direction: row; align-items: center; gap: 24px; }
  .foot nav { margin-left: auto; }
}

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  .wrap { max-width: calc(1120px + 2 * 64px); padding: 0 64px; }
  .hero { max-width: calc(1120px + 2 * 64px); margin: 0 auto; padding: var(--space-6) 64px 0; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
  .logo { height: 104px; margin-left: -4px; }
  .brand { gap: var(--space-6); }
  .headline { font-size: 48px; line-height: 52px; }
  .headline em { display: block; }
  .grid2, .grid3, .grid4 { gap: var(--space-5); }
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .convo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 12px; }
  .hop { transform: none; align-self: center; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .split .chart { margin-top: 0; }
}

/* a full-page screenshot shows the Ask Airut bubble at the page's end instead of over a section */
.is-full body { position: relative; }
.is-full .ask { position: absolute; }
.is-full .foot { padding-bottom: 80px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }