/* iRage mobile overrides — 390 × 844
   Loaded only by the "mobile - *" pages, after tokens.css.
   The production pages are built almost entirely from inline styles, so these
   rules use !important by necessity. Nothing here invents a colour, a radius or
   a type size: every value resolves to a token or to a step already in the system. */

:root {
  --m-gutter: 20px;
  --m-nav-h: 56px;
  --m-section-y: 56px;
  --m-section-y-lg: 72px;
}

html { scroll-padding-top: calc(var(--m-nav-h) + 12px); background: var(--ground); }
img, video, svg, canvas, iframe { max-width: 100%; }

/* The 390 canvas. These pages are the phone build, so the document IS 390 wide
   and centres itself on anything larger — the layout never has to guess. */
/* overflow-x must stay off body — body is not the scroll container */
body[data-mobile] {
  width: 390px !important;
  min-height: 844px;
  margin: 0 auto !important;
  position: relative;
  background: var(--page);
}
html { overflow-x: clip; }
body[data-mobile] header[style*="position: fixed"] {
  left: var(--m-left, 0px) !important;
  right: auto !important;
  width: 390px !important;
  transform: none !important;
}

/* ---------------------------------------------------------------- containers */
[style*="max-width: 1320px"],
[style*="max-width: 1204px"],
[style*="max-width: 1000px"],
[style*="max-width: 900px"],
[style*="max-width: 780px"],
[style*="max-width: 760px"],
[style*="max-width: 720px"],
[style*="max-width: 643px"],
[style*="max-width: 640px"] {
  max-width: 100% !important;
}
[style*="padding: 0 40px"],
[style*="padding: 0 clamp"] { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
main > section,
main > div > section { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
main > section > div,
main > section > div > div { max-width: 100% !important; }

/* Full-bleed escape hatches assume a wide viewport — neutralise them */
[style*="calc(50vw - 50%)"] { padding-left: 0 !important; padding-right: 0 !important; }
[style*="width: 100vw"] { width: 100% !important; }
[style*="margin-left: calc(50% - 50vw)"] { margin-left: 0 !important; }
[style*="margin-right: calc(50% - 50vw)"] { margin-right: 0 !important; }

/* ------------------------------------------------------------ section rhythm */
section[style*="clamp(80px, 11vh, 130px)"],
section[style*="clamp(96px, 13vh, 150px)"],
section[style*="clamp(72px, 9vh, 112px)"],
section[style*="clamp(72px, 10vh, 118px)"] {
  padding-top: var(--m-section-y) !important;
  padding-bottom: var(--m-section-y) !important;
}
[style*="padding: 168px 0"],
[style*="padding: 150px 0"] { padding-top: 96px !important; padding-bottom: var(--m-section-y) !important; }
/* 100vh is fine for a sticky viewport pane and wrong for a content box */
[style*="height: 100vh"]:not([style*="position: sticky"]) { height: auto !important; }
[style*="min-height: 100vh"]:not([style*="position: sticky"]) { min-height: 844px !important; }
[style*="position: sticky"][style*="height: 100vh"] { height: 100dvh !important; }
[style*="position: sticky"][style*="top: 0"] { top: var(--m-nav-h) !important; }
/* Heroes clear the fixed bar */
section[id="hero"] > div[style*="min-height: 100vh"],
section[data-nav-theme] > div[style*="min-height: 100vh"] {
  padding-top: calc(var(--m-nav-h) + 28px) !important;
  padding-bottom: 56px !important;
  min-height: 844px !important;
}
/* Scroll-linked word reveals need a tall viewport and a long scroll to read as
   an effect. At 390 they read as broken text, so the copy is shown outright and
   the scroll rail that drove them collapses. */
[data-w] { opacity: 1 !important; }
[style*="height: 2600px"], [style*="height: 2200px"] { height: auto !important; }
[style*="height: 2600px"] > [style*="position: sticky"],
[style*="height: 2200px"] > [style*="position: sticky"] {
  position: static !important;
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
/* Scroll-through panes: the rail is the scroll distance, not the content. A
   desktop rail spends 1800px on one message; at 390 that is nine screens. */
[style*="height: 1800px"] { height: 1100px !important; }
[style*="height: 3600px"] { height: 2000px !important; }
[style*="padding: 150px 0"] { padding-top: 110px !important; }

/* ------------------------------------------------------------------- grids
   Column collapse is done in mobile-nav.js: the runtime re-serialises the
   inline declarations, so matching them from CSS misses. What stays here is
   only what does not depend on the declaration text. */
[style*="grid-column: span"] { grid-column: auto !important; }
[style*="grid-row: span"] { grid-row: auto !important; }

[style*="gap: clamp"] { row-gap: 20px !important; }

/* ---------------------------------------------------------------- typography */
h1, h2, h3 { text-wrap: balance !important; white-space: normal !important; }
/* The display h1 floor is 46px, drawn for a desktop hero. At 390 that runs to
   five lines before the lead paragraph appears, so the phone build takes one
   step down. The section-scale h1 keeps its floor — it is already 28px. */
h1[style*="type-display"], h1[style*="clamp(46px"] {
  font-size: 40px !important;
  line-height: 1.02 !important;
}
/* Desktop break points are wrong at 390 — neutralise them without gluing the
   words either side together. */
h1 br, h2 br, h3 br { display: inline-block !important; width: 0.3em; height: 0; content: ""; }
[style*="max-width: 62ch"], [style*="max-width: 68ch"], [style*="max-width: 70ch"],
[style*="max-width: 76ch"], [style*="max-width: 60ch"], [style*="max-width: 56ch"],
[style*="max-width: 54ch"] { max-width: 100% !important; }
p, li, dd { text-wrap: pretty; }
/* A flex column set to align-items: flex-start shrink-wraps its children, so a
   heading inside one sets to its own text width instead of the column width. */
[style*="flex-direction: column"][style*="align-items: flex-start"] > h1,
[style*="flex-direction: column"][style*="align-items: flex-start"] > h2,
[style*="flex-direction: column"][style*="align-items: flex-start"] > h3,
[style*="flex-direction: column"][style*="align-items: flex-start"] > p,
[style*="flex-direction: column"][style*="align-items: flex-start"] > div { width: 100%; }
[style*="white-space: nowrap"]:not(nav *):not([data-keep-nowrap]):not(a):not(button) { white-space: normal !important; }
/* A CTA label is one line — the box grows, the words do not break */
a[style*="min-width: 176px"], a[style*="--r-cta"], button[style*="--r-cta"] { white-space: nowrap !important; }
/* Justified copy opens rivers at a 350px measure */
p, li, dd, [style*="text-align: justify"] { text-align: left !important; }
/* Opt-out for deliberately centred copy */
[data-align="center"] { text-align: center !important; }
/* Dropcap is a ratio to its paragraph, not a fixed size */
[data-dropcap]::first-letter { font-size: 3.4em !important; }

/* ------------------------------------------------------------------- nav bar */
#mainnav {
  padding: 0 var(--m-gutter) !important;
  height: var(--m-nav-h) !important;
  gap: 12px !important;
}
#mainnav > div:not([data-m-burger]) { display: none !important; }
#mainnav [aria-haspopup] { display: none !important; }
#mainnav > a:first-of-type { margin-right: auto; }

/* The burger lives outside the nav: the DC runtime re-renders the nav on scroll
   theme changes and would discard anything injected into it. */
[data-m-burger] {
  position: fixed;
  top: 6px;
  left: calc(var(--m-left, 0px) + 390px - 64px);
  z-index: 130;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 0;
  border-radius: var(--r-cta);
  cursor: pointer;
}
[data-m-burger] span {
  display: block; width: 20px; height: 2px;
  background: var(--nav-fg);
  transition: transform .22s ease, opacity .18s ease;
}
[data-m-burger][aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-m-burger][aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-m-burger][aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------- drawer */
[data-m-drawer] {
  position: fixed; top: 0; bottom: 0;
  left: var(--m-left, 0px); width: 390px; transform: translateY(-8px);
  z-index: 120;
  display: flex; flex-direction: column;
  background: var(--ground);
  padding: calc(var(--m-nav-h) + 20px) var(--m-gutter) 32px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
[data-m-drawer][data-open] { opacity: 1; visibility: visible; transform: translateY(0); }
[data-m-drawer] a {
  display: flex; align-items: center; min-height: 48px;
  font: var(--type-h3); letter-spacing: var(--track-heading);
  color: var(--text-invert);
  border-bottom: 1px solid var(--border-soft-invert);
  text-decoration: none;
}
[data-m-drawer] a[aria-current="page"] { color: var(--accent); }
[data-m-drawer] [data-m-group] {
  font: var(--type-mono); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--orange-300);
  margin-top: 26px; padding-bottom: 8px;
}
[data-m-drawer] [data-m-group] + a { border-top: 1px solid var(--border-soft-invert); }
[data-m-drawer] [data-m-cta] {
  margin-top: 28px; justify-content: center; border: 0;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--r-cta); font: var(--type-body); font-weight: 700;
}
body[data-m-locked] { overflow: hidden; }

/* ------------------------------------------------------------------- footer */
footer [style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
footer [style*="grid-template-columns"] [style*="grid-column"] { grid-column: 1 / -1 !important; }

/* -------------------------------------------------------------------- media */
[style*="aspect-ratio: 21"], [style*="aspect-ratio: 2.4"] { aspect-ratio: 16 / 10 !important; }
table { width: 100% !important; }
[data-m-scroll] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------- decorative artwork trim
   Handled in mobile-nav.js — only figures positioned at percentages of a
   desktop viewport are removed, not everything that happens to use vw. */
[data-m-hide] { display: none !important; }

/* ------------------------------------------------------------- hit targets */
a[aria-label], button { min-height: 44px; }
input, select, textarea, summary { min-height: 44px; }
textarea { min-height: 120px; }
button[style*="width: 38px"], a[style*="width: 38px"] {
  width: 44px !important; height: 44px !important;
}

/* ------------------------------------------------------------------- motion
   Pointer-driven effects have no input on a touch screen; large backdrop
   blurs are the main scroll cost on mobile. Reveal, counter and accordion
   animation is kept — it survives prefers-reduced-motion already. */
[data-tilt] { transform: none !important; }
[style*="backdrop-filter"]:not(#mainnav):not([data-m-drawer]) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.star-layer, .star-layer::after { display: none !important; }