/* 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; }
main > section:not([data-m-bleed]),
main > div > section { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !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[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):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 40px edge shared with the other Home sections */
#bidask [data-m-edge] { padding-left: 40px !important; padding-right: 40px !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; }