/* Yellowside site. Brand colors and fonts come from tokens.css, generated from brand/brand.json.
   Direction: Rilla's punch. Full-bleed electric yellow, near-black ink, giant condensed caps.
   Motion: ambient loops that start on load. Nothing waits for scroll, and every element's
   resting style is its finished state, so reduced motion (or no animation support) shows it complete. */

:root {
  --panel: color-mix(in oklch, var(--ink) 6%, var(--bg));
  --line: color-mix(in oklch, var(--ink) 12%, var(--bg));
  --ink-2: color-mix(in oklch, var(--ink) 90%, var(--bg));
  --ink-3: color-mix(in oklch, var(--ink) 80%, var(--bg));
  --on-ink: color-mix(in oklch, var(--bg) 96%, var(--ink));
  --on-ink-muted: color-mix(in oklch, var(--bg) 64%, var(--ink));
  --ink-soft: color-mix(in oklch, var(--ink) 78%, var(--brand));
  --brand-deep: color-mix(in oklch, var(--ink) 7%, var(--brand));

  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --shadow-color: 50deg 30% 6%;
  --shadow:
    0 1px 2px hsl(var(--shadow-color) / 0.12),
    0 8px 20px -6px hsl(var(--shadow-color) / 0.22),
    0 26px 50px -24px hsl(var(--shadow-color) / 0.35);

  --max: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

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

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

html {
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

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

::selection {
  background: var(--brand);
  color: var(--ink);
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--ink);
  color: var(--brand);
  font-weight: 700;
}

.skip:focus {
  top: 1rem;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.95rem 1.7rem;
  border-radius: 10px;
  background: var(--ink);
  color: var(--brand);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

/* Header */

.site-header {
  background: var(--brand);
  color: var(--ink);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

/* The logo is the lockup from brand/logo/ (mark plus the Anton wordmark, outlined), never live text:
   lockup-light.svg on the black header, lockup.svg on the light footer. */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.logo img {
  display: block;
  width: auto;
  height: 2.125rem;
}

.logo-small img {
  height: 1.625rem;
}

/* The lockup is about twice as wide as the old "Y2A" logo. On a phone the menu wrapped onto two and three
   lines (2026-11-10), so the logo steps down and the links stay on one line. Logo, "Who we help" and the
   button need about 352px, more than a 360 to 393px phone has, so phones show the logo and the audit
   button only; "Who we help" stays in the footer and on the home page. */
.site-header .logo {
  flex-shrink: 0;
}

.site-header .nav a {
  white-space: nowrap;
}

/* The full menu needs about 760px beside the lockup; below that only "Who we help" and the button show. */
@media (max-width: 799px) {
  .site-header .nav-optional {
    display: none;
  }
}

@media (max-width: 560px) {
  .site-header .logo img {
    height: 1.375rem;
  }
}

@media (max-width: 399px) {
  .site-header .nav-who {
    display: none;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 650;
  font-size: 0.98rem;
}

.nav a {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}

/* Hero */

.hero {
  overflow-x: clip;
  padding-block: clamp(1.5rem, 1rem + 2.5vw, 3.5rem) clamp(3.5rem, 2rem + 4vw, 6rem);
  background: var(--brand);
  color: var(--ink);
  text-align: center;
}

.hero .hero-line {
  max-width: none;
}

.hero-line {
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 0.3rem + 9.2vw, 10.5rem);
  line-height: 0.86;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-wrap: balance;
}

.ticker {
  margin-block: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  overflow: hidden;
}

.ticker-track {
  display: flex;
  width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  .ticker-track {
    animation: slide 60s linear infinite;
  }
}

@media (hover: hover) and (pointer: fine) {
  .ticker:hover .ticker-track {
    animation-play-state: paused;
  }
}

@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

/* margin-right instead of gap, so the doubled track is exactly two sets wide and loops seamlessly */
.tk {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.55rem;
  width: 16.5rem;
  min-height: 9.75rem;
  margin-right: 1rem;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 18px;
  text-align: left;
}

.tk-dark {
  background: var(--ink);
  color: var(--on-ink);
}

.tk-light {
  background: var(--bg);
  color: var(--ink);
}

.tk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.tk-chip {
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tk-dark .tk-chip {
  background: var(--brand);
  color: var(--ink);
}

.tk-light .tk-chip {
  background: var(--ink);
  color: var(--brand);
}

.tk-time {
  font-size: 0.75rem;
  font-weight: 550;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.tk-title {
  flex: 1;
  margin: 0;
  font-weight: 650;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.tk-foot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.tk-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand);
}

.tk-light .tk-dot {
  background: var(--ink);
}

.tk-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 1.4rem;
}

.tk-wave i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleY(var(--h));
}

.tk-steps {
  display: flex;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
}

.tk-steps span {
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--ink-3);
}

.tk-steps span:last-child {
  background: var(--brand);
  color: var(--ink);
}

.hero-foot {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
}

.hero-sub {
  max-width: 30ch;
  margin: 0;
  font-weight: 650;
  font-size: clamp(1.2rem, 0.95rem + 1vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Sections */

.section {
  padding-block: clamp(4.5rem, 3rem + 5vw, 8.5rem);
}

.section-head {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  text-align: center;
}

.display-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.6rem, 0.8rem + 11.5vw, 13rem);
  line-height: 0.84;
  letter-spacing: 0.004em;
  text-transform: uppercase;
}

.tag {
  margin: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  background: var(--brand);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section-lede {
  max-width: 44ch;
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: var(--step-1);
  font-weight: 550;
  line-height: 1.45;
  text-wrap: balance;
}

/* Services bento */

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

.svc {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.9rem);
  border-radius: 26px;
  overflow: hidden;
}

.svc-7 {
  grid-column: span 7;
}

.svc-5 {
  grid-column: span 5;
}

.svc-12 {
  grid-column: span 12;
}

.svc-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}

.svc-yellow {
  background: var(--brand);
  color: var(--ink);
}

.svc-dark {
  background: var(--ink);
  color: var(--on-ink);
}

.svc-light {
  background: var(--panel);
  color: var(--ink);
}

.svc h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.15rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.svc-body p {
  max-width: 54ch;
  margin: 0;
  line-height: 1.55;
}

.svc-yellow .svc-body p {
  color: var(--ink-soft);
}

.svc-dark .svc-body p {
  color: var(--on-ink-muted);
}

.svc-light .svc-body p {
  color: var(--muted);
}

.ticks {
  display: grid;
  gap: 0.5rem;
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
}

.ticks li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.ticks li::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--brand);
  transform: translateY(-0.05em);
}

.svc-yellow .ticks li::before,
.svc-light .ticks li::before {
  background: var(--ink);
}

.viz {
  position: relative;
  display: grid;
  place-items: center;
  height: 16rem;
  border-radius: 18px;
  overflow: hidden;
}

.svc-yellow .viz {
  background: var(--brand-deep);
}

.svc-dark .viz {
  background: var(--ink-2);
}

.svc-light .viz {
  background: var(--bg);
}

/* Viz 1: speed to lead. A response clock fills while the seconds count up, then "called back" lands. */

.ripple {
  position: absolute;
  width: 15rem;
  height: 15rem;
  border: 2px solid color-mix(in oklch, var(--ink) 30%, transparent);
  border-radius: 50%;
  opacity: 0.35;
}

.call {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.5rem 1rem 1rem;
  border-radius: 20px;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow);
}

.ring {
  position: relative;
  width: 5.6rem;
  height: 5.6rem;
  flex: none;
}

.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring circle {
  fill: none;
  stroke-width: 9;
}

.ring-track {
  stroke: var(--ink-3);
}

.ring-fill {
  stroke: var(--brand);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 22;
}

.ring-time {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  counter-reset: sec var(--sec);
}

.ring-time::after {
  content: "0:" counter(sec, decimal-leading-zero);
}

.call-meta {
  display: grid;
  gap: 0.3rem;
  text-align: left;
}

.mini-chip {
  justify-self: start;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--brand);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.call-meta strong {
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.called {
  color: var(--brand);
  font-size: 0.88rem;
  font-weight: 700;
}

.called::before {
  content: "\2713\00a0";
}

/* Viz 2: call coaching. Live waveform, a playhead that colors what has been heard, tags that land. */

.viz-calls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.wave {
  position: relative;
  width: 86%;
  height: 4.6rem;
}

.bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

.bars span {
  flex: 1;
  height: 100%;
  border-radius: 3px;
  background: var(--ink-3);
  transform: scaleY(var(--h));
}

.bars-played span {
  background: var(--brand);
}

.playhead {
  position: absolute;
  inset: -0.5rem 0;
}

.playhead::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--on-ink);
}

.lines {
  display: grid;
  gap: 0.3rem;
  width: 86%;
  text-align: left;
}

.line {
  margin: 0;
  overflow: hidden;
  color: var(--on-ink-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.line b {
  margin-right: 0.4rem;
  color: var(--on-ink);
  font-weight: 650;
}

.tags {
  display: flex;
  gap: 0.4rem;
  width: 86%;
}

.tags span {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tag-a {
  background: var(--brand);
  color: var(--ink);
}

.tag-b {
  background: var(--on-ink);
  color: var(--ink);
}

/* Viz 3: no-sale follow-up. Each lead's status rolls forward until it's rebooked or sold. */

.viz-follow {
  display: grid;
  place-items: center stretch;
  align-content: center;
  gap: 0.6rem;
  padding: 1rem clamp(1rem, 4%, 2rem);
}

.row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 26rem);
  justify-self: center;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  background: var(--panel);
}

.svc-yellow .row {
  background: var(--bg);
}

.av {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 750;
}

.who {
  min-width: 0;
}

.who b {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
}

.who span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.status {
  height: 1.65rem;
  overflow: hidden;
  border-radius: 999px;
}

.status-track {
  display: flex;
  flex-direction: column;
  transform: translateY(-66.667%);
}

.status-track span {
  display: grid;
  place-items: center;
  height: 1.65rem;
  padding-inline: 0.7rem;
  background: var(--line);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-track .ok {
  background: var(--brand);
}

/* Viz 4: ads measured in sold jobs. An ad feeds a funnel that fills down to the sold jobs it produced. */

.viz-ads {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.4rem;
  padding: 1.25rem 1.6rem;
  place-items: center stretch;
}

.ad {
  display: grid;
  gap: 0.45rem;
  width: 9.5rem;
  padding: 0.55rem;
  border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--shadow);
}

.ad-label {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 650;
}

.ad-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  height: 6.2rem;
  border-radius: 8px;
  overflow: hidden;
}

.ad-photos span {
  display: flex;
  align-items: flex-end;
  padding: 0.3rem;
  color: var(--on-ink);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ad-photos .before {
  background: repeating-linear-gradient(135deg, var(--ink-3) 0 6px, var(--ink-2) 6px 12px);
}

.ad-photos .after {
  background:
    linear-gradient(to top, color-mix(in oklch, var(--ink) 55%, transparent), transparent 60%),
    repeating-linear-gradient(90deg, color-mix(in oklch, var(--bg) 70%, var(--ink)) 0 10px, color-mix(in oklch, var(--bg) 82%, var(--ink)) 10px 20px);
}

.ad-num {
  justify-self: start;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--brand);
  font-size: 0.64rem;
  font-weight: 750;
}

.funnel {
  display: grid;
  gap: 0.55rem;
}

.funnel .bar {
  position: relative;
  height: 2.2rem;
}

.funnel .bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--ink);
  transform: scaleX(var(--w));
  transform-origin: left;
}

.funnel .bar span {
  position: relative;
  z-index: 1;
  padding-left: 0.75rem;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 2.2rem;
}

.funnel .bar-sold::before {
  background: var(--bg);
}

.funnel .bar-sold span {
  color: var(--ink);
}

.funnel .bar em {
  position: absolute;
  top: 50%;
  left: calc(var(--w) * 100% + 0.6rem);
  transform: translateY(-50%);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

/* How we work: Rilla-style numbered yellow cards (the order is a real sequence). */

.how {
  padding-top: 0;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 25rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.8rem);
  border-radius: 26px;
  background: var(--brand);
  color: var(--ink);
}

.step-num {
  position: absolute;
  top: 1.3rem;
  right: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step-viz {
  flex: 1;
  display: grid;
  place-content: center;
  margin: 2rem 0 0.75rem;
}

.step h3 {
  margin: 0;
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.step p {
  max-width: 34ch;
  margin: 0;
  color: var(--ink-soft);
  font-weight: 550;
}

.step-viz-1 {
  gap: 0.5rem;
}

.step-viz-1 span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.86rem;
  font-weight: 650;
  box-shadow: var(--shadow);
}

.rec {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--brand);
}

.step-viz-2 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.6rem;
  height: 8rem;
}

.step-viz-2 i {
  width: 2.3rem;
  height: 100%;
  border-radius: 9px 9px 3px 3px;
  background: var(--ink);
  transform: scaleY(var(--h));
  transform-origin: bottom;
}

.mini-ad {
  display: grid;
  gap: 0.5rem;
  width: 10rem;
  padding: 0.55rem;
  border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--shadow);
}

.mini-ad-photo {
  height: 6rem;
  border-radius: 8px;
  background:
    linear-gradient(to top, color-mix(in oklch, var(--ink) 50%, transparent), transparent 55%),
    repeating-linear-gradient(135deg, var(--ink-3) 0 7px, var(--ink-2) 7px 14px);
}

.mini-ad-live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 750;
}

.mini-ad-live::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--brand);
}

.step-viz-4 {
  width: 11.5rem;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: var(--shadow);
}

.step-viz-4 span {
  height: 0.65rem;
  border-radius: 4px;
  background: var(--line);
}

.step-viz-4 span:nth-child(2) {
  width: 70%;
}

.step-viz-4 .hi {
  height: auto;
  padding: 0.3rem 0.5rem;
  background: var(--ink);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The whole flow: the benefit, last. A pulse runs through every step and each one lights as it passes. */

.flow {
  background: var(--ink);
  color: var(--on-ink);
}

.flow .display-title span {
  color: var(--brand);
}

.flow .section-lede {
  color: var(--on-ink-muted);
}

.pipeline-wrap {
  position: relative;
  max-width: 62rem;
  margin: 0 auto clamp(3rem, 2rem + 3vw, 5rem);
}

.pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pipeline::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 2px;
  background: var(--ink-3);
  transform: translateY(-50%);
}

.node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  font-size: 0.95rem;
  font-weight: 650;
  text-align: center;
}

.node i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--brand);
}

.node i::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--ink);
}

.lane {
  position: absolute;
  top: 1.25rem;
  left: calc(100% / 12);
  right: calc(100% / 12);
  z-index: 2;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.lane-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}

.lane-dot::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--on-ink);
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--brand) 40%, transparent);
}

.brace {
  height: 0.9rem;
  margin: 1.6rem calc(100% / 12) 0;
  border: 2px solid var(--brand);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}

.brace-label {
  margin: 0.9rem 0 0;
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.outcome {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 21rem;
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  border-radius: 26px;
  background: var(--brand);
  color: var(--ink);
}

.arrow {
  width: 3.8rem;
  height: 3.8rem;
}

.outcome h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.9rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.outcome p {
  max-width: 32ch;
  margin: 0;
  color: var(--ink-soft);
  font-weight: 550;
}

/* Closing band */

.closer {
  overflow: hidden;
  padding-block: clamp(1.4rem, 1rem + 2vw, 3rem);
  background: var(--brand);
  color: var(--ink);
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-track span {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding-right: 0.45em;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 1rem + 8vw, 9.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee-track span::after {
  content: "";
  width: 0.32em;
  height: 0.32em;
  background: var(--ink);
  transform: rotate(45deg);
}

/* Footer: every page one click away, then the company details and the texting note, small */

.site-footer {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.foot-id {
  display: grid;
  align-content: start;
  gap: 0.8rem;
}

.foot-tag {
  max-width: 24ch;
  margin: 0;
  font-weight: 650;
  line-height: 1.35;
}

.foot-head {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foot-nav ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
}

.foot-nav a {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .foot-nav a:hover {
    text-decoration: underline;
  }
}

.foot-address {
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.fine-print {
  max-width: 92ch;
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

/* Header: the one action, always in reach, and the page you're on */

.nav .nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 9px;
  background: var(--ink);
  color: var(--brand);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .nav .nav-cta:hover {
    text-decoration: none;
    background: var(--ink-2);
  }
}

[data-page="how"] [data-nav="how"],
[data-page="about"] [data-nav="about"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Shared section pieces */

.section-ink {
  background: var(--ink);
  color: var(--on-ink);
}

.section-ink .section-lede {
  color: var(--on-ink-muted);
}

.section-panel {
  background: var(--panel);
}

.section-head-left {
  justify-items: start;
  text-align: left;
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-wrap: balance;
}

.section-ink .section-title em,
.section-ink .display-title em {
  color: var(--brand);
  font-style: normal;
}

.btn-brand {
  background: var(--brand);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
}

.cta-note {
  max-width: 38ch;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.sources {
  max-width: 92ch;
  margin: 1.75rem 0 0;
  color: color-mix(in oklch, currentColor 62%, transparent);
  font-size: 0.8rem;
  line-height: 1.5;
}

.sources a {
  color: inherit;
}

.text-link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Inner page hero: the problem in the owner's words, the outcome, the one button */

.page-hero {
  padding-block: clamp(2.25rem, 1.5rem + 3.5vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--brand);
  color: var(--ink);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.page-hero-solo .page-hero-grid {
  grid-template-columns: minmax(0, 1fr);
}

.eyebrow-chip {
  display: inline-block;
  margin: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.page-title {
  margin: 1.1rem 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 1rem + 6.2vw, 7.2rem);
  line-height: 0.88;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-wrap: balance;
}

.page-sub {
  max-width: 34ch;
  margin: 0 0 2rem;
  font-weight: 650;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.page-hero .viz {
  height: clamp(15rem, 12rem + 8vw, 21rem);
  background: var(--brand-deep);
}

.page-hero .viz-on-ink {
  background: var(--ink);
}

.page-hero .row {
  background: var(--bg);
}

/* What it costs: sourced numbers, big, on ink */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  border-radius: 26px;
  background: var(--ink-2);
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 2rem + 5.5vw, 7.5rem);
  line-height: 0.85;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-text {
  max-width: 30ch;
  margin: 0;
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.35;
}

.costs-body {
  max-width: 54ch;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.45;
}

/* The leak, in one company's numbers (home) */

.leak-math {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leak-math li {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  border-radius: 26px;
  background: var(--ink-2);
}

.leak-math li:last-child {
  background: var(--brand);
  color: var(--ink);
}

.leak-num {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 2rem + 8vw, 10rem);
  line-height: 0.82;
  color: var(--brand);
}

.leak-math li:last-child .leak-num {
  color: var(--ink);
}

.leak-label {
  font-weight: 700;
  font-size: var(--step-1);
}

.leak-kicker {
  max-width: 24ch;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.leak-kicker em {
  color: var(--brand);
  font-style: normal;
}

/* What changes: outcomes beside the moving picture of the work */

.changes-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.big-ticks {
  display: grid;
  gap: 1.05rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  font-weight: 650;
  line-height: 1.3;
}

.big-ticks li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.big-ticks li::before {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  background: var(--ink);
  transform: translateY(-0.08em);
}

.section-ink .big-ticks li::before {
  background: var(--brand);
}

.changes .viz {
  height: clamp(15rem, 12rem + 8vw, 20rem);
  background: var(--brand);
}

.changes .viz-on-ink {
  background: var(--ink);
}

.changes .row {
  background: var(--bg);
}

/* How we fix it: three numbered yellow cards */

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

.step-compact {
  min-height: 0;
  gap: 0.75rem;
  padding-top: clamp(3.4rem, 3rem + 1vw, 4rem);
}

/* Part of one plan: the other leaks and the plan, one click each */

.leaks-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leak-link {
  display: grid;
  align-content: space-between;
  gap: 1.2rem;
  height: 100%;
  min-height: 9.5rem;
  padding: 1.2rem 1.3rem;
  border-radius: 20px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  text-decoration: none;
}

.leak-link small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.leak-link .go {
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.leak-link-plan {
  background: var(--ink);
  color: var(--brand);
}

.leak-link-plan small {
  color: var(--on-ink-muted);
}

[data-page="speed"] [data-leak="speed"],
[data-page="costs"] [data-leak="costs"],
[data-page="booking"] [data-leak="booking"],
[data-page="follow"] [data-leak="follow"],
[data-page="how"] [data-leak="plan"],
[data-page="social"] [data-leak="social"],
[data-page="web"] [data-leak="web"],
[data-page="search"] [data-leak="search"] {
  display: none;
}

/* The guarantee: three promises in plain words */

.promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.promise {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 19rem;
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  border-radius: 26px;
}

.promise h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 1.9vw, 3rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.promise p {
  max-width: 36ch;
  margin: 0;
  font-weight: 550;
  line-height: 1.5;
}

.promise .promise-fine {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.86rem;
  font-weight: 650;
}

.promise-yellow {
  background: var(--brand);
  color: var(--ink);
}

.promise-dark {
  background: var(--ink);
  color: var(--on-ink);
}

.promise-dark .promise-fine {
  color: var(--brand);
}

.promise-light {
  background: var(--panel);
  color: var(--ink);
}

/* Who it's for, and who it isn't */

.fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.fit-card {
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.4rem);
  border-radius: 26px;
}

.fit-yes {
  background: var(--brand);
  color: var(--ink);
}

.fit-no {
  background: var(--panel);
  color: var(--ink);
}

.fit-card h3 {
  margin: 0 0 1.3rem;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fit-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}

.fit-list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.6rem;
}

.fit-list li::before {
  font-weight: 800;
  line-height: 1.4;
}

.fit-yes .fit-list li::before {
  content: "\2713";
}

.fit-no .fit-list li::before {
  content: "\2715";
  color: var(--muted);
}

/* Authority: the track record, as numbers */

.proof-band {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.proof-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(6rem, 3rem + 10vw, 13rem);
  line-height: 0.8;
  color: var(--brand);
}

.proof-caption {
  display: block;
  margin-top: 1rem;
  font-weight: 700;
  font-size: var(--step-1);
}

.proof-copy p {
  max-width: 48ch;
  margin: 1.2rem 0 1.6rem;
  color: var(--on-ink-muted);
  font-size: var(--step-1);
  font-weight: 550;
  line-height: 1.45;
}

.achievements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.achievement {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 19rem;
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  border-radius: 26px;
  background: var(--ink);
  color: var(--on-ink);
}

.achievement:nth-child(2) {
  background: var(--brand);
  color: var(--ink);
}

.achievement:nth-child(3) {
  background: var(--panel);
  color: var(--ink);
}

.achievement-num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2rem + 4vw, 6rem);
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--brand);
}

.achievement:nth-child(2) .achievement-num,
.achievement:nth-child(3) .achievement-num {
  color: var(--ink);
}

.achievement p {
  max-width: 34ch;
  margin: 0;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.45;
}

/* The 90-day plan, as a timeline */

.timeline {
  position: relative;
  max-width: 64rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 1.9rem;
  bottom: 1.9rem;
  left: 0.6rem;
  width: 2px;
  background: var(--line);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.4rem 2rem;
  padding: 1.5rem 0 1.5rem 2.75rem;
  border-bottom: 1px solid var(--line);
}

.tl-item:last-child {
  border-bottom: 0;
}

.tl-item::before {
  content: "";
  position: absolute;
  top: 1.8rem;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: inset 0 0 0 3px var(--ink);
}

.tl-when {
  margin: 0;
  padding-top: 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tl-item h3 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.tl-item p {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-weight: 550;
}

/* What we need from you, and questions owners ask */

.needs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.needs li {
  padding: 1.2rem 1.4rem;
  border-radius: 18px;
  background: var(--bg);
  font-weight: 650;
  line-height: 1.4;
}

.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 58rem;
}

.faq details {
  border-radius: 18px;
  background: var(--panel);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--brand);
  font-weight: 800;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 18px;
}

.faq .answer {
  max-width: 62ch;
  margin: 0;
  padding: 0 1.4rem 1.35rem;
  color: var(--muted);
  font-weight: 550;
}

/* The free check: what you get, then the form */

.check-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.mini-steps {
  display: grid;
  gap: 1rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.mini-steps li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  counter-increment: step;
}

.mini-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--brand);
  font-weight: 800;
}

.check-form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
  border-radius: 26px;
  background: var(--ink);
  color: var(--on-ink);
  scroll-margin-top: 1.5rem;
}

.check-form h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-weight: 650;
  font-size: 0.95rem;
}

.field .opt {
  color: var(--on-ink-muted);
  font-weight: 500;
}

.field input,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.9rem;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.field input:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 45%, transparent);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.check-form .btn {
  width: 100%;
  margin-top: 0.4rem;
}

.form-fine {
  margin: 0;
  color: var(--on-ink-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.form-fine a {
  color: var(--on-ink);
}

.form-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--brand);
  color: var(--ink);
  font-weight: 650;
}

.form-error[hidden] {
  display: none;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Home: the founding terms right under the hero, the leak labels and links in the cards */

.founding-strip {
  padding-block: 1rem;
  background: var(--ink);
  color: var(--on-ink);
}

.founding-strip p {
  margin: 0;
  font-weight: 550;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.founding-strip b {
  color: var(--brand);
}

.founding-strip a {
  color: var(--brand);
  font-weight: 700;
}

.svc-kicker {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.75;
}

.svc-link {
  display: inline-block;
  margin-top: 1.3rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.svc-dark .svc-link {
  color: var(--brand);
}

/* Home: the named offer, with its three promises */

.section-plan {
  padding-top: clamp(1rem, 0.5rem + 2vw, 3rem);
}

.plan-promises {
  margin-top: 1rem;
}

.plan-foot {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
}

.plan-foot p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-weight: 550;
  line-height: 1.55;
}

.plan-foot b {
  color: var(--ink);
}

.plan-foot .cta-row {
  justify-content: center;
}

.flow-line span {
  color: var(--brand);
}

.ticker-note {
  margin: -0.4rem 0 clamp(0.5rem, 0.2rem + 1vw, 1.2rem);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.flow-line {
  max-width: 34ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

/* The sample secret shopper report: what the free report looks like, marked as a sample */

.sample-report {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  border-radius: 22px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.sample-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.sample-title {
  font-weight: 750;
  letter-spacing: -0.01em;
}

.sample-label {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--brand);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sample-steps {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sample-steps li {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  gap: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.35;
}

.sample-time {
  color: var(--muted);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.sample-event {
  font-weight: 600;
}

.sample-bad .sample-event::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--ink);
  vertical-align: 0.1em;
}

.sample-result {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
}

.sample-result span {
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.sample-fixes {
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  background: var(--panel);
}

.sample-fixes-head {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sample-fixes ol {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

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

.hero-reply {
  margin-top: 1.2rem;
}

.fix-cta {
  margin-top: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
}

.kicker-line {
  max-width: 40ch;
  margin: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem) 0 0;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.35;
}

.position-line {
  max-width: 52ch;
  margin: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem) 0 0;
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--ink);
  border-radius: 0 12px 12px 0;
  background: var(--brand);
  font-weight: 650;
  line-height: 1.45;
}

/* About: how we work, how to reach us */

.principles li {
  background: var(--panel);
  font-weight: 550;
}

.principles b {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 750;
}

.contact-band {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.contact-band .section-lede {
  margin-top: 1rem;
  color: var(--muted);
}

.contact-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: grid;
  gap: 0.25rem;
  padding: 1.1rem 1.3rem;
  border-radius: 18px;
  background: var(--bg);
  font-weight: 600;
  line-height: 1.45;
}

.contact-list b {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.stat-num-long {
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5rem);
  white-space: normal;
}

/* The free report page: what keeps the test safe for the owner's team */

.safe-list {
  display: grid;
  gap: 0.6rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  font-weight: 650;
  line-height: 1.4;
}

.safe-list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.5rem;
}

.safe-list li::before {
  content: "\2713";
  font-weight: 800;
}

/* Closing band: the one action, restated */

.cta-band {
  padding-block: clamp(4rem, 3rem + 5vw, 8rem);
  background: var(--brand);
  color: var(--ink);
  text-align: center;
}

.cta-band .display-title {
  font-size: clamp(3rem, 0.8rem + 8.6vw, 10rem);
  text-wrap: balance;
}

.cta-body {
  max-width: 46ch;
  margin: 1.5rem auto 2rem;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

.cta-band .cta-note {
  margin: 1rem auto 0;
}

.section-panel .leak-link:not(.leak-link-plan) {
  background: var(--bg);
}

/* Thanks: what happens next */

.next-steps {
  max-width: 44rem;
}

.thanks-more {
  margin-top: 2rem;
}

.next-steps .mini-steps li {
  font-size: var(--step-1);
}

/* Legal documents */

.doc {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(4rem, 3rem + 4vw, 6rem);
}

.doc .wrap {
  max-width: 50rem;
}

.doc .eyebrow {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  background: var(--brand);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc h1 {
  margin: 1.1rem 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 1.4rem + 6vw, 6.5rem);
  line-height: 0.88;
  text-transform: uppercase;
  text-wrap: balance;
}

.doc .updated {
  margin: 0 0 2.5rem;
  color: var(--muted);
  font-size: var(--step--1);
}

.doc h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: var(--step-1);
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.doc h2[id] {
  scroll-margin-top: 2rem;
}

.doc p,
.doc li {
  max-width: 68ch;
}

.doc ul {
  padding-left: 1.2rem;
}

.doc li + li {
  margin-top: 0.4rem;
}

.doc .callout {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--ink);
  border-radius: 0 10px 10px 0;
  background: var(--brand);
}

.doc .callout p {
  margin: 0;
}

.doc .toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0 0 1.5rem;
  list-style: none;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
  font-weight: 650;
}

/* Not found */

.missing {
  padding-block: clamp(5rem, 3rem + 8vw, 10rem);
  background: var(--brand);
}

.missing .eyebrow {
  margin: 0;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.missing h1 {
  margin: 1rem 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 1rem + 9vw, 9rem);
  line-height: 0.86;
  text-transform: uppercase;
}

.missing p {
  margin: 0 0 2rem;
  font-size: var(--step-1);
  font-weight: 550;
}

/* Motion. Each element's resting style above is its finished state; these loops only run when
   the visitor has not asked for reduced motion. */

@media (prefers-reduced-motion: no-preference) {
  .ripple {
    animation: ripple 3.2s var(--ease-out) infinite;
  }

  .ripple.r2 {
    animation-delay: 1.6s;
  }

  .ring-fill {
    animation: ring-fill 6s var(--ease-out) infinite;
  }

  .ring-time {
    animation: count-up 6s var(--ease-out) infinite;
  }

  .called {
    animation: land-a 6s var(--ease-out) infinite;
  }

  .bars span {
    animation: wave 1.2s ease-in-out infinite alternate;
  }

  .bars span:nth-child(3n) {
    animation-duration: 0.9s;
  }

  .bars span:nth-child(3n + 1) {
    animation-duration: 1.45s;
  }

  .bars-played {
    animation: heard 7s linear infinite;
  }

  .playhead {
    animation: playhead 7s linear infinite;
  }

  .tag-a {
    animation: land-b 7s var(--ease-out) infinite;
  }

  .tag-b {
    animation: land-c 7s var(--ease-out) infinite;
  }

  .status-track {
    animation: status 7.5s var(--ease-in-out) infinite;
  }

  .row:nth-child(2) .status-track {
    animation-delay: -2.5s;
  }

  .row:nth-child(3) .status-track {
    animation-delay: -5s;
  }

  .funnel .bar::before {
    animation: fill-bar 7s var(--ease-out) infinite;
  }

  .funnel .bar:nth-child(2)::before {
    animation-delay: 0.12s;
  }

  .funnel .bar:nth-child(3)::before {
    animation-delay: 0.24s;
  }

  .funnel .bar:nth-child(4)::before {
    animation-delay: 0.36s;
  }

  .funnel .bar em {
    animation: land-d 7s var(--ease-out) infinite;
  }

  .rec,
  .mini-ad-live::before {
    animation: blink 1.1s ease-in-out infinite alternate;
  }

  .lane {
    opacity: 1;
  }

  .lane-dot {
    animation: travel 6s linear infinite;
  }

  .node i {
    animation: node-lit 6s var(--ease-out) infinite backwards;
    animation-delay: calc(var(--i) * 0.96s);
  }

  .arrow-down {
    animation: bob-down 1.6s ease-in-out infinite alternate;
  }

  .arrow-up {
    animation: bob-up 1.6s ease-in-out infinite alternate;
  }

  .marquee-track {
    animation: slide 38s linear infinite;
  }
}

@keyframes ripple {
  from {
    transform: scale(0.55);
    opacity: 0.6;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes ring-fill {
  0% {
    stroke-dashoffset: 100;
  }
  55%,
  100% {
    stroke-dashoffset: 22;
  }
}

@keyframes count-up {
  0% {
    --sec: 0;
  }
  55%,
  100% {
    --sec: 47;
  }
}

@keyframes wave {
  to {
    transform: scaleY(calc(var(--h) * 0.45));
  }
}

@keyframes heard {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes playhead {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes status {
  0%,
  24% {
    transform: translateY(0);
  }
  32%,
  56% {
    transform: translateY(-33.333%);
  }
  64%,
  94% {
    transform: translateY(-66.667%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fill-bar {
  0% {
    transform: scaleX(0.04);
  }
  28%,
  88% {
    transform: scaleX(var(--w));
  }
  100% {
    transform: scaleX(0.04);
  }
}

@keyframes blink {
  to {
    opacity: 0.25;
  }
}

/* The dot reaches node i at i x 0.96s, the same moment that node's light-up starts. */
@keyframes travel {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  80% {
    transform: translateX(0);
    opacity: 1;
  }
  90%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

@keyframes node-lit {
  0% {
    background: var(--ink-3);
    transform: scale(1);
  }
  5% {
    background: var(--brand);
    transform: scale(1.18);
  }
  12% {
    transform: scale(1);
  }
  60% {
    background: var(--brand);
  }
  75%,
  100% {
    background: var(--ink-3);
  }
}

@keyframes bob-down {
  to {
    transform: translateY(6px);
  }
}

@keyframes bob-up {
  to {
    transform: translateY(-6px);
  }
}

/* "Land" keyframes: an element drops into place at a set moment of its loop and leaves at the end. */
@keyframes land-a {
  0%,
  50% {
    opacity: 0;
    transform: translateY(5px);
  }
  58%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes land-b {
  0%,
  34% {
    opacity: 0;
    transform: translateY(5px);
  }
  40%,
  94% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}

@keyframes land-c {
  0%,
  70% {
    opacity: 0;
    transform: translateY(5px);
  }
  76%,
  94% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}

@keyframes land-d {
  0%,
  32% {
    opacity: 0;
    transform: translate(-6px, -50%);
  }
  40%,
  86% {
    opacity: 1;
    transform: translate(0, -50%);
  }
  96%,
  100% {
    opacity: 0;
    transform: translate(0, -50%);
  }
}

/* Narrow screens */

@media (max-width: 960px) {
  .svc-7,
  .svc-5 {
    grid-column: span 12;
  }

  .svc-split {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .step {
    min-height: 21rem;
  }

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

  .outcome {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .step {
    min-height: 18rem;
  }
}

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

  .nav {
    gap: 1.2rem;
    font-size: 0.92rem;
  }

  .tk {
    width: 14.5rem;
  }

  .viz {
    height: 15rem;
  }

  .viz-ads {
    grid-template-columns: minmax(0, 1fr);
    padding: 1rem 1.1rem;
  }

  .ad {
    display: none;
  }

  .call {
    gap: 0.8rem;
    padding: 0.8rem 1rem 0.8rem 0.8rem;
  }

  .ring {
    width: 4.6rem;
    height: 4.6rem;
  }

  .node {
    gap: 0.55rem;
    font-size: 0.72rem;
  }

  .node i {
    width: 2rem;
    height: 2rem;
  }

  .pipeline::before,
  .lane {
    top: 1rem;
  }
}

/* New sections on narrow screens */

@media (max-width: 960px) {
  .page-hero-grid,
  .changes-grid,
  .proof-band,
  .check-grid,
  .steps-3,
  .promises,
  .achievements,
  .fit {
    grid-template-columns: minmax(0, 1fr);
  }

  .promise,
  .achievement {
    min-height: 0;
  }

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

  .foot-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .foot-id {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .leak-math,
  .leaks-nav,
  .needs,
  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .leak-link {
    min-height: 0;
  }

  .tl-item {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 2.4rem;
  }

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

@media (max-width: 560px) {
  .nav .nav-cta {
    padding: 0.45rem 0.8rem;
  }
}

@media (max-width: 960px) {
  .contact-band {
    grid-template-columns: minmax(0, 1fr);
  }

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

/* Review fixes, October 23: the hero's second line on one line, long display titles smaller, the leak
   numbers side by side on phones. */

.hero-line-sm {
  font-size: clamp(1.9rem, 0.2rem + 6.4vw, 7.2rem);
}

.display-long {
  font-size: clamp(3rem, 0.9rem + 6.6vw, 8.6rem);
}

.cta-band .cta-note {
  max-width: 52ch;
}

@media (max-width: 640px) {
  .leak-math {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .leak-math li {
    padding: 0.9rem 0.75rem;
    border-radius: 18px;
  }

  .leak-num {
    font-size: 3.1rem;
  }

  .leak-label {
    font-size: 0.85rem;
    line-height: 1.25;
  }
}

/* Round 2 fixes: each sentence of the long mechanism title fits its own line and can never overlap;
   on phones the whole promise and the button come before the example cards; two About cards. */

.display-long {
  font-size: clamp(2.2rem, 0.4rem + 5.4vw, 6rem);
  line-height: 0.95;
}

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

@media (max-width: 640px) {
  .hero {
    display: flex;
    flex-direction: column;
  }

  .hero .hero-line-sm {
    order: 1;
    margin-top: 0.4rem;
  }

  .hero .hero-foot {
    order: 2;
    margin-top: 1.4rem;
  }

  .hero .ticker {
    order: 3;
    margin-top: 2rem;
  }

  .hero .ticker-note {
    order: 4;
    margin-top: 0;
  }

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

/* The free report page: the sample sits beside the form on desktop and right after it on phones */

.check-hero {
  grid-template-areas:
    "intro form"
    "sample form";
  grid-template-rows: auto 1fr;
  align-items: start;
}

.check-intro {
  grid-area: intro;
}

.check-hero .check-form {
  grid-area: form;
}

.check-sample {
  grid-area: sample;
}

@media (max-width: 960px) {
  .check-hero {
    grid-template-areas:
      "intro"
      "form"
      "sample";
  }
}

/* Our phone number (shown once site.config.json has it) and the founding price on the home plan */

.nav-phone a {
  font-weight: 700;
}

.foot-phone {
  margin: 0;
  font-weight: 650;
}

.plan-foot .plan-price {
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 600;
}

@media (max-width: 560px) {
  .nav:has(.nav-phone) li:has([data-nav="about"]) {
    display: none;
  }
}

/* The track record as a number: "Hundreds" on the home page and in the About hero */

.proof-stat {
  display: grid;
  gap: 0.9rem;
}

.proof-stat .proof-num {
  font-size: clamp(3.6rem, 1.5rem + 6vw, 7.5rem);
  line-height: 0.85;
  text-transform: uppercase;
}

.proof-stat .proof-caption {
  max-width: 22ch;
  margin-top: 0;
}

.hero-stat {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
  border-radius: 26px;
  background: var(--ink);
  color: var(--on-ink);
}

.hero-stat-num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 1.4rem + 5vw, 6.5rem);
  line-height: 0.85;
  color: var(--brand);
  text-transform: uppercase;
}

.hero-stat-label {
  max-width: 24ch;
  font-weight: 650;
  font-size: var(--step-1);
  line-height: 1.3;
}

.trust-line {
  max-width: 44ch;
  margin: -0.8rem 0 0;
  font-weight: 650;
  line-height: 1.4;
}

/* Brand review fix: at a tight line height a comma at a line end landed on the next line's letters
   ("THE ADS $TOP"). Page and section titles get enough room for punctuation. */

.page-title,
.section-title {
  line-height: 0.95;
}

/* Final copy pass, October 23. The home hero sells the free report: one unbroken headline, the sample
   report beside it, and the example cards as a band underneath. */

.home-hero {
  overflow-x: clip;
  padding-top: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  background: var(--brand);
  color: var(--ink);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.home-title {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 0.9rem + 4.6vw, 6rem);
  line-height: 0.95;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-wrap: balance;
}

.home-sub {
  max-width: 36ch;
  margin: 0 0 1.8rem;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.home-hero .cta-note {
  max-width: 46ch;
  margin-top: 1rem;
}

.home-hero .ticker {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  margin-bottom: 0.6rem;
}

.home-hero .ticker-note {
  margin: 0;
  padding-bottom: clamp(1.2rem, 1rem + 1vw, 2rem);
  text-align: center;
}

/* What one more sale per 100 leads is worth: the owner's own numbers, worked out on the page */

.calc {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  margin: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem) 0 0;
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  border-radius: 22px;
  background: var(--ink-2);
}

.calc-title {
  margin: 0;
  font-weight: 750;
  font-size: var(--step-1);
}

.calc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.calc-fields label {
  display: grid;
  gap: 0.35rem;
  color: var(--on-ink-muted);
  font-size: 0.88rem;
  font-weight: 650;
}

.calc-fields input {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 650;
}

.calc-fields input:focus-visible {
  outline: none;
  border-color: var(--brand);
}

.calc-out {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.4;
}

.calc-out b {
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 1.6em;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.flow-in-ink {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
}

/* Problem pages: how we fix it and what changes, side by side, then the other leaks as one row */

.fix-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.fix-grid .mini-steps li {
  font-size: 1.05rem;
}

.fix-grid .mini-steps b {
  display: block;
}

.changes-card {
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  border-radius: 26px;
  background: var(--brand);
  color: var(--ink);
}

.changes-head {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.changes-card .big-ticks {
  margin-top: 1.2rem;
}

.bridge {
  max-width: 44ch;
  margin: 1rem 0 0;
  font-weight: 650;
  line-height: 1.4;
}

.reply-bar {
  display: inline-block;
  max-width: 60ch;
  margin: 0 0 1.4rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  line-height: 1.4;
}

.reply-bar b {
  color: var(--brand);
}

.leak-strip {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  background: var(--panel);
}

.leak-strip-head {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.leak-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leak-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}

.leak-strip [data-leak="plan"] a {
  background: var(--ink);
  color: var(--brand);
}

@media (hover: hover) and (pointer: fine) {
  .leak-strip a:hover {
    text-decoration: underline;
  }
}

.plan-not {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--muted);
  font-weight: 550;
  line-height: 1.5;
  text-align: center;
}

.guarantee-head {
  max-width: 30ch;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 1.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.under-button {
  max-width: 52ch;
  margin: 0.4rem 0 0;
  color: var(--on-ink-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.under-button a {
  color: var(--on-ink);
}

.why-free {
  max-width: 58ch;
}

.why-free p {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-weight: 550;
  line-height: 1.55;
}

@media (max-width: 960px) {
  .home-hero-grid,
  .fix-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .calc-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.section-ink .text-link {
  color: var(--brand);
}

.proof-link {
  display: inline-block;
  margin-top: 0.4rem;
}

.why-free h3.section-title {
  margin-top: clamp(2rem, 1.6rem + 1.5vw, 2.8rem);
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
}

.faq details .answer:not(:last-child) {
  padding-bottom: 0.6rem;
}

.cta-band .display-title {
  line-height: 0.92;
}

.check-hero {
  row-gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* Less yellow (Haim, 2026-10-23): yellow stays for the home hero, the buttons and one accent per section.
   The header and the closing band go black; inner page heroes and the plan's step cards go grey. */

.site-header {
  background: var(--ink);
  color: var(--on-ink);
}

.site-header :focus-visible {
  outline-color: var(--brand);
}

.nav .nav-cta {
  background: var(--brand);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .nav .nav-cta:hover {
    background: var(--brand-deep);
  }
}

.page-hero {
  background: var(--panel);
}

.step {
  background: var(--panel);
}

.step .step-num {
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  background: var(--brand);
}

.step p {
  color: var(--muted);
}

.cta-band {
  background: var(--ink);
  color: var(--on-ink);
}

.cta-band .display-title {
  color: var(--brand);
}

.cta-band .btn {
  background: var(--brand);
  color: var(--ink);
}

.cta-band .cta-note {
  color: var(--on-ink-muted);
}

/* The lead-costs card on black: its funnel bars turn brand-colored so they still read */

.svc-dark .funnel .bar::before {
  background: var(--brand);
}

.svc-dark .funnel .bar span {
  color: var(--ink);
}

.svc-dark .funnel .bar-sold::before {
  background: var(--on-ink);
}

.svc-dark .funnel .bar em {
  color: var(--on-ink);
}

/* The plan now follows the black proof band, so it gets the full section padding back */
.section-plan {
  padding-top: clamp(4.5rem, 3rem + 5vw, 8.5rem);
}

/* Home hero without the example-card band (2026-10-23): it carries its own bottom space and a chip above the title */
.home-hero {
  padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.home-hero .eyebrow-chip {
  margin-bottom: 1.2rem;
}

/* Inner page titles one step below the home title (2026-10-23): at 7.2rem a six-word question filled the first screen */
.page-title {
  font-size: clamp(2.5rem, 1rem + 4.4vw, 5.4rem);
}

/* The secret-shop reply line shows only to owners who came from that email (?from=shop) */
.reply-bar[hidden] {
  display: none;
}

/* Promise headings are now the promise itself, not a two-word name (2026-10-23), so they run one size smaller */
.promise h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.2rem);
  line-height: 0.95;
}

/* "We manage everything" home page (2026-10-24): audit card in the hero, the vendor row, the managed list,
   three steps and three reasons. */

.audit-items {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-items li {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  column-gap: 0.6rem;
  row-gap: 0.1rem;
  font-size: 0.95rem;
  line-height: 1.35;
}

.audit-items li::before {
  content: "";
  grid-row: span 2;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 10px var(--brand);
}

.audit-items b {
  font-weight: 750;
}

.audit-items span {
  color: var(--muted);
}

.ink-em {
  padding: 0 0.12em;
  background: var(--brand);
  font-style: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.vendor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem);
}

.vendor {
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-weight: 650;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.vendor-arrow {
  width: 2.2rem;
  height: 2px;
  background: var(--ink);
  position: relative;
}

.vendor-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -5px;
  border: 6px solid transparent;
  border-left: 9px solid var(--ink);
  border-right: 0;
}

.vendor-one {
  background: var(--ink);
  color: var(--brand);
  text-decoration: none;
}

.pain-close {
  max-width: 54ch;
  margin: clamp(1.4rem, 1rem + 1vw, 2rem) 0 0;
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.4;
}

.manage-list {
  margin: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid color-mix(in oklch, var(--on-ink) 18%, transparent);
}

.manage-list li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  row-gap: 0.4rem;
  align-items: baseline;
  padding-block: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-bottom: 1px solid color-mix(in oklch, var(--on-ink) 18%, transparent);
}

.manage-list h3 {
  grid-row: span 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.manage-list p {
  margin: 0;
  color: var(--on-ink-muted);
  font-size: var(--step-0);
  line-height: 1.5;
}

.manage-list .text-link {
  justify-self: start;
  font-weight: 650;
}

.manage-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

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

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

@media (max-width: 960px) {
  .steps-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .needs-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .manage-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .manage-list h3 {
    grid-row: auto;
  }
}

/* The highlighted half of a light-section title sits inside its own line (no bleed into the line above),
   and the managed list's text lines up with the top of its title. */
.section-title:has(.ink-em) {
  line-height: 1.08;
}

.ink-em {
  padding: 0 0.1em;
  background: linear-gradient(transparent 8%, var(--brand) 8%, var(--brand) 94%, transparent 94%);
}

.manage-list li {
  align-items: start;
}

.manage-list p {
  padding-top: 0.35rem;
}

.steps-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 62rem;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .steps-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.needs li b {
  font-weight: 800;
}

/* The hero's service list doubles as the way into each service page */
.service-links li {
  display: block;
}

.service-links li::before {
  display: none;
}

.service-links a {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  column-gap: 0.6rem;
  row-gap: 0.1rem;
  margin: -0.3rem -0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.service-links a::before {
  content: "";
  grid-row: span 2;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 10px var(--brand);
}

.service-links a::after {
  content: "\2192";
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--muted);
  font-weight: 700;
}

.service-links b,
.service-links span {
  grid-column: 2;
}

@media (hover: hover) and (pointer: fine) {
  .service-links a:hover {
    background: var(--panel);
  }
}

/* Trade pages (Haim, 2026-11-07): a page per trade we sell to, the "Who we help" page that lists them,
   the trade cards on the home page, and the board of today's leads on each trade page. */

[data-page="who"] [data-nav="who"],
[data-page="hvac"] [data-nav="who"],
[data-page="plumbing"] [data-nav="who"],
[data-page="roofing"] [data-nav="who"],
[data-page="bath"] [data-nav="who"],
[data-page="windows"] [data-nav="who"],
[data-page="waterproofing"] [data-nav="who"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Where the jobs slip away: six pains in the owner's words. The last one, the owner chasing the team,
   is the one ink card. */

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pain-grid li {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: clamp(1.25rem, 1rem + 0.9vw, 1.8rem);
  border-radius: 22px;
  background: var(--panel);
}

.pain-grid b {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pain-grid span {
  color: var(--muted);
  font-weight: 550;
  line-height: 1.45;
}

.pain-grid .pain-hi {
  background: var(--ink);
  color: var(--on-ink);
}

.pain-grid .pain-hi b {
  color: var(--brand);
}

.pain-grid .pain-hi span {
  color: var(--on-ink-muted);
}

/* Your team: what the owner can see, beside the board of today's leads */

.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.team-grid .section-head {
  margin-bottom: 0;
}

.team-grid .big-ticks {
  margin-top: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}

.board {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  border-radius: 26px;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow);
}

.board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin: 0;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid color-mix(in oklch, var(--on-ink) 18%, transparent);
}

.board-head b {
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.board-head span {
  color: var(--on-ink-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.board-rows {
  display: grid;
  gap: 0.6rem;
}

.board .row {
  width: 100%;
  background: var(--bg);
  color: var(--ink);
}

/* Trade cards: the way into each trade page, on the home page and on "Who we help" */

.trade-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trade-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.9rem;
  height: 100%;
  min-height: 13rem;
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  border-radius: 26px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 160ms var(--ease-out);
}

.trade-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.9rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.trade-line {
  max-width: 30ch;
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.35;
}

.trade-card .go {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.trade-card .go::after {
  content: " \2192";
}

@media (hover: hover) and (pointer: fine) {
  .trade-card:hover {
    background: var(--brand);
  }
}

/* The other trades sit under "Everything we manage", in the same grey band */
.leak-strip + .leak-strip {
  padding-top: 0;
}

[data-page="hvac"] [data-trade="hvac"],
[data-page="plumbing"] [data-trade="plumbing"],
[data-page="roofing"] [data-trade="roofing"],
[data-page="bath"] [data-trade="bath"],
[data-page="windows"] [data-trade="windows"],
[data-page="waterproofing"] [data-trade="waterproofing"] {
  display: none;
}

/* Who we help: what every trade has in common, on ink */
.common-ticks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 54rem;
  margin-top: 0;
}

/* The footer gains a column for the trades */
@media (min-width: 961px) {
  .foot-cols {
    grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .pain-grid,
  .trade-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 640px) {
  .pain-grid,
  .trade-cards,
  .common-ticks {
    grid-template-columns: minmax(0, 1fr);
  }

  .trade-card {
    min-height: 0;
  }
}

/* A chip that wraps (the long trade lists) splits evenly instead of leaving one word alone */
.eyebrow-chip {
  text-wrap: balance;
}