/* styles.css — the marketing site's design system.
 * Theme tokens (colors/type/layout) are injected as CSS custom properties by the build
 * from content/theme.json into tokens.css. This file consumes those vars only — never a
 * hard-coded color — so the whole site reskins by editing theme.json (or a runtime
 * :root override from the parent's GET /brand). Mobile-first.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Never let the page itself scroll sideways on mobile — wide content (tables) scrolls inside its
   own .matrix-scroll container. overflow:clip preserves position:sticky on modern browsers; older
   Safari ignores `clip`, so fall back to `hidden` there via @supports. */
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
img, svg, video { max-width: 100%; height: auto; }
/* Hard-bound the wide-table scroll container so a min-width table can never push the page wide. */
.matrix-scroll { max-width: 100%; width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Plan-comparison matrix: plan-name header cells reverse out (light text on dark cell). */
table.matrix--plans thead th.plan-col { background: var(--c-bg-ink); color: #fff; text-align: center; font-weight: 800; }
table.matrix--plans thead th:first-child { background: var(--c-bg-alt); }
table.matrix--plans td:not(:first-child) { text-align: center; }
/* Compact table (e.g. the location price table): short columns, fits mobile without scrolling. */
table.matrix.matrix--compact { min-width: 0; width: 100%; }
table.matrix.matrix--compact th, table.matrix.matrix--compact td { padding: 11px 10px; font-size: .9rem; white-space: nowrap; }
table.matrix.matrix--compact td:not(:first-child), table.matrix.matrix--compact th:not(:first-child) { text-align: right; }
/* The add-on/location cards sit in a grid; grid items default to min-width:auto and grow to their
   content (a wide table), overflowing on mobile. Force shrinkable columns so tables fit/scroll. */
.addon-list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .addon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.addon, .addon--wide { min-width: 0; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--fw-heading); line-height: 1.15; margin: 0 0 .5em; color: var(--c-text); }
h1 { font-size: var(--fs-4xl); letter-spacing: -.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -.01em; }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 1em; }
.muted { color: var(--c-text-muted); }

/* layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section--alt { background: var(--c-bg-alt); }
.center { text-align: center; }
.grid { display: grid; gap: 24px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--c-brand); margin: 0 0 12px; }
.lede { font-size: var(--fs-lg); color: var(--c-text-muted); max-width: 60ch; }
.center .lede { margin-inline: auto; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; padding: 13px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, background .2s ease; text-decoration: none; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--c-brand); color: var(--c-brand-ink); box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: var(--shadow-lg); }
.btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.btn-ghost:hover { background: var(--c-bg-alt); }
.btn-lg { padding: 16px 28px; font-size: 1.06rem; }
.btn-on-ink { background: var(--c-brand); color: var(--c-brand-ink); }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--c-border); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 28px; }
.nav__logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; color: var(--c-text); flex-shrink: 0; }
.nav__logo img { height: var(--logo-h); width: auto; }
.nav__links { display: none; gap: 18px; align-items: center; flex-wrap: nowrap; font-size: .94rem; }
.nav__links a { color: var(--c-text); font-weight: 600; }
/* Keep ONLY the top-level items on one line — must not leak into the dropdown menus, or their
   long labels stop wrapping and blow the flyout width past its cap. */
.nav__links > a, .nav__has-drop > a { white-space: nowrap; }
.nav__cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav__signin { display: none; }
.nav__toggle { display: inline-flex; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--c-text); }
.nav__mobile { display: none; flex-direction: column; gap: 4px; padding: 12px 20px 20px; border-bottom: 1px solid var(--c-border); background: var(--c-bg); }
.nav__mobile a { padding: 12px 4px; font-weight: 600; color: var(--c-text); border-bottom: 1px solid var(--c-border); }
.nav__mobile.open { display: flex; }
/* Give the header a bit more room than the content wrap so 8 nav items + logo + 2 CTAs
   never crowd. Only reveal the horizontal nav when it genuinely fits (≥1120px); below that
   the hamburger menu takes over — avoids the cramped/overlapping mid-width state. */
.site-header .wrap { max-width: 1300px; }
@media (min-width: 1120px) {
  .nav__links { display: flex; }
  .nav__signin { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
}

/* hero */
.hero { padding: clamp(40px, 7vw, 88px) 0; }
.hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { margin-bottom: .3em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 16px; }
.hero__trust { font-size: .9rem; color: var(--c-text-muted); }
.hero__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--c-border); }

/* cards */
.card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
.vprop { display: flex; flex-direction: column; gap: 8px; }
.vprop__icon { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--c-brand) 18%, var(--c-bg)); display: grid; place-items: center; color: var(--c-brand-ink); }

/* feature rows */
.feature { display: grid; gap: 28px; align-items: center; padding: clamp(28px,5vw,52px) 0; border-bottom: 1px solid var(--c-border); }
@media (min-width: 860px) { .feature { grid-template-columns: 1fr 1fr; } .feature--flip .feature__media { order: -1; } }
.feature__media img { border-radius: var(--radius); border: 1px solid var(--c-border); box-shadow: var(--shadow); background: var(--c-bg-alt); }
.feature ul { padding-left: 0; list-style: none; margin: 16px 0 0; }
.feature li { padding: 7px 0 7px 28px; position: relative; }
.feature li::before { content: "✓"; position: absolute; left: 0; color: var(--c-success); font-weight: 800; }

/* placeholder image */
.ph { aspect-ratio: 16 / 10; border-radius: var(--radius); border: 1px dashed var(--c-border); background: repeating-linear-gradient(45deg, var(--c-bg-alt), var(--c-bg-alt) 12px, color-mix(in srgb, var(--c-bg-alt) 60%, var(--c-bg)) 12px, color-mix(in srgb, var(--c-bg-alt) 60%, var(--c-bg)) 24px); display: grid; place-items: center; color: var(--c-text-muted); font-size: .82rem; text-align: center; padding: 16px; }
.ph span { max-width: 26ch; }

/* pricing */
.price-grid { display: grid; gap: 22px; align-items: stretch; }
@media (min-width: 820px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column; }
.price-card--hl { border-color: var(--c-brand); box-shadow: var(--shadow-lg); position: relative; }
.price-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--c-brand); color: var(--c-brand-ink); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; }
.price-card__amt { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; }
.price-card__amt small { font-size: 1rem; font-weight: 500; color: var(--c-text-muted); }
.price-card ul { list-style: none; padding: 0; margin: 18px 0; flex: 1; }
.price-card li { padding: 7px 0 7px 26px; position: relative; font-size: .96rem; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--c-success); font-weight: 800; }
.price-note { font-size: .9rem; color: var(--c-text-muted); }

/* matrix table */
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-border); border-radius: var(--radius); }
table.matrix { width: 100%; border-collapse: collapse; min-width: 0; }
table.matrix td.nowrap, table.matrix th.nowrap { white-space: nowrap; }
/* Plan/add-on tables FIT mobile (feature label wraps, value columns stay tight) — no side-scroll. */
table.matrix--plans th.plan-col, table.matrix--plans td:not(:first-child) { width: 1%; white-space: nowrap; }
table.matrix td.addon-cell, .matrix-scroll + p .addon-cell, b.addon-cell { color: var(--c-accent); font-weight: 800; text-align: center; }
table.matrix td.addon-cell { text-align: center; }
@media (max-width: 560px) {
  table.matrix th, table.matrix td { padding: 10px 8px; font-size: .84rem; }
  table.matrix--plans th.plan-col, table.matrix--plans td:not(:first-child) { padding: 10px 5px; }
  table.matrix--plans th.plan-col { font-size: .74rem; }
}
/* Responsive STACK: tables flagged .stack become card rows on mobile — no horizontal scroll at all.
   Each <td data-label="…"> shows its label on the left and value on the right. */
@media (max-width: 640px) {
  table.matrix.stack, table.matrix.stack tbody, table.matrix.stack tr, table.matrix.stack td { display: block; width: 100%; }
  table.matrix.stack thead { display: none; }
  .matrix-scroll:has(table.stack) { border: 0; overflow: visible; }
  table.matrix.stack tr { border: 1px solid var(--c-border); border-radius: 14px; padding: 4px 16px; margin-bottom: 12px; background: var(--c-bg); }
  table.matrix.stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 11px 0; border: 0; border-bottom: 1px solid var(--c-border); text-align: right; font-size: .92rem; }
  table.matrix.stack td:last-child { border-bottom: 0; }
  table.matrix.stack td::before { content: attr(data-label); font-weight: 700; color: var(--c-text); text-align: left; flex: 0 0 auto; }
  table.matrix.stack td:first-child { justify-content: flex-start; font-size: 1.02rem; font-weight: 800; padding: 12px 0 8px; }
  table.matrix.stack td:first-child::before { content: none; }
  table.matrix.stack td.muted { flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; }
}
table.matrix th, table.matrix td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--c-border); font-size: .95rem; }
table.matrix thead th { background: var(--c-bg-alt); font-weight: 700; }
table.matrix td.chk { text-align: center; color: var(--c-success); font-weight: 800; }
table.matrix td.no { text-align: center; color: var(--c-border); }
table.matrix tbody tr:last-child td { border-bottom: 0; }

/* addons */
.addon-list { display: grid; gap: 14px; }
@media (min-width: 720px){ .addon-list { grid-template-columns: repeat(2,1fr); } }
.addon { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 16px 18px; }
.addon b { display: block; margin-bottom: 4px; }
.addon .tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-brand-ink); background: color-mix(in srgb, var(--c-brand) 20%, var(--c-bg)); padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; }

/* use cases */
.usecase { display: grid; gap: 24px; align-items: center; padding: clamp(24px,4vw,44px) 0; border-bottom: 1px solid var(--c-border); }
@media (min-width: 820px){ .usecase { grid-template-columns: 1fr 1fr; } .usecase--flip .usecase__media { order: -1; } }
.usecase__pill { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--c-brand-ink); background: color-mix(in srgb, var(--c-brand) 18%, var(--c-bg)); padding: 4px 11px; border-radius: 999px; margin-bottom: 12px; }

/* faq */
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-item summary { cursor: pointer; padding: 20px 44px 20px 4px; font-weight: 700; font-size: 1.06rem; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 18px; font-size: 1.5rem; color: var(--c-brand); font-weight: 400; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 4px 22px; margin: 0; color: var(--c-text-muted); max-width: 74ch; }

/* cta band */
.cta-band { background: var(--c-bg-ink); color: var(--c-text-on-ink); border-radius: var(--radius); padding: clamp(36px,6vw,64px); text-align: center; }
.cta-band h2 { color: var(--c-text-on-ink); max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.cta-band .lede { color: color-mix(in srgb, var(--c-text-on-ink) 78%, transparent); max-width: 48ch; margin-inline: auto; text-wrap: balance; }
.cta-band .hero__cta { justify-content: center; margin-bottom: 0; }

/* footer */
.site-footer { background: var(--c-bg-ink); color: var(--c-text-on-ink); padding: 56px 0 28px; }
.site-footer a { color: color-mix(in srgb, var(--c-text-on-ink) 82%, transparent); }
.footer-grid { display: grid; gap: 32px 40px; grid-template-columns: 1fr; }
@media (min-width: 560px){ .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 900px){ .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.footer-col h4 { color: var(--c-text-on-ink); font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.footer-col a { display: block; padding: 6px 0; }
/* brand block with logo */
.footer-brand { max-width: 360px; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--c-text-on-ink); margin-bottom: 14px; }
.footer-logo img { height: 30px; width: auto; }
.footer-logo:hover { text-decoration: none; }
.footer-tag { color: color-mix(in srgb, var(--c-text-on-ink) 70%, transparent); line-height: 1.55; margin: 0 0 18px; max-width: 34ch; }
.footer-brand .btn { display: inline-flex; }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--c-text-on-ink) 16%, transparent); font-size: .86rem; color: color-mix(in srgb, var(--c-text-on-ink) 66%, transparent); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal a { padding: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-brand); color: var(--c-brand-ink); padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }

/* ── info (?) fly-out bubbles ───────────────────────────────────────────── */
.info { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%;
  background:var(--c-bg-alt); border:1px solid var(--c-border); color:var(--c-text-muted);
  font-size:.72rem; font-weight:700; cursor:help; position:relative; vertical-align:middle;
  margin-left:6px; line-height:1; user-select:none; }
.info:hover, .info:focus-visible { background:var(--c-brand); color:var(--c-brand-ink); border-color:var(--c-brand); outline:none; }
.info__pop { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  width:260px; max-width:70vw; background:var(--c-bg-ink); color:var(--c-text-on-ink); border:1px solid rgba(255,255,255,.14);
  padding:12px 14px; border-radius:10px; font-size:.85rem; font-weight:400; line-height:1.5;
  text-align:left; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease;
  z-index:60; pointer-events:none; }
.info__pop::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--c-bg-ink); }
/* Show on desktop hover, or when JS toggles .open (tap/keyboard). NOT on :focus — iOS applies
   focus on tap and would keep the popover stuck open, fighting the tap-to-close toggle. */
.info:hover .info__pop, .info.open .info__pop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* Mobile: the inline per-bubble popover is REPLACED by a single body-level bottom sheet
   (.info-sheet, created in site.js and appended to <body>). Portaling it outside the table's
   overflow scroll container is what fixes iOS Safari trapping a position:fixed element and
   shoving it off-screen. Hide the inline popover on mobile. */
@media (max-width:640px){ .info__pop{ display:none !important; } }

/* Shared mobile info sheet + scrim (portaled to <body> by site.js) */
.info-scrim{ position:fixed; inset:0; background:rgba(15,23,42,.22); z-index:2050;
  opacity:0; visibility:hidden; transition:opacity .18s ease; }
.info-scrim.open{ opacity:1; visibility:visible; }
.info-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:2100;
  background:var(--c-bg-ink); color:var(--c-text-on-ink); border-top:1px solid rgba(255,255,255,.14);
  border-radius:20px 20px 0 0; padding:20px 22px calc(24px + env(safe-area-inset-bottom));
  max-height:72vh; overflow-y:auto; font-size:1rem; line-height:1.6; text-align:left;
  box-shadow:0 -16px 46px rgba(0,0,0,.4); transform:translateY(101%); transition:transform .22s ease; }
.info-sheet.open{ transform:translateY(0); }
.info-sheet__handle{ display:block; width:44px; height:4px; border-radius:3px;
  background:rgba(255,255,255,.4); margin:0 auto 16px; }
@media (min-width:641px){ .info-sheet, .info-scrim{ display:none !important; } }

/* ── breadcrumbs ────────────────────────────────────────────────────────── */
.crumbs { border-bottom:1px solid var(--c-border); font-size:.85rem; }
.crumbs .wrap { padding-top:14px; padding-bottom:14px; }
.crumbs a { color:var(--c-text-muted); }
.crumbs .sep { color:var(--c-border); margin:0 4px; }
.crumbs span[aria-current] { color:var(--c-text); font-weight:600; }

/* ── competitor / article page ──────────────────────────────────────────── */
article ul.feature { list-style:none; }
article ul.feature li { padding:6px 0 6px 26px; position:relative; break-inside:avoid; }
article ul.feature li::before { content:"✓"; position:absolute; left:0; color:var(--c-success); font-weight:800; }
@media (max-width:640px){ article ul.feature { columns:1 !important; } }
a.card:hover { border-color:var(--c-brand); box-shadow:var(--shadow-lg); }

/* ── capabilities page + depth lists ────────────────────────────────────── */
.cap-count { display:inline-block; min-width:22px; padding:1px 8px; border-radius:999px; background:var(--c-brand);
  color:var(--c-brand-ink); font-size:.72rem; font-weight:800; vertical-align:middle; margin-left:6px; }
.cap-toc { display:flex; flex-wrap:wrap; gap:8px; margin:32px 0 8px; justify-content:center; }
.cap-toc a { border:1px solid var(--c-border); border-radius:999px; padding:7px 14px; font-weight:600; font-size:.9rem; color:var(--c-text); }
.cap-toc a:hover { border-color:var(--c-brand); text-decoration:none; background:var(--c-bg-alt); }
.cap-sections { margin-top:24px; }
.cap-group { padding:28px 0; border-bottom:1px solid var(--c-border); scroll-margin-top:80px; }
.cap-group h2 { margin-bottom:16px; }
.cap-grid { list-style:none; padding:0; margin:0; display:grid; gap:10px 22px; }
@media (min-width:640px){ .cap-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .cap-grid { grid-template-columns:1fr 1fr 1fr; } }
.cap-grid li { padding:6px 0 6px 26px; position:relative; }
.cap-grid li::before { content:"✓"; position:absolute; left:0; color:var(--c-success); font-weight:800; }
.cap-more { margin-top:14px; border-top:1px dashed var(--c-border); padding-top:10px; }
.cap-more summary { cursor:pointer; font-weight:700; color:var(--c-accent); list-style:none; padding:4px 0; }
.cap-more summary::-webkit-details-marker { display:none; }
.cap-more summary::before { content:"▸ "; }
.cap-more[open] summary::before { content:"▾ "; }
.cap-list { list-style:none; padding:0; margin:12px 0 4px; columns:2; column-gap:24px; }
@media (max-width:600px){ .cap-list { columns:1; } }
.cap-list li { padding:5px 0 5px 24px; position:relative; break-inside:avoid; font-size:.95rem; }
.cap-list li::before { content:"✓"; position:absolute; left:0; color:var(--c-success); font-weight:800; }

/* ── data-rich: stat band, logo strip, screenshot gallery ───────────────── */
.statband { background:var(--c-bg-ink); color:var(--c-text-on-ink); padding:36px 0; }
.statband__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; text-align:center; }
@media (min-width:720px){ .statband__grid { grid-template-columns:repeat(4,1fr); } }
.stat__v { font-size:2.4rem; font-weight:800; color:var(--c-brand); line-height:1; }
.stat__l { margin-top:6px; font-size:.9rem; color:color-mix(in srgb,var(--c-text-on-ink) 72%,transparent); text-transform:uppercase; letter-spacing:.05em; }
.logo-strip { display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; margin-top:22px; }
.logo-chip { border:1px solid var(--c-border); border-radius:999px; padding:9px 18px; font-weight:700; font-size:.92rem; color:var(--c-text); background:var(--c-bg); }
.shot-gallery { display:grid; grid-template-columns:1fr; gap:18px; margin-top:36px; }
@media (min-width:640px){ .shot-gallery { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .shot-gallery { grid-template-columns:1fr 1fr 1fr 1fr; } }
.shot { margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-border); box-shadow:var(--shadow); background:var(--c-bg-alt); aspect-ratio:16/10; }
.shot img { width:100%; height:100%; object-fit:cover; object-position:top left; }

/* ── COLORFUL ENRICHMENT ────────────────────────────────────────────────── */
/* gradient hero + tinted sections */
.hero { background:
  radial-gradient(1000px 480px at 88% -8%, color-mix(in srgb,var(--c-brand) 16%, transparent), transparent 70%),
  radial-gradient(760px 420px at -6% 12%, color-mix(in srgb,var(--c-accent) 14%, transparent), transparent 70%); }
.section--tint { background:
  linear-gradient(180deg, color-mix(in srgb,var(--c-accent) 6%, var(--c-bg)), var(--c-bg)); }
.eyebrow { background:linear-gradient(90deg,var(--c-brand),var(--c-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* colorful feature cards + icons */
.feat-card { border-top:3px solid var(--ic, var(--c-brand)); }
.feat-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px;
  color:#fff; margin-bottom:14px; box-shadow:0 6px 16px color-mix(in srgb, var(--ic,#000) 40%, transparent); }
.feat-ic--lg { width:56px; height:56px; font-size:26px; border-radius:14px; }
.feature { border-left:3px solid var(--ic, var(--c-border)); padding-left:20px; border-bottom:1px solid var(--c-border); }
@media (min-width:860px){ .feature { padding-left:28px; } .feature--flip { border-left:0; border-right:3px solid var(--ic,var(--c-border)); padding-left:0; padding-right:28px; } }
.feature li::before { color:var(--ic, var(--c-success)); }

/* colorful stat band */
.statband { background:linear-gradient(120deg,#12151a,#1b2230 60%,#0c0e12); }
.stat__v { color:var(--ic, var(--c-brand)); text-shadow:0 2px 20px color-mix(in srgb,var(--ic,#000) 45%, transparent); }

/* integration logo tiles + grid (colorful) */
.logo-strip { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px; }
.logo-chip { display:inline-flex; align-items:center; gap:9px; border:1px solid var(--c-border); border-radius:999px;
  padding:7px 15px 7px 8px; font-weight:700; font-size:.9rem; color:var(--c-text); background:var(--c-bg);
  box-shadow:0 2px 8px color-mix(in srgb,var(--ic,#000) 12%, transparent); }
.logo-mono { width:26px; height:26px; border-radius:7px; background:var(--lg,#888); color:#fff; display:inline-grid; place-items:center; font-size:.72rem; font-weight:800; text-transform:lowercase; }
.logo-img { width:26px; height:26px; border-radius:6px; object-fit:contain; }
/* branded capability tile (SMS/AI/Fax) — an icon on a brand-colored tile instead of a vendor logo */
.logo-ic { width:26px; height:26px; border-radius:7px; display:inline-grid; place-items:center; color:#fff; flex:0 0 auto;
  background-image:linear-gradient(140deg, var(--lg,#888), color-mix(in srgb, var(--lg,#888) 55%, #000 14%)); }
.logo-ic svg { width:62%; height:62%; }
.intg-grid { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .intg-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .intg-grid { grid-template-columns:1fr 1fr 1fr; } }
.intg-card { border:1px solid var(--c-border); border-radius:var(--radius); padding:20px; background:var(--c-bg);
  border-left:4px solid var(--ic,var(--c-brand)); box-shadow:var(--shadow); transition:transform .1s, box-shadow .2s; }
.intg-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.intg-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.intg-head .logo-mono, .intg-head .logo-img, .intg-head .logo-ic { width:40px; height:40px; border-radius:10px; font-size:.9rem; }
.intg-meta b { display:block; font-size:1rem; }
.intg-cat { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ic,var(--c-text-muted)); font-weight:700; }

/* gallery captions + hover */
.shot { position:relative; }
/* Overlay caption applies ONLY to the small gallery thumbnails — always visible (was hover-only,
   which showed nothing on touch). The big detail-page hero uses its own caption BELOW the image. */
.shot-gallery figcaption { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(0deg,rgba(12,14,18,.92),rgba(12,14,18,.55) 60%,transparent);
  color:#fff; font-size:.86rem; font-weight:700; padding:26px 14px 12px; opacity:1; transition:opacity .2s; }
.shot-gallery figcaption::after { content:" — tap to enlarge"; font-weight:500; opacity:.7; font-size:.78rem; }
.shot-gallery--cap .shot { aspect-ratio:16/11; }
/* detail-page hero: static caption below the image, never overlaid */
.detail-hero { aspect-ratio:auto; }
.detail-hero figcaption { position:static; }
.detail-hero img { position:relative; }

/* comparison table color */
.cmp-table .us-col { background:color-mix(in srgb,var(--c-brand) 10%, var(--c-bg)); }
.cmp-table thead th.us-col { background:var(--c-brand); color:var(--c-brand-ink); }
.cmp-table td.chk { color:var(--c-success); }
.cmp-table td.vary { color:var(--c-text-muted); text-align:center; font-style:italic; }
.cmp-table .us-col.chk b { color:var(--c-success); }

/* colorful capability category counts */
.cap-group { border-left:4px solid var(--c-brand); padding-left:20px; }
.cap-group:nth-child(3n+1){ border-left-color:var(--c-accent); }
.cap-group:nth-child(3n+2){ border-left-color:#8b5cf6; }
.cap-toc a:hover { border-color:var(--c-accent); }

/* colorful value-prop icons */
.vprop:nth-child(1) .vprop__icon { background:color-mix(in srgb,#2f6fed 20%,var(--c-bg)); color:#2f6fed; }
.vprop:nth-child(2) .vprop__icon { background:color-mix(in srgb,#1f9d55 20%,var(--c-bg)); color:#1f9d55; }
.vprop:nth-child(3) .vprop__icon { background:color-mix(in srgb,#e4405f 20%,var(--c-bg)); color:#e4405f; }

/* ── RED / BLUE / GREEN — bold, edgy, professional ──────────────────────── */
/* red brand carries CTAs + key numbers; blue/green carry cards + tables (message-bubble language) */
.stat__v { color:#ff5a6a; }                              /* bold red numbers on the dark band */
.price-card--hl { border-color:var(--c-brand); box-shadow:0 18px 60px color-mix(in srgb,var(--c-brand) 26%,transparent); }
.price-card--hl .price-card__amt { color:var(--c-brand); }

/* product cards = icon-driven, blue/green accented (iMessage/SMS) */
.feat-card { border-top:3px solid var(--ic,var(--c-accent)); border-radius:16px; }
.feat-ic { border-radius:14px; }

/* capability category = product cards, icon driven */
.cap-cardgrid { display:grid; gap:14px; grid-template-columns:1fr; margin:34px 0 8px; }
@media (min-width:560px){ .cap-cardgrid { grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .cap-cardgrid { grid-template-columns:1fr 1fr 1fr; } }
.cap-card { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--c-border);
  border-radius:14px; background:var(--c-bg); border-left:4px solid var(--ic,var(--c-accent));
  box-shadow:var(--shadow); text-decoration:none; color:var(--c-text); font-weight:700; transition:transform .1s, box-shadow .2s; }
.cap-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none; }
.cap-card__ic { flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  color:#fff; font-size:20px; box-shadow:0 6px 14px color-mix(in srgb,var(--ic,#000) 40%,transparent); }
.cap-card__t { flex:1; font-size:.98rem; line-height:1.25; }
.cap-count { display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 8px; border-radius:999px;
  background:var(--ic,var(--c-accent)); color:#fff; font-size:.8rem; font-weight:800; }
.cap-group h2 { display:flex; align-items:center; gap:12px; }
.cap-group h2 .cap-card__ic { width:44px; height:44px; }
.cap-group { border-left-color:var(--ic,var(--c-accent)) !important; }
.cap-grid li::before { color:var(--ic,var(--c-success)); }

/* comparison table: US column = green (SMS), competitor neutral */
.cmp-table thead th.us-col { background:var(--c-success); color:#062b16; }
.cmp-table .us-col { background:color-mix(in srgb,var(--c-success) 12%, var(--c-bg)); }
.cmp-table td.chk, .cmp-table .us-col.chk b { color:#15803d; }
.matrix td.chk { color:var(--c-success); }

/* pricing highlight badge stays red (brand) — bold focal point */
.price-card__badge { background:var(--c-brand); color:#fff; }

/* hero gradient: red glow + blue/green tints */
.hero { background:
  radial-gradient(900px 460px at 90% -10%, color-mix(in srgb,var(--c-brand) 16%, transparent), transparent 70%),
  radial-gradient(680px 400px at -4% 8%, color-mix(in srgb,var(--c-accent) 14%, transparent), transparent 70%),
  radial-gradient(520px 360px at 40% 120%, color-mix(in srgb,var(--c-success) 10%, transparent), transparent 70%); }
.eyebrow { background:linear-gradient(90deg,var(--c-brand),var(--c-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* value-prop icons: blue / green / red trio */
.vprop:nth-child(1) .vprop__icon { background:color-mix(in srgb,#0a84ff 18%,var(--c-bg)); color:#0a84ff; }
.vprop:nth-child(2) .vprop__icon { background:color-mix(in srgb,#22c55e 18%,var(--c-bg)); color:#16a34a; }
.vprop:nth-child(3) .vprop__icon { background:color-mix(in srgb,#e11631 16%,var(--c-bg)); color:#e11631; }

/* ── MODERN ICON SYSTEM — larger, distinctive, gradient tiles ───────────── */
/* tiles paint from --ic with a modern gradient sheen + colored glow; icons are white line-art */
.feat-ic, .cap-card__ic {
  background-color: var(--ic, #0a84ff);
  background-image: linear-gradient(140deg, rgba(255,255,255,.28), rgba(0,0,0,.16));
  color:#fff;
  box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--ic,#0a84ff) 60%, transparent),
              inset 0 1px 0 rgba(255,255,255,.35);
}
.feat-ic svg, .cap-card__ic svg { width:60%; height:60%; }
/* homepage preview + cap-card tiles: bigger */
.feat-card .feat-ic { width:60px; height:60px; border-radius:16px; }
.feat-card .feat-ic svg { width:30px; height:30px; }
/* feature-row hero icon: large + prominent */
.feat-ic--lg { width:72px; height:72px; border-radius:20px; }
.feat-ic--lg svg { width:38px; height:38px; }
/* capability product cards: larger, cleaner, NEUTRAL chrome so colors don't blend */
.cap-cardgrid { gap:16px; }
.cap-card { padding:18px 18px; border-radius:18px; border-left:1px solid var(--c-border); }
.cap-card:hover { border-color:color-mix(in srgb,var(--ic) 45%, var(--c-border)); }
.cap-card__ic { width:56px; height:56px; border-radius:16px; }
.cap-card__ic svg { width:30px; height:30px; }
.cap-card__t { font-size:1.02rem; font-weight:800; }
.cap-count { background:var(--c-bg-alt); color:var(--c-text-muted); min-width:30px; height:30px; font-size:.82rem; border:1px solid var(--c-border); }
.cap-group h2 .cap-card__ic { width:52px; height:52px; }
.cap-group { border-left:none !important; padding-left:0; }
/* comparison "why" checkmark tile */
.cmp .feat-ic, article .feat-ic { font-weight:800; font-size:22px; }

/* value-prop icons → bigger modern tiles too */
.vprop__icon { width:56px; height:56px; border-radius:16px; font-size:24px;
  background-image:linear-gradient(140deg, rgba(255,255,255,.25), rgba(0,0,0,.06)); }

/* nav logo: chat-bubble mark, a touch larger */
.nav__logo img { height:34px; }

/* ── lightbox for gallery screenshots ───────────────────────────────────── */
.shot { cursor:zoom-in; }
#lightbox { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center;
  background:rgba(8,10,14,.86); backdrop-filter:blur(4px); padding:24px; }
#lightbox.open { display:flex; }
.lb-card { background:var(--c-bg); border-radius:18px; max-width:1100px; width:100%; max-height:92vh; overflow:auto;
  box-shadow:0 30px 90px rgba(0,0,0,.5); display:grid; grid-template-columns:1fr; }
@media(min-width:860px){ .lb-card{ grid-template-columns:1.5fr 1fr; } }
.lb-card img { width:100%; height:100%; object-fit:cover; object-position:top left; background:var(--c-bg-alt); }
.lb-body { padding:28px; }
.lb-body h3 { font-size:1.5rem; margin:0 0 10px; }
.lb-body p { color:var(--c-text-muted); }
.lb-meta { margin-top:18px; border-top:1px solid var(--c-border); padding-top:14px; font-size:.85rem; color:var(--c-text-muted); }
.lb-meta div { display:flex; gap:8px; padding:3px 0; }
.lb-meta b { color:var(--c-text); min-width:96px; }
.lb-close { position:fixed; top:18px; right:22px; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; color:#111; font-size:22px; font-weight:700; z-index:2001; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.lb-cta { display:inline-flex; margin-top:18px; }

/* ══ child-menu dropdown nav ═══════════════════════════════════════════════ */
.nav__has-drop { position:relative; display:inline-flex; align-items:center; }
.nav__has-drop > a { display:inline-flex; align-items:center; gap:4px; }
/* invisible hover bridge so moving the cursor from the trigger down into the menu never
   crosses a dead zone (this is what was collapsing the Capabilities flyout). */
.nav__has-drop::after { content:""; position:absolute; left:-14px; right:-14px; top:100%; height:18px; }
.caret { font-size:.7em; opacity:.6; transition:transform .15s; }
.nav__has-drop:hover .caret, .nav__has-drop:focus-within .caret { transform:rotate(180deg); }
.nav__drop { position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:560px; max-width:min(560px, calc(100vw - 32px)); background:var(--c-bg); border:1px solid var(--c-border); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
  opacity:0; visibility:hidden; transition:opacity .15s, transform .15s; z-index:1200; }
.nav__has-drop:hover .nav__drop, .nav__has-drop:focus-within .nav__drop {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* Left-anchored wide menus (Features/Capabilities sit on the left of the bar, so a centered
   flyout would spill off the left edge). Open rightward from the trigger instead. */
.nav__drop--start { left:0; transform:translateX(0) translateY(6px); }
.nav__has-drop:hover .nav__drop--start, .nav__has-drop:focus-within .nav__drop--start {
  transform:translateX(0) translateY(0); }
.nav__drop a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  font-weight:600; font-size:.92rem; color:var(--c-text); }
.nav__drop a:hover { background:var(--c-bg-alt); text-decoration:none; }
/* Full-width footer link inside the Features mega-menu → the complete capabilities reference.
   (Capabilities was dropped as a top-level nav item; this is its canonical entry point.) */
.nav__drop a.nav__drop-foot { grid-column:1 / -1; margin-top:6px; padding-top:13px; border-top:1px solid var(--c-border);
  gap:6px; font-weight:700; color:var(--c-brand); border-radius:0; }
.nav__drop-foot:hover { background:transparent; text-decoration:underline; }
.drop-ic { flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff;
  background-image:linear-gradient(140deg, var(--ic), color-mix(in srgb, var(--ic) 55%, #000 12%)); }
.drop-ic svg { width:17px; height:17px; }
@media (max-width:859px){ .nav__drop { display:none; } .caret { display:none; } }

/* ══ per-feature detail sub-pages ══════════════════════════════════════════ */
.detail-head { text-align:center; max-width:820px; margin:0 auto 8px; }
.detail-head .feat-ic--lg { margin:0 auto 18px; }
.detail-head h1 { margin-bottom:14px; }
.detail-media { margin:26px 0 40px; }
.detail-hero { margin:0 auto; max-width:960px; }
.detail-hero img { width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--c-border);
  box-shadow:var(--shadow-lg); background:var(--c-bg-alt); }
.detail-hero figcaption { margin-top:12px; text-align:center; font-size:.9rem; color:var(--c-text); font-weight:600; }
.detail-cols { display:grid; grid-template-columns:1fr; gap:34px; }
@media (min-width:900px){ .detail-cols { grid-template-columns:1.7fr 1fr; align-items:start; } }
.detail-main h2 { margin:30px 0 14px; padding-bottom:8px; border-bottom:2px solid color-mix(in srgb,var(--ic) 30%,var(--c-border)); }
.detail-main h2:first-child { margin-top:0; }
.detail-main > p { color:var(--c-text); line-height:1.7; }
.detail-caps { columns:1; }
@media (min-width:560px){ .detail-caps { columns:2; column-gap:26px; } }
.detail-caps li { break-inside:avoid; }
.detail-highlights { list-style:none; padding:0; display:grid; gap:8px; }
.detail-highlights li { padding-left:26px; position:relative; }
.detail-highlights li::before { content:"✓"; position:absolute; left:0; font-weight:800; color:var(--ic); }
.detail-aside { position:sticky; top:80px; display:grid; gap:16px; }
.aside-card { border:1px solid var(--c-border); border-radius:16px; padding:20px; background:var(--c-bg-alt); }
.aside-card--top { border-top:4px solid var(--ic); }
.aside-card h3 { margin:0 0 6px; }
.aside-card h4 { margin:0 0 10px; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--c-text-muted); }
.aside-card .btn { width:100%; margin-top:10px; }
.aside-card a { display:block; padding:6px 0; font-weight:600; }

/* cross-link cards (related features / feature-guide grid) */
.xgrid { gap:18px; }
.xcard { display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:18px;
  border:1px solid var(--c-border); border-top:3px solid var(--ic,var(--c-accent)); background:var(--c-bg);
  transition:transform .15s, box-shadow .15s, border-color .15s; text-decoration:none; }
.xcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); text-decoration:none;
  border-color:color-mix(in srgb,var(--ic) 45%,var(--c-border)); }
.xcard h3 { margin:2px 0 0; font-size:1.1rem; }
.xcard p { margin:0; font-size:.9rem; }
.xcard__go { margin-top:auto; font-weight:800; color:var(--ic); font-size:.9rem; }

/* cross-link affordances on the broader Features / Capabilities pages */
.feat-explore { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:800;
  color:var(--ic,var(--c-brand)); }
.feat-explore:hover { gap:10px; }
.feat-h2link { color:inherit; }
.feat-h2link:hover { color:var(--ic,var(--c-brand)); text-decoration:none; }

/* ══ restructured pricing add-on cards ═════════════════════════════════════ */
.addon { display:flex; flex-direction:column; gap:10px; border-top:3px solid var(--c-accent); }
.addon--wide { grid-column:1 / -1; border-top-color:var(--c-brand); }
.addon__head { display:flex; align-items:center; gap:6px; }
.addon__head b { display:inline; margin:0; font-size:1.02rem; }
.addon__chips { display:flex; flex-wrap:wrap; gap:6px; }
.addon .chip { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:var(--c-text); background:var(--c-bg-alt); border:1px solid var(--c-border);
  padding:4px 10px; border-radius:999px; }
.addon__note { margin:0; color:var(--c-text-muted); line-height:1.55; font-size:.93rem; }
.addon__note b { color:var(--c-text); }

/* ══ knowledge base ════════════════════════════════════════════════════════ */
.kb-catcard .cap-count { background:color-mix(in srgb,var(--ic) 16%,var(--c-bg)); color:var(--ic); border-color:transparent; }
.kb-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:26px; }
@media (min-width:640px){ .kb-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .kb-grid { grid-template-columns:1fr 1fr 1fr; } }
.kb-card { display:flex; flex-direction:column; gap:6px; padding:18px 20px; border-radius:16px;
  border:1px solid var(--c-border); border-left:4px solid var(--ic,var(--c-accent)); background:var(--c-bg);
  transition:transform .15s, box-shadow .15s, border-color .15s; text-decoration:none; }
.kb-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); text-decoration:none;
  border-color:color-mix(in srgb,var(--ic) 45%,var(--c-border)); }
.kb-card__cat { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ic,var(--c-accent)); }
.kb-card b { font-size:1.04rem; line-height:1.3; }
.kb-card .muted { font-size:.9rem; }
/* tags */
.kb-tag { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; margin:4px 6px 0 0; border-radius:999px;
  font-weight:700; font-size:.85rem; color:var(--c-text); background:var(--c-bg-alt); border:1px solid var(--c-border); }
.kb-tag:hover { text-decoration:none; border-color:var(--c-accent); color:var(--c-accent); }
.kb-tag__n { font-size:.72rem; opacity:.6; }
.kb-tag--cloud { font-size:calc(.82rem + (var(--w,1) - 1) * .22rem); }
.kb-cloud { margin-top:44px; text-align:center; }
.kb-cloud__tags { margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:2px; }
.kb-angle { margin:0 0 22px; padding:14px 20px; border-left:4px solid var(--ic,var(--c-brand));
  background:var(--c-bg-alt); border-radius:0 12px 12px 0; font-size:1.12rem; font-weight:600; color:var(--c-text); font-style:normal; }
.kb-tags { margin-top:28px; padding-top:18px; border-top:1px solid var(--c-border); }
.kb-tags h3 { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--c-text-muted); margin:0 0 8px; }
.kb-otherc { margin-top:40px; padding-top:22px; border-top:1px solid var(--c-border); }
.kb-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.kb-pill { padding:7px 14px; border-radius:999px; border:1px solid var(--c-border); font-weight:600; font-size:.88rem; color:var(--c-text); }
.kb-pill:hover { border-color:var(--c-accent); color:var(--c-accent); text-decoration:none; }

/* ══ integration detail pages + linked cards ═══════════════════════════════ */
.intg-card--link { display:flex; flex-direction:column; text-decoration:none; border-left:4px solid var(--ic,var(--c-accent));
  transition:transform .15s, box-shadow .15s, border-color .15s; }
.intg-card--link:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); text-decoration:none;
  border-color:color-mix(in srgb,var(--ic) 50%,var(--c-border)); }
.intg-card--link .xcard__go { margin-top:12px; font-weight:800; color:var(--ic,var(--c-accent)); font-size:.86rem; }
.intg-hero { display:flex; align-items:center; gap:16px; }
.intg-hero .logo-img, .intg-hero .logo-mono, .intg-hero .logo-ic { width:60px; height:60px; flex:0 0 auto; }
.intg-hero h1 { margin:2px 0 0; }
.intg-note { display:inline-block; margin-top:14px; padding:8px 14px; border-radius:10px; font-weight:600; font-size:.9rem;
  background:color-mix(in srgb,var(--c-accent) 12%,var(--c-bg)); color:var(--c-text); border:1px solid color-mix(in srgb,var(--c-accent) 30%,var(--c-border)); }
.intg-note--soon { background:color-mix(in srgb,var(--c-warning) 15%,var(--c-bg)); border-color:color-mix(in srgb,var(--c-warning) 40%,var(--c-border)); }
/* wide connector dropdown (logos + names, multi-column) */
.nav__drop--wide { min-width:640px; max-width:min(680px, calc(100vw - 32px)); grid-template-columns:1fr 1fr 1fr; }
.drop-ic--plain { background:none; }
.drop-ic--plain .logo-img, .drop-ic--plain .logo-mono, .drop-ic--plain .logo-ic { width:22px; height:22px; }
@media (max-width:980px){ .nav__drop--wide { grid-template-columns:1fr 1fr; min-width:420px; } }

/* One-time onboarding — prominent cards (replaces the old buried text line) */
.onboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:720px){.onboard-grid{grid-template-columns:minmax(0,1fr)}}
.onboard-card{border:1px solid var(--c-border);border-radius:16px;padding:24px 22px;background:var(--c-bg);text-align:center;display:flex;flex-direction:column;gap:6px}
.onboard-card__name{font-weight:700;font-size:1.08rem;color:var(--c-text)}
.onboard-card__price{font-size:2rem;font-weight:800;line-height:1.05;color:var(--c-brand)}
.onboard-card__price span{display:block;font-size:.68rem;font-weight:700;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.onboard-card__desc{color:var(--c-text-muted);font-size:.92rem;margin:6px 0 0}

/* iOS: keep the last section clear of Safari's translucent bottom toolbar */
.site-footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* ══ Total-cost-of-ownership comparison table ══════════════════════════════ */
.tco-scenario { max-width: 62ch; margin: 0 auto 20px; text-align: center; color: var(--c-text-muted); font-size: 1.02rem; }
table.tco { min-width: 720px; }
table.tco thead th { vertical-align: bottom; padding: 12px 12px; text-align: center; }
table.tco thead th:first-child { width: 30%; }
.tco-col__name { display: block; font-weight: 800; font-size: .96rem; }
.tco-col__sub { display: block; font-weight: 500; font-size: .76rem; color: var(--c-text-muted); margin-top: 3px; line-height: 1.3; }
table.tco th[scope="row"] { text-align: left; font-weight: 600; font-size: .92rem; color: var(--c-text); }
.tco-cell { text-align: center; font-size: .9rem; color: var(--c-text-muted); }
table.tco td.tco-cell--ours { color: var(--c-text); font-weight: 700; background: color-mix(in srgb, var(--c-brand) 8%, var(--c-bg)); }
table.tco thead th.tco-col--ours { background: color-mix(in srgb, var(--c-brand) 14%, var(--c-bg)); border-radius: 12px 12px 0 0; }
.tco-col--ours .tco-col__name { color: var(--c-brand); }
.tco-total-row th, .tco-total { font-size: 1.02rem; font-weight: 800; border-top: 2px solid var(--c-border); padding-top: 16px; }
.tco-total { text-align: center; color: var(--c-text); }
table.tco td.tco-total.tco-cell--ours { color: var(--c-brand); font-size: 1.14rem; border-radius: 0 0 12px 12px; }
.tco-foot { max-width: 68ch; margin: 20px auto 0; text-align: center; font-weight: 600; color: var(--c-text); }
.tco-note { max-width: 70ch; margin: 12px auto 0; text-align: center; font-size: .8rem; }
/* Mobile: reuse the stacked-card pattern; keep the SM2.IO tint on its cell */
@media (max-width: 720px) {
  table.tco.stack { min-width: 0; }
  table.tco.stack thead { position: absolute; left: -9999px; }
  table.tco.stack tr { display: block; border: 1px solid var(--c-border); border-radius: 12px; padding: 8px 12px; margin-bottom: 14px; }
  table.tco.stack th[scope="row"] { display: block; padding: 8px 0 6px; font-size: .95rem; border-bottom: 1px solid var(--c-border); }
  table.tco.stack td { display: flex; justify-content: space-between; gap: 16px; text-align: right; padding: 7px 0; border: 0; }
  table.tco.stack td::before { content: attr(data-label); font-weight: 600; color: var(--c-text-muted); text-align: left; }
  .tco-cell--ours { background: transparent; }
  .tco-cell--ours::before { color: var(--c-brand); }
}

/* ══ Consent banner (visitor-analytics engine) ═════════════════════════════ */
.consent { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 3000;
  width: min(680px, calc(100vw - 24px)); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  background: var(--c-bg-ink); color: var(--c-text-on-ink); border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.consent__text { flex: 1 1 300px; min-width: 240px; }
.consent__text strong { display: block; font-size: .98rem; margin-bottom: 3px; }
.consent__text p { margin: 0; font-size: .84rem; line-height: 1.5; color: color-mix(in srgb, var(--c-text-on-ink) 78%, transparent); }
.consent__actions { display: flex; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.consent__actions .btn { padding: 10px 18px; font-size: .92rem; }
.consent__actions .btn-ghost { color: var(--c-text-on-ink); border-color: rgba(255,255,255,.28); background: transparent; }
.consent__actions .btn-ghost:hover { background: rgba(255,255,255,.08); }
@media (max-width: 520px) { .consent__actions { width: 100%; } .consent__actions .btn { flex: 1; } }

/* ══ Legal pages (privacy / terms) ═════════════════════════════════════════ */
.legal { max-width: 74ch; margin: 0 auto; }
.legal-sec { margin-top: 22px; }
.legal-sec h2 { font-size: 1.12rem; margin-bottom: 6px; }
.legal-sec p { margin: 0; color: var(--c-text); }
.legal-review { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--c-border); font-size: .82rem; }