/* ===========================================================
   TRAISR — shared site stylesheet
   Base reset, layout utilities, buttons, topbar, nav, mega-dropdown.
   Page-specific CSS lives inline in each HTML page's <style> block,
   loaded AFTER this file so per-page rules can override.
   =========================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; position: relative; }

/* Section label */
.label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.label::before {
  content: ""; width: 24px; height: 1px; background: var(--teal-deep);
}
.label.light { color: var(--teal-soft); }
.label.light::before { background: var(--teal-soft); }
.label.center { justify-content: center; }
.label.center::before { display: none; }

/* ─────────────────────────────────────────────────────────────
   Scroll-linked kicker drift (reusable) — index landing trial.
   Each section kicker (mono label + em-rule) drifts horizontally as
   its section crosses the viewport: enters right of rest, drifts
   left through rest, continues slightly past. Transform-only, driven
   by a native CSS view-progress timeline — NO scroll listeners, NO
   rAF, NO IntersectionObserver position math (stays off the main
   thread / on the compositor).

   COLLISION GUARD: the DRIFT (translateX) lives on this wrapper; the
   .label inside keeps its own entrance reveal (translateY) — two
   separate elements, so the transforms never share a property and the
   reveal plays unchanged. The ::before em-rule rides along because it
   sits inside the drifting wrapper.

   Reusable, no index-specific selectors: to roll out elsewhere later,
   wrap that kicker's label in <span class="kicker-drift">…</span>.
   Unsupported browsers (no view-timeline) fall through to a static
   kicker via the @supports gate below.
   ───────────────────────────────────────────────────────────── */
.kicker-drift { display: block; }   /* layout-neutral wrapper; static kicker where view() is unsupported */

@supports (animation-timeline: view()) {
  @keyframes kicker-drift-x {
    from { transform: translateX(var(--kd-x)); }        /* enters right of rest */
    to   { transform: translateX(calc(var(--kd-x) * -1)); }  /* continues past to the left */
  }
  .kicker-drift {
    --kd-x: 28px;                          /* half of ~56px total travel */
    will-change: transform;                /* hint compositor layer for the 7 kickers */
    animation-name: kicker-drift-x;
    animation-duration: auto;              /* progress comes from the timeline, not a clock */
    animation-timing-function: linear;     /* map 1:1 to scroll — no eased ramp, no jank */
    animation-fill-mode: both;             /* hold endpoints outside the active range */
    animation-timeline: view();            /* anonymous view-progress timeline of the wrapper */
    animation-range: cover 0% cover 100%;  /* full pass — rest (translateX 0) lands at viewport centre */
  }
  /* ≤834px: halve the travel (28→14px). Gentler on tablet/phone and keeps
     the drift far inside the 32px container gutter on narrow viewports, so
     it can never reach the edge or trip horizontal scroll. */
  @media (max-width: 834px) {
    .kicker-drift { --kd-x: 14px; }
  }
  /* Reduced motion: no drift — static kicker. */
  @media (prefers-reduced-motion: reduce) {
    .kicker-drift { animation: none; }
  }
}

h2.section-title {
  font-family: 'Fraunces', serif;
  font-weight: 350;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin-top: 24px;
}
h2.section-title em { font-style: italic; color: var(--teal-deep); font-weight: 350; }

/* Buttons */
.btn-primary {
  background: var(--navy);
  color: var(--cream);
  padding: 16px 28px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .25s ease;
  border: 0;
}
.btn-primary:hover { background: var(--teal-deep); }
.btn-primary svg { transition: transform .2s; }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-ghost {
  color: var(--navy); font-size: 15px; font-weight: 500;
  padding: 16px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  transition: all .2s;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
}
.btn-ghost:hover { border-color: var(--navy); }

.btn-teal {
  background: var(--teal);
  color: var(--navy-deep);
  padding: 16px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .2s;
  border: 0;
}
.btn-teal:hover { background: var(--cream); }
/* Light mode: --teal is the dark sapphire, so the filled button needs light text and
   a deeper-sapphire hover instead of the cream flip (which assumed a bright teal). */
:root:not([data-theme="dark"]) .btn-teal { color: var(--cream); }
:root:not([data-theme="dark"]) .btn-teal:hover { background: var(--teal-deep); color: var(--cream); }

/* ================ TOP BAR ================ */
.topbar {
  background: var(--navy-deep);
  color: var(--cream);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topbar .container {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 32px;
}
.topbar a { opacity: .7; transition: opacity .2s; }
.topbar a:hover { opacity: 1; }
.topbar .right { display: flex; gap: 28px; }
.pulse::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  margin-right: 8px; vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(74, 222, 128, .6);
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ================ NAV ================ */
nav.main {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 248, 241, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding .2s;
}
nav.main .container {
  display: flex; align-items: center; flex-wrap: nowrap; /* whole nav stays on one row */
  padding: 14px 32px; /* tightened vertical so the bigger logo doesn't bloat nav height */
  gap: 28px; /* tightened so the full-size logo + menu + buttons fit one row down to the 1100px breakpoint (reduce gap before shrinking the logo) */
}
.brand { display: inline-flex; align-items: center; }
.brand { flex-shrink: 0; }
.brand img { height: 56px; width: auto; max-width: none; display: block; } /* header logo: restrained enterprise scale (was 72px, ~22% down) */
@media (max-width: 1100px) {
  .brand img { height: 46px; }
}
@media (max-width: 900px) {
  nav.main .container { padding: 12px 20px; gap: 24px; }
  .brand img { height: 40px; } /* scale down so the logo doesn't dominate on tablets/phones */
}
footer .brand-logo { display: inline-flex; }
nav.main ul.menu { display: flex; gap: 24px; align-items: center; margin-right: auto; flex-wrap: nowrap; }
nav.main ul.menu a {
  font-size: 14.5px; font-weight: 500;
  color: var(--ink); position: relative;
  transition: color .2s;
  white-space: nowrap; /* never let a link (e.g. "How it works") wrap to multiple lines */
}
nav.main ul.menu a:hover { color: var(--teal-deep); }
nav.main ul.menu .has-drop::after {
  content: "▾"; margin-left: 6px; font-size: 9px; color: var(--ink-soft);
}

/* Mega dropdown */
.mega-wrap { position: relative; }
.mega {
  position: absolute; top: calc(100% + 14px); left: -40px;
  /* Fully opaque surface — the panel must NEVER sit on a see-through
     background when it overlaps the dark hero globe behind the nav. */
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 22px;
  width: 1060px;
  max-width: calc(100vw - 40px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  box-shadow:
    0 28px 60px -24px rgba(14,44,74,0.30),
    0 8px 18px -8px rgba(14,44,74,0.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
[data-theme="dark"] .mega {
  background: var(--paper-warm);
  border-color: rgba(245, 240, 232, 0.14);
  box-shadow:
    0 28px 60px -24px rgba(0, 0, 0, 0.70),
    0 8px 18px -8px rgba(0, 0, 0, 0.50);
}
.mega-wrap:hover .mega,
.mega-wrap:focus-within .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Each item is a vertical stack: logo on top, label + description below.
   This avoids the horizontal "dead space" and the row-by-row alignment
   issues caused by wider logos (Operations) wrapping multi-word labels. */
.mega-item {
  display: flex;
  align-items: center;
  padding: 18px 16px;
  border-radius: 10px;
  position: relative;
  min-height: 64px;
  transition: background .2s ease, transform .25s ease;
}
.mega-item::before {
  /* Subtle accent strip that appears on hover — premium-menu polish */
  content: "";
  position: absolute;
  left: 8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--accent, #2F4B86);
  border-radius: 2px;
  transition: height .2s ease, opacity .2s ease;
  opacity: 0;
}
.mega-item:hover,
.mega-item:focus-visible {
  background: rgba(13, 22, 38, 0.04);
  outline: none;
}
.mega-item:hover::before,
.mega-item:focus-visible::before {
  height: 60%;
  opacity: 1;
}
[data-theme="dark"] .mega-item:hover,
[data-theme="dark"] .mega-item:focus-visible {
  background: rgba(245, 240, 232, 0.06);
}
[data-theme="dark"] .mega-item::before { background: var(--teal-deep, #2BA8D9); }

.mega-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  color: var(--teal-deep);
}
.mega-item h5 {
  font-family: 'Fraunces', serif; font-size: 15.5px; font-weight: 500;
  color: var(--navy); margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mega-item p {
  font-size: 12px; color: var(--ink-mute);
  margin: 0;
  line-height: 1.45;
}

.nav-cta { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.btn-login {
  font-size: 14px; font-weight: 500;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--navy);
  transition: all .2s;
}
.btn-login:hover { border-color: var(--navy); background: var(--navy); color: var(--cream); }
/* PRIMARY TIER — matches the bright deepened blue used for "Request a demo"
   throughout the page (hero, form, sticky pill). Two-tier button system:
   primary = bright blue (highest salience for conversion); secondary = dark.
   This is the nav's primary CTA, so it gets the primary treatment. */
.btn-demo {
  font-size: 14px; font-weight: 600;
  padding: 12px 20px;
  background: linear-gradient(180deg, #2F4B86 0%, #1F3566 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 1px 2px rgba(31, 53, 102, 0.28),
    0 8px 18px -4px rgba(31, 53, 102, 0.40);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-demo:hover {
  background: linear-gradient(180deg, #1F3566 0%, #16264A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(31, 53, 102, 0.28),
    0 12px 22px -4px rgba(31, 53, 102, 0.50);
}
@media (prefers-reduced-motion: reduce) {
  .btn-demo, .btn-demo:hover { transform: none; transition: background .25s ease, box-shadow .25s ease; }
}


/* Module logo per mega-item — vertical stack, normalized height,
   left-aligned baseline. Cream-tinted plate in dark mode keeps the
   navy "CENTRL" wordmark legible against the dark panel. */
.mega-item .mega-logo {
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
  display: block;
  transition: transform .2s ease;
}
.mega-item:hover .mega-logo,
.mega-item:focus-visible .mega-logo {
  transform: translateX(2px);
}
[data-theme="dark"] .mega-item .mega-logo {
  background: rgba(245, 240, 232, 0.96);
  border-radius: 6px;
  padding: 5px 10px;
  max-width: 180px;
}

/* ================================================================
   SHARED FOOTER  — markup lives in partials/footer.html, synced by
   build.js. These rules style that footer on every page. Class-based
   selectors here win over any page's older inline footer CSS.
   ================================================================ */
body > footer {
  background: var(--navy-deep);
  color: var(--cream);
  padding: 90px 0 40px;
  position: relative;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 70px;
}
footer .brand-logo img { height: 72px; margin-bottom: 22px; }
footer .tag {
  color: rgba(245, 240, 232, .6);
  font-size: 14px;
  line-height: 1.55;
  max-width: 280px;
  margin-bottom: 26px;
}
.socials { display: flex; gap: 12px; }
.socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(245, 240, 232, .15);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.socials a:hover { background: var(--teal); border-color: var(--teal); color: var(--navy-deep); }
.socials svg { width: 14px; height: 14px; }
footer h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--teal-soft); /* light sapphire — readable on the navy footer */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 500;
}
footer ul.links { display: flex; flex-direction: column; gap: 11px; }
footer ul.links li { margin: 0; } /* neutralize older inline `footer ul li` margin */
footer ul.links a {
  color: rgba(245, 240, 232, .65);
  font-size: 14px;
  transition: color .2s;
}
footer ul.links a:hover { color: var(--cream); }
.foot-bottom {
  display: flex; justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid rgba(245, 240, 232, .1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(245, 240, 232, .5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-items: center;
}
.foot-bottom .ver { color: var(--teal); }
.foot-bottom-left { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.foot-bottom .foot-copy { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232, 235, 240, 0.50); }
.foot-legal {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.foot-legal li { margin: 0; }
.foot-legal a { color: rgba(232, 235, 240, 0.55); transition: color .2s ease; }
.foot-legal a:hover { color: var(--accent); }
@media (max-width: 1024px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 700px) {
  .foot-bottom-left { gap: 18px; }
  .foot-legal { gap: 16px; }
}
@media (max-width: 600px) {
  .foot-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
}


/* =================================================================
   UNIFIED BUTTON SYSTEM
   Primary = solid brand blue #2D7FF9 (NO gradient). Secondary = outline.
   !important is intentional: it collapses the legacy per-page button
   treatments (sapphire gradient, navy gradient, solid navy, filled-teal,
   cream) into one consistent system across every page.
   ================================================================= */
.btn-primary, .btn-demo, .sticky-demo, .hero .btn-primary, .cta-form button,
.mid-cta .btn-primary, .cta-actions .btn-teal, .cta-card .btn-teal,
.ph-pay button, .news-input-row button, .cta-minimal .btn-teal,
section.cta.cta-minimal .btn-teal {
  background: #2D7FF9 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(16, 33, 60, 0.14), 0 6px 16px -6px rgba(45, 127, 249, 0.42) !important;
}
.btn-primary:hover, .btn-demo:hover, .sticky-demo:hover, .hero .btn-primary:hover,
.cta-form button:hover, .mid-cta .btn-primary:hover, .cta-actions .btn-teal:hover,
.cta-card .btn-teal:hover, .ph-pay button:hover, .news-input-row button:hover,
.cta-minimal .btn-teal:hover, section.cta.cta-minimal .btn-teal:hover {
  background: #1B6BE5 !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(16, 33, 60, 0.18), 0 10px 24px -6px rgba(45, 127, 249, 0.55) !important;
}
.btn-primary:focus-visible, .btn-demo:focus-visible, .sticky-demo:focus-visible,
.hero .btn-primary:focus-visible, .cta-form button:focus-visible,
.mid-cta .btn-primary:focus-visible, .cta-actions .btn-teal:focus-visible,
.cta-card .btn-teal:focus-visible, .ph-pay button:focus-visible,
.news-input-row button:focus-visible, .cta-minimal .btn-teal:focus-visible,
section.cta.cta-minimal .btn-teal:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(45, 127, 249, 0.45) !important;
}
/* SECONDARY — outline on light surfaces */
.btn-ghost, .spot-actions .btn-secondary, .cta-band-btn {
  background: transparent !important;
  background-image: none !important;
  color: var(--navy) !important;
  border: 1px solid var(--line-strong, rgba(13, 22, 38, 0.2)) !important;
  box-shadow: none !important;
}
.btn-ghost:hover, .spot-actions .btn-secondary:hover, .cta-band-btn:hover {
  background: rgba(45, 127, 249, 0.06) !important;
  border-color: #2D7FF9 !important;
  color: #2D7FF9 !important;
}
.btn-ghost:focus-visible, .spot-actions .btn-secondary:focus-visible, .cta-band-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(45, 127, 249, 0.35) !important;
}
/* SECONDARY on dark surfaces (hero) keeps light text/border */
.hero .btn-ghost {
  background: transparent !important;
  color: var(--cream) !important;
  border: 1px solid rgba(247, 242, 233, 0.34) !important;
}
.hero .btn-ghost:hover {
  background: rgba(247, 242, 233, 0.08) !important;
  border-color: rgba(247, 242, 233, 0.62) !important;
  color: var(--cream) !important;
}


/* ============================================================
   TRAISR — Part B premium polish
   Load animations · hero zoom · CTA motion · frosted nav.
   Existing tokens/colors only — no new fonts, no new hex literals
   (rgba triplets 16,33,60 and 45,127,249 already exist in site.css).
   Injected identically into css/site.css and each page's inline CSS.
   ============================================================ */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(28px); filter: blur(12px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroZoomOut {
  from { scale: 1.06; }
  to   { scale: 1; }
}

/* ---- Hero staggered entrance ---- */
/* Subpages: single h1 + lede + cta */
.hero h1 { opacity: 0; animation: heroReveal 1.1s 0.25s both cubic-bezier(0.16, 1, 0.3, 1); }
.hero .lede { opacity: 0; animation: heroFadeUp 1s 0.7s both cubic-bezier(0.16, 1, 0.3, 1); }
.hero-cta { opacity: 0; animation: heroFadeUp 1s 0.85s both cubic-bezier(0.16, 1, 0.3, 1); }
/* Homepage: headline is two .reveal lines — stagger those, and neutralize the
   wrapper so it is not double-animated by the generic .hero h1 rule above. */
h1.headline { opacity: 1 !important; animation: none !important; filter: none !important; transform: none !important; }
h1.headline .reveal { opacity: 0; transform: none; animation: heroReveal 1.1s both cubic-bezier(0.16, 1, 0.3, 1); }
h1.headline .reveal:nth-child(1) { animation-delay: 0.25s; }
h1.headline .reveal:nth-child(2) { animation-delay: 0.42s; }

/* ---- Homepage hero card: slow zoom-out once on load.
   Uses the individual `scale` property so it composes with the existing
   heroFloat transform animation instead of overriding it. ---- */
.hero-preview .hp-card { animation: heroFloat 7s ease-in-out infinite, heroZoomOut 1.8s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ---- CTA motion (all six button classes) ---- */
.btn-teal, .btn-primary, .btn-demo, .btn-ghost, .btn-secondary, .btn-login {
  transition: transform 0.17s ease, box-shadow 0.17s ease, background-color 0.17s ease, border-color 0.17s ease;
}
/* Hover feedback is colour + shadow only — NO translate/scale on the element the pointer
   is on. A lift/scale can move the hit box out from under a stationary cursor, dropping
   :hover and re-triggering it in a loop (the jitter). Press feel stays on :active, which
   fires only while the pointer is held down, so it cannot oscillate. */
.btn-teal:active, .btn-primary:active, .btn-demo:active,
.btn-ghost:active, .btn-secondary:active, .btn-login:active { transform: scale(0.97); }
/* Brand-tinted hover lift — primary tier only (reuses the #2D7FF9 / navy rgba already in site.css). */
.btn-teal:hover, .btn-primary:hover, .btn-demo:hover {
  box-shadow: 0 2px 4px rgba(16, 33, 60, 0.16), 0 14px 30px -8px rgba(45, 127, 249, 0.5);
}

/* ---- Frosted nav, intensified on scroll (nav is already position:sticky + blurred) ---- */
nav.main { transition: padding 0.2s, background 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease; }
nav.main.is-scrolled {
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(18px);
  backdrop-filter: saturate(1.2) blur(18px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 22px -14px rgba(16, 33, 60, 0.45);
}

/* ---- Reduced motion: disable everything above ---- */
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .lede, .hero-cta,
  h1.headline, h1.headline .reveal,
  .hero-preview, .hero-preview .hp-card,
  .reveal-up, .hero-visual {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    scale: none !important;
    animation: none !important;
  }
  nav.main { transition: none !important; }
  .btn-teal, .btn-primary, .btn-demo, .btn-ghost, .btn-secondary, .btn-login { transition: none !important; }
  .btn-teal:hover, .btn-primary:hover, .btn-demo:hover,
  .btn-ghost:hover, .btn-secondary:hover, .btn-login:hover,
  .btn-teal:active, .btn-primary:active, .btn-demo:active,
  .btn-ghost:active, .btn-secondary:active, .btn-login:active { transform: none !important; }
}


.card-illus { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); padding:4px 8px; margin-bottom:14px; border:1px dashed var(--line-strong); border-radius:6px; } /* illustrative-example tag on hero mock cards */


/* ===== STANDARD MODULE TEMPLATE — dark capabilities+stat, consistent rhythm, dark-on-dark separation ===== */
section.stat-ribbon{background:var(--navy-deep);color:var(--cream);padding:60px 0;border-top:0;border-bottom:0;}
.stat-ribbon .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.stat-ribbon .stat-item{display:flex;flex-direction:column;gap:8px;padding:0 24px;border-left:1px solid rgba(247,242,233,0.14);}
.stat-ribbon .stat-item:first-child{border-left:0;padding-left:0;}
.stat-ribbon .stat-item .v{font-family:'Fraunces',serif;font-weight:350;font-size:clamp(40px,4.6vw,60px);line-height:1;color:var(--cream);letter-spacing:-0.025em;}
.stat-ribbon .stat-item .v em{font-style:italic;color:var(--cream);}
.stat-ribbon .stat-item .l{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:color-mix(in srgb,var(--teal-soft) 55%,var(--cream));}
/* Mobile reflow for the stat ribbon — collapse the 4-col grid at narrow widths so nothing overflows (matches css/site.css) */
@media (max-width: 1024px) {
  .stat-ribbon .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .stat-ribbon .stat-item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
  .stat-ribbon .stat-grid { grid-template-columns: 1fr; }
  .stat-ribbon .stat-item { border-left: 0; padding-left: 0; padding-right: 0; padding-bottom: 24px; border-bottom: 1px solid rgba(247,242,233,0.14); }
  .stat-ribbon .stat-item:last-child { border-bottom: 0; padding-bottom: 0; }
}
/* Permit-types capability band — non-numeric value-prop strip in the dark ribbon slot */
.ptype-ribbon{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 18px;}
.ptype{font-family:'Fraunces',serif;font-weight:350;font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-0.02em;color:var(--cream);}
.ptype-sep{font-family:'Fraunces',serif;font-size:clamp(20px,2vw,26px);line-height:1;color:color-mix(in srgb,var(--teal-soft) 45%,var(--cream));opacity:0.55;}
/* Full-width capability closer card (gps-centrl "Public portal") — spans both columns, horizontal layout */
.cap.cap-wide{grid-column:1 / -1;display:flex;align-items:center;gap:28px;background:rgba(133,183,235,0.06);border-color:rgba(133,183,235,0.35);}
.cap.cap-wide:hover{border-color:var(--teal-soft);}
.cap-wide-head{flex:0 0 auto;min-width:200px;}
.cap-wide .cap-num{margin-bottom:8px;}
.cap-wide-head h4{margin-bottom:0;}
.cap-wide-body{flex:1;margin:0;}
@media (max-width:600px){.cap.cap-wide{flex-direction:column;align-items:flex-start;gap:16px;}.cap-wide-head{min-width:0;}}
.ptype-frame{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:color-mix(in srgb,var(--teal-soft) 55%,var(--cream));align-self:center;margin-left:6px;}

/* ===== What's-new dark split panel + CSS laptop frame (Work Centrl; mirrors work-centrl inline) ===== */
.whatsnew-panel{background:#0F2942;border-radius:24px;padding:40px;display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;}
.wn-copy .label{color:#85B7EB;}
.wn-copy .label::before{background:#85B7EB;}
.wn-copy h2{font-family:'Fraunces',serif;font-weight:350;color:#FFFFFF;font-size:clamp(28px,3.4vw,42px);line-height:1.06;letter-spacing:-0.02em;margin:16px 0 18px;}
.wn-copy h2 em{font-style:italic;color:#85B7EB;font-weight:350;}
.wn-copy p{font-family:var(--font-body);font-size:16px;line-height:1.6;color:#b9c8d6;margin:0;max-width:48ch;}
.wn-visual{margin:0;}
.laptop-frame{width:100%;max-width:560px;margin:0 auto;}
.laptop-lid{background:#0b1a2b;border:1px solid rgba(133,183,235,0.18);border-bottom:0;border-radius:10px 10px 0 0;padding:10px 10px 0;box-shadow:0 24px 50px -24px rgba(0,0,0,0.6);}
.laptop-lid img{display:block;width:100%;height:auto;border-radius:4px 4px 0 0;}
.laptop-base{position:relative;width:116%;margin-left:-8%;height:16px;background:linear-gradient(180deg,#c8cace 0%,#aaacb0 100%);border-radius:2px 2px 9px 9px;box-shadow:0 12px 22px -10px rgba(0,0,0,0.55);}
.laptop-base::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:66px;height:5px;background:rgba(0,0,0,0.16);border-radius:0 0 6px 6px;}
.wn-caption{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:color-mix(in srgb,#85B7EB 55%,#b9c8d6);text-align:center;margin:22px 0 0;}
@media (max-width:860px){
  .whatsnew-panel{grid-template-columns:1fr;gap:30px;padding:28px;}
  .laptop-frame{max-width:480px;}
}
/* Permit-centrl portal phone — empty device shell (clean neutral cream screen, awaiting a real screenshot) */
.phone-screen-empty{padding:0;min-height:580px;background:var(--paper);}
section.capabilities{background:var(--navy-deep);padding:100px 0 110px;}
.capabilities .label{color:var(--teal-soft);}
.capabilities .label::before{background:var(--teal-soft);}
.capabilities .section-title{color:var(--cream);}
.capabilities .section-title em{color:var(--teal-soft);}
.cap-head .lede{color:color-mix(in srgb,var(--teal-soft) 40%,var(--cream));}
.cap-grid{gap:16px;border:0;border-radius:0;overflow:visible;background:transparent;}
.cap{background:rgba(247,242,233,0.04);border:1px solid rgba(247,242,233,0.12);border-radius:14px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.cap::before{display:none;}
.cap:hover{transform:translateY(-3px);border-color:var(--teal-soft);background:rgba(247,242,233,0.06);box-shadow:0 16px 34px -18px rgba(0,0,0,0.55);}
.cap-icon{background:rgba(125,184,255,0.12);color:var(--teal-soft);}
.cap h4{color:var(--cream);}
.cap p{color:color-mix(in srgb,var(--teal-soft) 42%,var(--cream));}
.cap-num{color:var(--teal-soft);}
@media (prefers-reduced-motion:reduce){.cap,.cap:hover{transform:none;}}
.cap-cta-link{color:var(--cream);border-bottom-color:rgba(247,242,233,0.24);}
.cap-cta-link:hover{color:var(--teal-soft);border-color:var(--teal-soft);}
.cap-cta-divider,.cap-cta-sub{color:color-mix(in srgb,var(--teal-soft) 55%,var(--cream));}
.cap-cta-action{color:var(--teal-soft);}
.cap-inline-cta::before{background:rgba(125,184,255,0.40);}
section.record,section.workflow{padding:110px 0;}
section.stat-ribbon+section.capabilities,section.capabilities+section.record,section.capabilities+section.workflow{border-top:1px solid rgba(247,242,233,0.10);}
section.cta.cta-minimal{background:var(--paper);padding:56px 0 96px;}

/* EXTRAS-RHYTHM: light content + extra sections onto the spine 110px rhythm */
section.features,section.types,section.portal,section.product-spotlight,section.usecases,section.field,section.integrations,section.pillars,section.snow{padding:110px 0;}

/* INSET-PANEL RHYTHM (Work Centrl; mirrors work-centrl inline) — four stacked card panels (field / what's-new / integrations / cta) share one 72px gap; 110px above, 96px below. Last so it wins the cascade. */
section.field{background:transparent;}
.field-grid{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:64px;}
section.field{padding:110px 0 36px;}
section.product-spotlight{padding:36px 0;}
section.integrations{padding:36px 0;}
section.cta.cta-minimal{padding:36px 0 96px;}
section.cta.cta-minimal .cta-card{border-radius:24px;}
@media (max-width:600px){
  .field-grid{padding:48px 32px;}
  section.field{padding:64px 0 22px;}
  section.product-spotlight{padding:22px 0;}
  section.integrations{padding:22px 0;}
  section.cta.cta-minimal{padding:22px 0 64px;}
}

/* Clients page — "Select clients" 2-column roster grid (left 01–04 / right 05–08), collapses to 1 col on mobile */
.client-list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 64px; max-width: none; }
@media (max-width: 768px) { .client-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; column-gap: 0; } }

/* ===== Homepage module-grid card polish (mirrors index.html inline; module logos untouched) ===== */
.module { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s cubic-bezier(.2,.7,.3,1), border-color .2s cubic-bezier(.2,.7,.3,1); }
.module::before { display: none; }
.module:hover { border-color: #2D7FF9; transform: translateY(-5px); box-shadow: 0 18px 38px -18px rgba(45,127,249,0.32); }
.module:hover .m-top .icon-wrap .module-logo { transform: none; }
.m-index-num { color: #A9A79C; } /* resting numeral: visible warm-gray, subordinate to logo/lead-in */
.module:hover .m-index-num { color: #2D7FF9; }
.m-body .m-lead { font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.m-body p { color: #41506A; font-size: 13.5px; line-height: 1.55; letter-spacing: -0.01em; margin: 9px 0 0; text-wrap: balance; }
.m-link svg { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.module:hover .m-link svg, .module:focus-visible .m-link svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .module:hover { transform: none; } .module:hover .m-link svg { transform: none; } }

/* ===== Homepage trust strip — slim dark proof band under the hero (verified anchors + Esri credential) ===== */
.trust-strip { background: var(--navy-deep, #08101B); border-top: 1px solid rgba(247,242,233,0.08); padding: 20px 0; }
.trust-strip .container { display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap; }
.ts-item { display: flex; align-items: baseline; gap: 9px; }
.ts-num { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: var(--cream); }
.ts-lbl { font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--teal-soft); }
.ts-div { width: 1px; height: 22px; background: rgba(247,242,233,0.16); }
.ts-cred { align-items: center; gap: 9px; }
.ts-cred svg { color: #85B7EB; flex: none; }
.ts-cred-txt { font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--teal-soft); }
@media (max-width: 640px) { .trust-strip .container { gap: 16px 20px; } .ts-div { display: none; } }
/* Guard: keep trust-strip content clear of the bottom-right sticky demo button on narrow desktop. */
.trust-strip .container { max-width: 1180px; }
@media (min-width: 901px) and (max-width: 1180px) { .trust-strip .container { padding-right: 210px; } }

/* Homepage modules head — single column (stats moved to early trust strip) + tour sample clarifier */
.section-head-flex { margin-bottom: 64px; }
.section-head-flex p { max-width: 640px; }
.tour-sub { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink-mute); margin: 14px 0 0; max-width: 540px; }

/* Product-tour frame — calm "forthcoming" placeholder (mirrors index.html inline) */
.pv-coming { display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; padding: 24px; }
.pv-coming-ico { width: 34px; height: 34px; color: rgba(133, 183, 235, 0.45); }
.pv-coming-title { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: rgba(245, 242, 235, 0.64); }
.pv-coming-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(133, 183, 235, 0.55); }

/* ===== "What doesn't change" — dark premium panel (mirrors index.html inline) ===== */
section.why-traisr { padding: var(--section-y) 0; background: #0F2942; border-top: 0; border-bottom: 0; }
.why-head { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.why-head .label { color: #85B7EB; }
.why-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; letter-spacing: var(--tracking-display); color: var(--cream); margin-top: 20px; }
section.why-traisr .why-head h2 em { font-style: italic; color: #85B7EB; font-weight: 400; }
.why-head p { font-family: var(--font-body); font-size: var(--type-body); line-height: 1.5; color: rgba(247,242,233,0.7); margin-top: 22px; max-width: 580px; margin-left: auto; margin-right: auto; }
.why-panel { display: block; background: #15314D; border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; } /* editorial-band stack; bands handle their own layout (see index.html inline) */
.why-cell { position: relative; display: flex; flex-direction: column; padding: 40px 34px; border-radius: 12px; transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, background .2s ease; }
.why-cell + .why-cell { border-left: 1px solid rgba(255,255,255,0.10); }
.why-cell:hover { transform: translateY(-4px); background: rgba(45,127,249,0.06); box-shadow: inset 0 0 0 1px #2D7FF9, 0 18px 38px -20px rgba(0,0,0,0.55); }
@media (prefers-reduced-motion: reduce) { .why-cell, .why-cell:hover { transform: none; transition: box-shadow .2s ease, background .2s ease; } }
.wc-num { font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: #6F89AE; margin-bottom: 20px; }
.wc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wc-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #21405E 0%, #1A3650 100%); border: 1px solid rgba(133,183,235,0.30); border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); margin-bottom: 22px; }
.wc-icon .wc-mark { width: 28px; height: 28px; }
.why-cell h4 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--cream); margin: 0 0 10px; }
.wc-copy { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(247,242,233,0.76); margin: 0; flex: 1 0 auto; }
.wc-rule { display: block; height: 1px; background: rgba(255,255,255,0.10); margin: 22px 0 16px; }
.wc-instead { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: rgba(247,242,233,0.5); margin: 0; }
.wc-instead-lbl { color: #85B7EB; font-weight: 600; }
@media (max-width: 900px) { .why-panel { grid-template-columns: 1fr; } .why-cell + .why-cell { border-left: none; border-top: 1px solid rgba(255,255,255,0.10); } }

/* ===== Mobile hamburger + slide-down nav panel (site-wide) ===== */
.nav-burger {
  display: none; /* desktop shows the full menu; burger appears <=1024px */
  align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; margin-left: 4px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 10px; cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav-burger:hover { border-color: var(--teal-deep); }
.nav-burger:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.nav-burger .bar, .nav-burger .bar::before, .nav-burger .bar::after {
  display: block; width: 20px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .2s ease, background .2s ease;
}
.nav-burger .bar { position: relative; }
.nav-burger .bar::before, .nav-burger .bar::after { content: ""; position: absolute; left: 0; }
.nav-burger .bar::before { top: -6px; }
.nav-burger .bar::after  { top: 6px; }
nav.main.nav-open .nav-burger .bar { background: transparent; }
nav.main.nav-open .nav-burger .bar::before { transform: translateY(6px) rotate(45deg); }
nav.main.nav-open .nav-burger .bar::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-panel {
  display: none; flex-direction: column;
  padding: 6px 20px 22px;
  border-top: 1px solid var(--line);
  background: rgba(251, 248, 241, 0.98);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
nav.main.nav-open .mobile-panel { display: flex; }
.mobile-panel .mp-link {
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  color: var(--navy); text-decoration: none;
  padding: 14px 4px; border-bottom: 1px solid var(--line);
}
.mobile-panel .mp-link:hover { color: var(--teal-deep); }
.mobile-panel .mp-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.mobile-panel .mp-cta a { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .nav-burger .bar, .nav-burger .bar::before, .nav-burger .bar::after { transition: none; }
}
@media (max-width: 1024px) { .nav-burger { display: inline-flex; } }
@media (max-width: 600px) { nav.main .nav-cta { display: none; } } /* CTAs move into the panel on phones */


/* ===== SITE NAV POLISH (site-wide) ===== */
/* A — centered triad (desktop): logo left, links centered, actions right */
@media (min-width: 1025px) {
  nav.main .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  nav.main ul.menu { margin: 0; justify-self: center; }
  nav.main .nav-cta { justify-self: end; }
}
/* C — compact once scrolled (sticky/hairline/shadow already present) */
nav.main .container { transition: padding .18s ease; }
nav.main.is-scrolled .container { padding-top: 11px !important; padding-bottom: 11px !important; }
/* E — link hover/focus: accent + reveal underline (::before, no layout shift); top-level links only */
nav.main ul.menu > li > a { position: relative; transition: color .12s ease-out; }
nav.main ul.menu > li > a::before { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:center; transition:transform .12s ease-out; pointer-events:none; }
nav.main ul.menu > li > a:hover, nav.main ul.menu > li > a:focus-visible { color: var(--accent); }
nav.main ul.menu > li > a:hover::before, nav.main ul.menu > li > a:focus-visible::before { transform: scaleX(1); }
/* D — active page indicator */
nav.main ul.menu > li > a.is-current { color: var(--accent); }
nav.main ul.menu > li > a.is-current::before { transform: scaleX(1); }
.mobile-panel .mp-link.is-current { color: var(--accent); }
/* F — caret one step up + rotate when open */
nav.main ul.menu .has-drop::after { content: ""; display: inline-block; box-sizing: border-box; width: 7px; height: 7px; margin-left: 8px; margin-bottom: 1px; border: 2px solid var(--ink-soft); border-top: 0; border-left: 0; transform: rotate(45deg); transform-origin: center; transition: transform .15s ease; vertical-align: middle; }
nav.main ul.menu .mega-wrap:hover .has-drop::after, nav.main ul.menu .mega-wrap:focus-within .has-drop::after { transform: rotate(225deg); }
/* F — dropdown: house language, anchored centered under the nav, faster open, numerals */
.mega-wrap { position: relative; }
.mega { left: 0; right: auto; top: calc(100% + 41px); width: 780px; max-width: calc(100vw - 32px); padding: 18px; grid-template-columns: repeat(4, 1fr); gap: 10px 20px; transform: translateY(-6px); border: 1px solid var(--line); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; }
.mega-wrap:hover .mega, .mega-wrap:focus-within .mega { transform: translateY(0); }
.mega-wrap.is-collapsed .mega { opacity: 0 !important; visibility: hidden !important; transform: translateY(-6px) !important; }
.mega-item { position: relative; padding: 10px 12px; }
nav.main ul.menu > li > a.has-drop::before { right: 18px; } /* cap active/hover underline to text, exclude caret */
@media (min-width: 1025px) and (max-width: 1120px) { .mega { left: -40px; } } /* keep the panel on-screen at narrow desktop */
@media (min-width: 1025px) and (max-width: 1100px) { .mega { top: calc(100% + 47px); } } /* brand logo is smaller here, so the li anchor sits higher — bump to keep the 8-12px gap */
.mega-num { font-family:'Fraunces',serif; font-weight:400; font-size:13px; color:var(--accent); letter-spacing:-0.01em; font-feature-settings:'lnum'; margin-right:10px; flex-shrink:0; }
[data-theme="dark"] .mega-num { color: var(--teal-deep); }
@media (prefers-reduced-motion: reduce) {
  nav.main ul.menu > li > a::before, nav.main .container, nav.main ul.menu .has-drop::after, .mega { transition: none; }
  nav.main ul.menu > li > a.is-current::before { transform: scaleX(1); }
  nav.main ul.menu .mega-wrap:hover .has-drop::after, nav.main ul.menu .mega-wrap:focus-within .has-drop::after { transform: rotate(45deg); }
}
/* ===== END SITE NAV POLISH ===== */

/* @mobile-foundations:start */
/* ── MOBILE FOUNDATIONS · Stage 1 (shared chrome only) ──────────────────────
   Tap targets >=44px, premium hamburger + restrained menu entrance, footer
   tap areas, and media overflow guards. Scoped to mobile breakpoints so the
   desktop composition is untouched. Mirrored byte-for-byte into every page as
   <style id="mobile-foundations"> (placed last so it wins over inline mirrors). */
@keyframes mfPanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1024px) {
  /* media never overflows its column */
  img, svg, video, canvas { max-width: 100%; }
  img { height: auto; }
  /* premium menu button — >=44px tap target */
  .nav-burger { width: 46px; height: 46px; border-radius: 12px; margin-left: 6px; }
  /* restrained slide-in on open (open-smooth, no jarring jump) */
  .mobile-panel { padding: 4px 20px 26px; }
  nav.main.nav-open .mobile-panel { animation: mfPanelIn .3s cubic-bezier(.22,.61,.36,1) both; }
  .mobile-panel .mp-link { display: flex; align-items: center; min-height: 46px; padding: 13px 4px; font-size: 17px; letter-spacing: -0.01em; }
  .mobile-panel .mp-cta { gap: 12px; margin-top: 20px; }
  .mobile-panel .mp-cta a { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 768px) {
  /* buttons — Apple 44px minimum */
  .btn-primary, .btn-secondary, .btn-ghost, .btn-teal, .btn-demo, .btn-login,
  .hero .btn-primary, .hero .btn-ghost, .cta-actions a, .cta-form button { min-height: 48px; }
  /* footer — larger tap areas + comfortable column rhythm */
  footer ul.links a, .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .socials a { width: 44px; height: 44px; }
  .foot-grid { gap: 34px 40px; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  nav.main.nav-open .mobile-panel { animation: none; }
}
/* @mobile-foundations:end */