/* ProceMX — dark operations-console aesthetic */

:root {
  --bg-0: oklch(0.14 0.012 250);
  --bg-1: oklch(0.17 0.012 250);
  --bg-2: oklch(0.20 0.012 250);
  --bg-3: oklch(0.24 0.014 250);
  --line: oklch(0.28 0.016 250);
  --line-2: oklch(0.34 0.018 250);

  --fg: oklch(0.96 0.005 90);
  --fg-2: oklch(0.84 0.008 90);
  --fg-mute: oklch(0.65 0.012 250);
  --fg-dim: oklch(0.48 0.012 250);

  --accent: oklch(0.81 0.09 232);        /* logo sky blue */
  --accent-soft: oklch(0.81 0.09 232 / 0.14);
  --accent-line: oklch(0.81 0.09 232 / 0.45);
  /* Tint for a panel that belongs to MX (the "what MX adds" column). Same as
     --accent-soft here; light mode overrides it because navy at 10% is grey. */
  --mx-soft: oklch(0.81 0.09 232 / 0.14);

  /* Filled surfaces carrying dark text — the primary button. Split from
     --accent because on a light background --accent has to become the brand
     navy to stay readable as text, while a filled button still wants the
     bright logo blue behind dark ink. In dark mode the two are one colour. */
  --accent-fill: oklch(0.81 0.09 232);
  --accent-fill-ink: oklch(0.16 0.012 250);

  /* A single emphasised word inside a heading. On the dark theme the accent
     already separates cleanly from white text, so this is the accent. */
  --highlight: oklch(0.81 0.09 232);

  --amber: oklch(0.86 0.13 85);          /* AI / governance */
  --amber-soft: oklch(0.86 0.13 85 / 0.14);
  --cyan: oklch(0.80 0.10 195);          /* data / spatial — teal */
  --cyan-soft: oklch(0.80 0.10 195 / 0.14);
  --green: oklch(0.75 0.13 155);         /* status: ok */
  --coral: oklch(0.76 0.09 25);          /* logo coral */
  --red: oklch(0.70 0.18 25);            /* status: alert */

  --radius: 6px;
  --radius-lg: 10px;

  --gap-y: clamp(96px, 12vw, 168px);
  --pad-x: clamp(20px, 4vw, 56px);
  --maxw: 1320px;

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Light mode is built from the brand palette rather than from dimmed versions
   of the dark theme. The palette splits cleanly by job: navy and ink carry
   text, sky carries fills. Contrast measured against --bg-0 below — navy
   11.37:1, ink 15.86:1, and sky as a button fill under ink 9.24:1. */
[data-theme="light"] {
  --bg-0: oklch(0.99 0.003 90);
  --bg-1: oklch(0.97 0.004 90);
  --bg-2: oklch(0.95 0.005 90);
  --bg-3: oklch(0.92 0.006 90);
  --line: oklch(0.86 0.007 90);
  --line-2: oklch(0.78 0.008 90);

  --fg: #231f20;                       /* brand ink */
  --fg-2: oklch(0.30 0.012 250);
  --fg-mute: oklch(0.45 0.012 250);
  --fg-dim: oklch(0.60 0.012 250);

  /* Brand navy takes over every accent that is text or a thin mark. The logo
     sky blue manages 1.72:1 here — effectively invisible — so on this
     background it is confined to fills, where dark ink sits on top of it. */
  --accent: #1a3865;                   /* brand navy */
  --accent-soft: rgb(26 56 101 / 0.10);
  --accent-line: rgb(26 56 101 / 0.32);
  --mx-soft: rgb(109 207 246 / 0.28);  /* brand sky: reads as blue, not grey */
  --accent-fill: #6dcff6;              /* brand sky — still the button */
  --accent-fill-ink: #231f20;

  /* Brand palette used at full strength rather than darkened to hit 4.5:1.
     Darkening kept every contrast ratio legal but drained the colour out of
     the theme — a dusty rose and an olive green look nothing like a brand
     built on navy, sky and pink.
     The trade is real and deliberate: these are decorative marks and single
     highlighted words, not body copy, which stays on ink at 15.86:1 and
     navy at 11.37:1. Revisit if any of them start carrying meaning a reader
     has to be able to act on. */
  --highlight: #f38193;                /* brand rose */

  --coral: #f5989e;                    /* brand salmon */
  --red: #f38193;                      /* brand rose */
  --cyan: #6dcff6;                     /* brand sky */
  --cyan-soft: rgb(109 207 246 / 0.18);

  /* No green or amber exists in the brand palette — these are status colours
     and have to stay recognisable as status. Kept hue-true and brightened
     rather than pushed to the gamut edge, which turns amber orange-red. */
  --amber: oklch(0.72 0.16 85);
  --amber-soft: oklch(0.72 0.16 85 / 0.16);
  --green: oklch(0.62 0.16 155);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  /* No overflow-x here. With html already overflow-x: hidden (see the end of
     this file), setting it on body too makes body the scroll container that
     position: sticky measures against, and body never scrolls, so the sticky
     header scrolled away with the page. */
}

[data-density="compact"] { --gap-y: clamp(72px, 9vw, 128px); }
[data-density="comfy"]   { --gap-y: clamp(120px, 14vw, 200px); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; }

::selection { background: var(--accent-soft); color: var(--fg); }

/* ────── Typography ────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.022em; }
h1 { font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; font-weight: 450; letter-spacing: -0.03em; }
h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.025em; }
h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
h4 { font-size: 15px; line-height: 1.3; }

p { margin: 0; }
.lead { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--fg-2); max-width: 62ch; letter-spacing: -0.005em; }

.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-mute); }
.dim { color: var(--fg-dim); }

/* ────── Layout primitives ────── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
}
section { position: relative; }
.section-pad { padding: var(--gap-y) 0; }
.divider { border-top: 1px solid var(--line); }

/* Hairline grid background that runs the whole page */
.hairlines {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  opacity: 0.32;
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
}

/* Light mode runs a long stretch of near-white, and the only thing separating
   one section from the next is a 1px hairline — the page reads as one sheet.
   Alternate sections pick up a soft wash of brand sky so it breaks into bands.
   Faded at both ends rather than a flat fill, so the boundary is a gradient
   rather than a hard edge against the hairline.

   Light-only on purpose: dark mode already separates sections through its own
   surface steps, and a wash there would just muddy them. Sections are direct
   children of <main> in every page, so nth-of-type tracks the real order.
   The strength is a judgement call that took three passes. 13% with long
   fades was invisible on a bright screen; 28% read as too bright. 15% here
   is close to that first figure, but the short fades below mean far more of
   the section sits at full tint, so it lands visibly where 13% did not.
   Measured over the band: ink 15.0:1, navy 10.8:1, muted 6.8:1. */
[data-theme="light"] main > section:nth-of-type(even) {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(109 207 246 / 0.15) 8%,
    rgb(109 207 246 / 0.15) 92%,
    transparent 100%
  );
}

/* ────── Buttons ────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  cursor: default;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-fill);
  color: var(--accent-fill-ink);
  border-color: var(--accent-fill);
}
.btn-primary:hover { background: oklch(0.86 0.09 232); border-color: oklch(0.86 0.09 232); }
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: var(--bg-2); border-color: var(--fg-mute); }
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
}
.btn-arrow .arr {
  display: inline-block;
  transition: transform .2s ease;
}
.btn-arrow:hover .arr { transform: translateX(3px); }
.btn-arrow.accent { color: var(--accent); }

/* ────── Cards ────── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.card-hover { transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.card-hover:hover { border-color: var(--line-2); background: var(--bg-2); }

/* ────── Tags / chips ────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-mute);
  background: var(--bg-1);
}
.tag-accent { color: var(--accent); border-color: var(--accent-line); }
.tag-amber  { color: var(--amber);  border-color: oklch(0.86 0.13 85 / 0.45); }
.tag-cyan   { color: var(--cyan);   border-color: oklch(0.80 0.10 195 / 0.45); }
.tag-green  { color: var(--green);  border-color: oklch(0.75 0.13 155 / 0.45); }
.tag-coral  { color: var(--coral);  border-color: oklch(0.76 0.09 25 / 0.45); }

/* ────── Placeholder image slot (striped) ────── */
.imgslot {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--bg-1);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 10px,
    oklch(0.24 0.014 250) 10px,
    oklch(0.24 0.014 250) 11px
  );
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  min-height: 120px;
}
.imgslot::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  border: 1px solid var(--fg-dim);
  border-radius: 50%;
}

/* ────── Section header ────── */
.s-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 860px) {
  .s-head { grid-template-columns: 1fr; gap: 16px; }
}
.s-head .lead { margin-top: 0; }

/* ────── Nav ────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklch, var(--bg-0) 78%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-links { display: flex; gap: 4px; }
.nav-link { padding: 6px 12px; font-size: 13.5px; color: var(--fg-2); border-radius: 4px; }
.nav-link:hover { background: var(--bg-2); color: var(--fg); }
.nav-link.is-active { color: var(--fg); background: var(--bg-2); }

/* Dropdown groups. Hover and keyboard focus open the menu in CSS alone, so
   it works in the pre-rendered HTML before React mounts; .is-open is the
   click/tap fallback for touch screens wide enough to show this nav. The
   wrapper carries the gap as padding so the pointer never leaves the group
   on its way down to the panel. */
.nav-item { position: relative; }
.nav-menu-btn {
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-weight: inherit; line-height: inherit;
  font-size: 13.5px; /* same as .nav-link; a shorthand `font: inherit` here would undo it */
  display: inline-flex; align-items: center; gap: 5px;
}
.nav-menu-btn .chev { font-size: 9px; opacity: .55; transition: transform .15s ease; }
.nav-menu {
  display: none;
  position: absolute; top: 100%; left: 0;
  padding-top: 8px;
  z-index: 101;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-item.is-open .nav-menu { display: block; }
.nav-item:hover .chev,
.nav-item:focus-within .chev,
.nav-item.is-open .chev { transform: rotate(180deg); }
.nav-menu-panel {
  min-width: 300px;
  padding: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.nav-menu-panel a { display: block; padding: 10px 12px; border-radius: 5px; }
.nav-menu-panel a:hover,
.nav-menu-panel a.is-active { background: var(--bg-2); }
.nav-menu-panel a .l { display: block; font-size: 13.5px; color: var(--fg); }
.nav-menu-panel a .d { display: block; font-size: 12px; color: var(--fg-mute); margin-top: 2px; line-height: 1.45; }

/* Anchored sections sit below the sticky header when linked to. */
[id] { scroll-margin-top: 80px; }

/* Logo image */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logo img {
  height: 43px;
  width: auto;
  display: block;
}

/* ────── Status dot ────── */
.dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px oklch(0.75 0.13 155 / 0.18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px oklch(0.75 0.13 155 / 0.18); }
  50% { box-shadow: 0 0 0 5px oklch(0.75 0.13 155 / 0.08); }
}

/* ────── Marquee animation ────── */
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ────── Number ticks ────── */
.num-tick {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}

/* ────── Inline code-ish ────── */
.kbd {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--fg-2);
}

/* ────── Glow line ────── */
.glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE
   ═══════════════════════════════════════════════════════════ */

/* Hamburger toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-1);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--bg-2); }
.nav-toggle .bars { position: relative; width: 16px; height: 12px; display: block; }
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars > span {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1.5px; background: var(--fg);
  transition: transform .2s ease, top .2s ease, opacity .15s;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars > span  { top: 5px; display: block; }
.nav-toggle .bars::after  { top: 10px; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { top: 5px; transform: rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .bars > span  { opacity: 0; }

/* Drawer (hidden until is-open and mobile) */
.nav-drawer { display: none; }

/* ── Tablet/large mobile ─────────────────────────────────── */
@media (max-width: 860px) {
  :root {
    --pad-x: clamp(16px, 5vw, 24px);
    --gap-y: clamp(64px, 12vw, 96px);
  }

  /* Defensive: keep visuals from blowing out cards */
  .card svg,
  .card img,
  section > .wrap svg {
    max-width: 100%;
    height: auto;
  }

  /* Nav switches to hamburger. The mode toggle stays in the header at every
     width — it used to go down with the rest of .nav-cta, which left no way to
     find it without opening the menu first. Only the demo button folds away. */
  .nav-links { display: none !important; }
  .nav-cta .btn { display: none !important; }
  /* space-between would strand the lone toggle mid-header; keep it next to
     the hamburger. */
  .nav-cta { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  .nav-inner { height: 56px; }
  .logo img { height: 34px; }

  .nav-drawer {
    display: block;
    position: fixed;
    top: 56px; left: 0; right: 0;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 8px var(--pad-x) 32px;
    background: var(--bg-0);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
    z-index: 99;
  }
  .nav-drawer.is-open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .nav-drawer nav { display: flex; flex-direction: column; }
  .nav-drawer .nav-link {
    display: block;
    padding: 16px 4px;
    font-size: 17px;
    color: var(--fg);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav-drawer .nav-link.is-active { background: transparent; color: var(--accent); }
  /* A group is a heading set exactly like the links, followed by its
     pages indented beneath it — the indent alone marks the grouping. Always expanded: there are
     few enough links that an accordion would only add a tap. */
  .nav-drawer .nav-group { display: flex; flex-direction: column; }
  .nav-drawer .nav-group-label {
    display: block;
    padding: 16px 4px;
    font-size: 17px;
    color: var(--fg);
    border-bottom: 1px solid var(--line);
  }
  .nav-drawer .nav-link.nav-sub { padding-left: 28px; }
  .nav-drawer .btn {
    width: 100%;
    height: 48px;
    margin-top: 20px;
    justify-content: center;
    font-size: 14.5px;
  }
}

/* ── Hero console at laptop widths ───────────────────────── */
/* Between the phone layout and ~1100px the work-order feed is too narrow
   for id + title + status label; keep the coloured dot and drop the word. */
@media (min-width: 761px) and (max-width: 1100px) {
  .console-status-text { display: none; }
}

/* ── AI page pillar rows ─────────────────────────────────── */
/* Three columns (name, body, examples) only fit on a wide screen. Below
   that the name goes on its own line above body + examples, and on a
   phone everything stacks. */
@media (max-width: 1000px) {
  .pillar-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    gap: 16px 28px !important;
  }
  .pillar-row > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pillar-row {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 24px 20px !important;
  }
}

/* ── MX+ scanning section ─────────────────────────────────── */
/* Scan types and use cases sit side by side only where both fit. Below
   that they stack, and on a phone each scan type's uses drop under its
   name instead of being squeezed into a third column. */
@media (max-width: 900px) {
  .scan-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 560px) {
  .scan-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    row-gap: 6px !important;
  }
  .scan-row > :nth-child(3) { grid-column: 2; }
}

/* ── AI page usage grid ───────────────────────────────────── */
/* Four cells: four across, two by two, then stacked — never three and
   an orphan. */
.usage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .usage-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── GIS comparison: who-maintains rows ───────────────────── */
@media (max-width: 760px) {
  .maintain-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 22px 20px !important;
  }
}

/* ── Nine-tile grids: 3 → 2 → 1 columns ──────────────────── */
/* Fixed column counts rather than auto-fit so a grid of nine never
   leaves an empty cell; at two columns the odd last tile spans the row.
   Used by the basecamp site services and dashboard tiles. */
@media (max-width: 1000px) {
  .grid-3up { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-3up > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .grid-3up { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── Stack 2-col grids ───────────────────────────────────── */
@media (max-width: 760px) {
  .hero-grid,
  .console-main,
  .mxmobile-grid,
  .ai-grid,
  .pagehero-grid,
  .footer-outer,
  .spatial-grid,
  .finance-ledger-grid,
  .rules-grid,
  .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .mxmobile-features {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
  .console-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .console-kpis > div:nth-child(2) { border-right: none !important; }
  .console-kpis > div:nth-child(1),
  .console-kpis > div:nth-child(2) { border-bottom: 1px solid var(--line); }

  .finance-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .finance-kpis > div { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); }
  .finance-kpis > div:nth-child(2n) { border-right: none !important; }
  /* The projection chart cell is last — let it span full width */
  .finance-kpis > div:last-child {
    grid-column: 1 / -1;
    border-right: none !important;
    border-bottom: none;
  }

  .footer-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }

  /* Section padding tightens */
  section.section-pad { padding: 64px 0; }
  .s-head { margin-bottom: 32px; gap: 12px; }

  /* Buttons: ghost stack neatly */
  .hero .btn,
  section .btn {
    /* don't force full-width on every button; just keep them sane */
    white-space: normal;
  }

  /* Wide horizontal-scroll regions */
  .scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .scroll-x::-webkit-scrollbar { height: 6px; }
  .scroll-x::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

  /* Make the ledger table scroll horizontally inside its card column */
  .finance-ledger-grid > div:first-child {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .finance-ledger-grid > div:first-child > div {
    min-width: 600px;
  }
  /* Audit drawer goes below ledger, kill its left border so it doesn't look detached */
  .finance-ledger-grid > div:nth-child(2) {
    border-top: 1px solid var(--line);
  }

  /* Rules grid stacked: sidebar becomes top strip */
  .rules-grid > div:first-child {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }

  /* Profile panel: rows only need to share height beside the phone. Stacked
     above it, each row takes its natural height. */
  .profile-panel { grid-template-rows: auto !important; }

  /* Spatial map: side panel goes below */
  .spatial-grid > div:nth-child(2) {
    border-left: none !important;
    border-top: 1px solid var(--line);
    min-height: auto;
  }

  /* PhoneMockup centers and shrinks */
  .phone-mockup {
    max-width: 280px !important;
  }

  /* Wide marquee-ish chip rows — wrap cleanly */
  .tag {
    white-space: nowrap;
  }
}

/* ── Phone (≤480) ───────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --pad-x: 16px;
    --gap-y: 56px;
  }
  body { font-size: 15px; line-height: 1.5; }
  h1 { font-size: clamp(34px, 10vw, 44px); line-height: 1.04; }
  h2 { font-size: clamp(26px, 7.5vw, 34px); line-height: 1.1; }
  .lead { font-size: 15.5px; }

  .footer-cols { grid-template-columns: 1fr !important; }
  .finance-kpis { grid-template-columns: 1fr !important; }
  .finance-kpis > div {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  .finance-kpis > div:last-child { border-bottom: none; }

  /* The hero console stays 2×2 on a phone (the 760px rule above) and drops
     the sparkline: stacked one-per-row it ran to two screens of mockup
     before the visitor reached any real content. */
  .console-kpis > div { padding: 12px 14px !important; }
  .console-spark { display: none; }

  .mxmobile-features {
    grid-template-columns: 1fr !important;
  }

  /* The hero CTAs and other button rows: full-width on smallest screens */
  .hero .btn,
  section .btn-primary,
  section .btn-ghost {
    flex: 1 1 100%;
  }

  /* Tighter card padding */
  .card { border-radius: 8px; }
  section.section-pad { padding: 48px 0; }
}

/* Avoid horizontal page scroll regardless */
html { overflow-x: hidden; }

/* ────── Scroll hint ────── */
#scroll-hint {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 16px;
  background: color-mix(in oklch, var(--bg-1) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 12px 32px -12px oklch(0 0 0 / 0.5);
  transition: opacity .35s ease;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}
#scroll-hint .sh-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  color: var(--accent);
  font-size: 13px;
  animation: sh-bounce 1.7s ease-in-out infinite;
  line-height: 1;
}
@keyframes sh-bounce {
  0%, 100% { transform: translateY(-2px); opacity: 0.85; }
  50%      { transform: translateY(2px);  opacity: 1; }
}
@media (max-width: 480px) {
  #scroll-hint { bottom: 14px; padding: 7px 12px 7px 14px; font-size: 9.5px; gap: 8px; }
  #scroll-hint .sh-chev { width: 14px; height: 14px; font-size: 12px; }
}
@media print { #scroll-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #scroll-hint .sh-chev { animation: none; }
}

/* ────── SEO / crawler fallback content (hidden once React mounts) ────── */
.seo-fallback {
  position: absolute;
  left: -99999px;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
noscript .ns-shell {
  display: block;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px var(--pad-x);
  color: var(--fg);
}
noscript .ns-shell h1 { margin: 0 0 16px; font-size: clamp(32px, 5vw, 56px); }
noscript .ns-shell p { color: var(--fg-2); font-size: 17px; line-height: 1.5; }
noscript .ns-shell nav { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
noscript .ns-shell nav a { color: var(--accent); }

/* ────── Theme toggle ────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover {
  color: var(--fg);
  border-color: var(--fg-mute);
  background: var(--bg-2);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Drawer footer: primary CTA stretches, the mode toggle keeps its square. */
.drawer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drawer-actions .btn { flex: 1; justify-content: center; }
.drawer-actions .theme-toggle { flex: 0 0 auto; height: 44px; width: 44px; }

/* Logo swap. The shipped wordmark is near-white and disappears on a light
   background, so a dark-text version ships alongside it and CSS chooses. Done
   in CSS rather than JavaScript so the right one is already correct in the
   pre-rendered HTML, with no flash on load. */
.logo .logo-for-light { display: none; }
[data-theme="light"] .logo .logo-for-dark { display: none; }
[data-theme="light"] .logo .logo-for-light { display: block; }