/* =============================================================================
   site.css - shared world-class marketing chrome + layout for the public site.
   Uses the design tokens from bk-ui.css (--bk-brand, --bk-gray-*, --bk-font-*).
   Prefix: sh- (site header/shell) + sx- (section utilities), to avoid clashing
   with the homepage's legacy lp-* classes. Link AFTER bk-ui.css.
   ============================================================================= */

:root{
  --sh-max: 1200px;
  --sh-nav-h: 64px;
  --sh-ink: var(--bk-gray-900);
  --sh-soft: var(--bk-gray-600);
  --sh-muted: var(--bk-gray-500);
  --sh-line: var(--bk-gray-200);
  --sh-bg: var(--bk-gray-0);
  --sh-bg-2: var(--bk-gray-50);
  --sh-brand: var(--bk-brand);
}

.sh-scope, .sh-scope *{ box-sizing:border-box; }
.sh-scope{ font-family: var(--bk-font-sans, 'Geist', system-ui, sans-serif); color: var(--sh-ink); background: var(--sh-bg); -webkit-font-smoothing:antialiased; }
.sh-wrap{ max-width: var(--sh-max); margin:0 auto; padding:0 24px; }
a{ color: inherit; }

/* ---------------- NAV ---------------- */
.sh-nav{ position: sticky; top:0; z-index:100; background: color-mix(in srgb, var(--sh-bg) 88%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom:1px solid var(--sh-line); }
.sh-nav-in{ max-width: var(--sh-max); margin:0 auto; padding:0 24px; height: var(--sh-nav-h); display:flex; align-items:center; gap:22px; }
.sh-brand{ display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.01em; text-decoration:none; color:var(--sh-ink); }
.sh-brand svg{ width:30px; height:30px; flex:none; }
.sh-brand > span{ display:flex; flex-direction:column; justify-content:center; line-height:1; }
.sh-brand .sh-wm{ display:block; font-size:17px; line-height:1.05; }
.sh-brand .sh-by{ display:block; font-size:10px; font-weight:600; color:var(--sh-muted); margin-top:2px; letter-spacing:.02em; }
.sh-links{ display:flex; align-items:center; gap:4px; margin-left:14px; }
.sh-navitem{ position:relative; }
.sh-navitem > a, .sh-navitem > button{ appearance:none; background:none; border:0; cursor:pointer; font:inherit; font-size:14.5px; font-weight:500; color:var(--sh-soft); padding:9px 13px; border-radius:8px; display:inline-flex; align-items:center; gap:5px; text-decoration:none; white-space:nowrap; transition:color .15s, background .15s; }
.sh-navitem > a:hover, .sh-navitem > button:hover, .sh-navitem.open > button{ color:var(--sh-ink); background:var(--sh-bg-2); }
.sh-navitem .sh-caret{ width:9px; height:9px; opacity:.55; transition:transform .18s; }
.sh-navitem.open .sh-caret{ transform:rotate(180deg); }
.sh-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }

/* dropdown */
.sh-menu{ position:absolute; top:calc(100% + 10px); left:0; min-width:260px; background:var(--sh-bg); border:1px solid var(--sh-line); border-radius:14px; box-shadow:0 18px 50px -18px rgba(0,0,0,.28); padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s, transform .16s, visibility .16s; }
/* transparent bridge so the pointer can cross from the trigger into the menu without the hover dropping (no dead-zone) */
.sh-menu::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.sh-navitem.open .sh-menu{ opacity:1; visibility:visible; transform:none; }
@media(min-width:1081px){ .sh-navitem:hover .sh-menu, .sh-navitem:focus-within .sh-menu{ opacity:1; visibility:visible; transform:none; } }
.sh-menu.sh-menu-wide{ min-width:520px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.sh-mi{ display:block; text-decoration:none; padding:10px 12px; border-radius:9px; color:var(--sh-ink); }
.sh-mi:hover{ background:var(--sh-bg-2); }
.sh-mi .sh-mi-t{ display:block; font-size:13.5px; font-weight:600; }
.sh-mi .sh-mi-d{ display:block; font-size:12px; color:var(--sh-muted); margin-top:2px; line-height:1.4; }

/* buttons */
.sh-btn{ appearance:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:14px; font-weight:600; padding:9px 16px; border-radius:9px; border:1.5px solid transparent; transition:all .16s; white-space:nowrap; }
.sh-btn-primary{ background:var(--sh-brand); color:#fff; border-color:var(--sh-brand); }
.sh-btn-primary:hover{ background:var(--bk-brand-hover, #8e1917); border-color:var(--bk-brand-hover, #8e1917); }
.sh-btn-outline{ background:transparent; color:var(--sh-ink); border-color:var(--sh-line); }
.sh-btn-outline:hover{ border-color:var(--sh-ink); }
.sh-btn-ghost{ background:transparent; color:var(--sh-soft); border-color:transparent; }
.sh-btn-ghost:hover{ color:var(--sh-ink); background:var(--sh-bg-2); }
.sh-btn-lg{ font-size:15px; padding:13px 22px; border-radius:11px; }

/* mobile */
.sh-burger{ display:none; appearance:none; background:none; border:1px solid var(--sh-line); border-radius:9px; width:40px; height:40px; cursor:pointer; align-items:center; justify-content:center; }
.sh-burger svg{ width:20px; height:20px; }
.sh-drawer{ display:none; }
@media (max-width: 1080px){
  .sh-links, .sh-actions .sh-desk{ display:none; }
  .sh-burger{ display:inline-flex; }
  .sh-actions{ gap:6px; }
  /* full-screen sheet; kept display:none when closed so it never extends the page width (no phantom mobile scroll) */
  /* The sticky header has a backdrop-filter, which makes it the containing block for this fixed sheet, so bottom:0 would resolve against the 64px header. Size the sheet from the viewport instead. */
  .sh-drawer{ display:none; position:fixed; top:var(--sh-nav-h); left:0; right:0; height:calc(100vh - var(--sh-nav-h)); height:calc(100dvh - var(--sh-nav-h)); background:var(--sh-bg); z-index:99; padding:16px 22px 40px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  body.sh-drawer-open{ overflow:hidden; }
  /* Phone-only sticky action bar on long pages (shown by the footer script after ~1 screen of scroll, hidden once the footer is in view) */
  .sh-mcta{ position:fixed; left:0; right:0; bottom:0; z-index:98; display:flex; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(8px); border-top:1px solid var(--sh-line); transform:translateY(110%); transition:transform .25s ease; }
  .sh-mcta.show{ transform:none; }
  .sh-mcta .sh-btn{ flex:1 1 0; justify-content:center; padding:11px 10px; font-size:14px; }
  body.sh-mcta-on{ padding-bottom:64px; }
  @media (prefers-reduced-motion: reduce){ .sh-mcta{ transition:none; } }
  .sh-drawer.open{ display:block; animation:sh-drawer-in .18s ease; }
  .sh-drawer .sh-dgroup{ border-bottom:1px solid var(--sh-line); padding:14px 0; }
  .sh-drawer .sh-dgroup > .sh-dlabel{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--sh-muted); }
  .sh-drawer a{ display:block; text-decoration:none; color:var(--sh-ink); font-size:15px; padding:12px 0; min-height:44px; box-sizing:border-box; font-weight:500; }
  .sh-drawer .sh-dactions{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
}
@keyframes sh-drawer-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
/* guard: no marketing page should scroll sideways (decorative bleeds, off-canvas UI) */
body.sh-scope{ overflow-x:hidden; }

/* ---------------- SECTION SYSTEM ---------------- */
.sx-sec{ padding:76px 0; }
.sx-sec.sx-tint{ background:var(--sh-bg-2); }
.sx-head{ max-width:720px; margin:0 auto 44px; text-align:center; }
.sx-eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sh-brand); margin-bottom:14px; }
.sx-h1{ font-size:clamp(38px,5.2vw,60px); line-height:1.03; letter-spacing:-.035em; font-weight:800; margin:0; }
.sx-h1 em{ font-style:normal; color:var(--sh-brand); }
.sx-h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.08; letter-spacing:-.03em; font-weight:800; margin:0; text-wrap:balance; }
.sx-lead{ font-size:17px; line-height:1.6; color:var(--sh-soft); margin:16px 0 0; }
.sx-kicker{ font-size:14px; line-height:1.5; color:var(--sh-muted); }

/* generic grids + cards */
.sx-grid{ display:grid; gap:18px; }
.sx-g2{ grid-template-columns:repeat(2,1fr); }
.sx-g3{ grid-template-columns:repeat(3,1fr); }
.sx-g4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .sx-g3,.sx-g4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .sx-g2,.sx-g3,.sx-g4{ grid-template-columns:1fr; } }
.sx-card{ background:var(--sh-bg); border:1px solid var(--sh-line); border-radius:16px; padding:24px; display:flex; flex-direction:column; }
.sx-card .sx-ic{ width:42px; height:42px; border-radius:11px; background:var(--bk-brand-tint, #fbeceb); color:var(--sh-brand); display:grid; place-items:center; margin-bottom:16px; }
.sx-card .sx-ic svg{ width:22px; height:22px; }
.sx-card h3{ font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px; }
.sx-card p{ font-size:14px; line-height:1.6; color:var(--sh-soft); margin:0; }
.sx-card .sx-more{ margin-top:14px; font-size:13.5px; font-weight:600; color:var(--sh-brand); text-decoration:none; }
.sx-card .sx-more:hover{ text-decoration:underline; }

/* badges (reassurance row) */
.sx-badges{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.sx-badge{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--sh-soft); background:var(--sh-bg); border:1px solid var(--sh-line); border-radius:999px; padding:8px 14px; }
.sx-badge svg{ width:15px; height:15px; color:var(--sh-brand); }

/* proof strip */
.sx-proof{ text-align:center; }
.sx-proof .sx-proof-t{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sh-muted); }
.sx-proof-stats{ display:flex; gap:44px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.sx-stat .sx-stat-n{ font-size:34px; font-weight:800; letter-spacing:-.03em; }
.sx-stat .sx-stat-l{ font-size:13px; color:var(--sh-muted); margin-top:2px; }

/* coverage split */
.sx-cover{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:820px){ .sx-cover{ grid-template-columns:1fr; } }
.sx-cover-card{ border:1px solid var(--sh-line); border-radius:18px; padding:26px; }
.sx-cover-card.own{ background:linear-gradient(180deg, var(--bk-brand-tint, #fbeceb), var(--sh-bg)); border-color:color-mix(in srgb, var(--sh-brand) 30%, var(--sh-line)); }
.sx-cover-card .sx-cc-tag{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--sh-brand); }
.sx-cover-card .sx-cc-tag.glob{ color:var(--sh-muted); }
.sx-cover-card h3{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:10px 0 8px; }
.sx-cover-card p{ font-size:14.5px; line-height:1.6; color:var(--sh-soft); margin:0 0 14px; }
.sx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sx-chip{ font-size:12.5px; font-weight:600; background:var(--sh-bg); border:1px solid var(--sh-line); border-radius:8px; padding:6px 11px; }

/* faq */
.sx-faq{ max-width:760px; margin:0 auto; }
.sx-faq details{ border-bottom:1px solid var(--sh-line); }
.sx-faq summary{ cursor:pointer; list-style:none; padding:18px 0; font-size:16px; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.sx-faq summary::-webkit-details-marker{ display:none; }
.sx-faq summary::after{ content:"+"; font-size:22px; color:var(--sh-muted); font-weight:400; }
.sx-faq details[open] summary::after{ content:"\2212"; }
.sx-faq .sx-faq-b{ padding:0 0 18px; font-size:14.5px; line-height:1.65; color:var(--sh-soft); max-width:66ch; }

/* CTA band */
.sx-ctaband{ background:var(--bk-gray-900); color:#fff; border-radius:22px; padding:48px 40px; text-align:center; }
.sx-ctaband h2{ font-size:clamp(26px,3vw,36px); font-weight:800; letter-spacing:-.03em; margin:0 0 10px; text-wrap:balance; }
.sx-ctaband p{ font-size:16px; color:rgba(255,255,255,.72); margin:0 0 24px; }
.sx-ctaband .sx-cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.sx-ctaband .sh-btn-outline{ color:#fff; border-color:rgba(255,255,255,.28); }
.sx-ctaband .sh-btn-outline:hover{ border-color:#fff; }

/* ---------------- FOOTER ---------------- */
.sh-foot{ border-top:1px solid var(--sh-line); background:var(--sh-bg-2); padding:56px 0 32px; }
.sh-foot-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:28px; }
@media(max-width:860px){ .sh-foot-grid{ grid-template-columns:1fr 1fr; } }
.sh-foot-brand .sh-brand{ margin-bottom:12px; }
.sh-foot-brand p{ font-size:13px; line-height:1.6; color:var(--sh-muted); max-width:30ch; }
.sh-foot-col h4{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--sh-muted); margin:0 0 14px; }
.sh-foot-col a{ display:block; font-size:13.5px; color:var(--sh-soft); text-decoration:none; padding:5px 0; }
.sh-foot-col a:hover{ color:var(--sh-ink); }
.sh-foot-bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--sh-line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--sh-muted); }