:root{
    --blue:#0063a0; --blue-dk:#005181; --blue-lt:#00abe1; --navy:#063a5c;
    --blue-soft:#e8f2f8; --tint:#edf4f9; --tline:#d5e3ed;
    --ink:#242526; --ink2:#4d5158; --ink3:#656565; --ink4:#666c76;
    --line:#e2e6ea; --line2:#eef1f4; --paper:#f9f9f9;
    --ok:#1d7a5f; --ok-soft:#e6f3ee; --warn:#9a6a12; --warn-soft:#fdf3e2;
    --no:#a33c3c; --no-soft:#fbeeee;
    /* Accent. The brand orange on the current site is a bright #ee8b2d, which
       fights the blue at any size. These are the muted pair: a light ground and
       a deep burnt text tone that clears 5.2:1 on it, so 10px uppercase badge
       text still passes AA. Deliberately distinct from --warn, which means
       "something is wrong" and must not be borrowed for decoration.
       Rule of thumb: orange marks, blue acts. Badges and eyebrow pips only,
       never a button, link or CTA. */
    --accent:#97540f; --accent-soft:#fdf0e3; --accent-line:#f4ddc5;
    --dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1.6' cy='1.6' r='1.3' fill='%230063a0' fill-opacity='.15'/%3E%3C/svg%3E");
    --gridw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 0H0v44' fill='none' stroke='%23ffffff' stroke-opacity='.062'/%3E%3C/svg%3E");
    --dotsf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1.6' cy='1.6' r='1.3' fill='%230063a0' fill-opacity='.07'/%3E%3C/svg%3E");
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;background:#fff}
  .wrap{max-width:1160px;margin:0 auto;padding:0 32px}
  .narrow{max-width:900px}
  a{color:inherit;text-decoration:none}

  
  /* ══════ NAV / MEGA MENU (Attio-style) ══════ */
  .topbar{position:sticky;top:0;z-index:70;background:rgba(240,246,251,.9);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--tline);transition:background .25s}
  .topbar.stuck{background:rgba(255,255,255,.94);border-bottom-color:var(--line2)}
  .nav{display:flex;align-items:center;gap:8px;height:66px;position:relative}
  /* Official logo, converted from MCC logo.ai to vector - see AGENTS.md.
     Height-driven so the lockup's 9.26:1 aspect stays intact at any size. */
  .logo{flex:none;margin-right:22px;display:flex;align-items:center}
  /* max-width is the safety net: .logo goes flex:1 under 1080px, and without it
     the fixed-width image pushes the burger off-screen instead of shrinking. */
  .logo img{display:block;height:22px;width:auto;max-width:100%;
    object-fit:contain;object-position:left center}
  .mainnav{display:flex;align-items:center;gap:2px;list-style:none;flex:1}
  .mainnav > li{position:static}
  .nvitem{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:14px;font-weight:540;
    color:var(--ink2);background:none;border:none;cursor:pointer;padding:8px 12px;border-radius:8px;transition:.13s;line-height:1}
  .nvitem:hover{color:var(--ink);background:rgba(10,50,80,.05)}
  .nvitem svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;
    stroke-linejoin:round;transition:transform .18s;opacity:.6}
  .mainnav > li.open .nvitem{color:var(--ink);background:rgba(10,50,80,.05)}
  .mainnav > li.open .nvitem svg{transform:rotate(180deg)}
  .navright{display:flex;align-items:center;gap:14px;flex:none}
  .ghost{font-size:14px;font-weight:540;color:var(--ink2)}
  .ghost:hover{color:var(--blue)}
  .navcta{background:var(--blue);color:#fff;padding:9px 18px;border-radius:8px;font-size:13.5px;font-weight:630;white-space:nowrap}
  .navcta:hover{background:var(--blue-dk)}

  .mega{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px);
    background:#fff;border:1px solid var(--line);border-radius:16px;
    box-shadow:0 24px 60px -18px rgba(6,58,92,.26),0 4px 12px -6px rgba(6,58,92,.09);
    padding:22px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:80}
  .mainnav > li.open .mega,.mainnav > li:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  /* invisible bridge so the cursor can cross the gap between the bar and the panel */
  .mega:before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
  .mega.wide{width:min(940px,calc(100vw - 48px))}
  .mega.mid{width:min(680px,calc(100vw - 48px))}
  .mega.slim{width:min(430px,calc(100vw - 48px))}
  .mgrid2{display:grid;grid-template-columns:1fr 1fr 250px;gap:26px}
  .mgrid1{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .mgrid0{display:grid;grid-template-columns:1fr;gap:2px}
  .mglabel{font-size:10.5px;font-weight:730;letter-spacing:.11em;text-transform:uppercase;color:var(--ink4);
    padding:0 10px 9px;display:block}
  .mlink{display:flex;gap:11px;padding:9px 10px;border-radius:9px;transition:.13s;align-items:flex-start}
  .mlink:hover{background:var(--tint)}
  .mico{width:30px;height:30px;border-radius:8px;background:var(--blue-soft);display:flex;align-items:center;
    justify-content:center;flex:none;margin-top:1px}
  .mico svg{width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mtxt b{display:block;font-size:14px;font-weight:640;letter-spacing:-.012em;color:var(--ink);line-height:1.35}
  .mtxt span{display:block;font-size:12.5px;color:var(--ink3);line-height:1.4;margin-top:1px}
  .mside{background:var(--tint);border:1px solid var(--tline);border-radius:12px;padding:18px 18px 20px;display:flex;flex-direction:column}
  .mside .mglabel{padding-left:0}
  .msl{display:block;font-size:13.5px;font-weight:570;color:var(--ink2);padding:7px 0;border-bottom:1px solid rgba(10,60,95,.08)}
  .msl:last-of-type{border-bottom:none}
  .msl:hover{color:var(--blue)}
  .mside .btn{margin-top:auto;text-align:center;padding:11px 16px;font-size:13.5px}
  /* Call link under the Services panel CTA. Scoped through .mside so the
     element-qualified nav selectors cannot outrank it, which is what silently
     stripped .btn-b and the old call pill. */
  .mside a.mstel{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;
    font-size:13.5px;font-weight:730;color:var(--blue);padding:0}
  .mside a.mstel:hover{color:var(--blue-dk)}
  .mside a.mstel svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round}
  .mfoot{margin-top:18px;padding-top:15px;border-top:1px solid var(--line2);display:flex;align-items:center;
    justify-content:space-between;gap:16px;flex-wrap:wrap}
  .mfoot p{font-size:13.5px;color:var(--ink3)}
  .mfoot p b{color:var(--ink);font-weight:640}
  .mfoot a{font-size:13.5px;font-weight:630;color:var(--blue)}

  .burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:0;cursor:pointer;
    min-width:44px;min-height:44px;flex-direction:column;align-items:center;justify-content:center}
  .burger span{display:block;width:17px;height:2px;background:var(--ink2);border-radius:2px}
  .burger span+span{margin-top:4px}
  @media(max-width:1080px){
    .mainnav{display:none}.burger{display:flex}
    .nav{gap:10px}.logo{flex:1;margin-right:0}
    .navright .ghost{display:none}
    body.menuopen .mainnav{display:block;position:absolute;top:66px;left:0;right:0;background:#fff;
      border-bottom:1px solid var(--line);padding:14px 24px 22px;max-height:calc(100vh - 66px);overflow:auto}
    body.menuopen .mainnav > li{margin-bottom:6px}
    body.menuopen .nvitem{width:100%;justify-content:space-between;font-size:16px;font-weight:640;color:var(--ink)}
    body.menuopen .mega{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
      box-shadow:none;border:none;padding:4px 0 10px;width:auto!important}
    body.menuopen .mgrid2,body.menuopen .mgrid1{grid-template-columns:1fr;gap:14px}
    body.menuopen .mside{display:none}
  }

  .nav{display:flex;align-items:center;gap:30px;height:64px}
  /* The legacy .logo/.logo span text rules that sat here are gone: the logo is
     now an image, so font-weight and the blue-"Click" span had nothing to style. */
  /* Was gap:23px from the legacy block, overriding .mainnav{gap:2px}. Adding the
     phone number pushed the bar 21px past 1280, and this was where the slack
     was: five items at 23px spend 92px on gaps alone while .nvitem already
     carries 12px of its own padding either side. 14px still reads as separated. */
  .nav ul{display:flex;gap:14px;list-style:none;flex:1}
  /* Direct children only. Unscoped, these reach into the mega panels and beat
     .btn-b (0,1,0) and .mfoot a (0,1,1) on specificity - which turned the panel
     CTA buttons grey-on-blue and the panel footer links grey instead of blue. */
  .nav ul > li > a{color:var(--ink2);font-size:14px;font-weight:520}
  .nav ul > li > a:hover{color:var(--blue)}
  .nav .ghost{font-size:14px;font-weight:540;color:var(--ink2)}
  .navcta{background:var(--blue);color:#fff;padding:9px 18px;border-radius:7px;font-size:13.5px;font-weight:630}
  .navcta:hover{background:var(--blue-dk)}
  @media(max-width:1080px){.nav ul{display:none}}

  /* Phone widths: logo + CTA + burger do not fit at full size, so shrink all
     three rather than let the burger fall off the right edge.
     Must sit AFTER the legacy .navcta above - equal specificity, so source order
     decides, and placing this earlier silently loses the padding/font override. */
  @media(max-width:560px){
    .wrap.nav{padding:0 18px}
    .logo img{height:17px}
    .navcta{padding:8px 13px;font-size:12.5px}
  }

  .btn{display:inline-block;padding:14px 26px;border-radius:8px;font-size:15px;font-weight:630;transition:.14s}
  .btn-b{background:var(--blue);color:#fff}.btn-b:hover{background:var(--blue-dk)}
  .btn-g{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn-g:hover{border-color:#c3d3dd}
  .btn-ol{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
  .btn-w{background:#fff;color:var(--blue)}
  .ctas{display:flex;gap:11px;flex-wrap:wrap}
  .ctas.ctr{justify-content:center;margin-top:40px}

  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:550;color:var(--ink2);
    background:#fff;border:1px solid var(--line);padding:6px 15px 6px 7px;border-radius:30px;box-shadow:0 1px 2px rgba(20,40,60,.05)}
  .eyebrow .pip{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
    font-size:10.5px;font-weight:730;padding:3px 9px;border-radius:20px;letter-spacing:.05em}

  /* HERO */
  .hero{background:var(--tint);background-image:var(--dots);padding:84px 0 0;text-align:center;position:relative}
  .hero > *{position:relative;z-index:1}
  /* Hero envelope field. Reuses .herostage, an unused placeholder the template
     left behind. Decoration only: aria-hidden, pointer-events off, and pinned to
     z-index 0 beneath the .hero > * rule above which lifts real content to 1.
     overflow:hidden here contains the drift without touching .hero itself, which
     must stay unclipped because the product shot deliberately overhangs it. */
  .herostage{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .herostage svg{position:absolute;fill:none;stroke:var(--blue);stroke-opacity:.14;
    stroke-width:1.3;animation:envdrift linear infinite}
  @keyframes envdrift{
    0%{transform:translateY(12px) rotate(-5deg)}
    50%{transform:translateY(-12px) rotate(4deg)}
    100%{transform:translateY(12px) rotate(-5deg)}}
  /* Kept clear of the centre column so nothing drifts behind the headline.
     Negative delays start each one mid-cycle so they never move in unison. */
  .herostage svg:nth-child(1){top:8%;left:5%;width:46px;height:46px;animation-duration:9s}
  .herostage svg:nth-child(2){top:27%;left:13%;width:30px;height:30px;animation-duration:11s;animation-delay:-2s}
  .herostage svg:nth-child(3){top:46%;left:4%;width:36px;height:36px;animation-duration:13s;animation-delay:-5s}
  .herostage svg:nth-child(4){top:63%;left:14%;width:26px;height:26px;animation-duration:10s;animation-delay:-1s}
  .herostage svg:nth-child(5){top:10%;left:86%;width:40px;height:40px;animation-duration:12s;animation-delay:-3s}
  .herostage svg:nth-child(6){top:31%;left:93%;width:28px;height:28px;animation-duration:10s;animation-delay:-6s}
  .herostage svg:nth-child(7){top:50%;left:84%;width:34px;height:34px;animation-duration:14s;animation-delay:-4s}
  .herostage svg:nth-child(8){top:67%;left:91%;width:24px;height:24px;animation-duration:11s;animation-delay:-2s}
  /* Desktop only. The h1 box spans almost the full container even though the text
     inside it is centred, so below roughly 1000px there is no clear margin left or
     right and the envelopes end up crowding the headline instead of framing it. */
  @media(max-width:1000px){.herostage{display:none}}
  @media(prefers-reduced-motion:reduce){.herostage svg{animation:none}}
  .hero h1{font-size:clamp(34px,5.1vw,59px);letter-spacing:-.042em;font-weight:775;line-height:1.03;max-width:24ch;margin:26px auto 0}
  .hero .sub{font-size:clamp(17px,2.05vw,21px);color:var(--ink3);margin:26px auto 0;max-width:60ch;line-height:1.5}
  .hero .sub b{color:var(--ink);font-weight:620}
  .hero .ctas{justify-content:center;margin-top:36px}
  .hero .btn{padding:16px 30px;font-size:16px}

  /* Hero use-case strip. Replaced the old .statrow of headline numbers: these
     answer "is my situation on this list?" rather than "how big are you?". */
  .builtfor{margin-top:40px}
  .bflabel{display:block;font-size:11.5px;font-weight:720;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent);margin-bottom:15px}
  .bfpills{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;list-style:none}
  .bfpills li{display:inline-flex;align-items:center;gap:9px;background:#fff;
    border:1px solid var(--line);border-radius:30px;padding:9px 18px 9px 15px;
    font-size:14.5px;font-weight:570;color:var(--ink);white-space:nowrap;
    box-shadow:0 1px 2px rgba(20,40,60,.05)}
  .bfpills svg{width:15px;height:15px;flex:none;stroke:var(--blue);fill:none;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  @media(max-width:560px){
    .bfpills{gap:8px}
    .bfpills li{font-size:13.5px;padding:8px 15px 8px 13px}
  }
  
  .shotwide{max-width:1300px;margin:0 auto;padding:0 24px}
  .shotwrap{margin:60px auto 0;transform:translateY(52px)}
  .heroafter{height:70px;background:var(--tint);background-image:var(--dots)}
  /* The product shot overhangs the hero by 52px, leaving only 18px before the
     next band starts. That is fine when the band below is the same tint, as on
     the homepage, but against the navy stat band the white card looked like it
     was colliding with the edge rather than floating above it. Deep gives the
     overhang room to land in the light zone before the colour changes. */
  .heroafter.deep{height:130px}

  /* app mock */
  /* v2 hero: the dashboard is a generated SVG replica of the real product
     (tools/build-dashboard-svg.py) rather than the HTML mock. */
  .dashshot{display:block;width:100%;height:auto;border-radius:13px;border:1px solid var(--line);
    box-shadow:0 34px 70px -22px rgba(6,58,92,.3),0 6px 16px -6px rgba(6,58,92,.1)}
  .app{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;text-align:left;
    box-shadow:0 34px 70px -22px rgba(6,58,92,.3),0 6px 16px -6px rgba(6,58,92,.1)}
  .appbar{height:38px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
  .appbar .d{width:8px;height:8px;border-radius:50%;background:#dcdfe3}
  .appurl{margin-left:12px;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:11.5px;color:var(--ink4);padding:2px 10px}
    .appin{display:grid;grid-template-columns:196px 1fr}
  .side{background:var(--paper);border-right:1px solid var(--line);padding:14px 11px}
  .sgrp{font-size:9.5px;font-weight:720;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);padding:9px 7px 5px}
  .sitem{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);padding:6px 7px;border-radius:5px}
  .sitem.on{background:#fff;color:var(--blue);font-weight:630;box-shadow:0 1px 2px rgba(20,40,60,.07)}
  .sq{width:14px;height:14px;border-radius:3px;background:#d8dde2;flex:none}
  .sitem.on .sq{background:var(--blue)}
  .main{padding:20px 24px 24px}
  .mh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
  .mh h4,.mh .mhh{font-size:16px;font-weight:690;letter-spacing:-.02em}
  .mh .sm{font-size:12.5px;color:var(--ink4);margin-top:2px}
  .pillbtn{font-size:10px;font-weight:620;color:var(--ink2);border:1px solid var(--line);border-radius:6px;padding:4px 9px;white-space:nowrap}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:16px}
  .kpi{border:1px solid var(--line);border-radius:9px;padding:13px 15px}
  .kpi .lb{font-size:10px;font-weight:680;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4);margin-bottom:4px}
  .kpi .v{font-size:22px;font-weight:745;letter-spacing:-.03em}
  .kpi .dd{font-size:11px;font-weight:660;margin-top:1px;color:var(--ok)}
  .chartbox{border:1px solid var(--line);border-radius:9px;padding:15px 17px 12px;margin-bottom:15px}
  .ct{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
  .ct b{font-size:13px;font-weight:670}.ct span{font-size:11.5px;color:var(--ink4)}
  .chart{display:flex;align-items:flex-end;gap:5px;height:104px}
  .bar{flex:1;background:var(--blue);border-radius:2px 2px 0 0}
  .bar.lite{background:#b5d2e3}
  .tbl{border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .tr{display:grid;grid-template-columns:1.5fr .95fr .85fr .6fr;gap:10px;padding:11px 16px;font-size:12.5px;align-items:center}
  .tr.h{background:var(--paper);color:var(--ink4);font-weight:690;font-size:10px;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--line)}
  .tr:not(.h){border-bottom:1px solid var(--line2);color:var(--ink2)}
  .tr:last-child{border-bottom:none}
  .mono{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:570}
  .tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;font-style:normal}
  .tag.ok{background:var(--ok-soft);color:var(--ok)}
  .tag.warm{background:var(--blue-soft);color:var(--blue)}
  .tag.watch{background:var(--warn-soft);color:var(--warn)}
  @media(max-width:780px){.appin{grid-template-columns:1fr}.side{display:none}.kpis{grid-template-columns:1fr 1fr}
    .tr{grid-template-columns:1.4fr 1fr .8fr}.tr > :nth-child(4){display:none}}

  .trust{padding:30px 0 34px;background:var(--tint);background-image:var(--dots);border-bottom:1px solid var(--tline)}
  .trustin{display:flex;align-items:center;justify-content:center;gap:38px;flex-wrap:wrap}
  .trustin .lbl{font-size:12.5px;color:var(--ink4)}
  .ph{height:21px;width:92px;background:#e6e9ed;border-radius:4px}
  .rate{font-size:12.5px;color:var(--ink3)}.rate b{font-weight:740;color:var(--ink)}
  /* Stat band. Reuses the .trust shell, which was defined for logo placeholders
     and never used. Sits on the tinted ground directly under .heroafter so it
     reads as the last part of the hero region rather than a new section, which
     is also why it costs no tone flip in the sections below. */
  .trustin.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:start}
  .tstat{text-align:center;padding:0 14px}
  .tstat b{display:block;font-size:clamp(30px,3.6vw,42px);font-weight:800;letter-spacing:-.045em;
    line-height:1}
  .tstat span{display:block;font-size:13px;margin-top:9px;line-height:1.35}
  /* Elevated white card on the page's own tinted ground. A navy band was tried
     here and looked like a foreign stripe between two light sections, so the
     band now blends into the ground and the card's shadow does the lifting -
     a layered navy-tinted shadow rather than one heavy black one, plus a
     hairline border so the card edge survives on the dotted texture.
     align-items:start keeps the numbers in line when a label wraps. */
  .trust.statsband{padding:14px 0 52px;border-bottom:0}
  /* A tinted section always draws a 1px bottom border. While the band below it
     was navy that border read as the section's edge; on the shared tint it
     floats as a stray line, so the seam is suppressed when the band follows. */
  section.tinted:has(+ .trust.statsband){border-bottom:0}
  .statsband .trustin.stats{background:#fff;border:1px solid var(--tline);
    border-radius:16px;padding:30px 18px;
    box-shadow:0 22px 44px -20px rgba(6,58,92,.28), 0 4px 14px rgba(6,58,92,.07)}
  .statsband .tstat{border-left:1px solid var(--line)}
  .statsband .tstat:first-child{border-left:0}
  .statsband .tstat b{color:var(--blue)}
  .statsband .tstat span{color:var(--ink3)}
  @media(max-width:760px){
    .trustin.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
    .statsband .tstat:nth-child(3){border-left:0}
  }

  section.blk{padding:92px 0}
  section.tinted{background:var(--tint);background-image:var(--dots);border-top:1px solid var(--tline);border-bottom:1px solid var(--tline)}
  /* Carries the tinted logo band into a white section without a hard edge.
     Same device as the old stat-strip fade. */
  .tofade{height:70px;background:linear-gradient(var(--tint),#fff)}
  section.dark{background:var(--navy);color:#fff}
  .shead{max-width:690px;margin-bottom:44px}
  .shead.ctr{margin-left:auto;margin-right:auto;text-align:center}
  .shead.ctr p{margin-left:auto;margin-right:auto}
  .kick{font-size:12px;font-weight:710;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;display:block}
  section.dark .kick{color:#7ec6e8}
  .shead h2{font-size:clamp(29px,3.9vw,43px);line-height:1.1;letter-spacing:-.038em;font-weight:755}
  .shead p{font-size:17.5px;color:var(--ink3);margin-top:16px}
  section.dark .shead p{color:#a9c4d6}
  .lead2{font-size:16.5px;color:var(--ink2);max-width:74ch;margin-top:18px}

  /* ══ 1 · PATHS — toggle ══ */
  /* The selected tab used to be #fff on a #f9f9f9 container - a 2% luminance
     difference, so which of the two was active read as basically nothing.
     Selected is now solid brand blue, and each tab carries an icon and a
     sublabel so the choice is legible before you click it. */
  .ptseg{display:flex;justify-content:center;margin-bottom:34px}
  .ptseg .in{display:inline-flex;background:var(--tint);border:1px solid var(--tline);
    border-radius:12px;padding:6px;gap:6px}
  .ptseg button{font:inherit;cursor:pointer;border:0;background:none;display:flex;align-items:center;
    gap:11px;text-align:left;padding:13px 22px;border-radius:10px;color:var(--ink2);
    transition:.16s;white-space:nowrap}
  .ptseg button svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;opacity:.85}
  .ptseg button b{display:block;font-size:15px;font-weight:670;line-height:1.2}
  .ptseg button i{display:block;font-style:normal;font-size:12px;font-weight:500;opacity:.72;margin-top:2px}
  .ptseg button:hover{color:var(--ink)}
  .ptseg button[aria-selected="true"]{background:var(--blue);color:#fff;
    box-shadow:0 3px 10px -3px rgba(0,99,160,.55)}
  .ptseg button[aria-selected="true"]:hover{color:#fff}
  .ptpanel{display:none}
  .ptpanel.on{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;max-width:1000px;margin:0 auto;
    animation:ptfade .28s cubic-bezier(.22,1,.36,1) both}
  @keyframes ptfade{from{opacity:0;transform:translateY(6px)}}
  .pttxt .pk{font-size:11.5px;font-weight:740;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
  .pttxt h3{font-size:29px;font-weight:775;letter-spacing:-.036em;line-height:1.12}
  .pttxt > p{margin-top:12px;font-size:16px;color:var(--ink2);line-height:1.55}
  .pttick{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:11px}
  .pttick li{display:flex;gap:11px;font-size:15px;color:var(--ink2);align-items:flex-start}
  .pttick .ic{flex:none;width:19px;height:19px;border-radius:5px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin-top:2px}
  .pttick .ic svg{width:11px;height:11px;stroke:var(--blue);stroke-width:2.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .pttick b{color:var(--ink);font-weight:680}
  .ptact{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .ptact .n{font-size:12.5px;color:var(--ink4)}
  .ptact .n b{color:var(--ink2);font-weight:680}

  /* panel graphics */
  .ptgfx{border:1px solid var(--tline);border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 6px 22px -12px rgba(6,58,92,.28)}
  .ptbar{display:flex;align-items:center;gap:6px;padding:10px 13px;background:var(--paper);border-bottom:1px solid var(--line)}
  .ptdot{width:7px;height:7px;border-radius:50%;background:#d8dee3}
  .pttitle{margin-left:8px;font-size:11px;color:var(--ink4);font-weight:600}
  .ptbody{padding:13px 14px}
  .ptrow{display:grid;grid-template-columns:1fr 82px 48px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f2f5f7}
  .ptrow:last-child{border-bottom:0}
  .ptdom{font-size:11.5px;color:var(--ink2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pttrack{height:5px;border-radius:3px;background:#eef2f5;overflow:hidden}
  .pttrack i{display:block;height:100%;background:var(--blue);border-radius:3px;animation:ptgrow 1.5s cubic-bezier(.22,1,.36,1) both}
  .pttrack.lt i{background:var(--blue-lt)}
  @keyframes ptgrow{from{width:0}}
  .ptst{font-size:10.5px;font-weight:670;text-align:right;color:var(--ok)}
  .ptst.w{color:var(--blue)}
  .ptfoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid var(--line);
    background:#fbfdfe;font-size:11.5px;color:var(--ink3)}
  .ptfoot b{color:var(--ink);font-weight:700}
  .ptflow{display:flex;align-items:flex-start;padding:18px 14px 14px}
  .ptstep{flex:1;text-align:center;padding:0 4px}
  .ptstep .fi{width:34px;height:34px;margin:0 auto 9px;border-radius:10px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center}
  .ptstep .fi svg{width:16px;height:16px;stroke:var(--blue);stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .ptstep b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
  .ptstep span{display:block;margin-top:2px;font-size:11px;color:var(--ink4);line-height:1.35}
  .ptcon{flex:0 0 26px;display:flex;justify-content:center;padding-top:16px}
  .ptcon svg{width:14px;height:14px;stroke:var(--tline);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .ptres{margin:0 14px 8px;background:var(--tint);border-radius:10px;padding:12px 14px;display:flex;align-items:center;
    justify-content:space-between;gap:10px;flex-wrap:wrap}
  .ptres span{display:block;font-size:11.5px;color:var(--ink3)}
  .ptres b{display:block;font-size:13.5px;color:var(--ink);font-weight:700;margin-top:2px}
  .pttrend{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:680;color:var(--ok);
    background:var(--ok-soft);padding:4px 10px;border-radius:20px}
  .pttrend svg{width:10px;height:10px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .ptspark{display:block;width:100%;height:36px;padding:0 14px 14px}

  /* bridge */
  .ptbridge{max-width:1000px;margin:34px auto 0;background:var(--navy);background-image:var(--gridw);border-radius:14px;
    padding:24px 30px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
  .ptbridge p{color:#dbe9f2;font-size:15.5px;line-height:1.55;max-width:660px}
  .ptbridge b{color:#fff;font-weight:690}
  @media(max-width:880px){
    .ptpanel.on{grid-template-columns:1fr;gap:28px}
    .pttxt{order:1}.ptgfx{order:2}
    .ptseg .in{width:100%}
    /* Narrow: drop the sublabel and centre what is left, or the two tabs
       overflow the control. The icon stays - it is the faster scan target. */
    .ptseg button{flex:1;justify-content:center;padding:12px 10px;gap:8px}
    .ptseg button b{font-size:14px}
    .ptseg button i{display:none}
  }
  @media(prefers-reduced-motion:reduce){.ptpanel.on{animation:none}.pttrack i{animation:none}}

  /* compare */
  .cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .cc{background:#fff;padding:28px 26px 30px}
  .cc.us{background:var(--blue-soft)}
  .cc .lb{font-size:11px;font-weight:740;letter-spacing:.09em;text-transform:uppercase;color:var(--ink4);margin-bottom:6px}
  .cc.us .lb{color:var(--blue)}
  .cc h3,.cc h4{font-size:17px;font-weight:700;letter-spacing:-.022em;margin-bottom:16px}
  .cc ul{list-style:none}
  .cc li{font-size:14px;color:var(--ink2);padding-left:22px;position:relative;margin-bottom:10px;line-height:1.45}
  .cc li:before{position:absolute;left:0;top:0;font-weight:800;font-size:12.5px}
  .cc.them li:before{content:"✕";color:var(--no)}
  .cc.us li:before{content:"✓";color:var(--ok)}
  .cc.us li{color:var(--ink)}
  @media(max-width:900px){.cmp{grid-template-columns:1fr}}

  /* kit */
  .kit{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--tline);border:1px solid var(--tline);border-radius:13px;overflow:hidden}
  .ki{background:#fff;padding:26px 24px 28px}
  .ki .ico{width:30px;height:30px;border-radius:8px;background:var(--blue-soft);margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--blue)}
  .ki h3,.ki h4{font-size:15.5px;font-weight:680;letter-spacing:-.02em;margin-bottom:6px}
  .ki p{font-size:13.5px;color:var(--ink3);line-height:1.5}
  @media(max-width:980px){.kit{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.kit{grid-template-columns:1fr}}

  /* list table */
  .lt{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}
  .lt th{text-align:left;padding:14px 22px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);font-weight:700;background:var(--paper);border-bottom:1px solid var(--line)}
  .lt td{padding:16px 22px;border-bottom:1px solid var(--line2);font-size:14.5px;color:var(--ink2);vertical-align:top}
  .lt tr:last-child td{border-bottom:none}
  .secnote{font-size:15.5px;color:var(--ink2);margin-top:22px;max-width:66ch}
  .lt td.w{font-weight:640;color:var(--ink);width:30%}
  .yn{font-weight:720;font-size:13.5px;white-space:nowrap}
  .yn.y{color:var(--ok)}.yn.n{color:var(--no)}
  @media(max-width:760px){.lt thead{display:none}.lt td{display:block;padding:5px 18px;border:none}
    .lt td.w{width:auto;padding-top:16px}.lt tr{display:block;border-bottom:1px solid var(--line);padding-bottom:12px}}

  /* method */
  .method{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15);border-radius:13px;overflow:hidden}
  .mc{background:var(--navy);padding:28px 22px}
  .mc .n{width:29px;height:29px;border-radius:8px;background:rgba(126,198,232,.16);color:#7ec6e8;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:760;margin-bottom:14px}
  .mc h3,.mc h4{font-size:15.5px;font-weight:680;letter-spacing:-.018em;margin-bottom:7px;color:#fff}
  .mc p{font-size:13.5px;color:#a9c4d6;line-height:1.5}
  .mc p a{color:#7ec6e8;font-weight:640;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
  .mc p a:hover{color:#fff}
  @media(max-width:980px){.method{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.method{grid-template-columns:1fr}}

  /* pillars */
  .pills{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .pl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px 30px;display:flex;flex-direction:column}
  .vb{display:inline-block;font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
    padding:5px 12px;border-radius:20px;margin-bottom:16px;align-self:flex-start}
  .pl h3{font-size:19px;font-weight:700;letter-spacing:-.024em;margin-bottom:10px}
  .pl > p{font-size:14.5px;color:var(--ink3);line-height:1.62;margin-bottom:20px}
  .pl > p:last-child{margin-bottom:0}
  .pl ul{list-style:none;margin-bottom:22px}
  .pl li{font-size:14px;color:var(--ink2);padding-left:19px;position:relative;margin-bottom:9px;line-height:1.45}
  .pl li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--blue)}
  .pl .lk{margin-top:auto;font-size:14px;font-weight:640;color:var(--blue)}
  @media(max-width:900px){.pills{grid-template-columns:1fr}}

  /* process */
  .proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;overflow:hidden}
  .ps{background:#fff;padding:28px 24px 30px}
  .ps .n{font-size:11.5px;font-weight:750;color:var(--blue);letter-spacing:.09em;margin-bottom:12px}
  .ps h3,.ps h4{font-size:16.5px;font-weight:690;letter-spacing:-.02em;margin-bottom:7px}
  .ps p{font-size:14px;color:var(--ink2);line-height:1.5}
  @media(max-width:900px){.proc{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.proc{grid-template-columns:1fr}}

  /* split */
  .split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
  @media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}}
  .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 26px;box-shadow:0 4px 22px rgba(6,58,92,.07)}
  .srow{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--line2)}
  .srow:last-child{border-bottom:none}
  .srow span{font-size:14px;color:var(--ink2);max-width:26ch}
  .srow b{font-size:25px;font-weight:760;letter-spacing:-.03em;white-space:nowrap}
  .srow.bad b{color:var(--no)}.srow.good b{color:var(--ok)}

  /* cases */
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .cs{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;transition:.16s}
  .cs:hover{box-shadow:0 12px 32px -16px rgba(6,58,92,.18)}
  .met{font-size:34px;font-weight:785;letter-spacing:-.04em;color:var(--blue);line-height:1;margin-bottom:6px}
  .metl{font-size:13px;color:var(--ink4);margin-bottom:18px}
  .cs p{font-size:14.5px;color:var(--ink2);line-height:1.52;margin-bottom:18px}
  .who{display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid var(--line2)}
  .av{width:30px;height:30px;border-radius:7px;background:var(--paper);border:1px solid var(--line);flex:none}
  .who b{font-size:13px;font-weight:660;display:block}.who span{font-size:12px;color:var(--ink4)}
  @media(max-width:900px){.cases{grid-template-columns:1fr}}

  /* industries */
  .inds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .ind{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 23px;transition:.15s;display:block}
  .ind:hover{border-color:#c3d3dd;box-shadow:0 8px 24px -12px rgba(6,58,92,.18)}
  .ind h3,.ind h4{font-size:16.5px;font-weight:690;letter-spacing:-.02em;margin-bottom:7px}
  .ind p{font-size:13.5px;color:var(--ink3);line-height:1.5;margin-bottom:11px}
  .ind .t{font-size:11.5px;font-weight:700;color:var(--blue)}
  @media(max-width:900px){.inds{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.inds{grid-template-columns:1fr}}

  /* standard */
  .std{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .sb{border-radius:14px;padding:30px}
  .sb.no{background:var(--no-soft);border:1px solid #f0d8d8}
  .sb.yes{background:var(--ok-soft);border:1px solid #c8e5da}
  .sb h3,.sb h4{font-size:17px;font-weight:700;margin-bottom:16px}
  .sb.no h4{color:#8a2b2b}.sb.yes h4{color:#0e6449}
  .sb ul{list-style:none}
  .sb li{padding-left:25px;position:relative;margin-bottom:11px;font-size:14.5px;color:var(--ink2);line-height:1.45}
  .sb li:before{position:absolute;left:0;top:0;font-weight:800;font-size:13px}
  .sb.no li:before{content:"✕";color:#b04545}
  .sb.yes li:before{content:"✓";color:var(--ok)}
  @media(max-width:800px){.std{grid-template-columns:1fr}}

  /* partner */
  .partner{background:var(--navy);border-radius:16px;padding:46px 48px;color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:46px;align-items:center}
  .partner h3{font-size:27px;letter-spacing:-.03em;font-weight:745;margin-bottom:14px}
  .partner p{color:#a9c4d6;font-size:15.5px}
  .partner ul{list-style:none;margin-top:18px}
  .partner li{padding-left:23px;position:relative;font-size:14.5px;color:#cfe0ea;margin-bottom:9px}
  .partner li:before{content:"→";position:absolute;left:0;color:#7ec6e8}
  @media(max-width:820px){.partner{grid-template-columns:1fr;padding:34px 28px;gap:26px}}

  /* faq */
  .faq{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
  .fq{border-bottom:1px solid var(--line2)}
  .fq:last-child{border-bottom:none}
  .fq summary{cursor:pointer;padding:20px 26px;font-size:16.5px;font-weight:650;letter-spacing:-.018em;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:20px;transition:.13s}
  .fq summary::-webkit-details-marker{display:none}
  .fq summary:hover{background:var(--paper);color:var(--blue)}
  .fq summary:after{content:"+";font-size:20px;font-weight:400;color:var(--ink4);flex:none}
  .fq[open] summary:after{content:"−"}
  .fq[open] summary{color:var(--blue)}
  .fq .a{padding:0 26px 22px;font-size:15px;color:var(--ink2);max-width:80ch;line-height:1.6}
  .fq .a b{color:var(--ink);font-weight:640}

  .final{text-align:center;max-width:660px;margin:0 auto}
  .final h2{font-size:clamp(31px,4.1vw,46px);letter-spacing:-.04em;line-height:1.09;font-weight:765}
  .final p{font-size:17.5px;color:var(--ink3);margin:18px 0 26px}
  .final .ctas{justify-content:center}
  .agenda{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px 26px;margin:0 auto 28px;text-align:left;max-width:560px}
  .agenda h3,.agenda h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);font-weight:700;margin-bottom:13px}
  .agenda div{font-size:14.5px;color:var(--ink2);padding-left:23px;position:relative;margin-bottom:9px}
  .agenda div:last-child{margin-bottom:0}
  .agenda div:before{content:"→";position:absolute;left:0;color:var(--blue);font-weight:700}

  /* ══════ VISUALS ══════ */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
    .pdot,.rampline,.blastline,.abar i{animation:none!important}}

  /* mailbox farm vs dedicated IPs */
  .farm{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;margin-top:26px;align-items:stretch}
  .farmbox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px 26px}
  .farmbox .fh{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
  .farmbox .fh h3,.farmbox .fh h4{font-size:16px;font-weight:700;letter-spacing:-.02em}
  .farmbox .fh em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4)}
  .farmbox .fsub{font-size:13.5px;color:var(--ink3);margin-bottom:16px}
  .mgrid{display:grid;grid-template-columns:repeat(40,1fr);gap:2px}
  .mgrid i{display:block;aspect-ratio:1;background:#d9dfe5;border-radius:1px}
  .ipgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
  .ipgrid i{display:block;aspect-ratio:1;background:var(--blue);border-radius:4px;opacity:.9}
  .farmfoot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--ink2)}
  .farmfoot b{color:var(--ink);font-weight:660}
  @media(max-width:820px){.farm{grid-template-columns:1fr}.mgrid{grid-template-columns:repeat(28,1fr)}}

  /* pipeline animation */
  .pipe{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 22px;margin-bottom:20px;overflow:hidden}
  .pipe .ph2{font-size:13px;font-weight:690;letter-spacing:-.01em;margin-bottom:4px}
  .pipe .ps2{font-size:13px;color:var(--ink3);margin-bottom:20px}
  .track{position:relative;height:64px}
  .rail{position:absolute;top:26px;left:2%;right:2%;height:3px;background:var(--line);border-radius:2px}
  .railfill{position:absolute;top:26px;left:2%;height:3px;background:var(--blue);border-radius:2px;width:0;
    animation:fill 7s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes fill{0%{width:0}88%{width:96%}100%{width:96%;opacity:.25}}
  .pdot{position:absolute;top:20px;left:2%;width:15px;height:15px;border-radius:50%;background:var(--blue);
    box-shadow:0 0 0 5px rgba(0,99,160,.16);animation:travel 7s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes travel{0%{left:2%}88%{left:calc(96% - 4px)}100%{left:calc(96% - 4px);opacity:0}}
  .stops{position:absolute;top:0;left:2%;right:2%;display:flex;justify-content:space-between}
  .stop{width:80px;text-align:center;position:relative}
  .stop .sd{width:9px;height:9px;border-radius:50%;background:#cfd7de;margin:23px auto 0;position:relative;z-index:2;transition:.3s}
  .stop .sl{font-size:10.5px;color:var(--ink3);margin-top:9px;line-height:1.3;font-weight:560}
  .stop.done .sd{background:var(--blue);box-shadow:0 0 0 3px rgba(0,99,160,.18)}
  .stop.done .sl{color:var(--ink)}
  .stop.last .sd{background:var(--ok)}
  .stop.last.done .sd{box-shadow:0 0 0 3px rgba(29,122,95,.2)}
  @media(max-width:900px){.track{height:auto}.rail,.railfill,.pdot{display:none}
    .stops{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .stop{width:auto;text-align:left;display:flex;gap:9px;align-items:center}
    .stop .sd{margin:0}.stop .sl{margin-top:0}}

  /* ramp vs blast */
  .ramp{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px 20px;margin-top:26px}
  .ramp .rh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
  .ramp .rh h3,.ramp .rh h4{font-size:15.5px;font-weight:690;letter-spacing:-.018em}
  .legend{display:flex;gap:18px;flex-wrap:wrap}
  .legend span{font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:7px}
  .legend i{width:16px;height:3px;border-radius:2px;display:block}
  .rampline{stroke:var(--blue);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s .3s ease-out forwards}
  .blastline{stroke:var(--no);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s .3s ease-out forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .rampcap{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px;padding-top:16px;border-top:1px solid var(--line2)}
  .rampcap div{font-size:13.5px;color:var(--ink2);line-height:1.5}
  .rampcap b{display:block;font-weight:670;margin-bottom:2px}
  .rampcap .bad b{color:var(--no)}.rampcap .good b{color:var(--blue)}
  @media(max-width:700px){.rampcap{grid-template-columns:1fr}}

  /* attempts chart */
  .att{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px 22px}
  .att h3,.att h4{font-size:15.5px;font-weight:690;letter-spacing:-.018em;margin-bottom:3px}
  .att .as{font-size:13px;color:var(--ink3);margin-bottom:20px}
  .abars{display:flex;align-items:flex-end;gap:5px;height:104px;margin-bottom:10px}
  .abar{flex:1;position:relative;height:100%;display:flex;align-items:flex-end}
  .abar i{display:block;width:100%;background:#d9dfe5;border-radius:3px 3px 0 0;height:var(--h);
    transform-origin:bottom;transform:scaleY(0);animation:grow .5s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--dl)}
  @keyframes grow{to{transform:scaleY(1)}}
  .abar.them i{background:var(--no);opacity:.85}
  .abar.us i{background:var(--blue)}
  .anums{display:flex;gap:5px;margin-bottom:14px}
  .anums span{flex:1;text-align:center;font-size:10px;color:var(--ink4);font-variant-numeric:tabular-nums}
  .amark{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding-top:14px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--ink2);margin-bottom:9px}
  .amark:last-child{margin-bottom:0}
  .amark em{font-style:normal;width:9px;height:9px;border-radius:2px;margin-top:6px}
  .amark b{color:var(--ink);font-weight:660}



  /* ══ reviews wall (animated) ══ */
  .rvmq{overflow:hidden;position:relative;margin:0 -32px}
  .rvtrack{display:flex;gap:16px;width:max-content;padding:4px 32px;animation:rvscroll 120s linear infinite}
  .rvtrack.back{animation:rvscrollb 104s linear infinite;margin-top:16px}
  .rvmq:hover .rvtrack,.rvmq:focus-within .rvtrack{animation-play-state:paused}
  @keyframes rvscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes rvscrollb{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .rvmq .rev{width:396px;flex:none;display:flex;flex-direction:column}
  .rvmq .rev.sm{width:326px}
  .rvcon{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink3);line-height:1.5}
  .rvcon b{color:var(--ink4);font-weight:670;font-size:11px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:3px}
  @media(prefers-reduced-motion:reduce){.rvtrack{animation:none}.rvmq{overflow-x:auto}}
  @media(max-width:600px){.rvmq{margin:0 -20px}.rvtrack{padding:4px 20px}.rvmq .rev{width:300px}.rvmq .rev.sm{width:280px}}
  .rvcta{margin-top:38px;text-align:center}
  .rvcta p{max-width:56ch;margin:0 auto;font-size:16.5px;color:var(--ink2);line-height:1.55}
  .rvcta .ctas{justify-content:center;margin-top:20px}

  /* ══ scrolling review marquee ══ */
  .mqwrap{padding:24px 0 26px;background:var(--tint);background-image:var(--dots);border-bottom:1px solid var(--tline)}
  .mqhead{text-align:center;font-size:12.5px;color:var(--ink4);margin-bottom:15px}
  .mqhead b{color:var(--ink);font-weight:660}
  .mqhead a{color:var(--blue);font-weight:620}
  .mq{overflow:hidden;position:relative}
  .mqdup{display:contents}
  .mqtrack{display:flex;gap:12px;width:max-content;animation:mqscroll 86s linear infinite}
  .mq:hover .mqtrack,.mq:focus-within .mqtrack{animation-play-state:paused}
  @keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .mqcard{width:330px;flex:none;background:#fff;border:1px solid var(--tline);border-radius:12px;
    padding:15px 18px 13px;box-shadow:0 1px 5px rgba(6,58,92,.05)}
  .mqcard .mqq{font-size:14px;color:var(--ink);line-height:1.48;margin:8px 0 12px;font-weight:520}
  .mqcard .mqf{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--line2)}
  .mqav{width:28px;height:28px;border-radius:8px;background:var(--blue-soft);color:var(--blue);display:flex;
    align-items:center;justify-content:center;font-size:11px;font-weight:750;flex:none}
  .mqf .mqn{font-size:12.5px;font-weight:670;display:block;line-height:1.3}
  .mqf .mqr{font-size:11.5px;color:var(--ink4)}
  .mqsrc{margin-left:auto;font-size:10.5px;font-weight:690;color:var(--ink3);background:var(--paper);
    border:1px solid var(--line);padding:3px 9px;border-radius:20px;white-space:nowrap}
  .mqsrc.sup{background:var(--ok-soft);border-color:#c8e5da;color:var(--ok)}
  @media(prefers-reduced-motion:reduce){.mqtrack{animation:none}.mq{overflow-x:auto}}
  @media(max-width:600px){.mqcard{width:290px}}

  /* ══ reviews ══ */
  .stars{display:inline-flex;gap:2px}
  .stars svg{width:14px;height:14px;fill:#e9881b;stroke:none}
  .revbar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
  .rvchip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--tline);
    border-radius:11px;padding:11px 17px}
  .rvchip .src{font-size:13px;font-weight:700;letter-spacing:-.01em}
  .rvchip .sc{font-size:13px;color:var(--ink3)}
  .rvchip .sc b{color:var(--ink);font-weight:730}

  .quotebig{background:#fff;border:1px solid var(--line);border-radius:16px;padding:38px 42px;margin-top:28px;
    box-shadow:0 6px 28px rgba(6,58,92,.07)}
  .quotebig .qm{font-size:44px;line-height:1;color:var(--blue);opacity:.28;font-weight:800;margin-bottom:8px}
  .quotebig p{font-size:clamp(18px,2.1vw,22px);line-height:1.5;letter-spacing:-.018em;color:var(--ink);font-weight:520}
  .quotebig p em{font-style:normal;background:#fdf1e2;padding:1px 5px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .quotebig .qf{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line2);flex-wrap:wrap}
  .qav{width:44px;height:44px;border-radius:11px;background:var(--blue-soft);color:var(--blue);display:flex;
    align-items:center;justify-content:center;font-size:15px;font-weight:750;letter-spacing:-.02em;flex:none}
  .qf .qn{font-size:15px;font-weight:690;display:block}
  .qf .qr{font-size:13.5px;color:var(--ink3)}
  .qf .qsrc{margin-left:auto;display:flex;align-items:center;gap:9px}
  .srcbadge{font-size:11.5px;font-weight:660;color:var(--ink3);background:var(--paper);border:1px solid var(--line);
    padding:4px 10px;border-radius:20px}
  @media(max-width:820px){.quotebig{padding:28px 24px}.qf .qsrc{margin-left:0;width:100%}}

  .revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .rev{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px;display:flex;flex-direction:column;transition:.16s}
  .rev:hover{box-shadow:0 12px 32px -16px rgba(6,58,92,.18)}
  .rev .rt{font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin:12px 0 10px;line-height:1.3}
  .rev .rq{font-size:14.5px;color:var(--ink2);line-height:1.55;margin-bottom:20px}
  .rev .rq b{color:var(--ink);font-weight:640}
  .rev .rf{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line2)}
  .rav{width:34px;height:34px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:flex;
    align-items:center;justify-content:center;font-size:12px;font-weight:750;flex:none}
  .rev .rn{font-size:13.5px;font-weight:680;display:block;line-height:1.3}
  .rev .rr{font-size:12.5px;color:var(--ink4)}
  .rev .rsrc{margin-left:auto;font-size:11px;font-weight:670;color:var(--ink4);background:var(--paper);
    border:1px solid var(--line);padding:3px 9px;border-radius:20px;white-space:nowrap}
  @media(max-width:900px){.revs{grid-template-columns:1fr}}

  .inlinequote{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:0 12px 12px 0;
    padding:22px 26px;margin-top:20px}
  .inlinequote p{font-size:16px;color:var(--ink);line-height:1.55;font-weight:520}
  .inlinequote .iq{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--ink3)}
  .inlinequote .iq b{color:var(--ink);font-weight:670}

  /* icons */
  .ic{width:38px;height:38px;border-radius:10px;background:var(--blue-soft);display:flex;align-items:center;
    justify-content:center;margin-bottom:15px;flex:none}
  .ic svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .indic{width:34px;height:34px;border-radius:9px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin-bottom:13px}
  .indic svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

  footer{background:var(--blue-dk);color:#b3d0e0;padding:58px 0 36px;font-size:14px}
  /* All-white variant: the navy in the full-colour lockup is invisible on this ground. */
  .flogo{margin-bottom:16px}
  .flogo img{display:block;height:24px;width:auto}
  .fgrid{display:grid;grid-template-columns:1.8fr repeat(4,1fr);gap:36px;margin-bottom:38px}
  footer h3{color:#fff;font-size:12.5px;font-weight:660;margin-bottom:15px;letter-spacing:.03em}
  footer ul{list-style:none}footer li{margin-bottom:9px;font-size:13.5px}
  footer a:hover{color:#fff}
  .fbot{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;font-size:12.5px;color:#93b8cd}
  @media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}

  /* ══════ BULK EMAIL SOFTWARE PAGE ══════
     Namespaced .bp*. Everything else on that page reuses the existing
     vocabulary: .ptgfx frames, .kit, .pills, .split, .sb, .faq. */

  /* wizard: numbered rail down the left, form preview on the right */
  .bpwiz{display:grid;grid-template-columns:210px 1fr;gap:0;background:#fff}
  .bpwsteps{background:var(--paper);border-right:1px solid var(--line);padding:16px 14px}
  .bpwstep{display:flex;gap:10px;align-items:flex-start;padding:9px 8px;border-radius:8px}
  .bpwstep.on{background:#fff;box-shadow:0 1px 3px rgba(20,40,60,.1)}
  .bpwstep .n{flex:none;width:20px;height:20px;border-radius:6px;background:#dfe6ec;color:var(--ink4);
    font-size:10.5px;font-weight:760;display:flex;align-items:center;justify-content:center}
  .bpwstep.done .n{background:var(--ok-soft);color:var(--ok)}
  .bpwstep.on .n{background:var(--blue);color:#fff}
  .bpwstep b{display:block;font-size:12.5px;font-weight:660;color:var(--ink2);line-height:1.3}
  .bpwstep.on b{color:var(--ink)}
  .bpwstep span{display:block;font-size:10.5px;color:var(--ink4);margin-top:1px}
  .bpwbody{padding:18px 20px 20px}
  .bpwfield{margin-bottom:13px}
  .bpwfield label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink4);margin-bottom:5px}
  .bpwfield .inp{border:1px solid var(--line);border-radius:7px;padding:9px 11px;font-size:12.5px;
    color:var(--ink2);background:#fff}
  .bpwfield .inp.sel{display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
  .bpwfield .inp.sel:after{content:"▾";color:var(--ink4);font-size:11px}
  .bpwchips{display:flex;gap:6px;flex-wrap:wrap}
  .bpwchips i{font-style:normal;font-size:11px;font-weight:640;padding:5px 10px;border-radius:20px;
    background:var(--blue-soft);color:var(--blue)}
  .bpwchips i.off{background:var(--paper);color:var(--ink4)}

  /* drag-and-drop editor: block palette + canvas */
  .bped{display:grid;grid-template-columns:132px 1fr;background:#fff}
  .bpedpal{background:var(--paper);border-right:1px solid var(--line);padding:13px 11px}
  .bpedpal .lb{font-size:9.5px;font-weight:720;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink4);margin-bottom:9px}
  .bpedpal i{display:flex;align-items:center;gap:7px;font-style:normal;font-size:11.5px;
    color:var(--ink2);border:1px dashed var(--tline);border-radius:6px;padding:7px 9px;margin-bottom:6px;
    background:#fff}
  .bpedpal i svg{width:12px;height:12px;stroke:var(--ink4);fill:none;stroke-width:2;stroke-linecap:round}
  .bpedcan{padding:15px 17px}
  .bpedblk{border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin-bottom:8px}
  .bpedblk.drop{border:1.5px dashed var(--blue);background:var(--blue-soft)}
  .bpedblk .bar{height:7px;border-radius:3px;background:#e6ebef}
  .bpedblk .bar+.bar{margin-top:6px}
  .bpedblk .bar.s{width:62%}
  .bpedblk .bar.t{height:11px;width:48%;background:#d3dbe2}
  .bpedblk .btnfake{display:inline-block;background:var(--blue);border-radius:5px;height:19px;width:88px}
  .bpedblk .dl{font-size:10.5px;font-weight:680;color:var(--blue);display:flex;align-items:center;gap:6px}
  .bpai{display:flex;align-items:center;gap:8px;margin-top:11px;border:1px solid var(--tline);
    border-radius:8px;background:var(--tint);padding:9px 11px}
  .bpai svg{width:13px;height:13px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .bpai span{font-size:11.5px;color:var(--ink2)}
  .bpai b{color:var(--ink);font-weight:660}

  /* replies inbox */
  .bpinbox .r{display:grid;grid-template-columns:104px 1fr 52px;gap:11px;align-items:baseline;
    padding:10px 0;border-bottom:1px solid #f2f5f7;font-size:12px}
  .bpinbox .r:last-child{border-bottom:0}
  .bpinbox .who{font-weight:670;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bpinbox .snip{color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bpinbox .when{text-align:right;color:var(--ink4);font-size:10.5px}
  .bpinbox .r.unread .who:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--blue);margin-right:7px;vertical-align:middle}

  @media(max-width:640px){
    .bpwiz{grid-template-columns:1fr}
    .bpwsteps{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow:auto}
    .bpwstep{flex:none}
    .bpwstep span{display:none}
    .bped{grid-template-columns:1fr}
    .bpedpal{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow:auto}
    .bpedpal .lb{display:none}
    .bpedpal i{margin-bottom:0;white-space:nowrap}
  }

  /* sub-page hero: no product shot underneath, and longer keyword-led headlines
     than the homepage's 14ch measure allows */
  .hero.page h1{max-width:24ch}

  /* repeated sub-section furniture inside .split blocks on the platform page */
  .bpk{font-size:11.5px;font-weight:740;letter-spacing:.11em;text-transform:uppercase;
    color:var(--blue);margin-bottom:12px}
  .bpk.alt{color:var(--blue-lt)}
  .bph3{font-size:25px;font-weight:755;letter-spacing:-.03em;line-height:1.15;margin-bottom:11px}
  .bplead{font-size:15.5px;color:var(--ink2);margin-bottom:18px}
  .pttick.flush{margin-top:0}
  .split.gap{margin-top:46px}
  /* Graphic on the left at desktop while the DOM keeps text first, so the
     stacked mobile order stays text-above-graphic without extra rules. */
  @media(min-width:901px){
    .split.flip > :first-child{order:2}
    .split.flip > :last-child{order:1}
  }
  /* informational counterpart to .sb.yes / .sb.no - neither good nor bad */
  .sb.info{background:var(--tint);border-color:var(--tline)}
  .sb.info h4{color:var(--blue)}
  .sb.info li:before{content:"›";color:var(--blue);font-weight:800}

  /* feature-grid icons: .ki .ico was built for a single character, so give it
     room for an SVG instead of numbering the tiles 1 to 8 */
  .ki .ico{width:32px;height:32px}
  .ki .ico svg{width:16px;height:16px;stroke:var(--blue);fill:none;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}

  /* SMTP providers you can connect - reinforces the bring-your-own story */
  .bpprov{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:30px}
  .bpprov span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
    border-radius:9px;padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--ink2)}
  .bpprov span i{width:8px;height:8px;border-radius:50%;background:var(--blue-lt);flex:none}
  .bpprov span.any{border-style:dashed;color:var(--ink4);font-weight:550}
  .bpprov span.any i{background:var(--ink4);opacity:.5}
  .bpprovnote{text-align:center;font-size:13px;color:var(--ink4);margin-top:14px}

  /* ══════ WASH SECTION ══════
     A third section surface alongside white and tinted: a soft blue gradient
     that fades out at the bottom, holding an elevated white panel.

     Two reasons it exists. It gives the page a surface that is not the dot
     pattern, which was the only texture here and made every band look alike.
     And because it reads as its own surface, it can sit between a white and a
     tinted section without clashing - so inserting it costs no tone flip in the
     eleven sections below.

     If it gets used a second time (the hero is the obvious candidate) it starts
     reading as deliberate rather than a one-off. */
  section.blk.wash{background:radial-gradient(120% 90% at 50% 0%,#dbeaf5 0%,#eef5fa 42%,#ffffff 100%);
    border-top:1px solid var(--tline);border-bottom:1px solid var(--tline)}
  .whypanel{background:#fff;border:1px solid var(--tline);border-radius:20px;padding:44px 46px;
    box-shadow:0 26px 60px -30px rgba(6,58,92,.4),0 3px 10px -6px rgba(6,58,92,.12)}

  /* claim list inside the panel - paired with .split and a .ptgfx panel */
  .whylist{display:flex;flex-direction:column}
  .whylist .it{display:flex;gap:15px;padding:19px 0;border-bottom:1px solid var(--line)}
  .whylist .it:first-child{padding-top:0}
  .whylist .it:last-child{border-bottom:0;padding-bottom:0}
  .whylist .it .ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--blue-soft);
    display:flex;align-items:center;justify-content:center}
  .whylist .it .ic svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  .whylist .it h3,.whylist .it h4{font-size:16.5px;font-weight:705;color:var(--ink);letter-spacing:-.02em;margin-bottom:4px}
  .whylist .it p{font-size:14.5px;color:var(--ink2);line-height:1.55}
  .whylist .it p b{color:var(--ink);font-weight:660}
  @media(max-width:820px){.whypanel{padding:28px 24px}}

  /* Four-way comparison. The three-column .cmp assumed one "them" column; the
     homepage now weighs MCC against three distinct alternatives. */
  .cmp.four{grid-template-columns:repeat(4,1fr)}
  @media(max-width:1080px){.cmp.four{grid-template-columns:1fr 1fr}}
  @media(max-width:640px){.cmp.four{grid-template-columns:1fr}}
  /* column identity: icon chip and provider tags, replacing the grey run-on line */
  .cmp.four .cc{position:relative}
  .cmp.four .cc.us:after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--blue)}
  .ccico{width:34px;height:34px;border-radius:10px;background:var(--paper);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .ccico svg{width:17px;height:17px;stroke:var(--ink4);fill:none;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
  .cc.us .ccico{background:var(--blue);border-color:var(--blue)}
  .cc.us .ccico svg{stroke:#fff}
  .chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 16px}
  .chips i{font-style:normal;font-size:11px;font-weight:600;color:var(--ink4);background:var(--paper);
    border:1px solid var(--line);border-radius:5px;padding:3px 7px}
  .cc.us .chips i{color:var(--blue);background:#fff;border-color:#bcd9ea}

  /* "How it ends" - a small graphic per column showing where that route lands.
     Motion hangs off .reveal.in, the site's existing scroll trigger, so these
     draw when the block arrives rather than on load. */
  .oc{margin-top:20px;padding-top:16px;border-top:1px solid var(--line2)}
  .oclab{font-size:9.5px;font-weight:730;letter-spacing:.11em;text-transform:uppercase;
    color:var(--ink4);margin-bottom:9px}
  .ocpanel{border:1px solid var(--line);border-radius:9px;background:#fff;padding:11px 12px}
  .ocnote{display:flex;gap:9px;align-items:flex-start}
  .ocnote .ico{flex:none;width:19px;height:19px;border-radius:5px;background:var(--no-soft);
    display:flex;align-items:center;justify-content:center}
  .ocnote .ico svg{width:11px;height:11px;stroke:var(--no);fill:none;stroke-width:2.6;stroke-linecap:round}
  .ocnote b{display:block;font-size:12px;font-weight:700;color:var(--no)}
  .ocnote span{display:block;font-size:11px;color:var(--ink4);margin-top:1px}
  .ocspark{display:block;width:100%;height:44px}
  .ocspark path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:260;stroke-dashoffset:260}
  .reveal.in .ocspark path{animation:ocdraw 1.5s cubic-bezier(.3,.9,.4,1) both}
  @keyframes ocdraw{to{stroke-dashoffset:0}}
  .ocfoot{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:10.5px;color:var(--ink4)}
  .ocfoot b{font-weight:700}
  .ocfoot b.bad{color:var(--no)}
  .ocfoot b.good{color:var(--ok)}
  .octl{display:flex;gap:3px;align-items:flex-end;height:34px}
  .octl i{flex:1;background:#e6ebef;border-radius:2px;height:38%}
  .octl i.last{background:var(--blue);height:100%}
  .reveal.in .octl i{animation:ocrise .5s ease-out both}
  @keyframes ocrise{from{height:0}}
  .ocpulse{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
    color:var(--ok);background:var(--ok-soft);padding:3px 9px;border-radius:20px}
  .ocpulse i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
  .reveal.in .ocpulse i{animation:ocblink 1.8s ease-in-out infinite}
  @keyframes ocblink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
  /* columns arrive in sequence rather than all at once */
  .cmp.four.reveal.in .cc{animation:ccin .55s cubic-bezier(.22,1,.36,1) both}
  .cmp.four.reveal.in .cc:nth-child(2){animation-delay:.08s}
  .cmp.four.reveal.in .cc:nth-child(3){animation-delay:.16s}
  .cmp.four.reveal.in .cc:nth-child(4){animation-delay:.24s}
  @keyframes ccin{from{opacity:0;transform:translateY(14px)}}
  @media(prefers-reduced-motion:reduce){
    .reveal.in .ocspark path,.reveal.in .octl i,.reveal.in .ocpulse i,
    .cmp.four.reveal.in .cc{animation:none}
    .ocspark path{stroke-dashoffset:0}
  }
  /* sub-heading inside a section, above a secondary block */
  .subh{margin:52px 0 20px}
  .subh h3{font-size:23px;font-weight:750;letter-spacing:-.03em;line-height:1.2}
  .subh p{font-size:15px;color:var(--ink3);margin-top:8px;max-width:70ch}


  /* ══════ PLATFORM PAGE: PROOF STRIP AND LEAD FORM ══════ */
  .proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .pq{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 24px 22px;
    display:flex;flex-direction:column}
  .pq .stars{display:flex;gap:2px;margin-bottom:12px}
  .pq .stars svg{width:14px;height:14px;fill:#f0a92b}
  .pq p{font-size:15px;color:var(--ink);line-height:1.5;font-weight:520;margin-bottom:16px}
  .pq .who{margin-top:auto;padding-top:14px;border-top:1px solid var(--line2);display:flex;
    align-items:center;justify-content:space-between;gap:12px}
  .pq .who b{display:block;font-size:13px;font-weight:670}
  .pq .who span{display:block;font-size:12px;color:var(--ink4)}
  .pq .src{font-size:11px;font-weight:700;color:var(--ink4);letter-spacing:.04em}
  @media(max-width:900px){.proof{grid-template-columns:1fr}}

  .leadwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:start}
  @media(max-width:900px){.leadwrap{grid-template-columns:1fr;gap:30px}}
  .leadform{background:#fff;border:1px solid var(--tline);border-radius:16px;padding:30px 30px 32px;
    box-shadow:0 20px 44px -26px rgba(6,58,92,.35)}
  .lf2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:560px){.lf2{grid-template-columns:1fr}}
  .lfield{margin-bottom:14px}
  .lfield label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink4);margin-bottom:6px}
  .lfield input,.lfield select,.lfield textarea{width:100%;font:inherit;font-size:14.5px;
    color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;
    padding:11px 13px;transition:.14s}
  .lfield textarea{min-height:86px;resize:vertical}
  .lfield input:focus,.lfield select:focus,.lfield textarea:focus{outline:none;border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(0,99,160,.14)}
  .lfield input::placeholder,.lfield textarea::placeholder{color:#a8b0b8}
  .leadform .btn{width:100%;text-align:center;margin-top:4px}
  .lfnote{font-size:12.5px;color:var(--ink4);margin-top:12px;text-align:center}
  .leadwrap .shead{margin-bottom:0;max-width:none}
  .leadwrap .shead h2{line-height:1.08}
  .lfhp{position:absolute;left:-9999px}

  /* ── Volume scale (comparison page) ───────────────────────────────────────
     Two tracks on a shared logarithmic axis from 25,000 to 200,000,000 a
     month. Log, not linear, and the graphic says so: on a linear axis
     Clickback's top listed tier is 0.05% of the width and simply disappears,
     which would look like a trick. The log axis is the generous reading and
     the gap is still four fifths of the track.

     Each fill carries its own --w as an inline custom property because the
     value is data, not styling. Widths are log10 positions:
     25k=0% · 50k=7.7% · 100k=15.4% · 1M=41% · 10M=66.7% · 200M=100%. */
  .vscale{background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:26px 28px 20px;margin-top:28px}
  .vsrow{margin-bottom:20px}
  .vshead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    flex-wrap:wrap;margin-bottom:9px}
  .vshead b{font-size:14.5px;font-weight:690;letter-spacing:-.015em;color:var(--ink)}
  .vshead em{font-style:normal;font-size:13px;color:var(--ink3);font-variant-numeric:tabular-nums}
  .vstrack{position:relative;height:34px;background:var(--paper);
    border:1px solid var(--line2);border-radius:9px;overflow:hidden}
  /* --l is where the plan range starts, --w how far it runs. Both tracks share
     the axis, so the Clickback bar ending and the MCC bar beginning land on the
     same pixel: the 100,000 overlap the section is about. */
  .vsfill{position:absolute;top:0;bottom:0;left:var(--l,0);width:var(--w)}
  .vsfill.them{background:var(--no-soft);box-shadow:inset -2px 0 0 var(--no);
    border-radius:8px 0 0 8px}
  .vsfill.us{background:var(--blue-soft);box-shadow:inset 2px 0 0 var(--blue);
    border-radius:0 8px 8px 0}
  .vscap{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--w) + 12px);
    font-size:12.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
  .vsrow.them .vscap{color:var(--no)}
  .vsrow.us .vscap{color:var(--blue)}
  @media(max-width:620px){.vscap{left:auto;right:10px;font-size:11.5px}}

  /* Shared axis. Percentages match the fills above. */
  .vsaxis{position:relative;height:19px;margin-top:2px;border-top:1px solid var(--line2);
    padding-top:5px}
  .vsaxis span{position:absolute;top:5px;transform:translateX(-50%);font-size:11px;
    color:var(--ink4);font-weight:600;font-variant-numeric:tabular-nums}
  .vsaxis span:first-child{transform:none;left:0}
  .vsaxis span:last-child{transform:none;left:auto;right:0}
  .vsnote{font-size:12px;color:var(--ink4);margin-top:12px;padding-top:11px;
    border-top:1px solid var(--line2);line-height:1.5}

  .vscale.reveal .vsfill{width:0}
  .vscale.reveal.in .vsfill{width:var(--w);transition:width 1.05s cubic-bezier(.22,1,.36,1)}
  .vscale.reveal.in .vsrow.us .vsfill{transition-delay:.18s}
  @media(prefers-reduced-motion:reduce){
    .vscale.reveal .vsfill,.vscale.reveal.in .vsfill{width:var(--w);transition:none}}

  /* .lt was built for two columns, label + value. A three-column comparison
     needs two things it does not have.

     1. The "us" column has to be findable at a glance. Tint only, no bolding
        or ticks: the page argues that the facts do the work, so weighting the
        column any harder undercuts it.
     2. Below 760px .lt hides <thead> and stacks every cell into a block. With
        two value columns that leaves the reader looking at two figures with
        nothing saying which is whose, so the header is re-attached per cell
        from data-c. Desktop never renders it. */
  .lt.vs th:last-child{background:var(--blue-soft);color:var(--blue)}

  /* table-layout:fixed keeps the two value columns equal and, more usefully,
     caps the damage from any future long cell: under the default auto
     algorithm a table's used width is max(specified, minimum content width),
     so `.lt{width:100%}` is only a request. Scoped above 760px because below
     it .lt turns every cell into a block and the table algorithm stops
     applying at all. */
  @media(min-width:761px){
    .lt.vs{table-layout:fixed}
    .lt.vs th:first-child,.lt.vs td.w{width:24%}
    .lt.vs td:last-child{background:#f6fafd}}
  @media(max-width:760px){
    .lt.vs td[data-c]{padding-top:10px}
    .lt.vs td[data-c]:before{content:attr(data-c);display:block;font-size:10.5px;
      font-weight:750;letter-spacing:.07em;text-transform:uppercase;
      color:var(--ink4);margin-bottom:3px}
    .lt.vs td[data-c="MailClickConvert"]:before{color:var(--blue)}}

  /* Sourcing line under the comparison table. Every competitor claim on the
     page is traceable to a Clickback URL, and the reader can see that. */
  .srcline{font-size:12.5px;color:var(--ink4);margin-top:16px;line-height:1.6}
  .srcline a{color:var(--ink3);text-decoration:underline;text-underline-offset:2px}
  .srcline a:hover{color:var(--blue)}

  /* ── Key takeaways panel ──────────────────────────────────────────────────
     Sits directly under the hero on comparison pages. The job is that someone
     who reads nothing else still leaves with the four numbers that matter. */
  .tkw{background:#fff;border:1px solid var(--line);border-radius:15px;
    padding:4px 32px;margin-top:30px;box-shadow:0 14px 40px -28px rgba(6,58,92,.5)}
  .tk{display:flex;gap:17px;padding:22px 0;border-bottom:1px solid var(--line2)}
  .tk:last-child{border-bottom:none}
  .tk .n{flex:none;width:27px;height:27px;border-radius:8px;background:var(--blue-soft);
    color:var(--blue);font-size:12.5px;font-weight:800;display:flex;align-items:center;
    justify-content:center;margin-top:1px}
  .tk b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.022em;
    color:var(--ink);margin-bottom:5px}
  .tk p{font-size:14.5px;color:var(--ink2);line-height:1.6}
  .tk em{font-style:normal;color:var(--blue);font-weight:700}
  @media(max-width:560px){.tkw{padding:2px 20px}.tk{gap:13px}.tk b{font-size:15.5px}}

  /* ── Tick and cross marks inside .lt.vs ───────────────────────────────────
     Deliberately NOT called .yn. That class already exists at the list-table
     block above, is used by seven marks on the homepage, and carries
     `white-space:nowrap` for one-word "Yes"/"No" cells. Borrowing the name
     restyled the homepage and, worse, made every sentence here unwrappable,
     which is what pushed this table to 1013px inside an 845px wrap and
     scrolled the page sideways.

     A cross means "not found on their published pages", not "confirmed
     absent". The table footnote says so, and every row their own wording
     settles quotes that wording instead. */
  .cmark{display:block;position:relative;padding-left:27px}
  .cmark:before{position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:5px;
    font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .cmark.y:before{content:"\2713";background:var(--ok-soft);color:var(--ok)}
  .cmark.n:before{content:"\2715";background:var(--no-soft);color:var(--no)}
  .cmark.n{color:var(--ink3)}
  .lt.vs td:last-child .cmark.y{font-weight:600;color:var(--ink)}

  /* ── Price at matched volume ──────────────────────────────────────────────
     Both figures are published plans at the same send volume, which is the
     only price comparison on this page that is like for like. */
  .pxc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
  @media(max-width:700px){.pxc{grid-template-columns:1fr}}
  .px{border-radius:14px;padding:26px 28px 24px;border:1px solid}
  .px.them{background:var(--no-soft);border-color:#f0d8d8}
  .px.us{background:var(--blue-soft);border-color:#cbe1ef}
  .px .who{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink4);margin-bottom:12px}
  .px.us .who{color:var(--blue)}
  .px .amt{font-size:clamp(36px,4.6vw,48px);font-weight:800;letter-spacing:-.045em;
    line-height:1;color:var(--ink)}
  .px .amt span{font-size:17px;font-weight:640;letter-spacing:-.01em;color:var(--ink3)}
  .px .plan{font-size:13.5px;color:var(--ink2);margin-top:11px;line-height:1.55}
  .px .term{font-size:12.5px;margin-top:9px;font-weight:680}
  .px.them .term{color:var(--no)}
  .px.us .term{color:var(--blue)}
  .pxsave{margin-top:18px;background:var(--navy);border-radius:13px;
    padding:22px 28px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
  .pxsave b{font-size:26px;font-weight:800;letter-spacing:-.035em;color:#fff}
  .pxsave span{font-size:14.5px;color:#bcd7e6;line-height:1.55}

  /* ── Pricing page ─────────────────────────────────────────────────────────
     .ptseg (the homepage "two ways in" pill strip) is reused for the tab bar,
     so only the panels are new. .ptpanel is NOT reusable here: it is a hard
     two-column grid built for that one section. */
  /* .ptseg's mobile rules assume two tabs: `.in{width:100%}` plus `button{flex:1}`
     divides the bar evenly. With three tabs the labels need 469px inside a
     311px bar at 375px wide and get clipped, so the pricing strip opts into a
     scrolling variant instead. Scoped with .three so the homepage's two-tab
     strip keeps the even split it was designed for. */
  @media(max-width:760px){
    .ptseg.three{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
      -webkit-overflow-scrolling:touch}
    .ptseg.three::-webkit-scrollbar{display:none}
    .ptseg.three .in{width:auto;flex:none}
    .ptseg.three button{flex:0 0 auto;padding:11px 15px;white-space:nowrap;justify-content:flex-start}
    .ptseg.three button b{font-size:13.5px}}

  .prpanel{display:none}
  .prpanel.on{display:block;animation:ptin .34s cubic-bezier(.22,1,.36,1) both}
  @media(prefers-reduced-motion:reduce){.prpanel.on{animation:none}}

  .prtiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
  @media(max-width:1080px){.prtiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:620px){.prtiers{grid-template-columns:1fr}}

  .prcard{background:#fff;border:1px solid var(--line);border-radius:15px;
    padding:26px 24px 24px;display:flex;flex-direction:column;position:relative}
  .prcard.pop{border-color:var(--blue);box-shadow:0 18px 46px -26px rgba(0,99,160,.55)}
  .prcard.pop:before{content:"Most popular";position:absolute;top:-11px;left:24px;
    background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
    font-size:10.5px;font-weight:750;letter-spacing:.08em;
    text-transform:uppercase;padding:4px 11px;border-radius:20px}
  .prvol{font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink4);margin-bottom:12px}
  .prcard.pop .prvol{color:var(--blue)}
  .prprice{font-size:38px;font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink)}
  .prprice span{font-size:15px;font-weight:620;letter-spacing:-.01em;color:var(--ink3)}
  .prsetup{font-size:12.5px;color:var(--ink4);margin-top:8px}
  .prfeat{list-style:none;margin:18px 0 22px;display:flex;flex-direction:column;gap:9px}
  .prfeat li{display:flex;gap:9px;font-size:13.5px;color:var(--ink2);line-height:1.45}
  .prfeat svg{flex:none;width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:3;
    stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
  .prfeat b{color:var(--ink);font-weight:680}
  .prcard .btn{margin-top:auto;width:100%;text-align:center}

  .prent{margin-top:18px;background:var(--navy);border-radius:15px;padding:32px 34px;
    display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:center;
    background-image:var(--gridw)}
  @media(max-width:820px){.prent{grid-template-columns:1fr;gap:22px}}
  .prent h2,.prent h3{font-size:23px;font-weight:750;letter-spacing:-.032em;color:#fff;margin-bottom:9px}
  .prent p{font-size:14.5px;color:#bcd7e6;line-height:1.6;max-width:62ch}
  .prent ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
  .prent li{font-size:12.5px;color:#dcecf5;background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:5px 12px}

  .prnote{font-size:13px;color:var(--ink4);margin-top:18px;line-height:1.6}
  .prnote b{color:var(--ink2);font-weight:680}

  /* Shared "included on every plan" strip under the tier grid. */
  .princ{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:24px 28px}
  .princh{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink4);margin-bottom:16px}
  .princg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 26px}
  @media(max-width:900px){.princg{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:520px){.princg{grid-template-columns:1fr}}
  .princg div{display:flex;gap:9px;font-size:13.5px;color:var(--ink2);line-height:1.45}
  .princg svg{flex:none;width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:3;
    stroke-linecap:round;stroke-linejoin:round;margin-top:2px}

  /* ── Verification tiers ───────────────────────────────────────────────────
     Six equal boxes of text had no focal point and buried the actual argument:
     the per-email rate falls 60% from the smallest pack to the largest. Each
     card now carries that rate as a bar, so the ladder is visible at a glance
     rather than something the reader has to divide out. Bar length is cost per
     email against the $0.0030 baseline, so shorter is cheaper. */
  .vtiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  @media(max-width:900px){.vtiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.vtiers{grid-template-columns:1fr}}

  .vcard{background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:22px 24px 20px;position:relative;display:flex;flex-direction:column}
  .vcard .vv{font-size:11.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink4)}
  .vtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:9px}
  .vcard .vp{font-size:32px;font-weight:800;letter-spacing:-.042em;color:var(--ink);line-height:1}
  .vsave{font-size:11px;font-weight:750;letter-spacing:.03em;color:var(--ok);
    background:var(--ok-soft);border-radius:20px;padding:4px 10px;white-space:nowrap}

  .vbar{height:6px;border-radius:4px;background:var(--line2);margin-top:16px;overflow:hidden}
  .vbar i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--blue-lt)}
  .vcard.best .vbar i{background:var(--blue)}
  .vrate{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:9px;
    font-size:12.5px;color:var(--ink4)}
  .vrate b{font-size:14px;font-weight:730;color:var(--ink2);letter-spacing:-.015em;
    font-variant-numeric:tabular-nums}
  .vcard.best .vrate b{color:var(--blue)}
  .vbuy{margin-top:12px;width:100%;justify-content:center}
  .vexp{font-size:12px;color:var(--ink4);margin-top:14px;padding-top:12px;
    border-top:1px solid var(--line2)}

  .vcard.best{border-color:var(--blue);box-shadow:0 16px 42px -28px rgba(0,99,160,.6)}
  .vcard.best:before{content:"Best rate";position:absolute;top:-10px;right:20px;
    background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
    font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
    padding:4px 10px;border-radius:20px}

  /* The custom tier has no price, so it stops trying to look like the five that
     do and becomes the ask instead. */
  .vcard.vcustom{background:var(--blue-soft);border-color:#cbe1ef;justify-content:center}
  .vcard.vcustom .vv{color:var(--blue)}
  .vcard.vcustom .vp{font-size:25px;margin-top:10px}
  .vcard.vcustom a{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--blue);
    text-decoration:none;display:inline-flex;align-items:center;gap:6px;align-self:flex-start}
  .vcard.vcustom a:hover{text-decoration:underline;text-underline-offset:3px}
  .vcard.vcustom a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round}

  .vcard.reveal .vbar i{width:0}
  .vcard.reveal.in .vbar i{width:var(--w);transition:width .9s cubic-bezier(.22,1,.36,1)}
  @media(prefers-reduced-motion:reduce){
    .vcard.reveal .vbar i,.vcard.reveal.in .vbar i{width:var(--w);transition:none}}

  /* ── Help-me-choose band ──────────────────────────────────────────────────
     The conversion moment on this page: most people arriving at pricing for a
     200-million-a-month product should be talking to someone, not self-serving. */
  .helpband{background:var(--blue-soft);border:1px solid #cbe1ef;border-radius:16px;
    padding:34px 38px;display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center}
  @media(max-width:820px){.helpband{grid-template-columns:1fr;gap:22px;padding:28px 24px}}
  .helpband h3{font-size:clamp(22px,2.6vw,29px);font-weight:770;letter-spacing:-.034em;
    line-height:1.14;margin-bottom:10px}
  .helpband p{font-size:15px;color:var(--ink2);line-height:1.6;max-width:56ch}
  .helpacts{display:flex;flex-direction:column;gap:11px}
  .helpacts .btn{width:100%;text-align:center}
  /* The phone is a fallback, not a second call to action. It was a bordered
     white box with a 16px blue number, which read as co-equal with the form
     button beside it and split the intent. Now a quiet line underneath. */
  .helptel{display:inline-flex;align-items:center;justify-content:center;gap:7px;
    text-decoration:none;font-size:13.5px;font-weight:500;color:var(--ink3);transition:.15s}
  .helptel b{font-weight:700;color:var(--ink2)}
  .helptel:hover b{color:var(--blue)}
  .helptel svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.1;
    stroke-linecap:round;stroke-linejoin:round;opacity:.65}
  .helpsm{font-size:12.5px;color:var(--ink4);text-align:center;line-height:1.5}
  .helpacts .helpsm+.helptel{margin-top:2px}
  .herotel{margin-top:15px}

  /* ── Two sending lanes (SMTP relay page) ──────────────────────────────────
     Standard neutral IPs for cold discovery against premium high-reputation
     IPs for engaged contacts. The whole page rests on this distinction, so it
     gets a real side-by-side rather than a bullet list. */
  .lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  @media(max-width:860px){.lanes{grid-template-columns:1fr}}
  .lane{border-radius:16px;padding:30px 30px 28px;border:1px solid var(--line);background:#fff;
    display:flex;flex-direction:column}
  .lane.prem{background:var(--blue-soft);border-color:#cbe1ef}
  .lanetag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:750;
    letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
    border:1px solid var(--accent-line);border-radius:20px;padding:4px 11px;align-self:flex-start}
  .lane h3{font-size:21px;font-weight:750;letter-spacing:-.03em;margin:14px 0 7px}
  .lane .lsub{font-size:14px;color:var(--ink3);line-height:1.55;margin-bottom:18px}
  .lane ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:auto}
  .lane li{display:flex;gap:10px;font-size:14px;color:var(--ink2);line-height:1.5}
  .lane li svg{flex:none;width:15px;height:15px;fill:none;stroke-width:2.8;
    stroke-linecap:round;stroke-linejoin:round;margin-top:3px;stroke:var(--blue)}
  .lane b{color:var(--ink);font-weight:680}

  /* Provider chips. Text, not logos — the site ships no raster images and
     these are trademarks we should not be redrawing as SVG anyway.

     Qualified with .lane on purpose: `.lane ul` above is (0,1,1) and an
     unscoped `.provs` is (0,1,0), so the column direction meant for the
     feature list won and stacked every chip full-width. Same trap as the
     `.nav ul a` one in Known rough edges. */
  .lane ul.provs{display:flex;flex-direction:row;flex-wrap:wrap;gap:9px;
    margin-top:20px;list-style:none}
  .provs li{font-size:13px;font-weight:620;color:var(--ink2);background:#fff;
    border:1px solid var(--line);border-radius:8px;padding:7px 13px}
  .lane.prem .provs li{border-color:#cbe1ef}

  /* Routing rules: numbered rows, each a rule the platform applies. */
  .routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px}
  @media(max-width:900px){.routes{grid-template-columns:1fr}}
  .route{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 24px 22px}
  .route .rn{width:27px;height:27px;border-radius:8px;background:var(--blue-soft);color:var(--blue);
    font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
    margin-bottom:14px}
  .route h3,.route h4{font-size:16px;font-weight:700;letter-spacing:-.022em;margin-bottom:7px}
  .route p{font-size:13.5px;color:var(--ink3);line-height:1.58}
  /* Four-up variant. Must be a class, not an inline grid-template-columns:
     inline styles beat media queries, so the /email-verification steps stayed
     4-across at 375px and crushed each card to 64px wide. */
  .routes.four{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media(max-width:1000px){.routes.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.routes.four{grid-template-columns:1fr}}

  /* Pricing is two parts: a platform plan, then who does the sending. The
     step markers exist so nobody reads the second table as an alternative to
     the first. */
  .pstep{display:flex;align-items:center;gap:13px;margin-bottom:20px}
  .pstepn{flex:none;width:34px;height:34px;border-radius:10px;background:var(--blue);color:#fff;
    font-size:14.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .pstep h3{font-size:21px;font-weight:750;letter-spacing:-.03em}
  .pstep span{display:block;font-size:13.5px;font-weight:500;color:var(--ink3);margin-top:2px}

  .vtiers.four{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media(max-width:1000px){.vtiers.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.vtiers.four{grid-template-columns:1fr}}

  /* ── Direct-answer block (AEO) ────────────────────────────────────────────
     A self-contained 40-60 word answer sitting immediately under the question
     it answers. Answer engines quote spans that stand alone, so this must not
     depend on the paragraph before it for context. One per page section, never
     more, or nothing looks like the answer. */
  .answer{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);
    border-radius:0 13px 13px 0;padding:24px 28px;margin:22px 0 0}
  .answer p{font-size:16.5px;line-height:1.62;color:var(--ink2)}
  .answer p b{color:var(--ink);font-weight:700}
  .answer + .answer{margin-top:14px}
  .ansq{display:block;font-size:11.5px;font-weight:750;letter-spacing:.08em;
    text-transform:uppercase;color:var(--accent);margin-bottom:9px}

  /* Check groups. Four buckets, each a level the address is tested at, which
     reads better than twelve flat bullets and survives being quoted. */
  .checkg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  @media(max-width:820px){.checkg{grid-template-columns:1fr}}
  .checkbox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px 22px}
  .checkbox h3,.checkbox h4{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
    color:var(--blue);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line2)}
  .checkbox dl{display:flex;flex-direction:column;gap:14px}
  .checkbox dt{font-size:14.5px;font-weight:690;color:var(--ink);letter-spacing:-.015em}
  .checkbox dd{font-size:13.5px;color:var(--ink3);line-height:1.55;margin-top:3px}

  /* Bounce arithmetic. Deliberately a sum the reader can redo, not an industry
     statistic we cannot source. */
  .sums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--tline);
    border:1px solid var(--tline);border-radius:14px;overflow:hidden;margin-top:26px}
  @media(max-width:700px){.sums{grid-template-columns:1fr}}
  .sum{background:#fff;padding:26px 24px}
  .sum b{display:block;font-size:31px;font-weight:800;letter-spacing:-.04em;color:var(--ink);
    line-height:1;font-variant-numeric:tabular-nums}
  .sum .sl{display:block;font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink4);margin-bottom:11px}
  .sum p{font-size:13px;color:var(--ink3);line-height:1.55;margin-top:9px}
  .sum.bad b{color:var(--no)}

  /* ── Features index ───────────────────────────────────────────────────────
     Sticky category jump bar. Offset by the 64px topbar so an anchored
     category heading does not land underneath it. */
  .fnav{position:sticky;top:64px;z-index:40;background:rgba(255,255,255,.94);
    backdrop-filter:saturate(160%) blur(9px);border-bottom:1px solid var(--line)}
  .fnavin{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:11px 0}
  .fnavin::-webkit-scrollbar{display:none}
  .fnavin a{flex:none;font-size:13px;font-weight:620;color:var(--ink3);text-decoration:none;
    padding:7px 13px;border-radius:8px;white-space:nowrap;transition:.14s}
  .fnavin a:hover{background:var(--blue-soft);color:var(--blue)}

  section[id]{scroll-margin-top:118px}

  .fcat{display:flex;align-items:baseline;gap:14px;margin-bottom:24px;
    padding-bottom:15px;border-bottom:1px solid var(--line)}
  .fcat h2{font-size:clamp(23px,2.7vw,31px);font-weight:760;letter-spacing:-.035em}
  .fcat span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
    border-radius:20px;padding:4px 11px;white-space:nowrap}

  .ftgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  @media(max-width:960px){.ftgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:600px){.ftgrid{grid-template-columns:1fr}}
  .ft{background:#fff;padding:22px 24px 24px}
  .ft h3,.ft h4{font-size:15px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
  .ft p{font-size:13.5px;color:var(--ink3);line-height:1.55}
  section.tinted .ft{background:#fff}

  /* ── Blog index ───────────────────────────────────────────────────────────
     Modelled on the Automailer resources page: category filter pills, a
     featured post, then a three-up card grid grouped by topic. Cards carry a
     coloured topic tag instead of a thumbnail, because the site ships no
     raster images and post art would be the only exception. */
  .bfilters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
  .bfilter{font:inherit;cursor:pointer;font-size:13.5px;font-weight:640;padding:9px 17px;
    border-radius:30px;border:1.5px solid var(--line);background:#fff;color:var(--ink3);transition:.16s}
  .bfilter:hover{border-color:var(--blue);color:var(--blue)}
  .bfilter[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
  .bfilter span{opacity:.6;font-weight:550;margin-left:5px}
  .bfilter[aria-pressed="true"] span{opacity:.75}

  /* Topic tags. Each topic gets its own pair so a card is identifiable before
     the title is read. Kept to soft grounds so no tag outshouts a headline. */
  .btag{display:inline-block;font-size:10.5px;font-weight:750;letter-spacing:.08em;
    text-transform:uppercase;padding:4px 11px;border-radius:20px;width:fit-content;margin-bottom:14px}
  .btag.smtp{background:var(--blue-soft);color:var(--blue)}
  .btag.automation{background:#efeafa;color:#6544ad}
  .btag.lists{background:var(--accent-soft);color:var(--accent)}
  .btag.hygiene{background:var(--ok-soft);color:var(--ok)}
  .btag.deliver{background:#e6f4f8;color:#0d6f8a}
  .btag.templates{background:#fdeef0;color:#a83b4f}
  .btag.strategy{background:#eaf0f6;color:#3d5a80}
  .btag.casestudy{background:var(--navy);color:#fff}

  .bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  @media(max-width:980px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:640px){.bgrid{grid-template-columns:1fr}}

  .bcard{background:#fff;border:1px solid var(--line);border-radius:15px;padding:26px 26px 24px;
    display:flex;flex-direction:column;text-decoration:none;transition:.2s}
  .bcard:hover{border-color:var(--blue);box-shadow:0 16px 40px -26px rgba(0,99,160,.55);
    transform:translateY(-3px)}
  @media(prefers-reduced-motion:reduce){.bcard,.bcard:hover{transform:none;transition:none}}
  .bcard h3{font-size:17px;font-weight:700;letter-spacing:-.026em;line-height:1.3;
    color:var(--ink);margin-bottom:10px}
  .bcard:hover h3{color:var(--blue)}
  .bcard p{font-size:13.5px;color:var(--ink3);line-height:1.58;flex-grow:1;margin-bottom:18px}
  .bmeta{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink4);
    padding-top:14px;border-top:1px solid var(--line2)}
  .bmeta i{font-style:normal}
  .bmeta em{font-style:normal;width:3px;height:3px;border-radius:50%;background:var(--ink4);opacity:.6}

  /* Featured post. One only, and it is the newest rather than a hand-picked
     favourite, so the page cannot go stale by neglect. */
  .bfeat{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;
    background:var(--blue-soft);border:1px solid #cbe1ef;border-radius:18px;
    padding:38px 40px;margin-bottom:44px;text-decoration:none;transition:.2s}
  .bfeat:hover{border-color:var(--blue);box-shadow:0 20px 50px -30px rgba(0,99,160,.6)}
  @media(max-width:820px){.bfeat{grid-template-columns:1fr;gap:22px;padding:30px 26px}}
  .bfeat h2{font-size:clamp(23px,2.9vw,32px);font-weight:770;letter-spacing:-.035em;
    line-height:1.14;color:var(--ink);margin:12px 0 12px}
  .bfeat:hover h2{color:var(--blue)}
  .bfeat p{font-size:15px;color:var(--ink2);line-height:1.6}
  .bfeatside{text-align:center}
  .bfeatside b{display:block;font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--blue);
    line-height:1}
  .bfeatside span{display:block;font-size:12.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink4);margin-top:8px}

  .bempty{display:none;text-align:center;padding:60px 0;color:var(--ink3);font-size:15.5px}

  /* ── Use-case cards (industry pages) ──────────────────────────────────────
     The centre of an industry page: the specific campaigns that sector runs,
     each with the operational constraint that decides whether it works. A
     buyer should find their own campaign by name here. */
  .ucases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  @media(max-width:1000px){.ucases{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:640px){.ucases{grid-template-columns:1fr}}
  .ucase{background:#fff;border:1px solid var(--line);border-radius:15px;
    padding:26px 26px 22px;display:flex;flex-direction:column}
  .ucase .ulabel{font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
    color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
    border-radius:20px;padding:4px 11px;align-self:flex-start;margin-bottom:14px}
  .ucase h3{font-size:17.5px;font-weight:720;letter-spacing:-.026em;line-height:1.28;
    color:var(--ink);margin-bottom:9px}
  .ucase p{font-size:14px;color:var(--ink3);line-height:1.58;flex-grow:1}
  .ucase .uneed{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2);
    font-size:12.5px;color:var(--ink2);line-height:1.5}
  .ucase .uneed b{color:var(--blue);font-weight:700;display:block;font-size:11px;
    letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px}

  /* Audience/data selector chips — what a list can be cut by. */
  .selects{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;list-style:none}
  .selects li{font-size:13px;font-weight:600;color:var(--ink2);background:#fff;
    border:1px solid var(--line);border-radius:8px;padding:8px 14px}
  .selects li b{color:var(--blue);font-weight:700}

  /* Who-it-is-for row. */
  .whofor{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
    background:var(--tline);border:1px solid var(--tline);border-radius:14px;overflow:hidden}
  @media(max-width:900px){.whofor{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:520px){.whofor{grid-template-columns:1fr}}
  .whofor div{background:#fff;padding:22px 22px 24px}
  .whofor h3,.whofor h4{font-size:15px;font-weight:710;letter-spacing:-.02em;margin-bottom:6px}
  .whofor p{font-size:13px;color:var(--ink3);line-height:1.55}

  /* ── Political page imagery ───────────────────────────────────────────────
     All SVG or CSS, no photography. Stock imagery of ballot boxes would say
     less than a graphic that shows the actual mechanic. */

  /* District map: precincts shaded by targeting, with mail routed into three
     of them. Decorative, so aria-hidden and no text depends on it. */
  .dmap{width:100%;height:auto;display:block}
  .dmap .pr{fill:var(--blue-soft);stroke:#fff;stroke-width:3}
  .dmap .pr.t1{fill:#bcdcee}.dmap .pr.t2{fill:#7fbcdd}.dmap .pr.t3{fill:var(--blue)}
  .dmap .env{fill:#fff;stroke:var(--navy);stroke-width:2.4;stroke-linejoin:round}
  .dmap .envl{stroke:var(--navy);stroke-width:2.4;fill:none;stroke-linecap:round}
  .dmap .trail{stroke:var(--accent);stroke-width:2.6;fill:none;stroke-linecap:round;
    stroke-dasharray:7 7}
  .dmap .pin{fill:var(--accent)}
  @media(prefers-reduced-motion:no-preference){
    .dmap .trail{animation:dashmove 2.6s linear infinite}
    @keyframes dashmove{to{stroke-dashoffset:-28}}}

  /* Voter targeting grid: the whole electorate, then the slice you send to. */
  .vtarget{background:#fff;border:1px solid var(--line);border-radius:15px;padding:26px 28px 22px}
  .vthead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    flex-wrap:wrap;margin-bottom:16px}
  .vthead b{font-size:14.5px;font-weight:690;letter-spacing:-.015em}
  .vthead em{font-style:normal;font-size:12.5px;color:var(--ink3)}
  .vdots{display:grid;grid-template-columns:repeat(40,1fr);gap:3px}
  @media(max-width:700px){.vdots{grid-template-columns:repeat(24,1fr)}}
  .vdots i{display:block;aspect-ratio:1;border-radius:2px;background:#dfe5ea}
  .vdots i.on{background:var(--blue)}
  .vdots i.mid{background:#9ec9e2}
  .vtkey{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
    border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink3)}
  .vtkey span{display:inline-flex;align-items:center;gap:7px}
  .vtkey em{font-style:normal;width:10px;height:10px;border-radius:2px;display:inline-block}

  /* GOTV ramp: volume against days to polls closing. */
  .gotv{background:var(--navy);background-image:var(--gridw);border-radius:15px;
    padding:28px 30px 22px;color:#fff}
  .gotv h4{font-size:15.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:3px}
  .gotv .gs{font-size:13px;color:#bcd7e6;margin-bottom:20px}
  .gbars{display:flex;align-items:flex-end;gap:5px;height:120px}
  .gbars i{flex:1;background:rgba(255,255,255,.22);border-radius:3px 3px 0 0;height:var(--h)}
  .gbars i.peak{background:var(--accent-soft)}
  .gaxis{display:flex;gap:5px;margin-top:9px}
  .gaxis span{flex:1;text-align:center;font-size:10px;color:#9dc0d4;font-variant-numeric:tabular-nums}
  .gnote{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);
    font-size:13px;color:#bcd7e6;line-height:1.55}
  .gnote b{color:#fff}

  /* Client logo wall. Raster by necessity: these are third-party campaign
     marks and redrawing them as SVG would be both wrong and a trademark
     problem. Self-hosted so the page does not depend on another CDN. */
  .clogos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  @media(max-width:900px){.clogos{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:560px){.clogos{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .clogos div{background:#fff;display:flex;align-items:center;justify-content:center;
    padding:22px 18px;min-height:104px}
  .clogos img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain}

  /* Sister-brand band. */
  .sister{display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;
    background:var(--blue-soft);border:1px solid #cbe1ef;border-radius:16px;padding:32px 36px;
    margin-top:24px}
  @media(max-width:820px){.sister{grid-template-columns:1fr;gap:20px;padding:26px 24px}}
  .sister h3{font-size:21px;font-weight:750;letter-spacing:-.03em;margin-bottom:9px}
  .sister p{font-size:14.5px;color:var(--ink2);line-height:1.6}

  /* ── Two-column hero (industry pages) ─────────────────────────────────────
     Copy left, graphic right. The default .hero centres everything and lets the
     headline run the full width, which left the political map stranded below a
     wall of text with nothing beside it.

     Called .duo, NOT .split. `.split` already exists as a two-column content
     component with display:grid, so `class="hero page split"` turned the hero
     itself into a two-column grid and shrank .wrap to 636px inside one track.
     Same trap as the .yn collision on the comparison table. */
  .hero.duo .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;
    align-items:center;text-align:left}
  @media(max-width:940px){
    .hero.duo .wrap{grid-template-columns:1fr;gap:34px;text-align:center}}
  .hero.duo h1{margin:22px 0 0;max-width:17ch;font-size:clamp(31px,3.9vw,48px)}
  .hero.duo .sub{margin:20px 0 0;max-width:52ch}
  .hero.duo .ctas{justify-content:flex-start;margin-top:28px}
  .herogfx{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
  @media(max-width:900px){.herogfx{max-width:440px}}
  .hero.duo .builtfor{margin-top:30px}
  .hero.duo .bfpills{justify-content:flex-start}
  @media(max-width:940px){
    .hero.duo h1,.hero.duo .sub{margin-left:auto;margin-right:auto}
    .hero.duo .ctas,.hero.duo .bfpills{justify-content:center}}

  /* ── US state map ─────────────────────────────────────────────────────────
     Real state boundaries from US Census TIGER via us-atlas (public domain),
     projected and simplified by tools/build-usmap.py. A tile grid was tried
     first and read as a scatter of squares rather than a map.

     Alaska and Hawaii are separate Albers projections placed bottom-left, which
     is what makes it an "Albers USA" composite rather than one projection
     stretched over the Pacific. */
  .usmap{width:100%;height:auto;display:block}
  .usmap path{fill:#cfe0ec;stroke:var(--tint);stroke-width:1.1;stroke-linejoin:round}
  .usmap path.t2{fill:#7fb8db}
  .usmap path.t3{fill:var(--blue)}
  .usmap .drop rect{fill:#fff;stroke:var(--navy);stroke-width:1.8}
  .usmap .drop path{fill:none;stroke:var(--navy);stroke-width:1.6}
  /* Hidden by default because the animation fades them in. Under reduced motion
     no animation runs, so they must be restored or those users see no envelopes
     at all and the graphic loses its point. */
  .usmap .drop{opacity:0}
  @media(prefers-reduced-motion:reduce){.usmap .drop{opacity:1}}

  @media(prefers-reduced-motion:no-preference){
    .usmap path.t3{animation:statepulse 6s ease-in-out infinite}
    .usmap path.t3:nth-of-type(2n){animation-delay:.9s}
    .usmap path.t3:nth-of-type(3n){animation-delay:1.8s}
    @keyframes statepulse{0%,70%,100%{fill:var(--blue)}80%{fill:#0d86c9}}
    /* Envelopes land on the target states rather than flying across the map;
       trails crossing state lines read as noise at this size. */
    .usmap .drop{animation:envdrop 7s ease-in-out infinite}
    @keyframes envdrop{
      0%{opacity:0;transform:translateY(-13px) scale(.6)}
      9%{opacity:1;transform:translateY(0) scale(1)}
      84%{opacity:1;transform:translateY(0) scale(1)}
      93%{opacity:0;transform:translateY(-4px) scale(.9)}
      100%{opacity:0;transform:translateY(-13px) scale(.6)}}}

  .usmaplegend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:14px;
    font-size:12px;color:var(--ink4)}
  .usmaplegend span{display:inline-flex;align-items:center;gap:7px}
  .usmaplegend em{font-style:normal;width:10px;height:10px;border-radius:2px;display:inline-block}
  @media(max-width:940px){.usmaplegend{justify-content:center}}


  /* ── Code blocks (API page) ───────────────────────────────────────────────
     Dark on the navy ground so a request and its response read as one pair.
     Horizontal scroll is on the block itself: a long URL must never widen the
     page, which is the usual way code blocks break a layout. */
  .code{background:var(--navy);border-radius:12px;padding:20px 22px;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  .code pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12.5px;line-height:1.7;color:#d8e8f2;white-space:pre;margin:0}
  .code .c{color:#7fa8bf}                 /* comment */
  .code .k{color:#7ec6e8;font-weight:600} /* key / element */
  .code .s{color:#9fd8a8}                 /* string / value */
  .codelabel{font-size:11.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink4);margin-bottom:9px}
  .codepair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
  @media(max-width:860px){.codepair{grid-template-columns:1fr}}

  /* Endpoint areas */
  .areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  @media(max-width:900px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.areas{grid-template-columns:1fr}}
  .area{background:#fff;padding:24px 24px 26px}
  .area .an{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
  .area code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
    font-weight:700;color:var(--blue);background:var(--blue-soft);border-radius:5px;padding:2px 8px}
  .area .ct{font-size:11.5px;font-weight:700;color:var(--ink4);letter-spacing:.05em}
  .area p{font-size:13.5px;color:var(--ink3);line-height:1.55}
  .area ul{list-style:none;margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
  .area li{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
    color:var(--ink2);background:var(--paper);border:1px solid var(--line);
    border-radius:5px;padding:3px 7px}

  /* Integration logos-as-text */
  .intg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
    background:var(--tline);border:1px solid var(--tline);border-radius:14px;overflow:hidden}
  @media(max-width:820px){.intg{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .intg div{background:#fff;padding:22px 22px 24px}
  .intg h3,.intg h4{font-size:15px;font-weight:710;letter-spacing:-.02em;margin-bottom:6px}
  .intg p{font-size:13px;color:var(--ink3);line-height:1.55}

  /* ── FAQ hub ──────────────────────────────────────────────────────────────
     Topic groups with a jump bar. The hub answers cross-cutting buying
     questions and links out for product detail, rather than restating what the
     product pages already carry: 161 questions are already live in FAQPage
     schema across the site, and duplicating them here would put the same Q&A
     on two URLs and risk both being ignored. */
  .fqnav{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
  .fqnav a{font-size:13.5px;font-weight:620;color:var(--ink3);text-decoration:none;
    padding:9px 16px;border-radius:30px;border:1.5px solid var(--line);background:#fff;transition:.15s}
  .fqnav a:hover{border-color:var(--blue);color:var(--blue)}
  .fqgroup+.fqgroup{margin-top:52px}
  .fqhead{display:flex;align-items:baseline;gap:13px;margin-bottom:20px;
    padding-bottom:13px;border-bottom:1px solid var(--line)}
  .fqhead h2{font-size:clamp(20px,2.3vw,26px);font-weight:760;letter-spacing:-.03em}
  .fqhead span{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
    border-radius:20px;padding:3px 10px;white-space:nowrap}
  .fqmore{margin-top:16px;font-size:13.5px;color:var(--ink3)}
  .fqmore a{color:var(--blue);font-weight:640}

  /* ── Pain list (industry pages) ───────────────────────────────────────────
     The "why it fails here" block. Sits between the problem statement and the
     campaign types, so the page reads problem, cause, then what we run. */
  .pains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  @media(max-width:820px){.pains{grid-template-columns:1fr}}
  .pain{background:#fff;border:1px solid var(--line);border-radius:13px;
    padding:20px 22px;display:flex;gap:13px}
  .pain .px{flex:none;width:22px;height:22px;border-radius:6px;background:var(--no-soft);
    color:var(--no);font-size:12px;font-weight:800;display:flex;align-items:center;
    justify-content:center;margin-top:1px}
  .pain b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;
    color:var(--ink);margin-bottom:5px}
  .pain p{font-size:13.5px;color:var(--ink3);line-height:1.55}

  /* ── Pricing nudge on an industry page ────────────────────────────────────*/
  .pricenudge{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;
    background:var(--navy);background-image:var(--gridw);border-radius:16px;padding:34px 38px}
  @media(max-width:760px){.pricenudge{grid-template-columns:1fr;gap:20px;padding:28px 24px}}
  .pricenudge h3{font-size:clamp(21px,2.5vw,27px);font-weight:760;letter-spacing:-.032em;
    color:#fff;margin-bottom:9px}
  .pricenudge p{font-size:14.5px;color:#bcd7e6;line-height:1.6;max-width:60ch}
  .pricenudge b{color:#fff}

  /* ── Other industries ─────────────────────────────────────────────────────*/
  .others{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  @media(max-width:980px){.others{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:600px){.others{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .others a{background:#fff;padding:20px 20px 22px;text-decoration:none;display:block;transition:.16s}
  .others a:hover{background:var(--blue-soft)}
  .others b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em;
    color:var(--ink);margin-bottom:5px}
  .others a:hover b{color:var(--blue)}
  .others span{font-size:12.5px;color:var(--ink3);line-height:1.5}

  /* ── Legal pages ──────────────────────────────────────────────────────────
     Long-form prose. Narrower measure than the marketing pages because these
     are read rather than scanned, and a 60ch line is the point at which people
     stop losing their place. */
  .legal{max-width:74ch;margin:0 auto}
  .legal h2{font-size:clamp(19px,2.1vw,24px);font-weight:740;letter-spacing:-.028em;
    line-height:1.25;color:var(--ink);margin:44px 0 14px;padding-top:22px;
    border-top:1px solid var(--line)}
  .legal h2:first-child{margin-top:0;padding-top:0;border-top:none}
  .legal h3{font-size:16.5px;font-weight:720;letter-spacing:-.02em;color:var(--ink);
    margin:28px 0 10px}
  .legal p{font-size:15.5px;line-height:1.72;color:var(--ink2);margin-bottom:16px}
  .legal ul{margin:0 0 18px 0;padding-left:0;list-style:none}
  .legal li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.7;
    color:var(--ink2);margin-bottom:11px}
  .legal li:before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;
    border-radius:50%;background:var(--blue);opacity:.55}
  .legal a{color:var(--blue);font-weight:620}
  .legal strong{color:var(--ink);font-weight:680}

  .legalmeta{background:var(--blue-soft);border:1px solid #cbe1ef;border-radius:13px;
    padding:20px 24px;margin-bottom:34px;font-size:14px;color:var(--ink2);line-height:1.62}
  .legalmeta b{color:var(--ink);font-weight:700}

  /* Table-of-contents rail for the long documents */
  .legaltoc{background:#fff;border:1px solid var(--line);border-radius:13px;
    padding:22px 24px;margin-bottom:34px}
  .legaltoc h2,.legaltoc h4{font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink4);margin-bottom:13px}
  .legaltoc ol{list-style:none;counter-reset:toc;columns:2;column-gap:28px}
  @media(max-width:640px){.legaltoc ol{columns:1}}
  .legaltoc li{counter-increment:toc;margin-bottom:8px;font-size:13.5px;line-height:1.45;
    break-inside:avoid}
  .legaltoc li:before{content:counter(toc) ". ";color:var(--ink4);font-weight:600}
  .legaltoc a{color:var(--ink2);text-decoration:none}
  .legaltoc a:hover{color:var(--blue);text-decoration:underline}

  /* Footer: six columns now, and a legal row split off from the copyright. */
  .fgrid{grid-template-columns:1.5fr repeat(5,1fr);gap:28px}
  @media(max-width:1080px){.fgrid{grid-template-columns:1fr 1fr 1fr;gap:28px}}
  @media(max-width:700px){.fgrid{grid-template-columns:1fr 1fr}}
  .fbot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  .flegal{display:flex;gap:20px;flex-wrap:wrap}
  .flegal a{color:#93b8cd}
  .flegal a:hover{color:#fff}

  /* ---- signup wizard (/signup) · all classes su- prefixed, no collisions ---- */
  .su-steps{display:flex;gap:10px;list-style:none;margin:0 0 34px;padding:0;max-width:820px}
  .su-steps li{flex:1;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:650;color:var(--ink4);
    padding-bottom:12px;border-bottom:3px solid var(--line)}
  .su-steps li span{width:26px;height:26px;border-radius:50%;background:var(--line2);color:var(--ink4);
    display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:750}
  .su-steps li.on{color:var(--blue);border-bottom-color:var(--blue)}
  .su-steps li.on span{background:var(--blue);color:#fff}
  .su-steps li.done{color:var(--ink2);border-bottom-color:var(--ok)}
  .su-steps li.done span{background:var(--ok-soft);color:var(--ok)}

  .su-panel{max-width:820px}
  .su-panel[hidden]{display:none}
  .su-seg{margin-bottom:18px}
  .su-group[hidden]{display:none}
  .su-note{font-size:14px;color:var(--ink3);line-height:1.6;margin-bottom:16px;max-width:70ch}

  .su-plan{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;
    padding:15px 18px;margin-bottom:10px;cursor:pointer;background:#fff;transition:border-color .12s, box-shadow .12s}
  .su-plan:hover{border-color:var(--blue-lt)}
  .su-plan:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 1px var(--blue), 0 4px 16px rgba(6,58,92,.08)}
  .su-plan input{accent-color:var(--blue);width:17px;height:17px;flex:none}
  .su-pl{flex:1;display:flex;flex-direction:column;gap:2px}
  .su-pl b{font-size:15.5px;font-weight:700;letter-spacing:-.018em}
  .su-pl span{font-size:12.5px;color:var(--ink3)}
  .su-pp{font-size:19px;font-weight:760;letter-spacing:-.03em;white-space:nowrap}
  .su-pp i{font-style:normal;font-size:12px;color:var(--ink4);font-weight:600}

  .su-addon{margin:18px 0 6px}
  .su-addon label{display:block;font-size:13.5px;font-weight:680;margin-bottom:7px}
  .su-addon label span{font-weight:480;color:var(--ink4)}
  .su-addon select{width:100%;max-width:430px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
    font:inherit;font-size:14px;background:#fff;color:var(--ink)}
  .su-enterprise{margin-top:20px;font-size:13.5px;color:var(--ink3)}

  .su-form .lfield{margin-bottom:0}
  .su-form .lf2{margin-bottom:14px}
  .su-promo{display:flex;align-items:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}
  .su-promo .lfield{width:220px}
  .su-promo-msg{font-size:13px;font-weight:640;padding-bottom:12px}
  .su-promo-msg.ok{color:var(--ok)}
  .su-promo-msg.bad{color:var(--no)}
  .su-opt{font-weight:480;color:var(--ink4)}

  .su-pay3{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start}
  .su-payseg{margin-bottom:16px}
  .su-paygroup[hidden]{display:none}
  .su-cc3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px}
  .su-same{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--ink2);margin:16px 0 12px;cursor:pointer}
  .su-same input,.su-terms input{accent-color:var(--blue);width:16px;height:16px;flex:none}

  .su-sig{margin-top:22px;border-top:1px solid var(--line2);padding-top:18px}
  .su-sigtabs{display:flex;gap:8px;margin-bottom:10px}
  .su-sigtabs button{font:inherit;font-size:13px;font-weight:650;padding:7px 14px;border:1px solid var(--line);
    border-radius:8px;background:#fff;color:var(--ink3);cursor:pointer}
  .su-sigtabs button[aria-selected="true"]{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
  .su-signote{font-size:12.5px;color:var(--ink4);margin-bottom:10px;max-width:60ch}
  #su-canvas{border:1px dashed var(--line);border-radius:10px;background:#fff;width:100%;max-width:560px;
    height:140px;display:block;touch-action:none;cursor:crosshair}
  .su-clear{font:inherit;font-size:12.5px;color:var(--ink4);background:none;border:none;cursor:pointer;
    margin-top:6px;text-decoration:underline;text-underline-offset:2px}
  .su-sigpreview{font-family:"Snell Roundhand","Brush Script MT",cursive;font-size:34px;color:var(--ink);
    min-height:52px;padding:6px 2px}
  .su-terms{display:flex;gap:9px;align-items:center;font-size:14px;margin:18px 0 16px;cursor:pointer}
  /* ACH bank-name hint under the routing field */
  .su-bankname{display:block;font-size:12.5px;font-weight:640;margin-top:6px;min-height:1em;color:var(--ink4)}
  .su-bankname.ok{color:var(--ok)}
  .su-bankname.bad{color:var(--no)}
  /* Terms of service frame above the signature. The legal text is pulled from
     /terms at load and inherits .legal styling, scaled down for the box. */
  .su-tosblock{margin-top:22px;border-top:1px solid var(--line2);padding-top:18px}
  .su-toshead{font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);margin-bottom:8px}
  .su-tos{height:300px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;overscroll-behavior:contain}
  .su-tos:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .su-tos .legal{max-width:none;margin:0}
  .su-tos .legal h2{font-size:14.5px;margin:18px 0 8px;padding-top:12px}
  .su-tos .legal h3{font-size:13.5px;margin:12px 0 6px}
  .su-tos .legal p,.su-tos .legal li{font-size:13px;line-height:1.6;margin-bottom:10px}
  .su-tos .legal h2:first-child{margin-top:0;padding-top:0}
  .su-tosfallback{font-size:13.5px;color:var(--ink3);line-height:1.6}
  .su-toslink{font-size:13px;margin-top:8px}
  .su-toslink a{color:var(--blue);font-weight:640}
  .su-tosblock .su-terms{margin:14px 0 4px}

  .su-summary{background:var(--tint);border:1px solid var(--tline);border-radius:14px;padding:24px;position:sticky;top:90px}
  .su-summary h2,.su-summary h3{font-size:16px;font-weight:720;letter-spacing:-.02em;margin-bottom:14px}
  .su-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
  .su-line{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink2)}
  .su-line b{font-weight:650;white-space:nowrap}
  .su-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--tline);
    padding-top:12px;font-size:13.5px;color:var(--ink3)}
  .su-totalv{font-size:24px;font-weight:770;letter-spacing:-.03em;color:var(--ink)}
  .su-sumnote{font-size:12.5px;color:var(--ink4);margin-top:10px;line-height:1.55}
  .su-assure{list-style:none;margin-top:14px;padding-top:12px;border-top:1px solid var(--tline)}
  .su-assure li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink3);margin-bottom:7px}
  .su-assure svg{width:14px;height:14px;flex:none;margin-top:1px;fill:none;stroke:var(--ok);stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round}

  .su-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;max-width:820px}
  .su-err{color:var(--no);font-size:13.5px;font-weight:640;margin-top:12px}
  .su-err[hidden]{display:none}
  .lfield.su-bad input{border-color:var(--no)}

  @media(max-width:920px){.su-pay3{grid-template-columns:1fr}.su-summary{position:static}}
  @media(max-width:560px){.su-cc3{grid-template-columns:1fr}.su-steps li{font-size:0}
    .su-steps li span{font-size:12.5px}.su-steps{gap:6px}}
  /* thank-you page - the confirmation mark above the headline */
  .thanksmark{width:64px;height:64px;border-radius:50%;background:var(--ok-soft);
    border:1px solid #c8e5da;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
  .thanksmark svg{width:30px;height:30px;fill:none;stroke:var(--ok);stroke-width:2.6;
    stroke-linecap:round;stroke-linejoin:round}
  .route h3 a,.route h4 a{color:inherit;text-decoration:none}
  .route h4 a:hover{color:var(--blue)}

  /* ---- knowledge base (/knowledge-base) · kb- prefixed ---- */
  .kbsearchwrap{max-width:560px;margin:26px auto 0;position:relative}
  #kbsearch{width:100%;padding:13px 18px 13px 44px;border:1px solid var(--line);border-radius:12px;
    font:inherit;font-size:15px;background:#fff;color:var(--ink);
    box-shadow:0 8px 26px -12px rgba(6,58,92,.18)}
  #kbsearch:focus{outline:none;border-color:var(--blue)}
  .kbcount{position:absolute;right:16px;top:50%;transform:translateY(-50%);
    font-size:12.5px;color:var(--ink4);pointer-events:none}
  /* category tile band: the site's floating-card-on-tinted-ground signature,
     same construction as the stats ribbon */
  .kbband{padding-top:0}
  .kbband .kbtiles{background:#fff;border:1px solid var(--tline);border-radius:16px;
    padding:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
    box-shadow:0 22px 44px -20px rgba(6,58,92,.28), 0 4px 14px rgba(6,58,92,.07)}
  .kbband[hidden]{display:none}
  .kbtile{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:11px;
    text-decoration:none;transition:background .12s}
  .kbtile:hover{background:var(--blue-soft)}
  .kbico{width:38px;height:38px;flex:none;border-radius:10px;background:var(--blue-soft);
    display:inline-flex;align-items:center;justify-content:center}
  .kbico svg{width:19px;height:19px;fill:none;stroke:var(--blue);stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .kbtile:hover .kbico{background:#fff}
  .kbtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .kbtxt b{font-size:14px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
  .kbtxt span{font-size:12px;color:var(--ink4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kbn{font-size:11.5px;font-weight:700;color:var(--ink4);background:var(--paper);
    border:1px solid var(--line2);border-radius:100px;padding:3px 9px;flex:none}
  .kbtile:hover .kbn{color:var(--blue);border-color:var(--blue-soft);background:#fff}
  .kbmag{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;
    fill:none;stroke:var(--ink4);stroke-width:2;stroke-linecap:round;pointer-events:none}
  .kbpop{margin-top:14px;font-size:12.5px;color:var(--ink4);display:flex;gap:7px;
    align-items:center;justify-content:center;flex-wrap:wrap}
  .kbpop button{font:inherit;font-size:12.5px;font-weight:650;color:var(--blue);
    background:none;border:1px solid var(--tline);border-radius:100px;padding:4px 12px;cursor:pointer}
  .kbpop button:hover{background:#fff;border-color:var(--blue)}
  .kbcat{margin-bottom:52px}
  .kbcat[hidden]{display:none}
  .kbcat:last-of-type{margin-bottom:0}
  .kbcathead{display:flex;align-items:center;gap:13px;margin-bottom:16px}
  .kbcathead .kbico.sm{width:32px;height:32px;border-radius:9px}
  .kbcathead .kbico.sm svg{width:16px;height:16px}
  .kbcatname{flex:1;min-width:0}
  .kbcathead h2{font-size:20px;font-weight:740;letter-spacing:-.026em;line-height:1.15}
  .kbcathead p{font-size:12.5px;color:var(--ink4);margin-top:1px}
  .kbcount2{font-size:12px;font-weight:650;color:var(--ink4);white-space:nowrap}
  .kbgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .kbcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
    border-radius:12px;padding:18px 20px 16px;text-decoration:none;
    transition:border-color .12s, box-shadow .12s, transform .12s}
  .kbcard:hover{border-color:var(--blue-lt);box-shadow:0 10px 26px -12px rgba(6,58,92,.2);
    transform:translateY(-2px)}
  .kbcard[hidden]{display:none}
  .kbcard h3{font-size:15px;font-weight:700;letter-spacing:-.018em;color:var(--ink);margin-bottom:6px}
  .kbcard p{font-size:13px;color:var(--ink3);line-height:1.55;flex:1;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .kbgo{margin-top:11px;font-size:12px;font-weight:700;color:var(--blue);opacity:0;
    transform:translateX(-4px);transition:opacity .12s, transform .12s}
  .kbcard:hover .kbgo,.kbcard:focus-visible .kbgo{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    .kbcard,.kbcard:hover{transform:none}
    .kbgo{opacity:1;transform:none}}
  .kbempty{text-align:center;font-size:15px;color:var(--ink3);padding:30px 0}
  .kbcrumbs{display:flex;gap:8px;font-size:13px;margin-bottom:14px}
  .kbcrumbs a{color:var(--blue);text-decoration:none;font-weight:640}
  .kbcrumbs span{color:var(--ink4)}
  .kbmeta{font-size:13px;color:var(--ink4);margin-top:10px}
  .kbvideo{position:relative;aspect-ratio:16/9;margin-bottom:26px}
  .kbvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px}
  .kbart{font-size:15.5px;color:var(--ink2);line-height:1.7}
  .kbart h2,.kbart h3,.kbart h4{color:var(--ink);letter-spacing:-.02em;margin:26px 0 10px;line-height:1.25}
  .kbart h2{font-size:22px;font-weight:730}
  .kbart h3{font-size:18px;font-weight:710}
  .kbart h4{font-size:16px;font-weight:700}
  .kbart p{margin-bottom:14px}
  .kbart ul,.kbart ol{margin:0 0 14px 22px}
  .kbart li{margin-bottom:7px}
  .kbart img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;
    margin:6px 0 16px;display:block}
  .kbart a{color:var(--blue);font-weight:640}
  .kbart table{border-collapse:collapse;margin-bottom:16px;font-size:14px}
  .kbart td,.kbart th{border:1px solid var(--line);padding:8px 12px}
  @media(max-width:900px){.kbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .kbband .kbtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.kbgrid{grid-template-columns:1fr}
    .kbband .kbtiles{grid-template-columns:1fr;padding:8px}
    .kbcount2{display:none}}

  /* ---- interface rules (see AGENTS.md "Interface rules") ---- */
  /* Keyboard focus: a visible ring on anything clickable that is not a text
     field. :focus-visible only, so mouse clicks stay clean. Text fields keep
     their border-color treatment instead of a ring. */
  a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
  .btn:focus-visible{outline-offset:3px}
  /* Kill the double-tap-to-zoom delay heuristics on controls. */
  a,button,summary,input,select,textarea,label{touch-action:manipulation}
  /* No widowed last words in display type. */
  h1,h2{text-wrap:balance}
  /* Skip link: first tab stop on every page, invisible until focused. */
  .skiplink{position:absolute;left:16px;top:-60px;z-index:200;background:var(--blue);
    color:#fff;font-size:13.5px;font-weight:680;padding:10px 16px;border-radius:9px;
    text-decoration:none;transition:top .12s}
  .skiplink:focus{top:12px}

  /* ---- homepage v2 · client logo marquee (replaces the review marquee) ----
     Two counter-scrolling rows. Logos render monochrome and take color on
     hover, so thirty brand palettes cannot fight the page. The second row
     reverses direction for depth. Placeholder tiles (.ph2) hold the layout
     until the real files land in images/logos/. */
  /* No border-bottom: .mqwrap's seam floats as a stray line when the stat
     band follows on the same tint (same fix as the pricing-page band). Edge
     masks fade the rows out instead of clipping at the viewport, and the
     tightened padding lets logos + stat card read as one proof block. */
  /* The logo wall is a full section with its own heading (it was a caption
     band under the hero and read as an afterthought). Flat tint so it
     continues the hero's fade seamlessly; the .tofade below carries it into
     the white problem section. */
  .lmqsec{background:var(--tint);padding:72px 0 64px;border-bottom:0}
  .lmq .mq+.mq{margin-top:22px}
  .lmqsec .shead{margin-bottom:38px}
  .lmqtrack.lmqrev{animation-direction:reverse}  /* not .rev - reviews wall owns it */
  .lmq .mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  /* One row, not two. Twenty-four bordered tiles stacked in two tight rows
     read as a wall; a single row shows eight or nine at a time and the rest
     arrive as it travels. Duration doubled with the track length so the
     scroll speed is unchanged. The tile chrome is gone too - the logos are
     already monochrome, so 24 rounded rectangles were adding edges and
     nothing else. */
  .lmqtrack{gap:64px;align-items:center;animation-duration:80s}
  .lmlogo{display:inline-flex;align-items:center;justify-content:center;flex:none;height:56px}
  /* Full-color logos, no monochrome filter - tried both; color stands out
     more on the calm gradient ground. A light opacity lift on hover keeps
     some interactivity without a filter swap. */
  .lmlogo img{height:22px;width:auto;display:block;opacity:.92;transition:opacity .15s}
  .lmlogo:hover img{opacity:1}
  .lmlogo img{height:34px}
  @media(prefers-reduced-motion:reduce){
    .lmqtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

  /* ---- v2 stat strip (option 2): plain white, no card ----
     The logo tiles and a floating white stat card were two competing white
     objects on one dotted ground, which is what made the strip read busy.
     The card is gone; a tint-to-white gradient carries the eye across instead
     of a seam, and the strip doubles as the bottom edge of the hero region. */
  /* Stat strip, closing the "why" section rather than sitting under the logo
     wall - stacked there the two made one long compressed proof block. */
  .whystats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:52px;padding-top:38px;border-top:1px solid var(--tline)}
  .whystats .tstat{border-left:1px solid var(--tline)}
  .whystats .tstat:first-child{border-left:0}
  .whystats .tstat b{color:var(--blue)}
  .whystats .tstat span{color:var(--ink3)}
  @media(max-width:760px){
    .whystats{grid-template-columns:1fr 1fr;gap:28px 0;margin-top:40px;padding-top:32px}
    .whystats .tstat:nth-child(3){border-left:0}}

  /* ---- v2 problem section ----
     Each card is artifact + text: the thing the symptom produces, drawn in
     CSS, above the explanation. Icons were interchangeable and read as
     filler; these are specific, so the section can be understood at a glance
     before a word is read. Red appears only where something is genuinely
     failing (the Spam tags, the disabled notice) - never as card decoration. */
  .probs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .prob{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
    display:flex;flex-direction:column;transition:border-color .14s, box-shadow .14s, transform .14s}
  .prob:hover{border-color:var(--blue-lt);box-shadow:0 14px 30px -16px rgba(6,58,92,.22);
    transform:translateY(-2px)}
  /* Fixed height, not min-height: the three artifacts are naturally 146-178px
     tall and the dividing rules have to line up across the row. */
  .probart{background:var(--paper);border-bottom:1px solid var(--line2);
    padding:20px 20px 18px;height:182px;display:flex;align-items:center}
  .probtx{padding:20px 24px 24px}
  .prob h3{font-size:17.5px;font-weight:730;letter-spacing:-.025em;color:var(--ink);
    line-height:1.3;margin-bottom:9px}
  .prob q{quotes:"\201C" "\201D";font-style:normal}
  .prob p{font-size:14.5px;color:var(--ink2);line-height:1.62}
  .prob p b{font-weight:680;color:var(--ink)}

  /* 1 · the suspension email */
  .pmail{width:100%;background:#fff;border:1px solid var(--line);border-radius:9px;
    border-left:3px solid var(--no);padding:11px 13px 12px}
  .pmhd{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:660;color:var(--ink3)}
  .pmav{width:17px;height:17px;border-radius:5px;background:var(--no-soft);color:#b04545;
    font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .pmtime{margin-left:auto;color:var(--ink4);font-weight:500}
  .pmsub{font-size:12.5px;font-weight:730;color:var(--ink);margin:8px 0 8px;letter-spacing:-.01em}
  .pmln{height:5px;border-radius:3px;background:var(--line2);margin-bottom:5px}
  .pmln.s{width:62%}
  .pmoff{display:inline-block;margin-top:9px;font-size:9.5px;font-weight:800;letter-spacing:.07em;
    text-transform:uppercase;color:#b04545;background:var(--no-soft);border-radius:5px;padding:3px 7px}

  /* 2 · every metric passes, the outcome is zero */
  .pmet{width:100%;background:#fff;border:1px solid var(--line);border-radius:9px;
    padding:6px 12px}
  .pmrow{display:grid;grid-template-columns:1fr auto 18px;align-items:center;gap:10px;
    padding:7px 0;border-bottom:1px solid var(--line2)}
  .pmrow:last-child{border-bottom:0}
  .pmk{font-size:11.5px;color:var(--ink3)}
  .pmv{font-size:12.5px;font-weight:730;color:var(--ink);font-variant-numeric:tabular-nums}
  .pmok{font-size:11px;color:var(--ok);text-align:right}
  .pmrow.bad{border-top:1px solid var(--line);margin-top:2px;padding-top:9px}
  .pmrow.bad .pmk{color:var(--ink2);font-weight:640}
  .pmrow.bad .pmv{color:var(--no);font-size:15px}
  .pmrow.bad .pmok{color:var(--ink4)}

  /* 3 · the line fell, and nothing says which change did it */
  .ptrend{width:100%}
  .ptrend svg{width:100%;height:78px;display:block;overflow:visible}
  .pbase{stroke:var(--line);stroke-width:1}
  .pline{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    vector-effect:non-scaling-stroke}
  .pq line{stroke:var(--no);stroke-width:1;stroke-dasharray:2 3;opacity:.75;
    vector-effect:non-scaling-stroke}
  .pqm{fill:#b04545;font-size:11px;font-weight:800;text-anchor:middle}
  .ptaxis{display:flex;justify-content:space-between;font-size:10px;color:var(--ink4);margin-top:6px}

  @media(prefers-reduced-motion:reduce){.prob,.prob:hover{transform:none}}
  @media(max-width:900px){.probs{grid-template-columns:1fr}
    .probart{height:auto}}

  /* ---- v2 "two ways in" fork, as full-width lanes ----
     Each route gets the whole page width: text left, live graphic right,
     "or" chip between. White lane = self-serve product, navy lane =
     hand-it-over service; the tone difference encodes the offer difference.
     Side-by-side cards were tried first and squeezed text, list, graphic and
     CTA into ~660px columns. The OPTION chips are blue-family on purpose -
     orange stays reserved for the three attention badges. */
  .fklane{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center;
    border-radius:18px;padding:40px 44px}
  .fklane.self{background:#fff;border:1px solid var(--line);
    box-shadow:0 16px 38px -20px rgba(6,58,92,.18)}
  .fklane.team{background:var(--navy);background-image:var(--gridw);
    box-shadow:0 16px 38px -20px rgba(6,58,92,.4)}
  .fkhead{display:flex;align-items:center;gap:13px;margin-bottom:20px;
    padding-bottom:18px;border-bottom:1px solid var(--line2)}
  .fklane.team .fkhead{border-bottom-color:rgba(255,255,255,.16)}
  .fkic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--blue-soft);
    display:flex;align-items:center;justify-content:center}
  .fkic svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .fklane.team .fkic{background:rgba(255,255,255,.12)}
  .fklane.team .fkic svg{stroke:#7ec6e8}
  .fkhead b{display:block;font-size:16.5px;font-weight:730;letter-spacing:-.02em;color:var(--ink)}
  .fkhead i{font-style:normal;font-size:12.5px;color:var(--ink4)}
  .fklane.team .fkhead b{color:#fff}
  .fklane.team .fkhead i{color:#a9c4d6}
  .fktag{margin-left:auto;flex:none;font-size:10.5px;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:var(--blue);background:var(--blue-soft);
    border-radius:100px;padding:5px 12px}
  .fklane.team .fktag{color:#7ec6e8;background:rgba(255,255,255,.1)}
  .fklane h3{font-size:23px;font-weight:730;letter-spacing:-.028em;line-height:1.2;margin-bottom:8px}
  .fklane .lntx > p{font-size:15px;color:var(--ink3);line-height:1.6}
  .fklane.team h3{color:#fff}
  .fklane.team .lntx > p{color:#a9c4d6}
  .fklane .pttick{margin-top:18px}
  .fklane .pttick li{font-size:14.5px}
  .fklane.team .pttick li{color:#cfe0ea}
  .fklane.team .pttick b{color:#fff}
  .fklane.team .pttick .ic{background:rgba(255,255,255,.12)}
  .fklane.team .pttick .ic svg{stroke:#7ec6e8}
  .fklane .ptact{margin-top:26px}
  .fklane.team .ptact .n{color:#a9c4d6}
  .fklane.team .ptact .n b{color:#fff}
  /* fork-as-tabs: the lane card IS the panel content, so the panel drops the
     old two-column grid; the option chip rides inside the segmented buttons */
  .ptpanel.fkp.on{display:block;max-width:none}
  .ptseg .fktag{margin-left:4px}
  .ptseg button[aria-selected="true"] .fktag{color:#fff;background:rgba(255,255,255,.16)}
  .tinted .ptseg .in{background:#fff}
  @media(max-width:600px){.ptseg .fktag{display:none}
    .ptseg button{padding:11px 14px;gap:8px}}
  .fkor{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);
    box-shadow:0 6px 18px -6px rgba(6,58,92,.25);display:flex;align-items:center;
    justify-content:center;font-size:12px;font-weight:770;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink3);margin:18px auto}
  @media(max-width:960px){
    .fklane{grid-template-columns:1fr;gap:26px;padding:30px 26px}}
  /* v2 bridge: white, since the managed card is the section's navy anchor */
  .ptbridge.lite{background:#fff;background-image:none;border:1px solid var(--line)}
  .ptbridge.lite p{color:var(--ink2)}
  .ptbridge.lite b{color:var(--ink)}

  /* ---- gradient ground system (body.grad - currently /v2 only) ----
     Replaces the dot grid with one vertical-fade language (option 1 of the
     /v2-bg round): the hero fades from a deeper blue into the tint that the
     logo band continues, and every tinted section fades white -> tint ->
     white, so bands melt into the page instead of being cut by hairlines.
     The .herostage envelope field is an independent layer and stays. Navy
     surfaces keep --gridw. Promoting v2 to the homepage means carrying the
     body class across. */
  /* Airier than the first pass: the blue crown is confined to the very top
     of the hero and everything else leans white (#f1f7fb mid rather than the
     full --tint). The wash loses its hairline borders like every other band -
     it was the last section still drawing seam lines. */
  .grad .hero{background:linear-gradient(180deg,#dfecf7 0%,#f0f6fa 52%,#f1f7fb 100%)}
  .grad .heroafter{background:#f1f7fb;background-image:none}
  .grad .mqwrap{background:#f1f7fb;background-image:none;border-bottom:0}
  .grad .lmqsec{background:#f1f7fb}
  .grad .tofade{background:linear-gradient(#f1f7fb,#fff)}
  .grad section.tinted{background:linear-gradient(180deg,#ffffff 0%,#f1f7fb 30%,#f1f7fb 70%,#ffffff 100%);
    background-image:linear-gradient(180deg,#ffffff 0%,#f1f7fb 30%,#f1f7fb 70%,#ffffff 100%);
    border-top:0;border-bottom:0}
  .grad .trust{background:#f1f7fb;background-image:none;border-bottom:0}
  .grad .blk.wash{background:radial-gradient(120% 90% at 50% 0%,#e2eef8 0%,#f2f7fb 46%,#ffffff 100%);
    border-top:0;border-bottom:0}
  /* Reviews marquee: fade the rows out at the viewport edges instead of
     cutting cards mid-word - same device as the logo rows. Scoped to .grad
     so the live homepage keeps its current edges until v2 is promoted. */
  .grad .rvmq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

  /* Developer docs (site/developers/, generated by tools/build-api.py).
     Reuses the KB hub vocabulary - .kbtile/.kbcard/.kbcat/.kbsearchwrap - for
     the area tiles, endpoint cards, grouping and search, so the docs and the
     knowledge base read as one system. Everything specific to the docs is
     .dv-prefixed. .dvpage wraps each page so inline <code> can be styled as
     a chip here without touching how <code> renders anywhere else. */
  .dvpage code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
    background:var(--blue-soft);color:var(--blue-dk);padding:1px 6px;border-radius:5px;white-space:nowrap}
  .dvpage h1 code{background:none;padding:0;color:inherit;font-size:.9em;letter-spacing:-.02em;white-space:normal}
  .dvpage .shead h2 code{background:none;padding:0;color:inherit;font-size:.92em}
  .dvpage .kbcathead h2 code{font-size:.85em}
  /* grid items default to min-width:auto, so a long sample line widens the
     column past the wrap instead of scrolling inside .code */
  .dvpage .codepair>div{min-width:0}
  .dvcard h3 code{background:none;padding:0;color:var(--ink);font-size:14px;letter-spacing:0}
  .dvbadges{display:inline-flex;gap:5px;margin:0 0 9px;vertical-align:middle}
  .dvbadges.lg{margin:0}
  .dvbadges.lg .dvb{font-size:11.5px;padding:5px 8px}
  .dvb{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;
    font-weight:700;letter-spacing:.04em;line-height:1;padding:4px 7px;border-radius:5px;
    background:var(--paper);color:var(--ink3);border:1px solid var(--line)}
  .dvb.m{background:var(--blue-soft);color:var(--blue);border-color:transparent}
  .dvb.read{background:var(--ok-soft);color:var(--ok);border-color:transparent}
  .dvb.write{background:var(--tint);color:var(--ink2);border-color:var(--tline)}
  .dvb.destructive{background:var(--no-soft);color:var(--no);border-color:transparent}
  .dvkey{font-size:13px;color:var(--ink3);margin-bottom:30px;display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;line-height:1.6}
  .kbsub{margin-bottom:26px}
  .kbsub[hidden]{display:none}
  .dvsubh{font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);margin:0 0 12px}
  .dvtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:#fff;
    border:1px solid var(--tline);border-radius:16px;padding:14px;max-width:1160px;margin:0 auto}
  .dvnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px auto 0;max-width:1160px}
  .dvmeta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13.5px;color:var(--ink3);margin-top:12px}
  .dvdesc p{font-size:16px;line-height:1.7;color:var(--ink2);margin-bottom:12px}
  .dvh{font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);margin:34px 0 12px}
  .dvnone,.dvmeth{font-size:14.5px;color:var(--ink3);line-height:1.6}
  .dvmeth{margin-top:12px}
  .dvresp{justify-content:flex-start;margin-bottom:14px}
  .dvpanel{max-width:900px;margin:0 auto}
  .lt.dvargs td.w{width:22%}
  @media(max-width:900px){.dvtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:760px){.lt.dvargs td[data-c]{padding-top:8px}
    .lt.dvargs td[data-c]:before{content:attr(data-c);display:block;font-size:10.5px;font-weight:700;
      letter-spacing:.07em;text-transform:uppercase;color:var(--ink4);margin-bottom:2px}}
  @media(max-width:700px){.dvnext{grid-template-columns:1fr}}
  @media(max-width:560px){.dvtiles{grid-template-columns:1fr}}