/* ==========================================================================
   BLACKFRAME — Roofing funnel landing page
   Design tokens first, then layout primitives, then sections in DOM order.
   ========================================================================== */

:root {
  /* The single rebranding knob. Every accent use reads var(--accent). */
  --accent: oklch(0.70 0.18 48);

  --ink: #0B0B0C;
  --paper: #FAFAF8;
  --charcoal-hover: #121214;
  --charcoal-hover-alt: #131315;
  --light-panel: #F2F2EE;
  --light-panel-alt: #EFEFEB;
  --mock-chrome: #E9E9E5;
  --mock-dot: #C9C9C3;
  --mock-dot-dark: #33333A;
  --mock-fill: #DCDCD6;
  --mock-fill-alt: #DEDED8;
  --mock-fill-dark: #1B1B1F;
  --mock-fill-dark-alt: #26262A;
  --phone-bezel: #1C1C1E;

  /* Paper tints on ink */
  --p85: rgba(250, 250, 248, 0.85);
  --p78: rgba(250, 250, 248, 0.78);
  --p72: rgba(250, 250, 248, 0.72);
  --p70: rgba(250, 250, 248, 0.70);
  --p68: rgba(250, 250, 248, 0.68);
  --p66: rgba(250, 250, 248, 0.66);
  --p62: rgba(250, 250, 248, 0.62);
  --p60: rgba(250, 250, 248, 0.60);
  --p55: rgba(250, 250, 248, 0.55);
  --p50: rgba(250, 250, 248, 0.50);
  --p45: rgba(250, 250, 248, 0.45);

  /* Ink tints on paper */
  --i-3d: #3D3D38;
  --i-4a: #4A4A44;
  --i-5a: #5A5A54;
  --i-6e: #6E6E66;
  --i-77: #77776F;
  --i-8a: #8A8A82;
  --i-9a: #9A9A92;

  /* Rules on dark */
  --rule-10: rgba(250, 250, 248, 0.10);
  --rule-12: rgba(250, 250, 248, 0.12);
  --rule-14: rgba(250, 250, 248, 0.14);
  --rule-16: rgba(250, 250, 248, 0.16);
  --rule-18: rgba(250, 250, 248, 0.18);
  --rule-20: rgba(250, 250, 248, 0.20);
  --rule-28: rgba(250, 250, 248, 0.28);
  --rule-40: rgba(250, 250, 248, 0.40);
  /* Opaque equivalent of --rule-14 composited on --ink, for hairlines that
     overlap each other and must not double in opacity. */
  --hair: #2D2D2D;

  /* Rules on light */
  --lrule-08: rgba(0, 0, 0, 0.08);
  --lrule-09: rgba(0, 0, 0, 0.09);
  --lrule-10: rgba(0, 0, 0, 0.10);
  --lrule-12: rgba(0, 0, 0, 0.12);
  --lrule-14: rgba(0, 0, 0, 0.14);

  --font-display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad-x: clamp(20px, 4vw, 48px);
  --pad-y: clamp(72px, 9vw, 130px);
  --pad-y-tight: clamp(56px, 7vw, 100px);
  --header-h: 65px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky header would otherwise clip anchored headings. */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* An explicit `display` on a component would otherwise beat the UA rule for
   [hidden] — the form and success panel both rely on the attribute. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.section--light :focus-visible,
.compare--old :focus-visible { outline-color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 18px;
}
.skip-link:focus { left: 0; color: var(--ink); }

@keyframes bf-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Reveal targets are hidden by JS (never in static CSS) so a JS failure
   can't leave the page permanently blank. See main.js. */
.is-revealing {
  animation: bf-rise 0.7s cubic-bezier(0.16, 0.84, 0.34, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-revealing { animation: none !important; }
  [data-reveal] { opacity: 1 !important; }
  .mock--phone { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container { max-width: 1280px; margin: 0 auto; }
.container--1000 { max-width: 1000px; }
.container--900 { max-width: 900px; }
.container--ruled {
  border-top: 1px solid var(--rule-14);
  padding-top: var(--pad-y-tight);
}

.section { padding: var(--pad-y) var(--pad-x); }
.section--tight { padding: var(--pad-y-tight) var(--pad-x); }
.section--hero { padding: clamp(56px, 8vw, 110px) var(--pad-x) clamp(40px, 6vw, 80px); }
.section--joined { padding: 0 var(--pad-x) var(--pad-y); }
.section--founder { padding: 0 var(--pad-x) clamp(72px, 9vw, 120px); }
.section--light { background: var(--paper); color: var(--ink); }

.grid { display: grid; }
.grid--two-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px);
}
.grid--compare {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}
.grid--compare-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.grid--steps {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.grid--eco {
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.grid--roi {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.grid--cta {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

/* Hairline grids: 1px gaps, with each cell drawing its own hairline via an
   outset shadow. Adjacent shadows overlap inside the gap, so the rule reads as
   a single 1px line — and a row that runs short of cells leaves ink, not a
   stray lit block (which a tinted container background would show through). */
.hairgrid { display: grid; gap: 1px; }
.hairgrid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.hairgrid--280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.hairgrid__cell {
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--hair);
  transition: background 0.2s ease;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.h1 {
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: 0.93;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(34px, 4.6vw, 66px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
.lead {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}
.mono { font-family: var(--font-mono); }

.accent { color: var(--accent); }
.muted-2 { color: var(--i-9a); }
.dash { color: var(--accent); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.eyebrow--accent {
  color: var(--accent);
  letter-spacing: 0.18em;
  margin-bottom: 26px;
}
.eyebrow--muted { color: var(--i-9a); }

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  margin-bottom: 26px;
}
.kicker--accent { color: var(--accent); }
.kicker--muted { color: var(--i-9a); }
.kicker--dim { color: var(--p45); }
.kicker--wide { letter-spacing: 0.18em; margin-bottom: 14px; }
.kicker--sm { font-size: 11px; margin-bottom: 22px; }

.minilabel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}
.minilabel--muted { color: var(--i-9a); }
.minilabel--dim { color: var(--p50); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 19px 30px;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover,
.btn--accent:focus-visible { background: var(--paper); color: var(--ink); }
.btn--lift:hover { transform: translateY(-2px); }

.btn--ghost {
  border: 1px solid var(--rule-28);
  color: var(--paper);
  font-weight: 600;
  background: transparent;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--paper);
  background: rgba(250, 250, 248, 0.06);
  color: var(--paper);
}

.btn--sm {
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  white-space: nowrap;
}
.btn--lg { font-size: 17px; padding: 22px 30px; }
.btn--block { display: block; width: 100%; text-align: center; }

/* --------------------------------------------------------------------------
   0. Sticky header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 11, 12, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-10);
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo:hover { color: inherit; }
.logo__mark {
  width: 14px;
  height: 14px;
  border: 2.5px solid var(--paper);
  display: block;
}
.logo__word { font-size: 17px; font-weight: 800; letter-spacing: 0.14em; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.nav__link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p72);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero__lead { color: var(--p72); max-width: 34em; margin-bottom: 16px; }
.hero__price-note {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--paper);
  margin: 0 0 34px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Full-width row beneath both hero columns — five items read across the page
   instead of stacking 2-2-1 inside the narrower text column. */
.hero__trust {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: clamp(24px, 3vw, 34px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 14px clamp(20px, 2.4vw, 34px);
  border-top: 1px solid var(--rule-12);
}
.hero__trust li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.4;
  color: var(--p78);
}

.hero__visual {
  position: relative;
  min-width: 0;
  /* Reserves room for the phone that overhangs the browser frame. The bottom
     value plus the phone's own offset controls how far it laps over the
     screenshot — kept small enough to stay off the client's proof figures. */
  padding-right: 56px;
  padding-bottom: 100px;
}

.mock--browser {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-14);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}
.mock__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--mock-chrome);
  border-bottom: 1px solid var(--lrule-10);
}
.mock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mock-dot);
  display: block;
}
/* Real page screenshot filling the browser frame. Natural aspect ratio — the
   source is pre-cropped to end just below the client's proof figures. */
.mock__shot {
  display: block;
  width: 100%;
  height: auto;
}

.mock--phone {
  position: absolute;
  right: -20px;
  bottom: -40px;
  width: 132px;
  background: var(--ink);
  border: 6px solid var(--phone-bezel);
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  animation: bf-float 7s ease-in-out infinite;
}
/* Flat dark screen, not the striped placeholder fill — beside a real screenshot
   the diagonal stripes read as a missing asset rather than a device. */
.mock__phone-photo {
  height: 84px;
  background: linear-gradient(160deg, var(--mock-fill-dark-alt), var(--mock-fill-dark));
  border-radius: 15px 15px 0 0;
}
.mock__phone-body { padding: 10px; }
.mock__phone-headline {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
}
.mock__phone-cta {
  background: var(--accent);
  color: var(--ink);
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  padding: 7px 0;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   2. The problem
   -------------------------------------------------------------------------- */

.problem__h2 { margin-bottom: clamp(40px, 5vw, 64px); max-width: 18em; }
.problem__lead {
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 30em;
}
.problem__close {
  font-size: 17px;
  line-height: 1.5;
  color: var(--i-4a);
  margin: 24px 0 0;
}

.ruled-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}
.ruled-list li {
  font-size: 15px;
  color: var(--i-4a);
  border-bottom: 1px solid var(--lrule-09);
  padding-bottom: 9px;
}
.ruled-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.qrows { display: grid; }
.qrow {
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 15px 0;
  border-top: 1px solid var(--lrule-12);
}
.qrow--last { border-bottom: 1px solid var(--lrule-12); }
.qrow--sm {
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  letter-spacing: 0;
  padding: 14px 0;
}

/* --------------------------------------------------------------------------
   3. Lead leaks
   -------------------------------------------------------------------------- */

.leaks__h2 { margin-bottom: 18px; }
.leaks__sub {
  font-size: 18px;
  color: var(--p66);
  margin: 0 0 clamp(38px, 5vw, 60px);
  max-width: 40em;
}
.leak { padding: clamp(28px, 3vw, 42px); }
.leak:hover { background: var(--charcoal-hover); }
.h3-leak {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
}
.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.plain-list li { font-size: 15px; color: var(--p62); }
.plain-list--light li { color: var(--i-6e); }

.card-copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--p62);
  margin: 0 0 14px;
}
.card-copy--last { margin-bottom: 0; }

.statement {
  font-size: clamp(26px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: clamp(38px, 5vw, 60px) 0 0;
}

/* --------------------------------------------------------------------------
   4. The offer
   -------------------------------------------------------------------------- */

.offer__h2 { margin-bottom: 16px; }
.offer__sub {
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--i-4a);
  margin: 0 0 clamp(38px, 5vw, 58px);
  max-width: 36em;
}
.compare { padding: clamp(28px, 3vw, 44px); }
.compare--old { border: 1px solid var(--lrule-14); background: var(--light-panel); }
.compare--new {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.compare__price {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--i-6e);
  margin-bottom: 8px;
}
.compare__price--free {
  font-size: clamp(28px, 3vw, 40px);
  color: var(--paper);
  margin-bottom: 6px;
}
.compare__note { font-size: 15px; color: var(--i-6e); margin-bottom: 30px; }
.compare__then { font-size: 15px; color: var(--p60); margin-bottom: 22px; }
.compare__monthly {
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 30px;
}
.struck-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}
.struck-list li {
  font-size: 15px;
  color: var(--i-6e);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.25);
}
.included-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 9px 20px;
}
.included-list li { font-size: 15px; color: var(--p85); }
.offer__terms {
  font-size: 13px;
  line-height: 1.7;
  color: var(--i-4a);
  margin: 26px 0 0;
  max-width: 46em;
}

/* --------------------------------------------------------------------------
   5. How it works
   -------------------------------------------------------------------------- */

.steps__h2 { margin-bottom: clamp(40px, 5vw, 64px); }
.step { border-top: 2px solid var(--rule-20); padding-top: 22px; }
.step--active { border-top-color: var(--accent); }
.step__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--p50);
  margin-bottom: 20px;
}
.step__num--accent { color: var(--accent); }
.h3-step {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.step__copy { font-size: 16px; line-height: 1.6; color: var(--p66); margin: 0; }

/* --------------------------------------------------------------------------
   6. What the website should do
   -------------------------------------------------------------------------- */

.included__h2 { margin-bottom: clamp(40px, 5vw, 60px); max-width: 16em; }
.feature { padding: clamp(24px, 2.4vw, 34px); }
.feature:hover { background: var(--charcoal-hover-alt); }
.h3-feature {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   7. Before / after
   -------------------------------------------------------------------------- */

.ba__h2 { margin-bottom: clamp(38px, 5vw, 58px); }
.ba--old { border: 1px solid var(--lrule-14); background: var(--light-panel-alt); }
.ba--new { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.ba__chrome { display: flex; gap: 7px; padding: 10px 13px; }
.ba__chrome--light { border-bottom: 1px solid var(--lrule-10); }
.ba__chrome--dark { border-bottom: 1px solid var(--rule-14); }
.ba__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mock-dot);
  display: block;
}
.ba__dot--dark { background: var(--mock-dot-dark); }

/* Real page screenshots. The two source images have slightly different aspect
   ratios (1.93 and 1.82); a fixed 2:1 window with `cover` from the top makes
   both frames the same height and crops only the bottom of each page — which is
   what a browser window does anyway. */
.ba__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: top center;
}

.h3-ba {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 24px 0 16px;
}
.dash-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.dash-list li { font-size: 15px; display: flex; gap: 10px; }
.dash-list--dark-text li { color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Pricing
   -------------------------------------------------------------------------- */

.pricing { border: 1px solid var(--rule-18); padding: clamp(30px, 4vw, 56px); }
.pricing__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--rule-14);
  padding-bottom: 28px;
  margin-bottom: 30px;
}
.pricing__price {
  font-size: clamp(42px, 5.4vw, 74px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.pricing__per {
  font-size: 0.36em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--p60);
}
.pricing__tagline { font-size: 18px; color: var(--p72); margin: 0; max-width: 16em; }
.dash-list--pricing {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 11px 24px;
  margin-bottom: 30px;
}
.dash-list--pricing li { font-size: 16px; }
.pricing__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--p72);
  border-top: 1px solid var(--rule-14);
  padding-top: 24px;
  margin-bottom: 30px;
}
.pricing__after {
  text-align: center;
  font-size: 16px;
  color: var(--p60);
  margin: 26px 0 0;
}

/* --------------------------------------------------------------------------
   9. Grow with BLACKFRAME
   -------------------------------------------------------------------------- */

.eco__h2 { margin-bottom: 14px; }
.eco__sub { font-size: 18px; color: var(--p66); margin: 0 0 clamp(34px, 4vw, 52px); }
.eco {
  border: 1px solid var(--rule-18);
  padding: clamp(26px, 3vw, 38px);
  transition: border-color 0.2s ease;
}
.eco:hover { border-color: var(--rule-40); }
.eco--active { border-color: var(--accent); background: rgba(255, 255, 255, 0.02); }
.eco--active:hover { border-color: var(--accent); }
.h3-eco {
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.eco__copy { font-size: 16px; line-height: 1.6; color: var(--p70); margin: 0; }

/* --------------------------------------------------------------------------
   10. ROI framing
   -------------------------------------------------------------------------- */

.roi__h2 { font-size: clamp(34px, 4.6vw, 62px); }
.roi__lead { font-size: 19px; line-height: 1.55; margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */

.faq__h2 { margin-bottom: clamp(34px, 4vw, 54px); }
.faq { border-top: 1px solid var(--rule-16); }
.faq--last { border-bottom: 1px solid var(--rule-16); }
.faq__q {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: -0.015em;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__mark { color: var(--accent); font-weight: 400; flex: none; }
.faq__mark::before { content: "+"; }
.faq[open] .faq__mark::before { content: "\2212"; } /* − */
.faq__a {
  font-size: 17px;
  line-height: 1.6;
  color: var(--p68);
  margin: 0 0 26px;
  max-width: 46em;
}

/* --------------------------------------------------------------------------
   12. Founder
   -------------------------------------------------------------------------- */

.founder { border-left: 2px solid var(--accent); padding-left: clamp(22px, 3vw, 44px); }
.h2-founder {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}
.founder__copy {
  font-size: 18px;
  line-height: 1.6;
  color: var(--p72);
  margin: 0 0 14px;
  max-width: 44em;
}
.founder__copy--last { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   13. Final CTA + form
   -------------------------------------------------------------------------- */

.cta__h2 { font-size: clamp(34px, 4.4vw, 62px); margin-bottom: 22px; }
.cta__lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--i-4a);
  margin-bottom: 16px;
  max-width: 32em;
}
.cta__reassure {
  font-size: 13px;
  line-height: 1.7;
  color: var(--i-6e);
  margin: 0;
  max-width: 32em;
}

.formpanel {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(26px, 3vw, 42px);
}
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--p55);
}
.field input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-28);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 17px;
  padding: 10px 0;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.field input::placeholder { color: var(--p45); }
.field input:focus { border-bottom-color: var(--accent); }
.field input:focus-visible { outline: none; border-bottom-color: var(--accent); }
/* Native validation styling, only after the user has tried to submit. */
.form--validated .field input:invalid { border-bottom-color: #E8593F; }

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__submit {
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 20px;
}
.form__submit[disabled] { opacity: 0.6; cursor: progress; }

.form__error {
  font-size: 14px;
  line-height: 1.5;
  color: #FFB3A3;
  margin: 0;
}

.success { padding: 40px 0; text-align: center; }
.success .kicker { margin-bottom: 18px; }
.success__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.success__copy { font-size: 16px; color: var(--p66); margin: 0; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.footer { padding: clamp(44px, 5vw, 70px) var(--pad-x) clamp(44px, 5vw, 70px); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--rule-14);
  padding-top: 34px;
}
.footer__slogan {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.footer__slogan-dim { color: var(--p45); }
.footer__brand { text-align: right; }
.footer__word {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}
.footer__link { font-family: var(--font-mono); font-size: 13px; color: var(--p60); }

/* --------------------------------------------------------------------------
   15. Sticky mobile CTA bar — mobile only
   -------------------------------------------------------------------------- */

.mobilebar { display: none; }

@media (max-width: 759px) {
  /* Header text links collapse; the CTA button stays. */
  .nav__link { display: none; }

  .mobilebar {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(11, 11, 12, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule-14);
  }
  .mobilebar .btn {
    font-size: 16px;
    letter-spacing: 0.04em;
    padding: 17px;
  }
  /* Clear the fixed bar. */
  .footer { padding-bottom: clamp(100px, 24vw, 130px); }
}

/* The header keeps its CTA at every width (the sticky bottom bar is additive,
   not a replacement), so the lockup tightens rather than the button dropping. */
@media (max-width: 480px) {
  .site-header__inner { gap: 12px; }
  .logo { gap: 8px; }
  .logo__word { font-size: 14px; letter-spacing: 0.08em; }
  .nav .btn--sm { font-size: 12px; letter-spacing: 0.02em; padding: 11px 12px; }
}

/* Small screens: same overhang, scaled down. The lap is kept under the clean
   band at the foot of the screenshot, and the phone stays inside the row gap so
   it never crosses the trust-list rule below. */
@media (max-width: 560px) {
  .hero__visual { padding-right: 24px; padding-bottom: 128px; }
  .mock--phone { width: 104px; right: -6px; bottom: -32px; }
}