@charset "UTF-8";
/* Landing base: tokens and shared parts for variants A/B/C.
   Tokens follow Traffic Creator's dot-matrix DESIGN.md. Variants add their own file. */
@font-face{font-family:Inter;src:url('/fonts/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Silkscreen;src:url('/fonts/silkscreen-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');font-weight:100 800;font-display:swap}

:root {
  --bg: #f8f9fb; --bg-sunk: #f4f5f6; --surface: #ffffff; --surface-2: #fbfbfc; --surface-3: #f1f3f5;
  --ink: #080a0f; --ink-2: #414b5f; --muted: #5a6373; --faint: #6d7586;
  --line: #e3e6eb; --line-2: #d3d8df; --dot: #d7dbe2; --dot-strong: #b4bbc6; --particle: #111520;
  --orange: #ff5a0a; --orange-2: #ff7a33; --orange-hover: #e94a00;
  --orange-wash: #fff1e8; --orange-line: #ffe2d0;
  --success: #13833b; --success-wash: #e8f6ed; --danger: #a8323a; --danger-wash: #fdecee;
  --inst: #0d1016; --inst-bar: #121620; --inst-line: #1c2230; --inst-text: #eef1f6; --inst-muted: #9aa3b4;
  --shadow-1: 0 1px 2px rgb(20 24 34 / .04), 0 14px 38px rgb(20 24 34 / .06);
  --shadow-2: 0 2px 4px rgb(20 24 34 / .04), 0 30px 70px -30px rgb(20 24 34 / .28);
  --shadow-orange: 0 20px 45px -18px rgb(255 90 10 / .5);
  --glow: rgb(255 90 10 / .12); --grid-dot: rgb(8 10 15 / .11);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pixel: "Silkscreen", "Inter", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm: 8px; --r-control: 11px; --r-inner: 14px; --r-card: 17px; --r-feature: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(18px, 4vw, 40px); --section: clamp(88px, 12vw, 168px);
  --wrap: 1180px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* Element defaults use :where() so any single-class rule in a variant wins. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body.lp { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink-2); font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
:where(.lp) img { max-width: 100%; height: auto; display: block; }
:where(.lp) a { color: inherit; text-decoration: none; }
:where(.lp) :where(button, input, select) { font: inherit; color: inherit; }
:where(.lp) :where(h1, h2, h3, h4) { color: var(--ink); margin: 0; text-wrap: balance; }
:where(.lp) p { margin: 0; }
:where(.lp) :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.lp-skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 700; }
.lp-skip:focus { top: 12px; }
.lp-wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.lp-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lp-num { font-variant-numeric: tabular-nums; }

/* Pixel word: one per headline, orange Silkscreen, decoded once on entry. */
.px { font-family: var(--pixel); font-weight: 400; text-transform: uppercase; color: var(--orange); font-size: .9em; letter-spacing: .01em; display: inline-block; white-space: nowrap; }

/* Buttons */
.lp-btn { --h: 54px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: var(--h); padding: 0 22px; border-radius: var(--r-control); font-size: 18.67px; font-weight: 800; letter-spacing: -.015em; line-height: 1; white-space: nowrap; cursor: pointer; border: 0; isolation: isolate; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease), color .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.lp-btn svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.lp-btn:hover svg { transform: translate(3px, -3px); }
.lp-btn[data-arrow="right"]:hover svg { transform: translateX(4px); }
.lp-btn:hover { transform: translateY(-3px); }
.lp-btn:active { transform: translateY(0) scale(.96); transition-duration: .08s; }
.lp-btn-primary { background: var(--orange); color: #fff; box-shadow: var(--shadow-orange), inset 0 -2px 0 rgb(0 0 0 / .12); }
.lp-btn-primary:hover { background: var(--orange-hover); box-shadow: 0 26px 50px -18px rgb(255 90 10 / .6), inset 0 -2px 0 rgb(0 0 0 / .12); }
.lp-btn-primary::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent); transform: skewX(-18deg); transition: left .7s var(--ease); }
.lp-btn-primary:hover::after { left: 120%; }
.lp-btn-ink { background: var(--ink); color: #fff; box-shadow: 0 18px 40px -20px rgb(8 10 15 / .55); }
.lp-btn-ink:hover { background: #1a1e27; }
.lp-btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: inset 0 -2px 0 var(--line); }
.lp-btn-ghost:hover { border-color: var(--ink); box-shadow: var(--shadow-1), inset 0 -2px 0 var(--line); }
.lp-btn-light { background: #fff; color: var(--ink); }
.lp-btn-outline-light { background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .28); }
.lp-btn-outline-light:hover { border-color: #fff; }
.lp-btn-sm { --h: 42px; padding: 0 14px; font-size: 15px; border-radius: 10px; gap: 8px; }
.lp-btn-lg { --h: 60px; padding: 0 26px; }
.lp-btn-block { width: 100%; }
@media (max-width: 480px) { .lp-btn { font-size: 17px; } .lp-btn-lg { --h: 56px; } }

/* Scroll reveals: hidden only when JS runs and motion is allowed. */
.lp-js [data-reveal] { opacity: 0; transform: translateY(22px) scale(1.015); filter: blur(10px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.lp-js [data-reveal="left"] { transform: translateX(-28px); }
.lp-js [data-reveal="right"] { transform: translateX(28px); }
.lp-js [data-reveal="zoom"] { transform: scale(.94); }
.lp-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
@media (max-width: 760px) { .lp-js [data-reveal] { filter: none; transition-duration: .55s; transform: translateY(16px); } }

/* Stars (used by HeroProof and testimonials) */
.lp-stars { display: inline-flex; gap: 2px; }
.lp-stars i { --f: 1; width: 14px; height: 14px; background: linear-gradient(90deg, var(--orange) calc(var(--f) * 100%), var(--dot) 0); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.lp-stars-tp i { background: linear-gradient(90deg, #00b67a calc(var(--f) * 100%), var(--dot) 0); }

/* Hero proof row */
.lp-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; color: var(--muted); }
.lp-proof-item { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-proof-item strong { color: var(--ink); font-weight: 800; }
.lp-proof-dark { color: var(--inst-muted); }
.lp-proof-dark .lp-proof-item strong { color: #fff; }
.lp-proof-g { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-weight: 900; font-size: 12px; color: var(--ink); }

/* Draft markers: never shown in production (component renders nothing there). */
.lp-draft { display: grid; gap: 4px; padding: 14px 16px; border: 1.5px dashed var(--orange); border-radius: var(--r-inner); background: repeating-linear-gradient(135deg, var(--orange-wash) 0 10px, #fff 10px 20px); color: var(--ink); font-size: 13px; line-height: 1.4; }
.lp-draft strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-hover); }
.lp-draft-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; }
.lp-draft-flag { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--orange-hover); background: var(--orange-wash); border: 1px dashed var(--orange); padding: 2px 8px; border-radius: 999px; }

/* Sticky mobile CTA (≤760px): shown after the hero, hidden over final CTA/footer. */
.lp-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; background: rgb(8 10 15 / .92); color: #fff; border-radius: 16px; box-shadow: 0 20px 50px -20px rgb(8 10 15 / .6); backdrop-filter: blur(10px); transform: translateY(140%); transition: transform .45s var(--ease); }
.lp-sticky small { display: block; color: var(--inst-muted); font-size: 12px; }
.lp-sticky strong { font-size: 15px; color: #fff; }
.lp-sticky.is-on { transform: none; }
@media (max-width: 760px) { .lp-sticky { display: flex; } }

/* Native disclosure reset used by FAQ implementations */
:where(.lp) summary { list-style: none; cursor: pointer; }
:where(.lp) summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp *, .lp *::before, .lp *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .lp-js [data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* Compact hero proof line (HeroProofPill) */
.lp-pill-proof { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.lp-pill-proof > a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; padding: 7px 14px 7px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.lp-pill-proof > a:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.lp-pill-proof .lp-stars i { width: 13px; height: 13px; }
.lp-pill-proof b { color: var(--ink); font-weight: 800; }
.lp-pill-q { color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.lp-pill-by { color: var(--muted); }
.lp-pill-g { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-weight: 900; font-size: 11px; color: var(--ink); }
.lp-pill-draft { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed var(--orange); background: var(--orange-wash); color: var(--orange-hover); font-size: 12px; font-weight: 900; cursor: help; }
@media (max-width: 480px) { .lp-pill-by { display: none; } .lp-pill-proof > a { border-radius: 16px; padding: 8px 12px; } }
@media (min-width: 481px) and (max-width: 1020px), (min-width: 1241px) { .lp-pill-proof > a { flex-wrap: nowrap; white-space: nowrap; } }
@media (min-width: 1021px) and (max-width: 1240px) { .lp-pill-proof > a { border-radius: 16px; } }