/* Sidebar Marketing rebuild.
   The homepage loads only this file. The older pages (about, legal,
   platforms, 404, the application forms) load styles.css first and then
   this, which gives them the shared nav, footer, focus style and cookie
   banner. Homepage-only rules are scoped under .sbm-page.

   Colours are set as roles (--sbm-bg, --sbm-bg-alt, --sbm-fg) so the
   whole site can switch to dark mode. Contrast, checked (WCAG 2.1):
     text on white 16.1:1 light / 17.1:1 dark on #121212
     ink #212121 on coral #FB9280 7.3:1
   Coral is never used for text in light mode (2.2:1 on white). */

:root{
  /* Brand. Coral is the light coral #FB9280, the only accent, and it is
     the same in light and dark mode. It is too light to carry text or to
     stand alone as a focus ring on white (2.2:1), so text on coral is
     always the dark ink, and focus rings pair it with a solid ring. */
  --sbm-coral:#FB9280;
  --sbm-ink:#212121;

  /* Roles. Light mode: white page, light cream alternate sections,
     charcoal text and solid blocks. Dark mode swaps these (see below). */
  --sbm-bg:#FFFFFF;
  --sbm-bg-alt:#F8F6F2;
  --sbm-fg:#212121;
  /* Secondary text: 6.75:1 on white, 6.3:1 on the cream. */
  --sbm-muted:#5E5B57;
  --sbm-rule:rgba(33,33,33,.22);
  --sbm-rule-strong:rgba(33,33,33,.55);
  --sbm-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.25' fill='%23212121' fill-opacity='.055'/%3E%3C/svg%3E");
  color-scheme:light;

  /* The older pages' palette (styles.css), pointed at the new coral. Their
     coral-dark stays as the darker text shade in light mode for contrast. */
  --coral:#FB9280;
  --coral-bg:rgba(251,146,128,.14);
  --coral-border:rgba(251,146,128,.45);
  /* The old dark brick red is retired. Where the older pages used it for
     text or fills, light mode shows charcoal (the light coral is only 2.2:1
     as text); dark mode shows the light coral itself. */
  --coral-dark:#212121;
  --coral-darker:#000000;

  --sbm-font:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --sbm-gutter:clamp(16px,4vw,48px);
  --sbm-max:1280px;

  /* Nav bar. The inner row is a fixed 44px (the minimum touch target), so
     the bar height is only ever that plus its vertical padding. */
  --sbm-bar-inner:44px;
  --sbm-bar-pad:22px;
  --sbm-bar-pad-scrolled:14px;
}

/* Dark mode: the cream turns dark grey, the page near black, text and
   solid blocks go light, coral stays exactly the same. Only when chosen
   with the footer switch (saved); the site always starts in light mode,
   whatever the device setting. */
:root[data-theme="dark"]{
  --sbm-bg:#121212;
  --sbm-bg-alt:#1D1D1D;
  --sbm-fg:#F1EFEB;
  --sbm-muted:#ABA8A3;
  --sbm-rule:rgba(241,239,235,.16);
  --sbm-rule-strong:rgba(241,239,235,.45);
  --sbm-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.25' fill='%23F1EFEB' fill-opacity='.07'/%3E%3C/svg%3E");
  color-scheme:dark;
  --white:#121212;--light:#1D1D1D;--dark:#F1EFEB;--darker:#FFFFFF;--ink:#F1EFEB;--grey:#ABA8A3;
  --line:rgba(241,239,235,.16);--border:rgba(241,239,235,.16);
  --coral-dark:#FB9280;--coral-darker:#FDB2A5;--error:#FF8A80;
}
@media (max-width:1023px){
  :root{
    --sbm-bar-pad:14px;
    --sbm-bar-pad-scrolled:9px;
  }
}

/* One family for the whole rebuild, self-hosted, variable 400 to 700.
   styles.css declares the same file for the older pages, so the browser
   only ever downloads it once. */
@font-face{
  font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/public-sans-variable.woff2') format('woff2-variations'),
      url('/assets/fonts/public-sans-variable.woff2') format('woff2');
}

/* Anchor targets land below the bar, not under it. Smooth scrolling only
   for people who have not asked for reduced motion. */
html{scroll-padding-top:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad-scrolled) + 16px)}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* One focus style for the whole site: a solid ring in the text colour
   (16:1) with the coral ring around it. The light coral alone is only
   2.2:1 on white, so it never carries the focus state by itself. */
:focus-visible{outline:2px solid var(--sbm-coral);outline-offset:3px;box-shadow:0 0 0 3px var(--sbm-fg)}

.sbm-skip{position:absolute;left:var(--sbm-gutter);top:-200px;z-index:10001;
  background:var(--sbm-fg);color:var(--sbm-bg);padding:14px 18px;
  font:600 15px/1 var(--sbm-font);text-decoration:none}
.sbm-skip:focus{top:12px}

.sbm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- buttons ---------- */
.sbm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 22px;border:2px solid var(--sbm-coral);border-radius:4px;
  font:700 15px/1.1 var(--sbm-font);letter-spacing:.005em;text-decoration:none;
  white-space:nowrap;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.sbm-btn--solid{background:var(--sbm-coral);color:var(--sbm-ink)}
.sbm-btn--solid:hover{background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
.sbm-btn--outline{background:transparent;color:var(--sbm-fg)}
.sbm-btn--outline:hover{background:var(--sbm-coral);color:var(--sbm-ink)}
.sbm-btn--lg{min-height:54px;padding:0 28px;font-size:16px}
@media (prefers-reduced-motion:reduce){
  .sbm-btn{transition:none}
}

/* ---------- logo (assets/brand/sidebar-logo-*.svg, inlined) ----------
   Charcoal parts use currentColor, so the logo follows the text colour
   into dark mode; the swoosh stays coral and the cut-outs are holes. */
.sbm-logo{display:inline-flex;align-items:center;min-height:44px;color:var(--sbm-fg);text-decoration:none}
.sbm-logo-svg{display:block;height:34px;width:auto}
.sbm-logo--sm .sbm-logo-svg{height:30px}
.sbm-nav .sbm-logo{margin-right:auto}
@media (max-width:1023px){
  .sbm-nav .sbm-logo-svg{height:31px}
}

/* ---------- wordmark ---------- */
.sbm-wordmark{font:700 20px/1 var(--sbm-font);letter-spacing:-.02em;color:var(--sbm-fg);
  text-decoration:none;white-space:nowrap}
.sbm-wordmark--sm{font-size:18px}

/* ---------- navigation ----------
   The header keeps one constant height and only the bar inside it
   shrinks on scroll. If the header itself shrank, the page below would
   jump up by the difference, the browser's scroll anchoring would pull
   the scroll position back under 80px, and the bar would flicker
   between the two states. The strip left under the shrunk bar is
   transparent and lets clicks through. */
.sbm-header{position:sticky;top:0;z-index:100;
  height:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad) + 1px);
  pointer-events:none;font-family:var(--sbm-font)}
.sbm-bar{pointer-events:auto;background:var(--sbm-bg-alt);
  border-bottom:1px solid var(--sbm-rule);padding-block:var(--sbm-bar-pad);
  transition:padding-block .2s ease,border-color .2s ease}
.sbm-header.is-scrolled .sbm-bar{padding-block:var(--sbm-bar-pad-scrolled);
  border-bottom-color:var(--sbm-rule-strong)}

.sbm-nav{max-width:var(--sbm-max);height:var(--sbm-bar-inner);margin:0 auto;
  padding-inline:var(--sbm-gutter);display:flex;align-items:center;gap:24px}
.sbm-nav .sbm-wordmark{margin-right:auto}

/* Scroll progress: a coral trace along the bottom of the bar, drawn from
   the left as you move down the page (sidebar.js sets --sbm-progress). */
.sbm-bar{position:relative}
.sbm-bar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sbm-coral);
  transform:scaleX(var(--sbm-progress,0));transform-origin:left;pointer-events:none}

.sbm-panel{display:flex;align-items:center;gap:16px;flex:1}
/* Links sit in a slim track. A soft highlight slides to whichever link is
   under the pointer (sidebar.js positions it); the section you are in is
   bold with a coral dot beneath. */
.sbm-nav .sbm-links{position:relative;display:flex;align-items:center;gap:2px;margin:0 auto;padding:4px;list-style:none;
  border:1px solid var(--sbm-rule);border-radius:999px;background:var(--sbm-bg)}
.sbm-links::before{content:'';position:absolute;top:4px;bottom:4px;left:0;width:var(--ind-w,0);border-radius:999px;
  background:var(--sbm-bg-alt);transform:translateX(var(--ind-x,0));opacity:var(--ind-o,0);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),width .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
.sbm-links.sbm-ind-jump::before{transition:opacity .2s ease}
.sbm-links li{position:relative}
.sbm-links a{position:relative;display:inline-block;padding:9px 16px;border-radius:999px;
  font:500 15px/1.2 var(--sbm-font);color:var(--sbm-fg);text-decoration:none}
.sbm-links a::after{content:'';position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--sbm-coral);opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}
.sbm-links a[aria-current]{font-weight:700}
.sbm-links a[aria-current]::after{opacity:1;transform:none}

.sbm-nav-actions{display:flex;align-items:center;gap:10px}
.sbm-engine-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 6px;
  border:1px solid var(--sbm-rule-strong);border-radius:12px;background:var(--sbm-bg);color:var(--sbm-fg);
  font:600 14.5px/1 var(--sbm-font);text-decoration:none;white-space:nowrap;transition:border-color .15s ease}
.sbm-engine-btn:hover{border-color:var(--sbm-fg)}
.sbm-engine-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--sbm-fg);color:var(--sbm-bg)}
.sbm-engine-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sbm-nav-cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 6px 0 18px;border-radius:12px;
  background:var(--sbm-fg);color:var(--sbm-bg);font:700 14.5px/1 var(--sbm-font);text-decoration:none;white-space:nowrap}
.sbm-cta-chip{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--sbm-coral);
  color:var(--sbm-ink);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.sbm-cta-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.sbm-nav-cta:hover .sbm-cta-chip{transform:scale(1.06)}
.sbm-nav-cta:hover .sbm-cta-chip svg{transform:translateX(2px)}
@media (min-width:1024px) and (max-width:1199px){
  /* Short "Apply" on narrower desktops; the full wording stays for screen readers. */
  .sbm-cta-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sbm-links a{padding:9px 13px}
}
@media (prefers-reduced-motion:reduce){
  .sbm-links::before,.sbm-links a::after,.sbm-cta-chip,.sbm-cta-chip svg,.sbm-engine-btn{transition:none}
}

.sbm-menu-btn{display:none}
@media (min-width:1024px){
  .sbm-menu-fp,.sbm-menu-extra,.sbm-link-num{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sbm-js .sbm-panel,.sbm-header.is-open .sbm-panel,.sbm-js .sbm-links li,.sbm-menu-extra,.sbm-js .sbm-nav-actions,
  .sbm-menu-icon span,.sbm-js .sbm-links a::after{transition:none!important}
  .sbm-js .sbm-panel{clip-path:none}
  .sbm-js .sbm-links li,.sbm-menu-extra,.sbm-js .sbm-nav-actions{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .sbm-bar{transition:none}
}

/* ---------- mobile: full-screen overlay ----------
   The panel becomes a fixed, full-screen cream layer that sits behind
   the bar (z-index -1 inside the header's stacking context), so the
   wordmark and the Close button stay visible and usable on top.
   Gated on .sbm-js (set by a one-line script in each page's head) so
   that without JavaScript the links still show, wrapped under the
   wordmark, instead of hiding behind a button that cannot open. */
@media (max-width:1023px){
  .sbm-menu-btn{align-items:center;gap:10px;min-height:44px;min-width:44px;
    margin-right:-6px;padding:0 6px;background:none;border:0;
    font:600 15px/1 var(--sbm-font);color:var(--sbm-fg);cursor:pointer}
  .sbm-js .sbm-menu-btn{display:inline-flex}
  .sbm-menu-icon{position:relative;display:block;width:22px;height:14px}
  .sbm-menu-icon span{position:absolute;left:0;right:0;height:2px;background:var(--sbm-fg)}
  .sbm-menu-icon span:nth-child(1){top:0}
  .sbm-menu-icon span:nth-child(2){top:6px}
  .sbm-menu-icon span:nth-child(3){top:12px}
  .sbm-menu-btn[aria-expanded="true"] .sbm-menu-icon span:nth-child(1){top:6px;transform:rotate(45deg)}
  .sbm-menu-btn[aria-expanded="true"] .sbm-menu-icon span:nth-child(2){opacity:0}
  .sbm-menu-btn[aria-expanded="true"] .sbm-menu-icon span:nth-child(3){top:6px;transform:rotate(-45deg)}

  /* The overlay is always laid out but hidden, so it can animate: it
     opens as a circle growing from the Menu button, the floating paths
     run behind it, and the links rise in one after another. visibility
     keeps the closed overlay out of the tab order and away from screen
     readers; it only switches off after the closing animation ends. */
  .sbm-js .sbm-panel{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;inset:0;z-index:-1;overflow-x:hidden;overflow-y:auto;
    background:var(--sbm-bg-alt);visibility:hidden;pointer-events:none;
    clip-path:circle(0 at calc(100% - 44px) 36px);
    transition:clip-path .5s cubic-bezier(.7,0,.25,1),visibility 0s linear .5s;
    scroll-padding-top:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad) + 16px);
    padding:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad) + 24px) var(--sbm-gutter)
            calc(24px + env(safe-area-inset-bottom))}
  .sbm-header.is-open{z-index:10000}
  .sbm-header.is-open .sbm-panel{visibility:visible;pointer-events:auto;
    clip-path:circle(160% at calc(100% - 44px) 36px);
    transition:clip-path .65s cubic-bezier(.7,0,.25,1),visibility 0s}
  .sbm-menu-fp{z-index:0}
  .sbm-header:not(.is-open) .sbm-menu-fp{display:none}
  .sbm-js .sbm-panel > :not(.sbm-menu-fp){position:relative;z-index:1}

  .sbm-js .sbm-links{flex-direction:column;align-items:stretch;gap:0;margin:0 0 32px;padding:0;border:0;border-radius:0;background:none}
  .sbm-js .sbm-links::before{display:none}
  .sbm-js .sbm-links li{border-bottom:1px solid var(--sbm-rule);opacity:0;transform:translateY(28px);
    transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
  .sbm-header.is-open .sbm-links li{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0) * .07s)}
  .sbm-js .sbm-links a{display:flex;align-items:baseline;gap:16px;width:100%;padding:18px 0 16px;border-radius:0;
    font-size:clamp(32px,9vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
  .sbm-js .sbm-links a::after{left:auto;right:0;bottom:50%;width:22px;height:2px;margin:0;border-radius:1px;
    background:var(--sbm-coral);opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .2s ease}
  .sbm-js .sbm-links a:hover::after,.sbm-js .sbm-links a[aria-current]::after{opacity:1;transform:none;height:2px;
    bottom:50%;background:var(--sbm-coral)}
  .sbm-link-num{flex:none;min-width:2ch;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--sbm-muted);
    transform:translateY(-.9em)}

  .sbm-menu-extra{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-bottom:20px;font-size:17px;
    opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
  .sbm-header.is-open .sbm-menu-extra{opacity:1;transform:none;transition-delay:.5s}
  .sbm-menu-extra-k{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--sbm-muted)}
  .sbm-menu-extra a{color:var(--sbm-fg);font-weight:600;text-decoration:none}
  .sbm-js .sbm-nav-actions{flex-direction:column;align-items:stretch;gap:10px;opacity:0;transform:translateY(16px);
    transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
  .sbm-header.is-open .sbm-nav-actions{opacity:1;transform:none;transition-delay:.56s}
  .sbm-js .sbm-engine-btn,.sbm-js .sbm-nav-cta{min-height:56px;font-size:16.5px}
  .sbm-js .sbm-nav-cta{justify-content:space-between}
  .sbm-js .sbm-engine-btn{padding-right:18px}
  .sbm-js .sbm-nav-cta{padding:0 8px 0 20px}
  .sbm-js .sbm-cta-chip{width:40px;height:40px;border-radius:10px}

  /* The menu icon's lines fold into a cross. */
  .sbm-menu-icon span{transition:transform .3s cubic-bezier(.2,.7,.2,1),top .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease}

  /* No JavaScript: a plain wrapped row under the wordmark. */
  html:not(.sbm-js) .sbm-header{position:static;height:auto}
  html:not(.sbm-js) .sbm-nav{height:auto;flex-wrap:wrap;row-gap:4px}
  html:not(.sbm-js) .sbm-panel{width:100%;flex-wrap:wrap;gap:8px 24px}
  html:not(.sbm-js) .sbm-links{flex-wrap:wrap;gap:0 4px;margin:0}
}
html.sbm-menu-open{overflow:hidden}

/* ============================================================
   PAGE BASE (new-design pages only: body.sbm-page)
   ============================================================ */
.sbm-page{margin:0;background:var(--sbm-bg);color:var(--sbm-fg);
  font-family:var(--sbm-font);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sbm-page *,.sbm-page *::before,.sbm-page *::after{box-sizing:border-box}
.sbm-page :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table){margin:0}
.sbm-page :where(ul,ol){padding:0;list-style:none}
/* Zero specificity, so it never outranks a button's own text colour. */
:where(.sbm-page a:not(.sbm-skip)){color:inherit}
.sbm-page img{display:block;max-width:100%}

.sbm-wrap{max-width:var(--sbm-max);margin:0 auto;padding-inline:var(--sbm-gutter)}
.sbm-section{padding-block:clamp(72px,9vw,128px)}
.sbm-section--cream{background:var(--sbm-bg-alt)}
.sbm-section--bg{background:var(--sbm-bg)}
.sbm-section--white{background:var(--sbm-bg)}

/* Type scale. One family, hierarchy from size and weight. */
.sbm-eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.3;color:var(--sbm-fg)}
.sbm-eyebrow::before{content:'';flex:none;width:24px;height:2px;background:var(--sbm-coral)}
.sbm-h1{font-size:clamp(2.625rem,4.2vw + 1rem,4.75rem);font-weight:700;line-height:1.02;
  letter-spacing:-.035em;text-wrap:balance}
.sbm-h2{text-wrap:balance}
.sbm-h2{font-size:clamp(2rem,2.6vw + 1rem,3.25rem);font-weight:700;line-height:1.06;
  letter-spacing:-.03em;max-width:20ch}
.sbm-h3{font-size:1.25rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.sbm-lede{font-size:clamp(1.0625rem,.4vw + 1rem,1.25rem);line-height:1.6;max-width:34em}
.sbm-muted{color:var(--sbm-muted)}

.sbm-section-head{display:grid;gap:20px;margin-bottom:clamp(40px,5vw,64px)}
.sbm-intro{max-width:40em;font-size:1.125rem;line-height:1.6}

.sbm-textlink{font-weight:600;color:var(--sbm-fg);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:5px}
.sbm-textlink:hover{text-decoration-color:var(--sbm-coral);text-decoration-thickness:2px}

/* Anything still waiting on real content. Deliberately obvious. */
.sbm-ph{background:var(--sbm-bg);outline:1px dashed var(--sbm-fg);outline-offset:1px;
  padding:0 .2em}

/* ============================================================
   HERO: circuit board
   ============================================================ */
/* The dot grid is a tiny SVG tile, not a CSS gradient. Dots are charcoal
   at 5.5% opacity on a 24px grid. */
.sbm-hero{position:relative;overflow:hidden;background-color:var(--sbm-bg-alt);
  background-image:var(--sbm-dot);
  padding-block:clamp(48px,7vw,112px) clamp(64px,8vw,120px)}
.sbm-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;
  gap:clamp(32px,5vw,80px)}
.sbm-hero-copy .sbm-eyebrow{margin-bottom:24px}
.sbm-hero-copy .sbm-lede{margin-top:28px}
.sbm-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px}
.sbm-hero-note{margin-top:28px;font-size:15px;line-height:1.55;color:var(--sbm-muted);max-width:30em}

.sbm-board{display:block;width:100%;height:auto}
.sbm-board .tr{fill:none;stroke:var(--sbm-fg);stroke-opacity:.24;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round}
.sbm-board .via{fill:var(--sbm-bg-alt);stroke:var(--sbm-fg);stroke-opacity:.34;stroke-width:1.25}
.sbm-board .node{fill:var(--sbm-fg)}
.sbm-board .ico{fill:none;stroke:var(--sbm-bg);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.sbm-board .ico-fill{fill:var(--sbm-bg)}
.sbm-board .ico-sep{stroke:var(--sbm-fg)}
.sbm-board .lbl{font-family:var(--sbm-font);font-size:14px;font-weight:600;fill:var(--sbm-fg)}

/* Pulses: short coral dashes on copies of the traces, travelling from
   each satellite into the hub. Every pulse path has pathLength="100", so
   one 9-unit dash with a 200-unit gap is always a single short segment.
   The dash starts well before the path (offset 20) and finishes well past
   it (offset -120), then rests off-path for the rest of the cycle. It must
   clear the ends fully: a zero-length dash sitting exactly on an end
   would still draw as a dot because of the round line cap.
   sidebar.js gives each one its own 3 to 7 second loop and a random
   delay so they never line up. */
.sbm-board .pulse{fill:none;stroke:var(--sbm-coral);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:9 200;stroke-dashoffset:20;
  animation:sbm-pulse 5s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes sbm-pulse{
  0%{stroke-dashoffset:20}
  72%,100%{stroke-dashoffset:-120}
}
@media (prefers-reduced-motion:reduce){
  .sbm-board .pulses{display:none}
  .sbm-board .pulse{animation:none}
}

@media (max-width:959px){
  .sbm-hero-grid{grid-template-columns:minmax(0,1fr)}
  .sbm-hero-board{width:100%;max-width:560px;margin-inline:auto}
}
/* Phones: fewer traces and no labels, which would be too small to read. */
@media (max-width:559px){
  .sbm-board .detail,.sbm-board .lbl{display:none}
  .sbm-hero-actions .sbm-btn{width:100%}
}

/* ============================================================
   THE PROBLEM: where the ad budget leaks
   ============================================================ */
.sbm-cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,56px)}
@media (max-width:859px){.sbm-cols3{grid-template-columns:minmax(0,1fr);gap:36px}}
.sbm-leak-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;
  margin-bottom:clamp(28px,4vw,44px)}
.sbm-leak-head .sbm-section-head{margin-bottom:0}
.sbm-leak-intro{justify-self:end;color:var(--sbm-muted)}
.sbm-leak-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.sbm-tab.sbm-tab--coral[aria-selected="true"]{background:var(--sbm-coral);border-color:var(--sbm-coral);color:var(--sbm-ink)}
.sbm-leak-stage{border:1px solid var(--sbm-rule);border-radius:24px;background:var(--sbm-bg-alt);
  padding:clamp(20px,3.5vw,44px) clamp(16px,3.5vw,44px) clamp(24px,3.5vw,40px)}
/* Labels are positioned in % of the SVG box (viewBox y 30 to 310):
   nodes sit at y 84-156, the drips end at 272. */
.sbm-leak-visual{position:relative}
.sbm-leak-svg{display:block;width:100%;height:auto;overflow:visible}
.sbm-leak-svg .line{fill:none;stroke:var(--sbm-fg);stroke-width:2;stroke-opacity:.35;stroke-linecap:round}
.sbm-leak-svg .node{fill:var(--sbm-fg)}
.sbm-leak-svg .ic{fill:none;stroke:var(--sbm-bg);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sbm-leak-svg .drip path{fill:none;stroke:var(--sbm-coral);stroke-width:2;stroke-dasharray:4 7;stroke-linecap:round}
.sbm-leak-svg .drip .tray{stroke-dasharray:none;stroke-width:3}
.sbm-leak-svg .drip{opacity:0;transition:opacity .35s ease}
[data-scenario="diy"] .drip-waste,[data-scenario="diy"] .drip-lost,
[data-scenario="agency"] .drip-retainer,[data-scenario="agency"] .drip-lost{opacity:1}
.sbm-leak-svg .pulse{fill:var(--sbm-coral)}
.sbm-leak-svg .pulse.is-lost{fill:var(--sbm-muted)}
.sbm-leak-svg .hit-ring{fill:none;stroke:var(--sbm-coral);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
.sbm-leak-svg .hit-ring.is-hit{animation:sbm-hit .7s ease-out}
@keyframes sbm-hit{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
[data-scenario="sidebar"] .sbm-leak-svg .line{stroke:var(--sbm-coral);stroke-opacity:1}
.sbm-leak-label{position:absolute;top:47%;transform:translateX(-50%);font-size:clamp(11px,1.4vw,15px);
  font-weight:700;white-space:nowrap}
.sbm-leak-tag,.sbm-leak-win{position:absolute;top:89%;transform:translateX(-50%);padding:5px 10px;border-radius:999px;
  background:var(--sbm-bg);border:1px solid var(--sbm-coral);font-size:clamp(10px,1.3vw,13px);font-weight:700;
  white-space:nowrap;opacity:0;transition:opacity .35s ease}
.sbm-leak-win{left:auto;right:0;top:0;transform:none;background:var(--sbm-coral);color:var(--sbm-ink);
  border-color:var(--sbm-coral)}
[data-scenario="diy"] .tag-waste,[data-scenario="diy"] .tag-lost,
[data-scenario="agency"] .tag-retainer,[data-scenario="agency"] .tag-lost,
[data-scenario="sidebar"] .sbm-leak-win{opacity:1}
.sbm-leak-panel{margin-top:clamp(20px,3vw,32px);border-top:1px solid var(--sbm-rule);padding-top:clamp(20px,3vw,28px)}
.sbm-leak-panel[hidden]{display:none}
.sbm-leak-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px clamp(20px,3vw,40px)}
.sbm-leak-points li{display:grid;gap:6px;align-content:start}
.sbm-leak-points strong{font-size:1.25rem;letter-spacing:-.01em}
.sbm-leak-points span:last-child{color:var(--sbm-muted)}
.sbm-leak-k{justify-self:start;padding:3px 9px;border-radius:999px;border:1px solid var(--sbm-rule-strong);font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sbm-leak-points--fix .sbm-leak-k{background:var(--sbm-coral);border-color:var(--sbm-coral);color:var(--sbm-ink)}
@media (prefers-reduced-motion:reduce){
  .sbm-leak-svg .drip,.sbm-leak-tag,.sbm-leak-win{transition:none}
  .sbm-leak-svg .hit-ring.is-hit{animation:none}
}
/* Phones get the pipeline stood on end: nodes top to bottom, leaks
   dripping out to the right, so nothing has to shrink to fit. */
.sbm-leak-visual--v{display:none}
.sbm-leak-visual--v .sbm-leak-label{transform:translateY(-50%)}
.sbm-leak-visual--v .sbm-leak-tag{transform:translateY(-50%)}
.sbm-leak-visual--v .sbm-leak-win{left:28%;right:auto;top:95%;transform:translateY(-50%)}
@media (max-width:639px){
  .sbm-leak-visual--h{display:none}
  .sbm-leak-visual--v{display:block;max-width:360px;margin:0 auto}
  .sbm-leak-visual--v .sbm-leak-label{font-size:16px}
  .sbm-leak-visual--v .sbm-leak-tag,.sbm-leak-visual--v .sbm-leak-win{font-size:12px}
}
@media (max-width:767px){
  .sbm-leak-head{grid-template-columns:minmax(0,1fr)}
  .sbm-leak-intro{justify-self:start}
}

/* ============================================================
   HOW IT WORKS: steps on the left, the UK map on the right
   ============================================================ */
.sbm-how{padding-block:clamp(88px,11vw,160px)}
.sbm-how-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);
  align-items:center}
/* Steps: the numbered nodes are the same rounded squares as the hero
   board, joined by a trace with a coral pulse running down it. */
.sbm-steps{display:grid;margin-top:8px}
.sbm-step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:28px;padding-bottom:48px}
.sbm-step:last-child{padding-bottom:0}
.sbm-step-num{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:16px;
  background:var(--sbm-fg);color:var(--sbm-bg);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.sbm-step:not(:last-child)::before{content:'';position:absolute;left:31px;top:64px;bottom:0;width:2px;
  background:var(--sbm-rule-strong)}
.sbm-step:not(:last-child)::after{content:'';position:absolute;left:31px;top:64px;width:2px;height:28px;border-radius:2px;
  background:var(--sbm-coral);opacity:0;animation:sbm-step-pulse 3.6s cubic-bezier(.45,.05,.55,.95) infinite}
.sbm-step:nth-child(2)::after{animation-delay:1.8s}
@keyframes sbm-step-pulse{
  0%{top:64px;opacity:0}
  12%,82%{opacity:1}
  100%{top:calc(100% - 28px);opacity:0}
}
.sbm-step-body{padding-top:4px}
.sbm-step-title{font-size:clamp(1.375rem,1vw + 1rem,1.75rem);font-weight:700;line-height:1.2;letter-spacing:-.02em;
  margin-bottom:10px}
.sbm-step-body p{max-width:32em;font-size:1.0625rem;line-height:1.6}
.sbm-step-body .sbm-step-meta{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;
  font-weight:600;color:var(--sbm-muted)}
.sbm-step-meta::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--sbm-coral)}

/* The map card. The map itself is drawn by uk-map.js. */
.sbm-map-card{margin:0;padding:clamp(20px,2.5vw,32px);background:var(--sbm-bg);border:1px solid var(--sbm-rule);
  border-radius:24px}
.sbm-map-title{font-size:clamp(1.625rem,1.2vw + 1.2rem,2.125rem);font-weight:700;line-height:1.1;letter-spacing:-.025em}
.sbm-map-sub{margin-top:8px;font-size:15px;line-height:1.5;color:var(--sbm-muted)}
.sbm-map-hint-touch,.sbm-map-hint-static{display:none}
@media (prefers-reduced-motion:reduce){
  .sbm-map-sub .sbm-map-hint-live{display:none}
  .sbm-map-sub .sbm-map-hint-static{display:inline}
}
html:not(.sbm-js) .sbm-map-sub .sbm-map-hint-live{display:none}
html:not(.sbm-js) .sbm-map-sub .sbm-map-hint-static{display:inline}
@media (hover:none){
  .sbm-map-hint-hover{display:none}
  .sbm-map-hint-touch{display:inline}
}
.sbm-ukmap{position:relative;margin-top:16px;border-radius:16px;cursor:crosshair}
.sbm-ukmap svg{display:block;width:100%;max-width:370px;height:auto;margin:0 auto;overflow:visible}
.sbm-ukmap .ie{fill:var(--sbm-fg);opacity:.1}
.sbm-ukmap .land{fill:var(--sbm-fg);opacity:.85}
.sbm-ukmap .coast{fill:none;stroke:var(--sbm-fg);stroke-width:.6;opacity:.22}
.sbm-ukmap .land circle,.sbm-ukmap .lead-core,.sbm-ukmap .lead-ring{transform-box:fill-box;transform-origin:center}
/* Intro: the dots sweep in from the south coast up to Shetland. */
.sbm-ukmap.is-pre .land circle{opacity:0}
.sbm-ukmap.is-in .land circle{animation:sbm-dot-in .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d)}
@keyframes sbm-dot-in{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.sbm-ukmap .lead-core{fill:var(--sbm-coral);animation:sbm-lead-pop 3.6s ease forwards}
.sbm-ukmap .lead-ring{fill:none;stroke:var(--sbm-coral);stroke-width:1.5;vector-effect:non-scaling-stroke;
  animation:sbm-lead-ring 1.8s ease-out forwards}
.sbm-ukmap .lead-static{fill:var(--sbm-coral)}
@keyframes sbm-lead-pop{
  0%{opacity:0;transform:scale(0)}
  8%{opacity:1;transform:scale(1.4)}
  14%{transform:scale(1)}
  78%{opacity:1}
  100%{opacity:0;transform:scale(.6)}
}
@keyframes sbm-lead-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(5.5)}}
.sbm-lead-card{position:absolute;left:0;top:0;z-index:2;padding:10px 14px 11px;border-radius:12px;
  background:var(--sbm-bg);color:var(--sbm-fg);border:1px solid var(--sbm-rule-strong);font-size:13px;line-height:1.35;
  white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease}
.sbm-lead-card.is-shown{opacity:1;transform:none}
.sbm-lead-k{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sbm-muted)}
.sbm-lead-k::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--sbm-coral)}
.sbm-lead-job{display:block;font-size:14px;font-weight:700}
.sbm-lead-m{color:var(--sbm-muted)}
.sbm-map-note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--sbm-muted)}
.sbm-map-key{flex:none;width:8px;height:8px;border-radius:50%;background:var(--sbm-coral)}
@media (prefers-reduced-motion:reduce){
  .sbm-step:not(:last-child)::after{animation:none;opacity:0}
  .sbm-ukmap .land circle,.sbm-ukmap .lead-core,.sbm-ukmap .lead-ring{animation:none}
  .sbm-lead-card{transition:none}
}
@media (max-width:959px){
  .sbm-how-grid{grid-template-columns:minmax(0,1fr)}
  .sbm-ukmap svg{max-width:320px}
}
@media (max-width:559px){
  .sbm-step{grid-template-columns:52px minmax(0,1fr);gap:20px}
  .sbm-step-num{width:52px;height:52px;border-radius:14px;font-size:16px}
  .sbm-step:not(:last-child)::before,.sbm-step:not(:last-child)::after{left:25px;top:52px}
}

/* ============================================================
   PACKAGES: comparison table
   ============================================================ */
.sbm-chip{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:8px 14px;
  border:1px solid var(--sbm-rule-strong);border-radius:10px;font-size:14px;font-weight:600}
.sbm-chip svg{width:18px;height:18px;fill:var(--sbm-coral)}
.sbm-h2--wide{max-width:24ch}
.sbm-cmp-intro{margin-top:18px;color:var(--sbm-muted)}
.sbm-cmp-hint{display:none}
/* Room above the table for the badge to sit on the top edge. */
/* contain:paint keeps the wide table inside this box on phones; without
   it the table still widened the page even though the box scrolls. */
.sbm-cmp-scroll{margin-top:clamp(36px,5vw,56px);padding-top:18px;overflow-x:auto;border-radius:16px;contain:paint}
.sbm-cmp{width:100%;min-width:760px;border:1px solid var(--sbm-rule-strong);border-radius:16px;border-collapse:separate;
  border-spacing:0;font-size:16px;line-height:1.4}
.sbm-cmp th,.sbm-cmp td{padding:17px 20px;border-bottom:1px solid var(--sbm-rule);text-align:center;vertical-align:middle}
.sbm-cmp thead th{position:relative;padding:40px 20px 28px;vertical-align:bottom;border-bottom-color:var(--sbm-rule-strong)}
.sbm-cmp tbody th[scope="row"]{text-align:left;font-weight:600}
.sbm-cmp .sbm-cmp-corner{text-align:left}
.sbm-cmp-corner span{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sbm-muted)}
.sbm-cmp-plan{display:block;font-size:18px;font-weight:700}
.sbm-cmp-price{display:block;margin-top:10px;font-size:clamp(1.75rem,1.2vw + 1.3rem,2.25rem);font-weight:700;line-height:1;
  letter-spacing:-.02em}
.sbm-cmp-note{display:block;margin-top:10px;font-size:14px;font-weight:400;color:var(--sbm-muted)}
.sbm-cmp .is-hi{background:var(--sbm-bg-alt)}
.sbm-cmp-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:6px 14px;border-radius:999px;
  background:var(--sbm-coral);color:var(--sbm-ink);font-size:13px;font-weight:700;white-space:nowrap}
.sbm-cmp-group th{padding:13px 20px;background:var(--sbm-bg-alt);text-align:left;font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase}
.sbm-yes,.sbm-no{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;vertical-align:middle}
.sbm-yes{background:var(--sbm-fg);color:var(--sbm-bg)}
.sbm-no{border:1px solid var(--sbm-rule-strong);color:var(--sbm-muted)}
.sbm-yes svg,.sbm-no svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.sbm-cmp tfoot td{padding:22px 14px;border-bottom:0}
.sbm-cmp-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 18px;
  border:1.5px solid var(--sbm-rule-strong);border-radius:12px;background:var(--sbm-bg);color:var(--sbm-fg);
  font-weight:700;text-decoration:none;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.sbm-cmp-btn:hover{border-color:var(--sbm-fg)}
.sbm-cmp-btn--hi{background:var(--sbm-coral);border-color:var(--sbm-coral);color:var(--sbm-ink)}
.sbm-cmp-btn--hi:hover{background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
.sbm-arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Full commission detail, under the table */
.sbm-comm-box{margin-top:24px;border:1px solid var(--sbm-rule);border-radius:16px;background:var(--sbm-bg)}
.sbm-comm-btn{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin:0;
  padding:18px 24px;border:0;border-radius:16px;background:none;color:var(--sbm-fg);text-align:left;cursor:pointer;
  font:600 17px/1.3 var(--sbm-font)}
.sbm-comm-detail{padding:0 24px 28px}
.sbm-comm-detail[hidden]{display:none}
.sbm-comm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  border-top:1px solid var(--sbm-rule);padding-top:28px}
.sbm-comm .sbm-h3{font-size:1.0625rem;margin-bottom:8px}
.sbm-comm p{font-size:15px;line-height:1.6}
.sbm-tiers{width:100%;margin-top:16px;border-collapse:collapse;font-size:15px}
.sbm-tiers th,.sbm-tiers td{padding:10px 0;border-bottom:1px solid var(--sbm-rule);text-align:left;vertical-align:top}
.sbm-tiers thead th{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-bottom-color:var(--sbm-fg)}
.sbm-tiers th:last-child,.sbm-tiers td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.sbm-tiers tbody th{font-weight:400}
.sbm-terms{margin-top:16px;border-top:1px solid var(--sbm-fg)}
.sbm-terms div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;padding:10px 0;
  border-bottom:1px solid var(--sbm-rule);font-size:15px}
.sbm-terms dt{font-weight:600}
.sbm-comm-foot{margin-top:24px;font-size:14px;line-height:1.6;color:var(--sbm-muted);max-width:60em}

/* Plus / minus, shared by the FAQ and the commission detail. The light
   coral would only be 2.2:1 on white, so it sits on a dark ink disc
   (7.3:1) in both modes. */
.sbm-pm{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--sbm-ink)}
.sbm-pm::before,.sbm-pm::after{content:'';position:absolute;left:9px;right:9px;top:14px;height:2px;border-radius:1px;
  background:var(--sbm-coral)}
.sbm-pm::after{transform:rotate(90deg);transition:transform .2s ease}
[aria-expanded="true"] .sbm-pm::after{transform:rotate(0deg)}
@media (prefers-reduced-motion:reduce){
  .sbm-cmp-btn,.sbm-pm::after{transition:none}
}
@media (max-width:767px){
  .sbm-cmp-hint{display:block;margin-top:32px;font-size:13px;color:var(--sbm-muted)}
  .sbm-cmp-scroll{margin-top:8px}
  .sbm-cmp{font-size:15px}
  /* The feature names stay put while the plans scroll past. */
  .sbm-cmp tbody th[scope="row"],.sbm-cmp .sbm-cmp-corner,.sbm-cmp tfoot td:first-child{position:sticky;left:0;z-index:1;
    min-width:168px;max-width:190px;background:var(--sbm-bg)}
  .sbm-comm{grid-template-columns:minmax(0,1fr)}
  .sbm-terms div{grid-template-columns:minmax(0,1fr);gap:2px}
  .sbm-comm-detail{padding:0 18px 24px}
  .sbm-comm-btn{padding:16px 18px}
}

/* ============================================================
   WHO IT'S FOR: two slim rows and a compare link
   ============================================================ */
.sbm-who-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:clamp(28px,3.5vw,40px)}
.sbm-who-head .sbm-section-head{margin-bottom:0}
.sbm-who-list{border-top:1px solid var(--sbm-fg)}
.sbm-who-row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:clamp(16px,3vw,48px);
  align-items:center;padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--sbm-rule-strong)}
/* A coral trace draws down the left edge on hover, the same motif as the hero. */
.sbm-who-row::before{content:'';position:absolute;left:-16px;top:18%;bottom:18%;width:2px;border-radius:2px;
  background:var(--sbm-coral);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.sbm-who-row:hover::before{transform:scaleY(1)}
.sbm-who-num{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--sbm-muted);font-variant-numeric:tabular-nums}
.sbm-who-title{font-size:clamp(1.375rem,1vw + 1rem,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.sbm-who-main p{margin-top:6px;max-width:36em;color:var(--sbm-muted)}
/* Fixed columns so "Usually on" and "Commission" line up row to row. */
.sbm-who-meta{display:grid;grid-template-columns:110px 210px;gap:clamp(20px,3vw,40px);text-align:left}
.sbm-who-meta dt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sbm-muted)}
.sbm-who-meta dd{margin-top:2px;font-weight:700;white-space:nowrap}
.sbm-who-compare{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  margin-top:clamp(20px,2.5vw,28px);padding:18px 18px 18px 24px;border-radius:16px;background:var(--sbm-bg-alt);
  color:var(--sbm-fg);text-decoration:none;transition:background-color .2s ease}
.sbm-who-compare:hover{background:color-mix(in srgb,var(--sbm-coral) 16%,var(--sbm-bg-alt))}
.sbm-who-compare-q{color:var(--sbm-muted)}
.sbm-who-compare-go{display:inline-flex;align-items:center;gap:14px;font-weight:700;font-size:1.0625rem}
.sbm-who-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sbm-coral);
  color:var(--sbm-ink);transition:transform .2s ease}
.sbm-who-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sbm-who-compare:hover .sbm-who-arrow{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .sbm-who-row::before,.sbm-who-compare,.sbm-who-arrow{transition:none}
}
@media (max-width:767px){
  .sbm-who-head{grid-template-columns:minmax(0,1fr)}
  .sbm-who-row{grid-template-columns:40px minmax(0,1fr);row-gap:14px;align-items:start}
  .sbm-who-row::before{left:-10px}
  .sbm-who-meta{grid-column:2;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:20px}
  .sbm-who-compare{padding:16px}
}

/* ============================================================
   FLOATING PATHS layer (behind the FAQ and the mobile menu)
   ============================================================ */
.sbm-fp{position:absolute;inset:0;pointer-events:none;opacity:var(--sbm-fp-opacity,1)}
.sbm-fp svg{display:block;width:100%;height:100%}

/* ============================================================
   FAQ: topic tabs over rounded question cards
   ============================================================ */
.sbm-faq{position:relative;overflow:hidden}
.sbm-faq > .sbm-wrap{position:relative;z-index:1}
.sbm-faq-wrap{max-width:1000px;text-align:center}
.sbm-faq-kicker{font-size:16px;font-weight:600;color:var(--sbm-muted)}
.sbm-faq-title{max-width:none;margin:12px auto 0;font-size:clamp(2.25rem,3.4vw + 1rem,3.75rem)}
.sbm-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:36px 0 44px}
.sbm-tab{appearance:none;min-height:44px;padding:0 20px;border:1px solid var(--sbm-rule-strong);border-radius:10px;
  background:transparent;color:var(--sbm-fg);font:600 15px/1 var(--sbm-font);cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.sbm-tab:hover{border-color:var(--sbm-fg)}
.sbm-tab[aria-selected="true"]{background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
.sbm-faq-list{display:grid;gap:14px;text-align:left;border-radius:14px}
.sbm-faq-list[hidden]{display:none}
.sbm-faq-item{border:1px solid var(--sbm-rule);border-radius:14px;background:var(--sbm-bg)}
.sbm-faq-btn{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;margin:0;
  padding:22px 24px 22px 28px;border:0;border-radius:14px;background:none;color:var(--sbm-fg);text-align:left;cursor:pointer;
  font:500 clamp(1.0625rem,.5vw + 1rem,1.25rem)/1.4 var(--sbm-font)}
.sbm-faq-a{padding:0 28px 26px}
.sbm-faq-a[hidden]{display:none}
.sbm-faq-a p{max-width:46em}
.sbm-faq-a a{text-decoration:underline;text-decoration-color:var(--sbm-coral);text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .sbm-tab{transition:none}
}
@media (max-width:559px){
  .sbm-faq-btn{padding:18px 16px 18px 20px}
  .sbm-faq-a{padding:0 20px 22px}
}

/* ============================================================
   CONTACT
   ============================================================ */
.sbm-contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);
  align-items:end}
.sbm-contact-grid .sbm-intro{margin-top:24px}
.sbm-contact-grid .sbm-btn{margin-top:36px}
.sbm-direct{border-top:1px solid var(--sbm-fg)}
.sbm-direct-title{padding:16px 0 4px;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.sbm-direct div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:16px 0;
  border-bottom:1px solid var(--sbm-rule)}
.sbm-direct dt{color:var(--sbm-muted)}
.sbm-direct dd a{font-weight:700;text-decoration:none}
.sbm-direct dd a:hover{text-decoration:underline;text-decoration-color:var(--sbm-coral);text-underline-offset:4px}
@media (max-width:859px){
  .sbm-contact-grid{grid-template-columns:minmax(0,1fr);align-items:start}
}

/* ============================================================
   FOOTER (every page with the main nav)
   Self-contained: no reliance on styles.css.
   ============================================================ */
.sbm-footer{background:var(--sbm-bg-alt);border-top:1px solid var(--sbm-rule);color:var(--sbm-fg);font-family:var(--sbm-font);
  font-size:16px;line-height:1.6;text-align:left;padding:clamp(56px,7vw,96px) 0 36px}
.sbm-footer *,.sbm-footer *::before,.sbm-footer *::after{box-sizing:border-box}
.sbm-footer :where(h2,p,ul,form){margin:0;padding:0;list-style:none}
.sbm-footer a{color:inherit;text-decoration:none}
.sbm-footer-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px);
  padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--sbm-rule)}
.sbm-footer-title{font:700 clamp(2rem,2vw + 1.2rem,2.75rem)/1.08 var(--sbm-font);letter-spacing:-.03em;max-width:9ch}
.sbm-footer-lede{margin-top:18px;max-width:22em;color:var(--sbm-muted)}
.sbm-news{display:flex;align-items:center;max-width:360px;margin-top:28px;padding:5px 5px 5px 16px;
  border:1px solid var(--sbm-rule-strong);border-radius:12px;background:var(--sbm-bg)}
.sbm-news:focus-within{outline:2px solid var(--sbm-coral);outline-offset:3px;box-shadow:0 0 0 3px var(--sbm-fg)}
.sbm-news input{flex:1;min-width:0;height:44px;border:0;background:transparent;color:var(--sbm-fg);font:400 16px var(--sbm-font)}
.sbm-news input:focus-visible{outline:none;box-shadow:none}
.sbm-news input::placeholder{color:var(--sbm-muted);opacity:1}
.sbm-news button{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--sbm-fg);color:var(--sbm-bg);cursor:pointer}
.sbm-news button:hover{background:var(--sbm-coral);color:var(--sbm-ink)}
.sbm-news button:focus-visible{outline-offset:2px}
.sbm-news button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round}
.sbm-news-msg{min-height:1.5em;margin-top:10px;font-size:14px;font-weight:600}
.sbm-news-small{max-width:26em;font-size:13px;color:var(--sbm-muted)}
.sbm-news-small a{text-decoration:underline;text-underline-offset:3px}
.sbm-footer-h{margin-bottom:22px;font:700 20px/1.2 var(--sbm-font);letter-spacing:-.01em}
.sbm-footer-links li + li{margin-top:12px}
.sbm-footer-links a:hover,.sbm-news-small a:hover{text-decoration:underline;text-decoration-color:var(--sbm-coral);
  text-underline-offset:4px}
.sbm-social{display:flex;flex-wrap:wrap;gap:12px}
.sbm-social a{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--sbm-rule-strong);border-radius:50%;
  transition:border-color .15s ease}
.sbm-social a:hover{border-color:var(--sbm-fg)}
.sbm-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.sbm-social .sbm-fill{fill:currentColor;stroke:none}
/* Light / dark switch, like the reference: sun, switch, moon. */
.sbm-theme{display:flex;align-items:center;gap:12px;margin-top:26px}
.sbm-theme-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sbm-theme-switch{position:relative;flex:none;width:60px;height:34px;padding:0;border:0;border-radius:999px;
  background:var(--sbm-fg);cursor:pointer}
.sbm-theme-knob{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:var(--sbm-bg);
  transition:transform .2s ease}
.sbm-theme-switch[aria-checked="true"] .sbm-theme-knob{transform:translateX(26px)}
.sbm-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  padding-top:32px;font-size:15px}
.sbm-footer-bottom p{color:var(--sbm-muted)}
.sbm-footer-legal-links{display:flex;flex-wrap:wrap;gap:8px 28px}
.sbm-footer .sb-cookie-reopen{appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;
  cursor:pointer}
.sbm-footer-legal-links a:hover,.sbm-footer .sb-cookie-reopen:hover{color:var(--sbm-fg);text-decoration:underline;
  text-decoration-color:var(--sbm-coral);text-underline-offset:4px}
.sbm-footer-trading{margin-top:18px;font-size:13px;color:var(--sbm-muted)}
@media (prefers-reduced-motion:reduce){
  .sbm-theme-knob,.sbm-social a{transition:none}
}
@media (max-width:1023px){
  .sbm-footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:559px){
  .sbm-footer-grid{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   COOKIE BANNER, restyled to the brand on every page.
   The banner's markup and script are inline on each page; these rules
   are prefixed with html so they win over each page's own inline CSS.
   Reject and Allow are styled identically, so neither is nudged.
   ============================================================ */
/* Base layout, for pages (like the homepage) that no longer carry the
   banner's inline CSS. Identical to what the older pages have inline. */
#sb-cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
#sb-cookie-banner.sb-cb-in{transform:none}
.sb-cb-card{margin:0 auto;display:flex;align-items:center}
.sb-cb-card p{margin:0;flex:1}
.sb-cb-row{display:flex;align-items:center;gap:10px;flex-shrink:0}
#sb-accept,#sb-decline{cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}

html #sb-cookie-banner{background:var(--sbm-bg-alt);border-top:1px solid var(--sbm-fg)}
html .sb-cb-card{max-width:var(--sbm-max);padding:16px var(--sbm-gutter);gap:24px;font-family:var(--sbm-font)}
html .sb-cb-card p{color:var(--sbm-fg);font-size:14px;line-height:1.55}
html .sb-cb-card p a{color:var(--sbm-fg);text-decoration:underline;text-decoration-color:var(--sbm-coral);
  text-underline-offset:3px}
html #sb-accept,html #sb-decline{min-height:44px;padding:0 22px;border:2px solid var(--sbm-fg);border-radius:4px;
  background:transparent;color:var(--sbm-fg);font:700 14px/1 var(--sbm-font)}
html #sb-accept:hover,html #sb-decline:hover{background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
@media (max-width:760px){
  html .sb-cb-card{flex-direction:column;align-items:stretch;gap:12px}
  html .sb-cb-row{justify-content:stretch}
  html #sb-accept,html #sb-decline{flex:1}
}
@media (prefers-reduced-motion:reduce){
  html #sb-cookie-banner,html #sb-accept,html #sb-decline{transition:none}
}

/* No JavaScript: accordion and tab panels stay open rather than unreachable. */
html:not(.sbm-js) .sbm-faq-a[hidden],
html:not(.sbm-js) .sbm-comm-detail[hidden],
html:not(.sbm-js) .sbm-faq-list[hidden]{display:grid}
html:not(.sbm-js) .sbm-faq-a[hidden],html:not(.sbm-js) .sbm-comm-detail[hidden]{display:block}
html:not(.sbm-js) .sbm-tabs{display:none}

/* Dark mode on the older pages: the About page's decorative wave canvas
   is painted in fixed light colours, which reads as a pale haze on dark. */
:root[data-theme="dark"] .sb-ab-wave{display:none}

/* ============================================================
   OLDER PAGES: colour fixes for the new coral and dark mode
   (styles.css and each page's inline CSS still carry the old
   rules; these sit on top with higher specificity)
   ============================================================ */
/* Anything filled with the coral takes dark text, in both modes. */
html .btn-primary,html .btn-primary-dark,html .btn-outline:hover,html .ap-ok,html .sb-lead-dash-badge,
html .ap-choice.is-picked .ap-key,html .ap-choice:has(input:checked) .ap-key{color:var(--sbm-ink)}
/* Light mode: those fills are charcoal now, so their text goes white. */
:root:not([data-theme="dark"]) .btn-primary,:root:not([data-theme="dark"]) .btn-primary-dark,
:root:not([data-theme="dark"]) .btn-outline:hover,:root:not([data-theme="dark"]) .ap-ok,
:root:not([data-theme="dark"]) .sb-lead-dash-badge{color:#FFFFFF}
/* Application forms: a focus ring that holds contrast, readable placeholders. */
html .ap-choice:focus-within{outline:2px solid var(--sbm-coral);outline-offset:3px;box-shadow:0 0 0 3px var(--sbm-fg)}
html .ap-input::placeholder{color:var(--sbm-muted);opacity:1}
/* About: the SB Engine preview's browser bar stays dark in both modes, so
   its "Sample data" tag and address stay readable. */
html .sb-ab-engine-chrome{background:#1A1616}
html .sb-ab-engine-url,html .sb-ab-engine-tag{color:rgba(255,255,255,.75)}

/* A tick with a label beside it (the Growth optimisation cell). */
.sbm-cell-yes{display:inline-flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}