/* ==========================================================================
   Motorsport IT Systems — shared stylesheet

   Themed to match MAP (Motorsport Assembly Platform) itself: the same
   palette, typeface (Inter), radii, buttons, pills, cards and focus rings
   as MAP's client/src/components/Layout.css, so a customer moving between
   the website and the app sees one brand. Only the theming is MAP's: the
   layout stays a conventional marketing site (top nav, hero, sections,
   multi-column footer).

   Contents
     1. Fonts
     2. Tokens (dark default, light via OS preference or the toggle)
     3. Base elements, focus, utilities
     4. Header and navigation
     5. Buttons
     6. Hero, eyebrow, sections
     7. Grids, cards, stats
     8. MAP components: .screen, .split, .pill, .ticks, .app-grid, .chequer
     9. Tables
    10. Pricing (legacy pricing.html classes)
    11. Feature rows, team, values, CTA banner
    12. Forms and contact details
    13. Long-form text (.prose), footer, 404
    14. Responsive
   ========================================================================== */

/* ---------------- 1. Fonts ----------------
   Inter, self-hosted from assets/fonts/ (copied from MAP's own
   @fontsource/inter package; SIL Open Font License, see
   assets/fonts/OFL.txt). No Google Fonts request, as in MAP. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-800-normal.woff2") format("woff2");
}

/* ---------------- 2. Tokens ----------------
   Palette values are MAP's (Layout.css + "Icons and Logos/
   mits-map-colour-palette.csv"); MAP's own names are in the comments.
   Each theme block re-declares the palette only. The derived tokens in
   the second half of :root are written in terms of the palette, and since
   every block applies to the same <html> element they pick up whichever
   theme is active without being repeated. */

:root {
  /* Palette: dark is the default */
  --bg: #0b161b;            /* MAP --paper */
  --bg-alt: #101c22;        /* alternate section band */
  --surface: #16232a;       /* MAP --surface: cards, panels */
  --surface-2: #1d2b33;     /* recessed or raised tone on a surface */
  --border: #24343c;        /* MAP --border */
  --text: #ffffff;          /* MAP --ink */
  --text-muted: #93a3aa;    /* MAP --muted */
  --accent: #00c2ff;
  --accent-hover: #33cfff;
  --on-accent: #04222b;     /* text on a solid --accent fill */
  --success: #4ade80;
  --success-text: #4ade80;  /* --success as text: already 7:1+ in dark */
  --warning: #e3a83b;
  --warning-text: #e3a83b;
  --danger: #ff6b6b;
  --danger-text: #ff8a8a;
  --accent-grey: #8c9398;   /* the logo's "sprite grey" */
  --bg-rgb: 11, 22, 27;
  --accent-rgb: 0, 194, 255;
  --hero-glow-opacity: 0.16;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5);
  color-scheme: dark;

  /* Derived and theme-independent */
  --accent-2: var(--accent);            /* old name, kept working */
  --accent-2-rgb: var(--accent-rgb);    /* old name, kept working */
  --accent-grey-rgb: 140, 147, 152;
  --danger-hover: var(--danger-text);   /* old name, kept working */
  --hover-tint: color-mix(in srgb, var(--text) 6%, transparent);
  --field-invalid-fill: color-mix(in srgb, var(--danger) 8%, var(--surface));
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 8px;            /* cards, panels (MAP --radius-lg) */
  --radius-sm: 4px;         /* controls: buttons, fields (MAP --radius) */
  --radius-pill: 999px;
  --focus-ring: 2px solid var(--accent);
  --max-width: 1140px;
  --header-h: 72px;
  --duration-fast: 120ms;
  --duration-base: 150ms;
}

/* Light palette: applied when the OS prefers light and no explicit
   override is set, and always when data-theme="light" is set (by
   js/theme-init.js from the saved choice, or the toggle in js/main.js). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f8f9;
    --bg-alt: #ecf1f3;
    --surface: #ffffff;
    --surface-2: #eef3f5;
    --border: #dce3e6;
    --text: #0e1c22;
    --text-muted: #55666d;
    --accent: #00637f;
    --accent-hover: #004f66;
    --on-accent: #ffffff;
    --success: #2f9e5b;
    --success-text: #1f6e3f;
    --warning: #c67c1f;
    --warning-text: #8a5413;
    --danger: #c63737;
    --danger-text: #a82a2a;
    --bg-rgb: 245, 248, 249;
    --accent-rgb: 0, 99, 127;
    --hero-glow-opacity: 0.2;
    --shadow: 0 8px 24px rgba(14, 28, 34, 0.08);
    --shadow-sm: 0 1px 2px rgba(14, 28, 34, 0.08);
    --shadow-card: 0 1px 1px rgba(9, 30, 66, 0.12), 0 0 1px rgba(9, 30, 66, 0.2);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f5f8f9;
  --bg-alt: #ecf1f3;
  --surface: #ffffff;
  --surface-2: #eef3f5;
  --border: #dce3e6;
  --text: #0e1c22;
  --text-muted: #55666d;
  --accent: #00637f;
  --accent-hover: #004f66;
  --on-accent: #ffffff;
  --success: #2f9e5b;
  --success-text: #1f6e3f;
  --warning: #c67c1f;
  --warning-text: #8a5413;
  --danger: #c63737;
  --danger-text: #a82a2a;
  --bg-rgb: 245, 248, 249;
  --accent-rgb: 0, 99, 127;
  --hero-glow-opacity: 0.2;
  --shadow: 0 8px 24px rgba(14, 28, 34, 0.08);
  --shadow-sm: 0 1px 2px rgba(14, 28, 34, 0.08);
  --shadow-card: 0 1px 1px rgba(9, 30, 66, 0.12), 0 0 1px rgba(9, 30, 66, 0.2);
  color-scheme: light;
}

/* ---------------- 3. Base ---------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* In-page anchors land below the sticky header, not under it. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

p { margin: 0 0 1em; color: var(--text-muted); }

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

/* Links inside running text are underlined, not told apart by colour
   alone (WCAG 1.4.1): the accent and the muted body text are too close
   in lightness for colour to do it. Navigation lists and buttons opt out. */
main :where(p, li, td, dd, figcaption, address) a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
main :where(p, li, td, dd, figcaption, address) a:not(.btn):hover {
  text-decoration-thickness: 2px;
}

img,
svg,
video {
  max-width: 100%;
}
img {
  display: block;
  height: auto;
}

ul { padding-left: 1.2em; color: var(--text-muted); }

strong, b { font-weight: 600; color: var(--text); }

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Keyboard focus: MAP's 2px accent ring on everything focusable. Zero
   specificity, so a component's own focus rule still wins. */
:where(a[href], button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
:where(input, select, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}
/* The skip link's target is focused by script, never by Tab. */
main:focus {
  outline: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

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

/* "Skip to main content": the first Tab stop on every page (injected
   with the header), out of sight until focused. */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  z-index: 300;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.9375rem;
  transform: translateY(-250%);
}
.skip-link:focus {
  transform: none;
  text-decoration: none;
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ---------------- 4. Header / nav ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(var(--bg-rgb), 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--bg); }
}

.header-inner,
.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text);
}
.brand:hover { text-decoration: none; color: var(--text); }

.logo-full {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

/* Theme-aware brand marks: each logo ships as a dark-theme and a
   light-theme PNG (assets/brand/), one of them hidden. */
.logo-light { display: none; }
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }
/* Before/without js/theme-init.js: follow the OS. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .logo-dark { display: none; }
  :root:not([data-theme]) .logo-light { display: block; }
}

.main-nav {
  margin-right: 1rem;
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a:not(.btn) {
  display: inline-block;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.main-nav a:not(.btn):hover {
  color: var(--text);
  text-decoration: none;
}
.main-nav a.active,
.main-nav a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
/* The CTA's copy inside the phone menu; the desktop one is .nav-cta. */
.main-nav .nav-cta-item { display: none; }

/* Right-hand group: [menu button] nav, theme toggle, CTA. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-cta {
  display: inline-flex;
}

/* Icon buttons in the header: round, like MAP's own header controls. */
.theme-toggle,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.theme-toggle:hover,
.nav-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.theme-toggle svg { width: 18px; height: 18px; }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle { display: none; }

.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ---------------- 5. Buttons ----------------
   MAP's buttons, at marketing-site size: 4px radius, a solid accent
   primary with --on-accent text, a surface secondary whose border turns
   accent on hover, and the 2px accent focus ring. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover:where(:not(:disabled)) {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover:where(:not(:disabled)) {
  border-color: var(--accent);
  color: var(--text);
}

.btn-sm {
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
}

/* ---------------- 6. Hero, eyebrow, sections ---------------- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 5.5rem 0 4.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero .container {
  position: relative;
  z-index: 1;
}

/* Two soft ambient glows (grey bottom-left, accent top-right), as
   separate elements so they can breathe slowly where motion is welcome. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  left: -8%;
  bottom: -18%;
  width: 46%;
  background: radial-gradient(circle, rgba(var(--accent-grey-rgb), 0.12), transparent 70%);
}
.hero::after {
  top: -14%;
  right: -6%;
  width: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), var(--hero-glow-opacity)), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before,
  .hero::after {
    animation: hero-glow-breathe 10s ease-in-out infinite;
  }
  .hero::before { animation-delay: -5s; }
}
@keyframes hero-glow-breathe {
  0%, 100% { transform: scale(0.92); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}

.hero.small { padding: 3.75rem 0 3.25rem; }

.hero h1 { max-width: 760px; }

.lead,
.hero p.lead {
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 640px;
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* The logo's byline ("IT SYSTEMS", "BY MOTORSPORT IT SYSTEMS"): wide-
   tracked uppercase in the accent, trailed by a short fading chequer that
   sits inline after the last word (so it follows the text when it wraps). */
.eyebrow {
  display: block;
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.eyebrow::after {
  content: "";
  display: inline-block;
  vertical-align: 0.1em;
  margin-left: 0.3rem;
  width: 2.5rem;
  height: 6px;
  background: conic-gradient(currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0) 0 0 / 6px 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 10%, transparent);
  mask-image: linear-gradient(90deg, #000 10%, transparent);
}

section {
  padding: 4.5rem 0;
}

section.alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-head {
  max-width: 680px;
  margin-bottom: 2.5rem;
}
.section-head > :last-child { margin-bottom: 0; }

/* ---------------- 7. Grids, cards, stats ---------------- */

.grid {
  display: grid;
  gap: 1.5rem;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* MAP's content card: a surface floating on the page. Static cards don't
   react to the pointer (nothing to click); a card that IS a link does. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast) ease, transform var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}
a.card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.card .icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  font-weight: 700;
}
.card .icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 { margin-bottom: 0.5rem; }
.card p { margin-bottom: 0; }
.card > :last-child { margin-bottom: 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.stat .num {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.stat .label {
  display: block;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------------- 8. MAP components ---------------- */

/* App screenshot in a MAP-style window frame.
   <figure class="screen"><div class="screen-frame"><div class="screen-bar">
   <i></i><i></i><i></i><span>Title</span></div><picture>..</picture></div>
   <figcaption>..</figcaption></figure>                                   */
.screen {
  margin: 0;
  min-width: 0;
}
.screen-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.screen-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.screen-bar i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 20%, var(--surface-2));
}
.screen-bar span {
  min-width: 0;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.screen picture,
.screen img {
  display: block;
  width: 100%;
  height: auto;
}
.screen figcaption {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Phone capture (390x844): a slim device bezel instead of the bar. */
.screen--phone {
  max-width: 300px;
  margin-inline: auto;
}
.screen--phone .screen-frame {
  border: 8px solid color-mix(in srgb, var(--text) 12%, var(--surface));
  border-radius: 32px;
  background: #0b161b;
}
.screen--phone figcaption { text-align: center; }

/* Legacy demo frame (pre-refresh software.html); same look as .screen. */
.demo-frame {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
}
.demo-frame img {
  width: 100%;
  display: block;
}
.demo-frame-caption {
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Text beside media; stacks (text first) on narrower screens.
   .split--reverse puts the media first on desktop. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--reverse {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.split--reverse .split-media { order: -1; }
.split + .split { margin-top: clamp(3.5rem, 8vw, 6rem); }
.split-text,
.split-media { min-width: 0; }
.split-text > :last-child { margin-bottom: 0; }

/* Status pills, as MAP's Badge: a tint of the hue mixed over --surface
   (opaque, so the text keeps its contrast on any ground) with the hue's
   text colour. Every tone clears 4.5:1 in both themes. */
.pill {
  --pill-hue: var(--text-muted);
  --pill-strength: 15%;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--pill-hue) var(--pill-strength), var(--surface));
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}
.pill--accent {
  --pill-hue: var(--accent);
  --pill-strength: 18%;
  color: var(--accent);
}
.pill--success {
  --pill-hue: var(--success);
  --pill-strength: 18%;
  color: var(--success-text);
}
.pill--warning {
  --pill-hue: var(--warning);
  --pill-strength: 18%;
  color: var(--warning-text);
}
.pill--danger {
  --pill-hue: var(--danger);
  --pill-strength: 18%;
  color: var(--danger-text);
}

/* Tick list: an accent tick in a tinted disc, drawn in CSS. */
.ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.6rem;
}
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.175em;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: 0.46em;
  top: 0.4em;
  width: 0.32em;
  height: 0.62em;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* The apps as tiles, like MAP's home screen (PageTileGrid.css). */
.app-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.app-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.app-tile h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
.app-tile p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Only a tile that links somewhere reacts to the pointer. */
a.app-tile,
.app-tile:has(a) {
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}
a.app-tile { text-decoration: none; }
a.app-tile:hover,
.app-tile:has(a):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.app-icon {
  display: flex;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--accent);
}
.app-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Decorative two-row chequer strip from the logos, fading left to right.
   Gradients only. Size with --chequer-size (one square), width as needed. */
.chequer {
  --chequer-size: 6px;
  --chequer-colour: var(--accent);
  display: block;
  width: 100%;
  height: calc(var(--chequer-size) * 2);
  background: conic-gradient(var(--chequer-colour) 25%, transparent 0 50%, var(--chequer-colour) 0 75%, transparent 0)
    0 0 / calc(var(--chequer-size) * 2) calc(var(--chequer-size) * 2);
  -webkit-mask-image: linear-gradient(90deg, #000 5%, transparent);
  mask-image: linear-gradient(90deg, #000 5%, transparent);
}

/* ---------------- 9. Tables ----------------
   <div class="table-wrap"><table>..</table></div>: scrolls sideways
   inside itself on a narrow screen rather than widening the page. For
   keyboard users give the wrapper tabindex="0", role="region" and an
   aria-label when it can scroll. Right-align figures with .num-cell. */

.table-wrap {
  --scroll-shade: color-mix(in srgb, var(--text) 22%, transparent);
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  /* A shade at whichever edge has more columns to scroll to (CSS only:
     the "local" covers scroll with the content and hide the shades once
     an edge is reached). */
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shade), transparent) left center / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), transparent) right center / 0.75rem 100% no-repeat scroll,
    var(--surface);
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.table-wrap caption {
  padding: 0.85rem 1rem 0.25rem;
  text-align: left;
  font-weight: 600;
  color: var(--text);
}
.table-wrap th,
.table-wrap td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.table-wrap thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  background: var(--surface-2);
  vertical-align: bottom;
}
.table-wrap tbody th { font-weight: 600; }
.table-wrap tbody tr:last-child > * { border-bottom: 0; }
.table-wrap tbody tr {
  transition: background-color var(--duration-fast) ease;
}
.table-wrap tbody tr:hover { background: var(--hover-tint); }
.table-wrap tfoot th,
.table-wrap tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  border-bottom: 0;
}
.table-wrap :is(th, td).num-cell,
.table-wrap :is(th, td).num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.table-wrap:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ---------------- 10. Pricing (legacy classes) ---------------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
  position: relative;
}
.price-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}

.price-card .badge {
  position: absolute;
  top: -12px;
  left: 1.75rem;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
}

.price-card .tier-name { font-size: 0.875rem; margin-bottom: 0; }
.price-card .tier-desc { font-size: 0.875rem; margin-bottom: 0; min-height: 3.4em; }

.price-card .price {
  margin: 1.1rem 0 0.25rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.price-card .price .from {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: flex-start;
  margin-top: 0.3rem;
}
.price-card .price .amount {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.price-card .price .period {
  color: var(--text-muted);
  font-size: 0.875rem;
}
.price-card .price-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.price-card ul.includes {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.6rem;
  flex-grow: 1;
}
.price-card ul.includes li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text);
  font-size: 0.875rem;
}
.price-card ul.includes li::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.3em;
  width: 0.32em;
  height: 0.62em;
  border: solid var(--success-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.price-card .btn { margin-top: auto; }

.addon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.addon-row:last-child { border-bottom: none; }
.addon-row h3 { margin-bottom: 0.25rem; }
.addon-row p { margin-bottom: 0; }
.addon-row .addon-price {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 1.05rem;
}
.addon-row .addon-price span {
  display: block;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table-scroll { overflow-x: auto; }
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  min-width: 560px;
}
.pricing-table th,
.pricing-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.pricing-table th {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.pricing-table th:first-child,
.pricing-table td:first-child {
  text-align: left;
  color: var(--text);
  font-weight: 600;
}
.pricing-table .yes { color: var(--success-text); font-weight: 700; }
.pricing-table .dash { color: var(--text-muted); }

.price-tag {
  display: inline-block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.price-tag .period {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* ---------------- 11. Feature rows, team, values, CTA ---------------- */

.feature-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
}
.feature-row:last-child { border-bottom: none; }
.feature-row h3 {
  color: var(--text);
  margin-bottom: 0.25rem;
}
.feature-row .tag {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
}

.team-card { text-align: center; }
.avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}
.team-card h3 { margin-bottom: 0.15rem; }
.team-card .role {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  display: block;
}

.value-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.value-item .num {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  min-width: 2.2rem;
}

/* A dark brand band in both themes: it re-declares the dark palette for
   everything inside it, so buttons, eyebrows and text inside follow. */
.cta-banner {
  --bg: #0b161b;
  --surface: #16232a;
  --surface-2: #1d2b33;
  --border: #24343c;
  --text: #ffffff;
  --text-muted: #93a3aa;
  --accent: #00c2ff;
  --accent-hover: #33cfff;
  --on-accent: #04222b;
  --focus-ring: 2px solid #00c2ff;
  color-scheme: dark;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(0, 194, 255, 0.16), transparent 70%),
    linear-gradient(135deg, #16232a, #0b161b);
  padding: 3rem;
  text-align: center;
  color: var(--text);
}
.cta-banner h2 { margin-bottom: 0.5rem; }
.cta-banner p { max-width: 560px; margin: 0 auto 1.5rem; }
.cta-banner .hero-actions { justify-content: center; margin-top: 0; }

/* ---------------- 12. Forms and contact details ---------------- */

form {
  display: grid;
  gap: 1.25rem;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.form-group { min-width: 0; }
label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--text);
}
.form-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
input,
textarea,
select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  color: var(--text);
  font-family: inherit;
  /* 16px minimum keeps iOS Safari from zooming the page on focus. */
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--duration-fast) ease;
}
input:hover,
textarea:hover,
select:hover {
  border-color: var(--accent);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
}
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--accent);
}
textarea { resize: vertical; min-height: 140px; }

/* Honeypot field on the contact form. Hidden from people without using
   display:none or [hidden], which the simpler bots know to skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-error {
  color: var(--danger-text);
  font-size: 0.8125rem;
  margin-top: 0.3rem;
  display: none;
}
.invalid input,
.invalid textarea,
.invalid select {
  border-color: var(--danger);
  background-color: var(--field-invalid-fill);
}
.invalid .field-error { display: block; }

.form-status {
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font-size: 0.9375rem;
  display: none;
}
.form-status.show { display: block; }
.form-status.success {
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  border: 1px solid var(--success);
  color: var(--success-text);
}
.form-status.error {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid var(--danger);
  color: var(--danger-text);
}

.required { color: var(--danger-text); }

.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.contact-info-item .icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.contact-info-item .icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-info-item h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.contact-info-item p { margin-bottom: 0; }

/* ---------------- 13. Prose, footer, 404 ---------------- */

/* Long-form text (privacy policy and the like). */
.prose {
  max-width: 760px;
}
.prose h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 0.75rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.5rem;
}
.prose ul { margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.prose .note {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.9375rem;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 3.5rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 0.9fr)) minmax(0, 2.1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.footer-about p {
  margin: 1rem 0 1.25rem;
  max-width: 340px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.footer-map {
  display: inline-block;
}
.footer-map img {
  height: 52px;
  width: auto;
}

.footer-heading,
.footer-grid h4 {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  margin: 0 0 1rem;
}

.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.6rem; line-height: 1.4; }
.footer-grid a { color: var(--text-muted); font-size: 0.9rem; }
.footer-grid a:hover { color: var(--text); }

.footer-contact address { font-style: normal; }
.footer-contact li {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.footer-contact-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
}
.footer-contact a { overflow-wrap: anywhere; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.footer-bottom a { color: var(--text-muted); }
.footer-bottom a:hover { color: var(--text); }
.footer-bottom .legal-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
/* Company details UK law requires on a company website (Companies House trading
   disclosures): registered name, number, place of registration, registered office. */
.footer-legal {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.error-page {
  text-align: center;
  padding: 6rem 0 6.5rem;
}
.error-page .code {
  font-size: clamp(4.5rem, 3rem + 7vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
  margin: 0 0 1rem;
}
.error-page .chequer {
  max-width: 220px;
  margin: 0 auto 2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30% 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30% 70%, transparent);
}
.error-page .lead { margin: 0 auto; max-width: 500px; }
.error-page .hero-actions { justify-content: center; }

/* ---------------- 14. Responsive ---------------- */

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / span 2; }
  .footer-contact { grid-column: 3; grid-row: 1; }
}

/* Header folds into a menu below 900px. */
@media (max-width: 900px) {
  /* Drawn rightmost, though it comes first in the source (see header.js). */
  .nav-toggle { display: inline-flex; order: 1; }
  .nav-cta { display: none; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: hidden;
    /* Hidden from Tab and screen readers while closed, not just clipped. */
    visibility: hidden;
    transition: max-height 0.25s ease, visibility 0s linear 0.25s;
  }
  .main-nav.open {
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    visibility: visible;
    transition: max-height 0.25s ease, visibility 0s;
    /* Dim the page under the open menu (a tap there closes it); clipped
       so the scrim only falls below the panel, never over the header. */
    box-shadow: 0 0 0 100vmax rgba(4, 10, 13, 0.55);
    clip-path: inset(0 0 -100vmax 0);
  }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.5rem 1.5rem 1.5rem;
  }
  .main-nav li { border-bottom: 1px solid var(--border); }
  .main-nav a:not(.btn) {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 0;
    font-size: 1rem;
  }
  .main-nav a.active,
  .main-nav a[aria-current="page"] {
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
    padding-left: 0.85rem;
  }
  .main-nav .nav-cta-item {
    display: block;
    border-bottom: 0;
    padding-top: 1.25rem;
  }
  .main-nav .nav-cta-item .btn { width: 100%; }

  .grid-3,
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split,
  .split--reverse { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split-media { order: 0; }
}

@media (max-width: 767.98px) {
  /* MAP's phone layout for its app tiles: a list, icon beside the text. */
  .app-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
  .app-tile {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 0.15rem 0.9rem;
    padding: 0.85rem 1rem;
  }
  .app-tile .app-icon { grid-row: span 2; }
  .app-tile > :not(.app-icon) { grid-column: 2; }
}

@media (max-width: 720px) {
  .grid-3,
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .feature-row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .cta-banner { padding: 2.25rem 1.25rem; }
  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .addon-row { grid-template-columns: minmax(0, 1fr); }
  .addon-row .addon-price { text-align: left; }

  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .footer-about,
  .footer-contact { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Tighter phones. */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .main-nav ul { padding: 0.5rem 1rem 1.25rem; }

  .logo-full { height: 28px; }

  .eyebrow { letter-spacing: 0.2em; }

  .hero { padding: 3rem 0 2.75rem; }
  .hero.small { padding: 2.5rem 0 2.25rem; }
  .lead,
  .hero p.lead { font-size: 1.05rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }

  section { padding: 3rem 0; }
  .section-head { margin-bottom: 1.75rem; }

  .card { padding: 1.35rem; }

  .stats { gap: 1rem; }
  .stat .num { font-size: 1.75rem; }
  .stat .label { font-size: 0.75rem; letter-spacing: 0.06em; }

  .table-wrap th,
  .table-wrap td { padding: 0.65rem 0.75rem; }
  .table-wrap table { font-size: 0.875rem; }

  .footer-grid a,
  .footer-contact li { font-size: 0.875rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .footer-bottom .legal-links a { margin-left: 0; }

  .cta-banner { padding: 1.75rem 1rem; }

  .pricing-table { font-size: 0.8rem; }
  .pricing-table th,
  .pricing-table td { padding: 0.65rem 0.6rem; }

  .price-card { padding: 1.35rem; }

  .demo-frame-caption { padding: 0.75rem 1rem; }

  .error-page { padding: 4rem 0; }
}

/* Motion: everything above that moves is decorative, so it stops for
   people who ask for less of it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  a.card:hover,
  a.app-tile:hover,
  .app-tile:has(a):hover { transform: none; }
}