/* Auspero site styles. One file, no build step.
   The motif: the slate square in the wordmark is a paver. It shows up as
   list markers, step stones, map and timeline nodes, and as a herringbone
   paver field on every black surface. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- Tokens ---------- */
/* How far a dark panel has opened (0 to 1). Registered so it does not cascade into
   everything inside the panel, which keeps scrolling cheap. */
@property --q { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  /* The palette: navy, slate, white, silver and black. Paper is the pure white of a
     raised card on the white page. */
  --white: #F4F4F5;
  --paper: #FFFFFF;
  --black: #0F0E11;
  --navy: #222A41;
  --navy-hover: #2F3A58;
  --slate: #596173;
  --silver: #C0C0C2;
  --line: rgba(15, 14, 17, 0.12);
  --line-on-ink: rgba(244, 244, 245, 0.14);

  /* 90 degree herringbone, 2:1 pavers. Drawn as hairlines, never as a gradient. */
  --paver-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 64 64'%3E%3Cpath d='M48 -16h16v32h-16zM48 16h32v16h-32zM32 0h16v32h-16zM48 48h16v32h-16zM32 32h32v16h-32zM16 16h16v32h-16zM0 0h32v16h-32zM16 48h32v16h-32zM0 32h16v32h-16zM-16 16h32v16h-32z' fill='none' stroke='%23F4F4F5' stroke-opacity='0.045' stroke-width='0.8'/%3E%3C/svg%3E");
  --paver-mini: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 64 64'%3E%3Cpath d='M48 -16h16v32h-16zM48 16h32v16h-32zM32 0h16v32h-16zM48 48h16v32h-16zM32 32h32v16h-32zM16 16h16v32h-16zM0 0h32v16h-32zM16 48h32v16h-32zM0 32h16v32h-16zM-16 16h32v16h-32z' fill='none' stroke='%23F4F4F5' stroke-opacity='0.16' stroke-width='1.45'/%3E%3C/svg%3E");

  /* Context colors. Dark surfaces swap these. */
  --fg: var(--black);
  --fg-muted: var(--slate);
  --accent-text: var(--navy);
  --focus: var(--navy);
  --rule: var(--line);

  --max: 1200px;
  --gutter: 24px;
  --pad: 24px;
  --section: 80px;
  --r-xl: 40px;
  --r-lg: 28px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pop: cubic-bezier(0.34, 1.45, 0.64, 1);
}

.dark {
  --fg: var(--white);
  --fg-muted: var(--silver);
  --accent-text: var(--silver);
  --focus: var(--white);
  --rule: var(--line-on-ink);
  color: var(--fg);
}


/* ---------- Base ---------- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
svg { flex: none; }
p { text-wrap: pretty; }

::selection { background: var(--slate); color: var(--white); }

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

[id] { scroll-margin-top: 16px; }

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

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 10;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 16px; }

.mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--slate);
  flex: none;
}

/* ---------- Grid ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-12 { grid-column: 1 / -1; }
.col-intro { grid-column: 2 / 12; }
.col-faq { grid-column: 3 / 11; }
.col-about-a { grid-column: 1 / 6; }
.col-about-b { grid-column: 7 / 13; }

/* ---------- Type ---------- */
.eyebrow {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 1.5px;
  background: var(--slate);
  vertical-align: 0.1em;
}

.h1 {
  font-size: clamp(48px, 7.4vw, 104px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.h1 > span { display: block; text-wrap: balance; }
.h1 .accent { color: var(--navy); }
/* Longer trade page headlines run a size smaller so they keep to three lines. */
.h1--long { font-size: clamp(44px, 6vw, 84px); }

.h2 {
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.payoff { color: var(--navy); }
.dark .payoff { color: inherit; }

.h3 {
  font-size: clamp(21px, 1.9vw, 25px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lede {
  margin-top: 24px;
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn { -webkit-tap-highlight-color: transparent; }
.btn--primary { background: var(--navy); color: var(--white); }
.dark .btn--primary { background: var(--white); color: var(--black); }
.btn--ink { background: var(--black); color: var(--white); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn--block { width: 100%; }

.link-chev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: none;
}
.link-chev .chev { transition: transform 0.2s ease; }

/* Hover effects only for a mouse or trackpad. On a phone a tapped element would keep its
   hover look until the next tap. */
@media (hover: hover) {
  .btn--primary:hover { background: var(--navy-hover); }
  .dark .btn--primary:hover { background: var(--paper); }
  .btn--ink:hover { background: #26262C; }
  .link-chev:hover { text-decoration: underline; text-underline-offset: 4px; }
  .link-chev:hover .chev { transform: translateX(3px); }
  .nav a:hover,
  .footer-col a:hover { color: var(--navy); }
  .faq-btn:hover { color: var(--navy); }
  .field input:hover { border-color: var(--silver); }
}

/* ---------- Header ---------- */
.site-header { padding-block: 14px; }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  min-height: 60px;
}

/* Logo lockup: the mark is 1.5 cap heights tall (cap = 0.697em), sits on the
   baseline, and is 0.6 cap heights from the wordmark. Same rule as brand/auspero-logo.svg. */
.wordmark {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.418em;
  padding-block: 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--black);
}

.nav { margin-inline: auto; }
.nav ul { display: flex; gap: 4px; list-style: none; }
.nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* Tap to call beside the free check button. Below 1100px the section links move into the
   menu below; on phones the header is just the logo and the menu button. */
.header-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.header-tel svg { color: var(--slate); }
.header-tel .todo { font-size: 13px; }

/* Menu: below 1100px, where the section links are hidden, a button in place of the free check
   button opens the trades and the section links. Without JavaScript the free check button stays. */
.site-header { position: relative; z-index: 30; }
.menu-btn,
.menu { display: none; }
.menu-btn {
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
}
.menu-icon { position: relative; display: block; width: 20px; height: 14px; }
.menu-icon > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.menu-icon > span:nth-child(1) { top: 0; }
.menu-icon > span:nth-child(2) { top: 6px; }
.menu-icon > span:nth-child(3) { top: 12px; }
.menu-btn[aria-expanded="true"] .menu-icon > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon > span:nth-child(2) { transform: scaleX(0); }
.menu-btn[aria-expanded="true"] .menu-icon > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu {
  position: absolute;
  top: calc(100% - 4px);
  left: var(--pad);
  right: var(--pad);
  gap: 24px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--black);
  color: var(--white);
  box-shadow: 0 24px 48px rgba(15, 14, 17, 0.28);
}
.menu-head { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--silver); }
.menu-trades { list-style: none; margin-top: -12px; }
.menu-trades a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line-on-ink);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.menu-trades .chev { color: var(--silver); }
.menu-links { display: grid; list-style: none; }
.menu-links a { display: flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 600; text-decoration: none; }
.menu a[aria-current="page"] { color: var(--silver); }

@media (max-width: 1099.98px) {
  .js .menu-btn { display: inline-grid; }
  .js .header-cta { display: none; }
  .menu:not([hidden]) { display: grid; }
}
@media (min-width: 640px) and (max-width: 1099.98px) {
  .menu { left: auto; width: 400px; }
}
@media (prefers-reduced-motion: no-preference) {
  .menu-icon > span { transition: transform 0.25s var(--ease); }
  .menu:not([hidden]) { animation: drop 0.3s var(--ease); }
}

/* ---------- Sections ---------- */
/* --surface is the light tone that stands out on a section: pure white cards on the white
   page, off-white cards on the pure white sections. */
.section { padding-block: var(--section); --surface: var(--paper); }
.section--cream { background: var(--paper); --surface: var(--white); }
.section--ink { background: var(--black) var(--paver-field) center top; }

.intro { text-align: center; margin-bottom: 48px; }

/* ---------- Hero ---------- */
.hero { padding-block: 64px 64px; }

.hero-copy { grid-column: 2 / 12; text-align: center; }
.hero-copy .eyebrow { margin-bottom: 26px; }

.hero-sub {
  max-width: 34em;
  margin: 32px auto 0;
  font-size: clamp(19px, 1.65vw, 23px);
  line-height: 1.45;
  color: var(--fg-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 32px;
  margin-top: 40px;
}

.hero-note {
  margin-top: 28px;
  font-size: 15px;
  color: var(--fg-muted);
}
.hero-note .mark { width: 8px; height: 8px; margin-right: 10px; vertical-align: 0.1em; }
/* The pulse is a copy of the square that grows and fades. Scale and opacity run on the
   graphics chip; an animated shadow would repaint on every frame, forever. */
.hero-note .mark { position: relative; }
.motion .hero-note .mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  /* A few pulses to catch the eye, then it rests, so an idle page costs the phone nothing. */
  animation: beacon 2.8s var(--ease) 4;
}

@keyframes beacon {
  0% { opacity: 0.6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(3.25); }
}

/* ---------- Phone demo ---------- */
/* The panel spans the page but is clipped to the grid with rounded top corners. As it
   scrolls up, the script raises --q from 0 to 1 and the panel opens out to the full screen. */
.story,
.showcase {
  --inset: max(var(--pad), (100% - var(--max)) / 2);
  --open: calc(1 - var(--q, 0));
  margin-top: 56px;
  padding-top: 112px;
  /* Centered and bottom anchored so the pavers run on unbroken into the section below. */
  background: var(--black) var(--paver-field) center bottom;
  clip-path: inset(0 calc(var(--inset) * var(--open)) round calc(var(--r-xl) * var(--open)) calc(var(--r-xl) * var(--open)) 0 0);
}
.demo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding-block: 96px 40px;
}

.legend { grid-column: 2 / 5; list-style: none; }
.legend li {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 18px;
  padding-bottom: 30px;
  transition: opacity 0.4s ease;
}
.legend li:last-child { padding-bottom: 0; }
.legend li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 24px;
  bottom: 6px;
  width: 1px;
  background: var(--line-on-ink);
}
.legend-mark {
  grid-row: 1 / 3;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border: 1.5px solid var(--slate);
  border-radius: 3px;
  background: var(--slate);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
.legend-k { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--silver); }
.legend-v { margin-top: 2px; font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--white); }

.stage {
  grid-column: 5 / 9;
  justify-self: center;
  position: relative;
  width: 100%;
  max-width: 340px;
}

.phone {
  padding: 11px;
  border-radius: 54px;
  background: #050507;
  box-shadow: 0 0 0 1px rgba(244, 244, 245, 0.14), 0 40px 80px rgba(0, 0, 0, 0.4);
}

.screen {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 12px 14px 16px;
  border-radius: 44px;
  background: var(--paper);
  color: var(--black);
}

.island {
  width: 92px;
  height: 26px;
  margin: 2px auto 16px;
  border-radius: 999px;
  background: #050507;
}

.thread-head {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--white);
  color: var(--slate);
}
.thread-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.thread-sub { font-size: 12.5px; color: var(--slate); line-height: 1.3; }

.thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 2px 20px;
  font-size: 15px;
  line-height: 1.38;
}

.sys {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
}
.sys svg { color: var(--navy); }

.meta { font-size: 12.5px; color: var(--slate); }
.meta--out { align-self: flex-end; margin-right: 6px; }

.bubble { position: relative; max-width: 84%; padding: 10px 14px; }
.bubble--out {
  align-self: flex-end;
  border-radius: 20px 20px 6px 20px;
  background: var(--black);
  color: var(--white);
}
.bubble--in {
  align-self: flex-start;
  margin-block: 6px;
  border-radius: 20px 20px 20px 6px;
  background: var(--white);
}

.dots {
  position: absolute;
  bottom: 0;
  display: flex;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.bubble--out .dots { right: 0; background: var(--black); }
.bubble--in .dots { left: 0; background: var(--white); }
.dots i { width: 7px; height: 7px; border-radius: 50%; }
.bubble--out .dots i { background: var(--white); }
.bubble--in .dots i { background: var(--slate); }
.bubble.typing .dots { opacity: 1; }
.bubble.typing .dots i { animation: dot 1s ease-in-out infinite; }
.bubble.typing .dots i:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing .dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes dot {
  0%, 80%, 100% { opacity: 0.35; transform: none; }
  40% { opacity: 1; transform: translateY(-2px); }
}

.composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--slate);
}
.composer i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy);
}

.alert {
  position: absolute;
  left: calc(100% - 28px);
  bottom: 120px;
  width: 270px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 22px;
  background: var(--slate);
  color: var(--white);
  font-size: 15px;
  line-height: 1.38;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
}
.alert-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--white);
}

/* Conversations: once armed, each line waits for its turn: in the phone story, its point in
   the scroll; in the system cards and on the service phones, its moment after the card comes
   into view. Every line keeps its space while it waits. Without the script, all of it shows. */
.is-armed [data-seq] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background-color 0.35s ease, color 0.35s ease;
}
.is-armed [data-seq].in { opacity: 1; transform: none; }
.is-armed .bubble[data-seq] { opacity: 1; transform: none; }
.is-armed .bubble[data-seq]:not(.in) { background-color: transparent; color: transparent; }
.is-armed .bubble[data-seq]:not(.in) .review-link { opacity: 0; }
.is-armed .alert[data-seq]:not(.in) { transform: translate(16px, 10px) scale(0.97); }

.demo-cap { grid-column: 1 / -1; margin-top: 56px; font-size: 15px; color: var(--silver); text-align: center; }

.story .title-card,
.showcase .title-card { margin-bottom: 0; }
/* The pinned story: the frame holds still while the thread plays out with the scroll.
   The script turns it on only when motion is allowed and the screen is tall enough. */
.is-story .story-track { height: 280vh; height: 280svh; }
.is-story .demo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  align-content: center;
  padding-block: 32px;
}
.is-story .demo-cap { margin-top: 32px; }

@media (min-width: 1100px) {
  .is-armed .legend li { opacity: 0.3; transition: opacity 0.3s ease; }
  .is-armed .legend li.on { opacity: 0.6; }
  .is-armed .legend li.current,
  .is-armed .legend li[data-step="4"].on { opacity: 1; }
  .is-armed .legend li:not(.on) .legend-mark { border-color: var(--silver); background: transparent; }
}

/* ---------- Problem ---------- */
.problem { padding-top: var(--section); }
.problem .dim { color: inherit; }
.problem .h2 { font-size: clamp(36px, 4.4vw, 60px); }

/* ---------- Section headlines ----------
   Every section opens on its headline. When the script runs, the headline holds still in
   the middle of the screen while its label pops in and its words rise and light up with
   the scroll, then the section follows. Until the first scroll every word is fully lit,
   and a section reached from a link shows its headline complete. */
.title-card { grid-column: 1 / -1; margin-bottom: 32px; }
.title-card .intro { margin-bottom: 0; }
/* How long each headline holds, in screen heights. Given as content because a sticky
   element cannot move into its parent's padding. */
.title-card { --hold: 0.45; }
.title-card--long { --hold: 0.9; }
.title-card.is-scrub::after { content: ""; display: block; height: calc(var(--hold) * 100vh); height: calc(var(--hold) * 100svh); }
.is-scrub > [data-title] { position: sticky; top: 30vh; }
.is-scrub .w {
  --k: calc((var(--n) + 3) / 0.85);
  --w: clamp(0, (var(--p, 1) * var(--k) - var(--i)) / 3, 1);
  display: inline-block;
  opacity: calc(0.14 + 0.86 * var(--w));
  transform: translateY(calc((1 - var(--w)) * 0.32em));
  transition: opacity 0.15s linear, transform 0.15s linear;
}
.is-scrub .eyebrow {
  --e: clamp(0, var(--p, 1) * 8, 1);
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * 14px));
  transition: opacity 0.2s linear, transform 0.2s linear;
}
/* A finger scrolls continuously, so the words need no smoothing between scroll steps. */
@media (pointer: coarse) {
  .is-scrub .w,
  .is-scrub .eyebrow { transition: none; }
}
/* The About headline rides down beside its text while its words light up. */
.about .is-scrub > [data-title] { align-self: start; }

.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: 24px;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.point { position: relative; padding-top: 40px; }
.point::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 2.5px;
  background: var(--slate);
}
.point-num {
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.point p:last-child { margin-top: 12px; color: var(--fg-muted); }

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

/* ---------- A low risk start (septic page) ---------- */
.start {
  padding: 56px 64px;
  border-radius: var(--r-xl);
  background: var(--black) var(--paver-field);
  text-align: center;
}
.start .lede { max-width: 34em; margin-inline: auto; }

/* ---------- Built for your trade (under the hero) ---------- */
.trade-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 12px;
  margin-top: 36px;
}
.trade-row-label { width: 100%; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--slate); }
.trade-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- One system, three jobs ---------- */
.system-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.part {
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  border-radius: var(--r-lg);
  background: var(--black) var(--paver-field);
}
.part-num { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--silver); }
.part-title { margin-top: 10px; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.part-text { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--fg-muted); }
/* Each card's services are buttons, so it is clear they open the pages that show each one working. */
.part-links { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 10px; margin-top: 18px; }
.part-links .link-chev {
  gap: 10px;
  padding: 0 18px;
  border: 1.5px solid rgba(244, 244, 245, 0.45);
  border-radius: 999px;
  font-size: 15px;
  color: var(--white);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
  .part-links .link-chev:hover { border-color: var(--white); background: var(--white); color: var(--black); text-decoration: none; }
}
/* The three pictures are frames of one height with their content centered in them, so the
   cards look balanced side by side. On phones each frame fits its content. */
.part-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: auto;
  min-height: 400px;
  padding: 20px 16px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--black);
}
.part .part-links { margin-bottom: 24px; }

/* On desktop the three cards share rows (subgrid), so the labels, titles, text, links and
   pictures line up across all three, and the pictures grow together to fit the longest
   conversation. */
@media (min-width: 1100px) {
  .system-row { grid-template-rows: repeat(5, auto); }
  .part { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .part-visual { margin-top: 0; }
}

/* Part 1: a map search with your business at the top of the results. */
.v-search { gap: 10px; }
.v-search .map-query { position: static; align-self: flex-start; padding: 8px 14px; font-size: 13px; box-shadow: none; }
.v-search .map { border-radius: 12px; }
.result { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--white); }
.result--you { box-shadow: inset 0 0 0 1.5px var(--slate); }
.result-mark { width: 28px; height: 28px; flex: none; border-radius: 7px; background: rgba(15, 14, 17, 0.1); }
.result--you .result-mark { background: var(--slate); }
.result b { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; }
.result small { display: block; font-size: 12.5px; color: var(--slate); }
.result i { display: block; width: 120px; height: 8px; border-radius: 4px; background: rgba(15, 14, 17, 0.1); }
.result i + i { width: 76px; margin-top: 7px; }
.result-call { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 12.5px; font-weight: 700; }

/* Part 2: the missed call conversation. */
.v-chat { gap: 8px; font-size: 14px; line-height: 1.38; }
.v-chat .sys { margin-bottom: 4px; font-size: 12.5px; }
.v-chat .bubble { padding: 9px 13px; }
.alert.alert--inline {
  position: static;
  width: auto;
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  box-shadow: none;
}
.alert--inline .alert-icon { width: 30px; height: 30px; border-radius: 9px; }

/* The four steps under the conversation light up as it plays. At rest all four are lit. */
.call-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  list-style: none;
  counter-reset: step;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
.call-steps li { display: flex; align-items: flex-start; gap: 8px; }
.call-steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--navy);
  color: var(--white);
  font-size: 11px;
}
.is-armed .call-steps li,
.is-armed .call-steps li::before { transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
.is-armed .call-steps li:not(.on) { opacity: 0.45; }
.is-armed .call-steps li:not(.on)::before { background: rgba(15, 14, 17, 0.14); color: var(--slate); }

/* Part 3: the texts that bring people back. */
.v-msgs { gap: 12px; list-style: none; }
.msg-label { display: block; margin: 0 0 4px 4px; font-size: 12px; font-weight: 700; color: var(--slate); }
.msg-text { display: block; padding: 10px 14px; border-radius: 16px 16px 16px 6px; background: var(--white); font-size: 14px; line-height: 1.38; }
.msg--reply { align-self: flex-end; max-width: 80%; }
.msg--reply .msg-text { border-radius: 16px 16px 6px 16px; background: var(--navy); color: var(--white); }

/* ---------- Bento cards ---------- */
.card {
  display: flex;
  flex-direction: column;
  min-height: 480px;
  padding: 44px;
  border-radius: var(--r-lg);
  background: var(--surface, var(--paper));
  overflow: hidden;
}
.card--ink { background: var(--black); }
.card--navy { background: var(--navy); }

.card-label {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-text);
}
.card-title {
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.card-text {
  max-width: 30em;
  margin-top: 16px;
  color: var(--fg-muted);
}
.card-visual { margin-top: auto; padding-top: 40px; }

/* Website card */
.mock-site {
  max-width: 440px;
  padding: 18px 18px 22px;
  border-radius: 20px;
  background: var(--navy);
  box-shadow: 0 0 0 1px rgba(244, 244, 245, 0.08);
}
.ms-bar { display: flex; align-items: center; justify-content: space-between; }
.ms-logo { width: 84px; height: 10px; border-radius: 4px; background: rgba(244, 244, 245, 0.4); }
.ms-call {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--slate);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}
.ms-photo {
  height: 96px;
  margin-top: 18px;
  border-radius: 12px;
  background: var(--black) var(--paver-mini);
}
.ms-line {
  display: block;
  width: 80%;
  height: 12px;
  margin-top: 18px;
  border-radius: 6px;
  background: rgba(244, 244, 245, 0.24);
}
.ms-line--short { width: 54%; margin-top: 10px; }
.ms-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ms-btn {
  padding: 7px 13px;
  border: 1px solid rgba(244, 244, 245, 0.32);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.ms-btn--fill { border-color: var(--white); background: var(--white); color: var(--black); }

/* Maps card */
.mock-map { position: relative; max-width: 420px; }
.map { display: block; width: 100%; height: auto; }
.map-query {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 10px 24px rgba(15, 14, 17, 0.18);
}
.map-typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }


/* Ads card */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--white);
  font-size: 16px;
  font-weight: 700;
}
.flow-arrow { color: var(--navy); }

/* Missed call card */
.card--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
}
.dial-wrap { display: grid; justify-items: center; gap: 14px; align-self: end; }
.dial { position: relative; width: 196px; height: 196px; }
.dial svg { display: block; width: 100%; height: 100%; }
.dial-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 58px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.dial-num span { margin-right: 3px; font-size: 84px; line-height: 0.82; letter-spacing: -0.06em; }
.dial-cap { font-size: 15px; font-weight: 700; }

/* Reviews card */
.mock-review { max-width: 400px; }
.mr-meta { margin: 0 0 8px 6px; font-size: 13px; font-weight: 600; color: var(--slate); }
.mr-bubble {
  padding: 14px 16px;
  border-radius: 20px 20px 20px 6px;
  background: var(--white);
  font-size: 15px;
  line-height: 1.4;
}
.mr-link {
  display: block;
  width: fit-content;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

/* Reporting card */
.mock-report {
  max-width: 400px;
  padding: 18px 20px 8px;
  border-radius: 18px;
  background: var(--white);
}
.mrp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.mrp-head .mark { width: 8px; height: 8px; }
.mrp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}
.mrp-head + .mrp-row { border-top: 0; }
.mrp-row i { width: 64px; height: 10px; border-radius: 4px; background: rgba(15, 14, 17, 0.14); }

/* ---------- Why ---------- */
.reason-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 24px;
  border-radius: 14px;
  background: var(--surface, var(--white));
  color: var(--navy);
}
.reason p { margin-top: 12px; color: var(--fg-muted); }

/* ---------- How it works: stepping stones ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  list-style: none;
}
.step { position: relative; display: flex; flex-direction: column; }
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 60px;
  right: -12px;
  border-top: 2px dashed rgba(15, 14, 17, 0.22);
}
.stone {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--black);
  color: var(--white);
  font-size: 19px;
  font-weight: 800;
}
.stone--slate { background: var(--slate); color: var(--white); }
.step-card {
  flex: 1;
  margin-top: 20px;
  padding: 32px 28px 36px;
  border-radius: var(--r-lg);
  background: var(--surface, var(--paper));
}
.step-card p { margin-top: 12px; color: var(--fg-muted); }

.expect {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 40px;
  margin-top: 24px;
  padding-block: 72px;
  border-radius: var(--r-lg);
  background: var(--black);
}
.expect-head { grid-column: 2 / 6; }
.expect-title {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.expect-head p { margin-top: 16px; color: var(--fg-muted); }
.expect-list { grid-column: 7 / 12; }
.expect-list > div {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 24px;
  padding-block: 24px;
  border-top: 1px solid var(--rule);
}
.expect-list > div:first-child { padding-top: 0; border-top: 0; }
.expect-list > div:last-child { padding-bottom: 0; }
.expect-list dt { font-weight: 700; color: var(--accent-text); }

/* ---------- Packages ---------- */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 32px 36px;
  border-radius: var(--r-lg);
  background: var(--surface, var(--white));
}
.plan--featured { background: var(--black); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }

.plan-name {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.plan-for { min-height: 3.1em; margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--fg-muted); }
.price { display: flex; align-items: baseline; gap: 4px; margin-top: 18px; }
.price .amt {
  font-size: clamp(52px, 4.8vw, 66px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.045em;
}
.price .per { font-size: 18px; font-weight: 600; color: var(--fg-muted); }
.plan .btn { margin-top: 22px; }

/* Under the price, how this package compares with the one before it. */
.plan-step { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--accent-text); }
/* What the list is: the whole package, or what it adds to the one before. */
.features-lead {
  margin-top: 24px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(34, 42, 65, 0.08);
  font-size: 16px;
  font-weight: 800;
}
.dark .features-lead { background: rgba(244, 244, 245, 0.12); }
.features {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.features-lead + .features { margin-top: 14px; padding-top: 0; border-top: 0; }
.features li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  font-size: 17px;
  line-height: 1.45;
}
.features svg { margin-top: 2px; color: var(--accent-text); }

/* The three packages lined up: what every package has, then what Growth adds, then what Full
   system adds. The Growth column is tinted, as its card is picked out above. */
/* Closed by default: a button under the cards opens the table in place. */
.compare-wrap { margin-top: 40px; text-align: center; interpolate-size: allow-keywords; }
.compare-toggle {
  border: 1.5px solid var(--black);
  background: transparent;
  color: var(--black);
  list-style: none;
  user-select: none;
}
.compare-toggle::-webkit-details-marker { display: none; }
.compare-toggle svg { transition: transform 0.25s var(--ease); }
.compare-wrap[open] .compare-toggle svg { transform: rotate(180deg); }
.compare-hide,
.compare-wrap[open] .compare-show { display: none; }
.compare-wrap[open] .compare-hide { display: inline; }
@media (hover: hover) {
  .compare-toggle:hover { background: var(--black); color: var(--white); }
}
/* Opens smoothly in browsers that can animate to the table's height; instantly elsewhere,
   and always instantly for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .compare-wrap::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.25s var(--ease), content-visibility 0.25s allow-discrete;
  }
  .compare-wrap[open]::details-content { height: auto; }
}
.compare {
  width: 100%;
  max-width: 960px;
  margin: 24px auto 0;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border-radius: var(--r-lg);
  background: var(--surface, var(--white));
  overflow: hidden;
}
.compare-feature { width: 46%; }
.compare th,
.compare td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { padding-block: 22px 16px; font-size: 18px; font-weight: 800; line-height: 1.2; text-align: center; }
.compare thead th span { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--fg-muted); }
.compare tbody th[scope="row"] { font-size: 16px; font-weight: 600; line-height: 1.35; text-align: left; }
.compare td { text-align: center; }
.compare td svg { display: inline-block; vertical-align: middle; }
.compare tr > :nth-child(3) { background: rgba(34, 42, 65, 0.07); }
.compare-group th { padding: 22px 16px 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--slate); text-align: left; }
.mark-yes { color: var(--navy); }
.mark-no { color: rgba(15, 14, 17, 0.52); }
.mark-issue { color: var(--slate); }

.plans-note {
  margin-top: 16px;
  text-align: center;
  color: var(--fg-muted);
}

.founding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 32px;
  align-items: center;
  margin-top: 8px;
  padding: 22px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface, var(--white));
}
.founding-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.founding-text { color: var(--fg-muted); font-size: 17px; }

/* ---------- Plain terms and privacy policy ---------- */
.doc-page { padding-top: 48px; }
.doc-head .eyebrow { margin-bottom: 14px; }
.h1.doc-title { font-size: clamp(40px, 5.2vw, 68px); }
.doc-head .lede { margin-top: 16px; }
.doc-updated { margin-top: 14px; font-size: 15px; color: var(--fg-muted); }
.doc { max-width: 44em; margin-top: 40px; }
.doc h2 { margin-top: 44px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.doc h2:first-child { margin-top: 0; }
.doc p,
.doc ul { margin-top: 14px; font-size: 18px; line-height: 1.6; }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc a[href^="tel:"] { white-space: nowrap; }
/* The [CONFIRM: ...] placeholders in the terms are long, so they wrap like text. */
.doc .todo { display: inline; white-space: normal; padding: 1px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.doc-note { margin-top: 48px; padding: 18px 22px; border-radius: 16px; background: var(--surface, var(--paper)); font-weight: 700; }

/* ---------- Sample free check report ---------- */
.col-report { grid-column: 2 / 12; }
.report { padding-top: 48px; }
.report-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--navy);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.report-banner svg { flex: none; margin-top: 2px; }
.report-head { margin-top: 40px; }
.report-head .eyebrow { margin-bottom: 14px; }
.h1.report-title { font-size: clamp(40px, 5.2vw, 68px); }
.report-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.report-meta dt { font-size: 13px; font-weight: 700; color: var(--slate); }
.report-meta dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
.report-card {
  margin-top: 24px;
  padding: 36px 40px 40px;
  border-radius: var(--r-lg);
  background: var(--surface, var(--paper));
}
.report-card--do { background: var(--navy); }
.report-label { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--accent-text); }
.report-card h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.report-h3 { margin-top: 24px; font-size: 18px; font-weight: 800; }
.report-text { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--fg-muted); }
.report-text strong { color: var(--fg); }
.report-small { margin-top: 14px; font-size: 14px; color: var(--fg-muted); }
.report-list { display: grid; gap: 14px; margin-top: 20px; list-style: none; }
.report-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; font-size: 17px; line-height: 1.5; }
.report-list svg { margin-top: 2px; }
.report-card--do .report-list svg { color: var(--silver); }
.report-table {
  width: 100%;
  margin-top: 20px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 16px;
}
.report-table th,
.report-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.report-table thead th { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--slate); }
.report-table thead th:first-child,
.report-table tbody th { text-align: left; }
.report-table tbody th { width: 30%; font-weight: 700; }
.report-table td svg { display: inline-block; vertical-align: middle; }
.report-table .is-you > * { background: rgba(34, 42, 65, 0.07); font-weight: 800; }
.report-timeline { display: grid; gap: 12px; margin-top: 12px; padding-left: 18px; border-left: 2px solid var(--line); list-style: none; }
.report-timeline li { position: relative; font-size: 17px; line-height: 1.5; }
.report-timeline li::before { content: ""; position: absolute; top: 0.6em; left: -24px; width: 10px; height: 10px; border-radius: 3px; background: var(--slate); }
.report-time { display: block; font-size: 13px; font-weight: 700; color: var(--slate); }
.report-fixes { display: grid; gap: 16px; margin-top: 20px; list-style: none; }
.report-fixes li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; font-size: 17px; font-weight: 600; line-height: 1.45; }
.report-cta { margin-top: 28px; }
.report-note { margin-top: 24px; font-size: 15px; line-height: 1.55; color: var(--fg-muted); }
.report-note strong { color: var(--fg); }
.sample-link { margin-top: 12px; }
.step-link { margin-top: 12px; align-self: flex-start; }

/* ---------- About ---------- */
/* The headline rides down beside the text while its words light up. */
.about-body { padding-top: 24px; }
/* The founder photo, square with the cards' rounded corners. Until the photo exists, the build
   puts the initial in a circle in its place. */
.about-photo { display: block; width: 168px; height: 168px; margin-bottom: 32px; border-radius: 50%; object-fit: cover; }
.about-photo--placeholder { display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 68px; font-weight: 800; line-height: 1; }
.about-video { margin-top: 16px; }
.form-booking { margin-top: 4px; text-align: center; }
.about-body p { font-size: 19px; line-height: 1.6; }
.about-body p + p { margin-top: 24px; }
.about-body .signature {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  font-size: 18px;
  font-weight: 700;
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { font-size: inherit; }
.faq-btn {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
}
.faq-icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: var(--surface, var(--white));
  transition: background-color 0.2s ease;
}
.faq-btn[aria-expanded="true"] .faq-icon { background: var(--navy); }
.faq-btn[aria-expanded="true"] .faq-icon::before,
.faq-btn[aria-expanded="true"] .faq-icon::after { background: var(--white); }
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: var(--black);
  transition: transform 0.25s var(--ease);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-btn[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }
.faq-panel { max-width: 40em; padding: 0 56px 28px 0; color: var(--fg-muted); }

/* ---------- Free check ---------- */
.cta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 48px;
  align-items: start;
  padding-block: 56px;
  border-radius: var(--r-xl);
  background: var(--black) var(--paver-field);
}
.cta-copy { grid-column: 2 / 7; }
.cta .h2 { font-size: clamp(32px, 3.6vw, 52px); }
.contact-line { margin-top: 32px; color: var(--fg-muted); line-height: 2; }
.contact-line a { display: inline-block; padding-block: 6px; line-height: 1.6; overflow-wrap: anywhere; }

.todo {
  display: inline-block;
  padding: 0 8px;
  border: 1.5px dashed currentColor;
  border-radius: 8px;
  color: var(--accent-text);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.field { display: grid; gap: 8px; }
.field + .field { margin-top: 14px; }
.field label { font-size: 15px; font-weight: 600; }
/* The consent line under the phone field: small, and not a required checkbox. */
.field-note { font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); }
.field-note a { white-space: nowrap; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.field input,
.field select {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(192, 192, 194, 0.55);
  border-radius: 14px;
  background: var(--navy);
  color: var(--white);
  font: inherit;
  font-size: 17px;
}
.field select {
  appearance: none;
  padding-right: 44px;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F4F4F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 14px 8px;
}
.field input:focus-visible,
.field select:focus-visible { outline-offset: 2px; border-color: transparent; }
.field [aria-invalid="true"] { border-color: var(--white); box-shadow: 0 0 0 1px var(--white); }
.optional { font-weight: 400; color: var(--fg-muted); }
.cta-side { grid-column: 8 / 12; }
/* The honeypot: off screen for people, still in the page for bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cta-form .btn { margin-top: 22px; }
.btn.is-busy { cursor: progress; opacity: 0.85; }
.btn.is-busy::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-status { min-height: 1.5em; margin-top: 14px; font-size: 15px; color: var(--silver); }
.form-error { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--white); }
.form-done {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--navy);
  font-size: 19px;
  line-height: 1.5;
}
.form-done[hidden] { display: none; }
.form-done:focus { outline: none; }
.form-done-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--white); color: var(--black); }
.form-done a,
.form-error a { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.form-done-alt { grid-column: 2; display: grid; gap: 10px; font-size: 16px; color: var(--silver); }
.form-done-details { padding: 12px 14px; border-radius: 10px; background: rgb(0 0 0 / 0.25); color: var(--white); white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 859.98px) {
  .form-done { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .form-done-alt { grid-column: auto; }
}

/* ---------- Service pages ---------- */
.showcase { padding-bottom: 112px; }
.showcase-stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding-top: 72px;
}
.callouts { display: grid; gap: 44px; list-style: none; }
.callouts--left { grid-column: 1 / 5; }
.callouts--right { grid-column: 9 / 13; }
.callout { position: relative; padding-left: 32px; }
.callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--slate);
}
.callout h3 { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.callout p { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--fg-muted); }
/* The left callouts face the phone. */
.callouts--left { text-align: right; }
.callouts--left .callout { padding: 0 32px 0 0; }
.callouts--left .callout::before { left: auto; right: 0; }
.device { grid-column: 5 / 9; justify-self: center; width: 100%; max-width: 320px; }

/* A contractor's website on a phone. It builds itself when it comes into view. */
.site-screen { background: var(--navy); color: var(--white); }
.site-screen .ms-photo { height: 150px; }
.site-screen > :nth-last-child(2) { margin-bottom: 18px; }
.ms-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.ms-tiles i { height: 56px; border-radius: 10px; background: rgba(244, 244, 245, 0.1); }
.ms-callbar {
  margin-top: auto;
  padding: 13px;
  border-radius: 16px;
  background: var(--white);
  color: var(--black);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.play .build-in > :not(.island) { animation: rise-in 0.6s var(--ease) both; animation-delay: calc(var(--s, 0) * 120ms + 150ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }

/* Google Maps on a phone: the search types itself and the pin drops. */
.mock-map--phone { max-width: none; margin-top: 4px; }
.mock-map--phone .map-query { position: static; margin-bottom: 12px; }
.listing { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-inline: 4px; }
.listing i { width: 30px; height: 30px; flex: none; border-radius: 8px; background: rgba(15, 14, 17, 0.08); }
.listing span { display: grid; flex: 1; gap: 7px; }
.listing b { display: block; height: 8px; border-radius: 4px; background: rgba(15, 14, 17, 0.1); }
.listing b + b { width: 58%; }
.biz { margin-top: auto; padding: 16px; border-radius: 20px; background: var(--white); }
.biz-head { display: flex; align-items: center; gap: 12px; }
.biz-logo { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--slate); }
.biz-name { display: block; font-size: 16px; font-weight: 800; line-height: 1.25; }
.biz-sub { display: block; font-size: 13px; color: var(--slate); }
.biz-line { width: 70%; margin-top: 14px; background: rgba(15, 14, 17, 0.1); }
.biz-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.biz-chip { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.biz-chip--fill { border-color: var(--navy); background: var(--navy); color: var(--white); }

/* The rest of the system: the other four services, two by two. */
.others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.review-link { display: block; width: fit-content; margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: var(--white); color: var(--black); font-size: 13px; font-weight: 700; }

/* Three steps, a problem section with only its statement, and cards that lead on. */
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.problem--short .title-card { margin-bottom: 0; }
.card--link { min-height: 0; }
.card-link { margin-top: 20px; align-self: flex-start; }
.plans-note .link-chev { margin-left: 4px; }

/* ---------- Call bar (phones) ----------
   Fixed to the bottom on phones. The body gets matching room at the bottom so the bar never
   sits over the end of the page, and the script tucks it away while the free check form or
   the footer is on screen. */
.callbar { display: none; }

/* ---------- Footer ---------- */
.site-footer { overflow: hidden; }
.site-footer .wrap { container-type: inline-size; }
.footer-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--gutter);
  align-items: start;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.footer-brand { grid-column: 1 / 4; }
.footer-line { max-width: 24em; margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--slate); }
.footer-col--services { grid-column: 5 / 8; }
.footer-col--more { grid-column: 8 / 10; }
.footer-col--contact { grid-column: 10 / 13; }
@media (min-width: 860px) and (max-width: 1099.98px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-col--services { grid-column: 1 / 5; }
  .footer-col--more { grid-column: 5 / 9; }
  .footer-col--contact { grid-column: 9 / 13; }
}
.footer-head { margin: 10px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--slate); }
.footer-head ~ .footer-head { margin-top: 20px; }
.footer-col ul { list-style: none; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; font-weight: 600; text-decoration: none; }
.footer-col a[aria-current="page"] { color: var(--slate); }
.footer-note { padding-top: 8px; font-size: 15px; color: var(--slate); }
.footer-copy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; font-size: 15px; color: var(--slate); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a[aria-current="page"] { color: var(--black); }

/* The wordmark again, as wide as the grid and sitting on the bottom edge of the page.
   Measured: the letters are 4.06em wide and the caps 0.716em tall, so 23.4% of the
   column fills it, and a 0.8 line height leaves the baseline 0.03em above the box. */
.footer-giant {
  display: flex;
  align-items: baseline;
  gap: 0.418em;
  margin: 48px 0 -0.03em;
  font-size: 15.6cqi;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: 0.08em;
  color: var(--black);
  white-space: nowrap;
  user-select: none;
}
.logo-mark { flex: none; width: 1.0455em; height: 1.0455em; }

/* ---------- Motion (only when motion is allowed) ----------
   Nothing below hides anything at rest. The hero plays once on load; everything else is
   given .pre by the script on the first scroll if it is still below the screen, and loses
   it as it arrives. */

/* Hero: the headline pops in a word at a time, then the rest follows. */
.motion .h1 .w { display: inline-block; animation: word-in 0.9s var(--pop) backwards; animation-delay: calc(120ms + var(--i) * 75ms); }
.motion .hero-copy > .eyebrow,
.motion .hero-sub,
.motion .hero .actions,
.motion .hero-note,
.motion .hero .trade-row,
.motion .story,
.motion .showcase { animation: rise 0.9s var(--ease) backwards; }
.motion .hero-sub { animation-delay: 0.8s; }
.motion .hero .actions { animation-delay: 0.92s; }
.motion .hero-note { animation-delay: 1.04s; }
.motion .hero .trade-row { animation-delay: 1.12s; }
.motion .story,
.motion .showcase { animation-delay: 1.16s; }

@keyframes word-in { from { opacity: 0; transform: translateY(0.5em); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* Blocks rise in, staggered when several arrive together. */
.motion [data-reveal] {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.pre[data-reveal] { opacity: 0; transform: translateY(48px) scale(0.98); }

/* Headlines that pop in with their block: the label first, then the words one after another. */
.motion [data-words] > * { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(260ms + var(--n, 0) * 60ms); }
.motion [data-words] > .eyebrow { transition-delay: 0s; }
.motion [data-words] > .h2,
.motion [data-words] > .expect-title { transition: none; }
.motion [data-words] .w {
  display: inline-block;
  transition: opacity 0.5s ease, transform 0.8s var(--pop);
  transition-delay: calc(140ms + var(--i) * 60ms);
}
.pre[data-words] > :not(.h2):not(.expect-title) { opacity: 0; transform: translateY(18px); }
.pre[data-words] .w { opacity: 0; transform: translateY(0.55em); }

/* A section reached from a link skips its fade. */
.instant,
.instant * { transition: none !important; }

/* Small set pieces that arrive with their block. */
.motion .point::before { transition: transform 0.6s var(--pop) calc(var(--d, 0) * 110ms + 0.3s); }
.pre.point::before { transform: scale(0); }

.motion .stone { transition: transform 0.6s var(--pop), opacity 0.3s ease; transition-delay: calc(var(--d, 0) * 110ms + 0.25s); }
.pre .stone { opacity: 0; transform: scale(0.3); }
.motion .step::after { transform-origin: left center; transition: transform 0.7s var(--ease) calc(var(--d, 0) * 110ms + 0.45s); }
.pre.step::after { transform: scaleX(0); }

.motion .expect-list > div { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.motion .expect-list > div:nth-child(1) { transition-delay: 0.3s; }
.motion .expect-list > div:nth-child(2) { transition-delay: 0.45s; }
.motion .expect-list > div:nth-child(3) { transition-delay: 0.6s; }
.pre .expect-list > div { opacity: 0; transform: translateY(20px); }

.motion .features li { transition: opacity 0.5s ease, transform 0.5s var(--ease); }
.motion .features li:nth-child(1) { transition-delay: calc(var(--d, 0) * 110ms + 0.35s); }
.motion .features li:nth-child(2) { transition-delay: calc(var(--d, 0) * 110ms + 0.42s); }
.motion .features li:nth-child(3) { transition-delay: calc(var(--d, 0) * 110ms + 0.49s); }
.motion .features li:nth-child(4) { transition-delay: calc(var(--d, 0) * 110ms + 0.56s); }
.motion .features li:nth-child(5) { transition-delay: calc(var(--d, 0) * 110ms + 0.63s); }
.pre .features li { opacity: 0; transform: translateX(-12px); }

/* The footer wordmark builds itself: the stones grow corner to corner, then the letters
   rise out of the bottom edge of the page. */
.motion .footer-giant svg { overflow: visible; }
.motion .footer-giant rect { transform-box: fill-box; transform-origin: 0 100%; transition: transform 0.7s var(--pop); }
.motion .footer-giant rect:nth-child(2) { transition-delay: 0.14s; }
.motion .footer-giant rect:nth-child(3) { transition-delay: 0.28s; }
.pre.footer-giant rect { transform: scale(0); }
.motion .footer-giant .l { display: inline-block; transition: transform 0.9s var(--ease); transition-delay: calc(0.45s + var(--i) * 0.06s); }
.pre.footer-giant .l { transform: translateY(110%); }

/* Set pieces rest complete; the script adds .play when they come into view. The search in
   the first system card types itself, with a blinking caret, then your pin drops. */
.motion .map-query::after {
  content: "";
  width: 2px;
  height: 14px;
  margin-left: 1px;
  background: currentColor;
  opacity: 0;
}
.play .map-typed { animation: type 1.2s steps(22, end) 0.3s both; }
.play .map-query::after { animation: caret 1.1s steps(1) 6; }
.play .map-you { animation: drop 0.7s var(--ease) 1.6s both; }

@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

/* ---------- Mid widths: four-ups go two by two, dense cards loosen ---------- */
@media (max-width: 1099.98px) {
  .demo { display: flex; flex-direction: column; align-items: center; padding: 72px calc(var(--pad) + 24px) 40px; }
  .legend { display: none; }
  .nav { display: none; }
  .system-row { grid-template-columns: minmax(0, 1fr); }
  .part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .part > :not(.part-visual) { grid-column: 1; }
  .part-visual { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }

  .showcase-stage { display: flex; flex-direction: column; align-items: center; gap: 48px; padding-top: 56px; }
  .device { order: -1; }
  .callouts { width: 100%; max-width: 680px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gutter); }
  .callouts--left { text-align: left; }
  .callouts--left .callout { padding: 0 0 0 32px; }
  .callouts--left .callout::before { left: 0; right: auto; }
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--3 .step:nth-child(2)::after { display: block; }

  /* In the story the legend becomes one caption above the phone, showing the current step. */
  .is-story .demo { justify-content: center; }
  .is-story .legend {
    display: grid;
    width: 100%;
    max-width: 360px;
    margin-bottom: 20px;
    text-align: center;
  }
  .is-story .legend li {
    grid-area: 1 / 1;
    display: block;
    padding: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s var(--ease);
  }
  .is-story .legend li.current { opacity: 1; transform: none; }
  .is-story .legend li::after,
  .is-story .legend-mark { display: none; }
  .is-story .legend-k,
  .is-story .legend-v { display: block; }
  .is-story .legend-v { font-size: 20px; }

  .alert {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: -64px 18px 0;
  }

  .span-3 { grid-column: span 6; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .step:nth-child(2n)::after { display: none; }

  .card--split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dial-wrap { justify-self: start; justify-items: start; }
  .map-query { position: static; margin-bottom: 10px; }
  .flow { gap: 8px; }
  .flow-chip { gap: 8px; padding: 11px 14px; font-size: 15px; }
  .flow-arrow { width: 22px; }

  .expect-head, .expect-list { grid-column: 2 / 12; }
  .expect-list > div { grid-template-columns: 8.5em minmax(0, 1fr); }

  .plan { padding-inline: 28px; }
  .plan-for { min-height: 4.6em; }
  .plan .btn { padding-inline: 12px; font-size: 16px; }

  .founding { grid-template-columns: minmax(0, 1fr) auto; }
  .founding-text { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Below 860px everything stacks ---------- */
@media (max-width: 859.98px) {
  :root { --section: 44px; }

  .grid > *,
  .expect > *,
  .cta > * { grid-column: 1 / -1; }

  .header-tel { display: none; }

  .intro { margin-bottom: 24px; }

  .hero { padding-block: 32px 40px; }
  .hero-copy .eyebrow { margin-bottom: 20px; }
  .hero-sub { margin-top: 24px; }
  .actions { flex-direction: column; gap: 8px; margin-top: 32px; }
  .actions .btn { width: 100%; }

  .story,
  .showcase {
    margin-top: 32px;
    /* Full width from the start on phones: opening out would gain only 24px a side and
       repaint the panel on every frame. */
    clip-path: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .demo { padding: 48px calc(var(--pad) + 16px) 32px; }
  .showcase { padding-bottom: 64px; }
  .showcase-stage { gap: 40px; padding-top: 40px; }
  .callouts { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .others { grid-template-columns: minmax(0, 1fr); }
  .part { display: flex; align-items: stretch; padding: 24px 20px 20px; }
  .part-text { font-size: 16px; }
  .part .part-links { margin-bottom: 16px; }
  .v-search .result:not(.result--you),
  .v-search .map { display: none; }
  /* Phones: the three packages stack, one under the other. */
  .plans { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .report { padding-top: 24px; }
  .about-photo { width: 128px; height: 128px; margin-bottom: 24px; }
  .about-photo--placeholder { font-size: 52px; }
  .report-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-card { padding: 28px 20px 30px; }
  /* The table runs a little into the card's padding so all six columns fit. */
  .report-table { width: calc(100% + 24px); margin-inline: -12px; font-size: 14px; }
  .report-table th,
  .report-table td { padding: 10px 2px; }
  .report-table thead th { font-size: 12px; }
  .report-table thead th:first-child,
  .report-table tbody th { width: 31%; padding-left: 12px; }
  .report-table tbody tr:not(.is-you) th { white-space: nowrap; font-size: 13.5px; }
  .report-table td svg { width: 20px; height: 20px; }
  .compare-wrap { margin-top: 32px; }
  .compare-toggle { width: 100%; }
  .compare-feature { width: 37%; }
  .compare th,
  .compare td { padding: 11px 4px; }
  .compare thead th { padding-block: 16px 12px; font-size: 12.5px; letter-spacing: -0.01em; }
  .compare thead th span { font-size: 12px; }
  .compare tbody th[scope="row"] { padding-left: 14px; font-size: 14px; }
  .compare-group th { padding: 18px 14px 8px; }
  .compare td svg { width: 22px; height: 22px; }
  .reason { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .reason-icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .reason .h3, .reason p { grid-column: 2; }
  .reason p { margin-top: 6px; }
  .timeline { row-gap: 28px; }
  .problem .h2 { font-size: 32px; }
  .point { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
  .point-num { margin: 0; }
  .point p:last-child { grid-column: 2; margin-top: 6px; }
  .about-body p { font-size: 17px; }
  .faq-btn { padding-block: 14px; }
  .cta .h2 { font-size: 30px; }
  .cta .lede { font-size: 17px; }
  .field input, .field select { height: 50px; }
  .footer-head ~ .footer-head { margin-top: 12px; }
  .step-card p { font-size: 16px; }
  .footer-inner { gap: 20px var(--gutter); }
  .footer-giant { margin-top: 24px; }
  .footer-line { font-size: 14px; }
  .contact-line { line-height: 1.7; }
  .cta .lede { margin-top: 16px; }
  .about-body p + p { margin-top: 16px; }
  .about-body .signature { margin-top: 24px; }
  .plans-note { font-size: 15px; }
  .part-title { margin-top: 6px; }
  .part-text { margin-top: 8px; }
  .hero-sub { margin-top: 20px; }
  .actions { margin-top: 24px; }
  .trade-row { margin-top: 24px; }
  .start { padding: 36px 20px; border-radius: var(--r-lg); }
  .footer-inner { padding-top: 32px; }
  .part-visual { min-height: 0; margin-top: 0; }
  .screen { min-height: 540px; }
  .demo-cap { margin-top: 32px; }

  .problem { padding-top: 56px; }
  .problem .dim { display: block; }
  .title-card { margin-bottom: 24px; --hold: 0.35; }
  .title-card--long { --hold: 0.7; }
  .is-story .story-track { height: 250vh; height: 250svh; }
  .is-story .demo { padding-block: 16px calc(92px + env(safe-area-inset-bottom)); }
  .is-story .demo-cap { margin-top: 20px; }
  /* Stacked, the About headline has nothing to ride beside, so it lights up in place. */
  .about .is-scrub > [data-title] { position: static; }
  .motion .step::after { transform-origin: center top; }
  .pre.step::after { transform: scaleY(0); }
  .story,
  .showcase { padding-top: 64px; }
  .timeline {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
    margin: 16px 0 0 6px;
    padding-left: 28px;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
  .point { padding-top: 0; }
  .point::before { top: 3px; left: -34.5px; }

  .card { min-height: 0; padding: 32px 28px; }
  .card-visual { padding-top: 32px; }
  .dial { width: 168px; height: 168px; }
  .dial-num { padding-top: 50px; font-size: 19px; }
  .dial-num span { font-size: 72px; }

  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .step-card { margin-top: 0; padding: 20px 18px 22px; }
  .step:nth-child(n)::after {
    display: block;
    top: 60px;
    bottom: -12px;
    left: 23px;
    right: auto;
    border-top: 0;
    border-left: 2px dashed rgba(15, 14, 17, 0.22);
  }
  .step:last-child::after { display: none; }
  .motion .step::after { transform-origin: center top; }
  .pre.step::after { transform: scaleY(0); }

  .expect { row-gap: 32px; padding: 40px 28px; }
  .expect-list > div { grid-template-columns: 1fr; gap: 6px; }

  .plan { padding: 32px 28px 36px; }
  .plan-for { min-height: 0; }

  .founding { grid-template-columns: 1fr; gap: 12px; padding: 24px; }

  .about-body { padding-top: 8px; }
  .about-body p { font-size: 19px; }

  .faq-panel { padding-right: 0; }

  .cta { row-gap: 32px; padding: 36px 20px; border-radius: var(--r-lg); }

  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gutter); }
  .footer-brand,
  .footer-copy { grid-column: 1 / -1; }
  .footer-inner .footer-col { grid-column: auto; }
  .footer-inner .footer-col--contact { grid-column: 1 / -1; }
  .footer-col a { min-height: 44px; }
  .footer-giant { margin-top: 32px; }
}

/* ---------- Phones: keep the hero headline on three lines ----------
   At 48px the longest line is about 365px wide, wider than a 375px phone's
   327px column, so below 430px the headline scales with its column instead
   (the longest line is 7.6em wide, so 12.9% of the column keeps it on one line). A page whose
   longest line is wider says so with --longest on its h1. */
@media (max-width: 429.98px) {
  .hero-copy { container-type: inline-size; }
  .h1 { font-size: calc(98cqi / var(--longest, 7.6)); }
}

@media (max-width: 859.98px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px max(16px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
    background: var(--white);
    box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgba(15, 14, 17, 0.06);
    transition: transform 0.3s var(--ease), visibility 0.3s;
  }
  .callbar .btn { min-height: 52px; padding-inline: 12px; }
  .callbar.is-tucked { transform: translateY(110%); visibility: hidden; }
}