/* Public Homestimizer overview. It wears the whole-home editorial card's
   look: Newsreader headlines, DM Sans text, cream paper, navy and gold.
   The postcard exhibit comes from the real renderer with a made-up company
   and home.

   Motion rule: every element's resting style is its finished state. Motion
   lives only in keyframes, so reduced-motion visitors (and any browser that
   skips an animation) still see complete art. Sections marked data-motion
   pause their loops while off screen. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-roman.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-italic.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/dmsans.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/caveat-semibold.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper: #f5efe4;
  --paper-deep: #ece2d0;
  --panel: #fffcf6;
  --ink: #1f2a35;
  --muted: #5a5e63;
  --navy: #163047;
  --navy-deep: #0e2135;
  --gold: #d19b44;
  --gold-bright: #f0bc5c;
  --gold-deep: #8a5b12;
  --gold-soft: #f3dfb8;
  --tan: #e8d5b3;
  --sage: #6c7054;
  --line: #dccdb2;
  --line-dark: rgba(255, 255, 255, 0.16);
  --shadow: 0 24px 64px rgba(22, 48, 71, 0.17);
  --radius: 14px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body.platform-landing {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.platform-landing img {
  max-width: 100%;
}

.platform-landing svg {
  overflow: visible;
}

.platform-landing main:focus {
  outline: none;
}

.landing-container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.platform-landing a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.platform-landing :is(a, button):focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.platform-landing :is(input, textarea):focus,
.platform-landing :is(input, textarea):focus-visible {
  outline: none !important;
  border-color: #0b69c7 !important;
  box-shadow: 0 0 0 3px #b4d7ff !important;
}

.landing-controls :is(a, button):focus-visible,
.landing-facts :is(a, button):focus-visible {
  outline-color: var(--gold-bright);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--navy);
  font-weight: 800;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Header */

.landing-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid rgba(22, 48, 71, 0.12);
  background: rgba(245, 239, 228, 0.94);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}

.landing-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
  min-height: 76px;
}

.landing-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@supports (animation-timeline: scroll()) {
  .landing-progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes progress-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.landing-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.landing-wordmark__mark {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
}

.landing-wordmark__mark:empty {
  width: 12px;
  height: 12px;
  border: 3px solid var(--gold);
  transform: rotate(45deg);
}

.wordmark-tag {
  width: 26px;
  height: 26px;
  overflow: visible;
  /* Swing from the tip of the string, as if the tag hangs from it. */
  transform-origin: 90% 9%;
}

.wordmark-tag__body {
  fill: var(--navy);
  fill-rule: evenodd;
}

.wordmark-tag__string {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  animation: draw-line 0.7s 0.3s var(--ease-out) backwards;
}

.landing-wordmark:hover .wordmark-tag {
  animation: tag-swing 0.8s var(--ease-spring);
}

.landing-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.landing-nav a {
  position: relative;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.landing-nav a::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  content: "";
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 240ms var(--ease-out);
}

.landing-nav a:hover::after,
.landing-nav a:focus-visible::after {
  transform: scaleX(1);
}

.landing-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.landing-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.landing-signin:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

/* Shared type and controls */

.landing-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--gold-deep);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.landing-kicker::before {
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--gold);
  content: "";
}

.landing-kicker--light {
  color: var(--gold-bright);
}

.landing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 24px;
  border: 1px solid var(--navy);
  border-radius: 10px;
  background: var(--navy);
  box-shadow: 0 10px 24px rgba(22, 48, 71, 0.18);
  color: #fff !important;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms var(--ease-out);
}

.landing-button:hover {
  border-color: var(--navy-deep);
  background: var(--navy-deep);
  box-shadow: 0 14px 30px rgba(22, 48, 71, 0.26);
  transform: translateY(-2px);
}

.landing-button__arrow {
  display: inline-block;
  color: var(--gold-bright);
  transition: transform 220ms var(--ease-out);
}

.landing-button:hover .landing-button__arrow {
  transform: translateX(4px);
}

.landing-button--small {
  min-height: 42px;
  padding: 10px 16px;
  box-shadow: none;
  font-size: 0.88rem;
}

.landing-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 700;
  text-decoration-color: rgba(209, 155, 68, 0.55);
  transition: text-decoration-color 160ms ease;
}

.landing-text-link:hover {
  text-decoration-color: var(--gold);
}

.landing-text-link span[aria-hidden] {
  display: inline-block;
  transition: transform 220ms var(--ease-out);
}

.landing-text-link:hover span[aria-hidden] {
  transform: translateX(3px);
}

.platform-landing h1,
.platform-landing h2,
.platform-landing h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  text-wrap: balance;
}

/* Reveal on scroll: only when the script is running, and only until the
   element has been seen once. */

.reveal-ready [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(22px);
}

.reveal-ready [data-reveal] {
  transition:
    opacity 700ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 800ms var(--ease-out) var(--reveal-delay, 0ms);
}

.reveal-ready [data-motion]:not(.is-live) *,
.reveal-ready [data-motion]:not(.is-live) *::before,
.reveal-ready [data-motion]:not(.is-live) *::after {
  animation-play-state: paused !important;
}

/* Hero */

.landing-hero {
  --street-height: clamp(128px, 12.5vw, 200px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(40px, 4vw, 60px) 0 calc(var(--street-height) - 8px);
  background:
    radial-gradient(circle at 84% 22%, rgba(209, 155, 68, 0.18), transparent 30rem),
    radial-gradient(circle at 6% 90%, rgba(22, 48, 71, 0.06), transparent 24rem),
    linear-gradient(180deg, #faf6ee 0%, var(--paper) 100%);
}

.landing-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 48, 71, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 48, 71, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

/* The copy sits beside the signup form; the postcard gets its own row. On
   narrow screens the form comes right after the copy, ahead of the extras. */
.landing-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
  grid-template-areas:
    "copy form"
    "more form"
    "card card";
  column-gap: clamp(40px, 5vw, 72px);
}

.landing-hero__copy {
  grid-area: copy;
  align-self: end;
}

.landing-hero__more {
  grid-area: more;
  align-self: start;
}

.landing-hero__grid > .signup-card {
  grid-area: form;
  align-self: center;
}

.landing-hero__grid > .postcard-proof {
  grid-area: card;
  width: min(760px, 100%);
  margin: clamp(40px, 5vw, 72px) auto 0;
}

.landing-hero__copy > * {
  animation: rise-in 900ms var(--ease-out) backwards;
}

.landing-hero__copy > :nth-child(2) { animation-delay: 80ms; }
.landing-hero__copy > :nth-child(4) { animation-delay: 200ms; }
.landing-hero__copy > :nth-child(5) { animation-delay: 280ms; }
.landing-hero__copy > :nth-child(6) { animation-delay: 340ms; }
.landing-hero__copy > :nth-child(7) { animation-delay: 400ms; }

.landing-hero h1 {
  max-width: 9.2ch;
  margin: 0;
  color: var(--navy);
  font-size: clamp(3.3rem, 6.2vw, 5.7rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 0.96;
}

.hero-swash {
  display: block;
  width: min(300px, 62%);
  height: auto;
  margin: 4px 0 0 2px;
}

.hero-swash path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  animation: draw-line 1.2s 0.7s var(--ease-out) backwards;
}

.landing-hero__lead {
  max-width: 55ch;
  margin: 20px 0 0;
  color: #2d3842;
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  line-height: 1.6;
}

.landing-hero__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 22px;
}

.landing-hero__examples a {
  min-height: 44px;
}

.landing-proof-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 22px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  list-style: none;
}

.landing-proof-line li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.landing-proof-line li::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  content: "";
}

/* Signup form */

.signup-card {
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid rgba(22, 48, 71, 0.12);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.signup-card__title {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2rem, 2.8vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.signup-card__lead {
  margin: 8px 0 20px;
  color: #2d3842;
  font-size: 1.04rem;
}

.signup-form {
  position: relative;
  display: grid;
  gap: 14px;
}

.signup-field {
  display: grid;
  gap: 6px;
}

.signup-field label {
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 700;
}

.signup-field input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #8a7c62;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.signup-field input[aria-invalid="true"] {
  border-width: 2px;
  border-color: #b3261e;
}

.signup-field__error,
.signup-problem {
  margin: 0;
  color: #8c1d18;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

.signup-problem {
  padding: 12px 14px;
  border-left: 3px solid #b3261e;
  border-radius: 0 10px 10px 0;
  background: #fbe9e7;
}

.signup-problem:focus {
  outline: none;
}

.signup-form .landing-button {
  width: 100%;
  margin-top: 4px;
}

.signup-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.signup-card .signup-note a,
.signup-card .signup-problem a {
  color: var(--navy);
  font-weight: 700;
}

/* A trap for scripts that fill every box. People never see or reach it. */
.signup-extra {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup-done {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.signup-done p {
  margin: 0;
}

.signup-done__mark {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--navy);
  place-items: center;
}

.signup-done__mark svg {
  width: 28px;
  height: 28px;
}

.signup-done__mark path {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signup-done .signup-done__title {
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  line-height: 1.1;
}

/* The postcard exhibit */

.postcard-proof {
  position: relative;
  margin: 0;
}

.postcard-proof__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px 2%;
  color: var(--gold-deep);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.postcard-proof__label::before {
  width: 26px;
  height: 2px;
  background: var(--gold);
  content: "";
}

.postcard-stage {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glare-x: 30%;
  --glare-y: 20%;
  position: relative;
  perspective: 1400px;
  animation: stage-float 7s ease-in-out 1.6s infinite;
}

.postcard-stack {
  position: relative;
  aspect-ratio: 100 / 76;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease-out);
}

.postcard-stage.is-tilting .postcard-stack {
  transition: transform 120ms linear;
}

.postcard-stack__card {
  position: absolute;
  display: block;
  width: 88%;
  aspect-ratio: 1360 / 960;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 4px rgba(22, 48, 71, 0.08),
    var(--shadow);
  transition: transform 320ms var(--ease-out), box-shadow 320ms ease;
}

.postcard-stack__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.postcard-stack__card--back {
  right: 0;
  bottom: 0;
  width: 78%;
  transform: rotate(4deg);
  animation: deal-back 1.1s 0.25s var(--ease-out) backwards;
}

.postcard-stack__card--front {
  top: 0;
  left: 0;
  transform: rotate(-2deg) translateZ(20px);
  animation: deal-front 1.2s 0.45s var(--ease-out) backwards;
}

.postcard-stack__card--back:hover,
.postcard-stack__card--back:focus-visible {
  z-index: 3;
  box-shadow: 0 34px 80px rgba(22, 48, 71, 0.28);
  transform: rotate(0.5deg) translate(-2%, -4%) translateZ(40px);
}

.postcard-glare {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.38) 48%, transparent 58%);
  background-size: 100% 100%, 260% 100%;
  background-position: 0 0, 130% 0;
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  animation: glare-sweep 1.6s 1.7s ease-in-out backwards;
}

.postcard-stage.is-tilting .postcard-glare {
  opacity: 1;
}

/* The three QR codes on the card are live links to the example pages.
   Positions come from the rendered card (1360 x 960). */

.qr-spot {
  position: absolute;
  z-index: 2;
  width: 11.2%;
  height: 18.3%;
  border-radius: 3px;
  text-decoration: none;
}

.qr-spot--exterior { top: 21.9%; left: 85.7%; }
.qr-spot--interior { top: 68.3%; left: 36.2%; }
.qr-spot--roof { top: 68.3%; left: 85.7%; }

.qr-spot::before {
  position: absolute;
  inset: -5px;
  border: 2px solid var(--gold);
  border-radius: 6px;
  content: "";
  opacity: 0;
  animation: qr-ring 6s ease-out infinite;
  animation-delay: calc(var(--qr-step, 0) * 2s + 2.4s);
}

.qr-spot--exterior { --qr-step: 1; }
.qr-spot--roof { --qr-step: 2; }

.qr-spot__beam {
  position: absolute;
  top: 8%;
  right: 8%;
  left: 8%;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 10px 2px rgba(240, 188, 92, 0.75);
  opacity: 0;
  animation: qr-beam 6s ease-in-out infinite;
  animation-delay: calc(var(--qr-step, 0) * 2s + 2.4s);
}

.qr-spot__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--navy);
  box-shadow: 0 8px 20px rgba(22, 48, 71, 0.3);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 180ms ease, transform 220ms var(--ease-out);
  white-space: nowrap;
}

.qr-spot__tip span {
  color: var(--gold-bright);
}

.qr-spot:hover::before,
.qr-spot:focus-visible::before {
  animation: none;
  opacity: 1;
}

.qr-spot:hover .qr-spot__tip,
.qr-spot:focus-visible .qr-spot__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.qr-spot:focus-visible {
  outline-offset: 6px;
}

.sample-stamp {
  position: absolute;
  z-index: 4;
  top: -5%;
  left: 75%;
  width: clamp(78px, 7.6vw, 104px);
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(22, 48, 71, 0.18));
  transform: rotate(12deg);
  animation: stamp-down 0.55s 1.55s var(--ease-spring) backwards;
}

.sample-stamp__outer,
.sample-stamp__inner {
  fill: rgba(255, 252, 246, 0.94);
  stroke: var(--gold-deep);
  stroke-width: 2.5;
}

.sample-stamp__inner {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.sample-stamp__spin {
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: spin 40s linear infinite;
}

.sample-stamp__ring {
  fill: var(--gold-deep);
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
}

.sample-stamp__word {
  fill: var(--navy);
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  font-weight: 600;
}

.card-note {
  position: absolute;
  z-index: 4;
  bottom: -4%;
  left: 2%;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  color: var(--navy);
  font-family: var(--hand);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 600;
  line-height: 0.95;
  pointer-events: none;
  transform: rotate(-4deg);
  animation: rise-in 700ms 2.1s var(--ease-out) backwards;
}

.card-note__arrow {
  width: clamp(52px, 5.2vw, 74px);
  height: auto;
  margin-bottom: 0.7em;
}

.card-note__arrow path {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: draw-line 0.8s 2.4s var(--ease-out) backwards;
}

.card-note__arrow path + path {
  animation-delay: 3.1s;
  animation-duration: 0.35s;
}

.postcard-stack__cover {
  position: absolute;
  z-index: 1;
  inset: 0;
}

/* Hero street: houses draw themselves, a card flies to the mailbox. */

.hero-street {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--street-height);
}

.hero-street .draw {
  stroke-dasharray: 1;
  animation: draw-shape 1.5s var(--d, 0s) var(--ease-out) backwards;
}

.hero-street .wall {
  fill: #fbf7ef;
  stroke: rgba(22, 48, 71, 0.5);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.hero-street .roof {
  fill: var(--tan);
  stroke: rgba(22, 48, 71, 0.55);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.hero-street .thin {
  fill: none;
  stroke: rgba(22, 48, 71, 0.42);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.street-ground {
  fill: none;
  stroke: rgba(22, 48, 71, 0.3);
  stroke-width: 1.5;
}

.hero-street .cactus {
  fill: none;
  stroke: rgba(108, 112, 84, 0.72);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-street .trunk {
  fill: none;
  stroke: rgba(108, 112, 84, 0.72);
  stroke-width: 4;
  stroke-linecap: round;
}

.hero-street .frond {
  fill: none;
  stroke: rgba(108, 112, 84, 0.8);
  stroke-width: 3;
  stroke-linecap: round;
}

.street-palm__fronds {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway 5.5s ease-in-out 1.8s infinite;
}

.street-sun__disc {
  fill: rgba(209, 155, 68, 0.2);
}

.street-sun__ring {
  fill: none;
  stroke: rgba(209, 155, 68, 0.5);
  stroke-width: 1.5;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 60s linear infinite;
}

.mailbox__box {
  fill: #fffdf8;
  stroke: rgba(22, 48, 71, 0.6);
  stroke-width: 1.6;
}

.mailbox__flag {
  transform-origin: 13px 145px;
  animation: flag-raise 11s 1.6s ease-in-out infinite;
}

.mailbox__pennant {
  fill: var(--gold);
}

.street-card {
  opacity: 0;
  animation: card-flight 11s 1.6s ease-in-out infinite;
}

.street-card__body {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 1.4;
}

.street-card__stamp {
  fill: var(--gold);
}

/* Facts strip */

.landing-facts {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--navy);
  color: #fff;
}

.landing-facts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-facts article {
  min-height: 250px;
  padding: 38px clamp(26px, 4vw, 48px) 42px;
}

.landing-facts article + article {
  border-left: 1px solid var(--line-dark);
}

.landing-facts__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.landing-facts__number {
  margin: 0;
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1;
}

.landing-facts h2 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.landing-facts article > p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.96rem;
  line-height: 1.55;
}

.fact-icon {
  width: 52px;
  height: 52px;
  flex: none;
}

.fact-icon .fi-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fact-icon .fi-gold,
.fact-icon .fi-dot,
.fact-icon .fi-ping-dot {
  fill: var(--gold-bright);
}

.fact-icon .fi-hole {
  fill: var(--navy);
}

.fact-icon .fi-shadow {
  fill: rgba(0, 0, 0, 0.28);
  transform-box: fill-box;
  transform-origin: center;
  animation: pin-shadow 2.8s ease-in-out infinite;
}

.fact-icon .fi-pin {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pin-drop 2.8s ease-in-out infinite;
}

.fact-icon .fi-fill {
  fill: rgba(255, 255, 255, 0.85);
}

.fact-icon .fi-beam {
  stroke: var(--gold-bright);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(240, 188, 92, 0.9));
  animation: scan-down 2.4s ease-in-out infinite alternate;
}

.fact-icon .fi-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: dot-bounce 1.4s ease-in-out infinite;
}

.fact-icon .fi-dot:nth-of-type(2) { animation-delay: 0.16s; }
.fact-icon .fi-dot:nth-of-type(3) { animation-delay: 0.32s; }

.fact-icon .fi-ping {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ping 2.2s ease-out infinite;
}

/* One card, three ways in */

.three-ways {
  position: relative;
  padding: clamp(80px, 10vw, 128px) 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(209, 155, 68, 0.14), transparent 26rem),
    var(--paper);
}

.three-ways__intro {
  max-width: 700px;
}

.three-ways__intro h2,
.landing-section__intro h2,
.landing-controls h2,
.landing-mobile-preview__copy h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.4rem, 4.6vw, 4.1rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.02;
}

.three-ways__intro > p:not(.landing-kicker) {
  max-width: 58ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.three-ways__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin: clamp(40px, 5vw, 60px) 0 0;
  padding: 0;
  list-style: none;
}

.way-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(22, 48, 71, 0.1);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(22, 48, 71, 0.08);
}

.way-card:hover {
  box-shadow: 0 24px 50px rgba(22, 48, 71, 0.16);
}

.way-card:hover .way-art {
  transform: scale(1.04);
}

.way-card__art {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid rgba(22, 48, 71, 0.08);
}

.way-art {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 600ms var(--ease-out);
}

.way-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 24px 24px;
}

.way-chip {
  display: inline-flex;
  gap: 6px;
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 3px;
  background: var(--navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.way-chip span {
  color: var(--gold-bright);
}

.way-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.12;
}

.way-card__body > p:not(.way-chip) {
  margin: 8px 0 18px;
  color: var(--muted);
}

.way-card__body .landing-text-link {
  margin-top: auto;
}

/* Shared illustration pieces */

.way-art .a-wall,
.way-art .a-sky {
  fill: #f6ecdb;
}

.way-art .a-floor,
.way-art .a-ground {
  fill: #e6d6ba;
}

.way-art .a-line {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.way-art :is(.a-cab, .a-hood, .a-oven, .a-counter, .a-pot, .a-island, .a-islandtop, .a-planter, .a-wallx, .a-roofx, .a-door, .a-win, .a-garage, .a-fascia, .a-roofface, .a-shade) {
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linejoin: round;
}

.way-art .a-cab { fill: var(--tan); }
.way-art .a-hood { fill: #fffaf1; }
.way-art .a-oven { fill: #d9c8a9; }
.way-art .a-counter { fill: #fffdf8; }
.way-art .a-pot { fill: var(--navy); }
.way-art .a-island { fill: #fffaf1; }
.way-art .a-islandtop { fill: #fffdf8; }
.way-art .a-planter { fill: var(--gold); }
.way-art .a-shade { fill: var(--navy); }
.way-art .a-wallx { fill: #fbf6ec; }
.way-art .a-roofx { fill: #c98f58; }
.way-art .a-door { fill: #8f6a45; }
.way-art .a-win { fill: #cfe0e8; }
.way-art .a-garage { fill: #fffaf1; }
.way-art .a-fascia { fill: var(--navy); }

.way-art .a-faucet {
  fill: none;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linecap: round;
}

.way-art .a-drip {
  fill: #6aa6c2;
  animation: drip 2.6s ease-in infinite;
}

.way-art .a-steam path {
  fill: none;
  stroke: rgba(22, 48, 71, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  animation: steam 3s ease-in-out infinite;
}

.way-art .a-steam path:nth-child(2) { animation-delay: 0.6s; }
.way-art .a-steam path:nth-child(3) { animation-delay: 1.2s; }

.way-art .a-leaf {
  fill: #7f8a5c;
  stroke: #4f5838;
  stroke-width: 1.2;
}

.way-art .a-plant {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway 4.5s ease-in-out infinite;
}

.way-art .a-pendant {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: pendant-swing 4.2s ease-in-out infinite;
}

.way-art .a-pendant--late {
  animation-delay: -1.4s;
}

.way-art .a-glow {
  fill: rgba(240, 188, 92, 0.45);
  filter: blur(4px);
  animation: glow 4.2s ease-in-out infinite;
}

.way-art .a-spark {
  fill: var(--gold);
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 2.8s ease-in-out infinite;
}

.way-art .a-spark--late {
  animation-delay: 1.3s;
}

.way-art .a-sun {
  fill: rgba(209, 155, 68, 0.55);
  transform-box: fill-box;
  transform-origin: center;
  animation: sun-pulse 5s ease-in-out infinite;
}

.way-art .a-paint {
  fill: var(--gold-soft);
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: paint-wall 7s ease-in-out infinite;
}

.way-art .a-cactus {
  fill: none;
  stroke: var(--sage);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.way-art .a-shrub {
  fill: #8c9567;
}

.way-art .a-roller {
  transform: translate(272px, 140px);
  animation: roller-move 7s ease-in-out infinite;
}

.way-art .a-roller__bob {
  animation: roller-bob 0.9s ease-in-out infinite alternate;
}

.way-art .a-roller__frame {
  fill: none;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.way-art .a-roller__head {
  fill: var(--gold);
  stroke: var(--navy);
  stroke-width: 2;
}

.way-art .a-tilebg {
  fill: #c98f58;
}

.way-art .a-tilearc {
  fill: #d9a066;
  stroke: #8a5a31;
  stroke-width: 1.2;
}

.way-art .a-tilearc--big {
  stroke-width: 1.6;
}

.way-art .a-lens {
  transform: translate(198px, 116px);
  animation: lens-scan 8s ease-in-out infinite;
}

.way-art .a-lens__glass {
  stroke: none;
  opacity: 0.96;
}

.way-art .a-lens__rim {
  fill: rgba(255, 255, 255, 0.16);
  stroke: var(--navy);
  stroke-width: 5;
}

.way-art .a-lens__handle {
  stroke: var(--navy);
  stroke-width: 8;
  stroke-linecap: round;
}

.way-art .a-check circle {
  fill: var(--navy);
  stroke: #fff;
  stroke-width: 2.5;
}

.way-art .a-check path {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.way-art .a-check {
  transform-box: fill-box;
  transform-origin: center;
  animation: check-pop 8s var(--ease-spring) infinite;
}

/* Homeowner phone preview */

.landing-mobile-preview {
  overflow: hidden;
  padding: clamp(72px, 9vw, 116px) 0;
  background:
    radial-gradient(circle at 88% 20%, rgba(209, 155, 68, 0.18), transparent 22rem),
    var(--panel);
}

.landing-mobile-preview__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.7fr);
  align-items: center;
  gap: clamp(46px, 9vw, 126px);
}

.landing-mobile-preview__copy {
  max-width: 610px;
}

.landing-mobile-preview__copy > p:not(.landing-kicker) {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.07rem;
  line-height: 1.65;
}

.landing-mobile-preview__copy .landing-button {
  margin-top: 28px;
}

.landing-phone-preview {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin: 0;
}

.phone-float {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(100%, 360px);
  animation: phone-float 6s ease-in-out infinite;
}

/* The same phone as the estimate preview on the pricing page: a dark bezel,
   speaker, camera, and browser bar. The capture scrolls inside it. */

.phone-mockup-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 720px;
  overflow: hidden;
  border: 11px solid #1f242d;
  border-radius: 42px;
  background: #1f242d;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.32), 0 4px 14px rgba(15, 23, 42, 0.16);
}

.phone-mockup-speaker {
  position: absolute;
  z-index: 15;
  top: 7px;
  left: 50%;
  width: 52px;
  height: 4.5px;
  border-radius: 4px;
  background: #374151;
  transform: translateX(-50%);
}

.phone-mockup-camera {
  position: absolute;
  z-index: 15;
  top: 6px;
  left: calc(50% + 36px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #374151;
}

.phone-mockup-screen {
  position: relative;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 30px;
  background: #faf7f1;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.phone-mockup-screen::-webkit-scrollbar {
  display: none;
}

.phone-mockup-screen:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.phone-mockup-screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Between the number screen and the page it opens. */
.phone-mockup-step {
  margin: 0;
  padding: 14px 12px;
  border-block: 3px solid var(--gold);
  background: var(--navy);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

.phone-mockup-step span {
  color: var(--gold-bright);
}

/* Desktop: the live example page, drawn at a real phone width (390px)
   and scaled down to the screen. Hidden until it has loaded. */
.phone-mockup-live {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  visibility: hidden;
}

.phone-mockup-live iframe {
  display: block;
  width: 390px;
  border: 0;
  transform-origin: 0 0;
}

.phone-mockup-screen.is-live {
  overflow: hidden;
}

.phone-mockup-screen.is-live .phone-mockup-live {
  visibility: visible;
}

.phone-mockup-screen.is-live .phone-mockup-pictures {
  visibility: hidden;
}

.phone-mockup-browser-bar {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 10px 8px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.1);
  background: rgba(234, 229, 220, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #4b5563;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
}

.phone-mockup-lock {
  width: 9px;
  height: 11px;
  fill: none;
  stroke: #4b5563;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.phone-mockup-url {
  overflow: hidden;
  color: #1f2937;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-frame {
  position: absolute;
  inset: -18px;
  pointer-events: none;
}

.phone-frame i {
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
  animation: frame-breathe 3s ease-in-out infinite;
}

.phone-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 12px; --fx: -1; --fy: -1; }
.phone-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 12px; --fy: -1; }
.phone-frame i:nth-child(3) { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; border-bottom-right-radius: 12px; }
.phone-frame i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 12px; --fx: -1; }

.lead-toast {
  position: absolute;
  top: 16%;
  right: -34%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 250px;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(22, 48, 71, 0.1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(22, 48, 71, 0.22);
  animation: toast 7s var(--ease-out) 0.8s infinite;
}

.lead-toast__icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border-radius: 10px;
  background: var(--navy);
}

.lead-toast__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 10%;
  animation: bell 7s ease-in-out 0.8s infinite;
}

.lead-toast__text {
  display: grid;
  gap: 2px;
  line-height: 1.25;
}

.lead-toast__text strong {
  color: var(--navy);
  font-size: 0.92rem;
}

.lead-toast__text span {
  color: var(--muted);
  font-size: 0.8rem;
}

.landing-phone-preview figcaption {
  max-width: 34ch;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

/* Sections */

.landing-section {
  padding: clamp(82px, 10vw, 132px) 0;
}

.landing-section--tinted {
  border-block: 1px solid rgba(22, 48, 71, 0.09);
  background: var(--paper-deep);
}

.landing-section__intro {
  max-width: 720px;
}

.landing-section__intro > p:not(.landing-kicker) {
  max-width: 62ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
}

/* Process */

.process-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(520px, 1.24fr);
  align-items: start;
  gap: clamp(60px, 8vw, 110px);
}

.process-layout__intro {
  position: sticky;
  top: 126px;
}

.process-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-list::before {
  position: absolute;
  top: 34px;
  bottom: 60px;
  left: 29px;
  border-left: 2px dashed rgba(22, 48, 71, 0.22);
  content: "";
}

.process-list::after {
  position: absolute;
  top: 34px;
  left: 24px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(209, 155, 68, 0.25);
  content: "";
  opacity: 0;
  animation: travel-down 5s ease-in-out 0.6s infinite;
}

.process-list li {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 24px;
  padding: 30px 0 34px;
}

.process-list li:first-child {
  padding-top: 4px;
}

.process-list li + li {
  border-top: 1px solid rgba(22, 48, 71, 0.13);
}

.process-list__number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid rgba(22, 48, 71, 0.16);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 8px 18px rgba(22, 48, 71, 0.08);
}

.process-list__number b {
  position: absolute;
  top: -4px;
  right: -6px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: 0.86rem;
  font-style: italic;
  font-weight: 600;
}

.process-icon {
  width: 34px;
  height: 34px;
}

.process-icon .pi-line {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-icon .pi-faint {
  stroke: rgba(22, 48, 71, 0.35);
}

.process-icon .pi-sweep {
  fill: rgba(209, 155, 68, 0.5);
  transform-box: view-box;
  transform-origin: 20px 20px;
  animation: spin 3.2s linear infinite;
}

.process-icon .pi-house {
  fill: var(--gold);
  stroke: var(--navy);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.process-icon .pi-stamp circle {
  fill: var(--gold);
}

.process-icon .pi-stamp path {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-icon .pi-stamp {
  transform-box: fill-box;
  transform-origin: center;
  animation: stamp-loop 3.6s var(--ease-spring) infinite;
}

.process-icon .pi-note {
  fill: var(--gold);
  animation: note-in 3.6s var(--ease-out) infinite;
}

.process-icon .pi-ping {
  fill: var(--gold);
  stroke: var(--panel);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: heartbeat 1.8s ease-in-out infinite;
}

.process-list h3 {
  margin: 6px 0 8px;
  color: var(--navy);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.process-list p {
  margin: 0;
  color: var(--muted);
}

/* Safeguards */

.landing-controls {
  position: relative;
  overflow: hidden;
  padding: clamp(82px, 10vw, 128px) 0;
  background:
    radial-gradient(circle at 18% 88%, rgba(255, 255, 255, 0.05), transparent 26rem),
    var(--navy-deep);
  color: #fff;
}

.landing-controls__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
  gap: clamp(58px, 8vw, 110px);
}

.landing-controls h2 {
  color: #fff;
}

.landing-controls__intro > p:not(.landing-kicker) {
  max-width: 54ch;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.06rem;
}

.approved-stamp {
  display: block;
  width: clamp(120px, 13vw, 158px);
  height: auto;
  margin-top: 40px;
  transform: rotate(-10deg);
}

.landing-controls.is-live .approved-stamp {
  animation: stamp-down 0.6s 2.3s var(--ease-spring) backwards;
}

.approved-stamp__outer,
.approved-stamp__inner {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 3;
}

.approved-stamp__inner {
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.approved-stamp__ring {
  fill: var(--gold-bright);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}

.approved-stamp__check {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.landing-controls.is-live .approved-stamp__check {
  animation: draw-line 0.5s 2.8s var(--ease-out) backwards;
}

.control-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.control-list li {
  position: relative;
  padding: 0 0 26px 46px;
  color: rgba(255, 255, 255, 0.72);
}

.control-list li + li {
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}

.control-list strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
}

.tick-box {
  position: absolute;
  top: 2px;
  left: 0;
  width: 28px;
  height: 28px;
}

.control-list li + li .tick-box {
  top: 28px;
}

.tick-box rect {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.6;
}

.tick-box path {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.landing-controls.is-live .tick-box path {
  animation: draw-line 0.45s var(--ease-out) backwards;
}

.landing-controls.is-live .control-list li:nth-child(1) .tick-box path { animation-delay: 0.5s; }
.landing-controls.is-live .control-list li:nth-child(2) .tick-box path { animation-delay: 0.95s; }
.landing-controls.is-live .control-list li:nth-child(3) .tick-box path { animation-delay: 1.4s; }
.landing-controls.is-live .control-list li:nth-child(4) .tick-box path { animation-delay: 1.85s; }

.landing-controls.is-live .tick-box rect {
  animation: box-fill 0.45s ease both;
}

.landing-controls.is-live .control-list li:nth-child(1) .tick-box rect { animation-delay: 0.5s; }
.landing-controls.is-live .control-list li:nth-child(2) .tick-box rect { animation-delay: 0.95s; }
.landing-controls.is-live .control-list li:nth-child(3) .tick-box rect { animation-delay: 1.4s; }
.landing-controls.is-live .control-list li:nth-child(4) .tick-box rect { animation-delay: 1.85s; }

/* Request a sample */

.landing-section--request {
  background:
    radial-gradient(circle at 92% 10%, rgba(209, 155, 68, 0.14), transparent 24rem),
    var(--paper);
}

.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
  align-items: center;
  gap: clamp(58px, 8vw, 110px);
}

.mail-envelope {
  display: block;
  width: 132px;
  height: auto;
  margin: 0 0 18px -6px;
}

.mail-envelope .env-flap {
  fill: #dcc6a0;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linejoin: round;
}

.mail-envelope .env-back {
  fill: var(--tan);
  stroke: var(--navy);
  stroke-width: 2;
}

.mail-envelope .env-front {
  fill: #f7ecd8;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linejoin: round;
}

.mail-envelope .env-card {
  animation: card-peek 5s ease-in-out infinite;
}

.mail-envelope .env-card__body {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 2;
}

.mail-envelope .env-card__grid,
.mail-envelope .env-card__lines {
  fill: none;
  stroke: rgba(22, 48, 71, 0.5);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.mail-envelope .env-card__qr {
  fill: var(--navy);
}

.mail-envelope .env-lines {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  animation: whoosh 5s ease-in-out infinite;
}

.landing-account-contact {
  margin-top: 20px;
  color: var(--muted);
}

.landing-section__intro > .landing-new-area {
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: rgba(209, 155, 68, 0.1);
  color: var(--ink);
}

.storm__note a {
  color: var(--gold-bright);
  text-decoration-color: rgba(240, 188, 92, 0.6);
}

.targeting__more a {
  color: var(--navy);
  text-decoration-color: var(--gold);
}

.landing-account-contact a {
  color: var(--navy);
  font-weight: 700;
  text-decoration-color: rgba(22, 48, 71, 0.28);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.landing-account-contact a:hover {
  text-decoration-color: var(--gold);
}

/* Footer */

.landing-footer {
  border-top: 1px solid rgba(22, 48, 71, 0.12);
  background: var(--paper);
}

.landing-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 112px;
  color: var(--muted);
  font-size: 0.88rem;
}

.landing-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.landing-footer a {
  color: var(--navy);
  font-weight: 700;
}

/* Contractor-request privacy notice */

.platform-privacy__header {
  grid-template-columns: 1fr auto;
}

.platform-legal {
  max-width: 940px;
  padding-block: clamp(58px, 8vw, 96px);
}

.platform-legal__intro h1 {
  max-width: 13ch;
  margin: 0;
  color: var(--navy);
  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.platform-legal__intro > p:last-child {
  max-width: 66ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.platform-legal__card {
  margin-top: 42px;
  padding: clamp(26px, 5vw, 52px);
  border: 1px solid rgba(22, 48, 71, 0.12);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.platform-legal__card section + section {
  margin-top: 32px;
  padding-top: 30px;
  border-top: 1px solid rgba(22, 48, 71, 0.12);
}

.platform-legal__card h2 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 500;
  line-height: 1.15;
}

.platform-legal__card p,
.platform-legal__card li {
  color: #3f4850;
}

.platform-legal__card p {
  margin: 0;
}

.platform-legal__card p + p {
  margin-top: 14px;
}

.platform-legal__card ul {
  margin: 12px 0 16px;
  padding-left: 22px;
}

.platform-legal__card li + li {
  margin-top: 8px;
}

.platform-legal__card a {
  color: var(--navy);
  font-weight: 700;
}

.platform-legal__card address {
  margin-top: 14px;
  color: var(--navy);
  font-style: normal;
  font-weight: 700;
}

/* Audience switch: roofers at /, general contractors at /general-contractors */

.audience-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 4px;
  border: 1px solid rgba(22, 48, 71, 0.14);
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.8);
  box-shadow: 0 6px 18px rgba(22, 48, 71, 0.08);
}

.audience-switch a {
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 240ms ease, color 240ms ease;
}

.audience-switch a[aria-current="page"] {
  background: var(--navy);
  box-shadow: 0 4px 12px rgba(22, 48, 71, 0.22);
  color: #fff;
}

.audience-switch a:not([aria-current]):hover {
  background: rgba(22, 48, 71, 0.06);
  color: var(--gold-deep);
}

.landing-hero__copy > .audience-switch {
  animation-delay: 40ms;
}

/* Roofer card deck: the next card deals every few seconds. */

.card-deck {
  position: relative;
  display: block;
  aspect-ratio: 100 / 76;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease-out);
  animation: deal-deck 1.2s 0.4s var(--ease-out) backwards;
}

.postcard-stage.is-tilting .card-deck {
  transition: transform 120ms linear;
}

.deck-card {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 86%;
  height: auto;
  aspect-ratio: 1360 / 960;
  border-radius: 4px;
  background: #fff;
  box-shadow:
    0 2px 4px rgba(22, 48, 71, 0.08),
    var(--shadow);
  transition:
    transform 900ms var(--ease-out),
    opacity 600ms ease,
    box-shadow 600ms ease;
}

.deck-card.is-front {
  transform: translate(0, 0) rotate(-2deg) translateZ(30px);
}

.deck-card.is-middle {
  transform: translate(5%, 7%) rotate(2deg) translateZ(15px) scale(0.97);
  box-shadow: 0 16px 40px rgba(22, 48, 71, 0.16);
}

.deck-card.is-back {
  transform: translate(10%, 14%) rotate(4.5deg) translateZ(0) scale(0.94);
  box-shadow: 0 12px 30px rgba(22, 48, 71, 0.12);
}

.deck-card.is-leaving {
  animation: deck-leave 900ms var(--ease-out);
}


.card-deck:hover .deck-card.is-front {
  box-shadow: 0 34px 80px rgba(22, 48, 71, 0.28);
}

.postcard-proof--deck .sample-stamp {
  top: -9%;
  right: 8%;
  left: auto;
}

.deck-controls {
  display: none;
  gap: 6px;
  margin: 18px 2% 0;
}

.reveal-ready .deck-controls {
  display: flex;
}

.deck-controls button {
  min-height: 36px;
  padding: 7px 16px;
  border: 1px solid rgba(22, 48, 71, 0.2);
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.8);
  color: var(--navy);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.deck-controls button[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.deck-controls button:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* Wider screens lay the two sides out next to each other, across the full
   page width. Each side keeps its own spot, so the back's code and phone number
   on its left edge stay in view; switching sides only brings that card forward. */
@media (min-width: 761px) {
  .landing-hero__grid > .postcard-proof--deck {
    width: 100%;
  }

  .postcard-proof--deck .card-deck {
    aspect-ratio: 100 / 43;
  }

  .postcard-proof--deck .deck-card {
    width: 52%;
  }

  .postcard-proof--deck .deck-card[data-deck-card="front"] {
    --deck-tilt: -2deg;
  }

  .postcard-proof--deck .deck-card[data-deck-card="back"] {
    left: 48%;
    --deck-drop: 6%;
    --deck-tilt: 2deg;
  }

  .postcard-proof--deck .deck-card.is-front {
    transform: translateY(var(--deck-drop, 0)) rotate(var(--deck-tilt)) translateZ(30px);
  }

  .postcard-proof--deck .deck-card.is-middle {
    transform: translateY(var(--deck-drop, 0)) rotate(var(--deck-tilt)) translateZ(15px) scale(0.97);
  }

  .postcard-proof--deck .deck-card.is-leaving {
    animation: none;
  }

  .postcard-proof--deck .sample-stamp {
    top: -10%;
    right: -1%;
  }
}

/* Storm targeting */

.storm {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 128px) 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(240, 188, 92, 0.12), transparent 26rem),
    linear-gradient(180deg, var(--navy-deep) 0%, #132c45 100%);
  color: #fff;
}

.storm__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(44px, 6vw, 88px);
}

.storm h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.4rem, 4.6vw, 4.1rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.02;
}

.storm__copy > p:not(.landing-kicker) {
  max-width: 50ch;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
}

.storm__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.storm__facts li {
  display: grid;
  align-content: start;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(240, 188, 92, 0.45);
}

.storm__facts strong {
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.15;
}

.storm__facts span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.45;
}

.storm__note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0 !important;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff !important;
  font-size: 0.86rem !important;
  font-weight: 600;
}

.storm__note::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-bright);
  content: "";
}

.storm__visual {
  margin: 0;
}

.storm__stage {
  position: relative;
  padding-bottom: 12%;
}

.platform-landing .storm-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  clip-path: inset(0 round 18px);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.storm__card {
  position: absolute;
  right: -3%;
  bottom: 0;
  width: 46%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
  transform: rotate(4deg);
  animation: storm-card-bob 6s ease-in-out infinite;
}

.storm__count {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 600;
}

.storm__count b {
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@property --count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.js .storm.is-live .storm__count b {
  --count: var(--n);
  color: transparent;
  font-size: 0;
  counter-reset: storm-count var(--count);
  animation: count-up 2.4s 0.9s var(--ease-out) both;
}

.js .storm.is-live .storm__count b::after {
  color: var(--navy);
  font-size: 1.7rem;
  content: counter(storm-count);
}

.storm__visual figcaption {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
}

.storm-map .sm-bg {
  fill: #1a3754;
}

.storm-map .sm-street {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 12;
}

.storm-map .sm-track {
  fill: none;
  stroke: rgba(240, 188, 92, 0.08);
  stroke-width: 120;
}

.storm-map .sm-house {
  fill: rgba(255, 255, 255, 0.3);
}

.storm-map .sm-house.is-in {
  fill: var(--gold-bright);
}

.storm.is-live .sm-house.is-in {
  animation: house-light 0.5s var(--d, 1s) var(--ease-spring) backwards;
  transform-box: fill-box;
  transform-origin: center;
}

.storm-map .sm-radius {
  fill: rgba(240, 188, 92, 0.1);
  stroke: var(--gold-bright);
  stroke-dasharray: 6 6;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}

.storm.is-live .sm-radius {
  animation: radius-grow 1.2s 0.4s var(--ease-out) backwards;
}

.storm-map .sm-radius-line {
  stroke: rgba(240, 188, 92, 0.7);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.storm-map .sm-radius-label {
  paint-order: stroke;
  stroke: #1a3754;
  stroke-width: 5px;
  stroke-linejoin: round;
  fill: var(--gold-bright);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
}

.storm-map .sm-pin__dot {
  fill: #fff;
  stroke: var(--gold-bright);
  stroke-width: 4;
}

.storm-map .sm-pin__pulse {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ping 2.2s ease-out infinite;
}

.storm-map .sm-report rect {
  fill: var(--navy-deep);
  stroke: rgba(255, 255, 255, 0.25);
}

.storm-map .sm-report text {
  fill: #fff;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
}

.storm-map .sm-storm {
  animation: storm-cross 11s linear infinite;
}

.storm-map .sm-cloud {
  fill: #e9eef3;
  stroke: #9fb0c0;
  stroke-width: 1.5;
}

.storm-map .sm-hail circle {
  fill: #fff;
  animation: hail-fall 0.9s linear infinite;
}

.storm-map .sm-hail circle:nth-child(2) { animation-delay: -0.3s; }
.storm-map .sm-hail circle:nth-child(3) { animation-delay: -0.55s; }
.storm-map .sm-hail circle:nth-child(4) { animation-delay: -0.15s; }
.storm-map .sm-hail circle:nth-child(5) { animation-delay: -0.7s; }

.storm-map .sm-bolt {
  fill: var(--gold-bright);
  opacity: 0;
  animation: bolt 3.7s linear infinite;
}

/* Roofer tools */

.roofer-tools {
  padding: clamp(80px, 10vw, 128px) 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(209, 155, 68, 0.14), transparent 26rem),
    var(--paper);
}

.roofer-tools__intro {
  max-width: 760px;
}

.roofer-tools__intro h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.04;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin: clamp(38px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.tool {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(22, 48, 71, 0.1);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(22, 48, 71, 0.07);
  transition: box-shadow 380ms ease;
}

.tool:hover {
  box-shadow: 0 22px 46px rgba(22, 48, 71, 0.14);
}

.tool__art {
  aspect-ratio: 240 / 150;
  overflow: hidden;
  border-bottom: 1px solid rgba(22, 48, 71, 0.08);
}

.tool-art {
  display: block;
  width: 100%;
  height: 100%;
}

.tool h3 {
  margin: 20px 22px 0;
  color: var(--navy);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
}

.tool p {
  margin: 8px 22px 24px;
  color: var(--muted);
  font-size: 0.97rem;
}

.tool-art .ta-bg { fill: #f6ecdb; }

.tool-art :is(.ta-label, .ta-badge text, .ta-chip-text, .ta-slot text) {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
}

.tool-art .ta-label { fill: var(--navy); }
.tool-art .ta-badge rect,
.tool-art .ta-chip rect { fill: var(--navy); }
.tool-art .ta-badge text,
.tool-art .ta-chip-text { fill: #fff; }

.tool-art .ta-roofplan {
  fill: var(--tan);
  stroke: var(--navy);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.roofer-tools.is-live .tool-art .ta-roofplan {
  animation: draw-shape-loop 6s var(--ease-out) infinite;
}

.tool-art .ta-dim {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.6;
}

.roofer-tools.is-live .tool-art :is(.ta-dim, .ta-dim-text) {
  animation: fade-loop 6s ease infinite;
}

.tool-art .ta-badge {
  transform-box: fill-box;
  transform-origin: center;
}

.roofer-tools.is-live .tool-art--measure .ta-badge {
  animation: badge-loop 6s var(--ease-spring) infinite;
}

.tool-art .ta-outline {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.tool-art .ta-mat--shingle,
.tool-art .ta-mat--metal,
.tool-art .ta-chip-text--shingle,
.tool-art .ta-chip-text--metal {
  opacity: 0;
}

.roofer-tools.is-live .tool-art :is(.ta-mat, .ta-chip-text) {
  animation: material-cycle 9s ease-in-out infinite;
}

.roofer-tools.is-live .tool-art :is(.ta-mat--shingle, .ta-chip-text--shingle) { animation-delay: 3s; }
.roofer-tools.is-live .tool-art :is(.ta-mat--metal, .ta-chip-text--metal) { animation-delay: 6s; }

.tool-art .ta-scan {
  stroke: var(--gold-bright);
  stroke-width: 3;
  filter: drop-shadow(0 0 4px rgba(240, 188, 92, 0.9));
  opacity: 0;
}

.roofer-tools.is-live .tool-art .ta-scan {
  animation: material-scan 3s ease-in-out infinite;
}

.tool-art .ta-house {
  fill: #fffaf1;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linejoin: round;
}

.tool-art .ta-track {
  stroke: rgba(22, 48, 71, 0.15);
  stroke-width: 10;
  stroke-linecap: round;
}

.tool-art .ta-range {
  stroke: var(--gold);
  stroke-width: 10;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

.roofer-tools.is-live .tool-art .ta-range {
  animation: range-grow 6s var(--ease-out) infinite;
}

.tool-art .ta-knob {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 2.5;
}

.roofer-tools.is-live .tool-art .ta-knob:first-of-type {
  animation: knob-left 6s var(--ease-out) infinite;
}

.roofer-tools.is-live .tool-art .ta-knob:last-of-type {
  animation: knob-right 6s var(--ease-out) infinite;
}

.tool-art .ta-price {
  font-size: 12px;
}

.roofer-tools.is-live .tool-art :is(.ta-price, .ta-badge--rates) {
  animation: fade-loop 6s ease infinite;
}

.tool-art .ta-cal {
  fill: #fffaf1;
  stroke: var(--navy);
  stroke-width: 2;
}

.tool-art .ta-cal-head {
  fill: var(--navy);
}

.tool-art .ta-grid {
  stroke: rgba(22, 48, 71, 0.15);
  stroke-width: 1;
}

.tool-art .ta-day {
  fill: rgba(240, 188, 92, 0.25);
  stroke: var(--gold-deep);
  stroke-width: 2.5;
  stroke-dasharray: 1;
}

.roofer-tools.is-live .tool-art .ta-day {
  animation: draw-shape-loop 6s var(--ease-out) infinite;
}

.tool-art .ta-slot rect {
  fill: #fffaf1;
  stroke: rgba(22, 48, 71, 0.3);
}

.tool-art .ta-slot text {
  fill: var(--navy);
}

.tool-art .ta-slot--am rect {
  fill: var(--navy);
  stroke: var(--navy);
}

.tool-art .ta-slot--am text {
  fill: #fff;
}

.roofer-tools.is-live .tool-art .ta-slot--am rect { animation: slot-on 6s ease infinite; }
.roofer-tools.is-live .tool-art .ta-slot--am text { animation: slot-text-on 6s ease infinite; }
.roofer-tools.is-live .tool-art .ta-slot--pm rect { animation: slot-on 6s -3s ease infinite; }
.roofer-tools.is-live .tool-art .ta-slot--pm text { animation: slot-text-on 6s -3s ease infinite; }

.tool-art .ta-streets {
  stroke: rgba(22, 48, 71, 0.1);
  stroke-width: 12;
}

.tool-art .ta-route {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.roofer-tools.is-live .tool-art .ta-route {
  animation: draw-line-loop 6s ease-in-out infinite;
}

.tool-art .ta-stops circle {
  fill: var(--navy);
  stroke: #fff;
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
}

.roofer-tools.is-live .tool-art .ta-stops circle {
  animation: stop-pop 6s var(--ease-spring) infinite;
  animation-delay: calc(var(--i) * 0.55s);
}

.tool-art .ta-panel {
  fill: #fffaf1;
  stroke: var(--navy);
  stroke-width: 2;
}

.tool-art .ta-lines {
  stroke: rgba(22, 48, 71, 0.35);
  stroke-width: 3;
  stroke-linecap: round;
}

.tool-art .ta-flow {
  stroke: var(--gold);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
}

.roofer-tools.is-live .tool-art .ta-flow {
  animation: flow 0.9s linear infinite;
}

.tool-art .ta-coin circle {
  fill: var(--gold);
  stroke: var(--navy);
  stroke-width: 2;
}

.tool-art .ta-coin text {
  fill: var(--navy);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
}

.tool-art .ta-coin,
.tool-art .ta-badge--signed {
  transform-box: fill-box;
  transform-origin: center;
}

.roofer-tools.is-live .tool-art :is(.ta-coin, .ta-badge--signed) {
  animation: badge-loop 5s var(--ease-spring) infinite;
}

/* Targeting: the filters a contractor can combine, and an illustrated panel
   whose count drops as each filter switches on. */

.targeting {
  padding: clamp(80px, 10vw, 128px) 0;
  border-block: 1px solid rgba(22, 48, 71, 0.08);
  background:
    radial-gradient(circle at 90% 12%, rgba(209, 155, 68, 0.14), transparent 26rem),
    var(--panel);
}

.targeting__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(44px, 6vw, 88px);
}

.targeting h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.04;
}

.targeting__copy > p:not(.landing-kicker) {
  max-width: 56ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.targeting__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 32px;
  margin-top: 32px;
}

.filter-group h3 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(209, 155, 68, 0.6);
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 500;
}

.filter-group ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-group li {
  position: relative;
  padding-left: 22px;
  color: #33404c;
  font-size: 0.96rem;
  line-height: 1.4;
}

.filter-group li::before {
  position: absolute;
  top: 0.32em;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--gold);
  border-radius: 3px;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 6px 6px no-repeat;
  content: "";
}

.targeting__copy > .targeting__more {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(22, 48, 71, 0.12);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 600;
}

.filter-demo {
  margin: 0;
}

.filter-demo__panel {
  padding: 24px;
  border: 1px solid rgba(22, 48, 71, 0.12);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 26px 60px rgba(22, 48, 71, 0.16);
}

.filter-demo__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(22, 48, 71, 0.1);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.filter-demo__head b {
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.filter-demo__steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-demo__steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7f2e8;
}

.fd-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--navy);
}

.fd-toggle::after {
  position: absolute;
  top: 3px;
  left: 19px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-bright);
  content: "";
}

.fd-label {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
}

.fd-num {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.filter-demo__bar {
  height: 10px;
  margin: 18px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(22, 48, 71, 0.08);
}

.filter-demo__bar span {
  display: block;
  width: 7%;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}

.filter-demo__result {
  margin: 0;
  color: var(--navy);
  font-size: 0.95rem;
}

.filter-demo__result b {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
}

.filter-demo figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.8rem;
}

.targeting.is-live .filter-demo__steps li {
  animation: fd-row 10s ease infinite;
  animation-delay: calc(var(--i) * 1.1s);
}

.targeting.is-live .fd-toggle {
  animation: fd-track 10s ease infinite;
  animation-delay: calc(var(--i) * 1.1s);
}

.targeting.is-live .fd-toggle::after {
  animation: fd-knob 10s var(--ease-spring) infinite;
  animation-delay: calc(var(--i) * 1.1s);
}

.targeting.is-live .fd-num {
  animation: fd-num 10s ease infinite;
  animation-delay: calc(var(--i) * 1.1s);
}

.targeting.is-live .filter-demo__bar span {
  animation: fd-bar 10s ease-in-out infinite;
}

.targeting.is-live .filter-demo__result {
  animation: fd-result 10s ease infinite;
}

@keyframes fd-row {
  0%, 2% { background: #fbf8f2; }
  8%, 88% { background: #f7f2e8; }
  100% { background: #fbf8f2; }
}

@keyframes fd-track {
  0%, 3% { background: rgba(22, 48, 71, 0.18); }
  7%, 90% { background: var(--navy); }
  100% { background: rgba(22, 48, 71, 0.18); }
}

@keyframes fd-knob {
  0%, 3% { background: #fff; transform: translateX(-16px); }
  8%, 90% { background: var(--gold-bright); transform: translateX(0); }
  100% { background: #fff; transform: translateX(-16px); }
}

@keyframes fd-num {
  0%, 4% { opacity: 0; }
  9%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fd-bar {
  0%, 3% { width: 100%; }
  14% { width: 44%; }
  25% { width: 20%; }
  36% { width: 13%; }
  47% { width: 8%; }
  58%, 90% { width: 7%; }
  100% { width: 100%; }
}

@keyframes fd-result {
  0%, 54% { opacity: 0.25; }
  60%, 90% { opacity: 1; }
  100% { opacity: 0.25; }
}

/* Roofer targeting art: a block of roofs seen from above. Everything runs on
   one 13s clock: a filter switches on, the homes that fail it fade, and the
   homes left get a card. */

.roof-picker__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.roof-picker__filters li {
  padding: 6px 11px 6px 27px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background-color: var(--navy);
  background-image: radial-gradient(circle at 14px 50%, var(--gold-bright) 0 5px, transparent 5.5px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.platform-landing .roof-map {
  display: block;
  width: 100%;
  height: auto;
}

.roof-map .rm-bg {
  fill: #f1e6d2;
}

.roof-map .rm-street {
  fill: none;
  stroke: #fcf8f0;
  stroke-width: 20;
}

.roof-map .rm-lane {
  fill: none;
  stroke: rgba(22, 48, 71, 0.16);
  stroke-width: 1.5;
  stroke-dasharray: 7 8;
}

.roof-map .rm-lot {
  fill: none;
  stroke: rgba(22, 48, 71, 0.09);
  stroke-width: 1.5;
}

.roof-map .rm-roof {
  stroke: var(--navy);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.roof-map .rm-lines {
  fill: none;
  stroke: rgba(22, 48, 71, 0.6);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.roof-map .rm-year {
  fill: var(--navy);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
}

.roof-map .rm-home--out {
  opacity: 0.22;
}

.roof-map .rm-halo {
  fill: rgba(240, 188, 92, 0.36);
  stroke: var(--gold);
  stroke-width: 2.5;
}

.roof-map :is(.rm-halo, .rm-card, .rm-tag) {
  transform-box: fill-box;
  transform-origin: center;
}

.roof-map .rm-card__shadow {
  fill: rgba(22, 48, 71, 0.22);
}

.roof-map .rm-card__face {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 1.5;
}

.roof-map .rm-card__lines {
  stroke: rgba(22, 48, 71, 0.45);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.roof-map .rm-card__stamp {
  fill: var(--gold);
}

.roof-map .rm-tag rect {
  fill: var(--navy-deep);
}

.roof-map .rm-tag text {
  fill: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
}

.roof-picker__result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 600;
}

.roof-picker__result b {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@property --roofs {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.js .targeting.is-live .roof-picker__result b {
  --roofs: var(--n3);
  font-size: 0;
  counter-reset: roof-count var(--roofs);
  animation: rm-count 13s linear infinite;
}

.js .targeting.is-live .roof-picker__result b::after {
  font-size: 1.7rem;
  content: counter(roof-count);
}

.targeting.is-live .roof-picker__filters li:nth-child(1) { animation: rm-chip-1 13s ease infinite; }
.targeting.is-live .roof-picker__filters li:nth-child(2) { animation: rm-chip-2 13s ease infinite; }
.targeting.is-live .roof-picker__filters li:nth-child(3) { animation: rm-chip-3 13s ease infinite; }
.targeting.is-live .rm-home--out-1 { animation: rm-dim-1 13s ease infinite; }
.targeting.is-live .rm-home--out-2 { animation: rm-dim-2 13s ease infinite; }
.targeting.is-live .rm-home--out-3 { animation: rm-dim-3 13s ease infinite; }
.targeting.is-live .rm-tag { animation: rm-tag 13s var(--ease-spring) infinite; }
.targeting.is-live .rm-halo { animation: rm-halo 13s var(--d) var(--ease-out) infinite backwards; }
.targeting.is-live .rm-card { animation: rm-card 13s var(--d) var(--ease-spring) infinite backwards; }

@keyframes rm-chip-1 {
  0%, 5%, 100% {
    border-color: rgba(22, 48, 71, 0.28);
    background-color: #fff;
    background-image: radial-gradient(circle at 14px 50%, transparent 0 3.5px, rgba(22, 48, 71, 0.4) 4px 5px, transparent 5.5px);
    color: var(--muted);
  }
  8%, 94% {
    border-color: var(--navy);
    background-color: var(--navy);
    background-image: radial-gradient(circle at 14px 50%, var(--gold-bright) 0 5px, transparent 5.5px);
    color: #fff;
  }
}

@keyframes rm-chip-2 {
  0%, 23%, 100% {
    border-color: rgba(22, 48, 71, 0.28);
    background-color: #fff;
    background-image: radial-gradient(circle at 14px 50%, transparent 0 3.5px, rgba(22, 48, 71, 0.4) 4px 5px, transparent 5.5px);
    color: var(--muted);
  }
  26%, 94% {
    border-color: var(--navy);
    background-color: var(--navy);
    background-image: radial-gradient(circle at 14px 50%, var(--gold-bright) 0 5px, transparent 5.5px);
    color: #fff;
  }
}

@keyframes rm-chip-3 {
  0%, 41%, 100% {
    border-color: rgba(22, 48, 71, 0.28);
    background-color: #fff;
    background-image: radial-gradient(circle at 14px 50%, transparent 0 3.5px, rgba(22, 48, 71, 0.4) 4px 5px, transparent 5.5px);
    color: var(--muted);
  }
  44%, 94% {
    border-color: var(--navy);
    background-color: var(--navy);
    background-image: radial-gradient(circle at 14px 50%, var(--gold-bright) 0 5px, transparent 5.5px);
    color: #fff;
  }
}

@keyframes rm-dim-1 {
  0%, 8%, 100% { opacity: 1; }
  13%, 94% { opacity: 0.22; }
}

@keyframes rm-dim-2 {
  0%, 26%, 100% { opacity: 1; }
  31%, 94% { opacity: 0.22; }
}

@keyframes rm-dim-3 {
  0%, 48%, 100% { opacity: 1; }
  53%, 94% { opacity: 0.22; }
}

@keyframes rm-tag {
  0%, 43%, 100% { opacity: 0; transform: scale(0.5); }
  47%, 94% { opacity: 1; transform: scale(1); }
}

@keyframes rm-halo {
  0%, 58%, 100% { opacity: 0; transform: scale(0.82); }
  63%, 94% { opacity: 1; transform: scale(1); }
}

@keyframes rm-card {
  0%, 59% { opacity: 0; transform: translateY(-22px) scale(0.4); }
  65%, 94% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(0.7); }
}

@keyframes rm-count {
  0%, 8% { --roofs: var(--n0); }
  13%, 26% { --roofs: var(--n1); }
  31%, 48% { --roofs: var(--n2); }
  53%, 94% { --roofs: var(--n3); }
  100% { --roofs: var(--n0); }
}

@media (max-width: 1040px) {
  .targeting__grid {
    grid-template-columns: 1fr;
  }

  .filter-demo {
    width: min(520px, 100%);
  }
}

@media (max-width: 520px) {
  .targeting__groups {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .targeting {
    padding-block: 72px;
  }

  .targeting h2 {
    font-size: clamp(2.3rem, 11.5vw, 3.2rem);
  }

  .filter-demo__panel {
    padding: 18px;
  }
}

/* Roofer keyframes */

@keyframes deal-deck {
  from { opacity: 0; transform: translate(-6%, 18%) rotate(-8deg); }
}

@keyframes deck-leave {
  0% { opacity: 1; transform: translate(0, 0) rotate(-2deg) translateZ(30px); }
  45% { opacity: 1; transform: translate(-30%, 8%) rotate(-12deg) translateZ(40px); }
}

@keyframes storm-card-bob {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-8px); }
}

@keyframes count-up {
  from { --count: 0; }
  to { --count: var(--n); }
}

@keyframes house-light {
  from { fill: rgba(255, 255, 255, 0.3); transform: scale(0.6); }
}

@keyframes radius-grow {
  from { opacity: 0; transform: scale(0); }
}

@keyframes storm-cross {
  0% { opacity: 0; transform: translate(-130px, -60px); }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(560px, 380px); }
}

@keyframes hail-fall {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(26px); }
}

@keyframes bolt {
  0%, 60%, 64%, 67%, 100% { opacity: 0; }
  61%, 66% { opacity: 1; }
}

@keyframes draw-shape-loop {
  0% { stroke-dashoffset: 1.02; fill-opacity: 0; }
  35% { stroke-dashoffset: 0; fill-opacity: 0.4; }
  45%, 88% { stroke-dashoffset: 0; fill-opacity: 1; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

@keyframes draw-line-loop {
  0% { stroke-dashoffset: 1.02; opacity: 1; }
  55%, 88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes fade-loop {
  0%, 30% { opacity: 0; }
  42%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes badge-loop {
  0%, 40% { opacity: 0; transform: scale(0.4); }
  52%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

@keyframes material-cycle {
  0% { opacity: 0; }
  5%, 30% { opacity: 1; }
  36%, 100% { opacity: 0; }
}

@keyframes material-scan {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: 1; }
  80% { opacity: 1; transform: translateX(168px); }
  90%, 100% { opacity: 0; transform: translateX(168px); }
}

@keyframes range-grow {
  0%, 8% { transform: scaleX(0.05); }
  40%, 100% { transform: scaleX(1); }
}

@keyframes knob-left {
  0%, 8% { transform: translateX(42px); }
  40%, 100% { transform: translateX(0); }
}

@keyframes knob-right {
  0%, 8% { transform: translateX(-42px); }
  40%, 100% { transform: translateX(0); }
}

@keyframes slot-on {
  0%, 45% { fill: var(--navy); stroke: var(--navy); }
  50%, 95% { fill: #fffaf1; stroke: rgba(22, 48, 71, 0.3); }
  100% { fill: var(--navy); stroke: var(--navy); }
}

@keyframes slot-text-on {
  0%, 45% { fill: #fff; }
  50%, 95% { fill: var(--navy); }
  100% { fill: #fff; }
}

@keyframes stop-pop {
  0%, 8% { transform: scale(0); }
  14%, 88% { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes flow {
  to { stroke-dashoffset: -12; }
}

@media (max-width: 1040px) {
  .storm__grid {
    grid-template-columns: 1fr;
  }

  .storm__visual {
    width: min(640px, 100%);
  }

  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tool-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .storm__facts {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .storm__count {
    top: 10px;
    left: 10px;
    padding: 8px 12px;
    font-size: 0.78rem;
  }

  .storm__card {
    width: 52%;
    right: -2%;
  }

  .audience-switch a {
    padding: 9px 14px;
    font-size: 0.86rem;
  }

  .deck-card {
    width: 88%;
  }

  .postcard-proof--deck .sample-stamp {
    top: -12%;
    right: 0;
    left: auto;
  }
}

/* Keyframes */

@keyframes draw-line {
  from { stroke-dashoffset: 1.02; }
  to { stroke-dashoffset: 0; }
}

@keyframes draw-shape {
  0% { stroke-dashoffset: 1.02; fill-opacity: 0; }
  70% { fill-opacity: 0; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes tag-swing {
  30% { transform: rotate(-8deg); }
  65% { transform: rotate(4deg); }
}

@keyframes deal-back {
  from { opacity: 0; transform: translate(12%, -16%) rotate(14deg); }
}

@keyframes deal-front {
  0% { opacity: 0; transform: translate(-8%, 22%) rotate(-11deg) translateZ(20px); }
  60% { opacity: 1; }
  82% { transform: translate(0.6%, -1.2%) rotate(-1.4deg) translateZ(20px); }
}

@keyframes stage-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes glare-sweep {
  0% { opacity: 1; background-position: 0 0, 130% 0; }
  90% { opacity: 1; }
  100% { opacity: 0; background-position: 0 0, -30% 0; }
}

@keyframes qr-ring {
  0% { opacity: 0; transform: scale(0.94); }
  6% { opacity: 1; transform: scale(1); }
  26% { opacity: 1; }
  33%, 100% { opacity: 0; transform: scale(1.08); }
}

@keyframes qr-beam {
  0% { opacity: 0; top: 8%; }
  4% { opacity: 1; }
  15% { top: 70%; }
  26% { opacity: 1; top: 8%; }
  30%, 100% { opacity: 0; top: 8%; }
}

@keyframes stamp-down {
  0% { opacity: 0; transform: rotate(-20deg) scale(1.9); }
  70% { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes flag-raise {
  0%, 74% { transform: rotate(90deg); }
  79% { transform: rotate(-10deg); }
  82%, 95% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

@keyframes card-flight {
  0% { opacity: 0; transform: translate(-60px, 34px) rotate(-16deg); }
  5% { opacity: 1; }
  30% { transform: translate(240px, 6px) rotate(8deg); }
  55% { transform: translate(560px, 30px) rotate(-6deg); }
  72% { opacity: 1; transform: translate(738px, 124px) rotate(0deg) scale(0.75); }
  77% { opacity: 0; transform: translate(748px, 134px) rotate(0deg) scale(0.3); }
  100% { opacity: 0; transform: translate(748px, 134px) scale(0.3); }
}

@keyframes pin-drop {
  0% { transform: translateY(-10px); }
  30% { transform: translateY(0) scale(1.08, 0.9); }
  40% { transform: translateY(-3px) scale(1); }
  50%, 100% { transform: translateY(0); }
}

@keyframes pin-shadow {
  0% { transform: scale(0.5); opacity: 0.4; }
  30%, 100% { transform: scale(1); opacity: 1; }
}

@keyframes scan-down {
  from { transform: translateY(0); }
  to { transform: translateY(15px); }
}

@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

@keyframes ping {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

@keyframes drip {
  0%, 55% { opacity: 0; transform: translateY(0); }
  60% { opacity: 1; }
  85% { opacity: 1; transform: translateY(8px); }
  90%, 100% { opacity: 0; transform: translateY(8px); }
}

@keyframes steam {
  0% { opacity: 0; transform: translateY(6px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes pendant-swing {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@keyframes glow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@keyframes sun-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes paint-wall {
  0% { opacity: 1; transform: scaleX(0); }
  55% { transform: scaleX(1); }
  84% { opacity: 1; transform: scaleX(1); }
  96%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes roller-move {
  0% { opacity: 0; transform: translate(48px, 140px); }
  4% { opacity: 1; }
  55% { transform: translate(272px, 140px); }
  76% { opacity: 1; transform: translate(272px, 140px); }
  86%, 100% { opacity: 0; transform: translate(272px, 140px); }
}

@keyframes roller-bob {
  from { transform: translateY(-14px); }
  to { transform: translateY(14px); }
}

@keyframes lens-scan {
  0% { transform: translate(70px, 128px); }
  28% { transform: translate(150px, 84px); }
  52% { transform: translate(198px, 116px); }
  100% { transform: translate(198px, 116px); }
}

@keyframes check-pop {
  0%, 54% { opacity: 0; transform: scale(0); }
  62% { opacity: 1; transform: scale(1); }
  92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.6); }
}

@keyframes phone-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.6deg); }
}

@keyframes frame-breathe {
  0%, 100% { opacity: 0.55; transform: translate(0, 0); }
  50% { opacity: 1; transform: translate(calc(var(--fx, 1) * 6px), calc(var(--fy, 1) * 6px)); }
}

@keyframes toast {
  0% { opacity: 0; transform: translateY(-14px) scale(0.96); }
  8%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  80%, 100% { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

@keyframes bell {
  0%, 8%, 20%, 100% { transform: rotate(0deg); }
  11% { transform: rotate(16deg); }
  14% { transform: rotate(-14deg); }
  17% { transform: rotate(8deg); }
}

@keyframes travel-down {
  0% { opacity: 0; top: 34px; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; top: calc(100% - 60px); }
}

@keyframes stamp-loop {
  0%, 12% { opacity: 0; transform: scale(1.9); }
  24% { opacity: 1; transform: scale(1); }
  86% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes note-in {
  0%, 10% { opacity: 0; transform: translateY(-6px); }
  24%, 84% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.35); }
  30% { transform: scale(1); }
}

@keyframes box-fill {
  from { fill: rgba(255, 255, 255, 0.04); }
  to { fill: rgba(240, 188, 92, 0.16); }
}

@keyframes card-peek {
  0%, 100% { transform: translateY(26px); }
  45%, 62% { transform: translateY(-8px); }
}

@keyframes whoosh {
  0%, 30% { opacity: 0; transform: translateX(8px); }
  45% { opacity: 1; transform: translateX(0); }
  70%, 100% { opacity: 0; transform: translateX(-6px); }
}

/* Layout breakpoints */

@media (max-width: 1040px) {
  .landing-nav {
    display: none;
  }

  .landing-header__inner {
    grid-template-columns: 1fr auto;
  }

  .landing-hero__grid,
  .landing-mobile-preview__grid,
  .process-layout,
  .landing-controls__grid,
  .account-layout {
    grid-template-columns: 1fr;
  }

  .landing-hero__grid {
    grid-template-areas:
      "copy"
      "form"
      "more"
      "card";
  }

  .landing-hero__grid > .signup-card {
    margin-top: 32px;
  }

  .landing-hero__copy,
  .landing-mobile-preview__copy {
    max-width: 760px;
  }

  .postcard-proof {
    width: min(720px, 100%);
    margin-inline: auto;
  }

  .landing-hero__grid > .postcard-proof {
    margin-top: 48px;
  }

  .three-ways__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .process-layout__intro {
    position: static;
  }

  .process-list,
  .control-list {
    max-width: 760px;
  }

  .signup-card {
    width: min(520px, 100%);
  }

  .process-list li:first-child {
    padding-top: 0;
  }

  .process-list::before,
  .process-list::after {
    top: 30px;
  }

  .approved-stamp {
    display: none;
  }

  .lead-toast {
    right: -18%;
  }
}

@media (max-width: 760px) {
  .landing-container {
    width: min(100% - 32px, 1180px);
  }

  .landing-header__inner {
    gap: 14px;
    min-height: 68px;
  }

  .landing-header__actions {
    gap: 12px;
  }

  .landing-header__actions .landing-button {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 0.82rem;
  }

  .landing-signin {
    font-size: 0.82rem;
  }

  .landing-hero {
    padding-top: 44px;
  }

  .landing-mobile-preview {
    padding-block: 64px;
  }

  .landing-mobile-preview__grid {
    gap: 56px;
  }

  .phone-float {
    width: min(100%, 340px);
  }

  .phone-mockup-frame {
    height: 640px;
    border-width: 8px;
    border-radius: 32px;
  }

  .phone-mockup-screen {
    border-radius: 24px;
  }

  .lead-toast {
    top: auto;
    right: 50%;
    bottom: -26px;
    transform-origin: 50% 100%;
    translate: 50% 0;
  }

  .landing-hero h1 {
    font-size: clamp(3rem, 14vw, 4.4rem);
  }

  .landing-facts__grid {
    grid-template-columns: 1fr;
  }

  .landing-facts article {
    min-height: auto;
    padding-block: 30px 32px;
  }

  .landing-facts article + article {
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .postcard-proof__label {
    margin-inline: 0;
  }

  .landing-footer__inner {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: 28px;
  }
}

@media (max-width: 520px) {
  html {
    scroll-padding-top: 76px;
  }

  .landing-wordmark {
    font-size: 0.93rem;
  }

  .landing-hero {
    padding: 38px 0 calc(var(--street-height) + 12px);
  }

  .landing-hero h1 {
    font-size: clamp(2.9rem, 14.6vw, 3.9rem);
  }

  .landing-hero__lead {
    margin-top: 20px;
    font-size: 1.05rem;
  }

  .landing-proof-line {
    display: grid;
    gap: 6px;
  }

  .postcard-proof__label {
    font-size: 0.68rem;
  }

  .postcard-stack {
    aspect-ratio: 100 / 90;
  }

  .postcard-stack__card {
    width: 92%;
  }

  .card-note {
    bottom: -6%;
    font-size: 1.16rem;
  }

  .card-note__arrow {
    width: 36px;
  }

  .sample-stamp {
    width: 66px;
  }

  .qr-spot__tip {
    display: none;
  }

  .landing-section,
  .landing-controls,
  .three-ways {
    padding-block: 72px;
  }

  .three-ways__intro h2,
  .landing-section__intro h2,
  .landing-controls h2,
  .landing-mobile-preview__copy h2 {
    font-size: clamp(2.3rem, 11.5vw, 3.2rem);
  }

  .process-list li {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 18px;
  }

  .process-list__number {
    width: 50px;
    height: 50px;
  }

  .process-icon {
    width: 28px;
    height: 28px;
  }

  .process-list::before {
    left: 24px;
  }

  .process-list::after {
    left: 19px;
  }

  .control-list li {
    padding-left: 42px;
  }

  .platform-privacy__header .landing-text-link {
    font-size: 0.78rem;
  }

  .platform-legal {
    padding-block: 48px 64px;
  }

  .platform-legal__intro h1 {
    font-size: clamp(2.65rem, 14vw, 3.5rem);
  }

  .platform-legal__card {
    margin-top: 30px;
    padding: 24px 20px;
  }
}

@media (max-width: 360px) {
  .landing-header__inner {
    gap: 12px;
  }

  .landing-wordmark {
    font-size: 0.8rem;
  }

  .landing-hero {
    padding-top: 28px;
  }

  .landing-hero .landing-kicker {
    margin-bottom: 10px;
    font-size: 0.68rem;
  }

  .landing-hero h1 {
    max-width: none;
    font-size: 2.6rem;
  }

  .landing-hero__lead {
    margin-top: 16px;
    font-size: 0.96rem;
    line-height: 1.5;
  }

  .landing-proof-line {
    display: none;
  }
}

@media (hover: none) {
  .postcard-stack__card--back:hover {
    transform: rotate(4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .platform-landing *,
  .platform-landing *::before,
  .platform-landing *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal-ready [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
  }

  .landing-progress {
    display: none;
  }
}