/* 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;
}

/* How far the phone 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; }

/* ---------- Tokens ---------- */
: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: 128px;
  --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 ---------- */
*, *::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); }

.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: var(--silver); }

.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-nav 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: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
  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 {
  grid-column: 1 / 4;
  justify-self: start;
  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 { grid-column: 4 / 10; justify-self: center; }
.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;
}

.header-cta { grid-column: 10 / 13; justify-self: end; }

/* ---------- 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-top: 88px; }

.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);
}

/* Demo motion: once armed, each line waits for its point in the scroll. 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 .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; }

/* 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; }
.story .title-card,
.showcase .title-card { margin-bottom: 0; }

@media (min-width: 1100px) {
  .is-armed .legend li { opacity: 0.3; }
  .is-armed .legend li.on { opacity: 0.6; }
  .is-armed .legend li.current { opacity: 1; }
  .is-armed .legend li:not(.on) .legend-mark { border-color: var(--silver); background: transparent; }
}

/* ---------- Problem ---------- */
.problem { padding-top: 88px; }
.problem .dim { color: var(--silver); }

/* ---------- 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. */
.title-card { grid-column: 1 / -1; margin-bottom: 48px; }
.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; }
}

.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); }

/* ---------- 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; }
.motion .map-query::after {
  content: "";
  width: 2px;
  height: 16px;
  margin-left: -7px;
  background: var(--slate);
}

@keyframes caret { 50% { opacity: 0; } }

/* 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: 40px 36px 44px;
  border-radius: var(--r-lg);
  background: var(--surface, var(--white));
}
.plan--featured { background: var(--black); }

.plan-pill {
  position: absolute;
  top: 34px;
  right: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--slate);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.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: 24px; }
.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: 28px; }

.features-lead {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 16px;
  font-weight: 700;
}
.features {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  padding-top: 24px;
  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); }

.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: 26px 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; }

/* ---------- About ---------- */
/* The headline rides down beside the text while its words light up. */
.about .is-scrub > [data-title] { align-self: start; }
.about-body { padding-top: 40px; }
.about-body p { font-size: 20px; 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: 26px 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: 96px;
  border-radius: var(--r-xl);
  background: var(--black) var(--paver-field);
}
.cta-copy { grid-column: 2 / 7; }
.cta-form { grid-column: 8 / 12; }
.contact-line { margin-top: 32px; color: var(--fg-muted); line-height: 2; }

.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: 18px; }
.field label { font-size: 15px; font-weight: 600; }
.field input {
  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 input:focus-visible { outline-offset: 2px; border-color: transparent; }
.cta-form .btn { margin-top: 28px; }
.form-status { min-height: 1.5em; margin-top: 14px; font-size: 15px; color: var(--silver); }

/* ---------- 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); }

/* 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; }

/* ---------- 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: 16px var(--gutter);
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.footer-inner .wordmark { grid-column: 1 / 4; }
.footer-line { grid-column: 4 / 10; font-size: 15px; color: var(--slate); }
.footer-copy { grid-column: 10 / 13; grid-row: 1; justify-self: end; font-size: 15px; color: var(--slate); }
.footer-nav { grid-column: 4 / 10; grid-row: 2; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; list-style: none; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }

/* 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: 72px 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 .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 .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); }

/* Section headlines: the label first, then the words pop up 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); }

/* 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. */
.play .map-typed { animation: type 1.2s steps(19, 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.7s both; }
.play .dial-arc { animation: fill-arc 2s var(--ease) 0.3s both; }

@keyframes type { from { max-width: 0; } to { max-width: 19ch; } }
@keyframes drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes fill-arc { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---------- 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; }
  .is-story .demo { justify-content: center; }

  .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 .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: 72px; }

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

  .header-inner { grid-template-columns: 1fr auto; row-gap: 6px; }
  .header-inner .wordmark { grid-column: 1; grid-row: 1; }
  .header-cta { grid-column: 2; grid-row: 1; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; padding-top: 6px; border-top: 1px solid var(--line); }
  .nav ul { justify-content: space-between; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .nav a { padding: 0 5px; white-space: nowrap; }
  .nav li:first-child a { padding-left: 0; justify-content: flex-start; }
  .nav li:last-child a { padding-right: 0; justify-content: flex-end; }

  .intro { margin-bottom: 24px; }

  .hero { padding-top: 48px; }
  .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; }
  .is-story .demo { padding-block: 16px; }
  .screen { min-height: 540px; }
  .demo-cap { margin-top: 32px; }
  .is-story .demo-cap { margin-top: 20px; }

  .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; }
  .story,
  .showcase { padding-top: 64px; }
  /* Stacked, the About headline has nothing to ride beside, so it lights up in place. */
  .about .is-scrub > [data-title] { position: static; }
  .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: 24px; }
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .step-card { margin-top: 0; padding: 26px 24px 28px; }
  .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-pill { top: 30px; right: 24px; }
  .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: 40px; padding: 48px 24px; border-radius: var(--r-lg); }

  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-inner .wordmark,
  .footer-line,
  .footer-nav,
  .footer-copy { grid-column: 1; grid-row: auto; justify-self: start; }
  .footer-giant { margin-top: 48px; }
}

/* ---------- 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)); }
}