/* ==========================================================================
   ARACHARAT VENTURES — unified design system
   --------------------------------------------------------------------------
   One neutral foundation across every page; each product shifts only the
   accent hue, so aracharatventures.com, /accesspulse/, /fundpulse/ and
   /plantpulse/ read as one product family rather than four separate sites.
   The system mirrors the AccessPulse and FundPulse applications: Space
   Grotesk display, DM Sans body, JetBrains Mono for data, white cards on a
   high-luminance canvas.

   Colour is specified in OKLCH per the design document. Every token declares a
   hex fallback immediately before its oklch() value: a browser that does not
   understand oklch discards the second declaration and keeps the hex, so the
   site degrades instead of collapsing. Contrast ratios for every documented
   pairing are asserted by build/contrast.js - run it after changing a token.

   The two product accents are chroma-corrected against the sRGB gamut. The
   design document asks for oklch(0.55 0.185 252) and oklch(0.50 0.14 162),
   but no display can render those chromas at those lightnesses, so a browser
   clips them to a different hue. 0.165 and 0.110 are the maximums, and they
   are what actually ship.
   ========================================================================== */

:root {
  /* ---- Canvas & surface ---- */
  --background: #fafcfe;
  --background: oklch(0.99 0.003 250);
  --surface: #f6f9fd;
  --surface: oklch(0.982 0.006 250);
  --surface-2: #eaf1f8;
  --surface-2: oklch(0.955 0.012 248);
  --card: #ffffff;
  --card: oklch(1 0 0);
  --card-foreground: #192230;
  --card-foreground: oklch(0.25 0.03 260);

  /* ---- Text & inks ---- */
  --foreground: #171f30;
  --foreground: oklch(0.24 0.035 265);
  --muted: #e6ecf2;
  --muted: oklch(0.94 0.01 248);
  --muted-foreground: #5b6474;
  --muted-foreground: oklch(0.50 0.028 262);

  /* ---- Structural lines & controls ---- */
  --border: #d7dde4;
  --border: oklch(0.895 0.012 255 / 85%);
  --border-strong: #c6cfd9;
  --border-strong: oklch(0.86 0.014 255);
  --input: #909297;
  --input: oklch(0.6599 0.0077 268.5);
  --ring: rgba(0, 114, 205, 0.32);
  --ring: oklch(0.55 0.165 252 / 32%);

  /* ---- Geometry ---- */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --touch-target-min: 44px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px 0 oklch(0.20 0.03 260 / 4%);
  --shadow-card: 0 1px 3px rgba(23, 31, 48, 0.04), 0 12px 32px -16px rgba(23, 31, 48, 0.10);
  --shadow-card-hover: 0 2px 6px rgba(23, 31, 48, 0.05), 0 18px 40px -18px rgba(23, 31, 48, 0.16);
  --shadow-hover: 0 4px 6px -1px oklch(0.20 0.03 260 / 8%), 0 12px 24px -4px oklch(0.20 0.03 260 / 8%);
  --shadow-dropdown: 0 10px 30px -4px oklch(0.20 0.03 260 / 12%);
  --shadow-modal: 0 20px 40px -8px oklch(0.20 0.03 260 / 20%);
  --shadow-focus: 0 0 0 3px oklch(0.55 0.165 252 / 30%);
  --shadow-glow: 0 18px 50px -20px rgba(0, 114, 205, 0.28);
  --shadow-glow: 0 18px 50px -20px oklch(0.55 0.165 252 / 28%);

  /* ---- Type ---- */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Noto Sans Devanagari", sans-serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans Devanagari", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
               "Noto Sans Devanagari", monospace;

  /* ---- Brand accent, overridden per page below ---- */
  --accent: #273347;
  --accent: oklch(0.32 0.04 260);
  --accent-solid: #273347;
  --accent-solid: oklch(0.32 0.04 260);
  --on-accent: #ffffff;
  --on-accent: oklch(1 0 0);
  --accent-hue: 260;

  /* Live / warning status, used by the PlantPulse telemetry chips */
  --live: #0f7a4d;
  --live: oklch(0.50 0.12 162);
  --warn: #a8410a;
  --warn: oklch(0.52 0.16 45);

  /* ---- Brand hues (v3.0.0) ---- */
  --brand-accesspulse: #0072cd;
  --brand-accesspulse: oklch(0.5494 0.1645 252);
  --brand-accesspulse-hover: #005a9e;
  --brand-accesspulse-hover: oklch(0.4611 0.1315 250.3);
  --brand-accesspulse-soft: #eaf4fc;
  --brand-accesspulse-soft: oklch(0.962 0.0151 241.8);
  --brand-fundpulse: #4f46e5;
  --brand-fundpulse: oklch(0.5106 0.2301 277);
  --brand-fundpulse-hover: #4338ca;
  --brand-fundpulse-hover: oklch(0.4568 0.2146 277);
  --brand-fundpulse-soft: #eef2ff;
  --brand-fundpulse-soft: oklch(0.9619 0.0179 272.3);
  --brand-plantpulse: #059669;
  --brand-plantpulse: oklch(0.596 0.1274 163.2);
  --brand-plantpulse-hover: #047857;
  --brand-plantpulse-hover: oklch(0.5081 0.1049 165.6);
  --brand-plantpulse-soft: #ecfdf5;
  --brand-plantpulse-soft: oklch(0.9793 0.0207 166.1);
  --brand-corporate: #1e1b4b;
  --brand-corporate: oklch(0.2573 0.0861 281.3);
  --brand-corporate-accent: #4338ca;
  --brand-corporate-accent: oklch(0.4568 0.2146 277);

  /* ---- Status ---- */
  --fail: #b42318;
  --fail: oklch(0.5003 0.1821 29.5);
  --fail-strong: #912018;
  --fail-strong: oklch(0.4322 0.15 29);
  --fail-bg: #fef3f2;
  --fail-bg: oklch(0.9725 0.0119 23.7);
  --fail-border: #fda29b;
  --fail-border: oklch(0.8014 0.1094 24.6);
  --pass: #067647;
  --pass: oklch(0.4987 0.1168 157.1);
  --pass-bg: #ecfdf3;
  --pass-bg: oklch(0.9788 0.0221 160.2);
  --pass-border: #a6f4c5;
  --pass-border: oklch(0.9039 0.1006 157.2);
  --review: #b54708;
  --review: oklch(0.5394 0.1562 43);
  --review-bg: #fffaeb;
  --review-bg: oklch(0.9849 0.0204 91.6);
  --review-border: #fec84b;
  --review-border: oklch(0.8594 0.1499 84.7);
  --na: #475467;
  --na: oklch(0.4422 0.0355 257.8);
  --na-bg: #f2f4f7;
  --na-bg: oklch(0.9665 0.0045 258.3);
  --disabled: #98a2b3;
  --disabled: oklch(0.7098 0.0273 261.1);

  /* ---- Evidence rail ---- */
  --code: #101828;
  --code: oklch(0.2099 0.0341 263.4);
  --code-foreground: #9fe8c8;
  --code-foreground: oklch(0.8741 0.0855 165.3);
  --primary-soft: #eaf4fc;
  --primary-soft: oklch(0.962 0.0151 241.8);
  --sidebar: #f8fafc;
  --sidebar: oklch(0.9842 0.0034 247.9);
  --sidebar-foreground: #020617;
  --sidebar-foreground: oklch(0.1288 0.0406 264.7);
  --sidebar-primary: #0f172a;
  --sidebar-primary: oklch(0.2077 0.0398 265.8);
  --sidebar-primary-foreground: #f8fafc;
  --sidebar-primary-foreground: oklch(0.9842 0.0034 247.9);
  --sidebar-accent: #f1f5f9;
  --sidebar-accent: oklch(0.9683 0.0069 247.9);
  --sidebar-accent-foreground: #0f172a;
  --sidebar-accent-foreground: oklch(0.2077 0.0398 265.8);
  --sidebar-border: #e2e8f0;
  --sidebar-border: oklch(0.9288 0.0126 255.5);
  --sidebar-ring: #64748b;
  --sidebar-ring: oklch(0.5544 0.0407 257.4);

  /* ---- Layout ---- */
  --gutter: 1.5rem;
  --maxw: 76rem;
  --measure: 68ch;

  /* ---- Aliases (permanent API) ---- */
  --warning: var(--review);
  --info: var(--na);
  --pass-soft: var(--pass-bg);
  --fail-soft: var(--fail-bg);
  --warning-soft: var(--review-bg);
  --info-soft: var(--na-bg);
  --font-body: var(--font-sans);
}

@media (min-width: 640px) {
  :root { --gutter: 2rem; }
}

/* One line per page. The neutral foundation above is shared; only the accent
   moves, so a visitor moving between properties feels one building. */
.page[data-page="home"]         { --accent-hue: 260; --accent: #273347; --accent: oklch(0.32 0.04 260); --accent-solid: #273347; --accent-solid: oklch(0.32 0.04 260); }
.page[data-page="plantpulse"]   { --accent-hue: 162; --accent: #00764f; --accent: oklch(0.50 0.11 162); --accent-solid: #00764f; --accent-solid: oklch(0.50 0.11 162); }
.page[data-page="fundpulse"]    { --accent-hue: 220; --accent: #17687d; --accent: oklch(0.48 0.08 220); --accent-solid: #17687d; --accent-solid: oklch(0.48 0.08 220); }
.page[data-page="accesspulse"],
.page[data-page="feedback"]     { --accent-hue: 252; --accent: #0072cd; --accent: oklch(0.55 0.165 252); --accent-solid: #0072cd; --accent-solid: oklch(0.55 0.165 252); }
.page[data-page="contact"]      { --accent-hue: 260; --accent: #273347; --accent: oklch(0.32 0.04 260); --accent-solid: #273347; --accent-solid: oklch(0.32 0.04 260); }
.page[data-page="privacy"],
.page[data-page="terms"],
.page[data-page="notfound"]     { --accent-hue: 260; --accent: #273347; --accent: oklch(0.32 0.04 260); --accent-solid: #273347; --accent-solid: oklch(0.32 0.04 260); }

/* ==========================================================================
   BASE
   ========================================================================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

.page {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* keeps the sticky masthead from covering an anchored heading */
  scroll-padding-top: 6rem;
}

.page p { margin: 0; max-width: var(--measure); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
  color: var(--foreground);
}

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-solid); }

/* Devanagari needs more leading and no negative tracking, or the conjuncts
   and matras collide. Space Grotesk has no Devanagari coverage, so the stack
   falls through to Noto Sans Devanagari. */
.page:lang(hi) { line-height: 1.85; }
.page:lang(hi) h1, .page:lang(hi) h2,
.page:lang(hi) h3, .page:lang(hi) h4 { line-height: 1.4; letter-spacing: 0; }
.page:lang(hi) .eyebrow, .page:lang(hi) .pill, .page:lang(hi) .readout__label,
.page:lang(hi) .field label, .page:lang(hi) .chip, .page:lang(hi) .band__rail span,
.page:lang(hi) .card__k, .page:lang(hi) .metric__k, .page:lang(hi) .foot__cols h2,
.page:lang(hi) .btn, .page:lang(hi) .fit__k, .page:lang(hi) .tanks th {
  text-transform: none;
  letter-spacing: 0.01em;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -5rem;
  z-index: 100;
  background: var(--accent-solid);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip:focus { top: 0.75rem; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin: 0;
}

.lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--card-foreground);
  max-width: 62ch;
  text-wrap: pretty;
}
.page:lang(hi) .lede { line-height: 1.8; }

.fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.srcnote {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.55;
  max-width: 62ch;
}

/* Status pill — the eyebrow treatment shared by every hero on the site. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-foreground);
  border-radius: var(--radius-full);
  padding: 0.375rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 100%;
}
/* The dot stays aligned to the first line when the label wraps, rather than
   floating in the vertical centre of a two-line pill. */
.pill__dot {
  align-self: flex-start;
  margin-block-start: 0.3rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--live);
  flex: none;
  animation: pulse 2.4s ease-out infinite;
}
.pill__dot--static { animation: none; }

/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 252, 254, 0.82);
  background: oklch(0.99 0.003 250 / 82%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.masthead__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4rem;
}

.mark {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  margin-inline-end: auto;
  color: var(--foreground);
  border-radius: var(--radius);
  min-width: 0;
}
.mark__glyph { inline-size: 28px; block-size: 28px; flex: none; }
.mark__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mark__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--foreground);
  white-space: nowrap;
}
.mark__sub {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* Pill navigation, per the design document. */
.navlinks { display: flex; align-items: center; gap: 0.125rem; }
.navlinks a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.navlinks a:hover { background: var(--surface-2); color: var(--foreground); }
.navlinks a[aria-current="page"] {
  background: var(--surface-2);
  color: var(--foreground);
  font-weight: 600;
}

/* App gateway — direct links into the live products on their own hosts. */
.gateway {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-full);
  padding: 0.4375rem 0.8125rem;
  white-space: nowrap;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.gateway:hover { border-color: var(--accent); color: var(--accent); }
.gateway svg { inline-size: 12px; block-size: 12px; flex: none; }

/* One bordered pill around the globe and the select: the wrapper carries the
   boundary, the select drops its own chrome, and the two read as a single
   control. The select keeps a 36px box so its arrow stays tappable inside the
   44px pill. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.625rem;
  min-height: 44px;
  background: var(--card);
}
.lang svg { inline-size: 15px; block-size: 15px; color: var(--muted-foreground); flex: none; }
.lang select {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
  background: transparent;
  border: none;
  padding: 0;
  min-height: 2.25rem;
  cursor: pointer;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.75rem 1.375rem;
  min-height: 2.875rem;
  border: 1px solid var(--accent-solid);
  border-radius: var(--radius-full);
  background: var(--accent-solid);
  color: var(--on-accent);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--foreground);
  box-shadow: var(--shadow-card);
}

.btn--lg { padding: 0.9375rem 1.75rem; font-size: 1rem; min-height: 3.25rem; }

.menubtn { display: none; }

@media (max-width: 1120px) {
  .navlinks { display: none; }
  .menubtn { display: inline-flex; }
  .masthead__in.is-open + .navpanel { display: block; }
  .navpanel {
    display: none;
    border-top: 1px solid var(--border);
    background: var(--background);
  }
  .navpanel ul {
    list-style: none;
    margin: 0;
    padding: 0.75rem var(--gutter) 1.25rem;
    max-width: var(--maxw);
    margin-inline: auto;
    display: grid;
    gap: 0.25rem;
  }
  .navpanel a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.875rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--foreground);
    text-decoration: none;
    border-radius: var(--radius);
  }
  .navpanel a:hover { background: var(--surface-2); }
  .navpanel a[aria-current="page"] { color: var(--accent); }
}
@media (min-width: 1121px) { .navpanel { display: none !important; } }

@media (min-width: 900px) { .gateway { display: inline-flex; } }

/* The language control inside the mobile panel. Both selects carry data-lang
   and site.js keeps them in step, so this is the same control in a place that
   fits, not a second independent switch. */
/* The mobile-panel instance of the same control: pill wrapper, chromeless
   select. Its markup carries no globe glyph — the pill still reads as one
   control. */
.navpanel__lang {
  display: none;
  align-items: center;
  gap: 0.375rem;
  margin-inline: var(--gutter);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.625rem;
  min-height: 44px;
  background: var(--card);
}
.navpanel__lang select {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
  background: transparent;
  border: none;
  padding: 0;
  min-height: 2.25rem;
  cursor: pointer;
}

@media (max-width: 640px) {
  /* At this width the mark, the language select, the menu button and the
     Contact button together exceed the viewport. A flex item will not shrink
     below its min-content width, so the masthead would push the whole document
     wider than the screen and every page would scroll sideways. The Contact
     link and the language switch both appear in the open panel instead. */
  .masthead__in > .lang,
  .masthead__in > .btn:not(.menubtn) { display: none; }
  .navpanel__lang { display: flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.phead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}

/* The radial glow the design document calls for. The flat rgba() line is the
   fallback for browsers without oklch(); both are the same shape, so losing
   one costs a tint, not the composition. */
.phead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130% 90% at 50% -15%, rgba(0, 114, 205, 0.16) 0%, transparent 70%);
  background: radial-gradient(130% 90% at 50% -15%,
    oklch(0.92 0.04 var(--accent-hue) / 55%) 0%, transparent 70%);
}

.phead__in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 54rem;
}

.phead h1 {
  font-size: clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 22ch;
}
.page:lang(hi) .phead h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  max-width: 26ch;
}

.phead__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Home runs the 7/5 hero: seven tracks of title and purpose, five carrying
   the action, which is where the shared wireframe puts "primary action"
   beside the title. Below 1024px it stays the single stacked column the rest
   of the page uses, primary action first. */
.phead__in--split { max-width: var(--maxw); }
@media (min-width: 1024px) {
  .phead__in--split {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 2rem 3rem;
    align-items: end;
  }
  .phead__in--split .phead__cta { align-self: end; }
}

/* The closing action row, twelve tracks wide on the home page. It carries the
   two page actions and nothing else: no invented heading, so the last thing a
   reader reaches is a pair of named destinations. */
.band__final {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block: 0 0.5rem;
}
.band__final .phead__cta { flex: 1 1 auto; }

/* ==========================================================================
   BAND — the page spine
   ========================================================================== */

.band { padding-block: clamp(3rem, 6vw, 4.5rem); }
.band--last { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }

.band__grid {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 2.5rem;
  align-items: start;
}

.band__rail {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.band__rail span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.band__body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.band__h {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 26ch;
}

@media (max-width: 900px) {
  .band__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .band__rail { position: static; }
}

/* ==========================================================================
   CARDS
   ========================================================================== */

/* Both card rows (home and 404) carry exactly three cards. Three divides by
   one and by three, never by two, so the old auto-fit track put the third card
   alone on a second row at tablet width. The column count follows the item
   count: a single column below 640px, two to 1023px with the last card
   spanning both, and three above it. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards > :last-child { grid-column: auto; }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem 1.625rem 1.875rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* A hairline of the page accent along the top edge, so each product card is
   identifiable by colour without relying on the glyph alone. */
.card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--card-accent, var(--accent));
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-strong);
  color: inherit;
}
.card__k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.card h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.card p { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.6; }
.card__go {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--card-accent, var(--accent));
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.card:hover .card__go { text-decoration: underline; }

/* Per-product accent on the home page grid. */
.card--ap { --card-accent: #0072cd; --card-accent: oklch(0.55 0.165 252); }
.card--fp { --card-accent: #17687d; --card-accent: oklch(0.48 0.08 220); }
.card--pp { --card-accent: #00764f; --card-accent: oklch(0.50 0.11 162); }

/* ==========================================================================
   METRICS — live counters
   ========================================================================== */

.metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.375rem 1.25rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.metric__v {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.metric__k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  line-height: 1.45;
}

/* Provenance line under the metric row. These figures are read from the live
   platforms by build/metrics.js, so the reader is told where they came from and
   when — which is the entire argument of the firm, applied to its own claims. */
.metrics__asof {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  margin: 0.875rem 0 0;
  max-width: var(--measure);
}

/* The older .specs list keeps its role as a spec table; .metric is the
   display-scale variant. Same markup shape, different emphasis. */
.specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.spec {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding: 1.25rem 1.125rem 1.375rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.spec b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.spec span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  line-height: 1.5;
}
.page:lang(hi) .spec span { line-height: 1.75; }
.spec b small { font-size: 1rem; font-weight: 500; }

/* Both metric lists carry four items: four divides into 2x2 and 4x1, never
   into 3, so the old auto-fit track left one card alone on the last row. The
   columns follow the item count — 1 below 640px, 2 to 1023px, 4 above. In the
   FundPulse hero panel the row stays at two (the panel is too narrow for four
   figures at display scale, and .splithero .metrics already says so). */
@media (min-width: 640px) {
  .metrics, .specs { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .metrics, .specs { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   CAPABILITY TILES
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.375rem 1.625rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.tile__icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.tile__icon svg { inline-size: 18px; block-size: 18px; }
.tile h3 { font-size: 1.0625rem; font-weight: 600; }
.tile p { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.6; }

/* ==========================================================================
   SCORE RING — AccessPulse
   ========================================================================== */

.ring {
  display: grid;
  place-items: center;
  position: relative;
  inline-size: 9.5rem;
  block-size: 9.5rem;
  flex: none;
}
.ring svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.ring__fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.ring__mid {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.125rem;
}
.ring__v {
  font-family: var(--font-display);
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ring__k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.scorecard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
}
.scorecard__body { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 0.75rem; }
.scorecard__body h3 { font-size: 1.25rem; }
.scorecard__body p { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.6; }

.ringpair { display: flex; flex-wrap: wrap; gap: 2rem; }

/* ==========================================================================
   URL INPUT — AccessPulse scan bar
   ========================================================================== */

.scanbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
  inline-size: 100%;
  max-width: 40rem;
  padding: 0.625rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
}
.scanbar__field { position: relative; flex: 1 1 14rem; display: flex; }
.scanbar__field svg {
  position: absolute;
  inset-inline-start: 0.875rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 16px;
  block-size: 16px;
  color: var(--muted-foreground);
  pointer-events: none;
}
.scanbar input {
  inline-size: 100%;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  padding: 0.8125rem 0.9375rem 0.8125rem 2.625rem;
  min-height: 3rem;
}
.scanbar input::placeholder { color: var(--muted-foreground); }
.scanbar .btn { flex: none; }

/* ==========================================================================
   SPLIT HERO — FundPulse
   ========================================================================== */

.splithero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.splithero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 15% -10%, rgba(23, 104, 125, 0.14) 0%, transparent 65%);
  background: radial-gradient(120% 90% at 15% -10%,
    oklch(0.92 0.04 var(--accent-hue) / 55%) 0%, transparent 65%);
}
.splithero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.splithero h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 20ch;
}
.splithero__panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* The 7/5 hero split the brief asks for: seven tracks of copy, five of panel.
   It starts at 1024px, because 640-1023px is the eight-column tablet band
   where the brief stacks the hero. */
@media (min-width: 1024px) {
  .splithero { grid-template-columns: 7fr 5fr; gap: 3.5rem; }
  .splithero .metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   FIT — "this is for / this is not for"
   ========================================================================== */

.fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}
.fit__col {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.625rem 1.5rem 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.fit__k {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-full);
}
.fit__k--yes { background: var(--accent); color: var(--on-accent); }
.fit__k--no { border: 1px solid var(--border-strong); color: var(--muted-foreground); }
.fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.fit li {
  font-size: 0.9375rem;
  color: var(--card-foreground);
  line-height: 1.55;
  padding-inline-start: 1.125rem;
  position: relative;
}
.fit li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.7em;
  inline-size: 0.5rem;
  block-size: 1px;
  background: var(--muted-foreground);
}
.fit__col--no li { color: var(--muted-foreground); }

/* ==========================================================================
   GENERIC CONTENT BLOCKS
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.75rem 2rem;
}
/* auto-fit cannot divide every item count evenly: 4 items deal 3+1 once three
   16rem tracks fit, 9 items deal 2+2+2+2+1 at two tracks. Pin the counts that
   occur to even rows: 4 items always 2+2; 9 items single-column until three
   16rem tracks fit (viewport 1064px = 768px body + rail + gutters), then 3+3+3. */
@media (min-width: 640px) {
  .split:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .split:has(> :nth-child(9):last-child) { grid-template-columns: 1fr; }
}
@media (min-width: 1064px) {
  .split:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* Legal section navigation. The brief's proportion is three tracks of anchor
   rail to eight of prose, so the rail becomes a sticky column of its own from
   1024px, turns into a horizontally scrolling row across the tablet band, and
   hands over to a compact select on a phone. */
.toc { display: block; margin-bottom: 1.75rem; }
.toc__list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.25rem 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.25rem;
}
.toc__list li { flex: none; }
.toc__list a {
  display: inline-block;
  padding: 0.4375rem 0;
  min-block-size: 44px;
  line-height: 1.35;
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
}
.toc__list a:hover, .toc__list a:focus-visible { color: var(--foreground); text-decoration: underline; }
.toc__select { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.5rem; }
.toc__select select { min-block-size: 44px; }
@media (min-width: 1024px) {
  .band__body--toc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 2.5rem; align-items: start; }
  .toc {
    position: sticky;
    top: 5.5rem;
    margin-bottom: 0;
    max-block-size: calc(100vh - 7rem);
    overflow-y: auto;
  }
  .toc__list { flex-direction: column; gap: 0; overflow: visible; padding-bottom: 0; }
  .toc__list a { white-space: normal; }
}
/* The enquiry form takes seven of the twelve tracks and the supporting
   contact list five, the proportion the brief asks for. It is pinned rather
   than auto-fit so the form never drops to a narrow column while the contact
   list beside it stays wide. */
.split--wide-first { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .split--wide-first { grid-template-columns: 7fr 5fr; }
}
.note { display: flex; flex-direction: column; gap: 0.5rem; }
.note h3 { font-size: 1.0625rem; font-weight: 600; }
.note p { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.6; }
.page:lang(hi) .note p { line-height: 1.8; }

.seq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.seq__step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.375rem 1.625rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.seq__n {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--on-accent);
  background: var(--accent-solid);
  border-radius: var(--radius-full);
  padding: 0.1875rem 0.5625rem;
}
.seq__step h3 { font-size: 1.0625rem; font-weight: 600; }
.seq__step p { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.6; }
.page:lang(hi) .seq__step p { line-height: 1.8; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.5625rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.chip--on { color: var(--live); }
.chip--off { color: var(--muted-foreground); }
.chip--warn { color: var(--warn); }

.taglist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.taglist li {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.375rem 0.75rem;
}

.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
}
.callout p { font-size: 0.9375rem; color: var(--card-foreground); line-height: 1.6; }
.callout strong { color: var(--foreground); font-weight: 600; }

/* ==========================================================================
   LIVE PANEL — PlantPulse telemetry
   ========================================================================== */

.panel {
  max-width: 34rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.panel__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.pulse {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-full);
  background: var(--live);
  flex: none;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 122, 77, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(15, 122, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 122, 77, 0); }
}

/* The readout holds two cells and a footer strip. As a two-column grid the
   footer sat alone on the last row at every width — an orphan by
   construction — so the container is flex and the cells carry the columns:
   stacked below 640px, side by side above. Once the markup gains its
   .readout__grid wrapper, that grid lays the cells out and the flex sizing
   here goes quiet. */
.readout { display: flex; flex-wrap: wrap; }
.readout__cell {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.25rem 1.375rem;
}
.readout__grid { display: grid; grid-template-columns: 1fr; inline-size: 100%; }
@media (min-width: 640px) {
  .readout__cell { flex-basis: 50%; border-inline-start: 1px solid var(--border); }
  .readout__cell:first-of-type { border-inline-start: 0; }
  .readout__grid { grid-template-columns: 1fr 1fr; }
}
.readout__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.readout__val {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.readout__val sup { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); margin-inline-start: 2px; }

.meter {
  display: block;
  block-size: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
}
.meter__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.meter__band {
  position: absolute;
  inset-block: 0;
  border-inline: 1px solid var(--foreground);
  opacity: 0.35;
}
.readout__foot {
  flex: 1 1 100%;
  border-top: 1px solid var(--border);
  padding: 0.875rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

.tablewrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.tanks {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  min-width: 42rem;
}
.tanks caption {
  text-align: start;
  padding: 1rem 1.25rem;
  caption-side: top;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}
.tanks th {
  text-align: start;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tanks td {
  padding: 0.8125rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--card-foreground);
}
.tanks tbody tr:last-child td { border-bottom: 0; }
.tanks tbody tr:hover { background: var(--surface); }
.tanks tbody th { font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--foreground); font-weight: 500; }
.spark { display: block; }

/* ==========================================================================
   FORM
   ========================================================================== */

/* The forms pair their first fields two-up, but the children are an odd mix:
   paired fields, full-width fields (select, textareas, consent) and one footer
   strip. No two-column track divides that without stranding the footer alone
   on the last row, so the form is a flex column and pairs opt in through
   .form__row wrappers (two fields each) — a single column below 640px. */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  max-width: 42rem;
}
.form__row { display: grid; grid-template-columns: 1fr; gap: 1.125rem; }
@media (min-width: 640px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}
.field { display: flex; flex-direction: column; gap: 0.4375rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--card-foreground);
}
.field .req { color: var(--warn); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  padding: 0.8125rem 0.9375rem;
  inline-size: 100%;
  min-height: 3rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 1px;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--warn);
  border-width: 2px;
}
.err {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--warn);
  min-height: 1.25rem;
}
.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.formnote { font-size: 0.8125rem; color: var(--muted-foreground); max-width: 34ch; line-height: 1.55; }

/* Consent checkboxes. The element box is 24x24 — the detector floor; the
   visible glyph is drawn 20px inside it — inside a 44px flex label. The bare
   input[type=checkbox] clause is the fallback for labels that do not carry
   the .check class yet, and must sit after .field input so the 24px box wins
   the cascade tie (inline width/height on the markup still beats both until
   that markup is cleaned up). */
.check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  cursor: pointer;
  font-weight: 400;
}
.field label:has(> input[type="checkbox"]) { min-height: 44px; cursor: pointer; }
.check input,
input[type="checkbox"] {
  inline-size: 24px;
  block-size: 24px;
  min-height: 0;
  flex: none;
  padding: 0;
  appearance: none;
  border: 1px solid var(--input);
  border-radius: 4px;
  background: var(--card) center / 20px 20px no-repeat;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.check input:checked,
input[type="checkbox"]:checked {
  border-color: var(--accent-solid);
  background-color: var(--accent-solid);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.check input:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

.contactlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contactlist li { display: flex; flex-direction: column; gap: 0.1875rem; }
.contactlist b {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.contactlist a, .contactlist span { font-size: 0.9375rem; }

.tnote {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  display: none;
  max-width: var(--measure);
}
.page:lang(hi) .route[data-untranslated] .tnote { display: block; }

/* Legal prose — /privacy/ and /terms/. The measure is 68ch, the same value
   --measure already carries: the 72ch that sat here was a second, wider
   measure for the same text, and the shared system asks for one. */
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 1.5rem; }
.prose h2 { font-size: 1.25rem; font-weight: 600; margin-top: 0.5rem; }
.prose h3 { font-size: 1.0625rem; font-weight: 600; }
.prose p, .prose li { font-size: 0.9375rem; color: var(--card-foreground); line-height: 1.7; }
.prose ul, .prose ol { padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.prose .updated {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  margin-top: auto;
}
.foot__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.foot__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem 1.5rem;
}
.foot__col { display: flex; flex-direction: column; gap: 0.75rem; }
.foot__cols h2 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--foreground);
  margin: 0;
}
.foot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
/* Styled on the li, not only on the anchor: the standards column is plain text
   with no link, and would otherwise render a step larger than its neighbours. */
.foot__cols li { font-size: 0.875rem; line-height: 1.5; color: var(--muted-foreground); }
.foot__cols a {
  font-family: var(--font-sans);
  text-decoration: none;
  display: inline-block;
  min-height: 24px;
  line-height: 1.5;
  padding-block: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted-foreground);
}
.foot__cols a:hover { color: var(--accent); text-decoration: underline; }
.foot__blurb { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; max-width: 34ch; }
/* The entity line and the copyright are the footer's only monospace text —
   identity, legal and hash material. Column headings are display face, links
   are DM Sans. */
.foot__entity {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.foot__legal {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  max-width: 68ch;
}
/* Footer-bar anchors (Privacy / Terms) are primary controls and carry the
   44px target height. The .foot__legal clause keeps the spec's selector
   contract; that paragraph holds no links today. The copyright span is the
   bar's one monospace fragment. */
.foot__bar a,
.foot__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
}
.foot__bar > span:first-child { font-family: var(--font-mono); }

@media (max-width: 900px) {
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .foot__cols { grid-template-columns: 1fr; }
}

/* The page fills the viewport so a short page still pins the footer down. */
body { display: flex; flex-direction: column; min-height: 100vh; }
.page { display: flex; flex-direction: column; flex: 1; }
main { flex: 1; }

/* ==========================================================================
   INLINE LINK TARGETS
   ========================================================================== */

/* Prose-level links — mail addresses, phone numbers, notice links, source
   domains — are interactive elements the detector measures like any other, so
   each carries a 24px vertical box while staying in the reading flow.
   max-width plus overflow-wrap keep long addresses from poking out of narrow
   containers: the link shrinks and breaks internally instead of overflowing. */
.srcnote a, .prose a, .note a, .callout a, .field label a,
.contactlist a, .foot__entity a, .noscript a {
  display: inline-block;
  max-width: 100%;
  min-height: 24px;
  line-height: 1.5;
  padding-block: 2px;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   MOTION
   ========================================================================== */

.js .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .pulse, .pill__dot { animation: none; }
  .meter__fill, .ring__fill, .btn, .card { transition: none; }
  .btn:hover, .card:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .meter__fill, .ring__fill, .seq__n, .fit__k--yes, .card::before, .pill__dot {
    forced-color-adjust: none;
    background: Highlight;
  }
  .card, .tile, .panel, .tablewrap, .metric, .spec, .fit__col, .seq__step,
  .scorecard, .splithero__panel, .callout {
    border: 1px solid CanvasText;
  }
  .card::before { background: Highlight; }
}

@media print {
  .masthead, .navpanel, .skip, .foot { display: none; }
  .page { background: #fff; }
  .card, .tile, .panel, .metric { box-shadow: none; border: 1px solid #999; }
}