/* 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;
  --m-w: 390px; /* live page width, set by mobile-nav.js */
  /* Heading clamps resolve against the browser window, not the page column — pin
     them to their phone floors so a desktop preview matches a real phone. */
  --type-display:    600 46px/1 var(--font-display);
  --type-h2:         400 28px/1.1 var(--font-sans);
  --type-h3-display: 500 22px/1.24 var(--font-sans);
  --type-h3:         600 22px/1.24 var(--font-sans);
}

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

/* Designed at 390, fluid across phones (360–480). Wider than 480 it centres. */
/* overflow-x must stay off body — body is not the scroll container */
body[data-mobile] {
  width: 100% !important;
  max-width: 480px;
  min-height: 844px;
  height: auto !important; /* a desktop 100% height cut the page ground off after one screen */
  margin: 0 auto !important;
  position: relative;
  background: var(--page);
}
html { overflow-x: clip; scrollbar-gutter: stable; } /* scroll lock must not shift the page */
body[data-mobile] header[style*="position: fixed"] {
  left: var(--m-left, 0px) !important;
  right: auto !important;
  width: var(--m-w) !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 > div[data-m-nopad] { padding-left: 0 !important; padding-right: 0 !important; }
/* Sections carry the page margin only when main does not. html[data-m-secpad="0"] is set by
   mobile-nav.js when main already pads by the gutter (on <html>, which the page
   runtime never re-renders), so the two never stack to 40px. */
main > section:not([data-m-bleed]):not([data-m-sbleed]),
main > div > section { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
html[data-m-secpad="0"] main > section:not([data-m-bleed]):not([data-m-sbleed]),
html[data-m-secpad="0"] main > div > section:not([data-m-bleed]):not([data-m-sbleed]),
body[data-m-secpad="0"] main > section:not([data-m-bleed]):not([data-m-sbleed]),
body[data-m-secpad="0"] main > div > section:not([data-m-bleed]):not([data-m-sbleed]) { padding-left: 0 !important; padding-right: 0 !important; }
main > section > div,
main > section > div > div:not([style*="max-content"]) { 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"]:is([style*="; top: 0"], [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; }
/* Opt-out for long heading copy, where balance sets short choppy lines */
[data-wrap="pretty"] { text-wrap: pretty !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[data-m-display], h1[style*="type-display"], h1[style*="clamp(46px"] {
  font-size: 40px !important;
}
/* Every mobile h1 sets at 1.1 — plus the About Us Playfair h2 that shares the h1 look */
h1, h2[style*="type-display"] { line-height: 1.1 !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):not([style*="max-content"]):not([style*="max-content"] *):not([aria-hidden="true"] *) { 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; }
/* A font-weight after a var() font shorthand is dropped by the browser, so boxed
   CTA labels lost their bold. The weight is restated here where it survives. */
a[style*="--r-cta"][style*="--type-body"], button[style*="--r-cta"][style*="--type-body"] { font-weight: 700 !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; }
/* Opt-out for blocks that bleed past the gutter with negative margins */
[data-bleed] { max-width: none !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) + var(--m-w) - 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;
}
/* Open: the close mark turns white on the dark drawer */
[data-m-burger][aria-expanded="true"] span { background: var(--text-invert); }
[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: var(--m-w); 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: 56px;
  margin: 0 calc(-1 * var(--m-gutter)); padding: 0 var(--m-gutter);
  font: var(--type-lead); font-weight: 600; letter-spacing: var(--track-subhead);
  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] a[data-m-logo] {
  position: absolute; top: calc((var(--m-nav-h) - 36px) / 2); left: var(--m-gutter);
  min-height: 0; margin: 0; padding: 0; border: 0; display: block;
}
[data-m-drawer] a[data-m-logo] img { display: block; height: 36px; width: auto; }
[data-m-drawer] [data-m-toggle] {
  display: flex; align-items: center; justify-content: space-between; width: auto; min-height: 56px;
  margin: 0 calc(-1 * var(--m-gutter)); padding: 0 var(--m-gutter);
  font: var(--type-lead); font-weight: 600; letter-spacing: var(--track-subhead); text-align: left;
  color: var(--text-invert); background: none; border: 0;
  border-bottom: 1px solid var(--border-soft-invert); cursor: pointer;
}
[data-m-drawer] [data-m-toggle] svg { color: var(--accent); transition: transform .2s ease; }
[data-m-drawer] [data-m-toggle][aria-expanded="true"] svg { transform: rotate(90deg); }
[data-m-drawer] [data-m-sub] a { padding-left: calc(var(--m-gutter) + 16px); font: var(--type-body); font-weight: 500; min-height: 48px; }
[data-m-drawer] [data-m-sub][hidden] { display: none; }
[data-m-drawer] [data-m-cta-bar] {
  position: sticky; bottom: -32px; margin: auto calc(-1 * var(--m-gutter)) -32px;
  padding: 16px var(--m-gutter) 24px;
  background: var(--ground); border-top: 1px solid var(--border-soft-invert);
}
[data-m-drawer] [data-m-cta] {
  margin: 0; padding: 0 20px; min-height: 52px; justify-content: center; border: 0;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--r-cta); font: var(--type-body); font-weight: 700;
}
[data-m-drawer] a:first-of-type:not([data-m-logo]),
[data-m-drawer] a[data-m-logo] + a { border-top: 1px solid var(--border-soft-invert); }
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; }


/* Fade-up reveal. Hidden only once the script has armed it, so content never
   stays invisible if JS fails; reduced motion is neutralised in tokens.css. */
html[data-m-reveal-on] [data-m-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
html[data-m-reveal-on] [data-m-reveal][data-in] { opacity: 1; transform: none; }

/* ------------------------------------------------------- hit targets (44px) */
main a[href^="mailto:"]:not(p a),
main a[href^="tel:"]:not(p a),
main a[href="https://scores.sebi.gov.in"],
main a[href="https://smartodr.in/login"] {
  display: inline-flex !important; align-items: center; align-self: flex-start; min-height: 44px;
}
main a[href*="blog-post"][style*="align-self: flex-end"] { min-height: 44px !important; padding-top: 0 !important; }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
.leaflet-control-attribution { display: flex !important; align-items: center; gap: 4px; min-height: 44px; }
.leaflet-control-attribution a { display: inline-flex; align-items: center; min-height: 44px; }
.leaflet-marker-icon { display: flex !important; align-items: center; justify-content: center; }
/* Escalation-matrix email cells: keep addresses on one line inside the scrolling table */
main td:has(> a[href^="mailto:"]) { min-width: 240px; }
main td > a[href^="mailto:"] { overflow-wrap: normal !important; white-space: nowrap; }
/* Contact quick cards: horizontal — portrait left, name + email + phone right, CTA full width below */
body[data-mobile] [data-qcard] {
  display: grid !important; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 0;
  align-items: center !important; padding: 32px 24px !important;
}
body[data-mobile] [data-qcard] > :nth-child(1) { grid-column: 2; grid-row: 1; text-align: left !important; align-self: end; }
body[data-mobile] [data-qcard] > :nth-child(2) { grid-column: 1; grid-row: 1 / span 3; width: 64px !important; height: 64px !important; align-self: center; }
body[data-mobile] [data-qcard] > :nth-child(3) { grid-column: 2; grid-row: 2; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 !important; width: 100%; }
body[data-mobile] [data-qcard] > :nth-child(3) > a { min-width: 0; text-align: left !important; }
body[data-mobile] [data-qcard] > :nth-child(3) button { width: 44px !important; height: 44px !important; }
body[data-mobile] [data-qcard] > :nth-child(5) { grid-column: 2; grid-row: 3; margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; text-align: left !important; align-self: start !important; }
body[data-mobile] [data-qcard] > :nth-child(4) { grid-column: 1 / -1; grid-row: 4; margin-top: 20px !important; }
/* Contact: the form/cards column rule becomes a horizontal hairline when stacked */
body[data-mobile] #reach div[aria-hidden="true"][style*="width: 1px"] { display: block !important; width: 100% !important; height: 1px !important; margin: 24px 0 !important; background: var(--border-soft) !important; }
body[data-mobile] [data-qcard] > :not(:nth-child(4)) { justify-self: start !important; text-align: left !important; margin-left: 0 !important; }
body[data-mobile] [data-qcard] > :nth-child(3) { justify-content: flex-start !important; width: auto !important; }
/* Contact cards: portrait in the top-right corner, text column on the left */
body[data-mobile] [data-qcard] { grid-template-columns: minmax(0, 1fr) 64px !important; align-items: start !important; }
body[data-mobile] [data-qcard] > :nth-child(1),
body[data-mobile] [data-qcard] > :nth-child(3),
body[data-mobile] [data-qcard] > :nth-child(5) { grid-column: 1 !important; }
body[data-mobile] [data-qcard] > :nth-child(1) { align-self: start !important; }
body[data-mobile] [data-qcard] > :nth-child(2) { grid-column: 2 !important; grid-row: 1 / span 3 !important; align-self: start !important; justify-self: end !important; }
body[data-mobile] [data-qcard] { grid-template-columns: minmax(0, 1fr) 44px !important; }
body[data-mobile] [data-qcard] > :nth-child(2) { width: 44px !important; height: 44px !important; }
/* Contact cards: tight text column — 44px link rows, no inherited 14px flex gap */
body[data-mobile] [data-qcard] { gap: 0 16px !important; }
body[data-mobile] [data-qcard] > :nth-child(1) { align-self: center !important; min-height: 44px; display: flex; align-items: center; margin-bottom: 4px; }
body[data-mobile] [data-qcard] > :nth-child(2) { align-self: center !important; }
body[data-mobile] [data-qcard] > :nth-child(3) > a,
body[data-mobile] [data-qcard] > :nth-child(5) { font: var(--type-body) !important; }
body[data-mobile] [data-qcard] > :nth-child(3) button { margin-left: 2px; }
body[data-mobile] [data-qcard] > :nth-child(4) { margin-top: 24px !important; }
body[data-mobile] [data-qcard] { padding-top: 20px !important; }
body[data-mobile] [data-qcard] > :nth-child(2) { grid-row: 1 !important; align-self: center !important; }
/* Contact cards: phone above email */
body[data-mobile] [data-qcard] > :nth-child(5) { grid-row: 2 !important; }
body[data-mobile] [data-qcard] > :nth-child(3) { grid-row: 3 !important; }
/* Home Market Makers: overlay copy on the 20px page margin */
#bidask [data-m-edge] { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
/* Market Makers: copy starts 120px below the section top, like every other Home section — not centred in the pane */
#bidask [data-m-edge] { justify-content: flex-start !important; padding-top: 120px !important; }
/* The three High- lines sit in flow, centred in the space left under the CTA */
#bidask [data-ba-sub] { position: static !important; margin: 40px 0 0 !important; padding: 0 !important; align-self: stretch !important; align-items: center !important; }
#bidask [data-ba-sub] > div { text-align: center !important; }
/* Price columns anchor to the foot of the pane and fade out towards the top, clear of the copy */
#bidask > div > div[aria-hidden="true"][data-m-keep] {
  top: auto !important; bottom: 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.85) 50%, #000 78%) !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.85) 50%, #000 78%) !important;
}
/* Blog Post top back link: 28px to the title whatever gap the article resolves to */
body[data-mobile] article > [data-m-back]:first-child + * { margin-top: calc(28px - var(--m-art-gap, 0px)) !important; }
/* What We Do hero: top-anchored, light ground edge to edge */
/* Glow peaks at 40% orange-500 over orange-700 — the brightest step where white body copy still clears 4.5:1 (4.64) */
body[data-mobile] #technology { background-color: var(--orange-700) !important; background-image: radial-gradient(ellipse 90% 55% at 50% 38%, color-mix(in srgb, var(--orange-500) 40%, var(--orange-700)) 0%, var(--orange-700) 100%) !important; padding-left: 0 !important; padding-right: 0 !important; }
body[data-mobile] #technology [data-rise-stack] { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
body[data-mobile] #technology [data-rise-stack] > div > div[aria-hidden="true"]:first-child { display: none !important; }

/* ------------------------------------------------ primary CTA width (phones)
   Every boxed Primary CTA spans the content column, as the Home hero does:
   one thumb-width target, one left edge, no ragged widths between pages.
   Scope: main + footer. Nav, drawer, chips, icon buttons and the Secondary
   back / next buttons (hug the label by rule) are untouched. */
main a[style*="background: var(--accent)"],
footer a[style*="background: var(--accent)"] {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center !important;
  align-self: stretch !important;
  box-sizing: border-box;
  /* One Primary size on phones: 15px/700, 52px tall */
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  min-height: 52px !important;
  padding: 14px 26px !important;
}

/* ------------------------------------------------------ iOS focus zoom
   Safari zooms the page when a field under 16px takes focus. The one place the
   type scale gets a 16px step: form controls on phones. */
input, select, textarea { font-size: 16px !important; }

/* ------------------------------------------------------ safe areas
   viewport-fit=cover draws under the notch in landscape and the home
   indicator. Keep chrome and the drawer CTA clear of both. */
#mainnav {
  padding-left: max(var(--m-gutter), env(safe-area-inset-left)) !important;
  padding-right: max(var(--m-gutter), env(safe-area-inset-right)) !important;
}
[data-m-drawer] { padding-left: max(var(--m-gutter), env(safe-area-inset-left)); padding-right: max(var(--m-gutter), env(safe-area-inset-right)); }
[data-m-drawer] [data-m-cta-bar] { padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); }
footer { padding-bottom: env(safe-area-inset-bottom); }

/* ------------------------------------------------ h3-display floor (phones)
   Both h3 floors are 22px, so on a phone h3-display differed from h3 by weight
   alone. A 26px floor restores the step. Tokens are re-declared here because
   the page runtime rewrites style attributes, so selectors on them are unreliable. */
:root { --type-h3-display: 500 clamp(26px, 2.4vw, 36px)/1.24 var(--font-sans); }

/* What We Offer ventures: the desktop 2-up grid cells keep a side inset and a
   divider rule. Stacked on a phone there is no visible card, so the copy and the
   CTA sit on the page gutter like every other section. */
#ventures article, #offer-new article { padding-left: 0 !important; padding-right: 0 !important; border-right: 0 !important; }

/* Footer CTA column: the Join iRage blurb is a fixed 286px wide, which shrink-wrapped
   its column and the Primary CTA with it. The column fills its track on phones. */
footer div:has(> a[style*="background: var(--accent)"]) { align-self: stretch !important; justify-self: stretch !important; width: 100% !important; }
footer div:has(> a[style*="background: var(--accent)"]) > p { width: auto !important; }

/* Footer on the page margin whatever the runtime does to inline padding */
footer > div { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
footer > div div[style*="padding"] { padding-left: 0 !important; padding-right: 0 !important; }

/* Sections that bleed to the screen edge (negative margins) carry the page margin
   themselves, so their content still starts 20px in. */
main section[data-m-bleed][style*="50vw"] { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }

/* Join iRage Hiring Process: the #process-2 wrapper bleeds to the screen edge with no
   padding, so the section inside carries the page margin. */
#process-2 > section { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }

/* A bleed inside a bleed is already at the screen edge. Its negative margins were
   measured against ancestor padding that later changes, and pushed it 20px past the
   page (Join iRage Open Positions and Hiring Process). */
html main section[data-m-sbleed] { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }

/* Pause motion switch — sits under the drawer links, styled as a drawer row */
[data-m-drawer] [data-m-motion] {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  margin: 0 calc(-1 * var(--m-gutter)); padding: 0 var(--m-gutter);
  font: var(--type-body); font-weight: 500; text-align: left;
  color: var(--text-invert); background: none; border: 0;
  border-bottom: 1px solid var(--border-soft-invert); cursor: pointer;
}
[data-m-drawer] [data-m-motion] svg { color: var(--accent); }
[data-m-drawer] [data-m-motion][aria-pressed="true"] svg { opacity: .5; }

/* Form errors (Contact): the invalid field takes the error edge */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--text-error) !important; }