/* Sidebar Marketing.
   The homepage loads only this file. The older pages (about, automation,
   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.

   Light mode only: a pure white page, near-black text, one coral accent,
   hairline rules. Contrast, checked (WCAG 2.1):
     text #1A1A1A on white 16.9:1
     secondary #595959 on white 7.0:1
     ink #212121 on coral #FB9280 7.3:1
   Coral never carries text (2.2:1 on white) and never stands alone as a
   focus ring. */

:root{
  /* Brand. Coral is the only accent. */
  --sbm-coral:#FB9280;
  /* The brand coral is 2.2:1 on white, so small text uses a darkened
     version of the same hue (5.5:1, checked) and the light coral stays
     for marks, rules and fills that carry no text. */
  --sbm-coral-text:#B4442C;
  --sbm-ink:#212121;

  --sbm-bg:#FFFFFF;
  /* A near-white for the few fills that need to read as a band. */
  --sbm-bg-alt:#FAFAFA;
  --sbm-fg:#1A1A1A;
  --sbm-muted:#595959;
  --sbm-rule:#E5E5E5;
  --sbm-rule-strong:#D4D4D4;
  color-scheme:light;

  /* The older pages' palette (styles.css), pointed at the same values. */
  --coral:#FB9280;
  --coral-bg:rgba(251,146,128,.14);
  --coral-border:rgba(251,146,128,.45);
  /* The light coral is only 2.2:1 as text, so where the older pages used a
     coral text shade they get the near-black instead. */
  --coral-dark:#1A1A1A;
  --coral-darker:#000000;

  /* Headings are self-hosted Fraunces (SIL Open Font License). Body type
     is the reader's own system face, so there is nothing to download and
     nothing to wait for. The About section has two faces of its own. */
  --sbm-head:'Fraunces',Georgia,'Times New Roman',serif;
  --sbm-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --sbm-about-font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --sbm-sign-font:'Mrs Saint Delafield','Snell Roundhand','Apple Chancery',cursive;

  --sbm-gutter:clamp(16px,4vw,48px);
  --sbm-max:1280px;
  /* Fraunces's optical size axis: smaller for body-sized headings. */
  --sbm-head-opsz:'opsz' 40;

  /* 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:18px;
  --sbm-bar-pad-scrolled:12px;
}

@media (max-width:1023px){
  :root{
    --sbm-bar-pad:14px;
    --sbm-bar-pad-scrolled:9px;
  }
}

/* Self-hosted so no font service sees the reader's IP, which is what the
   privacy notice says. Fraunces is variable from 400 to 700, served as one
   file the browser interpolates. */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/fraunces-variable.woff2') format('woff2-variations'),
      url('fonts/fraunces-variable.woff2') format('woff2');
}

/* Two faces used only by the About section, both self-hosted for the same
   reason and both under the SIL Open Font License. Instrument Sans carries
   the copy and the stats; Mrs Saint Delafield signs it off. Neither is
   loaded as a critical face, so swap is the right display. */
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/instrument-sans-variable.woff2') format('woff2-variations'),
      url('fonts/instrument-sans-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/mrs-saint-delafield.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 ---------- */
/* One shape for every button on the site: a square-cornered rectangle,
   a solid near-black fill for the primary action, a hairline outline for
   everything else. No pills, no coral fills, no icons bolted on. */
.sbm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 20px;border:1px solid transparent;border-radius:2px;
  font:600 15px/1.1 var(--sbm-font);text-decoration:none;
  white-space:nowrap;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.sbm-btn--solid{position:relative;background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
/* A coral rule under the primary button: the accent without a coral fill. */
.sbm-btn--solid::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sbm-coral)}
.sbm-btn--solid:hover{background:#000;border-color:#000}
.sbm-btn--outline{background:transparent;border-color:var(--sbm-rule-strong);color:var(--sbm-fg)}
.sbm-btn--outline:hover{border-color:var(--sbm-fg)}
.sbm-btn--lg{min-height:52px;padding:0 26px;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 same bar as livelinks.me: a floating pill that holds the logo, a
   row of dropdowns and the two actions; wide mega-menu cards under it on
   a mouse; a full-height sheet with accordions on a phone; and the whole
   bar tucking away as you scroll down and returning when you scroll back
   up. livelinks is a dark site, so the parts that were panel greys there
   are white, hairline and ink here — the shape, sizes and behaviour are
   the same, the palette is this site's.
   ---------------------------------------------------------------- */
:root{--sbm-navh:76px}
.sbm-nav{position:sticky;top:0;z-index:100;padding:12px 0 0;
  transition:transform .32s cubic-bezier(.2,.8,.2,1)}
/* Scrolling down: tucked away above the screen. */
.sbm-nav.away{transform:translateY(calc(-100% - 8px))}
.sbm-nav.away .sbm-nav-item.open .mm{visibility:hidden}
.sbm-nav-wrap{max-width:var(--sbm-max);margin:0 auto;padding-inline:var(--sbm-gutter)}
.sbm-nav-bar{position:relative;height:64px;display:flex;align-items:center;gap:28px;
  padding:0 10px 0 22px;border-radius:999px;background:var(--sbm-bg);
  border:1px solid var(--sbm-rule);box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
.sbm-nav .sbm-logo{flex:none;margin-right:0}
.sbm-nav .sbm-logo-svg{height:30px}

.sbm-nav-links{display:flex;align-items:center;gap:2px;height:100%}
.sbm-nav-item{position:static;height:100%;display:flex;align-items:center}
.sbm-nav-top{display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 13px;border:0;
  border-radius:999px;background:none;color:var(--sbm-muted);font-family:var(--sbm-font);
  font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;
  transition:color .15s,background .15s}
.sbm-nav-top:hover{color:var(--sbm-fg);background:var(--sbm-bg-alt)}
.sbm-nav-item.open .sbm-nav-top{color:var(--sbm-fg);background:var(--sbm-bg-alt)}
.sbm-nav-top .sbm-caret{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.sbm-nav-item.open .sbm-caret{transform:rotate(180deg)}

.sbm-nav-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.sbm-nav-login{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;
  background:var(--sbm-bg-alt);color:var(--sbm-fg);font-size:15px;font-weight:600;text-decoration:none;
  white-space:nowrap;transition:background .15s}
.sbm-nav-login:hover{background:var(--sbm-rule)}
.sbm-nav-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;
  border-radius:999px;background:var(--sbm-fg);color:var(--sbm-bg);font-size:15px;font-weight:600;
  text-decoration:none;white-space:nowrap;transition:background .15s}
.sbm-nav-cta:hover{background:#000}
.sbm-nav-top:focus-visible,.sbm-nav-login:focus-visible,.sbm-nav-cta:focus-visible,
.sbm-nav-menu:focus-visible{outline:2px solid var(--sbm-coral);outline-offset:3px}

/* The dropdown: a wide card under the bar, spanning the whole bar width. */
.mm{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:2;visibility:hidden;opacity:0;
  transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s .25s}
/* Keeps the hover alive while the pointer crosses the gap to the card. */
.mm::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.sbm-nav-item.open .mm{visibility:visible;opacity:1;transform:none;pointer-events:auto;
  transition:opacity .18s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s}
.mm-in{display:flex;gap:36px;padding:28px 32px 30px;border-radius:28px;background:var(--sbm-bg);
  border:1px solid var(--sbm-rule);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.mm-col{display:flex;flex-direction:column;gap:4px;min-width:170px}
.mm-col.wide{flex:1;min-width:0}
.mm-col.two{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:4px;align-content:start}
.mm-col.two h4{grid-column:1 / -1}
.mm-col h4{margin-bottom:8px;font-family:var(--sbm-font);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sbm-muted)}
.mm-link{display:inline-flex;align-items:center;gap:10px;padding:7px 0;font-size:15.5px;font-weight:600;
  color:var(--sbm-fg);text-decoration:none;transition:color .15s}
.mm-link:hover{color:var(--sbm-coral-text)}
.mm-item{display:grid;gap:3px;padding:10px 12px;margin:0 -12px;border-radius:14px;text-decoration:none;
  color:var(--sbm-fg);transition:background .15s}
.mm-item:hover{background:var(--sbm-bg-alt)}
.mm-item b{font-size:15.5px;font-weight:700}
.mm-item span{font-size:13.5px;color:var(--sbm-muted);line-height:1.4}
.mm-note p{font-size:14px;color:var(--sbm-muted);line-height:1.5;max-width:34ch}
.mm-all{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;font-size:14px;
  font-weight:700;color:var(--sbm-coral-text);text-decoration:none}
.mm-all svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.mm-all:hover svg{transform:translateX(3px)}

/* The one dark card in the menu, so the promoted package is the thing
   your eye lands on first. */
.mm-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;height:100%;
  max-width:380px;margin-left:auto;padding:18px 18px 16px;border-radius:16px;text-decoration:none;
  background:var(--sbm-ink);color:var(--sbm-bg);border:1px solid var(--sbm-ink);transition:border-color .15s}
.mm-card:hover{border-color:var(--sbm-coral)}
.mm-card-mark{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sbm-coral)}
.mm-card b{margin-top:6px;font-size:18px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.mm-card > span:not(.mm-card-mark){font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62)}
.mm-card .mm-all{font-style:normal;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.88)}
.mm-card .mm-all svg{color:var(--sbm-coral)}

.sbm-nav-menu{display:none;width:44px;height:44px;padding:0;border:0;border-radius:999px;
  background:var(--sbm-bg-alt);cursor:pointer;position:relative}
.sbm-nav-menu span{position:absolute;left:14px;right:14px;height:1.8px;border-radius:2px;
  background:var(--sbm-fg);transition:transform .25s cubic-bezier(.16,1,.3,1),top .25s cubic-bezier(.16,1,.3,1)}
.sbm-nav-menu span:first-child{top:18px}
.sbm-nav-menu span:last-child{top:24.5px}
.sbm-nav.open .sbm-nav-menu span:first-child{top:21.2px;transform:rotate(45deg)}
.sbm-nav.open .sbm-nav-menu span:last-child{top:21.2px;transform:rotate(-45deg)}
.sbm-nav-sheet{display:none}

/* Anchors land below the bar, not under it. While the bar is away the
   sticky package header can sit higher, so no empty strip is left. */
html{scroll-padding-top:calc(var(--sbm-navh) + 16px)}
@media (min-width:860px){
  .sbm-cmp thead{top:calc(var(--sbm-navh) + 8px)}
  body.nav-away .sbm-cmp thead{top:12px}
}
@media (max-width:639px){
  .sbm-cmp[data-plan] thead{top:calc(var(--sbm-navh) + 8px)}
  body.nav-away .sbm-cmp[data-plan] thead{top:12px}
}

/* ---------- tablets and phones ---------- */
@media (max-width:1080px){
  .sbm-nav-links{display:none}
  .sbm-nav-menu{display:block}
  .sbm-nav-bar{height:60px;padding:0 8px 0 16px;gap:12px}
  .sbm-nav .sbm-logo-svg{height:26px}
  .sbm-nav-end{gap:6px}
  .sbm-nav-login,.sbm-nav-cta{height:44px;padding:0 14px;font-size:14px}
  .sbm-nav-sheet{position:fixed;left:0;right:0;bottom:0;top:var(--sheet-top,84px);z-index:99;
    display:flex;flex-direction:column;gap:2px;padding:16px 24px 28px;overflow-y:auto;
    background:var(--sbm-bg);visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s .3s}
  .sbm-nav.open .sbm-nav-sheet{visibility:visible;opacity:1;transform:none;
    transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s}
  body.menu-open{overflow:hidden}
  .ms-sec{border-bottom:1px solid var(--sbm-rule)}
  .ms-sec summary,.ms-plain{display:flex;align-items:center;justify-content:space-between;padding:18px 0;
    font-family:var(--sbm-head);font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--sbm-fg);
    text-decoration:none;cursor:pointer;list-style:none}
  .ms-sec summary::-webkit-details-marker{display:none}
  .ms-sec summary .sbm-caret{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.16,1,.3,1)}
  .ms-sec[open] summary .sbm-caret{transform:rotate(180deg)}
  .ms-body{display:grid;gap:22px;padding:0 0 22px}
  .ms-body .mm-col{min-width:0}
  .ms-body .mm-col.two{grid-template-columns:1fr}
  .ms-body .mm-item{margin:0;padding:8px 0}
  .ms-body .mm-item:hover{background:none}
  .ms-plain{border-bottom:1px solid var(--sbm-rule)}
  .ms-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:24px}
  .ms-btns a{justify-content:center;height:52px;border-radius:999px;font-size:16px}
}
@media (max-width:420px){
  .sbm-nav-wrap{padding-inline:12px}
  .sbm-nav-bar{padding:0 6px 0 14px}
  .sbm-nav-login{display:none}
  .sbm-nav-cta{height:42px;padding:0 13px}
  .sbm-nav-menu{width:42px;height:42px}
  .sbm-nav-menu span{left:13px;right:13px}
  .sbm-nav-menu span:first-child{top:17px}
  .sbm-nav-menu span:last-child{top:23.5px}
  .sbm-nav.open .sbm-nav-menu span:first-child,
  .sbm-nav.open .sbm-nav-menu span:last-child{top:20.2px}
}
@media (prefers-reduced-motion:reduce){
  .sbm-nav,.mm,.sbm-caret,.sbm-nav-menu span,.sbm-nav-sheet,.mm-all svg{transition:none}
}
/* No JavaScript: the bar stays put and the sheet sections are plain
   <details>, so every link is still reachable. */
html:not(.sbm-js) .sbm-nav{position:static}

/* ============================================================
   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.7;
  -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)}
/* Sections no longer alternate colour; they are separated by a hairline. */
.sbm-section--cream,.sbm-section--bg,.sbm-section--white{background:var(--sbm-bg)}
.sbm-section + .sbm-section{border-top:1px solid var(--sbm-rule)}

/* Type. Serif headings at one weight, tightly tracked; the body is the
   reader's system sans at 17px with a roomy line height. */
.sbm-page :where(h1,h2,h3,h4),.sbm-h1,.sbm-h2,.sbm-h3,.sbm-faq-title,
.sbm-cmp-price,.sbm-contact-title{font-family:var(--sbm-head);font-weight:500;
  font-variation-settings:var(--sbm-head-opsz);font-optical-sizing:none}
.sbm-eyebrow{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;
  color:var(--sbm-coral-text)}
.sbm-h1{font-size:clamp(2.5rem,3.4vw + 1rem,4.25rem);font-weight:500;line-height:1.05;
  letter-spacing:-.02em;text-wrap:balance}
.sbm-h2{text-wrap:balance}
.sbm-h2{font-size:clamp(2.125rem,2.8vw + 1rem,3.5rem);font-weight:400;line-height:1.08;
  letter-spacing:-.02em;max-width:22ch}
.sbm-h3{font-size:1.375rem;font-weight:400;line-height:1.25;letter-spacing:-.015em}
.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{text-decoration-color:var(--sbm-coral)}
.sbm-textlink:hover{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
   ============================================================ */
.sbm-hero{background:var(--sbm-bg);padding-block:clamp(48px,6vw,96px) clamp(56px,7vw,104px)}
.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}
  /* Full width, and allowed to run onto a second line: the automation
     button's label is too long to hold on one at this width. */
  .sbm-hero-actions .sbm-btn{width:100%;white-space:normal;text-align:center;
    padding-block:12px;line-height:1.25}
}

/* Homepage service showcase: one compact view of the three connected offers. */
.sbm-showcase{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(40px,4.5vw,68px) clamp(48px,6vw,84px)}
.sbm-showcase::before{content:"";position:absolute;z-index:0;top:-9%;right:3%;
  width:clamp(260px,29vw,370px);aspect-ratio:1;pointer-events:none;
  background:url("services/sidebar-mark-watermark.svg") center/contain no-repeat;
  opacity:.14;transform:rotate(-14deg)}
.sbm-showcase>.sbm-wrap{position:relative;z-index:1}
.sbm-showcase-head{max-width:900px}
.sbm-showcase-head .sbm-h1{max-width:22ch;font-size:clamp(2.75rem,4.5vw,4.75rem)}
.sbm-showcase-head .sbm-lede{max-width:42em;margin-top:18px}
.sbm-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,42px);margin-top:clamp(28px,3.5vw,46px)}
.sbm-service{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;
  padding-top:0;color:var(--sbm-fg);text-decoration:none}
.sbm-service-art{height:clamp(150px,18vw,220px);display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.sbm-service-art img{width:100%;height:100%;object-fit:contain;transition:transform .25s ease}
.sbm-service-title{margin-top:10px;font-family:var(--sbm-font);font-size:clamp(1.125rem,1vw + .7rem,1.375rem);
  font-weight:600;line-height:1.25;letter-spacing:-.02em}
.sbm-service-copy{margin-top:8px;max-width:32ch;color:var(--sbm-muted);font-size:15px;line-height:1.55}
.sbm-service-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;
  margin-top:16px;padding:10px 14px;border:1px solid var(--sbm-rule-strong);border-radius:4px;
  color:var(--sbm-fg);font-size:14px;font-weight:600;text-align:center;text-decoration:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.sbm-service:hover .sbm-service-art img{transform:translateY(-4px)}
.sbm-service:hover .sbm-service-link{background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
.sbm-service:focus-visible{outline:2px solid var(--sbm-coral);outline-offset:5px;border-radius:2px}
@media(max-width:639px){
  .sbm-showcase{padding-block:32px 46px}
  .sbm-showcase::before{top:-8%;right:-8%;width:clamp(220px,62vw,290px);opacity:.11;transform:rotate(-16deg)}
  .sbm-showcase-head .sbm-h1{font-size:clamp(2.35rem,10vw,3.5rem)}
  .sbm-showcase-head .sbm-lede{margin-top:12px;font-size:1rem;line-height:1.5}
  .sbm-service-grid{grid-template-columns:1fr;gap:0;margin-top:24px}
  .sbm-service{grid-template-columns:minmax(112px,34vw) minmax(0,1fr);
    grid-template-rows:auto 1fr auto;column-gap:16px;align-items:center;padding-block:10px}
  .sbm-service-art{grid-column:1;grid-row:1/4;height:128px}
  .sbm-service-title{grid-column:2;grid-row:1;align-self:end;margin-top:0;font-size:1.125rem}
  .sbm-service-copy{grid-column:2;grid-row:2;align-self:center;margin-top:5px;font-size:14px}
  .sbm-service-link{grid-column:2;grid-row:3;align-self:start;margin-top:7px;font-size:13px}
}

/* ============================================================
   PACKAGES: comparison table
   ============================================================ */
.sbm-h2--wide{max-width:24ch;margin-top:18px}
.sbm-cmp-intro{margin-top:18px;color:var(--sbm-muted)}
/* Room above the table for the badge to sit on the top edge. */
.sbm-cmp-box{margin-top:clamp(36px,5vw,56px);padding-top:18px}
.sbm-cmp{width:100%;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.875rem,1.3vw + 1.4rem,2.5rem);font-weight:400;line-height:1.05;
  letter-spacing:0}
.sbm-cmp-note{display:block;margin-top:10px;font-size:14px;font-weight:400;color:var(--sbm-muted)}
/* No tinted column: the Growth plan is marked by its badge alone. */
.sbm-cmp .is-hi{background:none}
.sbm-cmp-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:5px 14px;border-radius:999px;
  background:var(--sbm-bg);border:1px solid var(--sbm-coral);color:var(--sbm-fg);font-size:13px;font-weight:600;
  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);box-shadow:inset 0 -2px 0 var(--sbm-coral)}
.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;min-height:48px;padding:0 16px;
  border:1px solid var(--sbm-rule-strong);border-radius:2px;background:var(--sbm-bg);color:var(--sbm-fg);
  font-weight:600;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-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
.sbm-cmp-btn--hi:hover{background:#000;border-color:#000}
.sbm-arrow{display:none}

/* Full commission detail, under the table */
.sbm-comm-box{margin-top:32px;border-top:1px solid var(--sbm-rule)}
.sbm-comm-btn{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin:0;
  padding:20px 0;border:0;background:none;color:var(--sbm-fg);text-align:left;cursor:pointer;
  font:600 17px/1.3 var(--sbm-font)}
.sbm-comm-detail{padding:0 0 28px}
.sbm-comm-detail[hidden]{display:none}
/* Plain rows, one column, no boxes: a label on the left and the figure
   or the answer on the right. */
.sbm-comm{display:grid;gap:36px;max-width:46rem}
.sbm-comm .sbm-h3{font-size:1.0625rem;font-weight:600;font-family:var(--sbm-font);margin-bottom:6px}
.sbm-comm p{font-size:16px;line-height:1.6;color:var(--sbm-muted)}
.sbm-tiers{width:100%;margin-top:14px;border-collapse:collapse;font-size:16px}
.sbm-tiers th,.sbm-tiers td{padding:11px 0;border-bottom:1px solid var(--sbm-rule);text-align:left;vertical-align:top}
.sbm-tiers thead{display:none}
.sbm-tiers th:last-child,.sbm-tiers td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.sbm-tiers tbody th{font-weight:400}
.sbm-terms{margin-top:14px}
.sbm-terms div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding:11px 0;
  border-bottom:1px solid var(--sbm-rule);font-size:16px}
.sbm-terms dt{color:var(--sbm-muted)}
.sbm-terms dd{text-align:right}
.sbm-comm-foot{margin-top:28px;font-size:15px;line-height:1.6;color:var(--sbm-muted);max-width:46rem}

/* 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 .15s ease}
[aria-expanded="true"] .sbm-pm::after{transform:rotate(0deg)}
@media (prefers-reduced-motion:reduce){
  .sbm-cmp-btn,.sbm-pm::after{transition:none}
}
/* Small laptops: equal plan columns, prices and buttons on one line. */
@media (min-width:860px){
  .sbm-cmp{table-layout:fixed}
  .sbm-cmp thead th:first-child{width:32%}
  .sbm-cmp-price,.sbm-cmp-btn{white-space:nowrap}
  .sbm-cmp .sbm-cell-yes{white-space:normal}
}
/* Phones and small tablets: no sideways scrolling. Each feature name
   gets its own line with the three plans' answers in columns beneath it,
   and the plan names stay pinned under the nav bar while you scroll down
   the rows, so you always know which column is which. */
@media (max-width:859px){
  .sbm-cmp-box{margin-top:28px;padding-top:0}
  .sbm-cmp{display:block;border:0;border-radius:0;font-size:14px}
  .sbm-cmp thead,.sbm-cmp tbody,.sbm-cmp tfoot{display:block}
  .sbm-cmp tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .sbm-cmp th,.sbm-cmp td{display:block;padding:0;border:0}
  .sbm-cmp .is-hi{background:none}
  /* Text scales with the screen, so the narrowest phones get smaller type
     instead of words running into the next column. */
  .sbm-cmp thead th,.sbm-cmp tbody td{text-wrap:balance}
  /* A hairline between the plan columns keeps each answer in its own lane. */
  .sbm-cmp thead th:nth-child(n+3),.sbm-cmp tbody td:nth-child(n+3){border-left:1px solid var(--sbm-rule)}

  .sbm-cmp thead{position:sticky;top:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad-scrolled) + 1px);z-index:2;
    background:var(--sbm-bg);border-bottom:1px solid var(--sbm-rule-strong)}
  .sbm-cmp thead tr{padding-top:10px}
  .sbm-cmp .sbm-cmp-corner{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sbm-cmp thead th{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:8px 4px 12px;
    text-align:center}
  .sbm-cmp thead th.is-hi{background:none}
  .sbm-cmp-badge{position:static;transform:none;margin-bottom:6px;padding:2px clamp(5px,1.6vw,8px);
    font-size:clamp(9px,2.6vw,10.5px)}
  .sbm-cmp-plan{font-size:clamp(11.5px,3.45vw,13.5px);white-space:nowrap}
  .sbm-cmp-price{margin-top:3px;font-size:clamp(15px,5vw,20px);white-space:nowrap}
  .sbm-cmp-note{display:none}

  .sbm-cmp tbody tr{row-gap:10px;padding:14px 0;border-bottom:1px solid var(--sbm-rule)}
  .sbm-cmp tbody th[scope="row"]{grid-column:1 / -1;font-size:clamp(13px,3.7vw,14.5px)}
  .sbm-cmp tbody td{display:flex;align-items:center;justify-content:center;min-height:24px;padding:0 6px;
    font-size:clamp(11.5px,3.45vw,13.5px);line-height:1.35}
  .sbm-cmp tbody tr.sbm-cmp-group{padding:22px 0 4px;border-bottom:0}
  .sbm-cmp tbody:first-of-type tr.sbm-cmp-group{padding-top:14px}
  .sbm-cmp-group th{grid-column:1 / -1;padding:8px 10px;border-radius:8px;font-size:11.5px}
  .sbm-yes,.sbm-no{width:22px;height:22px}
  .sbm-yes svg,.sbm-no svg{width:14px;height:14px}
  .sbm-cmp .sbm-cell-yes{flex-direction:column;gap:4px;font-size:clamp(10.5px,3.1vw,12.5px);white-space:normal;text-align:center}

  .sbm-cmp tfoot tr{column-gap:6px;padding-top:18px}
  .sbm-cmp tfoot td{padding:0}
  .sbm-cmp tfoot td:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sbm-cmp-btn{min-height:46px;gap:6px;padding:0 4px;border-radius:10px;font-size:clamp(12px,3.5vw,14px);white-space:nowrap}
  .sbm-cmp-btn .sbm-arrow{width:14px;height:14px}
}
@media (max-width:399px){
  .sbm-cmp-btn .sbm-arrow{display:none}
}

/* Phones with JavaScript: one package at a time, picked above the table.
   Each row becomes "feature ... answer", and the other two plans' columns
   are hidden. (Column 1 is the feature name; plans are columns 2 to 4.)
   Tablets keep all three plans side by side in the lined layout above. */
.sbm-plan-pick{display:none}
@media (max-width:639px){
  .sbm-js .sbm-plan-pick{display:flex;gap:4px;margin-bottom:18px;padding:4px;border:1px solid var(--sbm-rule);border-radius:4px}
  .sbm-plan-pick button{appearance:none;flex:1 1 auto;min-width:0;min-height:42px;padding:0 8px;border:0;border-radius:2px;
    background:none;color:var(--sbm-fg);font:600 clamp(12.5px,3.8vw,14px)/1.1 var(--sbm-font);white-space:nowrap;cursor:pointer}
  .sbm-plan-pick button[aria-pressed="true"]{background:var(--sbm-fg);color:var(--sbm-bg)}

  .sbm-cmp[data-plan="1"] :is(th,td):is(:nth-child(3),:nth-child(4)),
  .sbm-cmp[data-plan="2"] :is(th,td):is(:nth-child(2),:nth-child(4)),
  .sbm-cmp[data-plan="3"] :is(th,td):is(:nth-child(2),:nth-child(3)){display:none}

  .sbm-cmp[data-plan] thead{position:static;border-bottom:0}
  .sbm-cmp[data-plan] thead tr{grid-template-columns:minmax(0,1fr);padding:0}
  .sbm-cmp[data-plan] thead th:not(.sbm-cmp-corner){align-items:flex-start;justify-content:flex-start;padding:20px;border:0;
    border-radius:16px;background:var(--sbm-bg-alt);text-align:left;text-wrap:wrap}
  .sbm-cmp[data-plan] .sbm-cmp-badge{margin-bottom:10px;padding:3px 10px;font-size:12px}
  .sbm-cmp[data-plan] .sbm-cmp-plan{font-size:16px}
  .sbm-cmp[data-plan] .sbm-cmp-price{margin-top:6px;font-size:2rem}
  .sbm-cmp[data-plan] .sbm-cmp-note{display:block;margin-top:6px;font-size:14px}

  .sbm-cmp[data-plan] tbody tr{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:0;
    padding:13px 0}
  .sbm-cmp[data-plan] tbody th[scope="row"]{grid-column:auto;font-size:14.5px;font-weight:500}
  .sbm-cmp[data-plan] tbody td{justify-content:flex-end;min-height:0;padding:0;border:0;font-size:14.5px;font-weight:600;
    text-align:right;text-wrap:wrap}
  .sbm-cmp[data-plan] tbody tr.sbm-cmp-group{grid-template-columns:minmax(0,1fr);padding:24px 0 6px}
  .sbm-cmp[data-plan] tbody:first-of-type tr.sbm-cmp-group{padding-top:18px}
  .sbm-cmp[data-plan] .sbm-cell-yes{flex-direction:row;gap:8px;font-size:14.5px}

  .sbm-cmp[data-plan] tfoot tr{grid-template-columns:minmax(0,1fr);padding-top:20px}
  .sbm-cmp[data-plan] .sbm-cmp-btn{min-height:52px;font-size:16px}
  .sbm-cmp[data-plan] .sbm-cmp-btn .sbm-arrow{display:block;width:16px;height:16px}
  /* With one plan on screen the button can say which: "Choose Growth". */
  .sbm-cmp[data-plan] .sbm-cmp-btn .sbm-sr{position:static;width:auto;height:auto;margin:0;overflow:visible;
    clip:auto;white-space:nowrap}
}
@media (prefers-reduced-motion:no-preference){
  .sbm-plan-pick button{transition:background-color .15s ease,color .15s ease}
}
@media (max-width:767px){
  .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}
}

/* ============================================================
   AI AND AUTOMATION (/automation)
   ============================================================ */
/* The page opens straight on the packages, so the intro carries the H1. */
.sbm-auto-top{padding-block:clamp(44px,6vw,88px) clamp(56px,7vw,104px)}
.sbm-auto-head{display:grid;gap:18px;max-width:46rem;margin-bottom:clamp(40px,5vw,64px)}
.sbm-auto-head .sbm-h2{max-width:none}
.sbm-auto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,28px);align-items:start}
/* Square cards, a hairline frame, and a coral rule along the top edge. */
.sbm-auto-card{position:relative;display:flex;flex-direction:column;gap:14px;height:100%;
  padding:clamp(26px,2.5vw,34px);border:1px solid var(--sbm-rule);border-radius:2px;background:var(--sbm-bg)}
.sbm-auto-card::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  background:var(--sbm-coral)}
.sbm-auto-num{font-family:var(--sbm-head);font-size:1.125rem;font-variation-settings:'opsz' 20;
  font-variant-numeric:tabular-nums;color:var(--sbm-coral-text)}
.sbm-auto-name{font-family:var(--sbm-head);font-size:clamp(1.5rem,1.1vw + 1.1rem,1.875rem);font-weight:400;
  line-height:1.15;letter-spacing:-.015em}
.sbm-auto-line{color:var(--sbm-muted);font-size:16px;line-height:1.55}
.sbm-auto-price{display:grid;gap:6px;margin-top:6px;padding:18px 0;border-block:1px solid var(--sbm-rule)}
.sbm-auto-price > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sbm-auto-price dt{font-size:15px;color:var(--sbm-muted)}
.sbm-auto-price dd{font-weight:600}
.sbm-auto-list{display:grid;gap:12px;margin-top:4px}
.sbm-auto-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;
  font-size:16px;line-height:1.5}
.sbm-auto-tick{display:grid;place-items:center;width:20px;height:20px;margin-top:3px;border-radius:2px;
  border:1px solid var(--sbm-coral);color:var(--sbm-coral-text)}
.sbm-auto-tick svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round}
.sbm-auto-cta{margin-top:auto;justify-content:center;width:100%}
/* Add-ons: a one-off job on the left, its starting price on the right,
   set large in the serif so the list reads as a price list. */
.sbm-add-head{display:grid;gap:16px;max-width:44rem;margin-bottom:clamp(32px,4vw,48px)}
.sbm-add-list{display:grid;border-top:1px solid var(--sbm-fg)}
.sbm-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,64px);align-items:baseline;
  padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--sbm-rule)}
.sbm-add-h{font-size:clamp(1.25rem,1.1vw + 1rem,1.625rem);font-weight:500;line-height:1.15;letter-spacing:-.015em}
.sbm-add-main p{margin-top:8px;max-width:44em;font-size:16.5px;line-height:1.55;color:var(--sbm-muted)}
.sbm-add-p{display:grid;justify-items:end;font-family:var(--sbm-head);font-weight:500;
  font-size:clamp(1.5rem,1.3vw + 1.1rem,2rem);line-height:1;white-space:nowrap}
.sbm-add-from{font-family:var(--sbm-font);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sbm-coral-text);margin-bottom:6px}
@media (max-width:559px){
  .sbm-add{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .sbm-add-p{justify-items:start}
  .sbm-add-from{margin-bottom:2px}
}

/* Enquire block at the foot of the page. */
.sbm-auto-enquire-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);
  align-items:start}
.sbm-auto-enquire-grid .sbm-h2{margin-top:18px}
.sbm-auto-enquire-grid .sbm-intro{margin-top:18px}
.sbm-auto-enquire-actions{margin-top:30px}
.sbm-auto-enquire .sbm-contact-direct{margin-top:0}
@media (max-width:859px){
  .sbm-auto-enquire-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:559px){
  .sbm-auto-enquire-actions .sbm-btn{width:100%;white-space:normal;text-align:center;line-height:1.3;padding:12px 16px}
}
.sbm-auto-addon-list{display:grid;gap:0;border-top:1px solid var(--sbm-rule)}
.sbm-auto-addon-list li{padding:16px 0;border-bottom:1px solid var(--sbm-rule);font-size:17px}
@media (max-width:959px){
  .sbm-auto-grid{grid-template-columns:minmax(0,1fr);max-width:34rem}
}

/* ============================================================
   AI AND AUTOMATION taster (homepage)
   Four pillars across the top, then one evening written out as a log:
   time, what came in, what the system did. Hairlines and tabular
   figures, so it reads like a record rather than a feature grid.
   ============================================================ */
.sbm-ai-head{display:grid;gap:16px;max-width:44rem;margin-bottom:clamp(36px,4.5vw,56px)}

/* What we set up, in three plain columns. */
.sbm-ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);
  margin-top:clamp(40px,5vw,60px)}
.sbm-ai-col-h{font-family:var(--sbm-font);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sbm-coral-text);padding-bottom:14px;border-bottom:1px solid var(--sbm-fg)}
.sbm-ai-col-list{display:grid}
.sbm-ai-col-list li{padding:14px 0;border-bottom:1px solid var(--sbm-rule);font-size:16.5px;line-height:1.5}

.sbm-ai-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(32px,4vw,48px)}
.sbm-ai-cta-note{font-size:15px;color:var(--sbm-muted)}
.sbm-ai-addons{margin-top:clamp(28px,3vw,40px);padding-top:clamp(20px,2.5vw,28px);border-top:1px solid var(--sbm-rule);
  max-width:60rem;font-size:15px;line-height:1.6;color:var(--sbm-muted)}

@media (max-width:1023px){
  .sbm-ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:639px){
  .sbm-ai-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .sbm-ai-cta .sbm-btn{width:100%}
}

/* ============================================================
   Thanks: where every form lands after it posts
   ============================================================ */
.sbm-thanks-wrap{max-width:720px}
.sbm-thanks-wrap .sbm-h1{margin:18px 0 0;max-width:16ch}
.sbm-thanks-wrap .sbm-lede{margin:24px 0 0}
.sbm-thanks-next{margin-top:clamp(40px,5vw,60px);padding-top:clamp(28px,3.5vw,40px);
  border-top:1px solid var(--sbm-rule)}
.sbm-thanks-next-h{margin:0;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sbm-muted)}
.sbm-thanks-list{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px;
  font-size:1.0625rem}
.sbm-thanks-back{margin:clamp(36px,4.5vw,52px) 0 0}

/* ============================================================
   About us: the two of us, in our own type
   ----------------------------------------------------------
   No panels and no borders beyond one hairline, because the whole
   section is meant to read as a page from something printed rather
   than another card on a marketing site. The stats are the heading,
   so there is no separate title above them.
   ============================================================ */
.sbm-about{font-family:var(--sbm-about-font)}
.sbm-about-wrap{max-width:1040px}
.sbm-about .sbm-eyebrow{margin-bottom:clamp(28px,4vw,44px)}

/* The heading. Two stats on one baseline, each a number over a label,
   set in the About face rather than the site serif so the whole block
   reads as a change of voice. */
.sbm-about-stats{font-family:var(--sbm-about-font);max-width:none;margin:0;
  padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--sbm-rule);
  display:flex;flex-wrap:wrap;gap:clamp(36px,6vw,96px);align-items:flex-end}
.sbm-about-stat{display:block}
.sbm-about-num{display:block;font-family:var(--sbm-head);font-size:clamp(2.75rem,3.4vw + 1rem,4.5rem);
  font-weight:500;font-variation-settings:var(--sbm-head-opsz);font-optical-sizing:none;
  line-height:.95;letter-spacing:-.025em;color:var(--sbm-fg)}
/* The one piece of colour in here. */
.sbm-about-plus{color:var(--sbm-coral)}
.sbm-about-lab{display:block;margin-top:10px;font-size:clamp(.9375rem,.3vw + .875rem,1.0625rem);
  font-weight:500;line-height:1.3;letter-spacing:.01em;color:var(--sbm-muted)}

/* A short introduction followed by one clear line about our work. */
.sbm-about-lead{margin:clamp(36px,4.5vw,56px) 0 0;max-width:34ch;
  font-size:clamp(1.5rem,1.3vw + 1.2rem,2rem);font-weight:500;line-height:1.2;
  letter-spacing:-.022em;color:var(--sbm-fg);text-wrap:balance}
.sbm-about-copy{margin-top:18px;max-width:52ch}
.sbm-about-copy p{margin:0;font-size:1.0625rem;line-height:1.6;
  letter-spacing:-.003em;color:var(--sbm-muted)}

/* The signatures, written out rather than scanned in. Sized off the
   cap height of the face, which runs small, and set on a slight slant
   the way a real one would be. */
.sbm-about-sign{margin:clamp(32px,4vw,52px) 0 0;display:flex;flex-wrap:wrap;
  gap:clamp(40px,7vw,104px);align-items:flex-end}
.sbm-sign{font-family:var(--sbm-sign-font);font-size:clamp(2.75rem,4vw + 1rem,4.25rem);
  font-weight:400;line-height:1;letter-spacing:.01em;color:var(--sbm-fg);
  transform:rotate(-2deg);transform-origin:left bottom}
.sbm-sign:nth-child(2){transform:rotate(-1deg)}

@media (max-width:519px){
  .sbm-about-stats{gap:32px}
  .sbm-about-sign{gap:28px}
}

/* ============================================================
   FAQ: three topic selectors, with a focused list in each panel
   ============================================================ */
.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-faq-tabs{display:none}
html.sbm-js .sbm-faq-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  max-width:820px;margin:30px auto 28px}
.sbm-faq-tab{min-height:50px;padding:12px 18px;border:1px solid var(--sbm-rule-strong);border-radius:6px;
  background:var(--sbm-bg);color:var(--sbm-fg);font:600 15px/1.3 var(--sbm-font);cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.sbm-faq-tab:hover{border-color:var(--sbm-fg)}
.sbm-faq-tab[aria-pressed="true"]{background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg);
  box-shadow:inset 0 -3px 0 var(--sbm-coral)}
.sbm-faq-tab:focus-visible{outline:2px solid var(--sbm-coral);outline-offset:3px}
.sbm-faq-panel[hidden]{display:none}
html:not(.sbm-js) .sbm-faq-panel[hidden]{display:block}
.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 (max-width:559px){
  html.sbm-js .sbm-faq-tabs{gap:6px;margin:24px auto 22px}
  .sbm-faq-tab{min-height:48px;padding:9px 5px;font-size:12px}
  .sbm-faq-btn{padding:18px 16px 18px 20px}
  .sbm-faq-a{padding:0 20px 22px}
}

/* ============================================================
   CONTACT
   ============================================================ */
/* One column: the ask, the button, then the two ways to reach us. */
.sbm-contact-grid > *{max-width:46rem}
.sbm-contact-grid .sbm-h2{margin-top:18px}
.sbm-contact-grid .sbm-intro{margin-top:20px}
.sbm-contact-actions{margin-top:32px}
.sbm-contact-direct{margin-top:40px;border-top:1px solid var(--sbm-rule)}
.sbm-contact-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-contact-direct dt{color:var(--sbm-muted)}
.sbm-contact-direct dd a{font-weight:600;text-decoration:none}
.sbm-contact-direct dd a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:559px){
  .sbm-contact-actions .sbm-btn{width:100%}
}

/* ============================================================
   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:400 clamp(2.125rem,2.1vw + 1.3rem,2.875rem)/1.08 var(--sbm-head);letter-spacing:-.02em;max-width:11ch}
.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:400 22px/1.2 var(--sbm-head);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}
.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-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. */
/* Base layout, for pages (like the homepage) that no longer carry the
   banner's inline CSS. The five older pages still have an inline block
   from the previous design, so every rule below is prefixed with html
   to out-specify it rather than relying on source order. */
#sb-cookie-banner{position:fixed;z-index:9999}

/* A dark card in the corner, not a pale strip across the foot of the
   page. On a white site the ink ground and the coral mark read as a
   thing that wants an answer, which is the point: it has to be noticed
   and dealt with, not scrolled past. */
html #sb-cookie-banner{left:24px;right:auto;bottom:24px;
  width:min(382px,calc(100vw - 32px));
  background:var(--sbm-ink);border:0;border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.18);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
html #sb-cookie-banner.sb-cb-in{opacity:1;transform:none}

html .sb-cb-card{display:block;max-width:none;margin:0;padding:22px 22px 20px;
  font-family:var(--sbm-font)}

/* A cookie, drawn in CSS so the inline script stays a plain string. */
html .sb-cb-mark{display:inline-block;width:19px;height:19px;margin-right:10px;
  vertical-align:-3px;border-radius:50%;background-color:var(--sbm-coral);
  background-image:
    radial-gradient(circle at 31% 33%,var(--sbm-ink) 0 2px,transparent 2.4px),
    radial-gradient(circle at 67% 45%,var(--sbm-ink) 0 1.6px,transparent 2px),
    radial-gradient(circle at 45% 71%,var(--sbm-ink) 0 1.8px,transparent 2.2px)}

html .sb-cb-card .sb-cb-title{display:flex;align-items:center;margin:0 0 10px;
  color:var(--sbm-bg);font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
html .sb-cb-card .sb-cb-copy{margin:0;flex:none;
  color:#B0B0B0;font-size:13.5px;line-height:1.6}
html .sb-cb-card .sb-cb-copy a{color:var(--sbm-coral);text-decoration:underline;
  text-decoration-color:rgba(251,146,128,.5);text-underline-offset:3px}
html .sb-cb-card .sb-cb-copy a:hover{text-decoration-color:var(--sbm-coral)}

html .sb-cb-row{display:flex;align-items:center;gap:10px;margin-top:18px}
html #sb-accept,html #sb-decline{flex:1;min-height:44px;padding:0 16px;border-radius:10px;
  font:700 14px/1 var(--sbm-font);cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
/* Coral carries the action. On ink it is 7.6:1, so unlike on white it can
   hold text and be the primary button. */
html #sb-accept{border:1px solid var(--sbm-coral);background:var(--sbm-coral);color:var(--sbm-ink)}
html #sb-accept:hover{background:#FFA792;border-color:#FFA792}
/* Reject is equally reachable: same size, same row, just quieter. */
html #sb-decline{border:1px solid #454545;background:transparent;color:var(--sbm-bg)}
html #sb-decline:hover{border-color:var(--sbm-bg)}
html #sb-accept:focus-visible,html #sb-decline:focus-visible{outline:2px solid var(--sbm-coral);
  outline-offset:2px}

@media (max-width:760px){
  html #sb-cookie-banner{left:12px;right:12px;bottom:12px;width:auto}
  html .sb-cb-card{flex-direction:column;align-items:stretch;padding:18px 18px 16px}
  html .sb-cb-row{justify-content:stretch}
}
@media (prefers-reduced-motion:reduce){
  html #sb-cookie-banner,html #sb-accept,html #sb-decline{transition:none}
  html #sb-cookie-banner{transform: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]{display:grid}
html:not(.sbm-js) .sbm-faq-a[hidden],html:not(.sbm-js) .sbm-comm-detail[hidden]{display:block}

/* The About page's decorative wave canvas is a painted colour blob. */
.sb-ab-wave{display:none}

/* ============================================================
   OLDER PAGES: colour fixes for the new coral
   (styles.css and each page's inline CSS still carry the old
   rules; these sit on top with higher specificity)
   ============================================================ */
/* Those fills are near-black now, so their text is white. A coral-filled
   key on a picked application choice keeps the dark ink (7.3:1). */
html .btn-primary,html .btn-primary-dark,html .btn-outline:hover,html .ap-ok,
html .sb-lead-dash-badge{color:#FFFFFF}
html .ap-choice.is-picked .ap-key,html .ap-choice:has(input:checked) .ap-key{color:var(--sbm-ink)}
/* 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 Agency Launchpad 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}

/* Legal page: the cookie table's long cookie names wrap on phones. */
@media (max-width:559px){
  .legal-doc table{font-size:13px}
  .legal-doc th,.legal-doc td{padding-inline:8px}
  .legal-doc td code{font-size:12px;overflow-wrap:anywhere}
  .legal-doc th:last-child,.legal-doc td:last-child{white-space:nowrap}
}
@media (max-width:419px){
  /* The smallest phones: the table scrolls within itself, never the page. */
  .legal-doc table{display:block;overflow-x:auto}
}

/* The older pages' bracket CTA becomes a plain button, like every other. */
html .sb-cta-bracket{display:none}
html .sb-ab-fee-teaser-link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 20px;border:1px solid var(--sbm-rule-strong);border-radius:2px;background:var(--sbm-bg);
  font:600 15px/1.1 var(--sbm-font);color:var(--sbm-fg);text-decoration:none;
  transition:border-color .15s ease}
html .sb-ab-fee-teaser-link:hover{border-color:var(--sbm-fg)}
html .sb-ab-fee-teaser-link .sb-cta-text::after{display:none}

/* ============================================================
   AUTOMATION APPLY PAGES (/apply-*)
   A custom picker so each option can carry its monthly price and a
   recommendation, with many ticked at once. The questions below it are
   shown or hidden by apply-picker.js depending on what is ticked.
   ============================================================ */
.sbm-applyp{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px)}
.sbm-applyp-wrap > *{max-width:46rem}
.sbm-applyp-wrap .sbm-h2{margin-top:16px}
.sbm-applyp-form{margin-top:clamp(28px,3.5vw,40px)}
/* The honeypot is for bots only. */
.sbm-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sbm-pick{position:relative}
.sbm-pick-btn{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  min-height:56px;padding:0 18px;border:1px solid var(--sbm-fg);border-radius:2px;background:var(--sbm-bg);
  color:var(--sbm-fg);font:600 16.5px/1.3 var(--sbm-font);text-align:left;cursor:pointer}
.sbm-pick-caret{flex:none;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor}
.sbm-pick-btn[aria-expanded="true"] .sbm-pick-caret{transform:rotate(180deg)}
.sbm-pick-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;display:grid;
  padding:6px;border:1px solid var(--sbm-rule-strong);border-radius:2px;background:var(--sbm-bg)}
.sbm-pick-panel[hidden]{display:none}
.sbm-pick-opt{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 14px;cursor:pointer}
.sbm-pick-opt + .sbm-pick-opt{border-top:1px solid var(--sbm-rule)}
.sbm-pick-opt:hover{background:var(--sbm-bg-alt)}
.sbm-pick-all{font-weight:600}
.sbm-pick-opt input{width:20px;height:20px;margin:0;accent-color:#1A1A1A}
.sbm-pick-t{font-size:16px;line-height:1.4}
.sbm-pick-p{font-size:15px;color:var(--sbm-muted);white-space:nowrap}
.sbm-pick-rec{margin-left:8px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sbm-coral-text);white-space:nowrap}
.sbm-pick-total{margin-top:14px;font-size:16px;font-weight:600}

.sbm-whens{display:grid;gap:clamp(24px,3vw,36px);margin-top:clamp(28px,3.5vw,40px)}
.sbm-when[hidden]{display:none}
.sbm-when-h{font-size:1.25rem;font-weight:500;letter-spacing:-.01em;padding-bottom:12px;
  border-bottom:1px solid var(--sbm-rule);margin-bottom:18px}
.sbm-when-common{display:grid;gap:18px;margin-top:clamp(32px,4vw,48px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--sbm-fg)}
.sbm-f{display:grid;gap:8px}
.sbm-f label{font-size:16px;color:var(--sbm-muted)}
.sbm-input{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--sbm-rule-strong);border-radius:2px;
  background:var(--sbm-bg);color:var(--sbm-fg);font:400 16.5px/1.5 var(--sbm-font)}
textarea.sbm-input{min-height:auto;resize:vertical}
.sbm-input:focus-visible{outline:2px solid var(--sbm-coral);outline-offset:2px;box-shadow:0 0 0 2px var(--sbm-fg)}
.sbm-applyp-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(28px,3.5vw,40px)}
.sbm-applyp-note{font-size:15px;color:var(--sbm-muted)}
@media (max-width:559px){
  .sbm-pick-opt{grid-template-columns:22px minmax(0,1fr);row-gap:4px}
  .sbm-pick-p{grid-column:2}
  .sbm-applyp-send .sbm-btn{width:100%}
}

/* The package cards list each part with its own monthly price. */
.sbm-auto-sep{font-size:14px;color:var(--sbm-muted)}
.sbm-auto-list li{grid-template-columns:20px minmax(0,1fr) auto}
.sbm-auto-item-p{font-size:15px;color:var(--sbm-muted);white-space:nowrap}
.sbm-auto-rec{margin-left:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sbm-coral-text);white-space:nowrap}

/* =====================================================================
   Display heading
   A bigger, more deliberate cut of the heading face for the one heading
   that has to stop you on a page: the package comparison on the home
   page and the top of the AI and automation page. Fraunces carries an
   optical size axis, so at display size we ask for the display cut
   (opsz 144) rather than letting the text cut just scale up: more
   contrast between thick and thin, sharper serifs, and it reads as a
   different, more confident voice than the section headings around it.
   ===================================================================== */
.sbm-display{font-family:var(--sbm-head);
  font-size:clamp(2.625rem,4.4vw + 1.1rem,5.25rem);font-weight:500;line-height:1.0;
  letter-spacing:-.035em;max-width:18ch;
  font-variation-settings:'opsz' 144;font-optical-sizing:none;text-wrap:balance}
/* The eyebrow above it carries the same weight of intent. */
.sbm-display + .sbm-lede,.sbm-eyebrow + .sbm-display{margin-top:16px}

/* =====================================================================
   Sticky plan names on the comparison table
   The plan names already pin under the nav bar on phones. They do the
   same job on a wide screen, where the table is long enough that by the
   row you care about the column headings have scrolled away. Sticky on
   thead releases by itself at the end of the table, so the names stay
   with the packages and leave with them.
   ===================================================================== */
@media (min-width:860px){
  .sbm-cmp thead{position:sticky;z-index:2;
    top:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad-scrolled) + 1px)}
  /* border-collapse is separate, so each cell carries its own background
     and bottom rule and they travel with the sticky row. */
  /* .sbm-cmp .is-hi{background:none} earlier in the file out-specifies a
     plain thead th, so the highlighted column is named here too or rows
     would show through the pinned header as they scroll under it. */
  .sbm-cmp thead th,.sbm-cmp thead th.is-hi{background:var(--sbm-bg)}
  /* Less air above the names once they are a floating bar rather than the
     top of a card; still room for the badge to sit on the edge. */
  .sbm-cmp thead th{padding-top:32px}
}
/* Phones showing one package at a time: keep that package's name and
   price in view too, the same as the three-column view above. */
@media (max-width:639px){
  .sbm-cmp[data-plan] thead{position:sticky;z-index:2;
    top:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad-scrolled) + 1px);
    background:var(--sbm-bg)}
  .sbm-cmp[data-plan] thead th:not(.sbm-cmp-corner){padding-block:14px}
}

/* =====================================================================
   Package columns
   The same box, rules, heading type and button as the comparison table
   on the home page, for places where a tick-per-row grid would be
   meaningless because no two packages share a line item. Each package
   is a column that names what it includes.
   ===================================================================== */
.sbm-plancols{display:grid;border:1px solid var(--sbm-rule-strong);border-radius:16px;overflow:hidden;
  background:var(--sbm-bg)}
.sbm-plancols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sbm-plancols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sbm-plancol{display:flex;flex-direction:column;padding:32px 24px 28px}
/* Hairlines between columns only, so the outer radius stays clean. */
.sbm-plancol + .sbm-plancol{border-left:1px solid var(--sbm-rule)}
.sbm-plancol-head{display:block;padding-bottom:22px;margin-bottom:20px;
  border-bottom:1px solid var(--sbm-rule-strong);text-align:center}
.sbm-plancol .sbm-cmp-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 8px}
.sbm-plancol-per,.sbm-plancol-from{font-family:var(--sbm-font);font-size:14px;font-weight:400;
  letter-spacing:0;color:var(--sbm-muted)}
.sbm-plancol-sep{margin-bottom:14px;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sbm-muted)}
.sbm-plancol-list{display:grid;gap:12px;margin:0 0 24px;padding:0;list-style:none}
.sbm-plancol-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--sbm-rule);font-size:15px;line-height:1.45}
.sbm-plancol-list li:last-child{padding-bottom:0;border-bottom:0}
.sbm-plancol-p{font-size:15px;color:var(--sbm-muted);white-space:nowrap}
/* Pins the button to the bottom however uneven the lists are. */
.sbm-plancol-cta{margin-top:auto}
.sbm-plancols-foot{margin-top:20px;font-size:14px;line-height:1.6;color:var(--sbm-muted);max-width:60rem}

/* Four columns need the room back before three do. */
@media (max-width:1100px){
  .sbm-plancols--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sbm-plancols--4 .sbm-plancol:nth-child(odd){border-left:0}
  .sbm-plancols--4 .sbm-plancol:nth-child(n+3){border-top:1px solid var(--sbm-rule)}
}
/* One package at a time, stacked, rather than columns too narrow to read.
   Each keeps its own heading, so you never lose which list you are in. */
@media (max-width:859px){
  .sbm-plancols,.sbm-plancols--3,.sbm-plancols--4{grid-template-columns:minmax(0,1fr)}
  .sbm-plancol{padding:26px 20px 24px}
  .sbm-plancol + .sbm-plancol{border-left:0;border-top:1px solid var(--sbm-rule-strong)}
  .sbm-plancols--4 .sbm-plancol:nth-child(n+3){border-top:1px solid var(--sbm-rule-strong)}
  .sbm-plancol-head{text-align:left}
  .sbm-plancol .sbm-cmp-price{justify-content:flex-start}
  .sbm-plancol .sbm-cmp-note{display:block}
}

/* =====================================================================
   The guide (/help)
   A long reference page, so it is built for reading rather than for
   effect: one column of text at a comfortable measure, a contents list
   that stays in view on a desktop, and a rule between sections so the
   eye can find its place again. Nothing here moves.
   ===================================================================== */
.hlp{padding-block:clamp(32px,4vw,56px) clamp(72px,9vw,120px)}
.hlp-wrap{display:grid;gap:clamp(32px,5vw,64px)}
.hlp-body{min-width:0;max-width:72ch}

.hlp-head{padding-bottom:clamp(28px,4vw,44px);border-bottom:1px solid var(--sbm-rule)}
.hlp-lede{margin-top:18px;font-size:clamp(1.0625rem,.4vw + 1rem,1.1875rem);line-height:1.65;
  color:var(--sbm-muted);max-width:60ch}

/* ---- contents ---- */
.hlp-toc-title{font-family:var(--sbm-font);font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sbm-muted);margin-bottom:14px}
.hlp-toc-list{counter-reset:hlp;display:grid;gap:2px;margin:0;padding:0;list-style:none}
.hlp-toc-list li{counter-increment:hlp}
.hlp-toc-list a{display:flex;gap:10px;padding:7px 0;font-size:15px;line-height:1.35;
  color:var(--sbm-muted);text-decoration:none}
.hlp-toc-list a::before{content:counter(hlp,decimal-leading-zero);flex:none;
  font-size:12px;font-weight:600;color:var(--sbm-rule-strong);padding-top:2px}
.hlp-toc-list a:hover{color:var(--sbm-fg)}

/* ---- sections ---- */
.hlp-sec{padding-top:clamp(40px,5vw,64px)}
.hlp-sec + .hlp-sec{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--sbm-rule)}
.hlp-h2{font-family:var(--sbm-head);font-size:clamp(1.75rem,1.6vw + 1.2rem,2.375rem);font-weight:500;
  line-height:1.15;letter-spacing:-.02em;margin-bottom:18px}
.hlp-h3{font-family:var(--sbm-font);font-size:1.0625rem;font-weight:700;letter-spacing:-.005em;
  margin-top:30px;margin-bottom:10px}
.hlp-sec p{font-size:1.0625rem;line-height:1.75;max-width:68ch}
.hlp-sec p + p{margin-top:14px}
.hlp-sec i{font-style:italic}

.hlp-list{display:grid;gap:11px;margin:16px 0 0;padding:0;list-style:none;max-width:68ch}
.hlp-list li{position:relative;padding-left:010px;padding-left:22px;font-size:1.0625rem;line-height:1.65}
.hlp-list li::before{content:"";position:absolute;left:4px;top:.68em;width:6px;height:6px;
  border-radius:50%;background:var(--sbm-coral)}
.hlp-list b{font-weight:700}

/* Label and explanation, one pair per row. */
.hlp-defs{display:grid;gap:0;margin:18px 0 0;max-width:68ch}
.hlp-defs > div{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:4px 24px;
  padding:14px 0;border-top:1px solid var(--sbm-rule)}
.hlp-defs > div:last-child{border-bottom:1px solid var(--sbm-rule)}
.hlp-defs dt{font-size:15.5px;font-weight:700;line-height:1.4}
.hlp-defs dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--sbm-muted)}
.hlp-defs--tight > div{padding:11px 0}

/* The one tinted block per section, for the thing worth stopping on. */
.hlp-note{margin-top:26px;padding:20px 22px;border-left:3px solid var(--sbm-coral);
  background:var(--sbm-bg-alt);border-radius:0 12px 12px 0;max-width:68ch}
.hlp-note-h{font-family:var(--sbm-font);font-size:15px;font-weight:700;margin-bottom:8px}
.hlp-note p{font-size:15.5px;line-height:1.65;color:var(--sbm-muted)}

.hlp-table-wrap{margin-top:20px;overflow-x:auto}
.hlp-table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;min-width:520px}
.hlp-table th,.hlp-table td{padding:13px 16px 13px 0;border-bottom:1px solid var(--sbm-rule);
  text-align:left;vertical-align:top}
.hlp-table thead th{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--sbm-muted);border-bottom-color:var(--sbm-rule-strong)}
.hlp-table tbody th{font-weight:700;width:30%}
.hlp-table td:last-child{color:var(--sbm-muted)}

.hlp-steps{counter-reset:hs;display:grid;gap:14px;margin:18px 0 0;padding:0;list-style:none;max-width:68ch}
.hlp-steps li{counter-increment:hs;position:relative;padding-left:44px;font-size:1.0625rem;line-height:1.65}
.hlp-steps li::before{content:counter(hs);position:absolute;left:0;top:1px;width:28px;height:28px;
  display:grid;place-items:center;border-radius:50%;background:var(--sbm-ink);color:var(--sbm-bg);
  font-size:13px;font-weight:700}

.hlp-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:22px}

/* Desktop: the contents sits beside the text and stays put while you read. */
@media (min-width:1000px){
  .hlp-wrap{grid-template-columns:230px minmax(0,1fr);align-items:start}
  .hlp-toc{position:sticky;top:calc(var(--sbm-navh) + 16px);max-height:calc(100vh - var(--sbm-navh) - 48px);
    overflow-y:auto}
  .hlp-head{grid-column:2}
}
@media (max-width:999px){
  /* On a phone the contents is just a list at the top, not a sidebar. */
  .hlp-toc{order:-1;padding:18px 20px;border:1px solid var(--sbm-rule);border-radius:14px}
  .hlp-defs > div{grid-template-columns:minmax(0,1fr);gap:3px;padding:13px 0}
}

/* ---------------------------------------------------------------
   The pinned plan header is kept short at all times
   A tall header hides a whole row behind it, and the half-covered
   row below reads as an empty band. Shrinking it only while pinned
   caused worse trouble: the resize moved the page under the
   pointer, which flipped the state back and fought the scroll. So
   the header is simply compact full stop. The notes it used to
   carry (setup fee, commission, retainer) are all spelled out in
   the Pricing rows at the foot of the table, so nothing is lost.
   --------------------------------------------------------------- */
@media (min-width:860px){
  .sbm-cmp thead th{padding-top:30px;padding-bottom:18px}
  .sbm-cmp-price{margin-top:6px;font-size:clamp(1.5rem,.8vw + 1.15rem,1.875rem)}
  .sbm-cmp thead .sbm-cmp-note{display:none}
  /* A layout change must never shift the scroll position under the reader. */
  .sbm-cmp{overflow-anchor:none}
}