/* Kosmos brand tokens — from PDF brand pack v1.0 */
:root {
  /* Colour */
  --ink: #0E0E0C;
  --paper: #F2EFE8;
  --signal: #3CFF7A;
  --rule-light: rgba(14,14,12,0.12);
  --rule-dark: rgba(242,239,232,0.18);
  --dim-light: rgba(14,14,12,0.55);
  --dim-dark: rgba(242,239,232,0.55);

  /* Type */
  --grotesk: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "EB Garamond", "Times New Roman", serif;

  /* Motion */
  --t-instant: 80ms;
  --t-quick: 180ms;
  --t-page: 320ms;
  --ease: cubic-bezier(.2,0,0,1);

  /* Radius (default 0 — pill only for tags) */
  --r-0: 0;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Responsive layout — content caps at 1140px and centres; the side
     gutter grows to fill wider viewports (1440 / 1920) so content never
     spans edge-to-edge. --gutter is the minimum gutter, tuned per breakpoint. */
  --content-max: 1140px;
  --gutter: 96px;
  --pad-x: max(var(--gutter), calc((100% - var(--content-max)) / 2));
}

/* Reset within the artboards */
.kosmos-page, .kosmos-page * { box-sizing: border-box; }
.kosmos-page {
  font-family: var(--grotesk);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
/* Form controls fill their column and never force horizontal overflow */
.kosmos-page input, .kosmos-page textarea, .kosmos-page select {
  width: 100%; min-width: 0; box-sizing: border-box;
}
.kosmos-page--dark { background: var(--ink); color: var(--paper); }

/* Wordmark — bicolour split: Bold + Regular */
.km-wordmark {
  font-family: var(--grotesk);
  letter-spacing: -0.04em;
  font-weight: 400;
  white-space: nowrap;
}
.km-wordmark b { font-weight: 700; letter-spacing: -0.04em; }

/* Monogram */
.km-monogram {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  font-family: var(--grotesk);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
}
.km-monogram > span { display: grid; place-items: center; aspect-ratio: 1/1; }
.km-monogram .k { background: var(--ink); color: var(--paper); }
.km-monogram .h { background: var(--signal); color: var(--ink); }
.km-monogram--inv .k { background: var(--paper); color: var(--ink); }

/* Mono caption — always uppercase, tracked out */
.km-cap {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 11px;
  font-weight: 400;
}
.km-cap--lg { font-size: 13px; }

/* Counterpoint italic */
.km-counter { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Headlines */
.km-h1 { font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; text-wrap: balance; }
.km-h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.0; text-wrap: balance; }
.km-h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.km-body { font-weight: 400; line-height: 1.5; max-width: 60ch; }

/* Buttons */
.km-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: var(--grotesk); font-weight: 500; font-size: 15px; letter-spacing: -0.01em;
  cursor: pointer; transition: background var(--t-instant) var(--ease);
}
.km-btn:hover { background: #1a1a17; }
.km-btn--signal { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.km-btn--signal:hover { background: #2af069; }
.km-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.km-btn-arrow { display: inline-block; transition: transform var(--t-instant) var(--ease); }
.km-btn:hover .km-btn-arrow { transform: translateX(3px); }

.km-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--t-instant) var(--ease);
}
.km-link:hover { opacity: 0.7; }

/* Signal dot */
.km-dot {
  display: inline-block; width: 8px; height: 8px; background: var(--signal);
  border-radius: 50%; vertical-align: middle;
}
.km-dot--pulse { animation: km-pulse 2s ease-in-out infinite; }
@keyframes km-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Hairline rule */
.km-rule { border: 0; border-top: 1px solid var(--rule-light); }
.kosmos-page--dark .km-rule { border-top-color: var(--rule-dark); }

/* Sticky nav (shared idea) */
.km-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad-x);
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  border-bottom: 1px solid var(--rule-light);
}
.kosmos-page--dark .km-nav {
  background: color-mix(in oklab, var(--ink) 90%, transparent);
  border-bottom-color: var(--rule-dark);
}
.km-nav__links { display: flex; gap: 28px; align-items: center; font-size: 14px; }
.km-nav__links a { color: inherit; text-decoration: none; opacity: 0.75; transition: opacity var(--t-instant) var(--ease); }
.km-nav__links a:hover { opacity: 1; }

/* Tag (the only place we use the pill radius) */
.km-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 10px;
  border: 1px solid currentColor;
}

/* Imagery placeholder — diagrammatic, never fake-3D */
.km-placeholder {
  position: relative;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  display: grid; place-items: center;
  overflow: hidden;
  border: 1px solid var(--rule-dark);
}
.km-placeholder--paper {
  background: var(--paper); color: var(--ink);
  border-color: var(--rule-light);
}
.km-placeholder::before {
  content: ""; position: absolute; inset: 12px;
  border: 1px dashed currentColor; opacity: 0.3;
}

/* === Global hover language: green is the only light. === */
.kosmos-page--dark .km-row {
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.kosmos-page--dark .km-row:hover {
  background: rgba(60,255,122,0.06);
}
.kosmos-page--dark .km-row:hover .km-row__marker {
  color: var(--signal);
  opacity: 1;
}
.kosmos-page--dark .km-cell-kosmos {
  background: var(--signal);
  color: var(--ink);
}
.kosmos-page--dark .km-tile {
  transition: background var(--t-quick) var(--ease);
}
.kosmos-page--dark .km-tile:hover {
  background: #14140f;
}
.kosmos-page--dark .km-tile:hover .km-tile__stat {
  color: var(--ink) !important;
  background: var(--signal);
  padding: 4px 10px;
}

/* Step rows — the big index number flips to ink-on-green on hover so it
   stays legible instead of blocking out against the green wash.
   !important is required: the number carries an inline color:var(--signal)
   which would otherwise win and render green-on-green. */
.kosmos-page--dark .km-step:hover .km-step__num {
  color: var(--ink) !important;
  background: var(--signal);
}

/* CRT counter accent — use anywhere a number needs to land green */
.km-counter { color: var(--signal); }

/* Mark — inline highlight */
.km-mark { color: var(--signal); }

/* Second-half grids — class-based desktop templates so mobile overrides
   never fight inline styles (inline grid-template-columns has been removed
   from these blocks; only display:grid stays inline). */
.km-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.km-diff__tile { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.km-diff__tile > * { min-width: 0; }
.km-diff__stat { text-align: right; border-left: 1px solid var(--rule-dark); padding-left: 24px; min-width: 100px; }
.km-diff__cap { grid-column: span 2; }
.km-stats { grid-template-columns: 1fr 1fr 1fr; }
.km-plans { grid-template-columns: 1fr 1fr 1fr; }
.km-savings__grid { grid-template-columns: 1fr auto 1fr auto 1.4fr; }
.km-vs-head, .km-vs-row, .km-vs-total { grid-template-columns: 2fr 1fr 1.5fr; }
.km-term-foot { grid-template-columns: repeat(4, 1fr); }
.km-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
/* how-it-works + agencies second-half grids (class-driven for reliable collapse) */
.km-ograid { grid-template-columns: 1fr 1fr; }
.km-ograid__tile { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.km-ograid__tile > * { min-width: 0; }
.km-ograid__stat { text-align: right; border-left: 1px solid var(--rule-dark); padding-left: 24px; min-width: 100px; }
.km-handle { grid-template-columns: 1fr 1fr; }
.km-costgrid { grid-template-columns: 1fr 1fr 1fr; }
.km-agquote { grid-template-columns: 1fr auto; }
.km-fitgrid { grid-template-columns: 1fr 1fr; }
.km-step { grid-template-columns: 92px 1fr 100px; }

.kosmos-page--dark .km-nav__links a {
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity var(--t-instant) var(--ease), color var(--t-quick) var(--ease);
}
.kosmos-page--dark .km-nav__links a.is-current {
  opacity: 1;
  color: var(--signal);
}
.kosmos-page--dark .km-nav__links a:not(.km-nav__cta):not(.is-current):hover {
  color: var(--signal);
  opacity: 1;
}

/* Section CTA — subtle by default, lights up green on hover */
.km-section-cta:hover {
  background: rgba(60,255,122,0.06);
  border-color: var(--signal) !important;
  color: var(--signal);
}
.km-section-cta:hover .km-btn-arrow {
  transform: translateX(4px);
}
/* Bold variant: the right cell is already green, so on hover only nudge arrow */
.km-section-cta--bold:hover {
  background: transparent;
  border-color: var(--signal) !important;
  color: inherit;
}

/* Nav CTA — distinct hover with full color flip.
   Scoped under .km-nav so it beats the descendant rule above. */
.km-nav .km-nav__cta {
  background: transparent;
  color: var(--signal);
  border: 1px solid var(--signal);
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.km-nav .km-nav__cta:hover {
  background: var(--signal);
  color: var(--ink);
}
.km-nav .km-nav__cta:hover .km-btn-arrow { color: var(--ink); }

/* Comparison + value-stack row striping — subtle green rhythm */
.kosmos-page--dark .km-stripe:nth-of-type(odd) {
  background: rgba(60,255,122,0.035);
}

/* Standard CTA button on dark — green hover ring */
.kosmos-page--dark .km-btn--ghost-dark {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.kosmos-page--dark .km-btn--ghost-dark:hover {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
}

/* Section divider helper */
.km-section { padding: 120px var(--pad-x); }
.km-section--tight { padding: 80px var(--pad-x); }
.km-section--hero { padding: 56px var(--pad-x) 80px; }

/* Shared horizontal gutter for the full-bleed chrome pieces */
.km-ticker { padding: 8px var(--pad-x); }
.km-footer { padding: 64px var(--pad-x) 28px; }

/* Quote — counterpoint italic block */
.km-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ============================================================
   RESPONSIVE SYSTEM
   Breakpoints:  mobile ≤767 · tablet 768–1024 · laptop/desktop ≥1025
   Content caps at 1140px (see --pad-x); gutters shrink per breakpoint.
   ============================================================ */

/* --- Mobile nav: hamburger + full-screen overlay --- */
.km-nav__toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.km-nav__toggle span {
  display: block; width: 100%; height: 2px;
  background: var(--paper);
  transition: transform var(--t-quick) var(--ease), opacity var(--t-quick) var(--ease);
}
.km-nav__overlay {
  position: fixed; inset: 0; z-index: 70;
  background: #0E0E0C; background: var(--ink);
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: 20px 24px 40px;
  padding-top: max(20px, env(safe-area-inset-top));
  transform: translateY(-8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-page) var(--ease), transform var(--t-page) var(--ease), visibility var(--t-page) var(--ease);
}
.km-nav__overlay.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.km-nav__overlay-top { display: flex; align-items: center; justify-content: space-between; }
.km-nav__close {
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  color: var(--paper); font-size: 26px; line-height: 1;
  display: inline-grid; place-items: center;
}
.km-nav__overlay-links { display: flex; flex-direction: column; margin-top: 32px; }
.km-nav__overlay-links a {
  color: var(--paper); text-decoration: none;
  font-size: 30px; font-weight: 500; letter-spacing: -0.02em;
  padding: 18px 0; border-bottom: 1px solid var(--rule-dark);
}
.km-nav__overlay-links a.is-current { color: var(--signal); }
.km-nav__overlay-cta {
  margin-top: 28px; border: 1px solid var(--signal) !important; color: var(--signal) !important;
  border-bottom-width: 1px !important;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 22px !important; font-size: 17px !important;
}
/* Overlay never exists on tablet/desktop */
@media (min-width: 768px) { .km-nav__overlay { display: none !important; } }

/* === MOBILE TAB BAR (Direction B) — fixed dock, mobile only ===
   Matches the desktop nav language: translucent ink + blur, green as the
   single active signal. An inset top rule marks the current destination. */
.km-tabbar { display: none; }
@media (max-width: 767px) {
  .km-tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    display: flex;
    background: color-mix(in oklab, var(--ink) 86%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule-dark);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .km-tabbar a {
    flex: 1; min-width: 0; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 0 13px;
    color: var(--paper); text-decoration: none; opacity: 0.55;
    box-shadow: inset 0 2px 0 transparent;
    transition: opacity var(--t-quick) var(--ease), color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
  }
  .km-tabbar a:hover { opacity: 0.85; }
  .km-tabbar a.is-current {
    opacity: 1; color: var(--signal);
    box-shadow: inset 0 2px 0 var(--signal);
  }
  .km-tabbar__glyph { font-size: 18px; line-height: 1; }
  .km-tabbar__label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 9px; line-height: 1; }
  .km-tabbar a.is-current .km-tabbar__label { font-weight: 500; }

  /* Dock clearance lives with the footer's own mobile padding further down —
     declaring it here too would be overwritten by that shorthand. */
}

/* ---------------- TABLET · 768–1024 ----------------
   Content box here is only 672–928px. Desktop templates technically fit, but
   several leave columns too narrow to read (footer links at 62px, stat-tile
   copy at 88px), so they get deliberate intermediate forms rather than being
   left to squeeze. Blocks that only break at the narrow end of the range are
   handled in the 768–899 block below. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --gutter: 48px; }
  .km-section { padding-top: 96px; padding-bottom: 96px; }
  .km-section--tight { padding-top: 64px; padding-bottom: 64px; }
  .km-section--hero { padding-top: 48px; padding-bottom: 64px; }

  /* Cap oversized heroes so the fixed <br> lines don't overflow 928px content */
  .kosmos-page .km-h1 { font-size: clamp(52px, 7.4vw, 74px) !important; }

  /* SectionEntry two-col header tightens */
  .kosmos-page [style*="grid-template-columns: 1fr 2fr"] { gap: 40px !important; }

  /* Card paddings tuned for a 1140px canvas eat too much of a 672px one */
  .kosmos-page main [style*="padding: 48px 64px"],
  .kosmos-page main [style*="padding: 44px 56px"],
  .kosmos-page main [style*="padding: 44px 48px"] { padding: 32px 36px !important; }
  .kosmos-page main [style*="padding: 40px 56px"],
  .kosmos-page main [style*="padding: 40px 48px"] { padding: 30px 34px !important; }
  .kosmos-page main [style*="padding: 32px 48px"] { padding: 28px 32px !important; }

  /* Plan cards stay 3-up — side-by-side comparison is the whole point — but a
     56px price plus 36px padding overflows a ~223px column. Tighten both, and
     let the price/suffix row wrap rather than push past the card edge. */
  .km-plan__body { padding: 22px !important; }
  .km-plan__flag { padding-left: 22px !important; padding-right: 22px !important; }
  /* Fluid so the longest price ("From £350") keeps its /mo suffix on one line
     all the way down to 768 — a wrapped suffix knocks that card's copy out of
     alignment with the other two. The suffix shrinks with it: at 768 the pair
     needs 169px of a 179px column, which is the headroom this needs to survive
     font-rendering differences. flex-wrap stays as the safety net. */
  .km-plan__price { font-size: min(34px, 3.7vw) !important; }
  .km-plan__price + span { font-size: min(18px, 1.95vw) !important; }
  .km-plan__pricerow { flex-wrap: wrap; }

  /* Stat tiles: the `1fr auto` split starves the copy (88–147px at 768px).
     Drop the stat beneath its copy, as on mobile. */
  .kosmos-page .km-diff__tile,
  .kosmos-page .km-ograid__tile {
    grid-template-columns: 1fr !important; gap: 16px !important; padding: 26px !important;
  }
  .kosmos-page .km-diff__stat,
  .kosmos-page .km-ograid__stat {
    border-left: 0 !important; padding-left: 0 !important; text-align: left !important;
    min-width: 0 !important; border-top: 1px solid var(--rule-dark); padding-top: 14px;
    display: flex; align-items: baseline; gap: 12px;
  }

  /* Footer: four columns leave the link lists ~62px wide — "How it Works"
     cannot fit. Brand takes its own row; the three lists share the next. */
  .kosmos-page .km-footer__cols {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px 32px !important;
  }
  .km-footer__cols > :first-child { grid-column: 1 / -1 !important; }
  .km-footer__cols > :first-child p { max-width: 62ch !important; }
}

/* ------- TABLET, NARROW HALF · 768–899 -------
   Blocks that still read at ~928px but not at ~672px. Separated so the wider
   tablets keep the richer desktop form instead of being levelled down. */
@media (min-width: 768px) and (max-width: 899px) {
  /* Savings equation: five tracks leave 163/191/228px. Go vertical, as on
     mobile — operators become slim divider rows. */
  .kosmos-page .km-savings__grid { grid-template-columns: 1fr !important; }
  .km-savings__op {
    width: auto !important; padding: 8px 0 !important; font-size: 18px !important;
    border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark);
  }

  /* Agency pull-quote: the cite column's 200px floor squeezes 28px quote text
     into ~296px. Stack, cite underneath. */
  .kosmos-page .km-agquote { grid-template-columns: 1fr !important; }
  .km-agquote__cite {
    text-align: left !important; border-left: 0 !important; padding-left: 0 !important;
    min-width: 0 !important; border-top: 1px solid var(--rule-dark); padding-top: 20px;
  }

  /* start: the two-up cost comparison drives its `1fr auto` value columns down
     to 8px, breaking figures like "£150–400" mid-token. One column instead. */
  .kosmos-page .km-start-compare { grid-template-columns: 1fr !important; }
  .km-start-compare > * { border-right: 0 !important; }
  .km-start-compare > * + * { border-top: 1px solid var(--rule-dark); }

  /* Contact: the form sits in the 1.4fr half, so paired fields land at ~116px.
     One field per row keeps the placeholders legible. */
  .kosmos-page .km-field-row { grid-template-columns: 1fr !important; }
}

/* ---------------- MOBILE · ≤767 ---------------- */
@media (max-width: 767px) {
  :root { --gutter: 24px; }

  .km-section { padding-top: 64px; padding-bottom: 64px; }
  .km-section--tight { padding-top: 48px; padding-bottom: 48px; }
  .km-section--hero { padding-top: 28px; padding-bottom: 48px; }

  /* Swap desktop links for the hamburger */
  .km-nav__links { display: none; }
  .km-nav__toggle { display: flex; }

  /* Headlines: let text wrap naturally (drop the desktop <br> line breaks)
     and scale down so nothing overflows a 375px screen. */
  .kosmos-page .km-h1 { font-size: clamp(32px, 8.5vw, 44px) !important; line-height: 1.02 !important; }
  .kosmos-page .km-h2 { font-size: clamp(26px, 6.8vw, 34px) !important; }
  .kosmos-page .km-h1 br,
  .kosmos-page .km-h2 br { display: none; }

  /* Collapse EVERY inline multi-column grid to a single column… */
  .kosmos-page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* …but keep small icon / number + text pairs side by side */
  .kosmos-page [style*="grid-template-columns: 20px 1fr"],
  .kosmos-page [style*="grid-template-columns: 24px 1fr"],
  .kosmos-page [style*="grid-template-columns: 40px 1fr"],
  .kosmos-page [style*="grid-template-columns: 48px 1fr"],
  .kosmos-page [style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: auto 1fr !important;
  }

  /* Grid/flex children may shrink below content width (prevents input/table overflow) */
  .kosmos-page [style*="display: grid"] > *,
  .kosmos-page [style*="display: flex"] > * { min-width: 0; }

  /* Comparison / feature matrices scroll horizontally instead of collapsing */
  .km-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .km-scroll-x > div { min-width: 640px; }
  .kosmos-page .km-scroll-x [style*="1.5fr repeat(4, 1fr)"] { grid-template-columns: 1.5fr repeat(4, 1fr) !important; }
  .kosmos-page .km-scroll-x [style*="2fr 1fr 1fr 1fr"] { grid-template-columns: 2fr 1fr 1fr 1fr !important; }

  /* Vertical divider borders only make sense in a horizontal row */
  .kosmos-page main [style*="border-right"] { border-right: 0 !important; }

  /* Section-entry header: no dangling gap once stacked */
  .kosmos-page [style*="grid-template-columns: 1fr 2fr"] { gap: 20px !important; margin-bottom: 40px !important; }

  /* Ticker: trim to the status line only */
  .km-ticker { font-size: 9px; padding-top: 7px; padding-bottom: 7px; }
  .km-ticker__meta { display: none !important; }

  /* ============================================================
     SECOND-HALF SECTIONS — dedicated mobile layouts.
     Class hooks beat brittle [style*] matching; each block gets a
     deliberate stacked form instead of a generic 1-col collapse.
     ============================================================ */

  /* Stats strip → stacked, horizontal rules between */
  .kosmos-page .km-stats { grid-template-columns: 1fr !important; }
  .km-stats > * { border-left: 0 !important; }
  .km-stats > * + * { border-top: 1px solid var(--rule-dark); }

  /* Plan cards → stacked. The vertical dividers are zeroed by the blanket
     border-right rule, so restore separation as horizontal rules — otherwise
     Starter and Enterprise (both --ink) merge into one undivided block. */
  .kosmos-page .km-plans { grid-template-columns: 1fr !important; }
  .km-plans > * + * { border-top: 1px solid var(--rule-dark); }

  /* Savings equation → vertical: cost, +, value, =, win.
     Operators become slim centred divider rows. */
  .kosmos-page .km-savings__grid { grid-template-columns: 1fr !important; }
  .km-savings__op {
    width: auto !important; padding: 8px 0 !important; font-size: 18px !important;
    border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark);
  }

  /* Value stack → name + price on row 1, "elsewhere" note on row 2.
     Column header row is redundant once stacked. */
  .km-vs-head { display: none !important; }
  .kosmos-page .km-vs-row, .kosmos-page .km-vs-total {
    grid-template-columns: 1fr auto !important;
    column-gap: 16px !important; row-gap: 4px !important;
    padding-top: 16px !important; padding-bottom: 16px !important;
  }
  .km-vs-row > :nth-child(3), .km-vs-total > :nth-child(3) {
    grid-column: 1 / -1 !important;
  }
  .km-vs-total > :nth-child(2) { justify-self: end; }

  /* Differentiator tiles → single column; stat panel drops below its copy
     with a top rule instead of a left rule. */
  .kosmos-page .km-diff { grid-template-columns: 1fr !important; }
  .kosmos-page .km-diff__tile { grid-template-columns: 1fr !important; gap: 16px !important; padding: 26px !important; }
  .kosmos-page .km-diff__stat {
    border-left: 0 !important; padding-left: 0 !important; text-align: left !important;
    min-width: 0 !important; border-top: 1px solid var(--rule-dark); padding-top: 16px;
    display: flex; align-items: baseline; gap: 12px;
  }
  .kosmos-page .km-diff__cap { grid-column: auto !important; flex-direction: column; gap: 18px !important; padding: 32px 26px !important; }
  .km-diff__cap-h { font-size: 26px !important; }

  /* how-it-works: ongoing grid → 1 col; stat drops below copy */
  .kosmos-page .km-ograid { grid-template-columns: 1fr !important; }
  .kosmos-page .km-ograid__tile { grid-template-columns: 1fr !important; grid-column: auto !important; gap: 16px !important; padding: 26px !important; }
  .kosmos-page .km-ograid__stat {
    border-left: 0 !important; padding-left: 0 !important; text-align: left !important;
    min-width: 0 !important; border-top: 1px solid var(--rule-dark); padding-top: 16px;
    display: flex; align-items: baseline; gap: 12px;
  }
  /* how-it-works: handle checklist → 1 col */
  .kosmos-page .km-handle { grid-template-columns: 1fr !important; }
  .kosmos-page .km-handle__item { grid-column: auto !important; }
  /* how-it-works: step list → stacked; number + time above copy */
  .kosmos-page .km-step { grid-template-columns: 1fr !important; gap: 8px !important; padding: 24px !important; }
  .km-step__num { font-size: 32px !important; }
  .km-step > *:last-child { text-align: left !important; padding-top: 0 !important; opacity: 0.5; }

  /* agencies: cost grid → stacked */
  .kosmos-page .km-costgrid { grid-template-columns: 1fr !important; }
  .km-costgrid > * { border-left: 0 !important; }
  .km-costgrid > * + * { border-top: 1px solid var(--rule-dark); }
  /* agencies: white-label quote → stacked, cite below */
  .kosmos-page .km-agquote { grid-template-columns: 1fr !important; }
  .km-agquote__cite {
    text-align: left !important; border-left: 0 !important; padding-left: 0 !important;
    min-width: 0 !important; border-top: 1px solid var(--rule-dark); padding-top: 20px;
  }
  /* agencies: fit / no-fit → stacked */
  .kosmos-page .km-fitgrid { grid-template-columns: 1fr !important; }
  .km-fitgrid > * { border-right: 0 !important; }
  .km-fitgrid > * + * { border-top: 1px solid var(--rule-dark); }

  /* Terminal metric footer → 2×2 instead of 4-across */
  .kosmos-page .km-term-foot { grid-template-columns: 1fr 1fr !important; }
  .km-term-foot > * { border-right: 0 !important; }
  .km-term-foot > *:nth-child(odd) { border-right: 1px solid var(--rule-dark) !important; }
  .km-term-foot > *:nth-child(n+3) { border-top: 1px solid var(--rule-dark); }

  /* ---------------- FOOTER ---------------- */
  /* Bottom padding clears the fixed tab bar (56px min-height + 12px breathing
     room) so the base row is never hidden underneath it. */
  .km-footer { padding: 48px var(--pad-x) calc(24px + 68px + env(safe-area-inset-bottom)); }
  .kosmos-page .km-footer__cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }
  /* Brand blurb and contact span full width; the two link lists share a row */
  .km-footer__cols > :first-child,
  .km-footer__cols > :last-child { grid-column: 1 / -1 !important; }
  .km-footer__cols > :first-child p { max-width: none !important; }
  .km-footer__base { flex-wrap: wrap; gap: 12px; }

  /* Reduce big inline paddings on cards/blocks that were tuned for desktop */
  .kosmos-page [style*="padding: 48px"] { padding: 26px !important; }
  .kosmos-page [style*="padding: 44px 48px"] { padding: 26px !important; }
  .kosmos-page [style*="padding: 44px 56px"] { padding: 26px !important; }
  .kosmos-page [style*="padding: 40px 48px"] { padding: 24px !important; }
  .kosmos-page [style*="padding: 40px 56px"] { padding: 24px !important; }
  .kosmos-page [style*="padding: 48px 64px"] { padding: 24px !important; }
  .kosmos-page [style*="padding: 32px 48px"] { padding: 22px !important; }
  .kosmos-page main [style*="padding: 36px"] { padding: 24px !important; }
}