@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-700.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600.woff2') format('woff2');
}

:root {
  --bg: #12142B; --surface: #1C1F3D; --surface-raised: #262A50;
  --accent: #C6FF5C; --accent-dim: #8FCC2E; --ok: #8B7FFF; --teal: #2DD9C4;
  --text: #F0EDE4; --text-dim: #9C9FC2; --border: #2E3260;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; }
a { color:inherit; }
main { padding-top:74px; padding-bottom:86px; }

.nav { position:fixed; top:0; left:0; right:0; z-index:100; background:var(--bg); display:flex; justify-content:space-between; align-items:center; padding:16px 32px; border-bottom:1px solid var(--border); }
.nav .wordmark { display:flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; }
.nav .wordmark img { width:10px; height:10px; }
/* The mascot shares the .wordmark link with the 10px pulse dot, so it was
   inheriting that size and rendering at 10px from a 320px source (flagged
   2026-09-08, fixed 2026-09-20). 36px matches the 35px wordmark text block,
   so the character and the words read as one lockup. The dot is untouched. */
.nav .wordmark img.wordmark-mascot { width:auto; height:36px; }
.wordmark-text { display:flex; flex-direction:column; line-height:1.15; }
.wordmark-main { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text); }
.wordmark-sub { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--ok); }
.nav .cta {
  font-family:var(--font-mono); font-size:13px; color:var(--bg); font-weight:700;
  text-shadow: 0 1px 0 rgba(210,205,198,.35), 0 -1px 0 rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.5);
  padding:8px 16px; border-radius:20px; text-decoration:none;
  background:linear-gradient(180deg, #DFFFA0, var(--accent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 4px 10px rgba(0,0,0,.3),
    0 1px 3px rgba(0,0,0,.2),
    0 0 8px rgba(198,255,92,.28),
    0 0 22px rgba(198,255,92,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav .cta:hover {
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 4px rgba(0,0,0,.15),
    0 8px 18px rgba(0,0,0,.35),
    0 2px 4px rgba(0,0,0,.25),
    0 0 14px rgba(198,255,92,.55),
    0 0 36px rgba(198,255,92,.35);
}
.nav .cta:active { transform:translateY(1px); box-shadow:inset 0 2px 3px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2); }
.nav-links { display:flex; align-items:center; gap:14px; }
.nav-link { font-family:var(--font-mono); font-size:13px; color:var(--text-dim); text-decoration:none; }
.nav-link:hover { color:var(--accent); }

.nav-icon-link, .nav-icon-trigger {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; color:var(--text-dim); background:none; border:none; cursor:pointer; padding:0;
  transition:color .15s ease;
}
.nav-icon-link:hover, .nav-icon-trigger:hover, .nav-dropdown:hover .nav-icon-trigger { color:var(--accent); }
.nav-icon-link svg, .nav-icon-trigger svg { width:20px; height:20px; }
.nav .cta.nav-icon-cta {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:50%;
}
.nav .cta.nav-icon-cta svg { width:18px; height:18px; }

/* Custom tooltip: replaces the default browser title box so it matches the
   site's own dark/lime chrome instead of the OS tooltip style. */
[data-tip] { position:relative; }
[data-tip]::after {
  content: attr(data-tip);
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% + 8px);
  background:var(--surface-raised); color:var(--text); font-family:var(--font-mono); font-size:11px;
  padding:5px 10px; border-radius:6px; border:1px solid var(--border);
  white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease;
  z-index:30;
}
[data-tip]:hover::after { opacity:1; visibility:visible; }
/* Nav sits at the very top of the page — flip the tooltip to open downward
   so it never clips off the top of the viewport. */
.nav-links [data-tip]::after { bottom:auto; top:calc(100% + 8px); }

@media (max-width:600px) {
  .nav { flex-wrap:wrap; justify-content:center; gap:12px; padding:14px 20px; }
  .nav-links { gap:14px; }
}

.nav-dropdown { position:relative; }
.nav-dropdown-trigger {
  font-family:var(--font-mono); font-size:13px; color:var(--text-dim); background:none; border:none;
  cursor:pointer; display:flex; align-items:center; gap:5px; padding:0; transition:color .15s ease;
}
.nav-dropdown-trigger .chev { font-size:10px; transition:transform .2s ease; display:inline-block; }
.nav-dropdown:hover .nav-dropdown-trigger { color:var(--accent); }
.nav-dropdown:hover .nav-dropdown-trigger .chev { transform:rotate(180deg); }

/* Invisible hover bridge: always present (not gated on :hover), so the mouse
   never crosses a dead zone between the trigger and the panel below it.
   Right-anchored to the trigger (not centered) so it only ever extends
   leftward into open space — centering it used to spill the same box out
   past the viewport edge and over the other nav icons once Services became
   a small icon instead of a wide text label. */
.nav-dropdown::after {
  content:''; position:absolute; top:100%; right:0; left:auto;
  width:520px; height:14px;
}

.nav-dropdown-panel {
  position:absolute; top:calc(100% + 14px); right:0; left:auto;
  padding:18px; border-radius:14px;
  background:var(--surface-raised); border:1px solid var(--border);
  box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(198,255,92,.06);
  width:520px; display:grid; grid-template-columns:1fr 1fr; gap:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, visibility .18s;
  z-index:20;
}
.nav-dropdown:hover .nav-dropdown-panel {
  opacity:1; visibility:visible; pointer-events:auto;
}
.nav-dropdown-card {
  display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:10px;
  text-decoration:none; color:var(--text); background:transparent;
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease;
}
.nav-dropdown-card:hover { background:var(--surface); border-color:var(--border); }
.nav-dropdown-card .icon { width:20px; height:20px; color:var(--accent); }
.nav-dropdown-card .icon svg { width:100%; height:100%; }
.nav-dropdown-card .title { font-family:var(--font-display); font-weight:700; font-size:14px; transition:color .15s ease; }
.nav-dropdown-card:hover .title { color:var(--accent); }
.nav-dropdown-card .desc { font-family:var(--font-body); font-size:12.5px; color:var(--text-dim); line-height:1.4; }

@media (max-width:760px) {
  /* The trigger sits near the right edge of a narrow mobile nav, too far right
     for a 90vw-wide panel to stay on-screen if anchored to it directly (was
     rendering ~120px off the left edge of the viewport, unreadable). Anchor
     to the viewport itself instead, centered, regardless of where the
     trigger sits. */
  .nav-dropdown-panel {
    position:fixed; top:78px; left:50%; right:auto;
    width:90vw; max-width:420px;
    transform:translateX(-50%) translateY(8px);
    grid-template-columns:1fr;
  }
  .nav-dropdown:hover .nav-dropdown-panel { transform:translateX(-50%) translateY(0); }
}

.hero-video-wrap { position:relative; overflow:hidden; width:100%; min-height:620px; display:flex; align-items:center; }
.hero-video {
  position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto;
  transform:translate(-50%,-50%); object-fit:cover; z-index:0;
  filter: grayscale(100%) brightness(0.55) contrast(1.15);
}
.hero-video-wrap::after {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(18,20,43,.35) 0%, var(--bg) 100%);
}
.hero { position:relative; z-index:2; text-align:center; padding:64px 24px 40px; max-width:720px; width:100%; margin:0 auto; }
.hero-headline { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,5vw,44px); margin:0 0 14px; min-height:1.3em; opacity:1; transition:opacity .35s ease; }
.hero-headline .hl { color:var(--ok); }
.hero-headline.slide-fade-out, .hero-sub.slide-fade-out { opacity:0; }
.hero-sub { color:var(--text-dim); font-size:16px; margin:0 0 24px; opacity:1; transition:opacity .35s ease; }
.hero-cta {
  display:inline-block; font-family:var(--font-mono); font-size:13px; color:var(--bg);
  text-shadow: 0 1px 0 rgba(210,205,198,.35), 0 -1px 0 rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.5);
  padding:12px 22px; border-radius:20px; text-decoration:none; font-weight:700;
  background:linear-gradient(180deg, #DFFFA0, var(--accent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -3px 6px rgba(0,0,0,.18),
    0 6px 16px rgba(0,0,0,.35),
    0 2px 4px rgba(0,0,0,.25),
    0 0 10px rgba(198,255,92,.3),
    0 0 30px rgba(198,255,92,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hero-cta:hover {
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 6px rgba(0,0,0,.15),
    0 10px 24px rgba(0,0,0,.4),
    0 3px 6px rgba(0,0,0,.3),
    0 0 18px rgba(198,255,92,.6),
    0 0 44px rgba(198,255,92,.4);
}
.hero-cta:active { transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.25); }

.status-strip { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; padding:16px; font-family:var(--font-mono); font-size:12px; }
.status-strip .ok { color:var(--ok); }
.status-strip .item { color:var(--text-dim); }
.status-strip-mini { justify-content:center; padding:10px 0; }

.status-strip { position:relative; min-height:30px; align-items:center; padding:10px 16px; }

/* A real sentence wraps the pill: fixed prefix text + one rotating word
   inside the pill, crossfading in place — no sliding train. The pill gets a
   fixed min-width (sized to the longest word, "protected.") so swapping
   words never changes the pill's width and drags the prefix text sideways. */
.tag-sentence {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:10px; font-family:var(--font-body); font-size:19px; font-weight:700; color:var(--text);
}
.tag-prefix { white-space:nowrap; }
.tag-rotator {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-width:172px;
  background: rgba(139,127,255,.12);
  border: 1px solid rgba(198,255,92,.55);
  border-radius: 999px;
  padding: 8px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3), 0 0 16px rgba(198,255,92,.12);
}
.tag-rotator-icon { width:16px; height:16px; color:var(--accent); flex-shrink:0; }
.tag-rotator-text {
  font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.01em;
  color:var(--accent); white-space:nowrap;
  transition: opacity .3s ease;
}
.tag-rotator-text.fade { opacity:0; }

@media (prefers-reduced-motion: reduce) {
  .tag-rotator-text { transition:none; }
}

.pillar-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; margin:32px auto; padding:0 24px; }
@media (max-width:640px) { .pillar-grid { grid-template-columns:1fr; } }
/* Trust page's grid has 5 cards, not 4 — the odd one out (Lighthouse) would
   otherwise sit flush left under the first column. Span it across both
   columns and cap its width to match a single card, centered in that row. */
.trust-grid a:last-child { grid-column:1 / -1; max-width:calc(50% - 8px); margin:0 auto; }
@media (max-width:640px) { .trust-grid a:last-child { max-width:none; } }
.trust-badges { display:flex; justify-content:center; align-items:center; gap:28px; flex-wrap:wrap; max-width:1400px; margin:0 auto 56px; padding:0 24px; }
.trust-badge-img { display:flex; align-items:center; text-decoration:none; opacity:.9; transition:opacity .2s, transform .2s; }
.trust-badge-img:hover { opacity:1; transform:translateY(-2px); }
.trust-badge-img img { height:40px; width:auto; max-width:220px; object-fit:contain; }
.trust-badge-linux { gap:8px; }
.trust-badge-linux img { height:34px; }
.trust-badge-word { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text); letter-spacing:.02em; }
.pillar-card { background:var(--surface); border-radius:10px; padding:24px; text-decoration:none; color:var(--text); border:1px solid var(--border); transition:border-color .2s; display:block; text-align:center; }
.pillar-card:hover { border-color:var(--accent); }
/* .coming-soon intentionally left visually identical to other pillar cards — the badge pill is the only signal, per Steve's call */
.pillar-card h2 { font-family:var(--font-display); margin:0 0 6px; font-size:16px; text-transform:none; letter-spacing:0; color:var(--text); }
.pillar-card p { color:var(--text-dim); font-size:14px; margin:0; }
.trust-scan-logo { display:flex; align-items:center; justify-content:center; height:36px; margin-bottom:12px; }
.trust-scan-logo img { max-height:100%; max-width:170px; width:auto; height:auto; object-fit:contain; }
/* SSL Dragon and Qualys's real logos both have black wordmarks with no
   dark-mode version — a light chip keeps them legible without recoloring
   the actual brand mark. */
.trust-scan-logo-chip { background:#fff; border-radius:8px; padding:6px 14px; height:auto; width:fit-content; margin-left:auto; margin-right:auto; }
.trust-scan-logo-chip img { max-height:26px; }

.trust-eyebrow { font-family:var(--font-mono); font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.trust-grade { font-family:var(--font-display); font-weight:700; font-size:clamp(32px,6vw,52px); line-height:1; display:inline-block; margin-bottom:10px; background:linear-gradient(100deg, var(--ok) 0%, var(--teal) 55%, var(--accent) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pillar-card.flip-card { background:none; border:none; padding:0; perspective:1000px; }
.flip-card-inner { position:relative; width:100%; min-height:150px; transition:transform .5s; transform-style:preserve-3d; }
.flip-card.pillar-card:hover .flip-card-inner { transform:rotateY(180deg); }
.flip-card-front, .flip-card-back { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; border-radius:10px; box-sizing:border-box; }
.flip-card-front { background:var(--surface); border:1px solid var(--border); transition:border-color .2s; }
.flip-card.pillar-card:hover .flip-card-front { border-color:var(--accent); }
.flip-card-back { background:var(--surface-raised); border:1px solid var(--accent); transform:rotateY(180deg); }
.flip-card-back p { text-align:center; color:var(--text); font-size:13px; line-height:2; margin:0; }
.badge-coming-soon {
  display:inline-block; font-family:var(--font-mono); font-size:11px; color:var(--bg);
  text-shadow: 0 1px 0 rgba(210,205,198,.35), 0 -1px 0 rgba(0,0,0,.2), 0 2px 3px rgba(0,0,0,.5);
  padding:3px 11px; border-radius:10px; margin-top:8px;
  background:linear-gradient(180deg, #DFFFA0, var(--accent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 3px rgba(0,0,0,.15),
    0 3px 8px rgba(0,0,0,.3);
}

.subpage-explainer table { width:100%; max-width:640px; margin:24px auto; border-collapse:collapse; background:var(--surface); border-radius:10px; overflow:hidden; font-family:var(--font-body); }
.subpage-explainer thead th { text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:0.5px; text-transform:uppercase; color:var(--accent); padding:12px 18px; border-bottom:1px solid var(--border); }
.subpage-explainer tbody td { padding:12px 18px; color:var(--text-dim); border-bottom:1px solid var(--border); font-size:14px; }
.subpage-explainer tbody tr:last-child td { border-bottom:none; }
.subpage-explainer tbody td:first-child { color:var(--text); font-weight:600; }

/* Pricing page: scoped to .pricing-page so this doesn't bleed into the
   shared .subpage-explainer h2 style every other subpage already uses. */
.pricing-page .subpage-explainer h2 { color:var(--ok); }

.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; margin:32px auto; padding:0 24px; }
@media (max-width:640px) { .pricing-grid { grid-template-columns:1fr; } }
.price-card { background:var(--surface); border-radius:10px; padding:24px; border:1px solid var(--border); text-align:center; transition:border-color .2s; display:block; text-decoration:none; color:inherit; }
a.price-card { cursor:pointer; }
.price-card:hover { border-color:var(--accent); }
.price-eyebrow { display:flex; align-items:center; justify-content:center; gap:6px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.price-eyebrow svg { width:15px; height:15px; flex-shrink:0; color:var(--accent); }
.inline-icon-link { display:inline-flex; align-items:center; gap:4px; }
.inline-icon-link svg { width:14px; height:14px; flex-shrink:0; position:relative; top:1px; }
.callout-line { font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--accent); margin-bottom:6px !important; }
.security-badges-mini { display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap; margin:0 auto 20px; }
.security-badges-mini img { height:24px; width:auto; max-width:130px; object-fit:contain; }
.security-lead { font-style:italic; margin-bottom:18px !important; }
.security-rows { display:flex; flex-direction:column; gap:16px; max-width:560px; margin:0 auto; text-align:center; }
.security-row { display:flex; flex-direction:row; align-items:flex-start; justify-content:center; gap:10px; }
.security-row svg { width:20px; height:20px; flex-shrink:0; margin-top:2px; color:var(--accent); }
.security-row strong { color:var(--text); }
.security-row div { color:var(--text-dim); font-size:14px; line-height:1.5; }
.hl-violet { color:var(--ok); font-weight:600; }
.price-hero {
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3.5vw,30px); line-height:1.15;
  display:inline-block; margin-bottom:10px;
  background:linear-gradient(100deg, var(--ok) 0%, var(--teal) 55%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.price-card p { color:var(--text-dim); font-size:14px; margin:0; }
.price-breakdown { list-style:none; padding:0; margin:0 0 10px; text-align:left; }
.price-breakdown li { display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim); padding:4px 0; border-bottom:1px solid var(--border); }
.price-breakdown li span:last-child { color:var(--text); font-weight:600; }
.price-note { font-size:12px; color:var(--text-dim); font-style:italic; }

.subpage-hero { text-align:center; padding:56px 24px 32px; }
.subpage-explainer { max-width:680px; margin:0 auto; padding:0 24px 32px; color:var(--text-dim); font-size:15px; text-align:center; }
.subpage-explainer tbody td { text-align:center; }
.subpage-explainer .hl { color:var(--accent); font-weight:600; }
.contact-link { color:var(--accent); }
.contact-link:hover { color:var(--ok); }
.findable-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:24px auto; padding:0 24px; }
@media (max-width:760px) { .findable-grid { grid-template-columns:1fr; } }
.findable-grid.cols-2 { grid-template-columns:repeat(2,1fr); max-width:640px; }
@media (max-width:600px) { .findable-grid.cols-2 { grid-template-columns:1fr; } }
.findable-item { background:var(--surface); border-radius:10px; padding:20px; border:1px solid var(--border); text-align:center; transition:border-color .2s; }
.findable-item:hover { border-color:var(--accent); }
.findable-item svg { width:24px; height:24px; color:var(--accent); margin-bottom:8px; }
.findable-label { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text); margin-bottom:6px; }
.findable-item p { font-size:13px; color:var(--text-dim); margin:0; }
.findable-price { font-family:var(--font-mono); font-weight:600; color:var(--accent) !important; margin-top:8px !important; }
.access-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:640px; margin:24px auto; padding:0 24px; }
@media (max-width:640px) { .access-grid { grid-template-columns:1fr; } }

.contact-icons { display:flex; gap:18px; justify-content:center; margin-top:6px; }
.contact-icons a { color:var(--text-dim); text-decoration:none; transition:color .15s ease; }
.contact-icons a:hover { color:var(--accent); }
.subpage-explainer h2 { font-family:var(--font-display); color:var(--text); font-size:20px; margin-top:24px; }
.pricing-cta { max-width:480px; margin:0 auto 56px; background:var(--surface); border-radius:10px; padding:28px; text-align:center; }
.pricing-cta.is-link { cursor:pointer; text-decoration:none; color:inherit; display:block; border:1px solid var(--border); transition:border-color .2s, box-shadow .2s; }
.pricing-cta.is-link:hover { border-color:var(--accent); box-shadow:0 0 24px rgba(198,255,92,.28); }
.pricing-cta .price { font-family:var(--font-display); font-size:28px; color:var(--accent); display:block; margin-bottom:8px; }
.pricing-cta .price-arrow { color:var(--ok); margin:0 12px; }
.pricing-cta .price-was { text-decoration:line-through; }

.waitlist-form, .lead-form { max-width:420px; margin:0 auto 56px; }
.waitlist-form > p { text-align:center; }
.waitlist-form input, .lead-form input, .lead-form select, .waitlist-form select { width:100%; padding:14px; margin-bottom:20px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:var(--font-body); }
.lead-form select, .waitlist-form select { text-align:center; text-align-last:center; -moz-text-align-last:center; }
.waitlist-form button, .lead-form button {
  width:100%; padding:14px; color:var(--bg); border:none; border-radius:8px;
  text-shadow: 0 1px 0 rgba(210,205,198,.35), 0 -1px 0 rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.5);
  font-family:var(--font-mono); font-weight:700; cursor:pointer;
  background:linear-gradient(180deg, #DFFFA0, var(--accent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -3px 6px rgba(0,0,0,.18),
    0 6px 16px rgba(0,0,0,.3),
    0 2px 4px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.waitlist-form button:hover, .lead-form button:hover {
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 6px rgba(0,0,0,.15),
    0 10px 22px rgba(0,0,0,.35),
    0 3px 6px rgba(0,0,0,.25);
}
.waitlist-form button:active, .lead-form button:active { transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2); }

footer.site-footer { position:fixed; bottom:0; left:0; right:0; z-index:100; background:var(--bg); display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 24px; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:12px; color:var(--text-dim); text-align:center; }
footer.site-footer .links { display:flex; gap:20px; }
footer.site-footer a { color:var(--text-dim); text-decoration:none; }
footer.site-footer a:hover { color:var(--accent); }

.thanks-card { max-width:480px; margin:64px auto; background:var(--surface); border-radius:10px; padding:36px; text-align:center; }
.thanks-card h1 { font-family:var(--font-display); font-size:24px; margin:0 0 12px; }