:root{
  --brand:#7C4EDF; --brand-600:#633ABB; --brand-700:#4C2998; --brand-800:#392070; --brand-900:#291B47;
  --brand-50:#F2EDFC; --brand-100:#E5DCFA; --brand-300:#B398ED;
  --canvas:#F0F0F7; --surface:#FFFFFF; --border:#DCDEEB;
  --muted:#5D607E; --body:#3A4258; --heading:#171B32;
  --amber:var(--amber-100); --amber-ink:var(--amber-800);
  --r-sm:6px 6px 0 6px; --r-md:10px 10px 0 10px; --r-lg:22px 22px 0 22px;
  --r-pill:999px 999px 0 999px;

  /* dark-surface neutrals — added Aug 28 2026, replaces 5 ad-hoc values */
  --on-dark-heading:#F6F4FD; --on-dark-body:#DCD6EF; --on-dark-muted:#A099B6;
  /* semantic ramps — added Aug 28 2026 */
  --amber-50:#FDF7F0; --amber-100:#FAECDC; --amber-500:#D97706; --amber-600:#B46308;
  --amber-700:#8F500A; --amber-800:#6A3C0C; --amber-900:#45290F;
  --red-50:#FCF3F5; --red-500:#D33B58; --red-600:#AF324B; --red-700:#8B293F;
  --green-50:#F0F8F5; --green-500:#0C855D; --green-600:#09694A; --green-700:#0C5942;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
main .wrap,.doc-title .wrap{max-width:820px}
a{color:var(--brand-700)}
a:focus-visible,.head-cta:focus-visible,.head-login:focus-visible{outline:3px solid var(--brand-300);outline-offset:3px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:var(--surface);color:var(--brand-700);
  font-weight:600;padding:12px 20px;border-radius:0 0 var(--r-md) 0;text-decoration:none}
.skip:focus{left:0}

/* site header — the same bar as the rest of the site, solid from the start
   because there is no hero here for it to sit on. Sticky so the way home is
   never more than a glance away in a long document. */
.site-head{position:sticky;top:0;z-index:30;background:var(--surface);
  border-bottom:1px solid var(--border);padding:12px 0}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lockup{display:flex;align-items:center;text-decoration:none;min-height:44px}


.head-nav{display:flex;align-items:center;gap:8px}
.head-login,.head-cta{display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;font-size:14.5px;font-weight:500;border-radius:var(--r-md)}
.head-login{color:var(--muted);padding:9px 14px;transition:color .15s ease,background .15s ease}
.head-login:hover{color:var(--heading);background:var(--brand-50)}
.head-cta{background:var(--brand);color:#fff;padding:9px 18px;transition:background .15s ease}
.head-cta:hover{background:var(--brand-600)}
@media (max-width:420px){.head-login{padding:9px 10px}.head-cta{padding:9px 14px}}
/* On phones the header button reads "Start free". The full label wrapped to two
   lines and pushed the header box to 115px at 390 and 138px at 320.
   ⚠️ The space before "trial" is a literal   and has to stay one: .head-cta is
   display:inline-flex, so the text node and the <span> are separate FLEX ITEMS, and
   whitespace between flex items is stripped. A plain space renders "Start freetrial". */
@media (max-width:720px){ .cta-tail{display:none} }

/* document title band */
.doc-title{background:linear-gradient(168deg,#291B47 0%,#392070 60%,#4C2998 100%);
  color:#D0BFF5;padding:52px 0 46px}
.doc-title h1{color:#fff;font-size:clamp(1.9rem,4.4vw,2.6rem);font-weight:700;
  letter-spacing:-.03em;margin:0 0 12px;line-height:1.15;text-wrap:balance}
.doc-title .meta{font-size:.92rem;color:var(--on-dark-body);margin:0}

main{padding:44px 0 72px}
h2{color:var(--heading);font-size:1.22rem;font-weight:700;letter-spacing:-.015em;
  margin:38px 0 12px;line-height:1.3;scroll-margin-top:88px}
h2:first-of-type{margin-top:0}
h3{color:var(--heading);font-size:1.02rem;font-weight:600;margin:24px 0 8px}
p{margin:0 0 1.05em}
ul{margin:0 0 1.05em;padding-left:22px}
li{margin-bottom:.5em}
strong{color:var(--heading);font-weight:600}
.lede{font-size:1.06rem;color:var(--body);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:22px 24px;margin-bottom:36px}
.note{background:var(--amber);color:var(--amber-ink);border-radius:var(--r-md);padding:16px 18px;margin:18px 0}
.note strong{color:var(--amber-900)}
.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px 24px;margin-bottom:36px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
@media (max-width:640px){.toc ol{columns:1}}
.toc li{margin-bottom:.35em;font-size:.95rem}

/* other-documents strip, so each policy points at its siblings */
.siblings{display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 0;padding-top:28px;
  border-top:1px solid var(--border)}
.siblings a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  text-decoration:none;font-size:.94rem;font-weight:500;color:var(--brand-700)}
.siblings a:hover{background:var(--brand-50);border-color:var(--brand-300)}

/* ── footer ──
   Three columns rather than a right-aligned stack: the brand and its category
   sentence get the space they were wasting, and contact and legal become
   labelled groups instead of six equal-weight links in a row. The entity and
   copyright drop to their own rule-separated line, where legal furniture
   belongs. */
footer{background:#171B32;color:var(--on-dark-muted);padding:56px 0 32px;font-size:14.5px}
/* Four children since the Help column was added Aug 29. Both stylesheets carry
   this rule separately, which is the divergence documented in the README: one
   footer change, two files to edit. */
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px 32px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;gap:32px}}
.foot-brand .lockup{margin-bottom:16px}
.foot-tag{color:var(--on-dark-body);font-size:1.02rem;line-height:1.45;max-width:24ch;margin:0}
.foot-since{color:var(--on-dark-muted);font-size:13.5px;line-height:1.6;margin:12px 0 0}
.foot-col h2{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark-muted);margin:0 0 14px;line-height:1;
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:10px}
.foot-col a{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--on-dark-body);text-decoration:none;font-size:14.5px;transition:color .15s ease;
}
/* the rule sits on the label only, so it never runs under the icon */
.foot-col a span{border-bottom:1px solid transparent;transition:border-color .15s ease}
.foot-col a:hover{color:#fff}
.foot-col a:hover span{border-bottom-color:rgba(255,255,255,.5)}
.foot-col a svg{
  flex:none;width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.75;
}
.foot-col a:hover svg{opacity:1}
/* the phone number is the one thing a phone company should not make small */
.foot-col a.foot-phone{font-size:15.5px;font-weight:600;color:#E5DCFA}
.foot-col a.foot-phone svg{opacity:.9}
/* One string rather than two spans and a middot: the period in "Inc." and the
   sidebearing on "©" make a separator between them impossible to optically
   centre, and the standard copyright form needs no separator at all. */
/* ── industry links in the footer ──
   Generated from src/verticals.json by build.py. These are the ONLY internal links
   to /for/<slug>/ anywhere on the site: without them the vertical pages are orphans
   that nothing links to, which is bad for crawling and worse for people. */
.foot-verticals{margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.09)}
.foot-verticals h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  margin:0 0 14px;font-weight:600;
  /* the base h2 rule caps at 22ch, which wraps this two-word label for no reason */
  max-width:none}
.foot-verticals ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:10px 26px}
@media (max-width:820px){.foot-verticals ul{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.foot-verticals ul{grid-template-columns:1fr}}
.foot-verticals a{color:var(--on-dark-muted);text-decoration:none}
.foot-verticals a:hover{color:#fff;text-decoration:underline}
.foot-base{
  margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);
  color:var(--on-dark-muted);font-size:13.5px;
}

/* lockup — real wordmark artwork, colour follows currentColor (Aug 28 2026) */
.lockup{color:#fff}
/* pages with no hero render the header solid from the start, so the
   wordmark must be dark there — .is-stuck never fires without a hero. */
.site-head.solid .lockup{color:var(--heading)}
.lockup .lk{height:30px;width:auto;display:block}
.lockup .lk-txt{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.site-head.is-stuck .lockup{color:var(--heading)}
footer .lockup{color:#fff}
footer .lockup .lk{height:26px;width:auto}

/* ══ HIGH CONTRAST MODE (Aug 28 2026) ═══════════════════════════════════
   A hand-built palette swap, not an "accessibility overlay" — no third-party
   script, no compliance claim, just a switch that raises everything to AAA.
   Engages three ways: the toggle, the OS `prefers-contrast: more` setting,
   and Windows High Contrast via `forced-colors`.
   Brand purple survives as #2E1065 (15.2:1) rather than collapsing to black,
   so the page still reads as Slingshot. The corner grammar is untouched. */
:root[data-hc="on"]{
  --canvas:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF;
  --n-0:#FFFFFF; --n-25:#FFFFFF; --n-50:#FFFFFF; --n-100:#FFFFFF;
  --border:#000000; --n-200:#000000;
  --heading:#000000; --body:#000000; --muted:#1C1C1C;
  --n-400:#1C1C1C; --n-450:#1C1C1C; --n-500:#1C1C1C; --n-600:#000000; --n-700:#000000; --n-900:#000000;
  --brand:#2E1065; --brand-500:#2E1065; --brand-600:#1F0A47; --brand-700:#1F0A47;
  --brand-800:#000000; --brand-900:#000000;
  --brand-50:#FFFFFF; --brand-100:#FFFFFF; --brand-200:#FFFFFF; --brand-300:#2E1065; --brand-400:#2E1065;
  --on-dark-heading:#FFFFFF; --on-dark-body:#FFFFFF; --on-dark-muted:#FFFFFF;
  --green:#04452F; --green-500:#04452F; --green-600:#04452F; --green-700:#04452F; --green-50:#FFFFFF;
  --amber-500:#5C3400; --amber-600:#5C3400; --amber-700:#5C3400; --amber-800:#5C3400; --amber-900:#5C3400; --amber-100:#FFFFFF; --amber-50:#FFFFFF;
  --red-500:#7A0B23; --red-600:#7A0B23; --red-700:#7A0B23; --red-50:#FFFFFF;
}
/* kill decorative gradients and glows — they cost legibility and buy nothing here */
:root[data-hc="on"] .hero,
:root[data-hc="on"] .final>.wrap,
:root[data-hc="on"] .why>.wrap{background:#000000 !important;color:#FFFFFF}
:root[data-hc="on"] .hero::after{display:none}
:root[data-hc="on"] footer{background:#000000;color:#FFFFFF}
:root[data-hc="on"] *{box-shadow:none !important;text-shadow:none !important}
/* borders become real, not hairlines */
:root[data-hc="on"] .bcard,:root[data-hc="on"] .plan,:root[data-hc="on"] .addons,
:root[data-hc="on"] .table-scroll,:root[data-hc="on"] .included>.wrap,
:root[data-hc="on"] .btn,:root[data-hc="on"] .btn-plan,
:root[data-hc="on"] .head-cta,:root[data-hc="on"] input,:root[data-hc="on"] select{
  border:2px solid currentColor}
/* THE bit most high-contrast modes forget: links must not rely on colour */
:root[data-hc="on"] a:not(.btn):not(.btn-plan):not(.lockup):not(.head-cta):not(.hc-float){
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
/* buttons: maximum separation */
:root[data-hc="on"] .btn-primary,:root[data-hc="on"] .btn-plan.solid,
:root[data-hc="on"] .head-cta{background:#000000;color:#FFFFFF;border-color:#000000}
:root[data-hc="on"] .btn-hc{background:#FFFFFF;color:#000000;border:2px solid #FFFFFF}
/* a filled button on a black panel must invert, or it is a black shape on a
   black ground held together only by its text — 1:1 edge contrast. */
:root[data-hc="on"] .hero .btn-primary,
:root[data-hc="on"] .final .btn-primary,
:root[data-hc="on"] .final .btn-plan,
:root[data-hc="on"] .why .btn-primary,
:root[data-hc="on"] footer .btn,
:root[data-hc="on"] footer .btn-plan{
  background:#FFFFFF;color:#000000;border:2px solid #FFFFFF}
:root[data-hc="on"] .btn-ghost,:root[data-hc="on"] .btn-plan.outline{background:transparent;color:currentColor}
:root[data-hc="on"] .site-head.is-float{background:#000000;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-hc="on"] .site-head.is-stuck{background:#FFFFFF;border-bottom:2px solid #000000}
/* focus has to be unmissable */
:root[data-hc="on"] :focus-visible{outline:3px solid currentColor;outline-offset:3px}


/* honour the OS setting without anyone touching the button */
@media (prefers-contrast: more){
  :root:not([data-hc="off"]) a:not(.btn):not(.btn-plan):not(.lockup):not(.head-cta):not(.hc-float){
    text-decoration:underline;text-underline-offset:3px}
  :root:not([data-hc="off"]) :focus-visible{outline:3px solid currentColor;outline-offset:3px}
}
/* Windows High Contrast: hand rendering to the OS palette entirely */
@media (forced-colors: active){
  .hc-float{display:none}
  .btn,.btn-plan,.head-cta{border:2px solid ButtonText}
  a{text-decoration:underline}
  :focus-visible{outline:3px solid Highlight;outline-offset:3px}
}

/* ── high-contrast toggle ───────────────────────────────────────────────
   Floating, bottom-LEFT, and always labelled.

   The overlay-widget resemblance people react to is specifically a
   *circular, icon-only, bottom-right* button — that is the accessiBe /
   UserWay signature. A labelled rectangular pill on the left reads as a
   site preference, not a bolted-on compliance widget. So the label and the
   left position are doing the work; the header placement was solving a
   problem they already solved, at the cost of sitting beside the CTA. */
.hc-float{
  position:fixed;left:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--font);font-size:11.5px;font-weight:600;line-height:1;
  letter-spacing:.02em;
  padding:9px 13px;min-height:44px;
  background:var(--brand-900);color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-md);
  box-shadow:0 6px 20px rgba(41,27,71,.3)}
.hc-float svg{width:15px;height:15px;flex:none}
.hc-float:hover{background:var(--brand-700);border-color:rgba(255,255,255,.45)}
.hc-float:focus-visible{outline:3px solid var(--brand-300);outline-offset:3px}
:root[data-hc="on"] .hc-float{background:#000;color:#fff;border:2px solid #fff}

@media (max-width:720px){
  .hc-float{left:14px;bottom:calc(env(safe-area-inset-bottom) + 16px);
    transition:bottom .22s cubic-bezier(.2,.7,.3,1);
    /* Icon only on phones: at full width the pill lands on body text. */
    padding:0;width:36px;min-width:36px;height:36px;min-height:36px;
    justify-content:center;gap:0}
  .hc-float span{display:none}
  .hc-float svg{width:18px;height:18px}
  /* Pill is 36px, TARGET stays 44px — this is the one control whose users are most
     likely to have motor or vision impairment, so it keeps WCAG 2.5.5 Enhanced.
     ⚠️ -6px not -4px: an absolutely positioned pseudo-element is offset from the
     PADDING box, so the 1px border eats the extension. At -4px the real target was
     42px and taps just outside the pill hit whatever sat underneath. */
  .hc-float::after{content:"";position:absolute;inset:-6px}
  /* clear the 73px sticky CTA bar when it is on — :has() rather than a sibling
     combinator so this keeps working wherever the button sits in the DOM */
  body:has(.sticky-cta.is-on) .hc-float{bottom:calc(env(safe-area-inset-bottom) + 86px)}
}
@media (prefers-reduced-motion:reduce){ .hc-float{transition:none} }
@media print{ .hc-float{display:none} }
/* The toggle is fixed to the bottom-left of the VIEWPORT, so at the end of the
   page it lands on whatever the footer ends with — the copyright line, at every
   width. Clearing it vertically is width-independent; nudging the text sideways
   would only fix one breakpoint and would collide again once it wraps. */
footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
/* Sized per breakpoint, NOT per sticky-bar state. A :has() version caused a
   feedback loop: scrolling to the bottom turned the bar on, which grew the
   footer, which meant you were no longer at the bottom. Page height must not
   depend on scroll position. Under 720px the toggle can ride to 86px to clear
   the bar, so reserve 86 + 44 (toggle) + 24 (gap). */
@media (max-width:720px){
  footer{padding-bottom:calc(154px + env(safe-area-inset-bottom))}
}


/* Under 700px the comparison table stacks into cards that carry their own
   border, and the base stylesheet zeroes the container's. The blanket HC
   border rule outranked that and drew a square box around rounded cards. */
@media (max-width:700px){
  :root[data-hc="on"] .table-scroll{border:0}
}

/* Chatwoot bubble: clear the 73px mobile sticky CTA bar when it is on, same as .hc-float. Phone widths only:
   the bar is hidden above 720px but still gets .is-on, which lifted the bubble on desktop.
   !important because the widget ships its own fixed bottom offset. */
@media (max-width:720px){
  body:has(.sticky-cta.is-on) .woot-widget-bubble{bottom:calc(env(safe-area-inset-bottom) + 86px) !important}
  body:has(.sticky-cta.is-on) .woot-widget-holder{bottom:calc(env(safe-area-inset-bottom) + 150px) !important}
}