/* SureSquare marketing site styles. Brand tokens live in :root; dark mode only swaps tokens.
   Values follow the SureSquare design system (Open Corner mark, rev 2.2). */
/* Self-hosted fonts (latin subset of the Google Fonts files). Served from our own domain so the page
   doesn't wait on fonts.googleapis.com; the three used above the fold are preloaded in each page's <head>. */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-condensed-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Arial sized to Barlow Condensed's width, so headings wrap the same way before the web font arrives (no layout jump).
   Heading max-widths are in em, not ch: ch follows whichever font is showing, so it would change on the swap.
   (14ch, 20ch and 22ch of Barlow Condensed = 6.34em, 9.06em and 9.97em.) */
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");font-weight:600 700;size-adjust:67.5%;ascent-override:148%;descent-override:29.6%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");font-weight:400 500;size-adjust:67.5%;ascent-override:148%;descent-override:29.6%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:100%;ascent-override:102.7%;descent-override:27.6%;line-gap-override:0%}
:root{
  --navy:#0e256b; --navy-2:#16307f; --orange:#f06503; --orange-ink:#0b162f; --orange-tint:#fdece0;
  --canvas:#f2f5fb; --surface:#ffffff; --ink:#0b162f; --muted:#47557a; --line:#d7e0f0; --line-strong:#9aa8c4;
  --grid:rgba(14,37,107,.07); --plan-fill:#e9eff9; --plan-stroke:#0e256b; --chip:#e9eff9;
  --hero-bg:#0e256b; --hero-ink:#ffffff; --hero-muted:#b9c7e6;
  --heading:#0e256b; --btn2-bg:#0e256b; --btn2-ink:#ffffff; --btn2-hover:#16307f;
  --good:#0b6e46; --bad:#b3261e;
  --display:"Barlow Condensed","Barlow Condensed Fallback","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","IBM Plex Sans Fallback","Helvetica Neue",system-ui,Arial,sans-serif;
  --mono:"IBM Plex Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --track:.04em; --r-sm:4px; --r-md:6px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --orange:#ff8534; --orange-tint:rgba(255,133,52,.18);
  --canvas:#080d1a; --surface:#0f1729; --ink:#e6ecfa; --muted:#9fadcd; --line:#22304f; --line-strong:#3b4a6e;
  --grid:rgba(146,176,238,.07); --plan-fill:#141e35; --plan-stroke:#92b0ee; --chip:#141e35;
  --hero-bg:#16254d; --hero-muted:#9fadcd; --good:#45bd85; --bad:#f07068; --navy-2:#92b0ee;
  --heading:#e6ecfa; --btn2-bg:#92b0ee; --btn2-ink:#0b162f; --btn2-hover:#b3c8f3;
}}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;background:var(--canvas);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);line-height:1.02;text-transform:uppercase;letter-spacing:var(--track);text-wrap:balance;margin:0}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:700}
h2{font-size:clamp(1.9rem,3.8vw,2.8rem);font-weight:700}
h3{font-size:1.3rem;font-weight:600}
.h3{font-size:1.3rem;font-weight:600}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--orange);color:var(--orange-ink);padding:8px 12px;z-index:10}
.skip:focus{left:8px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.lede{color:var(--muted);max-width:60ch;font-size:1.1rem}
.stack{display:flex;flex-direction:column;gap:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1.1rem/1 var(--display);text-transform:uppercase;letter-spacing:var(--track);padding:.95rem 1.3rem;border-radius:var(--r-sm);border:2px solid transparent;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--orange);color:var(--orange-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:currentColor;background:transparent;color:inherit}
.btn[disabled]{opacity:.6;cursor:progress}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* header */
.site-head{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding-block:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{display:block;height:32px;width:auto}
.nav{display:flex;gap:4px 20px;align-items:center;flex-wrap:wrap;font-weight:600}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav .btn{padding:.6rem .95rem;color:var(--orange-ink)}

.band{padding-block:72px}
.band + .band{border-top:1px solid var(--line)}

/* hero */
.hero{background:var(--hero-bg);color:var(--hero-ink);padding-block:64px 72px;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero .lede{color:var(--hero-muted)}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.beta-tag{align-self:flex-start;font:500 .8rem var(--mono);letter-spacing:.06em;background:rgba(255,133,52,.16);color:#ff8534;padding:6px 10px;border-radius:4px;border:1px solid rgba(255,133,52,.45)}
.trust{font:.85rem var(--mono);color:var(--hero-muted);display:flex;gap:6px 16px;flex-wrap:wrap}

/* two-service hero (homepage) */
.hero-split{background:var(--canvas);color:var(--ink);border-bottom:1px solid var(--line);padding-block:56px 64px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px}
.hero-split .wrap{display:block}
.hero-kicker{font:500 .85rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero-split h1{color:var(--heading);margin-top:10px;max-width:9.97em}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.svc{border-radius:var(--r-md);padding:32px;display:flex;flex-direction:column;gap:14px}
.svc-takeoff{background:var(--hero-bg);color:#fff}
.svc-crm{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.svc-tag{font:600 .78rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.svc-takeoff .svc-tag{color:#b9c7e6}
.svc-crm .svc-tag{color:var(--heading)}
.svc h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.svc-crm h2{color:var(--heading)}
.svc > p:not(.svc-tag){font-size:1.05rem}
.svc-takeoff > p:not(.svc-tag){color:#dfe6f6}
.svc-crm > p:not(.svc-tag){color:var(--muted)}
.svc .svc-price{font:500 .95rem var(--mono);font-variant-numeric:tabular-nums}
.svc-takeoff .svc-price strong{color:#ff8534;font-weight:600}
.svc-crm .svc-price strong{color:var(--ink);font-weight:600}
.svc-ctas{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.svc-link{font-weight:600;text-underline-offset:3px}
.btn-navy{background:var(--btn2-bg);color:var(--btn2-ink)}
.btn-navy:hover{background:var(--btn2-hover)}
.svc-note{font:.85rem var(--mono);color:var(--muted);margin-top:18px}

/* video hero (homepage): copy on the left, silent looping animation on the right */
.hero-video{padding-block:56px 64px}
.hero-video .hero-kicker{color:var(--hero-muted)}
.hero-video .wrap{grid-template-columns:1fr 1.25fr;gap:40px}
.hero-video h1{max-width:6.34em;font-size:clamp(2.5rem,4.8vw,3.8rem)}
.hero-video .btn-ghost{color:#fff}
.hero-media{margin:0;position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#f2f5fb;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.hero-media video{display:block;width:100%;height:100%;object-fit:cover}
.vid-toggle{position:absolute;right:8px;top:8px;width:36px;height:36px;border:0;border-radius:var(--r-sm);background:rgba(11,22,47,.72);cursor:pointer;display:grid;place-items:center}
.vid-toggle span{width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.vid-toggle[data-state="paused"] span{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.svc-band{padding-block:48px 64px}
.svc-band .svc-grid{margin-top:0}

/* takeoff sheet illustration */
.sheet{margin:0;background:var(--surface);color:var(--ink);border-radius:var(--r-md);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);overflow:hidden}
.sheet-head{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font:500 .78rem var(--mono);color:var(--muted);flex-wrap:wrap}
.sheet-plan{background:var(--plan-fill);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px;padding:12px}
.sheet-plan svg{display:block;width:100%;height:auto}
.plan-stroke{stroke:var(--plan-stroke);fill:none;stroke-width:2}
.plan-face{fill:var(--surface);stroke:var(--plan-stroke);stroke-width:2}
.plan-ridge{stroke:var(--orange);stroke-width:3.5}
.plan-label{fill:var(--ink);font:500 11px var(--mono)}
.plan-pitch{fill:var(--orange);font:600 11px var(--mono)}
table.qty{width:100%;border-collapse:collapse;font:.85rem var(--mono);font-variant-numeric:tabular-nums}
table.qty td{padding:7px 16px;border-top:1px solid var(--line)}
table.qty td:last-child{text-align:right;font-weight:500}
table.qty tr.total td{background:var(--chip);font-weight:600}
.sheet figcaption{padding:8px 16px;font:.72rem var(--mono);color:var(--muted);border-top:1px solid var(--line)}

/* features */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
.feat{display:flex;flex-direction:column;gap:10px}
.feat .spec{font:.8rem var(--mono);color:var(--muted)}
.feat-icon{width:44px;height:44px;border-radius:var(--r-md);background:var(--chip);display:grid;place-items:center}
.feat-icon svg{width:24px;height:24px;stroke:var(--navy-2);fill:none;stroke-width:1.8}
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.step{padding:26px;display:flex;flex-direction:column;gap:10px}
.step + .step{border-left:1px solid var(--line)}
.step-n{font:600 .8rem var(--mono);color:var(--orange)}

/* products */
.products{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.product{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;display:flex;flex-direction:column;gap:14px}
.product.is-new{border-color:var(--orange)}
.pill{align-self:flex-start;font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:4px;background:var(--chip);color:var(--navy-2)}
.pill.new{background:var(--orange);color:var(--orange-ink)}
.product ul{margin:0;padding-left:1.1rem;color:var(--muted)}
.product .btn{align-self:flex-start;margin-top:auto}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.checks li{display:flex;gap:10px}
.checks li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;background:var(--orange);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:28px}
.panel li{color:var(--muted)}
.media{border-radius:var(--r-md);overflow:hidden;background:var(--plan-fill);border:1px solid var(--line)}

.cta-band{background:var(--hero-bg);color:var(--hero-ink);padding-block:52px;border-top:4px solid var(--orange)}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band .btn{background:var(--orange);color:var(--orange-ink)}
.cta-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cta-link{color:var(--hero-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* CRM board */
.board-wrap{overflow-x:auto;margin-top:36px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.board{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));min-width:980px}
.col{padding:14px;display:flex;flex-direction:column;gap:10px}
.col + .col{border-left:1px solid var(--line)}
.col-h{display:flex;justify-content:space-between;font:600 .78rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.card{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:.92rem}
.card b{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.02em}
.card .meta{display:flex;justify-content:space-between;gap:8px;font:.76rem var(--mono);color:var(--muted)}
.card .tag{align-self:flex-start;font:500 .7rem var(--mono);padding:2px 6px;border-radius:3px;background:var(--chip);color:var(--navy-2)}
.card .tag.warn{background:var(--orange-tint);color:var(--orange)}
.example-note{font:.78rem var(--mono);color:var(--muted);margin-top:10px}

/* CRM page: feature modules, close-ups, connections */
.offer-line{font:500 .95rem var(--mono);color:var(--muted);margin-top:16px}
.offer-line strong{color:var(--ink)}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.mod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px}
.mod h3{color:var(--heading)}
.mod ul{margin:12px 0 0;padding-left:1.1rem;color:var(--muted);font-size:.97rem;display:grid;gap:6px}
.dive{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;margin-top:48px}
.dive + .dive{padding-top:48px;border-top:1px solid var(--line)}
.dive:nth-of-type(even) .dive-copy{order:2}
.dive-copy{display:flex;flex-direction:column;gap:14px}
.dive-copy h3{font-size:clamp(1.5rem,2.6vw,2rem);color:var(--heading)}
.dive-copy p{color:var(--muted)}
.mock{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.mock-head{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font:600 .78rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mock figcaption{padding:8px 16px;font:.72rem var(--mono);color:var(--muted);border-top:1px solid var(--line)}
.mock-2{display:grid;grid-template-columns:1fr 1fr}
.mock-2 figcaption{grid-column:1/-1}
.mock-pane + .mock-pane{border-left:1px solid var(--line)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:500 .8rem var(--mono);background:var(--chip);color:var(--ink);padding:6px 10px;border-radius:var(--r-sm)}
.chips-lg{margin-top:16px}
.chips-lg li{font-size:.88rem;padding:8px 12px}
.integ{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.integ-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;gap:4px}
.integ-item b{font:600 1.25rem var(--display);text-transform:uppercase;letter-spacing:var(--track);color:var(--heading)}
.integ-item span{font-size:.92rem;line-height:1.4;color:var(--muted)}
.integ-tag{align-self:flex-start;margin-top:6px;font:600 .7rem var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border-radius:3px;background:var(--orange-tint);color:var(--orange)}
.cmp-key{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.92rem;color:var(--muted)}
.cmp-key li{display:flex;align-items:center;gap:8px}
.mk{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font:700 .85rem/1 var(--body)}
.mk-y{background:var(--good);color:#fff}
.mk-n{color:var(--line-strong);font-weight:400}
.mk-p{width:14px;height:14px;margin:5px;border:3px solid var(--orange);background:linear-gradient(90deg,var(--orange) 50%,transparent 50%)}
.cmp-wrap{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.cmp{width:100%;border-collapse:collapse;font-size:.95rem;table-layout:fixed}
.cmp th,.cmp td{padding:14px 12px;border-top:1px solid var(--line);vertical-align:middle}
.cmp thead th{border-top:0;font:600 1rem/1.15 var(--display);text-transform:uppercase;letter-spacing:var(--track);color:var(--heading);text-align:center;background:var(--surface);padding-block:18px}
.cmp thead th:first-child{text-align:left;width:32%;font:600 .75rem var(--mono);letter-spacing:.08em;color:var(--muted)}
.cmp thead th.us{background:var(--navy);color:#fff}
.cmp tbody th[scope="row"]{text-align:left;font-weight:600;color:var(--ink);line-height:1.35}
.cmp td{text-align:center}
.cmp td.us-col{background:var(--chip)}
.cmp tbody tr:not(.grp):hover th,.cmp tbody tr:not(.grp):hover td{background:var(--orange-tint)}
.cmp tr.grp th{background:var(--canvas);font:600 .75rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding-block:10px;text-align:left}
.cmp td .mk{vertical-align:middle}
.cmp td.c-p{font-size:.85rem;line-height:1.3;color:var(--muted)}
.cmp td.c-p .mk-p{display:block;margin:0 auto 6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp-note{margin-top:12px;max-width:80ch}
@media (max-width:860px){
  .cmp-wrap{border:0;background:transparent;overflow:visible}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{display:none}
  .cmp tr.grp th{background:transparent;padding:22px 0 8px;border:0}
  .cmp tbody tr:not(.grp){background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden}
  .cmp tbody th[scope="row"]{border:0;padding:14px 16px 10px;font-size:1.02rem}
  .cmp td{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:right;padding:9px 16px}
  .cmp td::before{content:attr(data-label);font-weight:500;color:var(--ink);text-align:left}
  .cmp td.us-col::before{font-weight:700}
  .cmp td.c-p{flex-wrap:nowrap}
  .cmp td.c-p .mk-p{display:inline-block;margin:0 0 0 auto;order:2}
  .cmp td.c-p .ptxt{order:1;margin-left:auto}
  .cmp tbody tr:not(.grp):hover th,.cmp tbody tr:not(.grp):hover td{background:inherit}
  .cmp td.us-col{background:var(--chip)}
}
.integ-move{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--navy-2);border-radius:var(--r-sm);padding:14px 18px;color:var(--muted)}
.integ-move b{color:var(--ink)}
.cta-sub{color:var(--hero-muted);margin-top:8px}

/* pricing */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);padding:4px;background:var(--surface);margin-top:28px;flex-wrap:wrap}
.seg button{font:600 1.05rem var(--display);text-transform:uppercase;letter-spacing:var(--track);border:0;background:transparent;color:var(--muted);padding:.6rem 1rem;border-radius:3px;cursor:pointer}
.seg button[aria-selected="true"]{background:var(--navy);color:#fff}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px;display:flex;flex-direction:column;gap:14px}
.tier.featured{border:2px solid var(--orange)}
.price{font:600 2.3rem var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.price small{font:500 .85rem var(--mono);color:var(--muted);margin-left:4px}
.from{font:.78rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.tier .btn{margin-top:auto}
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.addon{border:1px dashed var(--line);border-radius:var(--r-md);padding:14px;font-size:.95rem;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.addon .mono{color:var(--ink);font-weight:600}
.prices{display:grid;grid-template-columns:1fr 1fr;margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.prices > div{padding:10px 14px}
.prices > div + div{border-left:1px solid var(--line)}
.prices dt{font:.72rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.prices dd{margin:2px 0 0}
.prices .price{font-size:2rem}
.promo{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--r-sm);padding:14px 18px;max-width:760px}
.promo p{margin:0;color:var(--muted)}
.promo strong{color:var(--ink)}
.faq{margin-top:48px;display:grid;gap:10px;max-width:760px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--muted);margin-top:8px}
.crm-plan{background:var(--surface);border:2px dashed var(--orange);border-radius:var(--r-md);padding:32px;margin-top:28px;display:grid;gap:14px;max-width:760px}
.crm-pricing{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;align-items:stretch}
.crm-pricing .crm-plan{margin-top:0;align-content:start}
.crm-plan .pill{justify-self:start}

/* form */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label,.field legend{font-weight:600;font-size:.95rem}
.field input,.field select{font:inherit;color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .8rem;width:100%}
.field input[aria-invalid="true"]{border-color:var(--bad)}
fieldset{border:0;padding:0;margin:0;min-width:0}
.opts{display:grid;gap:8px;margin-top:6px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--canvas);font-weight:400;cursor:pointer}
.field .opt input{flex:none;width:18px;height:18px;margin:4px 0 0;padding:0;accent-color:var(--orange)}
.opt small{display:block;color:var(--muted)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{border-radius:var(--r-sm);padding:12px 14px;font-weight:600}
.form-msg.ok{border:1px solid var(--good);color:var(--good)}
.form-msg.err{border:1px solid var(--bad);color:var(--bad)}

/* legal */
.doc{max-width:760px;margin:0 auto;padding-block:56px 72px}
.doc h1{font-size:clamp(2rem,5vw,3rem)}
.doc h2{font-size:1.45rem;margin-top:40px}
.doc h3{font-size:1.1rem;margin-top:22px}
.doc p,.doc ul{margin:12px 0 0}
.doc li{margin-top:4px}
.doc .meta{font:.85rem var(--mono);color:var(--muted);margin-top:12px}
.callout{background:var(--chip);border-left:4px solid var(--orange);border-radius:var(--r-sm);padding:14px 18px;margin-top:24px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;margin-top:24px;font-size:.95rem}
.toc ol{margin:8px 0 0;padding-left:1.2rem;columns:2;column-gap:28px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* footer */
.site-foot{background:var(--surface);border-top:1px solid var(--line);padding-block:40px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.site-foot h4{font:600 .75rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 10px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-foot a{text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.fine{color:var(--muted);font-size:.85rem}
.foot-base{margin-top:28px}

@media (max-width:860px){
  .hero .wrap,.split,.products,.svc-grid{grid-template-columns:1fr}
  .cols3,.tiers,.mods,.dive,.crm-pricing{grid-template-columns:1fr}
  .dive{gap:24px}.dive:nth-of-type(even) .dive-copy{order:0}
  .integ{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .step + .step{border-left:0;border-top:1px solid var(--line)}
  .addons{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .toc ol{columns:1}
}
@media (max-width:480px){.addons{grid-template-columns:1fr}.integ{gap:10px}.integ-item{padding:14px}.integ-item b{font-size:1.05rem;overflow-wrap:anywhere}.integ-item span{font-size:.85rem}.mock-2{grid-template-columns:1fr}.mock-pane + .mock-pane{border-left:0;border-top:1px solid var(--line)}.svc{padding:22px;gap:10px}.svc-grid{gap:14px;margin-top:24px}.hero-split{padding-block:28px 36px}.hero-split h1{font-size:2.5rem}.hero-video{padding-block:32px 40px}.hero-video .wrap{gap:28px}.svc-band{padding-block:32px 48px}.svc h2{font-size:1.75rem}.band{padding-block:52px}.nav{gap:4px 14px}}
@media (prefers-reduced-motion:no-preference){.btn{transition:filter .15s}html{scroll-behavior:smooth}}

/* Blog: header band plus the Soro embed, which renders its own posts into #soro-blog.
   Soro ships its own light-theme colors, so its classes are restyled here with !important
   to use the site tokens and stay readable in both light and dark. */
.blog-head{padding-block:56px 40px}
.blog-head h1{color:var(--heading);max-width:9.06em}
.blog-feed{padding-block:40px 72px}
.is-post .blog-head{padding-block:28px 0;border:0}
.is-post .blog-head h1,.is-post .blog-head .lede{display:none}
.is-post .blog-feed{padding-block:8px 72px;border:0}
.blog-loading{font:.9rem var(--mono);color:var(--muted)}
#soro-blog{min-height:320px;font-family:var(--body);color:var(--ink)}
#soro-blog :is(.soro-blog,.soro-blog-content,.soro-blog-list,.soro-blog-article){width:100%!important;max-width:none!important;background:transparent!important;color:var(--ink)!important;font-family:var(--body)!important;padding:0!important;margin:0!important}
#soro-blog :is(.soro-blog-loading,.soro-blog-empty,.soro-blog-error){font:.9rem var(--mono)!important;color:var(--muted)!important;text-align:left!important;padding:0!important}
#soro-blog .soro-blog-header{display:none!important}
#soro-blog .soro-blog-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important}
#soro-blog .soro-blog-card{display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;margin:0!important;background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-md)!important;box-shadow:none!important;overflow:hidden!important;color:var(--ink)!important;text-decoration:none!important;transform:none!important}
#soro-blog .soro-blog-card:hover{border-color:var(--line-strong)!important}
#soro-blog .soro-blog-card:hover .soro-blog-card-title{text-decoration:underline!important;text-underline-offset:3px!important}
#soro-blog .soro-blog-card-image{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;border-radius:0!important;margin:0!important;background:var(--plan-fill)!important}
#soro-blog .soro-blog-card-content{display:flex!important;flex-direction:column!important;gap:10px!important;padding:20px 22px 24px!important}
#soro-blog :is(.soro-blog-card-date,.soro-blog-article-date){font:500 .78rem var(--mono)!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--orange)!important;margin:0!important}
#soro-blog .soro-blog-card-title{font:600 1.45rem/1.08 var(--display)!important;text-transform:uppercase!important;letter-spacing:var(--track)!important;color:var(--heading)!important;margin:0!important}
#soro-blog .soro-blog-card-excerpt{font:400 .97rem/1.55 var(--body)!important;color:var(--muted)!important;margin:0!important;display:-webkit-box!important;-webkit-line-clamp:4!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
#soro-blog .soro-blog-back{display:inline-flex!important;align-items:center!important;gap:8px!important;margin:0 0 28px!important;padding:0!important;border:0!important;background:none!important;font:500 .85rem var(--mono)!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:var(--muted)!important;text-decoration:none!important;cursor:pointer!important}
#soro-blog .soro-blog-back:hover{color:var(--ink)!important}
#soro-blog .soro-blog-article{max-width:46rem!important}
#soro-blog .soro-blog-article header{display:flex!important;flex-direction:column!important;gap:14px!important;padding:0!important;border:0!important;margin:0!important}
#soro-blog .soro-blog-article-title{font:700 clamp(2.2rem,5vw,3.6rem)/1.02 var(--display)!important;text-transform:uppercase!important;letter-spacing:var(--track)!important;color:var(--heading)!important;margin:0!important;max-width:none!important;text-wrap:balance}
#soro-blog .soro-blog-article-image{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;margin:32px 0 0!important;border-radius:var(--r-md)!important;filter:none!important}
#soro-blog .soro-blog-article-content{max-width:none!important;margin:32px 0 0!important;font:400 1.08rem/1.75 var(--body)!important;letter-spacing:0!important;color:var(--ink)!important}
#soro-blog .soro-blog-article-content :is(p,li,span,strong,em,b,i,td,th,figcaption,div){color:inherit!important;font-family:inherit!important;letter-spacing:0!important}
#soro-blog .soro-blog-article-content :is(strong,b){font-weight:600!important}
#soro-blog .soro-blog-article-content p{margin:0 0 1.25em!important}
#soro-blog .soro-blog-article-content :is(h2,h3,h4,h5,h6){font-family:var(--display)!important;color:var(--heading)!important;letter-spacing:var(--track)!important;line-height:1.08!important;text-wrap:balance}
#soro-blog .soro-blog-article-content h2{font-size:clamp(1.7rem,3vw,2.2rem)!important;font-weight:700!important;text-transform:uppercase!important;margin:2em 0 .6em!important;padding-top:1.2em!important;border-top:1px solid var(--line)!important}
#soro-blog .soro-blog-article-content h3{font-size:1.45rem!important;font-weight:600!important;text-transform:uppercase!important;margin:1.6em 0 .5em!important}
#soro-blog .soro-blog-article-content :is(h4,h5,h6){font-size:1.2rem!important;font-weight:600!important;text-transform:none!important;margin:1.4em 0 .4em!important}
#soro-blog .soro-blog-article-content a{color:var(--heading)!important;text-decoration:underline!important;text-decoration-color:var(--orange)!important;text-decoration-thickness:2px!important;text-underline-offset:3px!important}
#soro-blog .soro-blog-article-content :is(ul,ol){margin:0 0 1.25em!important;padding-left:1.4em!important}
#soro-blog .soro-blog-article-content li{margin:0 0 .5em!important}
#soro-blog .soro-blog-article-content li::marker{color:var(--orange)}
#soro-blog .soro-blog-article-content blockquote{margin:1.6em 0!important;padding:4px 0 4px 20px!important;border:0!important;border-left:4px solid var(--orange)!important;background:none!important;color:var(--muted)!important;font-size:1.1rem!important}
#soro-blog .soro-blog-article-content img{display:block!important;max-width:100%!important;height:auto!important;margin:1.6em 0!important;border-radius:var(--r-md)!important}
#soro-blog .soro-blog-article-content hr{border:0!important;border-top:1px solid var(--line)!important;margin:2em 0!important}
#soro-blog .soro-blog-article-content table{width:100%!important;border-collapse:collapse!important;margin:1.6em 0!important;font-size:.95rem!important;display:block!important;overflow-x:auto!important}
#soro-blog .soro-blog-article-content :is(th,td){padding:10px 12px!important;border:0!important;border-bottom:1px solid var(--line)!important;text-align:left!important;background:none!important}
#soro-blog .soro-blog-article-content th{font:600 .8rem var(--mono)!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:var(--muted)!important}
#soro-blog .soro-blog-article-content :is(code,pre){font-family:var(--mono)!important;background:var(--chip)!important;color:var(--ink)!important;border-radius:var(--r-sm)!important}
#soro-blog .soro-blog-article-content code{padding:.1em .35em!important;font-size:.9em!important}
#soro-blog .soro-blog-article-content pre{padding:14px 16px!important;overflow-x:auto!important}
@media (max-width:860px){#soro-blog .soro-blog-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:600px){#soro-blog .soro-blog-list{grid-template-columns:1fr!important;gap:16px!important}#soro-blog .soro-blog-article-content{font-size:1.02rem!important}}
@media (max-width:480px){.blog-head{padding-block:32px 24px}.blog-feed{padding-block:24px 52px}.is-post .blog-head{padding-block:20px 0}}
/* Customer reviews (crm#reviews) and the short quote in the homepage CRM panel */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:24px;margin-top:36px}
.review{margin:0;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--r-md);padding:32px 36px;display:flex;flex-direction:column;gap:20px;max-width:760px}
.review blockquote{margin:0}
.review blockquote p{font:600 clamp(1.4rem,2.6vw,1.85rem)/1.2 var(--display);letter-spacing:.01em;color:var(--heading)}
.review blockquote p::before{content:"\201C"}
.review blockquote p::after{content:"\201D"}
.review figcaption{display:flex;flex-direction:column;gap:2px;font-size:.95rem}
.review figcaption b{color:var(--ink)}
.review figcaption span{font:.8rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.svc-quote{margin:4px 0 0;padding:12px 0 12px 16px;border-left:3px solid var(--orange)}
.svc-quote blockquote{margin:0}
.svc-quote blockquote p{color:var(--ink);font-size:1rem;font-style:italic}
.svc-quote figcaption{margin-top:6px;font:.8rem var(--mono);color:var(--muted)}
.svc-quote figcaption a{text-underline-offset:3px}
@media (max-width:480px){.review{padding:22px 20px;gap:14px}}