/* =====================================================================
   Syntheo — "Signal" design system (dark intelligence terminal)
   ONE stylesheet, ALL pages. Re-themes the legacy component vocabulary
   for dark + folds in the bespoke homepage components.
   Green accent lives on --sig; legacy token NAMES are kept (pointed at
   dark values) so existing inline styles degrade gracefully.
   Radius: panels 14 · inner 8 · pills/CTA full.
   ===================================================================== */

/* ---- 0. FONTS (self-hosted, variable) ---- */
@font-face { font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/geist.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/geist-mono.woff2") format("woff2"); }

/* ---- 1. TOKENS ---- */
:root {
  color-scheme: dark;

  /* Signal core */
  --bg:      #0B0C0E;
  --bg-1:    #101216;
  --bg-2:    #15181D;
  --bg-3:    #1B1F25;
  --line:    rgba(232,234,237,0.08);
  --line-2:  rgba(232,234,237,0.14);
  --line-3:  rgba(232,234,237,0.22);
  --ink:     #E8EAED;
  --ink-2:   #A6ACB4;
  --ink-3:   #7C838C;
  --meta:    #8C939C;
  --sig:     #00E08A;
  --sig-2:   #37EBA3;
  --sig-dim: rgba(0,224,138,0.12);
  --sig-line: rgba(0,224,138,0.34);
  --sig-ink: #04170E;

  /* Legacy names kept, pointed at dark values so inline styles still read */
  --primary:    #0B0C0E;   /* dark base (inline: cta-band btn text, active chip bg) */
  --secondary:  #E8EAED;
  --on-surface: #E8EAED;   /* body text */
  --tertiary:   #191D22;   /* elevated fill (card--accent, btn--secondary, price--featured) */
  --neutral:    #E8EAED;   /* light-on-dark (inline: cta-band btn bg, chip text) */
  --surface:    #101216;   /* panels: header, card, menu, hero visual, price, form */
  --muted:      #262A31;   /* borders + inline dots */
  --accent:     #15181D;   /* subtle surface: hover, bg-accent, note, muted chip */
  --banner:     #101216;
  --warning:    #00E08A;   /* legacy accent → green (New badge/chip) */
  --error:      #F0776A;
  --ink-60:     #A6ACB4;
  --ink-45:     #8C939C;

  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-none: 0px; --r-sm: 8px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-full: 9999px;
  --r: 14px;

  --s-xs: 6px; --s-sm: 14px; --s-md: 24px; --s-lg: 40px; --s-xl: 64px;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(72px, 9vw, 120px);
  --maxw: 1200px;

  --shadow-overlay: 0 24px 70px rgba(0,0,0,0.55);
  --shadow-panel:   0 20px 60px rgba(0,0,0,0.5);
  --shadow-bottombar: 0 -6px 24px rgba(0,0,0,0.5);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 2. RESET / BASE ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-width: 320px; background: var(--bg); color: var(--on-surface);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
  font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--sig); color: var(--sig-ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-lg) 0; }

/* ambient signal glow + faint grain (fixed, pointer-safe) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 82% -6%, rgba(0,224,138,0.09), transparent 60%),
    radial-gradient(46% 38% at 6% 0%, rgba(120,140,255,0.045), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.028; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; border-radius: var(--r-sm); background: var(--sig); color: var(--sig-ink); font-weight: 600; font-size: 14px; }
.skip-link:focus { left: 12px; top: 12px; }

/* mask-based icons + brand logos — colorable via currentColor */
.i { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* ---- 3. TYPOGRAPHY ---- */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.display { font-family: var(--font-display); font-weight: 600; font-size: clamp(42px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }
.h-lg { font-weight: 600; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -0.03em; }
.h-md { font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -0.025em; }
.h-sm { font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; }
.h2 { font-weight: 600; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; }
.h3 { font-weight: 600; font-size: clamp(19px, 2.2vw, 25px); line-height: 1.2; letter-spacing: -0.02em; }

.body-xl { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-2); }
.body-lg { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.body-md { font-size: 16px; line-height: 1.6; }
.body-sm { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lead { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }

.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sig); }
.meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); font-feature-settings: "tnum"; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.label-lg { font-size: 16px; font-weight: 500; line-height: 1.5; }
.label-md { font-size: 14px; font-weight: 500; line-height: 1.4; }
.label-sm { font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 0.02em; }
.accent { color: var(--sig); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- 4. LAYOUT ---- */
.section { width: min(var(--maxw), calc(100% - var(--gutter) * 2)); margin-inline: auto; padding-block: var(--section); position: relative; z-index: 1; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.wrap { width: min(var(--maxw), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.stack > * + * { margin-top: var(--s-md); }
.measure { max-width: 56ch; } .measure-sm { max-width: 44ch; }
.center { text-align: center; margin-inline: auto; }
.grid { display: grid; gap: var(--s-md); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center; }

/* ---- 5. BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform 140ms var(--ease), background-color 160ms, color 160ms, border-color 160ms, box-shadow 200ms;
  will-change: transform;
}
.btn .i, .btn svg { width: 17px; height: 17px; }
.btn--primary { background: var(--sig); color: var(--sig-ink); }
.btn--primary:hover { background: var(--sig-2); box-shadow: 0 10px 34px rgba(0,224,138,0.28); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost, .btn--outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover, .btn--outline:hover { border-color: var(--line-3); background: var(--bg-2); transform: translateY(-1px); }
.btn--ghost:active, .btn--outline:active { transform: translateY(1px); }
.btn--secondary { background: var(--bg-2); color: var(--ink); border-color: var(--line-2); }
.btn--secondary:hover { background: var(--bg-3); }
.btn--link { min-height: auto; padding: 0; background: transparent; color: var(--ink); border-radius: 0; font-weight: 500; }
.btn--link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }
.textlink { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 7px; transition: gap 160ms var(--ease), color 160ms; }
.textlink .i, .textlink svg { width: 15px; height: 15px; color: var(--sig); transition: transform 200ms var(--ease); }
.textlink:hover { color: #fff; } .textlink:hover .i, .textlink:hover svg { transform: translateX(3px); }

/* ---- 6. CHROME ---- */
.banner { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 44px 8px 16px; position: relative; z-index: 60; background: var(--banner); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; line-height: 1.4; text-align: center; }
.banner a { color: var(--sig); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.banner__close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--ink-3); font-size: 18px; }
.banner__close:hover { background: var(--bg-3); color: var(--ink); }
.banner[hidden] { display: none; }

.site-header { position: sticky; top: 0; z-index: 55; background: rgba(11,12,14,0.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.nav { width: min(var(--maxw), calc(100% - var(--gutter) * 2)); margin-inline: auto; display: flex; align-items: center; gap: var(--s-md); height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 26px; height: 26px; flex: 0 0 auto; background: url("/brand-mark.svg") center / contain no-repeat; }
.brand__name { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.nav__links > li { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color 140ms, color 140ms; }
.nav__link:hover { background: var(--bg-2); color: var(--ink); }
.nav__link.is-current { background: var(--bg-2); color: var(--ink); }
.nav__caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: .55; }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 260px; padding: var(--s-md); background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-overlay); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; }
.nav__links > li:hover .menu, .nav__links > li:focus-within .menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu--wide { min-width: 540px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.menu__group-title { margin-bottom: 8px; }
.menu__item { display: block; padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-2); }
.menu__item:hover { background: var(--bg-2); color: var(--ink); }
.menu__foot { grid-column: 1 / -1; margin-top: 4px; padding-top: var(--s-sm); border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--sig); }

.nav__toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--ink); margin: 0 auto; position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; } .nav__toggle span::after { position: absolute; top: 6px; }

.mobile-menu { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: none; flex-direction: column; padding: 18px var(--gutter) calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; }
.mobile-menu[data-open="true"] { display: flex; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-bottom: var(--s-md); }
.mobile-menu__close { width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; font-size: 22px; color: var(--ink); }
.mobile-menu details { border-bottom: 1px solid var(--line); }
.mobile-menu summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; font-size: 18px; font-weight: 500; cursor: pointer; list-style: none; color: var(--ink); }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu details a { display: block; padding: 10px 4px 10px 16px; font-size: 16px; color: var(--ink-2); }
.mobile-menu__cta { margin-top: var(--s-lg); display: grid; gap: var(--s-sm); }

.bottom-bar { display: none; }
@media (max-width: 1024px) {
  .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg-1); border-top: 1px solid var(--line-2); box-shadow: var(--shadow-bottombar); transform: translateY(110%); transition: transform 220ms ease; }
  .bottom-bar[data-show="true"] { transform: translateY(0); }
  .bottom-bar .btn { min-height: 50px; width: 100%; }
  body.has-bottom-bar main { padding-bottom: 96px; }
}

.site-footer { position: relative; z-index: 1; background: var(--bg-1); border-top: 1px solid var(--line); margin-top: clamp(48px, 6vw, 96px); }
.footer__inner { width: min(var(--maxw), calc(100% - var(--gutter) * 2)); margin-inline: auto; padding-block: clamp(48px, 6vw, 80px); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--s-lg); }
.footer__col h4 { margin-bottom: var(--s-sm); }
.footer__col a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink-2); }
.footer__col a:hover { color: var(--ink); }
.footer__brandcol p { margin-top: var(--s-sm); font-size: 14px; color: var(--ink-3); max-width: 30ch; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm) var(--s-md); margin-top: var(--s-xl); padding-top: var(--s-md); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.footer__bottom a:hover { color: var(--ink); }
.footer__support { font-weight: 600; color: var(--sig) !important; }

/* ---- 7. LEGACY COMPONENTS (re-themed dark) ---- */
.hero { padding-block: clamp(44px, 7vw, 88px) clamp(40px, 6vw, 72px); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero .display { font-size: clamp(40px, 4.9vw, 60px); line-height: 1.04; }
.hero__lead { margin-top: var(--s-md); max-width: 48ch; }
.hero__cta { margin-top: var(--s-lg); }
.hero__trust { margin-top: var(--s-md); font-size: 14px; color: var(--ink-3); }
.hero__visual { background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-panel); padding: var(--s-md); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full); background: var(--sig); color: var(--sig-ink); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.chip--quiet { background: var(--bg-3); color: var(--ink-2); }

.card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-md); }
.card--accent { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-lg); }
.card--pad-lg { padding: var(--s-lg); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-full); background: var(--bg-2); border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; color: var(--ink); }

.card.feature, .card.solution-card { display: flex; flex-direction: column; }
.feature .feature__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); color: var(--sig); display: grid; place-items: center; font-family: var(--font-mono); font-size: 15px; margin-bottom: var(--s-md); }
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--ink-2); }
.feature a { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--s-md); font-size: 14px; font-weight: 600; color: var(--sig); }
.feature a:hover { text-decoration: underline; text-underline-offset: 3px; }

.step h3 { margin: var(--s-sm) 0 6px; }
.step p { color: var(--ink-2); }
.step__n { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--sig); line-height: 1; letter-spacing: 0.12em; }

.solution-card h3 { margin-bottom: 8px; }
.solution-card p { color: var(--ink-2); }
.solution-card .workflows { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--s-md); font-size: 14px; font-weight: 600; color: var(--sig); }
.platform { display: flex; flex-direction: column; gap: 4px; }
.platform strong { font-weight: 600; }
.platform span { font-size: 13px; color: var(--ink-2); }

/* comparison table */
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; min-width: 520px; }
.compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.compare thead th { font-weight: 600; color: var(--ink); }
.compare td.yes, .compare .yes { color: var(--sig); font-weight: 700; }
.compare td.no, .compare .no { color: var(--ink-3); }
.compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; }
.compare thead th { vertical-align: bottom; }
.compare__plan { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.compare__plansub { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); margin-top: 2px; }
.compare th:nth-child(3), .compare td:nth-child(3) { background: var(--bg-2); }
.compare__group td { background: var(--bg-2); font-weight: 600; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--meta); }
.compare__feat { color: var(--ink); }
.compare__cta td { padding-top: 18px; border-bottom: 0; }
.compare__cta .btn { width: 100%; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-md); padding: 20px 0; font-size: 16px; font-weight: 500; cursor: pointer; list-style: none; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--sig); }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 0 20px; color: var(--ink-2); max-width: 70ch; }

/* billing toggle */
.billing { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: var(--s-lg); flex-wrap: wrap; }
.billing__label { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.billing__label.is-active { color: var(--ink); }
.billing__switch { position: relative; width: 54px; height: 30px; border-radius: var(--r-full); border: 1px solid var(--line-2); background: var(--bg-2); padding: 0; cursor: pointer; transition: background 160ms ease; }
.billing__switch[aria-checked="true"] { background: var(--sig); border-color: var(--sig); }
.billing__knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-2); transition: transform 160ms ease, background 160ms ease; }
.billing__switch[aria-checked="true"] .billing__knob { transform: translateX(24px); background: var(--sig-ink); }
.price__was { font-family: var(--font-display); font-size: 0.5em; color: var(--ink-3); text-decoration: line-through; margin-right: 10px; }
.amt-yearly, .price__was, .price__off { display: none; }
[data-billing="yearly"] .amt-monthly { display: none; }
[data-billing="yearly"] .amt-yearly { display: inline; }
[data-billing="yearly"] .price__was { display: inline; }
[data-billing="yearly"] .price__off { display: inline-flex; }
.price__off { margin-left: 10px; vertical-align: middle; }
.reassure { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.reassure svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* pricing cards */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-md); align-items: stretch; }
.price { display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r); padding: var(--s-lg); }
.price--featured { background: var(--bg-2); border-color: var(--sig-line); box-shadow: var(--shadow-panel); position: relative; }
.price--featured::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sig-line), transparent); }
.compare .no .i { width: 13px; height: 13px; opacity: 0.5; margin-inline: auto; }
.price__name { display: flex; align-items: center; gap: 10px; }
.price__amount { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 6vw, 56px); line-height: 1; margin: var(--s-sm) 0 4px; letter-spacing: -0.03em; }
.price__amount small { font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--ink-2); }
.price__period { font-size: 14px; color: var(--ink-2); }
.price ul { display: grid; gap: 10px; margin: var(--s-md) 0 var(--s-lg); }
.price li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); }
.price li::before { content: "✓"; color: var(--sig); font-weight: 700; }
.price .btn { margin-top: auto; }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* CTA band (dark panel; light button from inline overrides still reads) */
.cta-band { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink); border-radius: var(--r); padding: clamp(40px, 6vw, 80px); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sig-line), transparent); }
.cta-band .display, .cta-band .h-lg { color: var(--ink); }
.cta-band p { color: var(--ink-2); margin-top: var(--s-sm); }
.cta-band .cluster { justify-content: center; margin-top: var(--s-lg); }
.cta-band--accent { background: var(--bg-1); }
/* primary CTA inside a band: green fill overrides the legacy inline light-button hack */
.cta-band .btn--primary { background: var(--sig) !important; color: var(--sig-ink) !important; border-color: transparent !important; }
.cta-band .btn--outline { color: var(--ink) !important; border-color: var(--line-2) !important; }
.cta-band .btn--outline:hover { border-color: var(--line-3) !important; }

/* forms */
.field { display: block; margin-bottom: var(--s-md); }
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; font-size: 16px; font-family: var(--font-sans); background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sig); }
.form-card { background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r); padding: var(--s-lg); }

/* prose (legal / blog / help) */
.prose { max-width: 72ch; }
.prose h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); margin: var(--s-lg) 0 var(--s-sm); }
.prose h3 { font-family: var(--font-display); font-size: 21px; margin: var(--s-md) 0 8px; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.75; }
.prose p { margin-bottom: var(--s-sm); }
.prose ul { padding-left: 1.1em; list-style: disc; margin-bottom: var(--s-sm); }
.prose a { color: var(--sig); text-decoration: underline; text-underline-offset: 2px; }
.note { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-md); font-size: 14px; color: var(--ink-2); }

/* ---- 8. UTILITIES ---- */
.muted { color: var(--ink-2); }
.items-start { align-items: start; }
.mt-sm { margin-top: var(--s-sm); } .mt-md { margin-top: var(--s-md); } .mt-lg { margin-top: var(--s-lg); }
.mb-md { margin-bottom: var(--s-md); } .mb-lg { margin-bottom: var(--s-lg); }
.divider { height: 1px; background: var(--line); border: 0; }
.bg-accent { background: var(--bg-1); }
.section.bg-accent { border-radius: var(--r); padding-inline: clamp(24px, 4vw, 56px); border: 1px solid var(--line); }
@media (max-width: 640px) { .section.bg-accent { padding-inline: 20px; } }
.section-head { max-width: 62ch; margin-bottom: var(--s-lg); }
.section-head.center { margin-inline: auto; }
.section-head .eyebrow + .h-lg, .section-head .eyebrow + .h2 { margin-top: 14px; }

/* ---- 9. SIGNAL HOMEPAGE COMPONENTS ---- */
.hero__eyebrow { margin-bottom: 22px; }
.hero--signal .display { max-width: 15ch; }

.console { position: relative; background: linear-gradient(180deg, var(--bg-1), var(--bg)); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-panel); overflow: hidden; }
.console::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sig-line), transparent); }
.console__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.console__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 10px var(--sig); }
.console__title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.console__status { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--meta); letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 7px; }
.console__radar { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--sig-line); position: relative; overflow: hidden; }
.console__body { padding: 14px; display: grid; gap: 10px; }
.sig { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.sig__ico { width: 34px; height: 34px; border-radius: 8px; background: var(--bg-3); display: grid; place-items: center; color: var(--ink-2); }
.sig__ico .i { width: 18px; height: 18px; }
.sig__meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta); }
.sig__text { margin-top: 4px; font-size: 14px; color: var(--ink); line-height: 1.4; }
.sig__side { align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sig__time { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta); }
.tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--meta); }
.tag--hi { color: var(--sig); border-color: var(--sig-line); background: var(--sig-dim); }
.radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(0,224,138,0.55), transparent 42%); animation: sweep 3.6s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }

.surfaces { display: grid; gap: 22px; }
.surfaces__cap { text-align: center; color: var(--ink-2); font-size: 15px; }
.surf-row { display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; justify-content: center; }
.surf-row__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); }
.surf-logo { width: 26px; height: 26px; color: var(--ink); opacity: 0.58; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; transition: opacity 200ms, transform 200ms var(--ease); }
.surf-logo:hover { opacity: 1; transform: translateY(-2px); }
.surf-div { width: 1px; height: 26px; background: var(--line-2); }

.log { border-top: 1px solid var(--line); margin-top: 40px; }
.log__row { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.log__idx { font-family: var(--font-mono); font-size: 12px; color: var(--meta); letter-spacing: 0.1em; }
.log__text { font-size: clamp(16px, 1.8vw, 19px); color: var(--ink); }
.log__cost { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); white-space: nowrap; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.steps .step__line { height: 1px; background: var(--line-2); margin: 16px 0 20px; position: relative; }
.steps .step__line::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 8px var(--sig); }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; grid-auto-rows: minmax(200px, auto); }
.cell { position: relative; overflow: hidden; padding: 24px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; transition: border-color 220ms, transform 220ms var(--ease); }
.cell:hover { border-color: var(--line-3); transform: translateY(-3px); }
.cell__ico { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 16px; color: var(--sig); }
.cell__ico .i { width: 21px; height: 21px; }
.cell h3 { font-size: 19px; margin-bottom: 8px; }
.cell p { color: var(--ink-2); font-size: 14.5px; }
.cell .textlink { margin-top: auto; padding-top: 18px; font-size: 14px; }
.cell--a { grid-column: span 4; } .cell--b { grid-column: span 2; }
.cell--c { grid-column: span 3; } .cell--d { grid-column: span 3; }
.cell--e { grid-column: span 2; } .cell--f { grid-column: span 4; }
.cell--feature { background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); }
.mini-feed { margin-top: 16px; display: grid; gap: 8px; }
.mini-feed__row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.mini-feed__row .meta { font-size: 10px; }
.mini-feed__row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sig); flex: 0 0 auto; }
.mini-feed__row span.t { font-size: 12.5px; color: var(--ink); }
.spark { margin-top: 18px; width: 100%; height: 66px; }
.spark path.line { fill: none; stroke: var(--sig); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.meter { margin-top: 16px; display: grid; gap: 10px; }
.meter__row { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; }
.meter__row .meta { font-size: 10.5px; }
.meter__bar { height: 6px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 999px; background: var(--sig); }
.meter__val { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.alert-logos { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.alert-logos .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); font-size: 13px; color: var(--ink-2); font-weight: 500; letter-spacing: 0; }
.alert-logos .chip .i { width: 15px; height: 15px; color: var(--ink); }

.why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.matrix { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--bg-1); }
.matrix__row { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); align-items: center; }
.matrix__row + .matrix__row { border-top: 1px solid var(--line); }
.matrix__row > * { padding: 15px 14px; }
.matrix__head { background: var(--bg-2); }
.matrix__head span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); text-align: center; }
.matrix__head span:first-child { text-align: left; color: var(--ink-2); }
.matrix__name { font-size: 14px; color: var(--ink-2); }
.matrix__cell { text-align: center; }
.matrix__cell.yes .i { width: 18px; height: 18px; color: var(--sig); margin-inline: auto; }
.matrix__cell.no { color: var(--ink-3); }
.matrix__cell.no .i { width: 14px; height: 14px; opacity: 0.5; margin-inline: auto; }
.matrix__row--syn { background: var(--sig-dim); }
.matrix__row--syn .matrix__name { color: var(--ink); font-weight: 600; }

.aud-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.aud { scroll-snap-align: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); display: flex; flex-direction: column; min-height: 220px; }
.aud__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sig); }
.aud h3 { font-size: 20px; margin: 12px 0 10px; }
.aud p { color: var(--ink-2); font-size: 14.5px; }
.aud .textlink { margin-top: auto; padding-top: 18px; font-size: 14px; }

.band { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r); padding: clamp(32px, 5vw, 64px); background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); text-align: center; }
.band .lead { margin-inline: auto; margin-top: 14px; }
.band .cluster { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-final { position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--sig-line); background: radial-gradient(80% 120% at 50% -20%, rgba(0,224,138,0.16), transparent 60%), var(--bg-1); padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 40px); text-align: center; }
.cta-final .display { max-width: 18ch; margin-inline: auto; }
.cta-final .lead { margin: 18px auto 0; }
.cta-final .cluster { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-rings { position: absolute; inset: auto 0 -60% 0; height: 120%; pointer-events: none; opacity: 0.5; }

/* ---- 10. MOTION ---- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .radar__sweep, .console__dot { animation: none !important; }
}

/* ---- 11. RESPONSIVE ---- */
@media (max-width: 1024px) {
  .nav__links, .nav__actions { display: none; }
  .nav__toggle { display: grid; place-items: center; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-lg); }
  .why { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-md); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell--a, .cell--b, .cell--c, .cell--d, .cell--e, .cell--f { grid-column: span 3; }
  #crisp-chatbox { margin-bottom: 76px !important; }
}
@media (max-width: 768px) {
  :root { --section: clamp(56px, 12vw, 72px); }
  .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr; }
  .cell--a, .cell--b, .cell--c, .cell--d, .cell--e, .cell--f { grid-column: span 1; }
  .why { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .cta-band .cluster .btn, .hero__cta .btn { width: 100%; }
  .hero__cta .cluster { width: 100%; }
  .log__row { grid-template-columns: auto 1fr; }
  .log__cost { grid-column: 2; grid-row: 2; text-align: left; }
  .surf-div { display: none; }
}
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* comparison directory cards (compare hub) */
.cmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cmp { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); transition: border-color 200ms, transform 200ms var(--ease); }
.cmp:hover { border-color: var(--line-3); transform: translateY(-3px); }
.cmp__vs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
.cmp__name { font-size: 20px; margin: 10px 0 8px; }
.cmp__cat { color: var(--ink-2); font-size: 14px; }
.cmp .textlink { margin-top: 18px; font-size: 14px; }
.cmp-group { margin-top: 18px; }
.cmp-group__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); margin-bottom: 18px; display: block; }
@media (max-width: 900px) { .cmp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cmp-grid { grid-template-columns: 1fr; } }

/* faq-grid used by bespoke pages */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 48px; }
.qa { padding: 24px 0; border-top: 1px solid var(--line); }
.qa h3 { font-size: 17px; margin-bottom: 10px; }
.qa p { color: var(--ink-2); font-size: 15px; }

/* ---- Cookie consent (dark) ---- */
.cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-sm) var(--s-lg); padding: 16px var(--gutter); background: var(--bg-1); border-top: 1px solid var(--line-2); box-shadow: 0 -8px 30px rgba(0,0,0,0.5); }
.cookie-consent__text { margin: 0; max-width: 720px; flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cookie-consent__text a { color: var(--sig); text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-consent__btn { min-width: 116px; justify-content: center; }
.cookie-prefs { cursor: pointer; }
@media (max-width: 560px) { .cookie-consent { flex-direction: column; align-items: stretch; text-align: center; } .cookie-consent__actions { justify-content: center; } .cookie-consent__btn { flex: 1 1 0; } }