/* ---------------------------------------------------------------------------
   Self-hosted webfonts.

   These files were previously pulled from fonts.googleapis.com on every page
   load, which sent each visitor IP address to Google in the US with no consent
   and no legal basis (LG Munchen I, 3 O 17493/20). They are served from our own
   domain now, so the site makes no third-party request at all. Do not put the
   Google Fonts <link> back - privacy-policy.html section 12 states outright
   that every file this site loads comes from our own domain.

   Both faces are variable fonts, so one file covers the whole weight range.
   Latin and latin-ext only: the site is English-language and the other Google
   subsets (cyrillic, greek, vietnamese) would triple the payload unused.
   --------------------------------------------------------------------------- */

/* Inter - latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter - latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk - latin */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk - latin-ext */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   SideBIP - Marketing Site Design System v4
   Standalone (no framework). Light + Dark, fully responsive.
   Typography: Space Grotesk (display) · Inter (body) · mono (labels)
   Visual language: deep-ink panels that echo the product UI, electric
   blue→cyan accent, brand "circle" colors (teal/pink/gold/olive) as
   small accents only.
   ========================================================================== */

:root {
  /* Brand accent */
  --primary: 221 83% 53%;
  --primary-2: 192 91% 44%;
  --primary-fg: 0 0% 100%;

  /* Surfaces (theme-aware) */
  --bg: 220 30% 97%;
  --bg-2: 0 0% 100%;
  --bg-3: 220 27% 93.5%;
  --fg: 229 45% 10%;
  --fg-1: 229 45% 10%;
  --fg-muted: 227 13% 42%;

  /* Ink - theme-INDEPENDENT dark panels (hero, CTA, auth aside).
     Matches the product's dark UI so screenshots blend in. */
  --ink: 228 45% 5%;
  --ink-2: 228 38% 8%;
  --ink-3: 228 30% 12%;
  --ink-border: 227 26% 17%;
  --ink-fg: 220 40% 97%;
  --ink-muted: 224 18% 68%;

  /* Brand circle colors (from the logo) - accents only */
  --dot-teal: 187 46% 53%;
  --dot-pink: 340 44% 65%;
  --dot-gold: 45 56% 60%;
  --dot-olive: 84 28% 52%;

  /* Lines & states */
  --border: 223 20% 88%;
  --ring: 221 83% 53%;
  --success: 152 55% 34%;
  --warning: 36 92% 44%;
  --danger: 0 72% 48%;

  /* Effects */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / .05), 0 1px 3px rgb(15 23 42 / .06);
  --shadow-md: 0 6px 16px -4px rgb(15 23 42 / .1), 0 2px 6px -2px rgb(15 23 42 / .06);
  --shadow-lg: 0 18px 44px -12px rgb(15 23 42 / .18), 0 8px 16px -8px rgb(15 23 42 / .08);
  --shadow-xl: 0 36px 70px -22px rgb(15 23 42 / .28);
  --glow: 0 0 0 1px hsl(var(--primary) / .12), 0 14px 40px -10px hsl(var(--primary) / .4);

  --container: 1200px;
  --header-h: 76px; /* sticky rail; the floating capsule inside is 58px */

  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", SFMono-Regular,
    Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --primary: 217 92% 63%;
  --primary-2: 192 95% 55%;
  --primary-fg: 228 45% 6%;

  --bg: 228 42% 5%;
  --bg-2: 228 35% 8%;
  --bg-3: 228 28% 12%;
  --fg: 220 38% 96%;
  --fg-1: 220 38% 96%;
  --fg-muted: 225 15% 66%;

  --border: 228 23% 15%;
  --ring: 217 92% 63%;
  --success: 152 55% 48%;
  --warning: 36 92% 56%;
  --danger: 0 82% 62%;

  --shadow-sm: 0 1px 3px rgb(0 0 0 / .5);
  --shadow-md: 0 6px 16px -4px rgb(0 0 0 / .55);
  --shadow-lg: 0 18px 44px -12px rgb(0 0 0 / .65);
  --shadow-xl: 0 36px 70px -22px rgb(0 0 0 / .75);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* overflow-x: clip, not hidden. `hidden` makes html/body scroll containers,
   which silently kills position:sticky on their descendants - the site header
   scrolled away with the page. `clip` cuts the same horizontal overflow
   without creating a scroll container. The `hidden` line stays first as the
   fallback for browsers that don't know `clip` (Safari < 16). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: hsl(var(--fg));
  background: hsl(var(--bg));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.005em;
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: hsl(var(--primary)); text-decoration: none; transition: color .15s ease; }
a:hover { color: hsl(var(--primary-2)); }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul, ol { padding-left: 1.25rem; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p  { color: hsl(var(--fg) / 0.82); }
.muted { color: hsl(var(--fg-muted)); }
hr { border: 0; height: 1px; background: hsl(var(--border)); margin: 2rem 0; }
::selection { background: hsl(var(--primary) / .25); }

/* Focus */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.section--tight { padding: clamp(2rem, 5vw, 4rem) 0; }
.grid { display: grid; gap: 1.5rem; }
.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)); }
.flex { display: flex; gap: 1rem; }
.flex-col { display: flex; flex-direction: column; gap: 1rem; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
.mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } /* legacy helpers */
.max-w-prose { max-width: 65ch; margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 48rem; margin-left: auto; margin-right: auto; }
.center { text-align: center; }

/* ---------- Ink panel primitives ---------- */
.ink {
  position: relative;
  background:
    radial-gradient(1100px 500px at 75% -20%, hsl(var(--primary) / .22), transparent 60%),
    radial-gradient(800px 420px at 8% 110%, hsl(var(--primary-2) / .13), transparent 55%),
    hsl(var(--ink));
  color: hsl(var(--ink-fg));
  overflow: hidden;
}
.ink::before { /* fine grid lines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(hsl(var(--ink-fg) / .045) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--ink-fg) / .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 90% at 50% 0%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, black 30%, transparent 78%);
}
.ink > * { position: relative; z-index: 1; }
.ink h1, .ink h2, .ink h3 { color: hsl(var(--ink-fg)); }
.ink p { color: hsl(var(--ink-muted)); }

/* ---------- Eyebrow / typography helpers ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-2)));
}
.ink .eyebrow { color: hsl(var(--primary-2)); }
.lead { font-size: 1.15rem; line-height: 1.6; color: hsl(var(--fg) / 0.75); }
.ink .lead { color: hsl(var(--ink-muted)); }
.text-gradient {
  background: linear-gradient(100deg, hsl(var(--primary)) 10%, hsl(var(--primary-2)) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: hsl(var(--primary));
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.005em;
  border-radius: 11px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 8px 20px -8px hsl(var(--primary) / .55);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease,
    border-color .15s ease, filter .15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 12px 26px -8px hsl(var(--primary) / .6);
  color: var(--btn-fg);
}
.btn:active { transform: translateY(0); filter: brightness(.98); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.02rem; border-radius: 13px; }
.btn-sm { padding: .5rem .95rem; font-size: .85rem; border-radius: 9px; }

.btn-primary { /* default */ }
.btn-outline {
  --btn-bg: transparent;
  --btn-fg: hsl(var(--fg));
  --btn-bd: hsl(var(--fg) / .22);
  box-shadow: none;
}
.btn-outline:hover {
  --btn-bd: hsl(var(--primary) / .65); --btn-fg: hsl(var(--primary));
  box-shadow: none; filter: none;
}
.ink .btn-outline, .hero-product .btn-outline, .cta-banner .btn-outline,
.auth-brand .btn-outline, .btn-outline.on-ink {
  --btn-fg: hsl(var(--ink-fg)); --btn-bd: hsl(var(--ink-fg) / .28);
}
.ink .btn-outline:hover, .hero-product .btn-outline:hover,
.cta-banner .btn-outline:hover, .auth-brand .btn-outline:hover {
  --btn-bd: hsl(var(--ink-fg) / .6); --btn-fg: #fff;
}

.btn-ghost { --btn-bg: transparent; --btn-fg: hsl(var(--fg)); --btn-bd: transparent; box-shadow: none; }
.btn-ghost:hover { --btn-bg: hsl(var(--bg-3)); box-shadow: none; filter: none; }

.btn-on-dark {
  --btn-bg: #fff; --btn-fg: hsl(228 45% 8%);
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / .6);
}
.btn-on-dark:hover { box-shadow: 0 14px 30px -10px rgb(0 0 0 / .65); }
.btn-on-dark.btn-outline { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.35); box-shadow: none; }
.btn-on-dark.btn-outline:hover { --btn-bd: #fff; --btn-fg: #fff; }

/* ---------- Surface / Card ---------- */
.card {
  position: relative;
  background: hsl(var(--bg-2));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-hover:hover, .feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: hsl(var(--primary) / .4);
}
.card-icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, hsl(var(--primary) / .14), hsl(var(--primary-2) / .14));
  border: 1px solid hsl(var(--primary) / .2);
  color: hsl(var(--primary));
  margin-bottom: 1rem;
}

.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .75rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  background: hsl(var(--primary) / .1);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / .3);
}
.ink .badge, .hero-product .badge, .cta-banner .badge, .auth-brand .badge {
  background: hsl(var(--ink-fg) / .07);
  color: hsl(var(--primary-2));
  border-color: hsl(var(--ink-fg) / .16);
  backdrop-filter: blur(6px);
}
.badge-success { background: hsl(var(--success) / .1); color: hsl(var(--success)); border-color: hsl(var(--success) / .3); }
.badge-warn    { background: hsl(var(--warning) / .1); color: hsl(var(--warning)); border-color: hsl(var(--warning) / .3); }

/* Brand circle dots (logo motif) - animates in as scattered sources converging into the
   actual SideBIP mark shape: one dominant front circle with three others peeking behind it,
   same relative positions/sizes as the real logo (see partials/header.html's brand icon). */
.brand-dots { position: relative; width: 100px; height: 65.5px; flex-shrink: 0; }
.brand-dots i {
  position: absolute;
  border-radius: 50%;
  display: block;
}
/* Positions measured directly from images/SideBIP_Large_Icon.png's actual pixel geometry
   (circle centers/radii reconstructed from each color's visible, possibly-occluded region),
   not guessed - the old inline SVG mark this used to copy was itself an inaccurate approximation. */
.brand-dots i:nth-child(1) { background: hsl(var(--dot-olive)); width: 29.8px; height: 29.8px; left: 0;     top: 35.5px; z-index: 1; }
.brand-dots i:nth-child(2) { background: hsl(var(--dot-teal));  width: 51.3px; height: 51.3px; left: 19.1px; top: 14px;   z-index: 3; }
.brand-dots i:nth-child(3) { background: hsl(var(--dot-pink));  width: 29.6px; height: 29.6px; left: 51.9px; top: 0;     z-index: 1; }
.brand-dots i:nth-child(4) { background: hsl(var(--dot-gold));  width: 46px;   height: 46px;   left: 54px;   top: 19.4px; z-index: 2; }

@keyframes dot-converge-1 { from { transform: translate(-40px, 25px) scale(.4); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes dot-converge-2 { from { transform: translate(-8px, -42px) scale(.4); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes dot-converge-3 { from { transform: translate(42px, -35px) scale(.4); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes dot-converge-4 { from { transform: translate(46px, 20px) scale(.4); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
.card.animate-in .brand-dots i:nth-child(1) { animation: dot-converge-1 .8s cubic-bezier(.2,.7,.3,1) .35s both; }
.card.animate-in .brand-dots i:nth-child(2) { animation: dot-converge-2 .8s cubic-bezier(.2,.7,.3,1) .45s both; }
.card.animate-in .brand-dots i:nth-child(3) { animation: dot-converge-3 .8s cubic-bezier(.2,.7,.3,1) .4s both; }
.card.animate-in .brand-dots i:nth-child(4) { animation: dot-converge-4 .8s cubic-bezier(.2,.7,.3,1) .5s both; }
/* Also replays on hover. Uses separate @keyframes names (not dot-converge-N) on purpose:
   reapplying the SAME animation-name via a different rule does not restart a finished
   CSS animation in any browser - the name itself must change for it to play again. */
@keyframes dot-converge-1-hover { from { transform: translate(-40px, 25px) scale(.4); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes dot-converge-2-hover { from { transform: translate(-8px, -42px) scale(.4); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes dot-converge-3-hover { from { transform: translate(42px, -35px) scale(.4); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes dot-converge-4-hover { from { transform: translate(46px, 20px) scale(.4); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@media (hover: hover) {
  .card:hover .brand-dots i:nth-child(1) { animation: dot-converge-1-hover .8s cubic-bezier(.2,.7,.3,1); }
  .card:hover .brand-dots i:nth-child(2) { animation: dot-converge-2-hover .8s cubic-bezier(.2,.7,.3,1) .05s; }
  .card:hover .brand-dots i:nth-child(3) { animation: dot-converge-3-hover .8s cubic-bezier(.2,.7,.3,1) .03s; }
  .card:hover .brand-dots i:nth-child(4) { animation: dot-converge-4-hover .8s cubic-bezier(.2,.7,.3,1) .08s; }
}

/* ---------- Header / Nav ----------
   The <header> itself is a transparent sticky rail; every visible surface
   lives on .header-shell, a floating capsule inset from the rail's edges.
   Keeping the blur OFF .site-header is deliberate, not stylistic: an element
   with backdrop-filter becomes the containing block for position:fixed
   descendants, which collapsed the fixed .mobile-menu inside it to nothing. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  --progress: 0;
}
/* Veil: once scrolled, fades the page out under the capsule so content
   doesn't slide visibly through the gap around it. */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -26px 0; pointer-events: none;
  background: linear-gradient(hsl(var(--bg) / .95), hsl(var(--bg) / .7) 55%, hsl(var(--bg) / 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(#000 50%, transparent);
  -webkit-mask-image: linear-gradient(#000 50%, transparent);
  opacity: 0;
  transition: opacity .35s ease;
}
.site-header.is-scrolled::before { opacity: 1; }

.header-shell {
  position: relative;
  width: calc(100% - 3rem);
  max-width: var(--container);
  height: 58px;
  margin: 0 auto;
  padding: 0 .55rem 0 .85rem;
  display: flex; align-items: center; gap: .35rem;
  border-radius: 18px;
  background: hsl(var(--bg-2) / .72);
  border: 1px solid hsl(var(--border) / .75);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .55), 0 2px 10px -6px hsl(228 45% 10% / .18);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  transition: height .3s cubic-bezier(.2,.7,.3,1), background .3s ease,
    box-shadow .3s ease, border-color .3s ease;
}
[data-theme="dark"] .header-shell {
  background: hsl(var(--bg-2) / .6);
  border-color: hsl(var(--border));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .06), 0 2px 12px -6px rgb(0 0 0 / .7);
}
.site-header.is-scrolled .header-shell {
  height: 52px;
  background: hsl(var(--bg-2) / .9);
  border-color: hsl(var(--border));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .6), var(--shadow-lg);
}
[data-theme="dark"] .site-header.is-scrolled .header-shell {
  background: hsl(var(--bg-2) / .84);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .07), var(--shadow-lg);
}
/* Gradient hairline on the capsule edge - drawn as a 1px padding box masked
   down to its border, so it can carry a gradient a real border can't. Gated
   on mask-composite: without it the gradient would fill the whole capsule. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .header-shell::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit; padding: 1px; opacity: .8;
    background: linear-gradient(115deg,
      hsl(var(--primary) / .6), hsl(var(--primary) / 0) 34%,
      hsl(var(--primary-2) / 0) 66%, hsl(var(--primary-2) / .5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}
/* Reading-progress line along the bottom of the capsule (JS sets --progress) */
.header-progress {
  position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary-2)));
  transform: scaleX(var(--progress)); transform-origin: 0 50%;
  opacity: 0; transition: opacity .3s ease;
}
.site-header.is-scrolled .header-progress { opacity: .9; }

.nav-brand {
  display: inline-flex; align-items: center; gap: .55rem; flex: none;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.18rem; letter-spacing: -.02em;
  color: hsl(var(--fg));
}
.nav-brand:hover { color: hsl(var(--fg)); }
.nav-brand .mark { display: block; width: 30px; height: 30px; }
.nav-brand img { height: 30px; width: auto; }
.nav-brand .brand-side { color: hsl(var(--dot-olive)); }
.nav-brand .brand-bip { color: hsl(var(--dot-gold)); }
/* Header-only: the logo sits in a tinted tile that tilts on hover */
.nav-brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(140deg, hsl(var(--primary) / .16), hsl(var(--primary-2) / .12));
  border: 1px solid hsl(var(--primary) / .2);
  box-shadow: 0 6px 14px -9px hsl(var(--primary) / .9);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
/* The logo file is 785x518, so height it and let the width follow */
.nav-brand .nav-brand-mark img { height: 19px; width: auto; }
.nav-brand:hover .nav-brand-mark {
  transform: translateY(-1px) rotate(-5deg) scale(1.05);
  border-color: hsl(var(--primary) / .42);
  box-shadow: 0 10px 20px -9px hsl(var(--primary));
}

.nav-primary { position: relative; display: flex; margin-left: .7rem; }
.nav-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: center; gap: .1rem;
}
.nav-links a {
  position: relative; z-index: 1;
  display: inline-block;
  padding: .5rem .78rem;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 500; font-size: .92rem; letter-spacing: -.01em;
  color: hsl(var(--fg) / .66);
  transition: color .2s ease;
}
.nav-links a:hover, .nav-links a.active, .nav-links a[aria-current="page"] {
  color: hsl(var(--fg));
}
/* The current page keeps a gradient underline, so it stays marked while the
   hover pill below wanders off to whatever you're pointing at. */
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: .16rem;
  width: 16px; height: 2px; border-radius: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary-2)));
}
/* Sliding hover pill. enterprise.js measures the hovered link, moves this one
   element and sets data-indicator; without JS that attribute never appears and
   the plain per-link hover background is used instead. */
.nav-indicator {
  position: absolute; top: 50%; left: 0; width: 0; height: 34px;
  border-radius: 10px; pointer-events: none; opacity: 0;
  background: hsl(var(--fg) / .07);
  transform: translateY(-50%);
  transition: transform .34s cubic-bezier(.2,.7,.3,1),
    width .34s cubic-bezier(.2,.7,.3,1), opacity .22s ease;
}
.nav-primary[data-indicator] .nav-indicator.is-on { opacity: 1; }
.nav-primary:not([data-indicator]) .nav-links a:hover { background: hsl(var(--fg) / .07); }

.nav-actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; flex: none; }
.nav-sep { width: 1px; height: 22px; background: hsl(var(--border)); margin: 0 .3rem; }
.nav-actions .btn-ghost { color: hsl(var(--fg) / .78); }
.nav-actions .btn-ghost:hover { --btn-bg: hsl(var(--fg) / .06); color: hsl(var(--fg)); }
/* Header CTA: gradient fill plus a light sweep on hover */
.nav-actions .btn:not(.btn-ghost) {
  position: relative; overflow: hidden;
  --btn-bg: linear-gradient(115deg, hsl(var(--primary)) 15%, hsl(var(--primary-2)));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .22), 0 6px 16px -9px hsl(var(--primary));
}
.nav-actions .btn:not(.btn-ghost)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%, hsl(0 0% 100% / .38) 48%, transparent 64%);
  transform: translateX(-140%);
  transition: transform .7s cubic-bezier(.3,.7,.3,1);
}
.nav-actions .btn:not(.btn-ghost):hover::after { transform: translateX(140%); }

.theme-toggle {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 11px;
  display: inline-grid; place-items: center;
  border: 1px solid hsl(var(--border) / .9);
  background: hsl(var(--bg-3) / .55);
  color: hsl(var(--fg) / .82);
  overflow: hidden;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle:hover {
  background: hsl(var(--bg-3));
  border-color: hsl(var(--fg) / .2);
  color: hsl(var(--fg));
}
/* Both icons are stacked in the same grid cell and cross-rotate on theme
   change - display:none would give a hard cut instead. */
.theme-toggle svg {
  grid-area: 1 / 1;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), opacity .25s ease;
}
.theme-toggle .sun { opacity: 1; transform: none; }
.theme-toggle .moon { opacity: 0; transform: rotate(-80deg) scale(.5); }
[data-theme="dark"] .theme-toggle .sun { opacity: 0; transform: rotate(80deg) scale(.5); }
[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: none; }

/* Theme-aware product screenshots (pair .shot-light + .shot-dark inside .shot-swap) */
.shot-swap .shot-dark { display: none; }
[data-theme="dark"] .shot-swap .shot-light { display: none; }
[data-theme="dark"] .shot-swap .shot-dark { display: block; }

.mobile-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 900px) {
  .nav-primary, .nav-actions .desktop-only { display: none; }
  .header-shell { padding-right: .5rem; padding-left: .7rem; }
  .nav-actions { gap: .4rem; }
  .nav-register { padding-left: .85rem; padding-right: .85rem; }
  .mobile-toggle {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: 11px;
    border: 1px solid hsl(var(--border) / .9);
    background: hsl(var(--bg-3) / .55);
    color: hsl(var(--fg));
  }
  .mobile-toggle .bars { display: grid; gap: 5px; width: 18px; }
  .mobile-toggle .bars i {
    display: block; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
  }
  /* Bar centres sit 7px apart, so 3.5px each closes them into an X */
  .mobile-toggle[aria-expanded="true"] .bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .mobile-toggle[aria-expanded="true"] .bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .mobile-menu {
    display: block;
    position: fixed; inset: var(--header-h) 0 0 0;
    background: hsl(var(--bg) / .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 1rem 1.25rem 2.5rem;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .28s ease, transform .32s cubic-bezier(.2,.7,.3,1), visibility .32s;
    z-index: 49;
    overflow-y: auto;
  }
  .mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu ul { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .2rem; }
  /* Items stagger in behind the panel itself */
  .mobile-menu li, .mobile-cta > * {
    opacity: 0; transform: translateY(12px);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .mobile-menu.open li, .mobile-menu.open .mobile-cta > * { opacity: 1; transform: none; }
  .mobile-menu.open li:nth-child(1) { transition-delay: .05s; }
  .mobile-menu.open li:nth-child(2) { transition-delay: .09s; }
  .mobile-menu.open li:nth-child(3) { transition-delay: .13s; }
  .mobile-menu.open li:nth-child(4) { transition-delay: .17s; }
  .mobile-menu.open li:nth-child(5) { transition-delay: .21s; }
  .mobile-menu.open .mobile-cta > * { transition-delay: .25s; }
  /* Scoped to `ul a` so the CTA buttons below keep their own .btn styling */
  .mobile-menu ul a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1rem; border-radius: 12px;
    background: hsl(var(--bg-2) / .55);
    border: 1px solid hsl(var(--border) / .55);
    color: hsl(var(--fg)); font-weight: 600; font-size: 1.02rem;
    font-family: var(--font-display);
    transition: background .2s ease, border-color .2s ease;
  }
  /* Arrow stays visible: there is no hover on touch to reveal it */
  .mobile-menu ul a::after {
    content: "→"; font-size: .95rem; color: hsl(var(--fg) / .3);
    transition: transform .25s ease, color .25s ease;
  }
  .mobile-menu ul a:hover, .mobile-menu ul a[aria-current="page"] {
    background: hsl(var(--bg-2)); border-color: hsl(var(--border));
  }
  .mobile-menu ul a:hover::after { transform: translateX(3px); color: hsl(var(--fg) / .55); }
  .mobile-menu ul a[aria-current="page"] { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .35); }
  .mobile-menu ul a[aria-current="page"]::after { color: hsl(var(--primary) / .55); }
  .mobile-cta { display: grid; gap: .6rem; }
  .mobile-cta .btn { padding: .95rem 1.3rem; font-size: 1rem; border-radius: 12px; }
}

/* Narrow phones: tighten the CTA, and below ~360px drop the wordmark to the
   logo tile alone, so brand, theme toggle, Register and the menu button all
   still fit on one line. */
@media (max-width: 430px) {
  .nav-register { font-size: .82rem; padding-left: .75rem; padding-right: .75rem; }
}
@media (max-width: 359px) {
  .site-header .nav-brand .brand-side { display: none; }
}

/* ---------- Announcement bar ---------- */
.announce {
  background: hsl(var(--ink));
  color: hsl(var(--ink-fg) / .92);
  font-size: .85rem; font-weight: 500;
  text-align: center; padding: .55rem 1rem;
  position: relative; z-index: 60;
  border-bottom: 1px solid hsl(var(--ink-border));
}
.announce a { color: hsl(var(--primary-2)); text-decoration: none; font-weight: 600; }
.announce strong { font-weight: 700; color: #fff; }

/* ---------- Hero (ink) ---------- */
.hero-product {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(1000px 520px at 70% -15%, hsl(var(--primary) / .28), transparent 62%),
    radial-gradient(720px 400px at 10% 45%, hsl(var(--primary-2) / .14), transparent 58%),
    hsl(var(--ink));
  color: hsl(var(--ink-fg));
  overflow: hidden;
}
.hero-product::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(hsl(var(--ink-fg) / .05) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--ink-fg) / .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(115% 80% at 50% 0%, black 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(115% 80% at 50% 0%, black 25%, transparent 80%);
}
.hero-product::after { /* dark theme only: the ink hero melts into the ink-dark page bg */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
  background: linear-gradient(to bottom, transparent, hsl(var(--bg)));
  pointer-events: none;
  display: none;
}
[data-theme="dark"] .hero-product::after { display: block; }
.hero-product .container { position: relative; z-index: 1; }
.hero-product .hero-copy { max-width: 860px; margin: 0 auto; text-align: center; }
.hero-product h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.35rem);
  line-height: 1.03; letter-spacing: -0.035em; font-weight: 700;
  color: #fff;
  margin: 1.4rem 0 1.35rem;
}
.hero-product .lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: hsl(var(--ink-muted));
  max-width: 620px; margin: 0 auto 2.2rem;
}
.hero-cta {
  display: flex; gap: .8rem; justify-content: center;
  flex-wrap: wrap; margin-bottom: 1.1rem;
}
.hero-microcopy {
  font-family: var(--font-mono);
  font-size: .76rem; letter-spacing: .02em;
  color: hsl(var(--ink-muted));
  display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;
}
.hero-microcopy span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-glow { display: none; }

/* Hero screenshot */
.hero-product .device-shot,
.hero-product .browser-frame {
  margin: clamp(2.5rem, 5.5vw, 4rem) auto 0;
  max-width: 1080px;
  position: relative; z-index: 2;
}
.hero-product .device-shot img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.hero-shot-wrap { position: relative; }
.hero-shot-wrap::before { /* glow behind frame */
  content: ""; position: absolute; inset: 8% -4% -6% -4%;
  background: radial-gradient(60% 70% at 50% 30%, hsl(var(--primary) / .38), transparent 70%);
  filter: blur(46px); z-index: 0; pointer-events: none;
}

/* Browser-window chrome around app screenshots */
.browser-frame {
  position: relative; z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  background: hsl(var(--ink-2));
  border: 1px solid hsl(var(--ink-border));
  box-shadow: 0 40px 80px -24px rgb(0 0 0 / .55), 0 16px 32px -16px rgb(0 0 0 / .4);
}
.browser-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .85rem;
  background: hsl(var(--ink-3));
  border-bottom: 1px solid hsl(var(--ink-border));
}
.browser-bar .dots { display: flex; gap: .35rem; }
.browser-bar .dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: hsl(var(--ink-border));
  display: inline-block;
}
.browser-bar .dots i:nth-child(1) { background: #ff5f57; }
.browser-bar .dots i:nth-child(2) { background: #febc2e; }
.browser-bar .dots i:nth-child(3) { background: #28c840; }
.browser-bar .url {
  flex: 1; text-align: center; font-size: .72rem;
  color: hsl(var(--ink-muted));
  background: hsl(var(--ink));
  padding: .28rem .75rem; border-radius: 999px;
  border: 1px solid hsl(var(--ink-border));
  max-width: 340px; margin: 0 auto;
  font-family: var(--font-mono);
}
.browser-frame img { display: block; width: 100%; height: auto; }

/* Light-surface variant when a frame sits on the normal page background */
.browser-frame.on-page {
  background: hsl(var(--bg-2));
  border-color: hsl(var(--border));
  box-shadow: var(--shadow-lg);
}
.browser-frame.on-page .browser-bar { background: hsl(var(--bg-3)); border-bottom-color: hsl(var(--border)); }
.browser-frame.on-page .url { background: hsl(var(--bg)); border-color: hsl(var(--border)); color: hsl(var(--fg-muted)); }

/* ---------- Legacy hero (kept for compatibility) ---------- */
.hero { position: relative; padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero-inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.1fr 1fr; align-items: center;
}
.hero h1 { margin-bottom: 1.25rem; }
.hero p.lead { margin-bottom: 1.75rem; max-width: 36rem; }
.hero-trust { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; color: hsl(var(--fg-muted)); font-size: .85rem; }
.hero-trust-item { display: flex; align-items: center; gap: .35rem; }
.hero-visual {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: hsl(var(--ink-2)); box-shadow: var(--shadow-xl);
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
}
.hero-visual img { position: relative; max-width: 78%; max-height: 78%; object-fit: contain; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .hero-visual { aspect-ratio: 5/4; } }

/* ---------- Trust strip ---------- */
.trust-strip {
  padding: 1.9rem 0;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--bg));
}
.trust-strip .label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: hsl(var(--fg-muted)); margin-bottom: 1.1rem;
}
.trust-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 2.2rem; align-items: center;
  max-width: 980px; margin: 0 auto;
}
.trust-row .pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem 0;
  font-size: .87rem; font-weight: 600; color: hsl(var(--fg) / .78);
  white-space: nowrap;
}
.trust-row .pill svg { color: hsl(var(--primary)); flex-shrink: 0; }

/* ---------- Logo strip (legacy) ---------- */
.logo-strip { padding: 2rem 0; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--bg-2)); }
.logo-strip-label { text-align: center; font-size: .8rem; color: hsl(var(--fg-muted)); text-transform: uppercase; letter-spacing: .18em; margin-bottom: 1.25rem; }
.logo-strip-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem; align-items: center; }
.logo-strip-row img { width: 100%; height: 32px; object-fit: contain; opacity: .55; filter: grayscale(1); }
@media (max-width: 700px) { .logo-strip-row { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Section heads ---------- */
.section-head {
  text-align: center; max-width: 46rem;
  margin: 0 auto clamp(2.4rem, 5vw, 4rem);
}
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h1, .section-head h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.section-head p { font-size: 1.06rem; color: hsl(var(--fg-muted)); }

/* ---------- Feature grid / bento ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.feature-card p  { font-size: .94rem; color: hsl(var(--fg-muted)); }

/* Bento layout (index features) */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
}
.bento { grid-column: span 2; display: flex; flex-direction: column; }
.bento.wide { grid-column: span 3; }
.bento.full { grid-column: span 6; }
.bento .shot {
  margin-top: auto; padding-top: 1.25rem;
}
.bento .shot img {
  width: 100%; border-radius: 10px;
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-md);
}
@media (max-width: 980px) {
  .bento, .bento.wide { grid-column: span 3; }
}
@media (max-width: 640px) {
  .bento, .bento.wide, .bento.full { grid-column: span 6; }
}

/* ---------- Split (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split-img {
  border-radius: var(--radius-lg); background: hsl(var(--bg-2));
  border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-md);
  padding: 1.5rem; aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
}
.split-img img { max-height: 100%; object-fit: contain; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.reverse { direction: ltr; } }

.check-list { list-style: none; padding: 0; display: grid; gap: .7rem; margin: 1rem 0 1.5rem; }
.check-list li { position: relative; padding-left: 1.7rem; font-size: .95rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 18px; height: 18px;
  background: currentColor;
  color: hsl(var(--success));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}
.check-list svg { display: inline; vertical-align: -3px; margin-right: .3rem; color: hsl(var(--success)); }
/* if the li already contains an inline check svg, hide the pseudo check */
.check-list li:has(> svg) { padding-left: 0; }
.check-list li:has(> svg)::before { display: none; }

/* ---------- Showcase rows (screenshot + copy) ---------- */
.feature-showcase { display: grid; gap: clamp(3.5rem, 7vw, 6rem); margin-top: 2.5rem; }
.showcase-row {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center;
}
.showcase-row.reverse { direction: rtl; }
.showcase-row.reverse > * { direction: ltr; }
.showcase-copy .eyebrow { margin-bottom: .9rem; }
.showcase-copy h3 {
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  line-height: 1.12; letter-spacing: -0.028em;
  margin-bottom: 1rem;
}
.showcase-copy p { color: hsl(var(--fg-muted)); margin-bottom: 1.25rem; }
.showcase-copy ul.check-list { margin-bottom: 1.25rem; }
.showcase-copy .doc-link {
  font-size: .92rem; font-weight: 600;
  font-family: var(--font-display);
  display: inline-flex; align-items: center; gap: .35rem;
  color: hsl(var(--primary));
}
.showcase-copy .doc-link:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .showcase-row, .showcase-row.reverse { grid-template-columns: 1fr; direction: ltr; }
  .showcase-row.reverse > * { direction: ltr; }
}

/* ---------- Problem / solution ---------- */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
.problem-card { padding: 2rem; border-radius: var(--radius-lg); border: 1px solid hsl(var(--border)); }
.problem-card.before { background: hsl(var(--bg-3) / .6); }
.problem-card.after {
  background:
    radial-gradient(400px 220px at 90% -10%, hsl(var(--primary-2) / .12), transparent 60%),
    hsl(var(--bg-2));
  border-color: hsl(var(--primary) / .3);
  box-shadow: var(--shadow-md);
}
.problem-card h3 { font-size: 1.2rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .5rem; }
.problem-card .pain-list, .problem-card .gain-list { list-style: none; padding: 0; display: grid; gap: .7rem; }
.problem-card li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; color: hsl(var(--fg) / .85); }
.problem-card .pain-list li::before { content: "✕"; color: hsl(var(--danger) / .75); font-weight: 700; margin-top: -1px; }
.problem-card .gain-list li svg { color: hsl(var(--success)); flex-shrink: 0; margin-top: 3px; }
@media (max-width: 800px) { .problem-grid { grid-template-columns: 1fr; } }

/* ---------- Use cases ---------- */
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.usecase {
  padding: 1.75rem; border-radius: var(--radius-lg);
  background: hsl(var(--bg-2));
  border: 1px solid hsl(var(--border));
  display: flex; flex-direction: column; gap: .9rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.usecase:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: hsl(var(--primary) / .35); }
.usecase .industry {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: hsl(var(--primary));
}
.usecase h3 { font-size: 1.14rem; line-height: 1.25; }
.usecase p { color: hsl(var(--fg-muted)); font-size: .92rem; }
.usecase .metric { display: flex; gap: 1rem; padding-top: .85rem; margin-top: auto; border-top: 1px dashed hsl(var(--border)); }
.usecase .metric strong { display: block; font-family: var(--font-display); font-size: 1.45rem; color: hsl(var(--fg)); line-height: 1; }
.usecase .metric span { display: block; font-size: .75rem; color: hsl(var(--fg-muted)); margin-top: .3rem; }
@media (max-width: 900px) { .usecase-grid { grid-template-columns: 1fr; } }

/* ---------- ROI calculator ---------- */
.roi-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: hsl(var(--bg-2));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: 920px; margin: 0 auto;
}
.roi-inputs { display: grid; gap: 1.35rem; }
.roi-row { display: flex; flex-direction: column; gap: .45rem; }
.roi-row label { font-size: .88rem; font-weight: 500; color: hsl(var(--fg) / .8); }
.roi-row input[type="range"] { width: 100%; accent-color: hsl(var(--primary)); }
.roi-row .value { font-family: var(--font-mono); font-weight: 700; color: hsl(var(--primary)); }
.roi-output {
  text-align: center; padding: 2rem 1.5rem;
  background:
    radial-gradient(300px 180px at 50% -20%, hsl(var(--primary) / .25), transparent 70%),
    hsl(var(--ink));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--ink-border));
  color: hsl(var(--ink-fg));
}
.roi-output .big {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4vw, 3.1rem); font-weight: 700;
  letter-spacing: -.03em;
  background: linear-gradient(100deg, hsl(var(--primary-2)), hsl(var(--primary)) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.05;
}
.roi-output .label { font-size: .84rem; color: hsl(var(--ink-muted)); margin-top: .6rem; }
@media (max-width: 800px) { .roi-card { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

.plan {
  position: relative;
  background: hsl(var(--bg-2));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 2.1rem 1.9rem;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plan.featured {
  background:
    radial-gradient(420px 240px at 80% -20%, hsl(var(--primary) / .3), transparent 65%),
    hsl(var(--ink));
  border-color: hsl(var(--primary) / .5);
  box-shadow: var(--glow), var(--shadow-lg);
  color: hsl(var(--ink-fg));
}
.plan.featured .muted, .plan.featured p { color: hsl(var(--ink-muted)); }
.plan.featured .check-list li { color: hsl(var(--ink-fg) / .9); }
.plan.featured .check-list li::before { color: hsl(var(--primary-2)); }
.plan.featured .plan-price .amount { color: #fff; }
.plan-tag {
  position: absolute; top: -13px; left: 1.75rem;
  background: hsl(var(--bg-3)); color: hsl(var(--fg-muted));
  border: 1px solid hsl(var(--border));
  padding: .28rem .8rem; border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.plan.featured .plan-tag {
  background: linear-gradient(100deg, hsl(var(--primary)), hsl(var(--primary-2)));
  color: #fff; border: none;
  box-shadow: 0 6px 16px -6px hsl(var(--primary) / .6);
}
.plan-name { font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: hsl(var(--fg-muted)); margin-bottom: .5rem; font-weight: 600; }
.plan-price { display: flex; align-items: baseline; gap: .35rem; margin: .5rem 0 .25rem; }
.plan-price .currency { font-size: 1.1rem; color: hsl(var(--fg-muted)); }
.plan-price .amount { font-family: var(--font-display); font-size: 2.7rem; font-weight: 700; letter-spacing: -.03em; }
.plan-price .period { color: hsl(var(--fg-muted)); font-size: .9rem; }
.plan.featured .plan-price .period { color: hsl(var(--ink-muted)); }
.plan-desc { color: hsl(var(--fg-muted)); font-size: .9rem; margin-bottom: 1.5rem; }
.plan .check-list { flex: 1; }
.plan-features { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .6rem; flex: 1; }
.plan-features li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; }
.plan-features .yes { color: hsl(var(--success)); flex-shrink: 0; }
.plan-features .no  { color: hsl(var(--danger)); flex-shrink: 0; opacity: .6; }
.plan-features .not-included { color: hsl(var(--fg-muted)); }

/* ---------- Billing toggle ---------- */
.billing-toggle {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .3rem; border-radius: 999px;
  background: hsl(var(--bg-3)); border: 1px solid hsl(var(--border));
  margin: 0 auto 2.5rem; position: relative;
}
.billing-toggle button {
  border: none; background: transparent;
  padding: .55rem 1.25rem; border-radius: 999px;
  font-family: var(--font-display);
  font-size: .9rem; font-weight: 600;
  cursor: pointer; color: hsl(var(--fg-muted));
  transition: all .15s ease;
  display: inline-flex; align-items: center; gap: .45rem;
}
.billing-toggle button.active { background: hsl(var(--bg-2)); color: hsl(var(--fg)); box-shadow: var(--shadow-sm); }
.billing-toggle .save-tag {
  font-family: var(--font-mono);
  font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  padding: .15rem .5rem; border-radius: 999px;
  background: hsl(var(--success) / .15); color: hsl(var(--success));
}

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid hsl(var(--border)); background: hsl(var(--bg-2)); box-shadow: var(--shadow-sm); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare-table th, .compare-table td {
  padding: .95rem 1.25rem; text-align: left;
  border-bottom: 1px solid hsl(var(--border));
  font-size: .92rem;
}
.compare-table thead th {
  background: hsl(var(--bg-3));
  font-family: var(--font-mono);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: hsl(var(--fg-muted));
}
.compare-table thead th.featured {
  background: hsl(var(--ink));
  color: hsl(var(--primary-2));
}
.compare-table tbody th { font-weight: 600; color: hsl(var(--fg)); }
.compare-table td { color: hsl(var(--fg-muted)); }
.compare-table td.center, .compare-table th.center { text-align: center; }
.compare-table td.featured { background: hsl(var(--primary) / .05); color: hsl(var(--fg)); font-weight: 600; }
.compare-table .check { color: hsl(var(--success)); }
.compare-table .dash { color: hsl(var(--fg-muted)); opacity: .5; }
.compare-table tr:last-child td, .compare-table tr:last-child th { border-bottom: none; }
@media (max-width: 700px) {
  .compare-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .compare-table { display: block; min-width: 0; }
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .compare-table tbody { display: grid; gap: 1rem; }
  .compare-table tbody tr {
    display: block;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--bg-2));
  }
  .compare-table tbody th {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--bg-3));
    font-size: .95rem;
  }
  .compare-table tbody td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .8rem 1rem;
    text-align: right;
  }
  .compare-table tbody td::before {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: left;
    text-transform: uppercase;
    color: hsl(var(--fg-muted));
  }
  .compare-table tbody td:nth-of-type(1)::before { content: "Starter"; }
  .compare-table tbody td:nth-of-type(2)::before { content: "Team"; color: hsl(var(--primary)); }
  .compare-table tbody td:nth-of-type(3)::before { content: "Enterprise"; }
  .compare-table tbody td.center { text-align: right; }
  .compare-table tbody td.featured { background: hsl(var(--primary) / .05); }
  .compare-table tbody tr:last-child th { border-bottom: 1px solid hsl(var(--border)); }
  .compare-table tbody tr td:last-child { border-bottom: 0; }
}

/* ---------- Testimonials / founder ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial { padding: 1.75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--bg-2)); }
.testimonial-quote { font-size: 1rem; line-height: 1.55; color: hsl(var(--fg) / .9); }
.testimonial-quote::before { content: '\201C'; font-size: 2.5rem; line-height: 0; color: hsl(var(--primary) / .35); margin-right: .25rem; vertical-align: -.4em; font-family: var(--font-display); }
.testimonial-author { margin-top: 1rem; display: flex; align-items: center; gap: .75rem; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background: hsl(var(--ink)); border: 1px solid hsl(var(--ink-border));
  color: hsl(var(--primary-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; flex-shrink: 0;
}
.testimonial-name { font-weight: 600; font-size: .9rem; }
.testimonial-role { font-size: .8rem; color: hsl(var(--fg-muted)); }

.founder-card {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem;
  padding: 2rem; border-radius: var(--radius-lg);
  background: hsl(var(--bg-2)); border: 1px solid hsl(var(--border));
  max-width: 820px; margin: 0 auto;
}
.founder-avatar {
  width: 72px; height: 72px; border-radius: 999px;
  background: hsl(var(--ink)); border: 1px solid hsl(var(--ink-border));
  color: hsl(var(--primary-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; flex-shrink: 0;
}
.founder-card blockquote { font-size: 1.05rem; line-height: 1.65; color: hsl(var(--fg)); margin-bottom: .75rem; font-style: normal; }
.founder-card cite { font-style: normal; font-size: .85rem; color: hsl(var(--fg-muted)); }
.founder-card cite strong { color: hsl(var(--fg)); }
@media (max-width: 600px) { .founder-card { grid-template-columns: 1fr; text-align: center; } .founder-avatar { margin: 0 auto; } }

/* ---------- CTA banner (ink) ---------- */
.cta-banner {
  position: relative;
  background:
    radial-gradient(700px 380px at 50% -30%, hsl(var(--primary) / .38), transparent 65%),
    radial-gradient(520px 300px at 90% 120%, hsl(var(--primary-2) / .2), transparent 60%),
    hsl(var(--ink));
  color: hsl(var(--ink-fg));
  border: 1px solid hsl(var(--ink-border));
  border-radius: calc(var(--radius-lg) + 6px);
  padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(hsl(var(--ink-fg) / .05) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--ink-fg) / .05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(100% 100% at 50% 0%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(100% 100% at 50% 0%, black 20%, transparent 80%);
}
.cta-banner > * { position: relative; }
.cta-banner h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -.03em; }
.cta-banner p { color: hsl(var(--ink-muted)); max-width: 520px; margin: .85rem auto 0; }

/* ---------- Stat band ---------- */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  padding: 2.25rem 2rem; border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 20% -30%, hsl(var(--primary) / .3), transparent 60%),
    hsl(var(--ink));
  border: 1px solid hsl(var(--ink-border));
  color: hsl(var(--ink-fg));
}
.stat-band .stat { text-align: center; padding: .5rem; }
.stat-band .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(100deg, #fff 30%, hsl(var(--primary-2)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-band .stat span { display: block; font-size: .84rem; color: hsl(var(--ink-muted)); margin-top: .45rem; }
@media (max-width: 700px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .team-value-band { grid-template-columns: 1fr; } }

.enterprise-pricing-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 2rem;
}
.enterprise-pricing-actions { display: grid; gap: .75rem; text-align: center; }
@media (max-width: 700px) {
  .enterprise-pricing-card { grid-template-columns: 1fr; padding: 1.5rem; }
  .enterprise-pricing-actions .btn { width: 100%; }
}

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: .75rem; max-width: 800px; margin: 0 auto; }
.faq-item {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--bg-2));
  overflow: hidden;
  transition: border-color .15s ease;
}
.faq-item[open] { border-color: hsl(var(--primary) / .4); }
.faq-item summary {
  cursor: pointer; padding: 1.15rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex-shrink: 0; width: 10px; height: 10px;
  border-right: 2px solid hsl(var(--fg-muted));
  border-bottom: 2px solid hsl(var(--fg-muted));
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item .answer { padding: 0 1.5rem 1.25rem; color: hsl(var(--fg-muted)); font-size: .95rem; line-height: 1.65; }

/* ---------- Guarantee badge ---------- */
.guarantee {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .8rem 1.25rem; border-radius: 999px;
  background: hsl(var(--success) / .08);
  border: 1px solid hsl(var(--success) / .3);
  color: hsl(var(--success));
  font-weight: 600; font-size: .9rem;
}
.guarantee svg { flex-shrink: 0; }

/* ---------- Integrations (legacy) ---------- */
.integ-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1rem; max-width: 920px; margin: 0 auto; }
.integ-tile {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: hsl(var(--bg-2)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: .75rem;
  font-size: .75rem; font-weight: 600; text-align: center;
  color: hsl(var(--fg-muted)); transition: all .15s ease;
}
.integ-tile:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .4); }
@media (max-width: 800px) { .integ-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Resource cards ---------- */
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.resource-grid-two { grid-template-columns: repeat(2, 1fr); max-width: 980px; margin: 0 auto; }
.resource-card {
  display: flex; flex-direction: column;
  background: hsl(var(--bg-2)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg); overflow: hidden;
  transition: all .2s ease;
}
.resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: hsl(var(--primary) / .35); }
.resource-thumb {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(320px 200px at 75% -20%, hsl(var(--primary) / .4), transparent 65%),
    hsl(var(--ink));
  display: flex; align-items: center; justify-content: center;
  color: hsl(var(--primary-2)); position: relative; overflow: hidden;
}
.resource-thumb::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(hsl(var(--ink-fg) / .07) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--ink-fg) / .07) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 75%);
}
.resource-thumb svg { position: relative; z-index: 1; width: 52px; height: 52px; opacity: .9; }
.resource-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.resource-tag {
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: hsl(var(--primary));
}
.resource-body h3 { font-size: 1.12rem; line-height: 1.3; }
.resource-body p { color: hsl(var(--fg-muted)); font-size: .92rem; flex: 1; }
.resource-meta {
  display: flex; justify-content: space-between;
  font-size: .8rem; color: hsl(var(--fg-muted));
  padding-top: .75rem; border-top: 1px solid hsl(var(--border));
}
@media (max-width: 900px) { .resource-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--bg-2));
  padding: 3.5rem 0 1.75rem;
  font-size: .9rem;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .nav-brand { margin-bottom: .9rem; }
.footer-brand img { height: 28px; margin-bottom: .75rem; }
.footer-brand p { color: hsl(var(--fg-muted)); max-width: 22rem; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .18em;
  color: hsl(var(--fg-muted)); margin-bottom: .95rem; font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-col a { color: hsl(var(--fg) / .78); }
.footer-col a:hover { color: hsl(var(--primary)); }
.footer-bottom {
  margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border));
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: hsl(var(--fg-muted)); font-size: .8rem;
}

/* ---------- Forms ---------- */
.form-card {
  background: hsl(var(--bg-2));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--shadow-md);
  display: grid; gap: 1.1rem;
}
/* "Already have an account?" line under the sign-up / demo forms - the route
   out of the marketing site and into the product at www.sidebip.biz. */
.have-account {
  margin-top: 1.1rem;
  text-align: center;
  font-size: .9rem;
  color: hsl(var(--fg-muted));
}
.have-account a { font-weight: 600; white-space: nowrap; }
.form-row { display: grid; gap: .4rem; }
.form-row > label, .label { font-size: .85rem; font-weight: 600; color: hsl(var(--fg)); }
.form-group { display: grid; gap: .4rem; }
.input, .textarea, .select {
  width: 100%;
  padding: .7rem .9rem;
  font: inherit; font-size: .95rem;
  background: hsl(var(--bg));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  color: hsl(var(--fg));
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: hsl(var(--fg-muted) / .7); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / .18);
}
.checkbox-row { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; color: hsl(var(--fg) / .8); }
.checkbox-row input[type="checkbox"] { margin-top: .25rem; accent-color: hsl(var(--primary)); width: 16px; height: 16px; }

.form-msg { padding: .75rem 1rem; border-radius: 10px; font-size: .9rem; display: none; }
.form-msg.show { display: block; }
.form-msg.success { display: block; background: hsl(var(--success) / .1); color: hsl(var(--success)); border: 1px solid hsl(var(--success) / .3); }
.form-msg.error   { display: block; background: hsl(var(--danger) / .1);  color: hsl(var(--danger));  border: 1px solid hsl(var(--danger) / .3); }
.form-msg:empty { display: none; }

/* ---------- Auth layout (ink aside + form) ---------- */
.auth-shell {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }
.auth-brand {
  position: relative;
  /* Percentage-based washes so they scale with the panel - fixed px sizes
     left most of the panel flat black on ultrawide monitors. */
  background:
    radial-gradient(65% 55% at 80% -10%, hsl(var(--primary) / .32), transparent 68%),
    radial-gradient(50% 45% at 0% 100%, hsl(var(--primary-2) / .18), transparent 62%),
    radial-gradient(40% 40% at 100% 70%, hsl(var(--primary) / .10), transparent 70%),
    hsl(var(--ink));
  color: hsl(var(--ink-fg));
  padding: clamp(2rem, 6vw, 4rem);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.auth-brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(hsl(var(--ink-fg) / .05) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--ink-fg) / .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(130% 120% at 50% 0%, black 40%, transparent 92%);
  -webkit-mask-image: radial-gradient(130% 120% at 50% 0%, black 40%, transparent 92%);
}
/* Ultrawide: pull the aside copy inward so it doesn't hug the far-left
   edge of a very wide panel, and give the form column breathing room. */
@media (min-width: 2000px) {
  .auth-brand { padding-left: clamp(4rem, 10vw, 16rem); padding-right: clamp(4rem, 6vw, 10rem); }
}
.auth-brand > * { position: relative; }
.auth-brand h2 { color: #fff; max-width: 26rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.03em; }
.auth-brand p { color: hsl(var(--ink-muted)); max-width: 30rem; }
.auth-brand .eyebrow { color: hsl(var(--primary-2)); }
.auth-brand .check-list li { color: hsl(var(--ink-fg) / .92); }
.auth-brand .check-list li::before { color: hsl(var(--primary-2)); }
.auth-brand a { color: #fff; }
.auth-features { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; max-width: 30rem; }
.auth-features li { display: flex; gap: .75rem; align-items: flex-start; }
.auth-features .icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: hsl(var(--ink-fg) / .08);
  border: 1px solid hsl(var(--ink-border));
  color: hsl(var(--primary-2));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.auth-form-wrap {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
  max-width: 33rem; margin: 0 auto; width: 100%;
}
.auth-form-wrap > h1 { font-size: 1.9rem; margin-bottom: .35rem; letter-spacing: -.03em; }
.auth-form-wrap > p { font-size: .95rem; margin-bottom: 1.75rem; color: hsl(var(--fg-muted)); }
.auth-form { width: 100%; max-width: 28rem; }
.auth-form h1 { font-size: 1.9rem; margin-bottom: .35rem; }
.auth-form .lead { font-size: .95rem; margin-bottom: 1.75rem; }
@media (max-width: 900px) { .auth-brand { display: none; } }

/* ---------- Doc/Article pages ---------- */
.doc-shell { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.doc-header { text-align: center; margin-bottom: 2.5rem; }
.doc-header .eyebrow { margin-bottom: .75rem; }
.doc-content {
  max-width: 760px; margin: 0 auto;
  background: hsl(var(--bg-2));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 5vw, 3rem);
  box-shadow: var(--shadow-sm);
}
.doc-content h2 { margin: 2rem 0 .85rem; font-size: 1.4rem; }
.doc-content h2:first-child { margin-top: 0; }
.doc-content h3 { margin: 1.5rem 0 .6rem; font-size: 1.1rem; }
.doc-content p, .doc-content ul, .doc-content ol { margin-bottom: 1rem; color: hsl(var(--fg) / .85); }
.doc-content ul, .doc-content ol { padding-left: 1.4rem; }
.doc-content li { margin-bottom: .35rem; }
.doc-content a { font-weight: 500; }
.doc-toc { background: hsl(var(--bg-3)); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: .9rem; }
.doc-toc ul { list-style: none; padding-left: 0; columns: 2; gap: 1rem; }
@media (max-width: 600px) { .doc-toc ul { columns: 1; } }
.doc-meta { color: hsl(var(--fg-muted)); font-size: .85rem; margin-top: .5rem; }

/* ---------- Status pages ---------- */
.status-shell {
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1rem;
}
.status-card {
  max-width: 560px; width: 100%;
  background: hsl(var(--bg-2));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.status-icon {
  width: 72px; height: 72px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 32px;
}
.status-icon.success { background: hsl(var(--success) / .12); color: hsl(var(--success)); }
.status-icon.warn    { background: hsl(var(--warning) / .12); color: hsl(var(--warning)); }
.status-icon.error   { background: hsl(var(--danger) / .12);  color: hsl(var(--danger)); }
.status-card h1 { font-size: 1.75rem; margin-bottom: .5rem; }
.status-card p  { margin-bottom: 1.5rem; color: hsl(var(--fg-muted)); }
.next-steps { text-align: left; background: hsl(var(--bg-3)); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.next-steps ol { padding-left: 1.25rem; margin: 0; }
.next-steps li { margin-bottom: .4rem; color: hsl(var(--fg) / .85); }

/* ---------- 404 ---------- */
.notfound {
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 3rem 1rem;
}
.notfound .code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 700; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(120deg, hsl(var(--primary)), hsl(var(--primary-2)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.notfound h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 1rem 0 .75rem; }
.notfound p { color: hsl(var(--fg-muted)); max-width: 480px; margin: 0 auto 1.5rem; }

/* ---------- Sticky CTA ---------- */
.sticky-cta {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 40; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  transform: translateY(20px);
}
.sticky-cta.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
@media (max-width: 600px) { .sticky-cta { bottom: 1rem; right: 1rem; } }

/* ---------- Central diagram (legacy) ---------- */
.central-diagram { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; margin: 2.5rem auto; max-width: 1080px; }
.central-side { display: grid; gap: .75rem; }
.central-tile {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  background: hsl(var(--bg-2)); border: 1px solid hsl(var(--border));
  border-radius: 12px; font-size: .9rem; font-weight: 500;
}
.central-tile.muted { opacity: .55; }
.central-tile .icon { width: 32px; height: 32px; border-radius: 8px; background: hsl(var(--bg-3)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.central-arrow {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: hsl(var(--primary));
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.central-hub {
  background:
    radial-gradient(200px 140px at 50% -20%, hsl(var(--primary) / .5), transparent 70%),
    hsl(var(--ink));
  border: 1px solid hsl(var(--ink-border));
  color: #fff;
  padding: 2rem 1.25rem; border-radius: 16px; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  box-shadow: 0 12px 30px -10px hsl(var(--primary) / .5);
}
.central-hub .label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; opacity: .8; font-weight: 600; }
.central-hub .name { font-size: 1.5rem; margin: .25rem 0; }
.central-hub .desc { font-size: .8rem; opacity: .85; font-weight: 500; }
@media (max-width: 800px) { .central-diagram { grid-template-columns: 1fr; } .central-arrow { transform: rotate(90deg); } }

/* ---------- Documentation hub ---------- */
.docs-shell { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; padding: 2rem 0 4rem; }
@media (max-width: 900px) { .docs-shell { grid-template-columns: 1fr; } }
.docs-sidebar {
  position: sticky; top: calc(var(--header-h) + 1rem);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto; padding-right: .5rem;
}
.docs-sidebar h4 {
  font-family: var(--font-mono);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .16em;
  color: hsl(var(--fg-muted)); margin: 1.5rem 0 .5rem; font-weight: 700;
}
.docs-sidebar h4:first-child { margin-top: 0; }
.docs-sidebar ul { list-style: none; padding: 0; margin: 0; }
.docs-sidebar a {
  display: block; padding: .4rem .75rem;
  font-size: .9rem; color: hsl(var(--fg-muted));
  border-radius: 8px; border-left: 2px solid transparent;
  margin-left: -.75rem; transition: all .15s;
}
.docs-sidebar a:hover { background: hsl(var(--bg-2)); color: hsl(var(--fg)); }
.docs-sidebar a.active { color: hsl(var(--primary)); background: hsl(var(--primary) / .08); border-left-color: hsl(var(--primary)); font-weight: 600; }

.docs-content { max-width: 820px; min-width: 0; padding: clamp(2rem, 5vw, 3.5rem) 0; }
.docs-content h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); letter-spacing: -.03em; line-height: 1.08; margin-bottom: .75rem; }
.docs-content > .lead { font-size: 1.1rem; color: hsl(var(--fg-muted)); margin-bottom: 2rem; }
.docs-content h2 { font-size: 1.6rem; letter-spacing: -.02em; margin: 3rem 0 1rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); }
.docs-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 2rem; }
.docs-content h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
.docs-content p { line-height: 1.7; margin-bottom: 1rem; color: hsl(var(--fg) / .88); }
.docs-content ul, .docs-content ol { line-height: 1.7; margin: 0 0 1.25rem 1.5rem; }
.docs-content ul li, .docs-content ol li { margin-bottom: .35rem; }
.docs-content code {
  font-family: var(--font-mono);
  background: hsl(var(--bg-3)); padding: .1rem .4rem;
  border-radius: 5px; font-size: .85em;
  border: 1px solid hsl(var(--border));
}
.docs-content figure { margin: 1.5rem 0 2rem; }
.docs-content figcaption { text-align: center; font-size: .85rem; color: hsl(var(--fg-muted)); margin-top: .75rem; font-style: italic; }
.docs-content blockquote {
  border-left: 3px solid hsl(var(--primary));
  background: hsl(var(--primary) / .05);
  padding: 1rem 1.25rem; margin: 1.5rem 0;
  border-radius: 0 8px 8px 0; font-size: .95rem;
}
.docs-content blockquote strong { color: hsl(var(--primary)); }

.docs-content table {
  width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem;
  font-size: .9rem; border: 1px solid hsl(var(--border)); border-radius: 8px; overflow: hidden;
}
.docs-content th, .docs-content td { padding: .65rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid hsl(var(--border)); }
.docs-content th { background: hsl(var(--bg-2)); font-weight: 600; color: hsl(var(--fg)); font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; }
.docs-content tr:last-child td { border-bottom: none; }
.docs-content tr:nth-child(even) td { background: hsl(var(--bg-3) / .5); }
.docs-content td code { font-size: .8rem; }

.callout {
  display: flex; gap: .85rem;
  padding: 1rem 1.25rem;
  background: hsl(var(--primary) / .06);
  border: 1px solid hsl(var(--primary) / .22);
  border-radius: 12px;
  margin: 1.5rem 0;
  font-size: .92rem;
}
.callout .icon { width: 24px; height: 24px; flex-shrink: 0; color: hsl(var(--primary)); }
.callout strong { display: block; margin-bottom: .15rem; color: hsl(var(--primary)); }

.docs-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid hsl(var(--border)); }
.docs-pagination a { display: block; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--bg-2)); transition: all .15s; }
.docs-pagination a:hover { border-color: hsl(var(--primary)); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.docs-pagination .label { font-family: var(--font-mono); font-size: .68rem; color: hsl(var(--fg-muted)); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.docs-pagination .title { font-family: var(--font-display); font-weight: 600; margin-top: .25rem; color: hsl(var(--fg)); }
.docs-pagination .next { text-align: right; }

.spec-grid {
  display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem;
  margin: 1rem 0 1.5rem; padding: 1rem 1.25rem;
  background: hsl(var(--bg-2)); border: 1px solid hsl(var(--border));
  border-radius: 12px; font-size: .9rem;
}
.spec-grid dt { font-family: var(--font-mono); font-size: .82rem; color: hsl(var(--primary)); font-weight: 600; padding-top: .15rem; }
.spec-grid dd { margin: 0; line-height: 1.55; color: hsl(var(--fg) / .88); }

.tag-pro {
  display: inline-block; vertical-align: middle;
  background: hsl(var(--primary) / .12); color: hsl(var(--primary));
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  padding: .15rem .5rem; border-radius: 4px;
  margin-left: .5rem; text-transform: uppercase;
}
.docs-content h2 .tag-pro, .docs-content h3 .tag-pro { font-size: .5em; vertical-align: middle; }

.docs-section-intro {
  display: block; padding: 1rem 1.25rem;
  background: linear-gradient(135deg, hsl(var(--primary) / .08), hsl(var(--primary) / .02));
  border: 1px solid hsl(var(--primary) / .25);
  border-radius: 12px; margin: .5rem 0 1.5rem;
  font-size: .95rem; color: hsl(var(--fg) / .9);
}

.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin: 1rem 0 1.5rem; }
.tile-grid .tile { padding: .95rem 1.1rem; background: hsl(var(--bg-2)); border: 1px solid hsl(var(--border)); border-radius: 10px; }
.tile-grid .tile strong { display: block; color: hsl(var(--fg)); font-size: .92rem; margin-bottom: .2rem; font-family: var(--font-display); }
.tile-grid .tile span { font-size: .82rem; color: hsl(var(--fg-muted)); line-height: 1.5; }

/* ---------- Login gate (legacy) ---------- */
.gate-shell { min-height: calc(100vh - var(--header-h) - 200px); display: flex; align-items: center; justify-content: center; padding: 4rem 1rem; }
.gate-card { max-width: 520px; text-align: center; padding: 3rem 2rem; background: hsl(var(--bg-2)); border: 1px solid hsl(var(--border)); border-radius: 16px; }
.gate-card .gate-icon {
  width: 72px; height: 72px; margin: 0 auto 1.5rem; border-radius: 50%;
  background: hsl(var(--ink)); border: 1px solid hsl(var(--ink-border));
  display: flex; align-items: center; justify-content: center; color: hsl(var(--primary-2));
}
.gate-card h1 { font-size: 1.75rem; margin-bottom: .5rem; letter-spacing: -.02em; }
.gate-card p { color: hsl(var(--fg-muted)); margin-bottom: 1.5rem; }
.gate-card .btn { width: 100%; max-width: 280px; }
.gate-meta { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid hsl(var(--border)); font-size: .85rem; color: hsl(var(--fg-muted)); }

/* Honeypot field (book-demo.html). Moved off-screen rather than
   display:none - headless form-fillers skip hidden inputs, but happily fill
   one that is technically rendered. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Launch mode gating ---------- */
/* js/launch-mode.js puts data-launch="soft"|"hard" on <html> synchronously,
   before first paint, so the wrong CTA never flashes. Elements opt in with
   data-hard-launch (pricing/trial/sign-up) or data-soft-launch (Book a demo).
   An element carrying neither attribute is always shown, which is the right
   default for the bulk of the site. Hiding lives here rather than in JS so
   that the header/footer partials - injected later by enterprise.js -
   render already-correct too.

   Note the :not() on the second rule rather than [data-launch="hard"]: a
   page that somehow loses its launch-mode.js tag (e.g. restored wholesale
   from the hard-launch git tag) then falls back to the hard-launch view
   instead of showing both sets of CTAs at once. Only ever hide here - never
   un-hide with `display: revert`, which would drop an element back to its
   UA default and quietly break .btn's own display:inline-flex. */
html[data-launch="soft"] [data-hard-launch] { display: none !important; }
html:not([data-launch="soft"]) [data-soft-launch] { display: none !important; }

/* ---------- Utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-muted { color: hsl(var(--fg-muted)); }
.text-small { font-size: .875rem; }
.divider { height: 1px; background: hsl(var(--border)); margin: 1.5rem 0; border: 0; }
.mono { font-family: var(--font-mono); }

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.animate-in { animation: fadeUp .6s cubic-bezier(.2,.7,.3,1) both; }
/* .reveal-pending is added by JS only, so content is never hidden without JS */
.reveal-pending { opacity: 0; }
.reveal-pending.animate-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal-pending { opacity: 1; }
}

/* Print */
@media print { .site-header, .site-footer, .nav-actions, .mobile-toggle, .sticky-cta { display: none !important; } body { background: #fff; color: #000; } }

/* Reserve header space to prevent layout shift while partial loads */
[data-include="header"] { display: block; min-height: var(--header-h); }