/* ============================================================================
   MARKETING 2026 — "Bone"
   The whole marketing site's design system, in one file.

   Derived from home-final.html (the combined final sample, 2026-08-14 —
   archived 2026-08-16 to docs/archive/2026-08-marketing-homepage-samples/,
   out of public/ so it can never ship) reduced to a single theme: Bone —
   cool near-white ground,
   blue accent. The sample's three-theme switcher was a design-review device
   and does not ship.

   Load order on marketing pages: THIS FILE ONLY. landing-desktop.css (990 KB),
   landing-tablet.css and landing-mobile.css are no longer loaded here.

   Five rules this system depends on. Breaking one breaks the look:
     1. Copy is never repainted. Emphasis inside a heading is value and weight
        (--text on --text2), never hue. <em> is font-style:normal.
     2. Hairlines carry structure, not shadows. Shadows only lift a document
        off the page.
     3. Mono is metadata only — eyebrows, numerals, spec keys, tags. Never body.
     4. 2px radius on controls, 3-4px on panels. Nothing is pill-shaped except
        chips and the drawer's own affordances.
     5. Sections alternate --base / --raise through .m-sec--raise.

   Breakpoints: 1080 / 900 / 620. Nothing else.
   ============================================================================ */

/* ---------------------------------------------------------------- fonts ---
   Self-hosted, already shipped for the tenant app. No third-party font
   request is added: the CSP forbids it and it costs a round trip on the
   pages paid traffic lands on. Mono falls back to the system stack, which
   is what the sample's Roboto Mono was standing in for. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

/* ---------------------------------------------------------------- reset --- */
/* ⛔ [hidden] MUST WIN. The UA stylesheet's `[hidden]{display:none}` is a plain
   author-less rule, so ANY author `display:` declaration beats it — and this
   bundle is full of them (.m-btn is inline-flex, .m-modal__x is flex, .m-lbx__tabs
   is flex). The tenant app has carried this exact guard in style.css for years,
   but marketing pages do NOT load style.css, so they never inherited it.

   Three live controls were rendering with `hidden` set and being ignored:
     · how_to_install.php  [data-install-app]  — the PWA install button, which
       install-marketing.js only ever toggles via `button.hidden`, so it showed
       to every visitor including iOS/Safari where there is no install prompt;
     · cookie_banner.php   [data-cookie-close] — the dismiss "x", which consent.js
       hides when consent has NOT yet been given, sitting over the eyebrow;
     · the lightbox's variant tab strip on single-variant documents.

   `:where()` keeps the specificity at zero so a deliberate override is still
   one class away; `!important` is what actually beats the author display rules. */
:where([hidden]) { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.landing-body { margin: 0; }

/* ---------------------------------------------------------------- tokens --- */
:root {
  /* ground */
  --base: #F5F6F8;
  --raise: #FFFFFF;
  --raise2: #EDEFF3;
  --raise3: #E4E7EC;

  /* hairlines */
  --line: rgba(15, 20, 30, .14);
  --line2: rgba(15, 20, 30, .065);
  --line3: rgba(15, 20, 30, .28);

  /* ink */
  --text: #0F1318;
  --text2: #545C67;
  --text3: #858D99;

  /* accent */
  --acc: #1F6FBF;
  --acc-2: #175A9E;
  --acc-w: rgba(31, 111, 191, .10);
  --acc-glow: rgba(31, 111, 191, .10);
  --acc-ink: #FFFFFF;

  /* The eight "drafting inks" (--draw, --draw-2/-3/-f/-t/-t2/-h/-w) were deleted on
     2026-08-16. Despite the comment calling them "the schematic and any technical
     drawing", the schematic was the only consumer they ever had — and only of two of
     the eight; the other six were never referenced at all. Verified across every
     stylesheet, not just this one, before removing. */

  /* surfaces */
  --wash: rgba(10, 15, 25, .045);
  --wash-2: rgba(10, 15, 25, .022);
  --grid: rgba(10, 15, 25, .05);
  --sunk: rgba(10, 15, 25, .03);
  --shadow: rgba(20, 25, 35, .20);
  --badge: rgba(15, 18, 24, .86);

  /* status — used as typography, never as a filled chip */
  --ok: #2F8F63;
  --bad: #B3402F;

  /* type */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --disp: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* metrics */
  --shell: 1300px;
  --gut: clamp(20px, 4vw, 44px);
  --hdr-h: 70px;
}

/* --------------------------------------------------- install-modal bridge ---
   ⚠ LOAD-BEARING. install-modal-marketing.css is still loaded (it owns the
   guided install modal that install-marketing.js builds at runtime), and its
   `body.landing-body` block remaps every one of its own --fd-install-* tokens
   onto --lp-* properties:

       --fd-install-accent: var(--lp-color-brand);   <- no fallback

   Those --lp-* tokens were defined only in landing-desktop.css, which this
   branch no longer loads — so without this block all ten --fd-install-* tokens
   are invalid, and ~30 further declarations that use --lp-* directly inside
   color-mix() go invalid at computed-value time: backgrounds transparent,
   colours inherited, borders gone. The modal is reachable from
   /how-to-install's [data-install-app] button on Chrome, Edge and Android.

   Defined here on body.landing-body — the same selector, so this file (loaded
   first) is overridden by nothing and the install CSS resolves against the
   Bone palette rather than the retired one. Every token that file reads is
   listed, including the ones that already carry a fallback, so the set cannot
   drift out from under it again. */
body.landing-body {
  --lp-color-brand: var(--acc);
  --lp-color-brand-dark: var(--acc-2);
  --lp-color-accent: var(--acc-w);
  --lp-color-text: var(--text);
  --lp-color-text-base: var(--text2);
  --lp-color-text-muted: var(--text3);
  --lp-color-text-soft: var(--text3);
  --lp-color-bg: var(--base);
  --lp-color-surface-soft: var(--raise2);
  --lp-panel-bg-strong: var(--raise);
  --lp-panel-border: var(--line);
  --lp-panel-shadow: 0 26px 60px var(--shadow);
  --lp-shadow-card: 0 14px 34px -18px var(--shadow);
  --lp-shadow-glow: 0 0 0 4px var(--acc-w);
  --lp-overlay-bg: rgba(10, 14, 22, .55);
  --lp-ghost-bg: transparent;
  --lp-ghost-bg-hover: var(--wash);
  --lp-ghost-border: var(--line3);
  --lp-ghost-border-hover: var(--text);
  --lp-ghost-text: var(--text);
  --lp-font-display: var(--disp);
}

/* ---------------------------------------------------------------- base --- */
body.landing-body {
  background: var(--base);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.landing-body a { color: inherit; text-decoration: none; }
.landing-body img { max-width: 100%; height: auto; display: block; }
.landing-body h1, .landing-body h2, .landing-body h3, .landing-body h4, .landing-body h5 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.landing-body p { margin: 0; }
.landing-body ul, .landing-body ol { margin: 0; padding: 0; list-style: none; }
.landing-body figure { margin: 0; }
.landing-body em { font-style: normal; }

.m-shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gut); }
.m-shell--narrow { max-width: 940px; }

/* Skip link — keyboard users land here first. */
.m-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--acc); color: var(--acc-ink);
  padding: 12px 18px; border-radius: 0 0 3px 0;
  font-size: 14px; font-weight: 600;
}
.m-skip:focus { left: 0; }

:where(.landing-body) :focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------- primitives --- */
.m-lbl {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text3);
}
.m-lead { font-size: 17.5px; color: var(--text2); max-width: 62ch; }
.m-lead--wide { max-width: 74ch; }

.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 24px;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: .16s;
  white-space: nowrap;
  cursor: pointer;
}
.m-btn--a { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.m-btn--a:hover { background: var(--acc-2); border-color: var(--acc-2); box-shadow: 0 0 0 4px var(--acc-w); }
.m-btn--g { background: transparent; color: var(--text); border-color: var(--line3); }
.m-btn--g:hover { border-color: var(--text); background: var(--wash); }
.m-btn--sm { height: 40px; padding: 0 16px; font-size: 13.5px; }
.m-btn--wide { width: 100%; }
.m-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }

.m-lnk {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--acc);
  transition: gap .16s;
}
.m-lnk:hover { gap: 11px; }

/* ================================================================= HEADER === */
.m-util {
  border-bottom: 1px solid var(--line2);
  background: var(--sunk);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text3);
}
.m-util__in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 34px; white-space: nowrap; overflow: hidden;
}
.m-util__l, .m-util__r { display: flex; align-items: center; gap: 22px; }
/* The row is nowrap + overflow:hidden, so it clips rather than wraps. Drop the
   longest claim before it can eat the right-hand links. */
@media (max-width: 1150px) { .m-util__l > span:last-child { display: none; } }
.m-util a:hover { color: var(--acc); }
.m-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok); display: inline-block; margin-right: 7px;
}

.m-hdr {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--base) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(4px)) { .m-hdr { background: var(--base); } }
.m-hdr__in { display: flex; align-items: center; gap: 24px; height: var(--hdr-h); }
.m-brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.m-brand img { height: 29px; width: auto; }

.m-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.m-nav__item { position: relative; }
.m-nav__link {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--text2);
  padding: 10px 13px; border-radius: 2px; transition: .14s; white-space: nowrap;
  background: none; border: 0; font-family: var(--sans); cursor: pointer;
}
.m-nav__link:hover { color: var(--text); background: var(--wash); }
.m-nav__link.is-on { color: var(--text); }
.m-nav__link svg { width: 9px; height: 9px; opacity: .5; }
.m-nav__panel {
  position: absolute; top: calc(100% + 10px); left: -4px;
  min-width: 298px;
  background: var(--raise2);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 13px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  box-shadow: 0 26px 60px var(--shadow);
}
.m-nav__item:hover .m-nav__panel,
.m-nav__item:focus-within .m-nav__panel,
.m-nav__item.is-open .m-nav__panel { opacity: 1; visibility: visible; transform: none; }
.m-nav__gl {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text3);
  padding: 6px 10px 8px;
}
.m-nav__panel a {
  display: block; padding: 8px 10px; border-radius: 2px;
  font-size: 14px; color: var(--text2); transition: .12s;
}
.m-nav__panel a:hover { background: var(--wash); color: var(--text); }
.m-nav__panel a span { display: block; font-size: 12px; color: var(--text3); }
.m-nav__sep { height: 1px; background: var(--line2); margin: 9px 4px; }

.m-hdr__cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.m-hdr__signin { font-size: 14px; font-weight: 500; color: var(--text2); padding: 0 8px; }
.m-hdr__signin:hover { color: var(--acc); }

/* hamburger — desktop-hidden, the drawer's only trigger */
.m-burger {
  display: none;
  width: 42px; height: 42px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line3); border-radius: 2px;
  cursor: pointer; color: var(--text); flex: 0 0 auto;
}
.m-burger:hover { background: var(--wash); }
.m-burger i { position: relative; display: block; width: 16px; height: 10px; }
.m-burger i::before, .m-burger i::after, .m-burger i span {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; transition: .2s;
}
.m-burger i::before { top: 0; }
.m-burger i span { top: 4.25px; }
.m-burger i::after { bottom: 0; }

/* ================================================================= DRAWER === */
.m-drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.m-drawer.is-open { visibility: visible; }
.m-drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(10, 14, 22, .5);
  opacity: 0; transition: opacity .22s;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.m-drawer.is-open .m-drawer__scrim { opacity: 1; }
.m-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw);
  background: var(--base);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .24s ease;
  box-shadow: -30px 0 70px var(--shadow);
}
.m-drawer.is-open .m-drawer__panel { transform: none; }
.m-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 var(--gut); height: var(--hdr-h);
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.m-drawer__head img { height: 27px; }
.m-drawer__x {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line3); border-radius: 2px;
  cursor: pointer; color: var(--text);
}
.m-drawer__x svg { width: 14px; height: 14px; }
.m-drawer__body { flex: 1; overflow-y: auto; padding: 20px var(--gut) 28px; -webkit-overflow-scrolling: touch; }
.m-drawer__gl {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text3);
  margin: 22px 0 8px;
}
.m-drawer__gl:first-child { margin-top: 0; }
.m-drawer__body a {
  display: block; padding: 11px 12px; margin: 0 -12px; border-radius: 2px;
  font-size: 15px; color: var(--text2); border-bottom: 1px solid var(--line2);
}
.m-drawer__body a:hover, .m-drawer__body a:focus-visible { background: var(--wash); color: var(--text); }
.m-drawer__body a span { display: block; font-size: 12px; color: var(--text3); }
.m-drawer__foot {
  flex: 0 0 auto; display: grid; gap: 10px;
  padding: 18px var(--gut) calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--raise2);
}
.m-drawer__foot .m-btn { width: 100%; }
.m-drawer__signin { text-align: center; font-size: 14px; color: var(--text2); }
body.m-locked { overflow: hidden; }

/* ================================================================== HERO === */
.m-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.m-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 500px at 72% 20%, var(--acc-glow), transparent 70%);
}
/* ⚠ align-items MUST NOT be `center` here, and the right column has to be capped.
   Measured on the homepage at 1440×900 before this change: the right-hand artefact
   was 938px tall against a 560px left column, so centring pushed the h1 down to
   y=417 — 189px of dead space above the first word, on a 900px viewport, with the
   CTA buttons and the trust pills below the fold. The whole hero was 1095px, i.e.
   1.2 viewports before the second section began.
   Top-aligning fixes the dead space; capping the artefact fixes the height. Both
   are needed — top-aligning alone leaves a 1200px hero. */
.m-hero__in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: clamp(30px, 4vw, 64px); align-items: start;
  padding-block: clamp(40px, 4.6vw, 66px);
}
/* Left-aligned, not centred: .m-shell already centres the column, so a bare
   max-width here would shift the whole hero right by half the leftover.
   --solo is now reserved for pages where a right-hand panel would be noise
   (the three legal documents and the two unsubscribe confirmations). It has to
   read as a deliberate single-column treatment rather than a two-column hero
   with a column missing, so the measure is tighter and a rule closes it off. */
.m-hero__in--solo {
  grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-inline: 0;
  padding-block: clamp(40px, 4.4vw, 62px);
}
.m-hero__in--solo > div::after {
  content: ""; display: block; width: 88px; height: 2px;
  margin-top: 28px; background: var(--acc);
}
.m-hero__in--solo .m-lead { max-width: 66ch; }
.m-hero h1 {
  font-size: clamp(38px, 5.2vw, 64px); letter-spacing: -.04em; line-height: 1;
  margin: 18px 0 0; color: var(--text2);
}
.m-hero h1 em { color: var(--text); }
.m-hero .m-lead { margin-top: 20px; }
.m-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.m-hero__micro {
  margin-top: 13px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text3);
}
.m-hero__pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line2);
}
.m-hero__pills span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text2);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 7px 11px; background: var(--wash-2); white-space: nowrap;
}
.m-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 18px;
}
/* The eyebrow directly under a breadcrumb is the same mono caps at the same
   size, so without this they read as one four-line block. */
.m-crumbs + .m-lbl { display: block; }
.m-crumbs a:hover { color: var(--acc); }
.m-crumbs i { font-style: normal; opacity: .55; }

/* annotated artefact — the lightbox.
   max-width caps how tall this column can get: it holds a portrait A4 page, so
   every extra pixel of width costs 1.41 pixels of height, and the height is what
   was burying the headline (see the .m-hero__in note above). 470px keeps the page
   legible and brings the whole hero back inside one viewport. */
.m-lbox {
  position: relative;
  max-width: 470px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--raise);
  padding: 20px 20px 16px;
  box-shadow: 0 40px 90px -52px var(--shadow);
}
.m-lbox__doc { position: relative; }
.m-lbox__doc img { width: 100%; border: 1px solid var(--line); box-shadow: 0 18px 44px -22px var(--shadow); }
.m-lbox__cap {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2);
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text3);
}
.m-lbox__cap b { color: var(--text2); font-weight: 500; }
.m-lbox__cap span { margin-left: auto; }

/* ============================================================== SECTIONS === */
.m-sec { border-top: 1px solid var(--line2); padding-block: clamp(56px, 6.4vw, 96px); }
.m-sec--raise { background: var(--raise); }
.m-sec--tight { padding-block: clamp(40px, 4.4vw, 62px); }
.m-sec[id] { scroll-margin-top: 126px; }

.m-head { max-width: 900px; margin-bottom: clamp(30px, 3.6vw, 50px); }
.m-head h2 {
  font-size: clamp(28px, 3.7vw, 48px); letter-spacing: -.036em;
  margin: 14px 0 0; color: var(--text2);
}
.m-head h2 em { color: var(--text); }
.m-head .m-lead { margin-top: 16px; }
.m-head__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--acc); margin-right: 14px; }
.m-head--center { margin-inline: auto; text-align: center; }
.m-head--center .m-lead { margin-inline: auto; }

/* ============================================================ STAT STRIP === */
.m-statsec { background: var(--raise); border-bottom: 1px solid var(--line); }
.m-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.m-stats > div { padding: 26px 26px 26px 0; }
.m-stats > div + div { padding-left: 26px; border-left: 1px solid var(--line2); }
.m-stats b {
  display: block; font-family: var(--disp);
  font-size: clamp(23px, 2.5vw, 32px); letter-spacing: -.035em; line-height: 1;
}
.m-stats em { display: block; margin-top: 9px; font-size: 14px; color: var(--text2); }
.m-stats i {
  font-style: normal; display: block; margin-top: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3);
}
.m-stats--3 { grid-template-columns: repeat(3, 1fr); }

/* ================================================================= SHELF === */
.m-shelfhd { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin-bottom: 24px; }
.m-shelfhd h2 { font-size: clamp(21px, 2.3vw, 29px); letter-spacing: -.032em; color: var(--text2); }
.m-shelfhd h2 em { color: var(--text); }
.m-shelfhd p { font-size: 14px; color: var(--text2); max-width: 50ch; margin-top: 8px; }
.m-shelfhd a { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--acc); white-space: nowrap; }
.m-shelf {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(158px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x proximity;
}
.m-shelf::-webkit-scrollbar { height: 6px; }
.m-shelf::-webkit-scrollbar-thumb { background: var(--line); }
.m-shelf figure { scroll-snap-align: start; }
.m-shelf img {
  width: 100%; border: 1px solid var(--line); background: #fff;
  box-shadow: 0 14px 30px -18px var(--shadow); transition: .18s;
}
.m-shelf a:hover img { transform: translateY(-4px); box-shadow: 0 22px 46px -20px var(--shadow); }
.m-shelf figcaption { margin-top: 11px; }
.m-shelf b { display: block; font-family: var(--disp); font-size: 14px; letter-spacing: -.02em; }
.m-shelf span {
  display: block; margin-top: 3px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text3);
}

/* =========================================================== ANCHOR BAR === */
.m-anch {
  position: sticky; top: var(--hdr-h); z-index: 70;
  background: color-mix(in srgb, var(--base) 93%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(4px)) { .m-anch { background: var(--base); } }
.m-anch__in { display: flex; align-items: center; gap: 16px; height: 48px; }
.m-anch__links {
  display: flex; align-items: center; gap: 2px;
  flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.m-anch__links::-webkit-scrollbar { display: none; }
.m-anch__links a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text3);
  padding: 9px 10px; border-radius: 2px; white-space: nowrap; transition: .14s;
}
.m-anch__links a:hover { color: var(--text); background: var(--wash); }
.m-anch__links a.is-on { color: var(--acc); }
/* No .m-anch .m-btn rules: this bar carries no CTA. It docks flush under
   .m-hdr, which is sticky at top:0 and already holds "Start free trial", so a
   button here duplicated it. .m-anch__links is flex:1 and takes the full row.
   See app/Views/landing/partials/m26/anchor_bar.php. */

/* ================================================================= VIDEO === */
.m-vid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr);
  gap: clamp(22px, 2.8vw, 42px); align-items: start;
}
.m-player {
  position: relative; display: block;
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  background: #000; box-shadow: 0 34px 70px -42px var(--shadow);
}
.m-player img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: .45s; }
.m-player:hover img { transform: scale(1.02); }
.m-player__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.m-player__play i {
  width: 74px; height: 74px; border-radius: 50%; background: var(--acc);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5); transition: .2s;
}
.m-player:hover .m-player__play i { transform: scale(1.08); }
.m-player__play svg { width: 21px; height: 21px; fill: var(--acc-ink); margin-left: 4px; }
.m-player__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 12px; padding: 11px 15px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .88));
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #E7E3DC;
}
.m-player__bar span { margin-left: auto; color: #9AA0A8; }
.m-vside h3 { font-size: 20px; margin-bottom: 11px; }
.m-vside p { font-size: 14.5px; color: var(--text2); }
.m-vside__note {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line2);
  font-size: 13px; color: var(--text3);
}
.m-vside__note a { color: var(--acc); font-weight: 600; }
.m-vsteps { margin-top: 20px; border-top: 1px solid var(--line2); }
.m-vsteps li {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line2);
  font-size: 14px; color: var(--text2);
}
.m-vsteps li:last-child { border-bottom: 0; }
.m-vsteps i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--acc); }

/* ⛔ The SCHEMATIC block (.m-schem, .m-schem__cap, .m-schem__list and the .sc-*
   SVG classes) was deleted here on 2026-08-16 with the partial it styled,
   app/Views/landing/partials/m26/schematic.php. The --draw-* token family went
   with it: all seven were consumed only by this block, and five of them were
   already unreferenced. Recover with `git show 20ae4a19` if the diagram returns. */

/* ================================================= CHAIN (sticky + thread) === */
.m-chain {
  display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 50px); align-items: start; margin-top: clamp(26px, 3vw, 42px);
}
.m-chain__key { position: sticky; top: 134px; }
.m-chain__key h3 { font-size: 21px; letter-spacing: -.03em; margin-bottom: 10px; color: var(--text2); }
.m-chain__key h3 em { color: var(--text); }
.m-chain__key p { font-size: 14px; color: var(--text2); }
.m-chain__key dl { margin-top: 20px; border-top: 1px solid var(--line2); }
.m-chain__key dl > div {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line2);
}
.m-chain__key dt { font-family: var(--mono); font-size: 10.5px; color: var(--text3); }
.m-chain__key dd { margin: 0; font-size: 12.5px; color: var(--text2); }
.m-chain__key .is-on dt { color: var(--acc); }
.m-chain__key .is-on dd { color: var(--text); }

.m-thread { position: relative; padding-left: 48px; }
.m-thread::before {
  content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px;
  width: 1px; background: var(--line);
}
.m-thread::after {
  content: ""; position: absolute; left: 13px; top: 18px; width: 1px;
  height: var(--fill, 0px); max-height: calc(100% - 36px); background: var(--acc);
}
.m-stage {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 208px;
  gap: clamp(18px, 2.2vw, 30px);
  padding: 26px 0; border-bottom: 1px solid var(--line2); align-items: start;
}
.m-stage:last-of-type { border-bottom: 0; }
.m-stage__bead {
  position: absolute; left: -48px; top: 28px;
  width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--base);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; color: var(--text3); transition: .25s;
}
.m-stage.is-on .m-stage__bead { border-color: var(--acc); background: var(--acc); color: var(--acc-ink); }
.m-stage__n { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--acc); }
.m-stage h4 { font-size: 21px; letter-spacing: -.03em; margin: 9px 0; }
.m-stage p { font-size: 14.5px; color: var(--text2); }
.m-stage__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.m-stage__tags span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--text3);
  border: 1px solid var(--line2); padding: 4px 8px; border-radius: 2px;
}
.m-stage .m-lnk { margin-top: 14px; }
.m-stage__fig {
  border: 1px solid var(--line); border-radius: 3px; background: var(--raise2);
  padding: 10px 10px 0; height: 152px; overflow: hidden;
}
.m-stage__fig img { width: 100%; border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 10px 24px -14px var(--shadow); }
/* ⛔ .m-fig, .m-cap2, .m-dev*, .m-reg* and .v--p/.v--f/.v--n were deleted from here on
   2026-08-16, with the homepage register block they existed for (index.php, the
   `$i === 0` case inside the stage loop). Nothing else in app/Views or the marketing
   copy configs referenced any of them — checked before removing, including the one
   apparent survivor, which was `data-team-regain-access-panel` matching "m-reg" as a
   substring rather than the class. Recover with
   `git show 367a807e:public/assets/css/marketing-2026.css` if the block ever returns. */

/* ⛔ The TRAIL block (.m-trailwrap, .m-trailscroll, .m-trail and its .o/.f/.val/.stt
   cells, .s--go/.s--done/.s--hold and .m-trail__sum) was deleted here on 2026-08-16
   with homepage section 03, the only thing that ever used it. Two rules elsewhere
   went with it: `.m-trail__sum` in the 1080px block and its entry in the shared
   one-column rule at ~2151. Recover with `git show 20ae4a19`. */

/* ================================================================= TILES === */
/* Six-column track, cards spanning two — see "3-UP GRIDS" below for why. */
.m-tiles { display: grid; grid-template-columns: repeat(var(--m-cols, 6), minmax(0, 1fr)); gap: 14px; }
.m-tiles > * { grid-column: span var(--m-span, 2); }
.m-tiles--2 { --m-cols: 2; --m-span: 1; }
.m-tiles--4 { --m-cols: 4; --m-span: 1; }
.m-tile {
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise2);
  padding: 24px 22px; transition: .18s; display: block;
}
.m-sec--raise .m-tile { background: var(--base); }
a.m-tile:hover { border-color: var(--line3); transform: translateY(-3px); }
.m-tile h3 { font-size: 18px; letter-spacing: -.026em; margin: 11px 0 9px; }
.m-tile p { font-size: 14px; color: var(--text2); }
.m-tile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.m-tile__tags span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--text3);
  border: 1px solid var(--line2); padding: 4px 8px; border-radius: 2px;
}
.m-tile__go { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--acc); }
.m-tile ul { margin-top: 14px; display: grid; gap: 9px; }
.m-tile li {
  position: relative; padding-left: 17px; font-size: 13.5px; color: var(--text2);
}
.m-tile li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 1px; background: var(--acc);
}

/* ================================================================= PAINS === */
.m-pains { display: grid; grid-template-columns: repeat(var(--m-cols, 6), minmax(0, 1fr)); gap: 14px; }
.m-pains > * { grid-column: span var(--m-span, 2); }
.m-pain { border: 1px solid var(--line); border-radius: 4px; background: var(--raise2); padding: 26px 24px; }
.m-sec--raise .m-pain { background: var(--base); }
.m-pain h3 { font-size: 20px; letter-spacing: -.03em; margin: 11px 0; color: var(--text2); }
.m-pain h3 em { color: var(--text); }
.m-pain > p { font-size: 14px; color: var(--text2); }
.m-pain ul { margin-top: 16px; display: grid; gap: 10px; }
.m-pain li {
  font-size: 13px; color: var(--text2); padding-top: 10px;
  border-top: 1px solid var(--line2); position: relative; padding-left: 17px;
}
.m-pain li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 8px; height: 1px; background: var(--acc);
}

.m-qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.m-qs div { border-left: 2px solid var(--acc); padding: 5px 0 5px 15px; }
.m-qs b { display: block; font-family: var(--disp); font-size: 14.5px; margin-bottom: 3px; }
.m-qs span { font-size: 13.5px; color: var(--text2); }

.m-ctarow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line2);
}
.m-ctarow em { font-size: 12.5px; color: var(--text3); margin-right: auto; }

/* ========================================================== INTEGRATIONS === */
.m-wire {
  margin-top: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise2);
  padding: clamp(22px, 2.6vw, 32px);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
  gap: clamp(24px, 3vw, 44px); align-items: center;
}
.m-sec--raise .m-wire { background: var(--base); }
.m-wire h3 { font-size: 21px; letter-spacing: -.03em; margin-bottom: 11px; color: var(--text2); }
.m-wire h3 em { color: var(--text); }
.m-wire p { font-size: 14.5px; color: var(--text2); }
.m-conn { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.m-conn span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--text2);
  border: 1px solid var(--line); border-radius: 2px; padding: 8px 12px; background: var(--base);
}
.m-sec--raise .m-conn span { background: var(--raise); }
.m-flows { display: grid; gap: 10px; }
.m-flow {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  border: 1px solid var(--line); border-radius: 3px; padding: 15px 17px; background: var(--base);
}
.m-sec--raise .m-flow { background: var(--raise); }
.m-flow i {
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--acc);
  padding-top: 2px; white-space: nowrap;
}
.m-flow b { display: block; font-family: var(--disp); font-size: 15px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 3px; }
.m-flow em { display: block; font-size: 13.5px; color: var(--text2); }

/* ============================================================== SECURITY === */
.m-sgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line2); border: 1px solid var(--line2); border-radius: 4px; overflow: hidden;
}
.m-sgrid > div { background: var(--base); padding: 23px 21px; }
.m-sec--raise .m-sgrid > div { background: var(--raise); }
.m-sgrid h3 { font-size: 16px; margin-bottom: 8px; }
.m-sgrid p { font-size: 13.5px; color: var(--text2); }

.m-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.m-chips span {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2);
  border: 1px solid var(--line); border-radius: 2px; padding: 7px 12px;
}
.m-chips i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

.m-note {
  margin-top: 26px; border: 1px solid var(--line); border-left: 2px solid var(--acc);
  background: var(--acc-w); padding: 19px 21px; border-radius: 0 3px 3px 0;
}
/* ⚠ `> b`, NOT a descendant `b`. This rule styles the note's TITLE — the direct
   child that opens every .m-note. As a descendant selector it also caught every
   inline <b> in the note's BODY and turned it into a full-width, 16px Space
   Grotesk block with a 6px bottom margin.
   Measured on /pricing §04: "…every leaseholder is £0 either way." rendered as
   three lines, with a 1167px-wide "£0" heading sitting between them. A price
   inside a sentence is emphasis, not a heading.
   All nine .m-note instances open with a direct-child <b>, so scoping the
   selector changes nothing about the titles. */
.m-note > b { display: block; font-family: var(--disp); font-size: 16px; margin-bottom: 6px; }
.m-note p { font-size: 13.5px; color: var(--text2); }
/* Inline emphasis in note body copy — same treatment as .m-kspec dd b. */
.m-note p b { color: var(--text); font-weight: 600; }
.m-note a { color: var(--acc); font-weight: 600; }

/* =================================================================== FAQ === */
.m-faq { border-top: 1px solid var(--line); }
.m-faq details { border-bottom: 1px solid var(--line2); }
.m-faq summary {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 18px;
  gap: 15px; align-items: center; padding: 19px 4px;
  cursor: pointer; list-style: none; transition: .14s;
}
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary:hover h3 { color: var(--acc); }
.m-faq__q { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--text3); }
.m-faq h3 { font-size: 17px; font-weight: 500; font-family: var(--sans); letter-spacing: -.012em; transition: .14s; }
/* ⚠ The category cell is ALWAYS emitted, empty when a group supplies no `cat`.
   It has to carry this class even when empty: at <=900px the summary grid drops
   to three columns and this rule is what removes the third child. A classless
   placeholder kept its cell and pushed .m-faq__ic onto a second row under the
   question — on every platform page, use-case page, guide and /faq item, none
   of which supply a category. */
.m-faq__cat {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text3);
  border: 1px solid var(--line2); border-radius: 2px; padding: 4px 9px;
}
.m-faq__ic { position: relative; width: 12px; height: 12px; justify-self: end; }
.m-faq__ic::before, .m-faq__ic::after { content: ""; position: absolute; background: var(--text3); transition: .2s; }
.m-faq__ic::before { left: 0; top: 5.5px; width: 12px; height: 1px; }
.m-faq__ic::after { left: 5.5px; top: 0; width: 1px; height: 12px; }
.m-faq details[open] .m-faq__ic::after { transform: scaleY(0); }
.m-faq details[open] .m-faq__q { color: var(--acc); }
.m-faq__a { padding: 0 44px 24px 67px; font-size: 14.5px; color: var(--text2); max-width: 92ch; }
.m-faq__a a { color: var(--acc); font-weight: 600; }
.m-faq__a p + p { margin-top: 12px; }
.m-faq__a ul { margin-top: 12px; display: grid; gap: 8px; }
.m-faq__a li { position: relative; padding-left: 17px; }
.m-faq__a li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--acc); }
.m-faq__more { display: flex; align-items: center; gap: 16px; padding-top: 24px; font-size: 13px; color: var(--text3); }
.m-faq__more a { margin-left: auto; }

/* FAQ topic groups — /faq only */
.m-faqgroup + .m-faqgroup { margin-top: clamp(38px, 4vw, 58px); }
.m-faqgroup__hd { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.m-faqgroup__hd h3 { font-size: 22px; letter-spacing: -.03em; }
.m-faqgroup__hd span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }

/* ============================================================ SPEC + BUY === */
.m-buy {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(24px, 3vw, 48px); align-items: start;
}
.m-kspec { border-top: 1px solid var(--line); }
.m-kspec > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--line2);
}
.m-kspec dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text3); padding-top: 3px;
}
.m-kspec dd { margin: 0; font-size: 14px; color: var(--text2); }
.m-kspec dd b { color: var(--text); font-weight: 600; }

.m-panel {
  position: sticky; top: 134px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise2);
  padding: clamp(22px, 2.6vw, 28px);
}
.m-sec--raise .m-panel { background: var(--base); }
.m-price { display: flex; align-items: baseline; gap: 9px; margin: 10px 0 2px; }
.m-price b { font-family: var(--disp); font-size: 42px; letter-spacing: -.04em; line-height: 1; }
.m-price span { font-size: 14px; color: var(--text2); }
.m-price__note { font-size: 13px; color: var(--text2); margin-top: 8px; }
.m-rate { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line2); }
.m-rate div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 13px; color: var(--text2); }
.m-rate div b { font-family: var(--mono); font-size: 12px; color: var(--text); font-weight: 500; white-space: nowrap; }
.m-incl { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line2); display: grid; gap: 9px; }
.m-incl li { position: relative; padding-left: 20px; font-size: 13px; color: var(--text2); }
.m-incl li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--acc); border-bottom: 1.5px solid var(--acc);
  transform: rotate(-45deg);
}
/* The pricing page carried these two as inline styles on the panel — the last
   survivors of the pattern the polish pass promoted into .m-hero__aside. They
   are rules, not one page's exception. */
.m-panel h3 {
  font-family: var(--disp); font-size: 20px; letter-spacing: -.03em;
  margin: 10px 0 12px; color: var(--text);
}
.m-panel > p { font-size: 13.5px; color: var(--text2); }
.m-panel .m-btn { width: 100%; margin-top: 10px; }
.m-panel .m-btn:first-of-type { margin-top: 20px; }
.m-panel__micro {
  margin-top: 11px; text-align: center; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text3);
}

/* =============================================================== PRICING === */
.m-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.m-plan {
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise2);
  padding: 26px 24px; display: flex; flex-direction: column;
}
.m-sec--raise .m-plan { background: var(--base); }
.m-plan--key { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
/* The flag is taken OUT of flow and hung on the top border. In flow it added
   its own height to the highlighted card only, so that card's price sat lower
   than the two beside it and the three stopped reading as one row. */
.m-plan { position: relative; }
.m-plan__flag {
  position: absolute; top: -10px; left: 24px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc-ink); background: var(--acc); border-radius: 2px; padding: 4px 9px;
}
.m-plan h3 { font-size: 20px; letter-spacing: -.03em; margin-bottom: 8px; }
.m-plan > .m-lbl + h3 { margin-top: 9px; }
.m-plan > p { font-size: 13.5px; color: var(--text2); }
.m-plan .m-price { margin-top: 18px; }
.m-plan .m-incl { flex: 1; }
.m-plan .m-btn { width: 100%; margin-top: 20px; }

.m-toggle {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--line); border-radius: 2px; padding: 3px; background: var(--raise2);
  margin-bottom: 24px;
}
.m-toggle button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text2); background: transparent; border: 0; border-radius: 2px;
  padding: 9px 15px; cursor: pointer; transition: .14s;
}
.m-toggle button.is-on { background: var(--acc); color: var(--acc-ink); }

.m-usage { border-top: 1px solid var(--line); margin-top: clamp(30px, 3vw, 44px); }
.m-usage > div {
  display: grid; grid-template-columns: minmax(0, 1.1fr) 130px minmax(0, 1.4fr);
  gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line2); align-items: baseline;
}
.m-usage dt { font-size: 14.5px; color: var(--text); font-weight: 600; }
.m-usage .m-usage__v { font-family: var(--mono); font-size: 15px; color: var(--acc); }
.m-usage dd { margin: 0; font-size: 13.5px; color: var(--text2); }

/* =============================================================== EXAMPLES === */
.m-gal { display: grid; grid-template-columns: repeat(var(--m-cols, 6), minmax(0, 1fr)); gap: 18px; }
.m-gal > * { grid-column: span var(--m-span, 2); }
.m-doc {
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise2);
  overflow: hidden; display: flex; flex-direction: column; transition: .18s;
}
.m-sec--raise .m-doc { background: var(--base); }
.m-doc:hover { border-color: var(--line3); transform: translateY(-3px); }
/* The WHOLE first page, scaled to fit — not the top 232px of it. A fixed
   crop height showed only the header band of each document, and on a QR
   label sheet or a quote that band is white, so seven of the eleven cards
   looked like empty boxes. These previews are the strongest thing on the
   site; they have to be legible. */
.m-doc__fig {
  background: var(--raise3); padding: 18px; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.m-doc__fig img {
  max-width: 100%; max-height: 100%; width: auto; object-fit: contain;
  border: 1px solid var(--line); background: #fff; box-shadow: 0 12px 30px -16px var(--shadow);
}
.m-doc__b { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.m-doc h3 { font-size: 17px; letter-spacing: -.026em; margin: 9px 0; }
.m-doc p { font-size: 13.5px; color: var(--text2); }
.m-doc__meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text3);
}
.m-doc__act { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; }
.m-doc__act .m-btn { flex: 1; }

/* ================================================================= VIDEOS === */
.m-vgrid { display: grid; grid-template-columns: repeat(var(--m-cols, 6), minmax(0, 1fr)); gap: 18px; }
.m-vgrid > * { grid-column: span var(--m-span, 2); }
.m-vcard { border: 1px solid var(--line); border-radius: 4px; background: var(--raise2); overflow: hidden; transition: .18s; display: block; }
.m-sec--raise .m-vcard { background: var(--base); }
.m-vcard:hover { border-color: var(--line3); transform: translateY(-3px); }
.m-vcard__fig { position: relative; display: block; background: #000; }
.m-vcard__fig img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.m-vcard__fig i {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
/* A dark disc behind the glyph. A bare white triangle disappeared entirely on
   the pale title-card thumbnails, which are most of the library — the badge
   has to read on ANY poster, not on the one that happened to be checked. */
.m-vcard__fig i::before {
  content: ""; position: absolute; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(12, 16, 22, .74); box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.m-vcard__fig i svg { position: relative; width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.m-vcard:hover .m-vcard__fig i::before { background: var(--acc); }
.m-vcard__b { display: block; padding: 18px 20px 20px; }
.m-vcard h3 { font-size: 16.5px; letter-spacing: -.024em; margin-bottom: 8px; }
.m-vcard p { font-size: 13.5px; color: var(--text2); }
/* Added by the video facade once the embed is live: an <a> with an iframe in
   it is no longer a link, so the YouTube destination moves into the body. */
.m-vcard__out {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acc); text-decoration: none;
}
.m-vcard__out:hover { text-decoration: underline; }
.m-vcard__meta {
  margin-top: 12px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text3);
}

/* ================================================================== FORM === */
.m-formwrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(26px, 3.4vw, 54px); align-items: start;
}
/* The three facts that sit between the contact heading and the form itself.
   They live INSIDE #contact-form on purpose: every "Book a call" on the site jumps
   here, which scrolls past the hero aside that used to be the only place answering
   "what actually happens next?". Not a card — it must read as part of the heading. */
.m-form__facts {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  font-size: 13px; color: var(--text2);
}
.m-form__facts li { display: flex; align-items: baseline; gap: 6px; }
.m-form__facts b { color: var(--text); font-weight: 600; }

.m-form { border: 1px solid var(--line); border-radius: 4px; background: var(--raise2); padding: clamp(22px, 2.8vw, 32px); }
.m-sec--raise .m-form { background: var(--base); }
.m-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.m-field { display: grid; gap: 7px; }
.m-field--full { grid-column: 1 / -1; }
.m-field label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text3);
}
.m-field input, .m-field select, .m-field textarea {
  font-family: var(--sans); font-size: 15px; color: var(--text);
  background: var(--raise); border: 1px solid var(--line); border-radius: 2px;
  padding: 12px 14px; width: 100%; transition: .14s;
}
.m-field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.m-field input:focus, .m-field select:focus, .m-field textarea:focus {
  outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-w);
}
.m-field__hint { font-size: 12px; color: var(--text3); }
.m-field__lbl {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 8px;
}
.m-field__err { font-size: 12.5px; color: var(--bad); }
.m-field input[aria-invalid="true"], .m-field textarea[aria-invalid="true"], .m-field select[aria-invalid="true"] { border-color: var(--bad); }
.m-check { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; font-size: 13.5px; color: var(--text2); }
.m-check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--acc); }
.m-check a { color: var(--acc); font-weight: 600; }
/* Contact call slot picker. Starts [hidden]; marketing-2026.js reveals it only
   once availability has loaded, and hides the coarse preference selects at the
   same moment. Both rails scroll horizontally rather than wrapping, so a long
   run of days never pushes the form taller than the message box beside it. */
/* Contact call slot picker — two native selects, so the only styling needed is
   the two-up layout. The selects themselves inherit .m-field label/select.
   min-width:0: .m-slots is a grid item of .m-form__grid and grid items default
   to min-width:auto, which would let a long option push the form sideways.
   auto-fit/minmax stacks the pair on a very narrow phone without a media query. */
.m-slots { gap: 10px; min-width: 0; }
.m-slots__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; min-width: 0;
}
.m-slots select:disabled { color: var(--text3); background: var(--wash); cursor: not-allowed; }

.m-form__foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line2); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.m-form__foot p { font-size: 12.5px; color: var(--text3); margin-right: auto; max-width: 42ch; }
/* Honeypot wrapper. Off-screen rather than display:none, so a bot that skips
   hidden fields still fills it. Also passed to _bot_guard_fields.php as
   $botGuardHiddenClass, because style.css (and its .sr-only) is not loaded
   under the marketing layout. */
.m-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Shared bot-guard block from app/Views/partials/_bot_guard_fields.php.
   The fallback note is hidden until the Turnstile widget genuinely fails —
   the guard fails CLOSED, so a challenge that never loads would otherwise be a
   dead end with no visible cause. */
.bot-guard-verify { margin-top: 18px; display: grid; gap: 8px; }
.bot-guard-verify__label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text3);
}
.bot-guard-verify__fallback { font-size: 12.5px; color: var(--bad); max-width: 52ch; }
.bot-guard-verify__fallback a { color: var(--acc); font-weight: 600; }

.m-alert { border: 1px solid var(--line); border-left: 2px solid var(--acc); background: var(--acc-w); padding: 16px 19px; border-radius: 0 3px 3px 0; margin-bottom: 24px; }
.m-alert--bad { border-left-color: var(--bad); background: rgba(179, 64, 47, .07); }
.m-alert b { display: block; font-family: var(--disp); font-size: 15.5px; margin-bottom: 5px; }
.m-alert p { font-size: 13.5px; color: var(--text2); }

.m-side { display: grid; gap: 14px; }
.m-sidecard { border: 1px solid var(--line); border-radius: 4px; background: var(--raise2); padding: 22px 20px; }
.m-sec--raise .m-sidecard { background: var(--base); }
.m-sidecard h3 { font-size: 16.5px; margin: 9px 0; }
.m-sidecard p { font-size: 13.5px; color: var(--text2); }
.m-sidecard dl { margin-top: 14px; border-top: 1px solid var(--line2); }
.m-sidecard dl > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line2); font-size: 13px; }
.m-sidecard dl > div:last-child { border-bottom: 0; }
.m-sidecard dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text3); padding-top: 3px; }
.m-sidecard dd { margin: 0; color: var(--text2); }

/* ================================================= GUIDES / PROSE / TOC === */
.m-guide { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 3.6vw, 64px); align-items: start; }
.m-toc { position: sticky; top: 118px; }
.m-toc h2 { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; }
.m-toc ol { display: grid; border-top: 1px solid var(--line2); counter-reset: toc; }
.m-toc ol a {
  display: grid; grid-template-columns: 26px 1fr; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--line2);
  font-size: 13.5px; color: var(--text2); transition: .14s;
}
.m-toc ol a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: 10.5px; color: var(--text3); padding-top: 2px;
}
.m-toc ol a:hover, .m-toc ol a.is-on { color: var(--acc); }
.m-toc ol a.is-on::before { color: var(--acc); }
.m-toc__cta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line2); display: grid; gap: 9px; }
.m-toc__cta .m-btn { width: 100%; }

.m-prose { max-width: 74ch; }
.m-prose > * + * { margin-top: 18px; }
.m-prose .m-steps > li + li, .m-prose .m-rows > * + * { margin-top: 0; }
.m-prose h2 {
  font-size: clamp(23px, 2.6vw, 31px); letter-spacing: -.032em;
  margin-top: clamp(40px, 4vw, 58px); padding-top: clamp(26px, 2.6vw, 34px);
  border-top: 1px solid var(--line2); scroll-margin-top: 118px;
}
.m-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.m-prose h2 .m-prose__n { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--acc); margin-bottom: 10px; font-weight: 400; }
.m-prose h3 { font-size: 18px; letter-spacing: -.026em; margin-top: 30px; }
/* ...but a classed component inside prose brings its own rhythm. `.m-steps h3`
   sets font-size and margin-bottom and wins on source order, yet never touches
   margin-top — so the 30px above leaked in and pushed every guide step's title
   out of line with its own number. Same for the traps and the related rows. */
.m-prose :is(.m-steps, .m-rows, .m-faq, .m-prose__key) :is(h3, b) { margin-top: 0; }
.m-prose p { font-size: 15.5px; color: var(--text2); }
.m-prose strong { color: var(--text); font-weight: 600; }
.m-prose a { color: var(--acc); font-weight: 600; }
/* :not([class]) throughout — a classed list inside prose is a COMPONENT
   (.m-steps, .m-rows, .m-incl…) and brings its own layout. Without this the
   prose rules stack on top: .m-steps rendered every step numbered twice and
   indented by the prose gutter. */
.m-prose ul:not([class]), .m-prose ol:not([class]) { display: grid; gap: 10px; }
.m-prose ul:not([class]) > li, .m-prose ol:not([class]) > li {
  position: relative; padding-left: 20px; font-size: 15px; color: var(--text2);
}
.m-prose ul:not([class]) > li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 1px; background: var(--acc);
}
.m-prose ol:not([class]) { counter-reset: pr; }
.m-prose ol:not([class]) > li { counter-increment: pr; padding-left: 30px; }
.m-prose ol:not([class]) > li::before {
  content: counter(pr, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 11px; color: var(--acc);
}
.m-prose figure { border: 1px solid var(--line); border-radius: 4px; background: var(--raise2); padding: 14px 14px 0; overflow: hidden; }
.m-sec--raise .m-prose figure { background: var(--base); }
.m-prose figure img { width: 100%; border: 1px solid var(--line); border-bottom: 0; background: #fff; box-shadow: 0 14px 34px -20px var(--shadow); }
.m-prose figcaption { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--text3); padding: 12px 0; }
.m-prose figcaption b { color: var(--acc); font-weight: 500; letter-spacing: .1em; }
.m-prose__key {
  border: 1px solid var(--line); border-left: 2px solid var(--acc);
  background: var(--acc-w); padding: 18px 20px; border-radius: 0 3px 3px 0;
}
.m-prose__key b { display: block; font-family: var(--disp); font-size: 15.5px; margin-bottom: 6px; }
.m-prose__key p { font-size: 14px; }
.m-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.m-prose th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text3); text-align: left; font-weight: 400; padding: 12px 14px;
  background: var(--raise3); border-bottom: 1px solid var(--line);
}
.m-prose td { padding: 12px 14px; border-bottom: 1px solid var(--line2); color: var(--text2); vertical-align: top; }
.m-prose__tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }

/* ======================================================= STEPS / NUMBERS === */
.m-steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.m-steps > li {
  display: grid; grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px); padding: 24px 0; border-bottom: 1px solid var(--line2);
}
.m-steps__n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--acc); padding-top: 4px; }
.m-steps h3 { font-size: 19px; letter-spacing: -.028em; margin-bottom: 9px; }
.m-steps p { font-size: 14.5px; color: var(--text2); }
.m-steps__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.m-steps__tags span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--text3);
  border: 1px solid var(--line2); padding: 4px 8px; border-radius: 2px;
}

/* ============================================================ SPLIT PANE === */
.m-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 52px); align-items: center;
}
.m-split--wide-l { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.m-split--wide-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.m-split h3 { font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -.032em; margin-bottom: 12px; color: var(--text2); }
.m-split h3 em { color: var(--text); }
.m-split p { font-size: 15px; color: var(--text2); }
.m-shot {
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise2);
  padding: 16px 16px 0; overflow: hidden;
}
.m-sec--raise .m-shot { background: var(--base); }
.m-shot img { width: 100%; border: 1px solid var(--line); border-bottom: 0; background: #fff; box-shadow: 0 20px 46px -24px var(--shadow); }
.m-shot figcaption { font-family: var(--mono); font-size: 10.5px; color: var(--text3); padding: 12px 0; }
.m-shot figcaption b { color: var(--acc); font-weight: 500; letter-spacing: .1em; }

/* ============================================================ CARDS/LIST === */
.m-cards { display: grid; grid-template-columns: repeat(var(--m-cols, 6), minmax(0, 1fr)); gap: 14px; }
.m-cards > * { grid-column: span var(--m-span, 2); }
.m-cards--2 { --m-cols: 2; --m-span: 1; }
.m-card {
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise2);
  padding: 22px 20px; display: block; transition: .18s;
}
.m-sec--raise .m-card { background: var(--base); }
a.m-card:hover { border-color: var(--line3); transform: translateY(-3px); }
.m-card h3 { font-size: 17px; letter-spacing: -.026em; margin: 9px 0; }
.m-card p { font-size: 13.5px; color: var(--text2); }
.m-card__go { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--acc); }

.m-rows { border-top: 1px solid var(--line); }
.m-rows > * {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line2); transition: .14s;
}
.m-rows a:hover { background: var(--wash); }
.m-rows h3 { font-size: 16.5px; letter-spacing: -.024em; margin-bottom: 5px; }
.m-rows p { font-size: 13.5px; color: var(--text2); }
.m-rows__go { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); white-space: nowrap; }

/* ================================================================ END/CTA === */
.m-end { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding-block: clamp(58px, 6.6vw, 98px); }
.m-end::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 420px at 24% 100%, var(--acc-glow), transparent 66%);
}
.m-end__in {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
/* ⚠ --solo is a DESIGNED treatment, not a leftover. The polish pass redesigned
   .m-hero__in--solo for exactly this reason and missed its twin here, so
   /contact and all 15 guides closed with a 760px block hugging the left of a
   1300px shell and ~540px of dead space beside it. Centred measure, a rule
   above the buttons, everything on one axis — it now reads as deliberate. */
.m-end__in--solo {
  grid-template-columns: minmax(0, 1fr); max-width: 720px;
  margin-inline: auto; text-align: center; justify-items: center;
}
.m-end__in--solo::before {
  content: ""; display: block; width: 88px; height: 2px; background: var(--acc); margin-bottom: 26px;
}
.m-end__in--solo p { max-width: 58ch; margin-inline: auto; }
.m-end__in--solo .m-end__cta { justify-content: center; }
.m-end h2 { font-size: clamp(30px, 4vw, 52px); letter-spacing: -.038em; margin-top: 14px; color: var(--text2); }
.m-end h2 em { color: var(--text); }
.m-end p { color: var(--text2); font-size: 16.5px; max-width: 54ch; margin-top: 16px; }
.m-end__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.m-end__micro { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); }
.m-endpages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.m-endpages a { border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: #fff; transition: .2s; position: relative; }
.m-endpages a:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -18px var(--shadow); }
.m-endpages img { width: 100%; }
.m-endpages b {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 7px;
  background: var(--badge); color: #F3F0EA;
  font-family: var(--mono); font-size: 9px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 400;
}

/* ================================================================ FOOTER === */
.m-ft {
  background: var(--sunk); border-top: 1px solid var(--line2);
  color: var(--text3); font-size: 14px; padding-block: clamp(44px, 5vw, 64px) 0;
}
.m-ft__top {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 42px); padding-bottom: 40px; border-bottom: 1px solid var(--line2);
}
.m-ft__brand img { height: 29px; margin-bottom: 16px; }
.m-ft__brand p { font-size: 14px; max-width: 34ch; }
.m-ft__contact { margin-top: 18px; display: grid; gap: 9px; }
.m-ft__contact a { display: flex; align-items: center; gap: 9px; color: var(--text2); font-size: 13.5px; }
.m-ft__contact a:hover { color: var(--acc); }
.m-ft__contact svg { width: 14px; height: 14px; opacity: .55; flex: 0 0 auto; }
.m-ft__dis { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line2); font-size: 12px; color: var(--text3); max-width: 38ch; line-height: 1.55; }
.m-ft__dis a { color: var(--acc); }
.m-ft h2 { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text); margin-bottom: 14px; }
.m-ft ul { display: grid; gap: 9px; }
.m-ft ul a { font-size: 13.5px; }
.m-ft ul a:hover { color: var(--text); }
.m-ft__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.m-ft__badges img { height: 38px; width: auto; }
.m-ft__bot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 20px 0 28px; font-size: 12.5px; color: var(--text3);
}
.m-ft__mark { font-family: var(--disp); font-size: 12px; font-weight: 700; letter-spacing: .3em; color: var(--line3); }
.m-ft__legal { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.m-ft__legal a:hover { color: var(--text2); }
.m-ft__legal button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.m-ft__legal button:hover { color: var(--text2); }

/* ======================================================= OVERLAYS / MISC === */
.m-sticky {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 16px;
  padding: 11px 14px 11px 20px;
  border: 1px solid var(--line); border-radius: 3px;
  background: color-mix(in srgb, var(--raise) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px var(--shadow); max-width: calc(100vw - 32px);
}
@supports not (backdrop-filter: blur(4px)) { .m-sticky { background: var(--raise); } }
/* One bottom-fixed overlay at a time. The cookie banner is z-index 190 against the
   band's 90 and both sit at the same inset, so before 2026-08-16 the banner covered
   the band's opening words on first paint — the exact collision the band was scoped
   to two pages to avoid. Consent is a legal gate and wins; the band waits its turn.
   Depends on the banner being rendered BEFORE the band in layout/marketing.php. */
[data-cookie-banner]:not([hidden]) ~ .m-sticky { display: none; }
.m-sticky p { font-size: 13.5px; color: var(--text2); }
.m-sticky b { color: var(--text); font-weight: 600; }
.m-sticky__x {
  background: none; border: 0; cursor: pointer; color: var(--text3);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.m-sticky__x svg { width: 11px; height: 11px; }

.m-cookie {
  position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 190;
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise);
  box-shadow: 0 30px 70px var(--shadow);
  padding: 22px 24px; max-width: 620px;
}
.m-cookie h2 { font-size: 18px; margin-bottom: 8px; }
.m-cookie p { font-size: 13.5px; color: var(--text2); }
.m-cookie p + p { margin-top: 9px; }
.m-cookie a { color: var(--acc); font-weight: 600; }
.m-cookie__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.m-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.m-modal.is-open { display: flex; }
.m-modal__scrim { position: absolute; inset: 0; background: rgba(10, 14, 22, .55); }
.m-modal__box {
  position: relative; width: min(520px, 100%);
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise);
  padding: clamp(24px, 3vw, 34px); box-shadow: 0 40px 100px var(--shadow);
}
.m-modal__box h2 { font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.03em; margin: 12px 0 10px; color: var(--text2); }
.m-modal__box h2 em { color: var(--text); }
.m-modal__box p { font-size: 14.5px; color: var(--text2); }
.m-modal__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.m-modal__x {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; color: var(--text2);
}
.m-modal__x svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------- legal ---
   ⚠ LOAD-BEARING. The three legal document partials carry their own <style>
   blocks and open by aliasing their internal names onto --res-* tokens:

       #legal-terms { --gold: var(--res-gold); --t1: var(--res-t1); … }

   Those --res-* tokens were defined ONLY in landing-desktop.css, which this
   branch no longer loads on marketing pages — so without this block every
   colour in Terms, Privacy and Client Portal Terms resolves to nothing.
   (layout/legal-app.php still loads landing-desktop.css for the in-app copies
   of the same partials, which is why those were unaffected.)

   Mapped onto the Bone palette rather than restored verbatim, so the legal
   documents look like the rest of the redesigned site. The four status hues
   are kept close to their originals because the documents use them to mean
   something, not to decorate. */
.lp-page--legal {
  /* The partials also read these two directly, with no fallback on the font:
     `font-family: var(--lp-font-sans)` would leave the documents in the
     browser's default serif. The sticky-sidebar offset does carry a 72px
     fallback, but our header is 70px, so set it properly. */
  --lp-font-sans: var(--sans);
  --lp-header-height: var(--hdr-h);

  --res-gold: var(--acc);
  --res-gold2: var(--acc-2);
  --res-s1: var(--base);
  --res-s2: var(--raise);
  --res-s3: var(--raise2);
  --res-s4: var(--raise3);
  --res-bd: var(--line);
  --res-bd2: var(--line2);
  --res-bd3: var(--line2);
  --res-t1: var(--text);
  --res-t2: var(--text2);
  --res-t3: var(--text3);
  --res-t4: var(--line3);
  --res-green: var(--ok);
  --res-green2: var(--ok);
  --res-green-dim: rgba(47, 143, 99, .16);
  --res-blue: var(--acc);
  --res-blue-dim: var(--acc-w);
  --res-amber: #8A5A00;
  --res-amber-dim: rgba(138, 90, 0, .12);
  --res-red: var(--bad);
  --res-red-dim: rgba(179, 64, 47, .12);
  --res-purple: #4338CA;
  --res-purple-dim: rgba(67, 56, 202, .12);
}

/* ⛔ THE LEGAL TEXT MUST NOT DEPEND ON JAVASCRIPT.

   The three legal partials hide every section with `.reveal{opacity:0}` and
   reveal it with `.reveal.visible{animation:fade-up …}` — the class was added
   by an IntersectionObserver that lived in landing.js. This branch does not
   load landing.js, so on /terms, /privacy and /client-portal-terms the class
   was never added, the sections stayed at opacity 0, and the page was BLANK
   below the first screen. Caught by rendering the mobile page and comparing it
   against the in-app copy, which still loads the old bundle.

   Fixed here declaratively rather than by re-adding the observer: the resting
   state is visible, full stop. marketing-2026.js still adds `.visible` so the
   fade plays for those who can see it, but nothing legally required is waiting
   on a script, an animation frame or an observer that may never fire.

   ⚠ `html body` IS LOAD-BEARING, not decoration. The partials' <style> blocks
   sit INSIDE <body>, so at EQUAL specificity they win on source order —
   a bare `#legal-x .reveal` here ties with their `#legal-x .reveal{opacity:0}`
   and loses. Same trick legal-documents.css already uses for `.reveal.visible`
   and for the same reason. */
html body #legal-terms .reveal,
html body #legal-privacy .reveal,
html body #legal-portal-terms .reveal,
html body #legal-terms .reveal.visible,
html body #legal-privacy .reveal.visible,
html body #legal-portal-terms .reveal.visible {
  opacity: 1;
  /* The fade is REMOVED here, not merely overridden. `fade-up` starts at
     opacity 0, and while an animation is running its keyframes beat any
     declarative rule — so with the animation alive the text is readable only
     if the animation finishes. It does not always: successive renders of the
     same three pages came back with 0, 27 and 33 blank bands out of 38.
     Legal text does not get to be intermittent. */
  animation: none !important;
  transform: none !important;
}

/* legal document shell */
.m-legal__title {
  font-family: var(--disp); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(38px, 5.2vw, 64px); margin: 18px 0 0; color: var(--text);
}
.m-legal { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(28px, 3.6vw, 60px); align-items: start; }
.m-legal__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line2);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3);
}
.m-legal__meta b { color: var(--text2); font-weight: 500; }

/* ================================================= CAPABILITY LIST (DOES) ===
   Two columns of flat, verb-first statements. Deliberately not cards: cards
   invite a headline and a paragraph, and this section exists precisely because
   the rest of the page is headlines and paragraphs. One line, one capability.
   ========================================================================== */
.m-does {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 52px);
  border-top: 1px solid var(--line);
}
.m-does li {
  position: relative; padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--line2);
  font-size: 14.5px; color: var(--text2);
}
.m-does li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--acc); border-bottom: 1.5px solid var(--acc);
  transform: rotate(-45deg);
}
/* Inside the guide prose the measure is already narrow (74ch), so two columns
   would give ~30 characters a line. One column there. */
.m-does--one { grid-template-columns: minmax(0, 1fr); }
/* Sits under the left-hand column, so without real separation it reads as a
   thirteenth list item rather than a footnote to the whole list. */
.m-does__note {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text3); max-width: 74ch;
}

/* ============================================ 3-UP GRIDS: CENTRED LAST ROW ===
   Every 3-up card grid is laid out on SIX columns with each card spanning two,
   which is dimensionally IDENTICAL to three columns: for gap g and width W a
   third is (W-2g)/3, and two of six columns plus the gap between them is
   2(W-5g)/6 + g = (W-2g)/3. Nothing moves.

   The six-column track exists so a HALF-column offset is expressible. That is
   what lets a last row holding one or two cards sit centred instead of hanging
   off the left edge — /example-outputs had a lone fourth tile and /videos had
   four categories rendering a single card each, all left-aligned under a full
   row above them.

   .m-sgrid is deliberately NOT in this set: it is a hairline mosaic (1px gap
   over a background), so a centred short row would leave the border colour
   showing at both ends. Keep its cell counts at multiples of three instead.
   ========================================================================== */
:is(.m-tiles, .m-cards, .m-gal, .m-vgrid, .m-pains):not(.m-tiles--2):not(.m-tiles--4):not(.m-cards--2) > :nth-child(3n+1):nth-last-child(1) {
  grid-column: 3 / span 2;
}
:is(.m-tiles, .m-cards, .m-gal, .m-vgrid, .m-pains):not(.m-tiles--2):not(.m-tiles--4):not(.m-cards--2) > :nth-child(3n+1):nth-last-child(2) {
  grid-column: 2 / span 2;
}

/* =============================================== HERO ASIDE (SOLO HEROES) ===
   /pricing proved the pattern: its hero's right column is a worked-example
   panel, not an artefact, and it is the best-looking hero on the site. This
   promotes that inline-styled <aside class="m-panel" style="position:static">
   into a real component, so the 30-odd pages that had NO right column stop
   rendering a two-column hero with one column missing.
   ========================================================================== */
/* The store-badge row on /download is not a chip strip — it is two images, and
   the pill rule's hairline and top padding fenced them off from the lede above.
   Was an inline style on the only page that renders it. */
.m-hero__pills--plain { border-top: 0; padding-top: 0; margin-top: 26px; }

/* ============================================== APP-STORE BADGES IN A HERO ===
   One treatment for every hero that promotes the store listings — the homepage,
   /download and the eight paid landing pages. They previously did three
   different things (a missing block, a bare .m-hero__pills--plain with no image
   sizing, and .m-ft__badges — a FOOTER class, which the print stylesheet hides
   with display:none). Sizing lives here, not on the <img> attributes, so a badge
   is the same height wherever it appears. */
.m-hero__store {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 22px;
}
.m-hero__store > .m-lbl { flex: 0 0 auto; }
.m-hero__store__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.m-hero__store__badges a { display: block; line-height: 0; border-radius: 7px; transition: .18s; }
.m-hero__store__badges a:hover { transform: translateY(-2px); }
.m-hero__store__badges img { display: block; height: 44px; width: auto; }
@media (max-width: 900px) {
  .m-hero__store__badges img { height: 40px; }
}

.m-hero__aside {
  position: static;
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise2);
  padding: clamp(22px, 2.4vw, 28px);
}
.m-hero__aside h2 {
  font-family: var(--disp); font-size: 19px; letter-spacing: -.03em;
  margin: 10px 0 14px; color: var(--text);
}
.m-hero__aside > .m-lbl + h2 { margin-top: 9px; }
.m-hero__aside dl { display: grid; }
.m-hero__aside dl > div {
  display: grid; grid-template-columns: minmax(0, 122px) minmax(0, 1fr);
  gap: 14px; padding: 10px 0; border-top: 1px solid var(--line2);
}
.m-hero__aside dl > div:first-child { border-top: 0; padding-top: 0; }
.m-hero__aside dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3); padding-top: 3px;
}
/* margin: 0 - this was the ONLY `dd` rule in the file that omitted it, so the
   UA's default 40px left indent survived. Above 900px the <dl> is two
   columns and the indent is invisible; below it the columns collapse and
   every "At a glance" value sat 40px right of its own label, aligned to
   nothing. .m-chain__key dd, .m-kspec dd, .m-usage dd and .m-sidecard dd
   all zero it already. */
.m-hero__aside dd { margin: 0; font-size: 13.5px; color: var(--text2); }
.m-hero__aside dd b { color: var(--text); font-weight: 600; }
.m-hero__aside > p { font-size: 13.5px; color: var(--text2); }
.m-hero__aside .m-btn { width: 100%; margin-top: 14px; }
.m-hero__aside__micro {
  margin-top: 11px; text-align: center; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text3);
}

/* ============================================== PLAN COMPARISON (m-vs) ===
   Two columns showing THE SAME month priced under each plan.

   ⚠ This replaces an additive worked example that added a seat bill to a usage
   bill and printed the total. Seat and Usage are mutually exclusive
   (BillingPlanResolutionService::entitlementPlanNow returns one or the other),
   so that total was a number no customer could ever be charged. The whole
   point of this component is that the two columns are ALTERNATIVES — hence one
   shared input panel above them and a hairline, not a plus sign, between.
   ========================================================================== */
.m-vs__basis {
  border: 1px solid var(--line); border-radius: 3px; background: var(--raise2);
  padding: clamp(18px, 2vw, 24px); margin-bottom: 20px;
}
.m-vs__basis h3 {
  font-family: var(--disp); font-size: 17px; letter-spacing: -.026em; margin: 8px 0 12px; color: var(--text);
}
.m-vs__basis ul { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; }
.m-vs__basis li { font-size: 13.5px; color: var(--text2); }
.m-vs__basis li b { font-family: var(--mono); font-size: 12.5px; color: var(--text); font-weight: 500; }
.m-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.m-vs__col {
  border: 1px solid var(--line); border-radius: 3px; background: var(--raise);
  padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column;
}
.m-vs__col--win { border-color: var(--acc); }
.m-vs__col h3 {
  font-family: var(--disp); font-size: 19px; letter-spacing: -.03em; margin: 9px 0 4px; color: var(--text);
}
.m-vs__col > p { font-size: 13.5px; color: var(--text2); }
.m-vs__lines { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line2); }
.m-vs__lines div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 13.5px; color: var(--text2); }
.m-vs__lines div b { font-family: var(--mono); font-size: 12.5px; color: var(--text); font-weight: 500; white-space: nowrap; }
.m-vs__tot {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
}
.m-vs__tot span { font-size: 14px; color: var(--text); font-weight: 600; }
.m-vs__tot b { font-family: var(--disp); font-size: 24px; letter-spacing: -.03em; color: var(--text); }
.m-vs__note { margin-top: 12px; font-size: 13px; color: var(--text2); }

/* ================================================= DOCUMENT LIGHTBOX (m-lbx) ===
   The preview half of /example-outputs.

   ⚠ WHY THIS EXISTS. LandingController::exampleOutputsRows() has always
   supplied a multi-page preview contract — preview_src_extra,
   preview_scroll_stack, preview_modal_caption, preview_tab_labels,
   preview_tab_nav. The 2026-08-15 rebuild replaced the page body and read NONE
   of it, so 89 page screenshots sitting in
   assets/images/marketing/example_outputs/screenshots/ became unreachable and
   the only way to see a document was to download it. That is the regression
   this component closes.

   ⛔ THE PREVIEW MUST DEGRADE TO A LINK. The trigger is an <a href="<pdf>">, so
   with JS off (or before marketing-2026.js runs) clicking it opens the real
   PDF. The dialog is an upgrade, never a prerequisite. The strongest asset on
   the site does not get to depend on a script.

   Scrolling lives on __pages, not on the dialog, so the header and its
   Download button stay pinned while a 25-page inspection report is read.
   ========================================================================== */
.m-lbx {
  position: fixed; inset: 0; z-index: 240; display: none;
  align-items: center; justify-content: center; padding: clamp(12px, 2.4vw, 34px);
}
.m-lbx.is-open { display: flex; }
.m-lbx__scrim { position: absolute; inset: 0; background: rgba(10, 14, 22, .62); }
.m-lbx__box {
  position: relative; display: flex; flex-direction: column;
  width: min(1080px, 100%); max-height: 100%;
  border: 1px solid var(--line3); border-radius: 4px; background: var(--raise);
  box-shadow: 0 50px 120px var(--shadow); overflow: hidden;
}
.m-lbx__head {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 18px clamp(18px, 2.2vw, 26px); border-bottom: 1px solid var(--line);
  background: var(--raise); flex: 0 0 auto;
}
.m-lbx__head > div:first-child { flex: 1; min-width: 0; }
.m-lbx__head h2 {
  font-family: var(--disp); font-size: 19px; letter-spacing: -.03em;
  margin: 7px 0 0; color: var(--text);
}
.m-lbx__head p { font-size: 13px; color: var(--text2); margin-top: 6px; max-width: 70ch; }
.m-lbx__act { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.m-lbx__x {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 2px;
  cursor: pointer; color: var(--text2); flex: 0 0 auto;
}
.m-lbx__x:hover { border-color: var(--line3); color: var(--text); }
.m-lbx__x svg { width: 12px; height: 12px; }

/* Variant tabs — used when a row supplies preview_tab_labels (QR labels ship a
   standard sheet and a tape-printer sheet, which are two documents, not two
   pages of one). Hidden entirely when there is only one variant. */
.m-lbx__tabs {
  display: flex; gap: 0; padding: 0 clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--line); background: var(--raise); flex: 0 0 auto;
  overflow-x: auto; scrollbar-width: none;
}
.m-lbx__tabs::-webkit-scrollbar { display: none; }

.m-lbx__tabs button {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 12px 2px; margin-right: 24px; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.m-lbx__tabs button.is-on { color: var(--acc); border-bottom-color: var(--acc); }
.m-lbx__tabs button:hover { color: var(--text2); }

.m-lbx__pages {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--raise2); padding: clamp(14px, 2vw, 24px);
  display: grid; gap: clamp(12px, 1.6vw, 20px); justify-items: center;
}
/* The page region is focusable so the arrow keys scroll the document as soon as
   the dialog opens, and the controller focuses it on open. That programmatic
   focus drew the default ring, which read as a stray blue rule under the header
   — visible in the first screenshot of this dialog. Suppress the ring for that
   case and keep a real one for anybody who Tabs here. */
.m-lbx__pages:focus { outline: none; }
.m-lbx__pages:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.m-lbx__pages img {
  display: block; width: 100%; max-width: 820px; height: auto;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 18px 44px -26px var(--shadow);
}
/* A landscape artefact — the 18-column penetration register — squeezed into the
   820px page column is unreadable, so it keeps its own 1× width (set by
   marketing-2026.js from naturalWidth) and the region scrolls sideways instead.
   justify-self:start stops the grid centring an item wider than its track, which
   would push the left edge out of reach of the scroll. */
.m-lbx__pages img.is-wide { width: auto; max-width: none; justify-self: start; }
/* The page counter is metadata, so it is mono — and it is the only thing that
   tells a reader a 25-page document has not simply stopped loading. */
.m-lbx__n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text3); justify-self: center;
}
.m-lbx__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--line);
  background: var(--raise); flex: 0 0 auto;
}
.m-lbx__foot .m-lbx__note {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text3); margin-right: auto;
}
body.m-locked { overflow: hidden; }

/* The preview trigger on a document card. It is an anchor to the PDF; the
   script only adds behaviour. */
.m-doc__act .m-btn--pv { flex: 1; }

/* =============================================== CLOSING BLOCK (m-close) ===
   A quiet end-of-page block for surfaces where the trial CTA is the wrong
   note — the three legal documents and /delete-account. Those four pages ended
   with nothing at all, which left the footer doing the job of a conclusion.
   (The two unsubscribe confirmations already close with the same two links this
   block would add, so they do not render it.)

   Deliberately NOT .m-end: an unsubscribe confirmation that closes by selling
   a free trial reads as not having listened.
   ========================================================================== */
.m-close { border-top: 1px solid var(--line); padding-block: clamp(38px, 4.2vw, 58px); }
.m-close__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; }
.m-close h2 {
  font-family: var(--disp); font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -.03em; margin: 9px 0 0; color: var(--text);
}
.m-close p { font-size: 14.5px; color: var(--text2); margin-top: 9px; max-width: 62ch; }
.m-close__act { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================ LEGAL DOCUMENT REDESIGN ===
   The 2026-08-15 rebuild scoped legal to "chrome and document shell only", so
   /terms, /privacy and /client-portal-terms kept a Bone hero on top of a
   document body still wearing the old prototype design — its own sidebar card,
   its own chip and callout system, its own type scale, 6-8px radii. Mapping
   the --res-* tokens (see the block above) made the colours right and left the
   DESIGN wrong. Rendered and confirmed on /terms before this was written.

   ⛔ THE LEGAL TEXT IS BINDING AND IS NOT TOUCHED. This is styling only. The
   three partials are SHARED with layout/legal-app.php (the in-app legal
   surface, which exists for App Store 3.1.3(f) and must keep rendering without
   marketing chrome), so every rule here is scoped to .lp-page--legal — a class
   the in-app layout does not carry. Restyle from here; never edit the
   partials' own <style> blocks, and NEVER add <base> to the legal layout (it
   resolves the 65 in-document clause anchors against the base and sends them
   to the homepage — a shipped regression once already).

   ⚠ SPECIFICITY IS LOAD-BEARING. The partials' <style> blocks sit INSIDE
   <body>, so at equal specificity they win on source order. `html body` plus
   the id keeps these rules ahead of them — the same trick the .reveal fix
   above needs, for the same reason.
   ========================================================================== */
/* shell: drop the floating card, adopt the site's own rhythm and rail.

   ⚠ MEASURED, not assumed. The document root computed to
   `background: rgb(245,246,248)` (--base) sitting inside a `--raise` section,
   which is what made the document read as a grey slab floating on the page. It
   comes from `#legal-x.legal-doc-root{background:var(--s1); …}` in the
   partials' own <style>, which we do not edit because the in-app legal layout
   shares it. (Its 48px padding-bottom goes with it; the section owns the
   rhythm now.)

   The apparent 44px inset next to it was NOT a defect and is deliberately not
   "fixed" here: .m-shell is 1300px border-box with a 44px gutter, so its
   content box is 1212 and everything on every page starts at the same x. */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms).legal-doc-root {
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .page-wrap {
  max-width: none; margin: 0; padding: 0;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 60px);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .content { min-width: 0; }

/* contents rail — the same sticky rail the 15 guides use (.m-toc) */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .sidebar {
  position: sticky; top: 118px; align-self: start;
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; max-height: none;
  /* The partial pins the rail to a literal 220px. Inside a 268px grid column
     that left 48px of dead space between the rail and its own hairline. */
  width: 100%;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .sidebar-inner {
  display: block; background: none; border: 0; padding: 0;
  /* `overflow:hidden` belonged to the old rounded card and, with the card gone,
     clipped the ascenders off the rail's first heading. */
  overflow: visible; border-radius: 0;
}
/* A 2px gradient bar was pinned to the top of that card. Without the card it
   floats over the heading text — visible as a rule struck through "TERMS OF
   SERVICE" in the first render of this redesign. */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .sidebar-inner::before {
  display: none;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .sidebar-head {
  padding: 0 0 12px; border: 0; background: none;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .sidebar-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text3); margin: 0;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .sidebar-title { display: none; }
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .nav-group {
  padding: 0; border-top: 1px solid var(--line2);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .nav-group-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text3); padding: 16px 0 6px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .nav-link {
  display: block; padding: 7px 0 7px 26px; position: relative;
  font-size: 13px; color: var(--text2); border: 0; background: none;
  border-radius: 0; transition: color .16s;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .nav-link::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px;
  background: var(--line3); transition: background .16s, width .16s;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .nav-link:hover,
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .nav-link.active {
  color: var(--acc); background: none; padding-left: 26px; border: 0;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .nav-link:hover::before,
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .nav-link.active::before {
  background: var(--acc); width: 18px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .sidebar-meta {
  /* align-items: flex-start - this is a column flex container, so the default
     `stretch` made every child full-width. Beside the document that is
     invisible, but below 1080px `.page-wrap` collapses to one column and the
     status pill ("Business use (B2B)", "EU data") stretched to 942px at a
     1024px viewport: a chip rendering as a page-wide banner. */
  align-items: flex-start;
  padding: 16px 0 0; border-top: 1px solid var(--line2); gap: 6px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .meta-row {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .meta-row span { color: var(--text2); }
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .meta-badge {
  border-radius: 2px; background: var(--acc-w); border-color: var(--line2); color: var(--acc);
  font-family: var(--mono); letter-spacing: .08em;
}

/* The document header duplicates the page hero (title, lede, version, date),
   which is why /terms rendered its title twice. Keep the chips — they say
   things the hero does not — and drop the rest. */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .doc-header {
  margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .doc-header::before { display: none; }
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .doc-title,
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .doc-meta-bar { display: none; }
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .doc-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 14px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .doc-sub {
  font-size: 15.5px; color: var(--text2); max-width: 70ch; margin-bottom: 20px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .doc-chip {
  border-radius: 2px; background: var(--raise2); border: 1px solid var(--line2);
  color: var(--text2); font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px;
}

/* section headers, matching .m-prose h2 */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .doc-section { margin-bottom: 42px; }
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .section-label {
  display: flex; gap: 10px; align-items: baseline;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acc); background: none;
  border: 0; border-radius: 0; padding: 0; margin-bottom: 12px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .section-num,
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .section-of {
  background: none; border: 0; padding: 0; color: inherit; font-family: var(--mono);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .section-heading {
  font-family: var(--disp); font-size: clamp(24px, 2.6vw, 31px); font-weight: 700;
  letter-spacing: -.032em; color: var(--text); margin-bottom: 12px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .section-intro {
  font-size: 15.5px; color: var(--text2); max-width: 74ch;
}

/* clauses become the site's own disclosure row (compare .m-faq) */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause {
  background: none; border: 0; border-top: 1px solid var(--line2);
  border-radius: 0; box-shadow: none; margin: 0;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause:last-of-type {
  border-bottom: 1px solid var(--line2);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause-head {
  padding: 18px 0; gap: 16px; align-items: baseline; cursor: pointer;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause-head:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 3px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause-num {
  background: none; border: 0; border-radius: 0; width: auto; height: auto;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--text3); flex: 0 0 26px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause.open .clause-num,
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause:hover .clause-num {
  background: none; color: var(--acc);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause-eyebrow { display: none; }
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause-title {
  font-family: var(--disp); font-size: 17px; font-weight: 600;
  letter-spacing: -.024em; color: var(--text);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause-chevron svg { stroke: var(--text3); }
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause-inner { overflow: hidden; }
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause-body {
  padding: 0 0 22px 42px; border: 0; background: none;
}

/* schedule + timeline */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .schedule-section {
  background: none; border: 0; border-top: 1px solid var(--line2);
  border-radius: 0; padding: 26px 0 0; margin: 0 0 26px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .sched-heading {
  font-family: var(--disp); font-size: 17.5px; font-weight: 600;
  letter-spacing: -.024em; color: var(--text); margin-bottom: 12px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .timeline-row {
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--line2); background: none; border-radius: 0;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .tl-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3); background: none; border: 0; padding: 0;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .tl-value {
  font-size: 14px; color: var(--text2);
}

/* callouts become .m-note — a rule on the accent edge, never a tinted box */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .callout {
  background: var(--raise2); border: 1px solid var(--line2); border-left: 2px solid var(--line3);
  border-radius: 0 3px 3px 0; padding: 16px 18px; margin: 18px 0;
  font-size: 14px; color: var(--text2);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .callout-gold,
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .callout-blue {
  border-left-color: var(--acc);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .callout-amber {
  border-left-color: #8A5A00;
}

/* overview boxes */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .ov-box {
  background: var(--raise2); border: 1px solid var(--line2); border-radius: 3px;
  padding: 20px; box-shadow: none;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .ov-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text3);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .ov-heading {
  font-family: var(--disp); font-size: 16px; font-weight: 600;
  letter-spacing: -.022em; color: var(--text); margin: 8px 0 10px;
}

/* body copy, aligned with .m-prose */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .prose,
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .prose p,
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .prose li {
  font-size: 15px; line-height: 1.72; color: var(--text2);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .prose strong { color: var(--text); font-weight: 600; }
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .prose a { color: var(--acc); font-weight: 600; }
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .data-table {
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden; font-size: 14px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .data-table th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3); background: var(--raise2);
  border-bottom: 1px solid var(--line); padding: 11px 14px; text-align: left; font-weight: 500;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .data-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--line2); color: var(--text2);
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .section-nav {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .snav-link {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text2);
  border: 1px solid var(--line); border-radius: 2px; padding: 9px 14px;
  background: var(--raise); text-decoration: none;
}
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .snav-link:hover {
  border-color: var(--line3); color: var(--text);
}

/* ========================================================== RESPONSIVE === */
@media (max-width: 1080px) {
  /* minmax(0, 1fr), NOT 1fr. `1fr` is shorthand for `minmax(auto, 1fr)`, and an
     `auto` minimum resolves to the max-content of the widest item in the track.
     `.m-hero__pills span` is `white-space: nowrap`, so a single long trust pill
     set the column to 392-406px inside a 320px content box on all EIGHT
     paid-search landing pages, at 360px AND 390px. `.m-hero` is
     `overflow: hidden` so the excess was clipped with no scroll recovery, and
     `documentElement.scrollWidth` stayed equal to the viewport - which is why
     the overflow check never saw it. The base rule at :411 already uses
     minmax(0, 1fr); this responsive override is what dropped it. */
  .m-hero__in, .m-vid, .m-wire, .m-end__in, .m-formwrap, .m-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  /* The trust pills are `white-space: nowrap` at :449 so they read as single
     chips on desktop. Below 1080px the hero is one column, and a long pill
     ("Survey every door - hand the client a same-day PDF") simply cannot fit a
     360px phone: it overflowed its own box and `.m-hero { overflow: hidden }`
     clipped it, taking the lede's wrap width with it. Let them wrap here. */
  .m-hero__pills span { white-space: normal; }
  /* .m-cap2 dropped from this list on 2026-08-16 with the rest of its rules — see
     the note where they were defined. .m-chain and .m-buy are still live. */
  .m-chain, .m-buy { grid-template-columns: 1fr; }
  .m-chain__key, .m-panel, .m-toc { position: static; }
  .m-guide { grid-template-columns: 1fr; }
  .m-legal { grid-template-columns: 1fr; }
  .m-close__in { grid-template-columns: 1fr; }
  /* The legal rail unstacks with everything else. Below 800px the partials'
     own media query turns .sidebar into a horizontal scroller with
     `display:flex !important`, which still applies — this only has to cover
     the 800-1080 band, where a 268px rail beside the document is too tight. */
  html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .page-wrap {
    grid-template-columns: 1fr;
  }
  html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .sidebar {
    position: static;
  }
  /* Two columns means cells 3 and 4 start a NEW row, so the blanket
     `div + div { border-left; padding-left }` indents cell 3 away from cell 1
     and leaves the two rows with no separator between them. Re-cut the rules
     against the two-column grid rather than the source order. */
  .m-stats { grid-template-columns: 1fr 1fr; }
  .m-stats > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .m-stats > div:nth-child(n+3) { border-top: 1px solid var(--line2); }
  /* .m-trail__sum was collapsed to one column here — gone with the trail block. */
  .m-sgrid { grid-template-columns: 1fr 1fr; }
  /* .m-plans stays 3-up here. Two-up leaves the third card orphaned hard left
     between 900 and 1080px, and /pricing renders TWO of these grids — so that
     was six cards in two ragged rows. Plan cards are narrow enough to hold. */
  .m-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Two-up: four columns spanning two, for the same reason six is used at
     desktop — so an odd card count can centre instead of hanging left. */
  .m-tiles, .m-pains, .m-cards, .m-gal, .m-vgrid { --m-cols: 4; --m-span: 2; }
  .m-tiles--4 { --m-cols: 2; --m-span: 1; }
  :is(.m-tiles, .m-cards, .m-gal, .m-vgrid, .m-pains):not(.m-tiles--2):not(.m-tiles--4):not(.m-cards--2) > :nth-child(3n+1):nth-last-child(1),
  :is(.m-tiles, .m-cards, .m-gal, .m-vgrid, .m-pains):not(.m-tiles--2):not(.m-tiles--4):not(.m-cards--2) > :nth-child(3n+1):nth-last-child(2) {
    grid-column: span 2;
  }
  :is(.m-tiles, .m-cards, .m-gal, .m-vgrid, .m-pains):not(.m-tiles--2):not(.m-tiles--4):not(.m-cards--2) > :nth-child(2n+1):nth-last-child(1) {
    grid-column: 2 / span 2;
  }
  .m-ft__top { grid-template-columns: 1fr 1fr 1fr; }
  .m-usage > div { grid-template-columns: minmax(0, 1fr) 110px; }
  .m-usage dd { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .m-util, .m-nav, .m-hdr__signin { display: none; }
  .m-burger { display: flex; }
  .m-hdr__cta { margin-left: auto; }
  .m-anch { top: var(--hdr-h); }
  .m-stage { grid-template-columns: 1fr; }
  .m-stage__fig { height: auto; padding-bottom: 10px; }
  /* .m-trail__sum > div dropped from this list on 2026-08-16 with the trail block;
     the other three selectors are still live. */
  .m-kspec > div, .m-hero__aside dl > div, .m-sidecard dl > div { grid-template-columns: 1fr; gap: 4px; }
  .m-sgrid, .m-qs, .m-plans, .m-vs { grid-template-columns: 1fr; }
  .m-usage > div { grid-template-columns: minmax(0, 1fr) auto; }
  .m-usage dd { grid-column: 1 / -1; }
  .m-tiles, .m-pains, .m-cards, .m-gal, .m-vgrid, .m-tiles--2, .m-tiles--4, .m-cards--2 { --m-cols: 1; --m-span: 1; }
  /* One column: every centring rule above must stand down, at the same
     specificity or higher, or a card keeps a two-column span it cannot fill. */
  :is(.m-tiles, .m-cards, .m-gal, .m-vgrid, .m-pains):not(.m-tiles--2):not(.m-tiles--4):not(.m-cards--2) > :nth-child(3n+1):nth-last-child(1),
  :is(.m-tiles, .m-cards, .m-gal, .m-vgrid, .m-pains):not(.m-tiles--2):not(.m-tiles--4):not(.m-cards--2) > :nth-child(3n+1):nth-last-child(2),
  :is(.m-tiles, .m-cards, .m-gal, .m-vgrid, .m-pains):not(.m-tiles--2):not(.m-tiles--4):not(.m-cards--2) > :nth-child(2n+1):nth-last-child(1) {
    grid-column: auto;
  }
  /* The two .m-schem rules that sat here — hiding the SVG and swapping in the <ol>
     below 900px — went with the schematic on 2026-08-16. */
  .m-faq summary { grid-template-columns: 44px minmax(0, 1fr) 14px; }
  .m-faq__cat { display: none; }
  .m-faq__a { padding: 0 0 22px 58px; }
  .m-ft__top { grid-template-columns: 1fr 1fr; }
  .m-form__grid { grid-template-columns: 1fr; }
  .m-does { grid-template-columns: 1fr; }
  .m-steps > li { grid-template-columns: 1fr; gap: 10px; }
  .m-sticky { left: 12px; right: 12px; transform: none; max-width: none; }
  .m-cookie { left: 12px; right: 12px; bottom: 12px; }
  /* Full-screen preview on a phone: a 25-page report in a padded dialog on a
     390px screen is a letterbox. Same decision the tenant app made for
     .modal--sheet, and for the same reason. */
  .m-lbx { padding: 0; }
  .m-lbx__box { width: 100%; max-height: none; height: 100dvh; border: 0; border-radius: 0; }
  .m-lbx__head { flex-wrap: wrap; }
  .m-lbx__foot .m-lbx__note { width: 100%; margin-right: 0; }
  .m-lbx__foot .m-btn { flex: 1; }
  /* The clause body's 42px indent lines it up with the clause title on
     desktop; on a phone that is a third of the measure. */
  html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .clause-body { padding-left: 0; }
}
@media (max-width: 620px) {
  .m-hero h1 { font-size: 33px; }
  .m-stats { grid-template-columns: 1fr; }
  .m-stats > div { padding: 20px 0; }
  .m-stats > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line2); }
  .m-thread { padding-left: 36px; }
  .m-stage__bead { left: -36px; width: 23px; height: 23px; font-size: 9.5px; }
  .m-thread::before, .m-thread::after { left: 11px; }
  .m-ft__top { grid-template-columns: 1fr; }
  /* Drop the SECONDARY header button on a narrow phone — the row cannot hold two
     buttons plus the burger. On every page but /contact that is "Book a call",
     which is the right one to lose: the trial is the conversion goal and the call
     is still in the drawer. ⚠ /contact swaps the pair (primary_intent = 'call'),
     so there the secondary IS the trial, and this rule was quietly hiding the
     trial CTA on the page paid traffic most often lands on. Keep the trial
     whichever slot it occupies. */
  .m-hdr__cta .m-btn--g { display: none; }
  .m-hdr__cta .m-btn--g[data-mkt-cta-intent="trial"] { display: inline-flex; }
  .m-hdr__cta .m-btn--a[data-mkt-cta-intent="call"] { display: none; }
  .m-player__bar span { display: none; }
  .m-endpages { grid-template-columns: repeat(2, 1fr); }
  .m-lbox { padding: 14px 14px 12px; }
  .m-usage > div { grid-template-columns: 1fr; gap: 4px; }
  .m-prose h2 { font-size: 22px; }
  .m-legal__meta { gap: 6px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-body *, .landing-body *::before, .landing-body *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .m-thread::after { transition: none; }
}

@media print {
  .m-util, .m-hdr, .m-anch, .m-drawer, .m-sticky, .m-cookie, .m-modal, .m-end, .m-ft__badges { display: none !important; }
  .landing-body { background: #fff; }
  .m-sec { padding-block: 18px; border-top: 0; }
}


/* ==========================================================================
   Legal data tables must stay reachable
   ==========================================================================
   `legal_client_portal_terms_document.php:300` sets `display:block;
   overflow-x:auto` on `.data-table` below 640px so the three-column
   ROLE / WHO / RESPONSIBILITY table can be swiped. That rule is out-specified
   by a shorthand `overflow: hidden` added elsewhere for a border-radius clip,
   and shorthand resets overflow-x too - so the computed value was `hidden` and
   130px of a legal responsibility table (scrollWidth 416 vs clientWidth 286)
   was unreachable by any gesture. That is content loss on a document a client
   is asked to agree to, not a missing affordance. */
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .data-table,
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .cookie-table,
html body .lp-page--legal :is(#legal-terms, #legal-privacy, #legal-portal-terms) .sp-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}