/* ═══ FONTS (self-hosted) ═══ */
/* Geist and Inter are variable fonts, so one file per subset covers every
   weight the page uses. Served from our own origin instead of Google Fonts:
   the external stylesheet was render-blocking on a third-party connection,
   which held up the text and the reveal animations behind it. unicode-range
   means a browser only downloads the subset the content actually needs. The
   latin-ext files are cut down to Latin Extended-A (U+0100-017F): the only
   character on the page outside plain latin is the "c" in the Belgrade address
   in the footer, and Google's full latin-ext Inter was 85 KB for it. Both
   faces are SIL OFL. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/geist-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;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-017F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-017F;
}

/* ═══════════════════════════════════════════════════════════════════════════
   landers.today — styles
   Based on the RAMP APPS reference CSS (typography, spacing, buttons,
   components) extended for the landers.today page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:       #000;
  --bg-card:  #0a0a0a;
  --bg-raise: #111;
  --border:   #1a1a1a;
  --border-2: #2a2a2a;
  --text:     #ededed;
  --text-2:   #888;
  --text-3:   #555;
  --btn-bg:   #fff;
  --btn-fg:   #000;
  --btn-bg-h: #e0e0e0;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-head: 'Geist', 'Inter', -apple-system, system-ui, sans-serif;
  --radius: 8px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light sections flip the palette; components read the tokens so they
   work on either background. */
.section-light {
  --bg:       #f3f3f3;
  --bg-card:  #fff;
  --bg-raise: #fff;
  --border:   #dedede;
  --border-2: #cfcfcf;
  --text:     #111;
  --text-2:   #555;
  --text-3:   #777;
  --btn-bg:   #111;
  --btn-fg:   #fff;
  --btn-bg-h: #333;
  background: var(--bg);
  color: var(--text);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  position: relative; /* with overflow-x below: keeps older iOS Safari from panning past the viewport */
  overflow-x: hidden;
  overflow-x: clip;
}
::selection { background: #333; color: #fff; }
.section-light ::selection { background: #111; color: #fff; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
button { font-family: inherit; }
[hidden] { display: none !important; }

main, .footer { overflow-x: hidden; overflow-x: clip; } /* nothing inside can widen the page on mobile Safari/Chrome */

.container-wide { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.container-mid  { max-width: 760px;  margin: 0 auto; padding: 0 24px; }
.container-form { max-width: 880px;  margin: 0 auto; padding: 0 24px; }

.hide-mobile { display: inline; }
@media (max-width: 640px) { .hide-mobile { display: none; } }
.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;
}

/* Skip link + focus */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: #fff; color: #000; padding: 10px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.section-light :focus-visible { outline-color: #111; }


/* ═══ NAV ═══ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo-img { height: 22px; width: auto; display: block; }

/* Wordmark (used until the final logo file arrives) */
.wordmark {
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  letter-spacing: -0.04em; color: #fff; text-decoration: none; line-height: 1;
  white-space: nowrap;
}
.wordmark span { font-weight: 400; color: var(--text-2); }
.section-light .wordmark { color: #111; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  text-decoration: none; font-size: 13px; font-weight: 400;
  color: var(--text-2); padding: 6px 10px; border-radius: 5px;
  transition: color .15s;
}
.nav-links a:hover { color: var(--text); }
/* Header CTA: must beat the generic .nav-links a rules (grey text, 400 weight, light hover) */
.nav-links .btn-nav { margin-left: 8px; padding: 9px 16px; background: #fff; color: #000; font-weight: 500; }
.nav-links .btn-nav:hover { background: #e0e0e0; color: #000; }
.nav-toggle {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--text-2);
  transition: transform .3s, opacity .3s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav.nav-open {
    bottom: 0; background: #000;
    backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none;
  }
  .nav-links {
    flex-direction: column; justify-content: center; align-items: center; gap: 0;
    position: absolute; top: 60px; left: 0; right: 0; bottom: 0; padding: 0 24px;
    transform: translateY(-100%); opacity: 0; pointer-events: none;
    transition: transform .35s var(--ease), opacity .3s ease;
  }
  .nav.nav-open .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a {
    font-family: var(--font-head); font-size: 28px; font-weight: 600; padding: 14px 0;
    letter-spacing: -0.03em; border-radius: 0; display: block; text-align: center; color: var(--text);
  }
  .nav-links .btn-nav {
    margin: 28px 0 0; padding: 16px 48px; background: #fff; color: #000;
    border: none; border-radius: 6px; font-size: 15px; font-family: var(--font-body);
    font-weight: 500; letter-spacing: 0;
  }
  .nav-links .btn-nav:hover { background: #e0e0e0; color: #000; }
}


/* ═══ BUTTONS ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-weight: 500; font-size: 13px;
  text-decoration: none; border: none; border-radius: 6px;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, opacity .15s;
  padding: 8px 16px; line-height: 1; white-space: nowrap;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-bg-h); }
.btn-white { background: #fff; color: #000; }
.btn-white:hover { background: #e0e0e0; }
.btn-dark { background: #111; color: #fff; }
.btn-dark:hover { background: #333; }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border-2); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-3); }
.btn-nav { background: #fff; color: #000; }
.btn-nav:hover { background: #e0e0e0; color: #000; }
.btn-lg { padding: 12px 24px; font-size: 14px; }
.btn-xl { padding: 16px 32px; font-size: 15px; }
.btn-full { width: 100%; }
.btn-link {
  background: none; border: none; padding: 0; color: var(--text-2); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: inherit;
}
.btn-link:hover { color: var(--text); }
.btn-spinner {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor;
  border-right-color: transparent; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ═══ TYPE HELPERS ═══ */
.eyebrow {
  font-size: 12px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 500; margin-bottom: 14px;
}
.h-display {
  font-family: var(--font-head); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02;
}
.h-section {
  font-family: var(--font-head); font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.08;
}
.lead { font-size: 17px; color: var(--text-2); line-height: 1.65; }
.muted { color: var(--text-3); }
.small { font-size: 13px; }


/* ═══ HERO ═══ */
.hero {
  padding: 150px 0 88px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2); letter-spacing: 0.02em;
  margin-bottom: 26px; padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 100px;
}
.hero-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.hero h1 {
  font-size: clamp(38px, 5.6vw, 72px);
  margin-bottom: 24px; max-width: 14ch;
  background: linear-gradient(180deg, #fff 45%, #6a6a6a 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero h1 .num { font-variant-numeric: tabular-nums; }
.hero-sub { font-size: 17px; color: var(--text-2); line-height: 1.65; max-width: 520px; margin-bottom: 32px; }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-price {
  font-family: var(--font-head); font-size: 15px; font-weight: 500; color: var(--text);
  letter-spacing: -0.01em; margin-bottom: 8px;
}
.hero-price span { color: var(--text-3); margin: 0 10px; font-weight: 400; }
.hero-trust { font-size: 13px; color: var(--text-3); }
.hero-trust strong { color: var(--text-2); font-weight: 500; }

/* Preview fan beside the hero copy. Positions are percentages of the
   container and the container keeps a 4:3 ratio, so the rotated frames never
   extend past the column at any viewport width. */
.hero-previews {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
}
.hero-previews .shot-frame {
  position: absolute; width: min(214px, 40%); top: 50%; left: var(--l, 50%);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
  transition: transform .5s var(--ease);
}
.hero-previews .shot-frame.device { box-shadow: none; filter: drop-shadow(0 22px 44px rgba(0,0,0,.6)); }
.hero-previews .shot-frame:nth-child(1) { --l: 24%; --r: -6deg; z-index: 1; }
.hero-previews .shot-frame:nth-child(2) { --l: 50%; --r: 0deg;  z-index: 3; }
.hero-previews .shot-frame:nth-child(3) { --l: 76%; --r: 6deg;  z-index: 2; }
.hero-previews .shot-caption {
  position: absolute; left: 0; right: 0; bottom: -2px; text-align: center;
  font-size: 12px; color: var(--text-3);
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-previews { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .hero { padding: 120px 0 64px; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 44px); letter-spacing: -0.04em; margin-bottom: 18px; max-width: none; }
  .hero-sub { font-size: 15px; margin-bottom: 26px; }
  .hero-actions .btn { width: 100%; padding: 14px 22px; font-size: 15px; }
  .hero-price { font-size: 14px; }
  .hero-price span { margin: 0 6px; }
}


/* ═══ SECTIONS ═══ */
.section { padding: 110px 0; border-bottom: 1px solid var(--border); }
.section-tight { padding: 80px 0; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-header h2 {
  font-family: var(--font-head); font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.08;
}
.section-header .lead { margin: 18px auto 0; max-width: 560px; }
.section-label {
  font-size: 12px; color: var(--text-3); margin-bottom: 14px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
}
.section-desc { font-size: 15px; color: var(--text-2); line-height: 1.7; max-width: 520px; margin: 16px auto 0; }
@media (max-width: 768px) {
  .container-wide, .container-mid, .container-form { padding: 0 20px; }
  .section { padding: 72px 0; }
  .section-tight { padding: 56px 0; }
  .section-header { margin-bottom: 40px; }
}


/* ═══ REASONS ═══ */
.reasons { padding: 0; border-bottom: 1px solid var(--border); }
.reasons-intro { padding: 72px 0 8px; }
.reason {
  padding: 96px 0; border-bottom: 1px solid var(--border);
  scroll-margin-top: 70px;
}
.reason:last-of-type { border-bottom: none; }
.reason-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; align-items: center;
}
.reason:nth-of-type(even) .reason-visual { order: -1; }
.reason-num {
  font-family: var(--font-head); font-size: clamp(64px, 9vw, 120px); font-weight: 700;
  letter-spacing: -0.06em; line-height: .9; color: #fff;
  margin-bottom: 12px; font-variant-numeric: tabular-nums;
}
.reason-kicker {
  font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 500; margin-bottom: 14px;
}
.reason h2 {
  font-family: var(--font-head); font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 20px;
}
.reason p.lead { font-size: 16px; max-width: 480px; }
.reason-extra { margin-top: 26px; }
.reason-visual { min-width: 0; }
@media (max-width: 900px) {
  .reason { padding: 64px 0; }
  .reason-grid { grid-template-columns: 1fr; gap: 36px; }
  .reason:nth-of-type(even) .reason-visual { order: 0; }
  .reason-num { font-size: 64px; }
}


/* ═══ MOCK VISUALS (monochrome illustrations) ═══ */
.mock-wrap { position: relative; }
.mock-label {
  display: inline-block; font-size: 11px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 14px;
}
.mock {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; color: var(--text);
}
.mock-bar {
  height: 26px; border-bottom: 1px solid var(--border); display: flex; align-items: center;
  gap: 5px; padding: 0 10px;
}
.mock-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-2); display: block; }
.mock-body { padding: 16px; }
.sk { display: block; background: var(--border-2); border-radius: 3px; height: 8px; margin-bottom: 8px; }
.sk.h { height: 12px; background: var(--text-2); width: 78%; }
.sk.w40 { width: 40%; } .sk.w55 { width: 55%; } .sk.w65 { width: 65%; } .sk.w80 { width: 80%; } .sk.w90 { width: 90%; }
.sk.img { height: 80px; border-radius: 6px; background: var(--bg-raise); border: 1px dashed var(--border-2); margin: 10px 0 12px; }
.sk.btn { height: 26px; width: 46%; background: var(--text); border-radius: 5px; margin-top: 12px; }
.section-light .sk.btn { background: #111; }
.mock-text { font-size: 12px; line-height: 1.4; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
.mock-text.sub { font-weight: 400; color: var(--text-2); font-size: 11px; }
.mock-cta {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 7px 12px; border-radius: 5px;
  background: var(--btn-bg); color: var(--btn-fg); margin-top: 10px;
}

/* 01 · Ad → landing page */
.mock-pair { display: grid; grid-template-columns: minmax(0, 5fr) 40px minmax(0, 6fr); gap: 10px; align-items: center; }
.mock-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.mock-arrow svg { width: 24px; height: 24px; }
.mock-ad .ad-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mock-ad .ad-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--border-2); flex-shrink: 0; }
.mock-ad .ad-meta { font-size: 10px; color: var(--text-3); line-height: 1.2; }
.mock-ad .ad-meta b { display: block; color: var(--text-2); font-weight: 500; }
.mock-ad .ad-img { height: 96px; border-radius: 6px; background: var(--bg-raise); border: 1px dashed var(--border-2); margin: 10px 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.mock-page .page-hero { padding: 4px 0 8px; }
.mock-page .page-hero .mock-text { font-size: 14px; }
.mock-match {
  display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--border-2); color: var(--text-2); margin-bottom: 8px; letter-spacing: .04em; text-transform: uppercase;
}
@media (max-width: 480px) {
  .mock-pair { grid-template-columns: 1fr; }
  .mock-arrow svg { transform: rotate(90deg); }
}

/* Reference-style visual card (used by reasons 02–05) */
.rv-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 26px 24px;
}
.rv-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); margin-bottom: 18px;
}
.rv-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); line-height: 1.5; }

/* 02 · A different approach: product page vs. landing page */
.approach { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
.approach-col { padding-top: 16px; min-width: 0; }
.approach-col.is-landing { border-left: 1px solid var(--border); padding-left: 18px; }
.approach-col.is-product { padding-right: 18px; }
.approach-col h3 { font-family: var(--font-head); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.approach-col.is-product h3 { color: var(--text-3); }
.approach-sub { font-size: 11px; color: var(--text-3); margin: 3px 0 14px; }
.approach-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.approach-col li { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.4; }
.approach-col.is-product li { color: var(--text-3); }
.approach-col.is-landing li { color: var(--text); }
.approach .mark { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.approach .mark svg { width: 10px; height: 10px; }
.approach-col.is-product .mark { background: var(--bg-raise); border: 1px solid var(--border-2); color: var(--text-3); }
.approach-col.is-landing .mark { background: var(--btn-bg); color: var(--btn-fg); }
@media (max-width: 480px) { .rv-card { padding: 22px 18px; } }
@media (max-width: 380px) {
  .approach { grid-template-columns: 1fr; }
  .approach-col.is-product { padding-right: 0; padding-bottom: 16px; }
  .approach-col.is-landing { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); }
}

/* 03 · Common drop-off reasons */
.dropoff { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dropoff li {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--bg-raise); border: 1px solid var(--border); border-radius: 10px;
}
.dropoff-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--text); background: var(--bg-card);
}
.dropoff-icon svg { width: 16px; height: 16px; }
.dropoff b { display: block; font-size: 14px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; }
.dropoff small { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* 04 · What we've tested */
.tested { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tested li {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px; font-size: 13px; font-weight: 500;
  background: var(--bg-raise); border: 1px solid var(--border); border-radius: 8px; color: var(--text); min-width: 0;
}
.tested li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text); flex-shrink: 0; }
.tested-count { text-align: center; padding: 20px 0 2px; }
.tested-count b { display: block; font-family: var(--font-head); font-size: 36px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.tested-count span { display: block; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
@media (max-width: 360px) { .tested li { font-size: 12px; padding: 10px; } }

/* 04 · Case studies */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.case-card {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
  overflow: hidden; display: flex; flex-direction: column; transition: background .2s;
}
.case-card:hover { background: var(--bg-raise); }
.case-shot { position: relative; border-bottom: 1px solid var(--border); background: #0d0d0d; aspect-ratio: 16 / 10; overflow: hidden; }
/* A portrait phone cannot fill a 16:10 card, and a `cover` crop would leave
   nothing but a sliver of the bezel. It sits centred instead, oversized and
   clipped at the bottom, so the card shows the top of the page at a readable
   size. */
.case-shot img {
  position: absolute; left: 50%; top: 13%; transform: translateX(-50%);
  width: auto; height: 175%; object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.55));
}
.case-shot .wf { width: 100%; height: 100%; }
.case-shot .wf svg { width: 100%; height: 100%; display: block; }
.case-type {
  position: absolute; top: 10px; left: 10px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px; background: #111; color: #eee; border: 1px solid #333; z-index: 1;
}
.case-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.case-brand { display: flex; align-items: center; gap: 10px; }
.case-brand img { height: 20px; width: auto; }
.case-brand .brand-text { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.case-outcome { font-family: var(--font-head); font-size: 28px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.case-outcome small { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--text-2); letter-spacing: 0; margin-top: 6px; }
.case-row { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.case-row b { color: var(--text-3); font-weight: 500; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; display: block; margin-bottom: 2px; }
.case-note { font-size: 12px; color: var(--text-3); margin-top: 18px; }
.reason-full { grid-column: 1 / -1; }
@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } }

/* 05 · Conversion sequence road map.
   Items stay in logical order in the <ol>; grid placement draws the snake
   (1 → 2, down, 4 ← 3, down, 5 → 6) and pseudo-elements draw the arrows. */
.road {
  --node: 40px; --row-gap: 30px;
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--row-gap); padding-top: 4px;
}
.road-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.road-step:nth-child(1) { grid-area: 1 / 1; }
.road-step:nth-child(2) { grid-area: 1 / 3; }
.road-step:nth-child(3) { grid-area: 2 / 3; }
.road-step:nth-child(4) { grid-area: 2 / 1; }
.road-step:nth-child(5) { grid-area: 3 / 1; }
.road-step:nth-child(6) { grid-area: 3 / 3; }
.road-num {
  position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%;
  border: 1.5px solid var(--text); background: var(--bg-card); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
}
.road-step.is-final .road-num { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.road-label { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
/* connectors: line + arrow head drawn from each step toward the next one */
.road-step::after { content: ''; position: absolute; background: var(--text-3); }
.road-step::before { content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent; }
.road-step.is-final::after, .road-step.is-final::before { display: none; }
/* horizontal → (1→2, 5→6): from the node's right edge across the middle column */
.road-step:nth-child(1)::after, .road-step:nth-child(5)::after {
  top: calc(var(--node) / 2 - 1px); height: 2px;
  left: calc(50% + var(--node) / 2 + 6px); width: calc(200% - var(--node) - 12px);
}
.road-step:nth-child(1)::before, .road-step:nth-child(5)::before {
  top: calc(var(--node) / 2 - 5px); left: calc(250% - var(--node) / 2 - 12px);
  border-left: 7px solid var(--text-3); border-right: 0;
}
/* horizontal ← (3→4) */
.road-step:nth-child(3)::after {
  top: calc(var(--node) / 2 - 1px); height: 2px;
  right: calc(50% + var(--node) / 2 + 6px); width: calc(200% - var(--node) - 12px);
}
.road-step:nth-child(3)::before {
  top: calc(var(--node) / 2 - 5px); right: calc(250% - var(--node) / 2 - 12px);
  border-right: 7px solid var(--text-3); border-left: 0;
}
/* vertical ↓ (2→3, 4→5): from below the label down through the row gap */
.road-step:nth-child(2)::after, .road-step:nth-child(4)::after {
  left: calc(50% - 1px); width: 2px; top: calc(100% + 4px); height: calc(var(--row-gap) - 12px);
}
.road-step:nth-child(2)::before, .road-step:nth-child(4)::before {
  left: calc(50% - 5px); top: calc(100% + var(--row-gap) - 8px);
  border-top: 7px solid var(--text-3); border-bottom: 0;
}
@media (max-width: 380px) { .road { --node: 36px; } .road-label { font-size: 12px; } }

/* 06 · Angles */
.angles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.angle { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.angle .shot-frame { width: 100%; }
.angle-label { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.angle-label b { font-family: var(--font-head); color: var(--text); font-weight: 600; }
.callout {
  margin-top: 22px; padding: 16px 18px; border: 1px solid var(--border-2); border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--bg-card);
}
.callout strong { font-family: var(--font-head); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 560px) { .angles { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .angle-label { font-size: 11px; } }

/* 07 · Checklist + finished preview */
.deliver { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 20px; align-items: start; }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.check-list li { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.check-list li:last-child { border-bottom: none; }
.check-list .tick {
  width: 18px; height: 18px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.check-list .tick svg { width: 10px; height: 10px; }
.finished { position: relative; }
.finished .badge-live {
  position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600;
}
@media (max-width: 560px) { .deliver { grid-template-columns: 1fr; } .finished { max-width: 200px; } }

/* CTA band */
.cta-band { padding: 88px 0; text-align: center; border-bottom: 1px solid var(--border); }
.cta-band h2 { font-family: var(--font-head); font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; margin: 0 auto 16px; max-width: 760px; text-wrap: balance; }
.cta-band p { color: var(--text-2); margin-bottom: 28px; }


/* ═══ SHOT FRAMES (page previews / wireframes) ═══ */
.shot-frame {
  position: relative; background: #fff; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.12); aspect-ratio: 9 / 16;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.12);
}
.shot-frame > svg, .shot-frame > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; }
/* Device mockups already carry their own phone bezel and a transparent
   surround, so the card chrome (white fill, border, radius, box-shadow) has to
   come off — a box-shadow would trace the rectangle, not the phone. The shadow
   moves to a drop-shadow filter, which follows the alpha channel instead. */
.shot-frame.device {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  overflow: visible; aspect-ratio: 430 / 866;
  /* filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); */
}
.shot-frame.device > img { object-fit: contain; object-position: center; }
.shot-frame .concept-tag {
  position: absolute; top: 8px; left: 8px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  background: #111; color: #fff; padding: 3px 6px; border-radius: 3px; font-weight: 600;
}


/* ═══ SHOWCASE ═══ */
/* The section clips its own overflow, so nothing in the strip can ever widen
   the page (works on every browser, unlike overflow on html/body in iOS). */
.showcase { padding: 100px 0; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; overflow: clip; }
.showcase .section-header { margin-bottom: 44px; }
.showcase-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
.showcase-head h2 { font-family: var(--font-head); font-size: clamp(30px, 4.2vw, 48px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; max-width: 640px; }
.showcase-controls { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--bg-card);
  color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.icon-btn:hover { border-color: var(--text-3); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.pill { width: auto; padding: 0 14px; border-radius: 100px; gap: 8px; font-size: 12px; font-weight: 500; }
/* Full-bleed strip WITHOUT negative margins: it is a direct child of the
   section, 100% wide, and its side padding lines the first card up with the
   page gutter (24px, or the centred 1240px container on wide screens). */
.showcase-strip-wrap { position: relative; width: 100%; }
/* No scroll-snap here on purpose: the strip auto-scrolls a fraction of a
   pixel per frame, and a snap (mandatory in particular) drags every step
   back to the nearest card, which reads as stutter and as a jump whenever
   the marquee pauses. Arrows and arrow keys move a whole card instead. */
.showcase-strip {
  --gutter: max(24px, calc((100% - 1240px) / 2 + 24px));
  display: flex; gap: 20px; width: 100%;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  padding: 8px var(--gutter) 28px; scrollbar-width: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.showcase-strip::-webkit-scrollbar { display: none; }
.showcase-strip.dragging { cursor: grabbing; scroll-behavior: auto; }
/* The cursor sweeps over cards mid-drag; lifting each one on hover reads as
   flicker, and a native image drag would swallow the gesture outright. */
.showcase-strip.dragging .shot:hover .shot-frame { transform: none; }
.showcase-strip img { -webkit-user-drag: none; user-drag: none; }
.shot {
  flex: 0 0 auto; width: 250px; text-align: left; background: none; border: none;
  padding: 0; cursor: pointer; color: var(--text); font-family: inherit;
  /* buttons centre their content vertically; stack from the top so every
     card lines up even when one caption wraps to two lines */
  display: flex; flex-direction: column; justify-content: flex-start; align-self: flex-start;
}
.shot:hover .shot-frame { transform: translateY(-4px); }
.shot .shot-frame { transition: transform .3s var(--ease), box-shadow .3s; }
.shot-meta { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.shot-meta b { font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.shot-meta span { font-size: 12px; color: var(--text-3); }
.scroll-cue { display: none; font-size: 12px; color: var(--text-3); align-items: center; gap: 6px; margin-top: -8px; }
.scroll-cue svg { width: 14px; height: 14px; }
.showcase-note { font-size: 12px; color: var(--text-3); margin-top: 8px; }
@media (max-width: 768px) {
  .showcase { padding: 72px 0; }
  .showcase-strip { --gutter: 20px; padding-bottom: 24px; gap: 14px; }
  .shot { width: 210px; }
  .scroll-cue { display: flex; }
  .showcase-controls .icon-btn.arrow { display: none; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.92); display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox-inner { position: relative; width: min(92vw, 430px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 14px; }
.lightbox-frame { flex: 1; min-height: 0; overflow: auto; border-radius: 10px; background: #fff; border: 1px solid #333; max-height: 74vh; }
.lightbox-frame svg, .lightbox-frame img { width: 100%; height: auto; display: block; }
.lightbox-frame img { aspect-ratio: auto; }
/* A device mockup is its own frame: drop the white plate, the border and the
   scroll, and let the phone sit on the dim backdrop. It scales to the frame's
   height rather than its width, so the whole phone is always on screen and the
   close button above it never gets pushed out of the viewport. */
.lightbox-frame.device { background: none; border: 0; overflow: visible; filter: drop-shadow(0 24px 50px rgba(0,0,0,.65)); display: flex; justify-content: center; }
.lightbox-frame.device img { width: auto; height: auto; max-height: 74vh; max-width: 100%; }
.lightbox-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #ddd; flex-wrap: wrap; }
.lightbox-meta b { font-family: var(--font-head); font-size: 16px; }
.lightbox-meta span { font-size: 13px; color: #888; }
.lightbox-actions { display: flex; gap: 8px; }
.lightbox-close { position: absolute; top: -46px; right: 0; }
.lightbox .icon-btn { background: #111; border-color: #333; color: #fff; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-nav.prev { left: -56px; } .lightbox-nav.next { right: -56px; }
@media (max-width: 700px) { .lightbox-nav.prev { left: 0; top: auto; bottom: -50px; transform: none; } .lightbox-nav.next { right: 0; top: auto; bottom: -50px; transform: none; } .lightbox-inner { max-height: calc(100vh - 110px); } }


/* ═══ TEAM ═══ */
.team-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.team-copy .lead { margin: 18px 0 26px; }
.team-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.review-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 8px; text-decoration: none; color: var(--text); background: var(--bg-card); transition: border-color .15s;
}
.review-badge:hover { border-color: var(--text-3); }
.review-badge .stars { display: flex; gap: 2px; }
.review-badge .stars svg { width: 12px; height: 12px; }
.review-badge b { font-family: var(--font-head); font-size: 14px; }
.review-badge .stars { color: var(--text); }
.review-badge b { color: var(--text); display: block; }
.review-badge [data-review-label] { font-size: 11px; color: var(--text-3); display: block; }
.logo-cloud-label { font-size: 12px; color: var(--text-3); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .08em; }
.logo-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-cloud .logo-cell {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card);
  font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-2); text-align: center;
}
.logo-cloud .logo-cell img { max-height: 24px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .85; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
.testi-card {
  padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-card); transition: background .2s;
}
.testi-card:hover { background: var(--bg-raise); }
.testi-quote { font-size: 14px; color: var(--text-2); line-height: 1.7; flex: 1; margin-bottom: 22px; }
.testi-author { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.testi-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg-raise); color: var(--text-3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0;
}
.testi-name { font-size: 13px; font-weight: 500; display: block; }
.testi-company { font-size: 11px; color: var(--text-3); display: block; }
.testi-source { font-size: 12px; color: var(--text-3); margin-top: 16px; }
@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; gap: 36px; }
  .testi-grid { grid-template-columns: 1fr; margin-top: 36px; }
}


/* ═══ COMPARISON ═══ */
.compare-wrap { position: relative; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; scrollbar-width: thin; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 780px; font-size: 13px; }
.compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.compare tr > :last-child { border-right: none; }
.compare tbody tr:last-child td { border-bottom: none; }
.compare thead th { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--bg-card); letter-spacing: -0.01em; }
.compare tbody th { font-weight: 500; color: var(--text); width: 22%; background: var(--bg-card); }
.compare td { color: var(--text-2); line-height: 1.5; }
.compare .is-us { background: #fff; color: #000; }
.compare thead .is-us { color: #000; font-weight: 700; }
.compare tbody .is-us { color: #111; font-weight: 500; }
/* Tick + text in one flex row: the tick is centred on the first text line
   (13px text: tick 16px with a 1.5px top offset sits on the first line centre) and wrapped
   lines start under the text, not under the tick. */
.compare .us-cell { display: flex; align-items: flex-start; gap: 10px; }
.compare .is-us .tick { display: inline-flex; flex-shrink: 0; width: 16px; height: 16px; margin-top: 1.5px; border-radius: 50%; background: #111; color: #fff; align-items: center; justify-content: center; }
.compare .is-us .tick svg { width: 9px; height: 9px; }
.compare tbody th, .compare thead th:first-child { position: sticky; left: 0; z-index: 1; }
.compare-cue { display: none; font-size: 12px; color: var(--text-3); margin-top: 10px; align-items: center; gap: 6px; }
.compare-cue svg { width: 14px; height: 14px; }
.compare-note { font-size: 12px; color: var(--text-3); margin-top: 14px; max-width: 720px; }
@media (max-width: 860px) {
  .compare-cue { display: flex; }
  .compare th, .compare td { padding: 14px; }
  .compare tbody th { width: 150px; min-width: 150px; box-shadow: 4px 0 8px rgba(0,0,0,.35); }
}


/* ═══ WHAT'S INCLUDED ═══ */
.incl-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.incl-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.incl-list li { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.incl-list li b { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.incl-list li b .tick { width: 18px; height: 18px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.incl-list li b .tick svg { width: 10px; height: 10px; }
.incl-list li p { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.meta-stack { display: flex; flex-direction: column; gap: 10px; }
.meta-card { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.meta-card .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 8px; }
.meta-card .v { font-family: var(--font-head); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
.meta-card p, .meta-card li { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.meta-card ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.meta-card li { padding-left: 14px; position: relative; }
.meta-card li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 1px; background: var(--text-3); }
.formats-head { margin: 64px 0 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.formats-head h3 { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.formats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.format { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); min-width: 0; }
.format .n { font-family: var(--font-head); font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.format b { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.format p { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.definition { margin-top: 24px; padding: 20px 22px; border-left: 2px solid var(--text); background: var(--bg-card); border-radius: 0 10px 10px 0; }
.definition p { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.definition p + p { margin-top: 8px; }
.definition b { color: var(--text); font-weight: 600; }
@media (max-width: 1000px) { .formats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .incl-layout { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 600px) { .incl-list { grid-template-columns: 1fr; } .formats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .formats { grid-template-columns: 1fr; } }


/* ═══ HOW IT WORKS ═══ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: step; }
.step { padding: 26px 22px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); position: relative; }
.step .step-n { font-family: var(--font-head); font-size: 40px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--text); opacity: .18; margin-bottom: 18px; }
.step h3 { font-family: var(--font-head); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.step p { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.steps-note { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--border-2); border-radius: 8px; font-size: 13px; color: var(--text-2); display: flex; gap: 10px; align-items: flex-start; }
.steps-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--text); }
.steps-note b { color: var(--text); font-weight: 500; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }


/* ═══ FAQ ═══ */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; padding: 20px 0; font-family: var(--font-head);
  font-size: 16px; font-weight: 500; color: var(--text); letter-spacing: -0.01em;
  cursor: pointer; text-align: left; transition: color .15s;
}
.faq-q:hover { color: var(--text-2); }
.faq-icon { width: 16px; height: 16px; flex-shrink: 0; transition: transform .25s; color: var(--text-3); }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-a > div { overflow: hidden; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p { padding-bottom: 20px; font-size: 14px; color: var(--text-2); line-height: 1.7; max-width: 680px; }


/* ═══ PLANS ═══ */
.pricing { scroll-margin-top: 40px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan {
  position: relative; text-align: left; padding: 30px 28px 28px; border: 1px solid var(--border-2); border-radius: 12px;
  background: var(--bg-card); color: var(--text); cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 0; transition: border-color .2s, background .2s, transform .2s;
}
.plan:hover { border-color: var(--text-3); }
.plan.is-selected { background: #fff; color: #000; border-color: #fff; }
.plan .plan-badge {
  position: absolute; top: -12px; left: 24px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px; background: #fff; color: #000; border: 1px solid #fff;
}
.plan.is-selected .plan-badge { background: #000; color: #fff; border-color: #000; }
.plan-name { font-family: var(--font-head); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
.plan-price { font-family: var(--font-head); font-size: 48px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin-bottom: 6px; }
.plan-price sup { font-size: 22px; vertical-align: top; margin-right: 2px; top: 6px; position: relative; letter-spacing: 0; }
.plan-per { font-size: 13px; color: var(--text-2); }
.plan.is-selected .plan-per, .plan.is-selected .plan-desc { color: #555; }
.plan-save { display: inline-block; margin-top: 12px; font-size: 12px; padding: 4px 9px; border-radius: 4px; border: 1px solid var(--border-2); color: var(--text-2); }
.plan.is-selected .plan-save { border-color: #ddd; color: #333; }
.plan-desc { font-size: 14px; color: var(--text-2); margin: 20px 0 24px; line-height: 1.55; flex: 1; }
.plan .plan-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 6px;
  font-size: 14px; font-weight: 500; background: #fff; color: #000; transition: background .15s;
}
.plan:hover .plan-cta { background: #e0e0e0; }
.plan.is-selected .plan-cta { background: #000; color: #fff; }
.plan.is-selected .plan-cta::before { content: '✓'; font-size: 12px; }
.plans-note { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 18px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; gap: 16px; max-width: 480px; margin: 0 auto; } .plan { padding: 26px 22px 22px; } }


/* ═══ WIZARD (project signup) ═══ */
.wizard { margin-top: 44px; scroll-margin-top: 80px; }
.wizard-card { border: 1px solid var(--border-2); border-radius: 12px; background: var(--bg-card); overflow: hidden; }
.wiz-head { padding: 22px 28px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wiz-head .wiz-plan { font-size: 13px; color: var(--text-2); }
.wiz-head .wiz-plan b { color: var(--text); font-family: var(--font-head); font-weight: 600; }
.wiz-progress { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.wiz-progress li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); padding: 6px 10px; border-radius: 100px; border: 1px solid transparent; }
.wiz-progress li i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-2); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-family: var(--font-head); }
.wiz-progress li.is-current { color: var(--text); border-color: var(--border-2); }
.wiz-progress li.is-current i { background: #fff; color: #000; border-color: #fff; }
.wiz-progress li.is-done { color: var(--text-2); }
.wiz-progress li.is-done i { background: var(--bg-raise); color: var(--text); }
.wiz-body { padding: 28px; }
@media (max-width: 640px) {
  .wiz-head { padding: 16px 18px; }
  .wiz-body { padding: 20px 18px; }
  .wiz-progress li { font-size: 11px; padding: 5px 8px; }
  .wiz-progress li i { width: 18px; height: 18px; font-size: 10px; }
  .wiz-step h3 { font-size: 20px; }
}
.wiz-step { display: none; }
.wiz-step.is-active { display: block; }
.wiz-step h3 { font-family: var(--font-head); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 6px; }
.wiz-step > p.help { font-size: 13px; color: var(--text-3); margin-bottom: 24px; }
.wiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.wiz-actions .right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.wiz-saved { font-size: 12px; color: var(--text-3); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; font-weight: 500; color: var(--text-2); }
.form-group label .opt { color: var(--text-3); font-weight: 400; }
.form-group .hint { font-size: 12px; color: var(--text-3); }
.form-group input, .form-group select, .form-group textarea {
  font-family: inherit; font-size: 14px; padding: 11px 13px;
  border: 1px solid var(--border-2); border-radius: 6px;
  background: var(--bg); color: var(--text); outline: none; width: 100%;
  transition: border-color .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #666; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-3); }
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%23777' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.form-group textarea { resize: vertical; min-height: 96px; }
@media (max-width: 640px) {
  .form-group input, .form-group select, .form-group textarea, .per-page-row input, .per-page-row select { font-size: 16px; }
}
.form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea, .form-group.has-error .choice-grid { border-color: #c0392b; }
.field-error { font-size: 12px; color: #e06b5f; display: none; }
.form-group.has-error .field-error { display: block; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: 1px solid transparent; border-radius: 6px; }
.choice { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border-2); border-radius: 6px; font-size: 13px; cursor: pointer; background: var(--bg); transition: border-color .15s, background .15s; }
.choice:hover { border-color: #555; }
.choice input { accent-color: #fff; width: 15px; height: 15px; margin: 0; flex-shrink: 0; }
.choice.is-checked { border-color: #fff; background: var(--bg-raise); }
@media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .choice-grid { grid-template-columns: 1fr; } }
.fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin-top: 8px; }
.fieldset legend { font-size: 12px; color: var(--text-2); padding: 0 6px; }
.toggle-optional { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px dashed var(--border-2); border-radius: 8px; font-size: 13px; color: var(--text-2); }
.toggle-optional button { flex-shrink: 0; }
.per-page { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.per-page-row { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.per-page-row .pp-n { font-family: var(--font-head); font-size: 12px; color: var(--text-3); text-align: center; }
.per-page-row input, .per-page-row select { padding: 9px 11px; font-size: 13px; }
@media (max-width: 640px) { .per-page-row { grid-template-columns: 32px 1fr; } .per-page-row select, .per-page-row input:nth-child(3) { grid-column: 2; } }

/* Review step */
.review-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.review-box { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); overflow: hidden; }
.review-box .rb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.review-box .rb-body { padding: 16px; }
.review-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.review-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; font-size: 13px; }
.review-list li b { color: var(--text-3); font-weight: 500; }
.review-list li span { color: var(--text); word-break: break-word; white-space: pre-line; }
.review-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); }
.review-total .amt { font-family: var(--font-head); font-size: 28px; font-weight: 700; letter-spacing: -0.04em; }
.review-total small { font-size: 12px; color: var(--text-3); }
.terms-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.terms-row input { margin-top: 3px; accent-color: #fff; width: 15px; height: 15px; flex-shrink: 0; }
.terms-row a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.terms-row.has-error { color: #e06b5f; }
.secure-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.secure-note svg { width: 14px; height: 14px; }
.form-alert { margin-top: 16px; padding: 12px 14px; border-radius: 6px; font-size: 13px; border: 1px solid #5a2a26; background: #1a0e0d; color: #f0a59a; display: none; }
.form-alert.show { display: block; }
.form-alert.info { border-color: #333; background: var(--bg-raise); color: var(--text-2); }
@media (max-width: 800px) { .review-grid { grid-template-columns: 1fr; } .review-list li { grid-template-columns: 100px 1fr; } }

/* Resume banner */
.resume-banner {
  display: none; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 28px; padding: 16px 20px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--bg-card); font-size: 13px; color: var(--text-2);
}
.resume-banner.show { display: flex; }
.resume-banner b { color: var(--text); font-family: var(--font-head); }
.resume-banner .actions { display: flex; gap: 8px; }

/* Honeypot */
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }


/* ═══ THANK YOU ═══ */
.ty { padding: 160px 0 100px; min-height: 70vh; }
.ty-card { border: 1px solid var(--border-2); border-radius: 12px; background: var(--bg-card); padding: 40px; }
.ty-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px; border-radius: 100px; border: 1px solid var(--border-2); color: var(--text-2); margin-bottom: 22px; }
.ty-status.ok { border-color: #fff; color: #fff; }
.ty-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ty h1 { font-family: var(--font-head); font-size: clamp(30px, 4.5vw, 46px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 14px; }
.ty .lead { margin-bottom: 28px; }
.ty-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
.ty-fact { padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.ty-fact .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 6px; }
.ty-fact .v { font-family: var(--font-head); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; word-break: break-all; }
.ty-next { list-style: none; counter-reset: n; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.ty-next li { display: flex; gap: 14px; font-size: 14px; color: var(--text-2); line-height: 1.6; }
.ty-next li::before { counter-increment: n; content: counter(n); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #000; font-family: var(--font-head); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.ty-next li b { color: var(--text); font-weight: 500; }
@media (max-width: 640px) { .ty { padding: 120px 0 64px; } .ty-card { padding: 26px 20px; } .ty-facts { grid-template-columns: 1fr; } }


/* ═══ FOOTER ═══ */
.footer { border-top: 1px solid var(--border); padding: 56px 0 28px; }
.footer a { color: var(--text-3); text-decoration: none; transition: color .15s; }
.footer a:hover { color: var(--text-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
.footer-logo { display: inline-block; margin-bottom: 16px; }
.footer-brand p { font-size: 13px; color: var(--text-3); line-height: 1.7; max-width: 320px; }
.footer-brand .powered { color: var(--text-2); font-weight: 500; margin-bottom: 6px; }
.footer-col h4 { color: var(--text-2); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.footer-col ul a { font-size: 13px; }
.footer-col p { font-size: 13px; line-height: 1.6; color: var(--text-3); }
.footer-company { font-weight: 500; color: var(--text-2); margin-bottom: 2px; }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--text-3); flex-wrap: wrap;
}
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal a { font-size: 12px; }
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }


/* ═══ LEGAL PAGES ═══ */
.legal-page { padding-top: 140px; }
.legal-title { font-family: var(--font-head); font-size: 38px; font-weight: 700; color: var(--text); letter-spacing: -0.04em; margin-bottom: 10px; }
.legal-updated { font-size: 13px; color: var(--text-3); margin-bottom: 40px; }
.legal-content h2 { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--text); margin: 34px 0 12px; letter-spacing: -0.02em; }
.legal-content p { font-size: 14px; line-height: 1.8; color: var(--text-2); margin-bottom: 12px; }
.legal-content ul { list-style: none; padding: 0; margin: 0 0 16px; }
.legal-content li { font-size: 14px; line-height: 1.8; color: var(--text-2); padding-left: 16px; position: relative; margin-bottom: 6px; }
.legal-content li::before { content: ''; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.legal-content a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--text-2); }
.legal-content strong { color: var(--text); font-weight: 500; }
@media (max-width: 768px) { .legal-page { padding-top: 110px; } .legal-title { font-size: 30px; } }


/* ═══ REVEAL + MOTION ═══ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .shot:hover .shot-frame { transform: none; }
}