/* airut.ai home (AIRUT-HOME-2): what the built page adds to the approved bfull.css (which is carried byte for byte).
   1. The film frame and the screen-reader class, verbatim from the mockup's shared mock.css (its toast was mockup-only).
   2. The wiring the approved design needs to work, each drawn with the design's own values and none changing a pixel of
      the approved pictures: the Ask Airut composer as a real field, its answers, and hit areas widened to 44 px where
      the approved control is drawn smaller. */

/* ---------- 1. from mock.css: the film full screen on phones, inline on wide screens; .sr ---------- */
.mk-film-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(8, 32, 19, 0.92); }
.mk-film-box { width: min(100%, calc((100svh - 32px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #F3F5F4; }
.mk-film-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.mk-film-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mk-film-live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; background: #F3F5F4; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* ---------- 2b. Ask Airut: the approved composer, as a field ---------- */
.cmp__in { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; }
.cmp__in::placeholder { color: var(--ink-muted); opacity: 1; }
.cmp:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cmp__go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -4px; padding: 0; border: 0; border-radius: 99px;
  background: none; color: inherit; cursor: pointer; }
.cmp__go:disabled { cursor: default; }
.askp__body { max-height: min(56vh, 440px); overflow-y: auto; }
.askp__body .b--you { max-width: 88%; }
.bub--a { white-space: pre-line; }
.bub--wait .trio { vertical-align: middle; }

/* ---------- 2c. 44 px hit areas where the approved control is drawn smaller (no visible change) ---------- */
.chips2 button { position: relative; }
/* the approved chips are 36 px tall and wrap 44 px apart (36 + an 8 px gap): each owns its 44 px band, without overlap */
.chips2 button::after { content: ""; position: absolute; left: 0; right: 0; top: calc(-3px - var(--stroke-control)); bottom: calc(-3px - var(--stroke-control)); }
.final__quiet a { padding: 14px 0; }
.details__fine a { padding: 14px 0; }               /* the two mail links in the Details' privacy words (v3) */
.foot nav a { padding: 0 6px; margin: 0 -6px; }

/* ---------- /remove/: the one-tap removal, in the approved page's own parts (the final card) ---------- */
.rm__logo { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--space-5); }
.rm__logo img { height: 28px; width: auto; }
.rm .joincard > p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); text-align: center; }
.rm .joincard > p + * { margin-top: var(--space-3); }
button.btn-join { width: 100%; border: 0; cursor: pointer; font: inherit; font-size: 17px; line-height: 24px; font-weight: 600; }
button.btn-join:disabled { opacity: 0.6; cursor: default; }

/* ---------- the plain line under the headline and its chips show on phones too (v3 hid .hero__lead and .chips under
   720 px, so a phone reader never learned what Airut does). No new style: the same element, the same values, only no
   longer hidden. ---------- */
@media (max-width: 719px) {
  .hero__lead { display: block; }
  .chips { display: flex; }
}
/* the hero lead never ends on one word alone (AIRUT-HOME-KNOWS-1: at 320 px "reliable." stood alone): the declaration
   bfull.css already gives .fine, scoped to the lead (bfull.css stays byte for byte) */
.hero__lead { text-wrap: pretty; }
/* the Ask Airut bubble steps aside on phones while the film is on screen (it covered the film's caption) */
.ask.is-away { opacity: 0; visibility: hidden; pointer-events: none; }
.ask { transition: opacity 160ms ease, visibility 160ms ease; }
/* the Ask Airut discs are LIGHT (ASK-DISC-LIGHT-1, Antti 2026-10-20: "make airut light in both airut.ai ask and mdil.ai
   ask"): the pill's disc and the open card head's take --neutral-50, mdil.ai's value for the same disc, the colour mark
   (ds/logos/airut-mark.svg) as is, ringed inside with a --neutral-200 hairline (the pill's own --line value) so the light
   disc shows on the white pill and card. The Menu pill has no disc since MENU-TEXT-ONLY-1 (menu dark, ask light). */
.ask .ask__av, .askp__head .ask__av { background: var(--neutral-50); box-shadow: inset 0 0 0 var(--stroke-hairline) var(--neutral-200); }
/* the trust section's one-line answer sits on the dark band in the band's own muted text colour (as .tcard p) */
.sec--dark .lead { color: #A3AEA8; }
/* the 13+ line beside its box only (never in the Details the email form opens): under the tick's words, as the need
   hint sits, in the fine line's size */
.tick__age { flex-basis: 100%; margin-top: -6px; padding-left: 34px; font-size: 12px; line-height: 1.55; }

/* ---------- the Menu pill (AIRUT-HOME-NAV-1, the designer's plan): top right, Ask Airut's pair in shape (its height, radius
   and type), shown and hidden as .ask.is-away is. The word Menu only (MENU-TEXT-ONLY-1, Antti D-161023-14: "Lets remove
   the logo icon from the menu. ITS redundant and takes away space. So only reads menu"): no mark disc, so the padding is
   Ask's own 18 px text side on both sides. DARK, where Ask
   stays light (Antti 2026-10-20: "the upper menu is 'dark' and ask is light. So they arent identical"; a visitor: two
   identical-looking things leading to two different actions): the page's ink (--brand-ink, as the
   film's .play), white words, a --neutral-500 hairline that reads on the light page and on the dark band; the focus ring
   is the page's own (bfull.css :focus-visible).
   It starts away (the approved first screen has no pill); home.js shows it once the first screen has gone by. Its card:
   the full logo back to top, five sections, the waitlist press. z: .ask 40 < .askp 45 < this 50 < .details 60 < the
   film 100. The card ends 8 px above the Ask button however short the screen (124 = 12 + 48 + 8 above, 48 + 8 below). ---------- */
.sitenav { position: fixed; top: calc(env(safe-area-inset-top) + 12px); right: calc(env(safe-area-inset-right) + 16px); z-index: 50;
  transition: opacity 160ms ease, visibility 160ms ease; }
.sitenav.is-away { opacity: 0; visibility: hidden; pointer-events: none; }
.sitenav__btn { display: inline-flex; align-items: center; height: 48px; margin: 0; padding: 0 18px; border-radius: var(--radius-pill);
  border: var(--stroke-hairline) solid var(--neutral-500); background: var(--brand-ink); color: var(--neutral-0); font-size: 15px; font-weight: 600;
  box-shadow: var(--shadow-2); cursor: pointer; }
.sitenav__menu { position: absolute; top: calc(100% + 8px); right: 0; width: min(320px, calc(100vw - 32px));
  max-height: calc(100svh - env(safe-area-inset-top) - max(16px, env(safe-area-inset-bottom)) - 124px); overflow-y: auto;
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line);
  box-shadow: var(--shadow-2); }
.sitenav__top { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--space-2); }
.sitenav__top img { height: 28px; width: auto; }
.sitenav__list { margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.sitenav__list a { display: flex; align-items: center; min-height: 44px; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2);
  border-radius: var(--radius-sm); font: 600 15px/22px var(--font-sans); color: var(--ink); text-decoration: none; }
.sitenav__list a:hover { background: var(--surface-sunken); }
.sitenav__join { display: flex; width: 100%; }

/* ---------- a phone's page never zooms and never slides sideways (MOBILE-NO-ZOOM-1, Antti D-161023-15: "Lock zoom. Now double
   tapping zooms in and can side scroll"; mdil.ai's ZOOM-LOCK-1 method, one component): the viewport line says
   maximum-scale=1, user-scalable=no, html takes touch-action pan-x pan-y (no pinch, no double-tap zoom; one-finger
   scrolling stays), and home.js refuses iOS Safari's own pinch events. Measured: below 376 px the first How picture
   (.pic--channels: the channel pills, the 40 px threads and the 150 px chat card, both flex: none in bfull.css) needs
   292 px, more than its card has, and the one-column grid's auto track grew every How card to 360 px, past a 360 px
   screen. There the column follows the screen and the threads and the chat card give way (the card keeps 112 px, its
   head's name whole down to a 320 px screen); from 376 px up nothing changes
   (the approved 390 px views included). ---------- */
html { touch-action: pan-x pan-y; }
@media (max-width: 375px) {
  .grid2.how { grid-template-columns: minmax(0, 1fr); }
  .pic--channels .threads { flex: 0 1 40px; min-width: 12px; }
  .pic--channels .mini { flex: 0 1 150px; min-width: 112px; }
}