/* ==========================================================================
   Emusary mobile layer (phones, <= 760px)
   Loaded LAST and media-gated in <link media="(max-width: 760px)">, so nothing
   here reaches desktop and every rule below beats styles.css / page.css on
   source order alone (where those files use #ids, the selector is repeated).

   What it does, in order of importance:
   1. Nothing wider than the viewport. Two nowrap headlines (hero h1, AAC
      rotator) were pushing the layout viewport to ~417px on a 375px phone,
      which is what shifted the header and hamburger off-screen.
   2. Display type sized for a phone: 4-6 line uppercase headings come down
      to 2-4 lines; mono microcopy floors at 10px.
   3. Fewer, flatter graphics: side cards, wires, timeline rail, ring
      flourishes, the lineage illustration and the duplicate approval record
      are dropped; the remaining panels become single-column lists.
   4. Tighter vertical rhythm (the page was ~12,700px tall at 375px wide).
   ========================================================================== */

/* ---- Rhythm + safety --------------------------------------------------- */
/* Belt and braces: a decorative bleed can clip but can never widen the page. */
main { overflow-x: clip; }
.section { padding-top: 28px; padding-bottom: 48px; }
#why, #aac { padding-bottom: 48px; }
.section-index { margin-bottom: 22px; }
.section-heading { margin-bottom: 26px; }
.kicker { margin-bottom: 12px; }

/* ---- Header / nav ------------------------------------------------------ */
/* Solid menu sheet: nothing from the hero shows through while it is open. */
.nav__links { background: var(--ink); }

/* ---- Hero -------------------------------------------------------------- */
.hero__grid { gap: 28px; padding-block: 40px 36px; }
/* Sized so "into user actions." (the longest line) fits the 100vw - 34px shell
   at every phone width; the wrap is only a fallback. */
.hero h1 { font-size: clamp(28px, 9.2vw, 44px); line-height: .92; }
.hero h1 span.hero__line--nowrap { white-space: normal; }
.hero__lede { margin-top: 18px; font-size: 15.5px; }
.hero__actions { gap: 12px; margin-top: 24px; }
.hero__proof { gap: 8px; margin-top: 24px; }

/* Context panel: a single-column feed. The side cards repeat what the flagged
   feed rows already say and the connector wires need the two-column layout. */
.trace { width: auto; margin-left: 0; box-shadow: none; }
.trace::after { display: none; }
.trace__topbar { height: 42px; padding: 0 12px; }
.ctx-grid { grid-template-columns: 1fr; gap: 0; padding: 8px; background: none; }
.ctx-cards, .ctx-wires { display: none; }
.ctx-feed { gap: 4px; }
.ctx-event { grid-template-columns: auto 1fr; gap: 3px 10px; padding: 9px 10px; }
.ctx-event time, .ctx-event__tag { font-size: 10px; }
.ctx-event p { grid-column: 1 / -1; font-size: 13px; }
.ctx-event--review p { font-size: 10.5px; }
.ctx-footline { padding: 12px 12px 14px; }
.ctx-footline strong { font-size: 15px; }

/* ---- 01 The why -------------------------------------------------------- */
.evidence__copy h2 { font-size: clamp(30px, 8.4vw, 42px); }
.evidence__copy > p:not(.kicker) { margin-top: 16px; font-size: 15px; }
.evidence__copy ul { gap: 8px; margin-top: 20px; font-size: 12px; }
/* Investigation record: keep the summary and the four steps, lose the rail and
   dots, and put each step's timestamp + tag on one line above its text. */
.incident-ui { width: auto; margin: 28px 0 0; box-shadow: none; }
.incident-ui__bar { height: 42px; padding-inline: 14px; }
.incident-ui__summary { gap: 14px; padding: 16px 14px; }
.incident-ui__summary h3 { margin-top: 8px; font-size: 18px; }
.incident-ui__summary dl { font-size: 10.5px; }
.incident-ui__body { padding: 8px 6px 10px; }
.incident-ui ol { gap: 2px; }
.incident-ui ol::before, .incident-ui li::before { display: none; }
.incident-ui li { grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 10px 8px; }
.incident-ui li > div { display: contents; }
.incident-ui time { padding-top: 0; font-size: 10px; }
.incident-ui li span { font-size: 10px; }
.incident-ui li strong { grid-column: 1 / -1; margin-top: 2px; font-size: 14px; }
.incident-ui li p { grid-column: 1 / -1; margin-top: 2px; font-size: 12px; }

/* ---- 02 Adaptive application control ----------------------------------- */
/* Sized so the longest rotator phrase ("99+ approval requests.") fits the shell
   at every phone width; the rotator itself must stay nowrap for its wipe. */
h2.aac-heading { font-size: clamp(22px, 7vw, 46px); }
.bento, .bento__col { gap: 12px; }
.bento-card { min-height: 0; padding: 22px 18px; }
.bento-card::after { display: none; }
.bento-card h3 { margin: 0 0 12px; font-size: clamp(22px, 6.4vw, 30px); }
.bento-card > p { font-size: 14.5px; }
/* The approval record retells the hero feed's designkit-setup.exe story
   (same score, same bar); on a phone that is 580px of duplicate panel. */
.incident-ui--bento { display: none; }
.compare-wrap { padding-top: 22px; }
.compare__head { padding: 9px 10px; font-size: 9px; }
.compare__cell { padding: 11px 10px; font-size: 11px; }

/* ---- 03 Secure by design ----------------------------------------------- */
#trust .section-heading h2 { font-size: clamp(26px, 7.6vw, 46px); }
#trust .trust-card { padding: 22px 18px; }
#trust .trust-card--lead { min-height: 0; background: #080c0f; }
#trust .trust-card--lead .trust-card__big { margin: 14px 0 10px; font-size: clamp(72px, 22vw, 110px); text-shadow: none; }
#trust .trust-card--lead h3 { font-size: 28px; }
#trust .trust-card:not(.trust-card--lead) h3 { margin-top: 10px; font-size: 22px; }
#trust .trust-card p { font-size: 14px; }
.trust-card__more { margin-top: 18px; padding-top: 18px; }

/* ---- Research lineage -------------------------------------------------- */
/* At phone widths the illustration sat almost entirely under the shade
   gradient; hide it and let the copy stand on the ink. (Hiding is visual only:
   the lazy <img> may still fetch its ~72KB webp once it is near the viewport.) */
/* (#research prefix: page.css scopes its lineage overrides to the id.) */
#research .lineage { min-height: 0; background: var(--ink-2); }
#research .lineage picture, #research .lineage__shade { display: none; }
#research .lineage__content { padding-block: 44px 40px; }
#research .lineage__content h2 { font-size: clamp(28px, 8.6vw, 58px); }
#research .lineage__content h2 br { display: none; }
#research .lineage__content > p:not(.kicker) { margin-top: 16px; font-size: 15px; }
#research .lineage__content > p:not(.kicker) + p { margin-top: 12px; font-size: 15px; }
.research-index { margin-top: 0; padding-bottom: 48px; }
.project-card { padding: 20px 16px 18px; }
.project-card__head { margin-bottom: 16px; padding-bottom: 12px; }
.project-card h3 { font-size: 22px; }
.project-card__foot { padding-top: 18px; }

/* ---- 04 The team ------------------------------------------------------- */
#team .team__intro h2 { font-size: clamp(28px, 8vw, 42px); }
#team .team__intro p { margin-top: 16px; font-size: 14.5px; }
#team .team__grid { margin-top: 24px; }
#team .person-card { padding: 24px 0; }
#team .person-card h3 { margin: 8px 0; font-size: 24px; }

/* ---- Contact ----------------------------------------------------------- */
.contact__orb { display: none; }
.contact__copy h2 { font-size: clamp(32px, 9.4vw, 52px); }
.contact__copy > p:not(.kicker) { margin-top: 16px; font-size: 15px; }
.contact__promise { margin-top: 24px; padding: 16px 0; }
.contact-form { margin-top: 28px; padding: 18px 14px; box-shadow: none; backdrop-filter: none; }
.form-actions { margin-top: 20px; }

/* ---- Footer ------------------------------------------------------------ */
.site-footer { padding-block: 40px 36px; }
.site-footer__grid { gap: 28px; }