/* ------------------------------------------------------------------------
   AiFA landing page — production stylesheet.
   Layer 1 replaces values the design canvas computed in JS with real CSS.
   Layer 2 adds the small-screen layout the canvas artboard never had.
   ---------------------------------------------------------------------- */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #FFFFFF; overflow-x: hidden; }
img, video { max-width: 100%; }
/* [data-book-done] and [data-book-error] set display in CSS, which would
   otherwise beat the hidden attribute */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid #151414; outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layer 1: was JS (renderVals) --------------------------------------- */

[data-hero-col] { max-width: 460px !important; }
[data-hero-h1]  { font-size: 40px !important; }

@media (min-width: 1060px) {
  [data-hero-col] { max-width: 600px !important; }
  [data-hero-h1]  { font-size: 50px !important; }
}
@media (min-width: 1280px) {
  [data-hero-col] { max-width: 760px !important; }
  [data-hero-h1]  { font-size: 60px !important; }
}

/* --- Layer 2: small screens --------------------------------------------- */

/* Nav: the OHM lockup (wordmark with "by YantrAI" under it) is 48.5px tall,
   against 33px for the old one. Trimming the bar's vertical padding keeps the
   header the height it was at every width: 65.8px here, ~69px below 1020px. */
[data-nav] { padding-top: 8px !important; padding-bottom: 8px !important; }

/* Nav: below 1020px the design hides the link row. Give it a disclosure. */
[data-nav-toggle] { display: none; }

@media (max-width: 1020px) {
  [data-nav] { padding: 10px 20px !important; gap: 12px !important; }
  /* The menu button sits at the far right, after the demo CTA: the brand
     takes the free space, so everything after it packs to the right. */
  [data-nav] > :first-child { margin-right: auto; }
  [data-nav-toggle] { order: 1; }
  [data-nav-toggle] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    background: #FFFFFF; border: 1px solid #E6EAE4; border-radius: 10px;
    cursor: pointer; color: #151414;
  }
  [data-nav-toggle] span {
    position: relative; display: block; width: 16px; height: 1.5px; background: currentColor;
  }
  [data-nav-toggle] span::before,
  [data-nav-toggle] span::after {
    content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor;
  }
  [data-nav-toggle] span::before { top: -5px; }
  [data-nav-toggle] span::after  { top: 5px; }

  [data-nav-links] {
    display: none !important;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0 !important;
    background: #FFFFFF; border-bottom: 1px solid #E6EAE4;
    padding: 6px 20px 14px;
  }
  html.nav-open [data-nav-links] { display: flex !important; }
  [data-nav-links] a { width: 100%; padding: 12px 0; border-top: 1px solid #F1F3EF; }
}

@media (max-width: 760px) {
  [data-nav] { padding: 10px 16px !important; }
  [data-nav-cta] { gap: 14px !important; }

  /* Hero */
  [data-hero] { padding: 56px 20px 36px !important; min-height: 0 !important; }
  [data-hero-h1] { font-size: 32px !important; }
  [data-hero-cta] a { width: 100%; justify-content: center; }

  /* Video */
  [data-video-section] { padding: 0 16px 64px !important; }

  /* Trust band */
  [data-trust] { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; padding: 30px 0 32px !important; }
  [data-trust] > div:first-child { padding-left: 20px !important; }

  /* Section padding */
  [data-section="problem"] { padding: 84px 20px !important; }
  [data-section="integration"] { padding: 84px 0 0 !important; }
  [data-compare] { padding: 0 16px 84px !important; }
  [data-footer] { padding: 72px 20px 0 !important; }

  /* Display headings are sized for a 1440px artboard */
  #problem h2, #integration h2 { font-size: 32px !important; }
  #problem p, #integration p { font-size: 15.5px !important; }
  [data-stat] > span:first-child { font-size: 44px !important; }
  [data-stat-row] { margin-top: 56px !important; }
}

/* --- Agents: the ring needs ~430px; below that, lay it out linearly ----- */

@media (max-width: 900px) {
  /* Keep the pinned scroll narrative, but shorten the track and swap the dial
     for a linear layout that fits a phone. */
  #agents { height: 300vh !important; }
  #agents > div { height: 100svh !important; padding: 12px 20px !important; }
  [data-agents-inner] { gap: 14px !important; }
  [data-agents-head] h2, #agents h2 { font-size: 25px !important; }
  [data-stage] { padding: 11px 14px !important; }
  [data-stage] { padding: 9px 14px !important; }
  /* the notes duplicate what the policy column already says; the rail only
     needs to show which of the three steps is running */
  [data-stage] span + span { display: none !important; }
  [data-stage] [data-stage-name] { font-size: 13.5px !important; }
  [data-policy] span:last-child { font-size: 11.5px !important; }
  [data-ring-center] { margin-bottom: 14px !important; }

  [data-ring-row] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;   /* the grid's align-items:center would
                                          centre-shrink each row in a column */
    gap: 22px !important;
  }

  /* Dial -> stacked block */
  [data-ring] { max-width: none !important; aspect-ratio: auto !important; }
  [data-ring-arc], [data-ring-hole] { display: none !important; }
  [data-ring-center] {
    position: static !important;
    width: auto !important;
    margin: 0 0 20px !important;
    transform: none !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  [data-ring] > [data-ring-agent] {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }
  [data-ring] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  [data-ring-center] { flex: 0 0 100% !important; }
  [data-ring-agent] { font-size: 12px !important; padding: 7px 12px !important; }
}

/* --- Proof: stack each metric row -------------------------------------- */

@media (max-width: 900px) {
  #proof { height: 300vh !important; }
  #proof > div { height: 100svh !important; padding: 20px !important; }
  [data-proof-inner] { gap: 18px !important; }
  #proof h2 { font-size: 30px !important; }
  [data-proof-row] { gap: 18px !important; }
  [data-proof-row] > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 0 !important;
    min-height: 0 !important;
  }
  [data-proof-row] > div > div:empty { display: none !important; }
  [data-gate-conn] { display: none !important; }
  [data-gate-card] { transform: none !important; }
  [data-gate-side] {
    /* rows alternate side/card/side in the grid; stacked, the label must always
       follow its card rather than leading the next one */
    order: 2 !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
    transform: none !important;
    flex-direction: row !important;
    gap: 12px !important;
    align-items: baseline !important;
  }
  [data-gate-side] > span:first-child { font-size: 34px !important; }
}

/* --- Comparison table + footer ----------------------------------------- */

@media (max-width: 760px) {
  [data-compare] > div > div { grid-template-columns: 1.1fr 1fr 1fr !important; }
  [data-compare] > div > div > div { padding: 14px 12px !important; }
  [data-compare] span { font-size: 12px !important; letter-spacing: -0.2px !important; }
}

/* Touch devices: no hover, so the "hover to play" affordance is meaningless
   (app.js autoplays the clip in view instead). */
@media (hover: none) {
  [data-video-hint] { display: none !important; }
}

/* ======================================================================
   The savings-check form (#book) — not part of the canvas artboard.
   Palette and metrics follow the design: Archivo, #151414 ink, #E6EAE4
   hairlines, #B2EEDC / #F9EBA6 accents.
   ==================================================================== */

#book {
  background: #FFFFFF;
  border-top: 1px solid #E6EAE4;
  padding: 128px 56px;
  scroll-margin-top: 90px;
  display: flex;
  justify-content: center;
  font-family: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #151414;
  letter-spacing: -0.03em;
}

[data-book-inner] {
  width: 100%;
  max-width: 1160px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 80px;
  align-items: start;
}

[data-book-intro] h2 {
  margin: 30px 0 0;
  font-family: Newsreader, Georgia, 'Times New Roman', serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
[data-em] {
  font-style: italic;
  background: linear-gradient(180deg, transparent 82%, #B2EEDC 82%, #B2EEDC 96%, transparent 96%);
}
[data-book-intro] > p {
  margin: 26px 0 0;
  max-width: 480px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.5px;
  color: #5A5A5A;
  text-wrap: pretty;
}

[data-eyebrow] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5A5A5A;
}
[data-eyebrow] > span {
  width: 7px;
  height: 7px;
  background: #5ADEB7;
  display: block;
}

[data-book-points] {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 470px;
}
[data-book-points] li {
  position: relative;
  padding-left: 24px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: #5A5A5A;
  text-wrap: pretty;
}
[data-book-points] li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 9999px;
  background: #B2EEDC;
}

/* --- the form itself --- */

[data-book-form] {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid #E6EAE4;
  border-radius: 20px;
  padding: 34px;
  background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(21, 20, 20, 0.07);
}

[data-field] { display: flex; flex-direction: column; gap: 8px; }
[data-field-row] { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

[data-field] label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.26px;
  color: #151414;
}
[data-optional] {
  font-weight: 500;
  letter-spacing: 0;
  color: #9A9A9A;
  text-transform: uppercase;
  font-size: 10.5px;
  margin-left: 6px;
}

[data-book-form] input,
[data-book-form] select,
[data-book-form] textarea,
[data-career-form] input:not([type="file"]),
[data-career-form] select,
[data-career-form] textarea {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: #151414;
  background: #FFFFFF;
  border: 1px solid #DCE0DA;
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s linear, box-shadow 0.2s linear;
}
[data-book-form] textarea,
[data-career-form] textarea { resize: vertical; min-height: 76px; line-height: 1.5; }

[data-book-form] select,
[data-career-form] select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #5A5A5A 50%),
                    linear-gradient(135deg, #5A5A5A 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

[data-book-form] input:focus,
[data-book-form] select:focus,
[data-book-form] textarea:focus,
[data-career-form] input:focus,
[data-career-form] select:focus,
[data-career-form] textarea:focus {
  outline: none;
  border-color: #151414;
  box-shadow: 0 0 0 3px rgba(178, 238, 220, 0.55);
}
[data-book-form] [aria-invalid="true"],
[data-career-form] [aria-invalid="true"] {
  border-color: #E69393;
  box-shadow: 0 0 0 3px rgba(242, 169, 169, 0.3);
}

[data-honeypot] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[data-book-submit] {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background: #151414;
  color: #FFFFFF;
  border: 0;
  border-radius: 10px;
  padding: 17px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.45px;
  cursor: pointer;
  transition: background 0.2s linear, opacity 0.2s linear;
}
[data-book-submit]:hover { background: #272C2B; }
[data-book-submit][disabled] { opacity: 0.55; cursor: default; }
[data-rupee] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 9999px;
  background: #F9EBA6;
  color: #151414;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}
[data-arrow] { font-size: 15px; line-height: 1; }

[data-book-note] {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.25px;
  color: #767676;
}
[data-book-error] {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.26px;
  color: #C25B5B;
}

/* --- success state --- */

[data-book-done] {
  border: 1px solid #E6EAE4;
  border-radius: 20px;
  padding: 46px 34px;
  background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(21, 20, 20, 0.07);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
[data-done-mark] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 9999px;
  background: #B2EEDC;
  color: #151414;
  font-size: 20px;
  line-height: 1;
}
[data-book-done] h3 {
  margin: 0;
  font-family: Newsreader, Georgia, 'Times New Roman', serif;
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -0.6px;
}
[data-done-body], [data-done-alt] {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.31px;
  color: #5A5A5A;
  text-wrap: pretty;
}
[data-done-alt] a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1020px) {
  [data-book-inner] { grid-template-columns: 1fr; gap: 44px; }
  [data-book-intro] h2 { font-size: 36px; }
}
@media (max-width: 760px) {
  #book { padding: 84px 20px; }
  [data-book-intro] h2 { font-size: 30px; }
  [data-book-form] { padding: 22px; border-radius: 16px; }
  [data-field-row] { grid-template-columns: 1fr; gap: 18px; }
  [data-book-submit] { width: 100%; }
  [data-book-done] { padding: 32px 22px; }
}

/* --- #book: closed state --------------------------------------------- */

[data-book-teaser] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid #E6EAE4;
  border-radius: 20px;
  padding: 34px;
  background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(21, 20, 20, 0.07);
}
[data-teaser-kicker] {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #767676;
}
[data-teaser-body] {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: #5A5A5A;
  text-wrap: pretty;
}
[data-book-open] {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: #151414;
  color: #FFFFFF;
  border: 0;
  border-radius: 10px;
  padding: 17px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.45px;
  cursor: pointer;
  transition: background 0.2s linear;
}
[data-book-open]:hover { background: #272C2B; }

@media (max-width: 760px) {
  [data-book-teaser] { padding: 22px; border-radius: 16px; }
  [data-book-open] { width: 100%; justify-content: center; }
}

/* --- careers form --- */
[data-career-form] {
  display: flex; flex-direction: column; gap: 18px;
  border: 1px solid #E6EAE4; border-radius: 20px; padding: 34px;
  background: #FFFFFF; box-shadow: 0 24px 60px rgba(21, 20, 20, 0.07);
  margin-top: 34px; max-width: 620px;
}
[data-career-form] input[type="file"] {
  font-family: inherit; font-size: 14px; color: var(--body);
  border: 1px dashed #DCE0DA; border-radius: 10px; padding: 16px 14px;
  width: 100%; box-sizing: border-box; cursor: pointer; background: #FFFFFF;
}
[data-career-form] input[type="file"]::file-selector-button {
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.26px;
  color: #151414; background: #F5F7F3; border: 1px solid #DCE0DA;
  border-radius: 8px; padding: 8px 14px; margin-right: 14px; cursor: pointer;
}
[data-career-form] input[type="file"]:hover { border-color: #151414; }
[data-file-name] { font-size: 12.5px; font-weight: 500; letter-spacing: -0.25px; color: var(--mute); }
[data-career-submit] {
  margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  background: #151414; color: #FFFFFF; border: 0; border-radius: 10px; padding: 17px 24px;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.45px; cursor: pointer;
  transition: background 0.2s linear, opacity 0.2s linear;
}
[data-career-submit]:hover { background: #272C2B; }
[data-career-submit][disabled] { opacity: 0.55; cursor: default; }
[data-career-form] ::placeholder { font-family: inherit; opacity: 0.55; }
[data-career-error] { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: -0.26px; color: #C25B5B; }
[data-career-done] {
  border: 1px solid #E6EAE4; border-radius: 20px; padding: 46px 34px; background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(21, 20, 20, 0.07); margin-top: 34px; max-width: 620px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
@media (max-width: 760px) {
  [data-career-form], [data-career-done] { padding: 22px; border-radius: 16px; }
  [data-career-submit] { width: 100%; }
}

/* --- the evidence band (homepage, inline-styled like the canvas sections) --- */
@media (max-width: 1020px) {
  [data-research-h2] { font-size: 34px !important; }
}
@media (max-width: 760px) {
  #research { padding: 84px 20px !important; }
  [data-research-h2] { font-size: 27px !important; }
  [data-research-grid] { grid-template-columns: 1fr !important; margin-top: 36px !important; }
  [data-research-grid] > div { padding: 24px 20px !important; }
  [data-research-cta] { align-items: stretch !important; flex-direction: column !important; gap: 14px !important; }
  [data-research-cta] a { justify-content: center; }
}

/* --- language switcher --- */
[data-lang-switch] {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: #9A9A9A; white-space: nowrap;
}
[data-lang-switch] a { color: #767676; text-decoration: none; }
[data-lang-switch] a:hover { color: #151414; }
[data-lang-switch] [aria-current="true"] { color: #151414; }
[data-lang-switch] [aria-hidden="true"] { color: #DCE0DA; }
@media (max-width: 1020px) { [data-lang-switch] { margin-right: 4px; } }
@media (max-width: 420px) { [data-lang-switch] { display: none; } }

/* --- marquee containment ------------------------------------------------ */
/* Both logo marquees size their own clipping wrapper to the length of the
   track, so the wrapper is 2,000px wide in the trust band and 1,600px in the
   integration floor. The document inherits that as its scroll width and the
   whole page scrolls sideways — worst on a phone, where the track is five
   times the viewport. Clip to the wrapper so the track slides inside it. */
[data-trust] > div,
[data-int-floor] > div {
  max-width: 100%;
  overflow-x: hidden;
}

/* --- nav between the disclosure breakpoint and where it fits ------------- */
/* The nav is one flex row and the CTA does not shrink, so on a narrow laptop
   the row is wider than the viewport and the page scrolls sideways. English
   fits; French does not — "Demander une démo" and "Connexion" are wider than
   their English counterparts, which is why this only showed on /fr/. Tighten
   the padding and the gaps over that band rather than collapsing the whole nav
   into the menu earlier than the design intends. */
@media (min-width: 1021px) and (max-width: 1400px) {
  [data-nav] { padding-left: 30px !important; padding-right: 30px !important; gap: 20px !important; }
  [data-nav-links] { gap: 18px !important; }
  [data-nav-cta] { gap: 14px !important; }
}

/* --- touch ergonomics --------------------------------------------------- */
@media (max-width: 760px) {
  /* iOS Safari zooms the whole page when a focused control is smaller than
     16px, and does not zoom back out. On the savings-check form that throws
     the reader out of the layout halfway through answering. */
  input, select, textarea { font-size: 16px !important; }
  /* The calculator's field is already larger; keep its own size. */
  .calc input { font-size: 17px !important; }

  /* "Log in" and "Book a demo" are 16px-tall text with no padding around
     them — a small target for a thumb. Grow the hit area, not the type. */
  [data-nav-cta] a { padding-top: 13px !important; padding-bottom: 13px !important; }
  [data-nav-toggle] { min-width: 44px !important; min-height: 44px !important; }
}

/* Log in lives in the bar on desktop and in the menu on small screens, where
   the bar has no room for it beside the demo CTA. Only one copy ever shows. */
[data-nav-login-m] { display: none; }
@media (max-width: 1020px) {
  [data-nav-login-m] { display: block; }
  [data-nav-cta] a[href*="workspace"] { display: none !important; }
}

/* --- pinned panes: below the nav, inside the visible viewport ----------- */
/* The agents and metrics panes stick to top:0 at 100vh. Two consequences on a
   phone: the sticky nav covers their first ~69px, so the section eyebrow and
   the top of the counter are cut in half; and vh resolves against the LARGE
   viewport, so with the browser's address bar showing, the pane is taller than
   what you can see and the bottom is cut too. Start them below the nav and
   size them to the small viewport. --nav-h is published by app.js from the
   nav's measured height; the fallback covers the moment before it runs. */
#agents > div,
#proof > div {
  top: var(--nav-h, 68px) !important;
  height: calc(100vh - var(--nav-h, 68px)) !important;
}
@supports (height: 100svh) {
  #agents > div,
  #proof > div { height: calc(100svh - var(--nav-h, 68px)) !important; }
}

/* --- agents pane: make the content fit the pinned window ---------------- */
/* The pane is one screen minus the nav, and its content was taller than that
   on anything smaller than ~410px: the counter ended up half behind the nav
   and the policy rows ran off the bottom. Tighten the stack, and show fewer
   policy rows on a phone — the section already says "+11 more agents", so a
   trimmed list is the pattern the design established rather than a new idea. */
@media (max-width: 900px) {
  [data-agents-inner] { gap: 10px !important; }
  [data-agents-inner] > div:first-child { gap: 16px !important; }
  [data-ring-row] { gap: 14px !important; }
  [data-ring-agent] { font-size: 11.5px !important; padding: 6px 10px !important; }
  [data-policy] { gap: 8px !important; }
  [data-policy] ~ [data-policy] { margin-top: 0 !important; }
  /* the policy rows live in a flex column; tighten it and cap what shows */
  [data-policy]:nth-of-type(n+4) { display: none !important; }
}
@media (max-width: 400px) {
  #agents h2, [data-agents-head] h2 { font-size: 22px !important; }
  [data-policy]:nth-of-type(n+3) { display: none !important; }
}

/* --- metrics on a phone: numbers lead, labels support ------------------- */
/* Stacked, each gate became a full-width 68px block of pastel with its number
   underneath — four buttons where there should be four numbers, and the ones
   not yet revealed read as empty boxes. Shrink the label to a chip so the
   figure is the biggest thing in the row, and rule the rows apart so the list
   reads as a set. */
@media (max-width: 900px) {
  [data-gate-card] {
    align-self: flex-start !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 15px 7px 11px !important;
    border-radius: 999px !important;
    gap: 8px !important;
  }
  [data-gate-card] svg { width: 15px !important; height: 15px !important; }
  [data-proof-row] > div {
    padding-bottom: 16px !important;
    border-bottom: 1px solid #EDEFEA !important;
    gap: 8px !important;
  }
  [data-proof-row] > div:last-child { border-bottom: none !important; }
  [data-gate-side] > span:first-child { font-size: 38px !important; }
  /* The chip sits in a centring wrapper. Rows alternate side/card/side in the
     grid, so the wrapper cannot be addressed by position — match it by what it
     holds. Without :has() the chip stays centred, which is only cosmetic. */
  [data-proof-row] > div > div:has(> [data-gate-card]) {
    justify-content: flex-start !important;
  }
}

/* a phone held upright plays the 9:16 cut (app.js marks the frame) */
[data-video-wrap][data-portrait] { aspect-ratio: 9 / 16 !important; }