
:root{
  --bg:#FAFAF8; --surface:#FFFFFF; --surface-2:#F4F4F2;
  --ink:#101828; --ink-2:#475467; --ink-3:#667085;
  --line:#E4E7EC; --line-2:#D0D5DD;
  --accent:#5B4FE9; --accent-ink:#4F42D8; --accent-soft:#EEECFD;
  --ok:#067647; --ok-soft:#E7F6EE; --warn:#B54708; --danger:#B42318; --danger-soft:#FEE4E2;
  --grid-line:rgba(16,24,40,.045);
  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 4px 16px -2px rgba(16,24,40,.08);
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --container:1120px; --radius:10px; --radius-lg:16px;
  --speed:180ms; --ease:cubic-bezier(.2,.6,.3,1);
}
[data-theme="dark"]{
  --bg:#0B0D12; --surface:#12151C; --surface-2:#171B24;
  --ink:#F2F4F7; --ink-2:#98A2B3; --ink-3:#7A8499;
  --line:#232734; --line-2:#2E3342;
  --accent:#8B80F9; --accent-ink:#A79EFB; --accent-soft:#1D1B33;
  --ok:#3CCB7F; --ok-soft:#0D2B1D; --warn:#F79009; --danger:#F97066; --danger-soft:#331714;
  --grid-line:rgba(242,244,247,.025);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 20px -2px rgba(0,0,0,.5);
}

@font-face{font-family:'Bricolage Grotesque';src:url('/fonts/bricolage-grotesque-var.woff2') format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-var.woff2') format('woff2');font-weight:400 700;font-display:swap;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
pre{max-width:100%;overflow-x:auto}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(26px,3.2vw,38px)}
h3{font-size:clamp(18px,2vw,22px)}
p{max-width:68ch}
a{color:var(--accent-ink);text-decoration:none;transition:color var(--speed) var(--ease)}
a:hover{text-decoration:underline;text-underline-offset:3px}
img,svg{max-width:100%;vertical-align:middle}
code,pre,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--ink)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:12px;top:12px}
.blueprint{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:32px 32px}
@media(max-width:768px){.blueprint{background-image:none}}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:var(--radius);font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background var(--speed) var(--ease),border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease);text-decoration:none!important}
.btn-primary{background:var(--accent);color:#fff!important}
.btn-primary:hover{background:var(--accent-ink);box-shadow:var(--shadow-2)}
[data-theme="dark"] .btn-primary{color:#0B0D12!important}
.btn-ghost{background:transparent;color:var(--ink)!important;border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3);background:var(--surface-2)}
.btn-sm{min-height:38px;padding:7px 16px;font-size:14px}

/* ── Nav ── */
.sr-nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sr-nav .wrap{display:flex;align-items:center;gap:26px;height:64px}
.sr-brand{display:flex;align-items:center;gap:9px;color:var(--ink)!important;font-family:var(--display);font-weight:700;font-size:19px;text-decoration:none!important}
.sr-brand:hover{text-decoration:none}
.sr-links{display:flex;align-items:center;gap:22px;list-style:none;margin-left:auto}
.sr-links a{color:var(--ink-2)!important;font-size:14.5px;font-weight:500}
.sr-links a:hover{color:var(--ink)!important;text-decoration:none}
.sr-links a[aria-current="page"]{color:var(--accent-ink)!important}
.sr-links .sr-links-cta{display:none}
.sr-nav-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{background:none;border:1px solid var(--line-2);border-radius:8px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);transition:border-color var(--speed) var(--ease)}
.theme-toggle:hover{border-color:var(--ink-3)}
.nav-burger{display:none;background:none;border:1px solid var(--line-2);border-radius:8px;width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
@media(max-width:900px){
  .sr-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px 20px 16px;margin:0}
  .sr-links.open{display:flex}
  .sr-links li{width:100%}
  .sr-links .sr-links-cta{display:block}
  .sr-links a{display:block;padding:12px 0;font-size:16px}
  .nav-burger{display:inline-flex}
  .sr-nav-actions .btn-ghost{display:none}
}
@media(max-width:480px){
  .sr-nav .wrap{gap:12px}
  .sr-brand{font-size:17px}
  .sr-nav-actions{gap:8px}
  .sr-nav-actions .theme-toggle{display:none}
  .sr-nav-actions .btn-sm{min-height:38px;padding:7px 12px;font-size:13.5px}
}

/* ── Footer ── */
.sr-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:80px}
.sr-footer .wrap{padding:48px 20px 32px}
.sr-footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;margin-bottom:36px}
.sr-footer h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:14px;font-family:var(--sans)}
.sr-footer ul{list-style:none}
.sr-footer li{margin-bottom:9px}
.sr-footer a{color:var(--ink-2)!important;font-size:14px}
.sr-footer a:hover{color:var(--ink)!important}
.sr-footer-meta{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;color:var(--ink-3);font-size:13px}
.sr-footer-meta a{color:var(--ink-3)!important}
@media(max-width:768px){.sr-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.sr-footer-grid{grid-template-columns:1fr}}

/* ── Cards / chips / sections ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;transition:border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease)}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600;font-family:var(--mono);background:var(--accent-soft);color:var(--accent-ink);border:1px solid transparent}
.chip-line{background:var(--surface);border-color:var(--line-2);color:var(--ink-2)}
.section{padding:72px 0}
.section-head{margin-bottom:36px}
.eyebrow{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.lede{color:var(--ink-2);font-size:17px;margin-top:10px}

/* ── Data tables ── */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
table.data-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.data-table th{font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--surface-2)}
.data-table .num{white-space:nowrap}
@media(max-width:640px){
  .table-scroll.stack-sm{border:none;background:none;overflow:visible}
  .stack-sm table.data-table{min-width:0}
  .stack-sm .data-table thead{display:none}
  .stack-sm .data-table tr{display:block;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;background:var(--surface)}
  .stack-sm .data-table td{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);font-size:13.5px}
  .stack-sm .data-table td::before{content:attr(data-label);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding-top:2px}
  .stack-sm .data-table tr td:last-child{border-bottom:none}
}

/* ── FAQ ── */
details.faq{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:0 20px;margin-bottom:10px}
details.faq summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';font-family:var(--mono);font-size:18px;color:var(--ink-3);transition:transform var(--speed) var(--ease)}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .faq-body{padding:0 0 16px;color:var(--ink-2)}

/* ── Motion: content is ALWAYS visible — no scroll-triggered hiding.  ──
   .reveal is intentionally a no-op class (kept in markup for grepability);
   scroll-linked opacity reveals clamp to invisible in tall viewports
   (screenshots, crawlers, print) and read as dated. Motion lives in
   micro-interactions, the hero card, marquee, and count-ups instead. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ── Hero ── */
.seo-hero{max-width:860px;margin:0 auto;padding:56px 20px 40px;text-align:center}
.seo-hero h1 .hl{color:var(--accent-ink)}
.seo-hero .subtitle{color:var(--ink-2);font-size:18px;max-width:640px;margin:14px auto 28px;line-height:1.6}
.seo-hero .hero-sub{color:var(--ink-3);font-size:13px;margin-top:14px}

/* ── Content ── */
.seo-content{max-width:860px;margin:0 auto;padding:0 20px 48px}
.seo-content h2{margin:44px 0 16px}
.seo-content h3{font-family:var(--display);font-size:20px;font-weight:600;margin:28px 0 12px}
.seo-content p{margin-bottom:16px;font-size:16px;color:var(--ink);line-height:1.75}
.seo-content ul,.seo-content ol{margin:0 0 16px 24px}
.seo-content li{margin-bottom:8px;line-height:1.6}
.seo-content strong{color:var(--accent-ink)}

/* ── Widget ── */
.widget-section{max-width:1120px;margin:0 auto 48px;padding:0 20px}
.widget-section h2{text-align:center;margin-bottom:8px}
.widget-section .widget-sub{text-align:center;color:var(--ink-2);font-size:15px;margin-bottom:24px}
.widget-container{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;position:relative;min-height:200px}
.widget-loading{text-align:center;color:var(--ink-2);padding:40px 0;font-size:15px}
.widget-error{text-align:center;color:var(--danger);padding:40px 0;font-size:15px}
.carrier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.carrier-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px;transition:border-color var(--speed) var(--ease),transform var(--speed) var(--ease)}
.carrier-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.carrier-card.cheapest{border-color:var(--ok);position:relative}
.carrier-card.cheapest::after{content:'CHEAPEST';position:absolute;top:10px;right:10px;background:var(--ok);color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;padding:3px 8px;border-radius:4px;font-family:var(--mono)}
.carrier-name{font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:10px;color:var(--ink)}
.carrier-detail{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.carrier-detail:last-child{border-bottom:none}
.carrier-detail .label{color:var(--ink-2)}
.carrier-detail .value{font-weight:600;font-family:var(--mono)}
.carrier-detail .value.cost{color:var(--accent-ink)}
.widget-unlock{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.widget-unlock a{color:var(--accent-ink);font-weight:600}

/* ── Container type selector ── */
.ct-selector{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.ct-btn{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);padding:8px 18px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all var(--speed) var(--ease);font-family:var(--sans)}
.ct-btn:hover{border-color:var(--line-2);color:var(--ink)}
.ct-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── FAQ (uses details.faq from base CSS) ── */
.faq-section{max-width:860px;margin:0 auto;padding:0 20px 56px}
.faq-section h2{text-align:center;margin-bottom:28px}

/* ── Stats ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:32px 0}
.stat-card{text-align:center}
.stat-card .stat-value{font-family:var(--display);font-size:32px;font-weight:800;color:var(--accent-ink);margin-bottom:4px}
.stat-card .stat-label{color:var(--ink-2);font-size:13px;text-transform:uppercase;letter-spacing:.05em}

/* ── Related guides ── */
.related-articles{max-width:860px;margin:0 auto;padding:0 20px 48px}
.related-articles h2{font-size:22px;margin-bottom:20px}
.article-link{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:12px;text-decoration:none!important;color:var(--ink)!important;transition:border-color var(--speed) var(--ease),transform var(--speed) var(--ease)}
.article-link:hover{border-color:var(--line-2);transform:translateY(-2px)}
.article-link h3{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:4px;color:var(--ink)}
.article-link p{color:var(--ink-2);font-size:14px;margin:0}

/* ── CTA banner ── */
.cta-banner{max-width:860px;margin:0 auto 48px;padding:0 20px}
.cta-banner-inner{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;text-align:center}
.cta-banner-inner h2{font-size:28px;margin-bottom:10px}
.cta-banner-inner p{color:var(--ink-2);font-size:16px;margin-bottom:24px;max-width:500px;margin-left:auto;margin-right:auto}
.cta-banner-inner .cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Agent / decision / path cards (for-agents page) ── */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:28px 0}
.agent-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.agent-card h3{font-family:var(--display);font-size:18px;margin-bottom:8px}
.agent-card p{margin:0;color:var(--ink-2);font-size:14px}
.path-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:32px 0}
.path-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.path-card h3{font-family:var(--display);font-size:20px;margin-bottom:10px}
.path-card .mono{display:block;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--accent-ink);font-family:var(--mono);font-size:12px;word-break:break-all;margin:12px 0}
.path-card ul{margin:0 0 0 18px}
.path-card li{margin-bottom:8px}
.decision-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:32px 0}
.decision-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.decision-card h3{font-family:var(--display);font-size:21px;margin-bottom:12px}
.decision-card p{color:var(--ink-2)}
.diagram{margin:32px 0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px}
.diagram img{width:100%;display:block;border-radius:var(--radius)}
.microcopy{font-size:13px;color:var(--ink-2)}

/* ── Invoice check form + result ── */
.ic-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.ic-field{display:flex;flex-direction:column;gap:6px}
.ic-field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.ic-field select,.ic-field input{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;color:var(--ink);font-family:var(--sans);width:100%;transition:border-color var(--speed) var(--ease)}
.ic-field select:focus,.ic-field input:focus{outline:none;border-color:var(--accent)}
.ic-go-wrap{grid-column:1/-1;display:flex;align-items:flex-end}
.ic-example{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:560px}
.ic-example-tag{background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.4px;padding:7px 14px;text-transform:uppercase;font-family:var(--mono)}
.ic-example-body{padding:16px 18px;background:var(--surface-2)}
.ic-result{margin-top:16px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}

@media(max-width:640px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .ct-selector{gap:6px}
  .ct-btn{padding:6px 12px;font-size:13px}
}

.showcase-notice{border-bottom:1px solid var(--line);background:var(--accent-soft);font-size:13px;line-height:1.7;color:var(--ink-2)}
.showcase-notice .wrap{padding-top:12px;padding-bottom:12px}.showcase-notice strong{color:var(--accent-ink)}
.preview-label{font-family:var(--mono);font-size:12px;color:var(--warn);display:block;margin-bottom:12px}
.showcase-panel{padding:26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.showcase-panel p{color:var(--ink-2);margin:10px 0 18px}.showcase-panel .btn{margin:0 8px 8px 0}
.proof-card .sr-row,.proof-card .overbill-flag{opacity:1}.sr-footer-meta{padding-bottom:var(--footer-safe-space,0px)}
@media(max-width:760px){body.has-sticky{--footer-safe-space:70px}}

.i-032bb6c22e43{color:var(--ink-3);font-size:12.5px;margin-top:14px}
.i-55e113a85c69{color:var(--ink-2);font-size:14px;margin-top:12px;max-width:34ch}
.i-b56987dbcbbe{margin-bottom:12px}
.i-f072fad9b83a{color:var(--accent-ink)}