/* FigBloom marketing landing page (index.html).
 *
 * Replaces the Framer "Estatify" template export. Design tokens mirror the app's own
 * (tailwind.config.js / assets/css/figbloom-theme.css): brand green #1B3611, sparing
 * orange accent #FF9400, ivory page #FAF9F6, charcoal text #1F2933, Plus Jakarta Sans.
 *
 * Rules this file follows (see LANDING_PAGE_AUDIT_2026-10-22.md):
 *  - Orange is an accent, never body text or a fill behind white text (white on #FF9400
 *    is 2.2:1). Orange fills carry charcoal text (6.7:1).
 *  - Icons are glyph-only: no coloured backgrounds behind them.
 *  - Everything is same-origin so the CSP in public/_headers (img-src/font-src 'self')
 *    holds: no external fonts, images or data: URIs.
 *  - Light is the default regardless of the OS setting (same convention as the app's
 *    theme.js); the visitor can switch to dark and the choice is remembered.
 */

/* ------------------------------------------------------------------ fonts */
/* One variable file (latin subset) covers every weight the page uses. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans/PlusJakartaSans-Variable.woff2") format("woff2");
}

/* Metric-matched fallback: while Plus Jakarta Sans loads, text is set in Arial scaled to its
   measured widths (within ~1%) and vertical metrics, so the swap barely moves anything (CLS).
   Numbers measured in Chromium (canvas measureText against Arial, 1000px). */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  font-weight: 400;
  src: local("Arial"), local("ArialMT");
  size-adjust: 103.4%;
  ascent-override: 100.4%;
  descent-override: 21.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  font-weight: 700 800;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101%;
  ascent-override: 102.8%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ----------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --bg: #faf9f6;
  --surface: #ffffff;
  --surface-alt: #f2f5f1;
  --text: #1f2933;
  --muted: #4b535a;
  --line: #e4e4e2;
  --line-strong: #c5c7c7;
  --field-border: #82878b;

  --brand: #1b3611;
  --brand-hover: #112308;
  --on-brand: #ffffff;
  --brand-soft: #e6eee9;
  --brand-text: #1b3611;
  --icon: #297447;
  --accent: #ff9400;
  --on-accent: #1f2933;
  --focus: #1b3611;
  --link: #1b3611;
  --error: #b42318;
  --success-bg: #e6eee9;
  --success-text: #14301a;

  --band-bg: #1b3611;
  --band-text: #f3f2ef;
  --band-muted: #c8d3c9;
  --footer-bg: #0a1c11;
  --footer-text: #f3f2ef;
  --footer-muted: #b3bfb5;

  --hero-glow: rgba(41, 116, 71, 0.14);
  --art-tint: rgba(27, 54, 17, 0.16);
  --shadow-card: 0 1px 2px rgba(31, 41, 51, 0.04), 0 1px 3px rgba(31, 41, 51, 0.06);
  --shadow-pop: 0 4px 10px -2px rgba(31, 41, 51, 0.08), 0 2px 6px -2px rgba(31, 41, 51, 0.06);
  --shadow-shot: 0 28px 48px -20px rgba(27, 54, 17, 0.32), 0 2px 6px rgba(31, 41, 51, 0.08);

  --radius: 14px;
  --radius-lg: 20px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0c170f;
  --surface: #13231a;
  --surface-alt: #0f1d14;
  --text: #f3f2ef;
  --muted: #b7c1b9;
  --line: #243528;
  --line-strong: #33483a;
  --field-border: #7e9084;

  --brand: #ff9400;
  --brand-hover: #ffa733;
  --on-brand: #1f2933;
  --brand-soft: #1b3022;
  --brand-text: #ffb24d;
  --icon: #7cc28e;
  --focus: #ff9400;
  --link: #9bd3a8;
  --error: #ffb4a9;
  --success-bg: #16301f;
  --success-text: #cfe8d5;

  --band-bg: #112318;
  --band-text: #f3f2ef;
  --band-muted: #b7c1b9;
  --footer-bg: #070f09;
  --footer-muted: #9faea3;

  --hero-glow: rgba(124, 194, 142, 0.1);
  --art-tint: rgba(243, 242, 239, 0.11);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-pop: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-shot: 0 28px 48px -20px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: var(--link);
  text-underline-offset: 0.2em;
}
address {
  font-style: normal;
}
strong {
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.nb {
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 1rem;
}

/* ----------------------------------------------------- spacing and motion tokens
   A 4px scale, then roles built from it with clamp() so each one eases between a phone and a wide
   desktop (px at ~390 / ~1440 wide). The page width itself is the container rule below. */
:root {
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-28: 7rem;

  --section-y: clamp(3rem, 2rem + 4.2vw, 7rem); /* 48 / 92, 112 on very wide screens */
  --hero-top: clamp(3.5rem, 2.25rem + 3.6vw, 5.5rem); /* 56 / 88, below the 69px sticky header */
  --hero-bottom: clamp(3rem, 2rem + 4vw, 6rem); /* 48 / 96 */
  --head-gap: clamp(1rem, 0.75rem + 0.8vw, 1.5rem); /* heading to description: 16 / 24 */
  --head-mb: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); /* section head to content: 32 / 56 */
  --grid-gap: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); /* card gaps: 20 / 28 */
  --card-pad: clamp(1.25rem, 1rem + 1vw, 2rem); /* card padding: 20 / 32 */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 450ms;
  --dur-lg: 600ms;
  --rise: 16px;
}

.container {
  /* wide screens: the content grows with the window (gutter 20px on phones, up to 40px) and stops at 96rem */
  --gutter: clamp(1.25rem, 2.5vw, 2.5rem);
  width: min(100% - 2 * var(--gutter), 96rem);
  margin-inline: auto;
}

.icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.25rem;
  border: 2px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
}
.btn-primary:hover {
  background: var(--brand-hover);
}
.btn-secondary {
  background: transparent;
  border-color: var(--field-border);
  color: var(--text);
}
.btn-secondary:hover {
  border-color: var(--text);
}
.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-accent:hover {
  background: #ffa733;
}
.btn-lg {
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  font-size: 1.0625rem;
}
.btn-block {
  width: 100%;
}
.btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}
.btn .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--brand-soft);
}
.icon-btn[hidden] {
  display: none;
}
/* the theme toggle shows the moon in light mode and the sun in dark mode */
.theme-toggle .i-sun,
:root[data-theme="dark"] .theme-toggle .i-moon {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .i-sun {
  display: block;
}

/* ----------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
  }
}
/* At the top of the page the bar is invisible, so the hero starts clean. Once the page moves it becomes a
   frosted bar with a hairline. Without JavaScript the bar stays as above (the .has-js class, set by site.js,
   gates the transparent state). Its height never changes, so nothing shifts. */
.nav-anim .site-header {
  transition: background-color 0.25s ease, border-color 0.25s ease; /* only after the first state is in place, so the bar never fades on page load */
}
.has-js .site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.has-js .site-header:not(.is-scrolled):has(.primary-nav.is-open) {
  background: var(--bg);
}
.top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 4.25rem;
}
.brand {
  display: block;
  margin-right: auto;
  border-radius: 6px;
}
.brand img {
  width: 116px;
  height: 40px;
}
:root[data-theme="dark"] .brand img {
  filter: brightness(0) invert(1);
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.primary-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border-radius: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.9688rem;
  text-decoration: none;
}
.primary-nav a:hover {
  background: var(--brand-soft);
}
.primary-nav a[aria-current="true"] {
  background: var(--brand-soft);
  color: var(--brand-text);
}
.primary-nav .nav-cta {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.header-actions .login {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border-radius: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.9688rem;
  text-decoration: none;
}
.header-actions .login:hover {
  background: var(--brand-soft);
}
.header-actions .btn {
  display: none;
  margin-left: 0.25rem;
}

@media (min-width: 40em) {
  .header-actions .btn {
    display: inline-flex;
  }
}

/* Collapsed navigation below 56em. The toggle button only appears once site.js runs,
   so without JavaScript visitors still reach every section from the footer. */
@media (max-width: 55.99em) {
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.75rem 1.25rem 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-pop);
  }
  .primary-nav.is-open {
    display: block;
  }
  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .primary-nav a {
    width: 100%;
    min-height: 3rem;
    font-size: 1.0625rem;
  }
  .primary-nav .nav-cta a {
    justify-content: center;
    color: var(--on-brand);
  }
}
@media (max-width: 39.99em) {
  .primary-nav .nav-cta {
    display: block;
    margin-top: 0.75rem;
  }
}
@media (min-width: 56em) {
  .primary-nav {
    margin-right: 0.5rem;
  }
  .nav-toggle {
    display: none !important;
  }
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--hero-top) var(--hero-bottom);
  background: radial-gradient(60rem 30rem at 85% -8%, var(--hero-glow), transparent 62%), radial-gradient(28rem 18rem at 80% 96%, var(--wash-orange), transparent 70%);
}

/* Faint architectural line-art behind the hero: the stepped building (bottom left) and the
   wireframe tower (top right) the previous page carried over from its template. They are CSS
   masks (alpha only, ~42 KB together) filled with --art-tint, so dark mode only swaps one
   colour. Decorative: no markup, no alt text, never receives clicks. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-color: var(--art-tint);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.hero::before {
  left: -4%;
  bottom: -3rem;
  width: min(38vw, 30rem);
  aspect-ratio: 560 / 700;
  -webkit-mask-image: url("/assets/images/landing/art-left.webp");
  mask-image: url("/assets/images/landing/art-left.webp");
}
.hero::after {
  right: -1%;
  top: 1rem;
  width: min(36vw, 30rem);
  aspect-ratio: 420 / 520;
  opacity: 0.95;
  -webkit-mask-image: url("/assets/images/landing/art-right.webp");
  mask-image: url("/assets/images/landing/art-right.webp");
}
/* Stacked layout (the hero is tall): put the tower beside the headline, where it's visible. */
@media (max-width: 61.99em) {
  .hero::before {
    display: none;
  }
  .hero::after {
    top: 0.5rem;
    right: -12%;
    width: min(76vw, 24rem);
  }
}
.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 62em) {
  .hero-grid {
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    gap: 3.5rem;
  }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--brand-text);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.eyebrow::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background: var(--accent);
}
.hero h1 {
  margin-block: 0.9rem 1.25rem;
  font-size: clamp(2.5rem, 1.1rem + 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.hero h1 .line {
  display: block;
}
.mark {
  background: linear-gradient(transparent 64%, rgba(255, 148, 0, 0.42) 64%);
  padding-inline: 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lead {
  max-width: 36rem;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}
.hero .lead {
  max-width: 28rem;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}
.assure {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 0.9375rem;
}
.assure li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.assure .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--icon);
}

.hero-visual {
  position: relative;
  margin-bottom: 2rem;
}
.shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-shot);
}
.shot img {
  width: 100%;
}
.phone {
  position: absolute;
  right: -0.5rem;
  bottom: -2.25rem;
  width: 26%;
  margin: 0;
  overflow: hidden;
  border: 6px solid #1f2933;
  border-radius: 1.6rem;
  background: #1f2933;
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.4);
}
.phone img {
  width: 100%;
}
@media (max-width: 36em) {
  .phone {
    display: none;
  }
}

/* --------------------------------------------------------------- sections */
.section {
  padding-block: var(--section-y);
}
.section--alt {
  background: var(--surface-alt);
  border-block: 1px solid var(--line);
}
.section-head {
  max-width: 44rem;
  margin-bottom: var(--head-mb);
}
.section-head h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.6rem);
}
.section-head p {
  margin-top: var(--head-gap);
  color: var(--muted);
  font-size: 1.125rem;
}

/* facts strip */
.facts {
  padding-block: 2.25rem;
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.facts ul {
  display: grid;
  gap: 1.5rem 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.9rem;
}
.facts .icon {
  grid-row: span 2;
  margin-top: 0.15rem;
  color: var(--icon);
}
.facts strong {
  line-height: 1.3;
}
.facts span {
  color: var(--muted);
  font-size: 0.9688rem;
  line-height: 1.5;
}

/* showcase rows */
.showcase {
  display: grid;
  gap: var(--s-8) clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.showcase + .showcase {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
@media (min-width: 56em) {
  .showcase {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
  .showcase--flip .showcase-copy {
    order: 2;
  }
}
.showcase h3 {
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
}
.showcase-copy > p {
  margin-top: 0.9rem;
  color: var(--muted);
}
.ticks {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.ticks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
}
.ticks .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.22rem;
  color: var(--icon);
}

/* cards */
.cards {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
}
.cards-more {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
@media (min-width: 56em) {
  .cards-more .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.cards-more > h3 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
}
.card {
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.card .icon {
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: 1rem;
  color: var(--icon);
}
.card h3,
.card h4 {
  margin-bottom: 0.45rem;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.card p {
  color: var(--muted);
  font-size: 1rem;
}

/* steps */
.steps {
  display: grid;
  gap: var(--grid-gap);
  counter-reset: step;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.steps li {
  position: relative;
  counter-increment: step;
  padding-top: calc(1.1rem + 4px);
}
.steps li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent);
  transform-origin: left center;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.6rem;
  color: var(--brand-text);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.steps h3 {
  margin-bottom: 0.45rem;
  font-size: 1.25rem;
}
.steps p {
  color: var(--muted);
}
.section-cta {
  margin-top: 2.5rem;
}

/* ---------------------------------------------------------------- why us
   Six reasons as a zigzag bento grid (wide + narrow, then narrow + wide, ...; two across on tablets, one on
   phones). Each card has a green-to-orange hairline border, a ghost numeral, and a little proof: tag chips,
   or for "Honest numbers" a three-step flow. A deep-green strip closes the section and leads into pricing.
   Lighter than the dark pricing band: white ground, ivory cards, soft corner washes. */
#why {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
#why::before {
  inset: 0;
  background: radial-gradient(34rem 20rem at 100% 0%, var(--wash-orange), transparent 70%), radial-gradient(32rem 20rem at 0% 100%, var(--hero-glow), transparent 70%);
}
.cards--3 {
  counter-reset: why;
}
@media (min-width: 40em) {
  .cards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 62em) {
  .cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cards--3 .card--wide {
    grid-column: span 2;
  }
}
#why .card {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(140deg, color-mix(in srgb, var(--icon) 55%, transparent), color-mix(in srgb, var(--accent) 50%, transparent) 55%, var(--line)) border-box;
}
#why .card .icon {
  width: 2.25rem;
  height: 2.25rem;
}
/* the ghost numeral: outline only, decorative (the empty alternative text keeps it out of screen readers) */
#why .card::after {
  counter-increment: why;
  content: counter(why, decimal-leading-zero);
  content: counter(why, decimal-leading-zero) / "";
  position: absolute;
  top: var(--s-4);
  right: var(--s-5);
  color: transparent;
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--icon) 30%, transparent);
  pointer-events: none;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.chip {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-text);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}
.chip s {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
/* "Honest numbers": the three steps a reported payment goes through */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.flow li {
  position: relative;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-text);
  font-size: 0.875rem;
  font-weight: 700;
}
.flow li:last-child {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}
/* the connectors sit between the pills; on a phone the pills wrap, so they are left out there */
@media (min-width: 40em) {
  .flow {
    column-gap: 2rem;
  }
  .flow li + li::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: 2rem;
    height: 2px;
    margin-top: -1px;
    background: var(--accent);
  }
}
.why-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5) var(--s-8);
  margin-top: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--card-pad);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #1b3611 0%, #27501a 100%);
  color: #f3f2ef;
}
.why-cta::before {
  content: "";
  position: absolute;
  top: -6rem;
  right: -4rem;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 148, 0, 0.22), transparent 68%);
  pointer-events: none;
}
.why-cta > * {
  position: relative;
}
.why-cta p {
  max-width: 30rem;
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.why-cta .cta-row {
  margin-top: 0;
}
.why-cta .btn-secondary {
  border-color: rgba(255, 255, 255, 0.55);
  color: #f3f2ef;
}
.why-cta .btn-secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* ---------------------------------------------------------------- pricing
   An always-dark band like the contact section, with the plans as glass panels on it, so the one
   place people compare numbers stands apart from the light sections around it. The unit finder
   is `hidden` in the markup and shown by site.js; without scripts the four plans stand alone. */
.pricing {
  --pc-bg: rgba(255, 255, 255, 0.055);
  --pc-line: rgba(255, 255, 255, 0.16);
  --pc-ivory: #faf9f6;
  --pc-ink: #1f2933;
  --pc-ink-muted: #4b535a;
  --pc-green: #1b3611;
}
.pricing-head {
  display: grid;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 62em) {
  .pricing-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
  }
}
.pricing .section-head {
  margin-bottom: 0;
}
.pricing .section-head p {
  color: var(--band-muted);
}
/* section labels: the little orange square and a word, above each section heading */
.band .eyebrow {
  color: var(--band-text);
}
.eyebrow + h2 {
  margin-top: 0.9rem;
}

/* unit finder */
.finder {
  padding: 1.25rem 1.4rem 1.35rem;
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-lg);
  background: var(--pc-bg);
}
.finder[hidden] {
  display: none;
}
.finder label {
  display: block;
  font-weight: 700;
}
.finder-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.finder input {
  width: 9.5rem;
  min-height: 3.25rem;
  padding: 0.4rem 0.9rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--band-text);
  font: inherit;
  font-size: 1.4rem;
  font-weight: 800;
}
.finder input {
  -moz-appearance: textfield;
  appearance: textfield;
}
.finder input::-webkit-outer-spin-button,
.finder input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.finder input::placeholder {
  color: rgba(243, 242, 239, 0.6);
  font-weight: 500;
}
.finder input:focus-visible {
  border-color: #ff9400;
}
.finder-field span {
  color: var(--band-muted);
}
.finder-result {
  min-height: 3.1em;
  margin-top: 0.85rem;
  color: var(--band-muted);
  line-height: 1.55;
}
.finder-result strong {
  color: var(--band-text);
}

/* plan cards */
.plans {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 40em) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 62em) {
  .plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(var(--card-pad) + 0.25rem) var(--card-pad) var(--card-pad);
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-lg);
  background: var(--pc-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.plan::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1.6rem;
  width: 2.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}
.plan:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.34);
}
.plan h3 {
  color: var(--band-muted);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin-top: 1rem;
}
.price .amt {
  font-size: clamp(2.1rem, 1.45rem + 1.25vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.price .cur {
  display: inline-block;
  margin-right: 0.05em;
  color: var(--band-muted);
  font-size: 0.36em;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: 1.35em;
}
.price .per {
  flex-basis: 100%;
  color: var(--band-muted);
  font-size: 0.9375rem;
}
.plan .units {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.3rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--pc-line);
  font-weight: 700;
}
.plan .units .icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--accent);
}
.plan .rate {
  margin: 0.45rem 0 1.6rem;
  color: var(--band-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.plan .rate strong {
  color: var(--band-text);
}
.plan .btn {
  margin-top: auto;
}

/* the plan that fits the unit count typed into the finder: lit up like a keycard */
.plan.is-match {
  border-color: var(--pc-ivory);
  background: var(--pc-ivory);
  color: var(--pc-ink);
  box-shadow: 0 0 0 3px var(--accent), 0 26px 44px -20px rgba(0, 0, 0, 0.65);
  transform: translateY(-4px);
}
.plan.is-match::after {
  content: "Fits your units";
  position: absolute;
  top: -0.8rem;
  right: 1.2rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan.is-match h3,
.plan.is-match .per,
.plan.is-match .rate,
.plan.is-match .price .cur {
  color: var(--pc-ink-muted);
}
.plan.is-match .rate strong {
  color: var(--pc-ink);
}
.plan.is-match .units {
  border-top-color: rgba(31, 41, 51, 0.16);
}
.plan.is-match .units .icon {
  color: var(--pc-green);
}
.plan.is-match .btn {
  border-color: var(--pc-green);
  background: var(--pc-green);
  color: #fff;
}

/* what every plan includes */
.included {
  display: grid;
  gap: 1.5rem 3rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--pc-line);
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.16);
}
@media (min-width: 62em) {
  .included {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    align-items: center;
  }
}
.included h3 {
  font-size: 1.35rem;
}
.included-head p {
  margin-top: 0.5rem;
  color: var(--band-muted);
}
.included-list {
  display: grid;
  gap: 0.9rem 2rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40em) {
  .included-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 62em) {
  .included-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.included-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  line-height: 1.45;
}
.included-list .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  color: #7cc28e;
}

.pricing-foot {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 62em) {
  .pricing-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
  }
}
.pricing-note {
  max-width: 46rem;
  color: var(--band-muted);
  font-size: 0.9688rem;
}
.pricing .assure {
  margin-top: 1rem;
  color: var(--band-muted);
}
.pricing .assure .icon {
  color: #7cc28e;
}
.pricing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.pricing .btn-accent {
  color: var(--on-accent); /* the band's `a { color: inherit }` would otherwise turn this white-on-orange, 2:1 */
}
.pricing .btn-secondary {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--band-text);
}
.pricing .btn-secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.pricing .plan.is-match .btn:hover {
  background: #112308;
}

/* -------------------------------------------------------------------- faq */
.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 52rem;
}
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.faq summary {
  position: relative;
  min-height: 3.5rem;
  padding: 1rem 3.25rem 1rem 1.25rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.35rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s;
}
.faq details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}
.faq .answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--muted);
}

/* --------------------------------------------------------------- contact */
.band {
  background: var(--band-bg);
  color: var(--band-text);
}
.band a {
  color: inherit;
}
.band :focus-visible {
  outline-color: #ff9400;
}
.contact-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 56em) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4rem;
  }
}
.band h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.6rem);
}
.band .lead {
  margin-top: 1rem;
  color: var(--band-muted);
}
.contact-list {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.contact-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.85rem;
}
.contact-list .icon {
  grid-row: span 2;
  margin-top: 0.1rem;
  color: var(--accent);
}
.contact-list .label {
  color: var(--band-muted);
  font-size: 0.875rem;
}
.contact-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  font-weight: 700;
}

.form-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5);
}
.form-card h3 {
  margin-bottom: 1.25rem;
  font-size: 1.35rem;
}
.form-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 36em) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid .full {
    grid-column: 1 / -1;
  }
}
.field {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}
.field label {
  font-size: 0.9375rem;
  font-weight: 700;
}
.field input,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--field-border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.field input::placeholder {
  color: #656c71;
  opacity: 1;
}
.field input:focus-visible,
.field select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--text);
}
.field [aria-invalid="true"] {
  border-color: var(--error);
}
.field-error {
  color: var(--error);
  font-size: 0.875rem;
  font-weight: 700;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-note {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.form-card .btn {
  margin-top: 1.25rem;
}
.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-weight: 700;
}
.form-status[hidden] {
  display: none;
}
.form-status.is-success {
  background: var(--success-bg);
  border-color: var(--icon);
  color: var(--success-text);
}
.form-status.is-error {
  border-color: var(--error);
  color: var(--error);
}

/* ----------------------------------------------------------------- footer */
.site-footer {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) var(--s-8);
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 0.9688rem;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}
/* no underline to mark them, so hovering or tabbing to a link turns it orange instead (8:1 on this ground) */
.site-footer li a:hover,
.site-footer li a:focus-visible {
  color: var(--accent);
}
.site-footer :focus-visible {
  outline-color: #ff9400;
}
.footer-grid {
  display: grid;
  gap: 2.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.footer-brand {
  grid-column: 1 / -1;
  max-width: 28rem;
}
@media (min-width: 56em) {
  .footer-grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
  .footer-brand {
    grid-column: auto;
  }
}
.footer-brand img {
  width: 132px;
  height: 45px;
  filter: brightness(0) invert(1);
}
.footer-brand p {
  margin-top: 1rem;
  color: var(--footer-muted);
}
.site-footer h2 {
  margin-bottom: 0.9rem;
  color: var(--footer-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-footer li + li {
  margin-top: 0.15rem;
}
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
}
.footer-legal {
  margin-top: var(--s-12);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(243, 242, 239, 0.16);
  color: var(--footer-muted);
  font-size: 0.875rem;
}

/* ------------------------------------------------------- decorative backgrounds
   Original artwork, all same-origin and all CSS, so the page isn't flat ivory and white all the
   way down: the building drawings from the hero come back at the page edges, two skylines drawn
   for this page (skyline.svg is a mask for the light sections, skyline-night.svg has lit windows
   for the always-dark contact band), a faint blueprint grid and soft colour washes. None of it
   is content: no markup, no alt text, never clickable, switched off in forced-colors mode.
   Strengths are tokens because text sits on top of all of it: change them, then re-run the
   contrast measurement described in LANDING_PAGE_AUDIT_2026-10-22.md. */
:root {
  --art-soft: rgba(27, 54, 17, 0.13);
  --skyline-tint: rgba(27, 54, 17, 0.12);
  --grid-line: rgba(27, 54, 17, 0.08);
  --wash-green: rgba(41, 116, 71, 0.11);
  --wash-orange: rgba(255, 148, 0, 0.14);
  --sage-1: #eef4ea;
  --sage-2: #e1ebdb;
}
:root[data-theme="dark"] {
  --art-soft: rgba(243, 242, 239, 0.085);
  --skyline-tint: rgba(243, 242, 239, 0.08);
  --grid-line: rgba(243, 242, 239, 0.06);
  --wash-green: rgba(124, 194, 142, 0.09);
  --wash-orange: rgba(255, 148, 0, 0.09);
  --sage-1: #0f1d14;
  --sage-2: #132a1b;
}

.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section::before,
.section::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* building / tower drawings used as alpha masks */
#features::before,
#features::after,
#faq::after {
  background-color: var(--art-soft);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
#features::before {
  right: -3%;
  top: 1rem;
  width: min(36vw, 32rem);
  aspect-ratio: 420 / 520;
  -webkit-mask-image: url("/assets/images/landing/art-right.webp");
  mask-image: url("/assets/images/landing/art-right.webp");
}
/* art-left.webp is cut flat at its bottom edge (in the hero that edge is off-screen), so where it
   sits inside a section it gets a second mask layer that fades it out towards the bottom */
#features::after,
#faq::after {
  width: min(32vw, 28rem);
  aspect-ratio: 560 / 700;
  -webkit-mask-image: url("/assets/images/landing/art-left.webp"), linear-gradient(#000 40%, transparent 96%);
  mask-image: url("/assets/images/landing/art-left.webp"), linear-gradient(#000 40%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#features::after {
  left: -5%;
  bottom: 9rem;
}
#faq::after {
  right: -4%;
  bottom: -2rem;
  width: min(34vw, 30rem);
  transform: scaleX(-1);
}

/* features is the longest section, so it also gets soft glows behind its screenshot rows */
#features {
  background: radial-gradient(44rem 26rem at 100% 30rem, var(--wash-green), transparent 70%), radial-gradient(40rem 24rem at 0% 62rem, var(--wash-orange), transparent 70%), radial-gradient(44rem 26rem at 100% 92rem, var(--wash-green), transparent 70%);
}

/* skyline silhouettes along the bottom edge of two light sections */
#how-it-works::after,
#who::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(110px, 15vw, 215px);
  background-color: var(--skyline-tint);
  -webkit-mask-image: url("/assets/images/landing/skyline.svg");
  mask-image: url("/assets/images/landing/skyline.svg");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
}
#how-it-works::after {
  transform: scaleX(-1);
}

/* "how it works" gets a sage-green ground, with a blueprint grid that fades out towards the edges */
#how-it-works {
  background: linear-gradient(180deg, var(--sage-1), var(--sage-2));
}
#how-it-works::before {
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, #000 15%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, #000 15%, transparent 80%);
}

/* soft colour washes */
#who::before {
  inset: 0;
  background: linear-gradient(0deg, var(--wash-green), transparent 45%);
}
#pricing::before {
  inset: 0;
  background: radial-gradient(40rem 24rem at 8% 0%, rgba(124, 194, 142, 0.16), transparent 70%), radial-gradient(34rem 22rem at 100% 100%, rgba(255, 148, 0, 0.1), transparent 70%);
}
#pricing::after {
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 10%, transparent 75%);
}
#faq::before {
  inset: 0;
  background: radial-gradient(36rem 20rem at 0% 0%, var(--hero-glow), transparent 70%);
}

/* the contact band: a city at dusk with a few warm lit windows. The skyline gets its own strip
   at the bottom (the padding reserves it) so no text or lit window ever sits behind another. */
#contact {
  --city-h: clamp(120px, 14vw, 200px);
  padding-bottom: calc(var(--city-h) + clamp(1.25rem, 3vw, 2.25rem));
}
#contact::before {
  inset: 0;
  background: radial-gradient(40rem 24rem at 10% 0%, rgba(124, 194, 142, 0.16), transparent 70%), radial-gradient(34rem 22rem at 100% 100%, rgba(255, 148, 0, 0.1), transparent 70%);
}
#contact::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--city-h);
  background: url("/assets/images/landing/skyline-night.svg") bottom center / auto 100% repeat-x;
}

/* pressed state for every button */
.btn:active {
  transform: translateY(1px);
}

/* ------------------------------------------------- hover feedback (pointers only) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 0.2s var(--ease-out), border-color 0.2s, box-shadow 0.2s;
  }
  .card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--icon) 40%, var(--line));
    box-shadow: var(--shadow-pop);
  }
  .btn-primary:hover,
  .btn-accent:hover {
    transform: translateY(-1px);
  }
}

/* ------------------------------------------------------------ scroll reveals
   Hidden only when site.js has marked an element that is still below the fold AND the visitor has not
   asked for reduced motion; revealed once, by a short CSS animation that ends back on the element's normal
   styles (so hover and focus transforms keep working). If the script never runs, nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal]:not(.is-in) {
    opacity: 0;
  }
  [data-reveal].is-in {
    animation: rise-in var(--dur) var(--ease-out) backwards; /* the stagger is an inline animation-delay set by site.js */
  }
  [data-reveal="fade"].is-in {
    animation-name: fade-in; /* pricing and the FAQ: no movement, so plans stay put while people compare */
  }

  /* the three workflow steps draw their top rule one after another */
  .steps li.is-in::after {
    animation: draw-in 700ms var(--ease-out) backwards;
    animation-delay: inherit; /* draws as its step arrives */
  }

  /* hero visual: shown at once (a little transparent, never hidden), then settles */
  .hero-visual {
    animation: hero-in var(--dur-lg) var(--ease-out) backwards;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--rise));
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes draw-in {
  from {
    transform: scaleX(0);
  }
}
@keyframes hero-in {
  from {
    opacity: 0.3;
    transform: translateY(20px);
  }
}
@media print {
  [data-reveal] {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .hero::before,
  .hero::after {
    display: none;
  }
  .section::before,
  .section::after {
    display: none;
  }
  #contact {
    padding-bottom: clamp(3.25rem, 7vw, 5.75rem);
  }
  .btn {
    border-color: ButtonText;
  }
  .plan.is-match {
    outline: 3px solid Highlight;
  }
  .eyebrow::before {
    background: Highlight;
  }
}