/* ============================================================
   LOUDMOUTH MEDIA — styles.css  (v2)
   Mobile first. Base rules are for phones; @media (min-width)
   blocks add the tablet and desktop layout.

   Brand tokens (do not add other colors):
     --bg   #101216  near-black background
     --fg   #f2f3f5  off-white text
     --red  #e0161f  the only accent
   Every "glow", "grid line" or "gradient" here is red or
   off-white at some transparency. Nothing else.

   Motion budget: an infinite loop is allowed only where it carries
   meaning (hero wave and glow, marquee, phone demos, pipeline pulse,
   dot map, the wall, and bento illustrations while on screen).
   Everything else plays once or not at all.
   ============================================================ */

:root {
  --bg: #101216;
  --bg-2: #14171c;             /* lifted surface for cards */
  --bg-3: #1a1e25;             /* hover surface */
  --fg: #f2f3f5;
  --fg-muted: rgba(242, 243, 245, 0.72);
  --fg-faint: rgba(242, 243, 245, 0.55);
  --line: rgba(242, 243, 245, 0.10);
  --line-strong: rgba(242, 243, 245, 0.18);
  --red: #e0161f;
  --red-glow: rgba(224, 22, 31, 0.35);

  --font-head: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-body: "Archivo", Arial, Helvetica, sans-serif;

  --container: 1200px;
  --gutter: 20px;
  --radius: 14px;
  --radius-sm: 8px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 700ms;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;              /* Archivo Black only ships one weight */
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h2 { font-size: clamp(34px, 6vw, 60px); }
h3 { font-size: 22px; line-height: 1.2; }

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.section { position: relative; padding: 80px 0; }
.section-head { max-width: 760px; margin-bottom: 44px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 16px;
}
.eyebrow-num {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  padding-right: 10px;
  border-right: 1px solid var(--line-strong);
}
.eyebrow-light { color: rgba(242, 243, 245, 0.85); }
.eyebrow-light .eyebrow-num { color: rgba(242, 243, 245, 0.6); border-color: rgba(242, 243, 245, 0.3); }

.lead { font-size: 19px; color: var(--fg-muted); max-width: 60ch; }
.red { color: var(--red); }
/* The word SAMPLE as a text bubble, same silhouette as the outgoing chat bubble */
.kw { display: inline-block; padding: 0.06em 0.32em 0.1em; margin: 0 0.04em; border-radius: 0.42em 0.42em 0.12em 0.42em; background: var(--red); color: var(--fg); font-family: var(--font-head); font-size: 0.86em; letter-spacing: 0.04em; line-height: 1.1; vertical-align: 0.04em; text-transform: uppercase; }

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

/* Keyboard focus. Visible, high contrast, never removed. */
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; border-radius: 4px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 100;
  padding: 10px 14px; background: var(--red); color: var(--fg);
  font-weight: 700; text-decoration: none; border-radius: 6px;
}
.skip-link:focus { top: 12px; }

/* Pulsing red dot used for "online" states */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
}


/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--red);
  color: var(--fg);
  font-family: var(--font-head);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 220ms var(--ease-out), box-shadow 220ms, background 220ms;
  box-shadow: 0 0 0 rgba(224, 22, 31, 0), inset 0 0 0 1px rgba(242, 243, 245, 0.12);
  will-change: transform;
}
/* Sheen that sweeps across on hover */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(242, 243, 245, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 600ms var(--ease-out);
}
.btn:hover { background: var(--red); box-shadow: 0 12px 36px var(--red-glow), inset 0 0 0 1px rgba(242, 243, 245, 0.25); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(0.98); }
.btn-large { padding: 18px 28px; font-size: 17px; border-radius: 12px; }
.btn-small { padding: 10px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-arrow { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16, 18, 22, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, background 200ms;
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(16, 18, 22, 0.92); }

.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand img { width: 170px; height: auto; }

.site-nav ul { display: flex; flex-direction: column; gap: 4px; }
.site-nav a:not(.btn) {
  display: block; padding: 12px 0;
  font-weight: 500; text-decoration: none; color: var(--fg);
  border-bottom: 1px solid var(--line);
}
.site-nav a:not(.btn):hover { color: var(--red); }
.site-nav .btn { margin-top: 14px; width: 100%; }

/* Mobile: nav is a drop-down panel under the header */
.site-nav {
  position: absolute; top: 68px; left: 0; right: 0;
  padding: 8px var(--gutter) 24px;
  background: rgba(16, 18, 22, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  display: none;
}
.site-nav.is-open { display: block; }

.nav-toggle {
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
  display: grid; gap: 5px; align-content: center;
}
.nav-toggle span { display: block; height: 2px; background: var(--fg); transition: transform 200ms, opacity 200ms; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Phone-only "Free sample" pill beside the menu button */
.header-cta { margin-left: auto; margin-right: 8px; padding: 9px 12px; font-size: 12px; white-space: nowrap; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - 68px);
  display: flex;
  align-items: center;
  padding: 56px 0 150px;
  overflow: hidden;
  isolation: isolate;
}

/* Faint engineering grid behind everything, fades toward the edges */
.hero-grid {
  position: absolute; inset: 0; z-index: -3;
  background-image:
    linear-gradient(rgba(242, 243, 245, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 243, 245, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* Slow red glow. No blur filter (expensive on phones); a soft radial gradient does the job. */
.hero-glow {
  position: absolute; z-index: -2;
  width: 90vmax; height: 90vmax;
  left: -30vmax; top: -30vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 22, 31, 0.44) 0%, rgba(224, 22, 31, 0.16) 30%, rgba(224, 22, 31, 0) 62%);
  animation: drift 24s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}
.hero-glow-bottom { left: auto; right: -35vmax; top: auto; bottom: -45vmax; animation-duration: 32s; z-index: 0; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(16vmax, 10vmax) scale(1.12); }
}

.hero-wave {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 40%; max-height: 320px;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 100%);
          mask-image: linear-gradient(to top, #000 40%, transparent 100%);
}

.hero-inner { position: relative; display: grid; gap: 48px; }

.hero-eyebrow {
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(224, 22, 31, 0.4);
  border-radius: 999px;
  background: rgba(224, 22, 31, 0.08);
  opacity: 0;
  animation: fade-up 700ms var(--ease-out) 150ms forwards;
}
.eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 10px var(--red);
}

.hero-copy { container-type: inline-size; }
.hero-headline {
  font-size: clamp(54px, 15vw, 140px);
  /* Never wider than the column: "phone ring." is 5.73em wide, so cap the size at column / 6.
     Browsers without container units ignore this line and keep the clamp above. */
  font-size: min(clamp(54px, 15vw, 140px), 16.6cqi);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  max-width: 10ch;
}
.hero-headline .keep { white-space: nowrap; }
.hero-headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotate(2deg);
  animation: word-in 900ms var(--ease-out) forwards;
  animation-delay: calc(300ms + var(--i, 0) * 110ms);
}
.hero-headline .word.accent { position: relative; color: var(--red); }
/* Ring waves behind the accent word */
/* Three shout marks, straight from the logo, bursting off the top right */
.hero-headline .word.accent::before {
  content: "";
  position: absolute;
  right: -0.42em; top: -0.34em;
  width: 0.5em; height: 0.5em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23e0161f' stroke-width='5' stroke-linecap='round'%3E%3Cline x1='6' y1='30' x2='16' y2='20'/%3E%3Cline x1='16' y1='36' x2='28' y2='34'/%3E%3Cline x1='8' y1='14' x2='12' y2='4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  transform-origin: 20% 80%;
  opacity: 0;
  animation: shout-burst 600ms var(--ease-out) 1250ms 1 forwards;
}
@keyframes shout-burst {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes word-in { to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-sub {
  font-size: 18px; color: var(--fg-muted);
  max-width: 36ch; margin-bottom: 30px;
  opacity: 0; animation: fade-up 700ms var(--ease-out) 950ms forwards;
}
.hero-actions { opacity: 0; animation: fade-up 700ms var(--ease-out) 1150ms forwards; }
.hero-note { margin: 14px 0 0; font-size: 14px; color: var(--fg-faint); }

.hero-ticks {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 30px;
  font-size: 14px; font-weight: 600; color: var(--fg-muted);
  opacity: 0; animation: fade-up 700ms var(--ease-out) 1350ms forwards;
}
.hero-ticks li { display: flex; align-items: center; gap: 8px; }
.hero-ticks li::before, .care-list li::before, .ledger-col li::before {
  content: "";
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23000'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23000'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Phone demo --- */
.hero-demo {
  opacity: 0;
  animation: fade-up 900ms var(--ease-out) 900ms forwards;
  justify-self: center;
  width: 100%;
  max-width: 340px;
}
.phone {
  position: relative;
  border-radius: 38px;
  padding: 14px;
  background: linear-gradient(160deg, rgba(242, 243, 245, 0.14), rgba(242, 243, 245, 0.04));
  box-shadow:
    inset 0 0 0 1px rgba(242, 243, 245, 0.18),
    0 30px 70px rgba(16, 18, 22, 0.55),
    0 0 80px rgba(224, 22, 31, 0.15);
  transform: perspective(1200px) rotateY(-4deg) rotateX(1.5deg);
  transition: transform 600ms var(--ease-out);
}
.phone:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.phone::before {
  /* inner screen */
  content: "";
  position: absolute; inset: 14px;
  border-radius: 26px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(242, 243, 245, 0.08);
}
.phone-notch {
  position: absolute; top: 24px; left: 50%;
  width: 96px; height: 22px; margin-left: -48px;
  border-radius: 999px; background: var(--bg);
  z-index: 2;
}
.phone-top {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 48px 16px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
}
.phone-avatar { width: 28px; height: 28px; }
.phone-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: var(--fg-faint); border: 1px solid var(--line-strong); padding: 3px 6px; border-radius: 999px;
}
.chat {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 14px 18px;
  min-height: 300px;
}
.chat li {
  max-width: 86%;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-spring);
}
.chat li.is-shown { opacity: 1; transform: none; }
.chat-chip {
  align-self: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--fg-muted);
  background: rgba(242, 243, 245, 0.06);
  border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 999px;
}
.chat-chip-done { color: var(--fg); background: var(--red); border-color: var(--red); }
.chat-out, .chat-in {
  padding: 10px 12px 8px;
  border-radius: 16px;
  font-size: 14px; line-height: 1.4;
}
.chat-out { align-self: flex-end; background: var(--red); color: var(--fg); border-bottom-right-radius: 4px; }
.chat-in  { align-self: flex-start; background: rgba(242, 243, 245, 0.1); border-bottom-left-radius: 4px; }
.chat-time { display: block; margin-top: 4px; font-size: 10px; opacity: 0.7; text-align: right; }
.chat-typing {
  position: absolute; left: 28px; bottom: 26px; z-index: 1;
  display: none; gap: 4px;
  padding: 9px 12px; border-radius: 16px; border-bottom-left-radius: 4px;
  background: rgba(242, 243, 245, 0.1);
}
.chat-typing.is-shown { display: flex; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted);
  animation: typing 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.demo-caption { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--fg-faint); }


/* Giant outlined LOUD behind the hero, breathing slowly */
.hero-ghost {
  position: absolute; z-index: -2;
  left: -0.04em; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-head);
  font-size: clamp(150px, 36vw, 560px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(224, 22, 31, 0.18);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}


/* ---------- Marquee ---------- */
.marquee-block {
  padding: 22px 0;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee + .marquee { margin-top: 14px; }
.marquee-track {
  display: flex; gap: 0; width: max-content;
  animation: marquee var(--marquee-dur, 40s) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li {
  display: flex; align-items: center; gap: 10px;
  margin-right: 44px;
  white-space: nowrap;
  font-family: var(--font-head); font-size: 15px;
  color: var(--fg-muted);
}
.marquee-reverse .marquee-track li { margin-right: 40px; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }
.marquee-reverse .marquee-track li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.platform svg { width: 24px; height: 24px; color: var(--fg); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-reverse .marquee-track .marquee-you { color: var(--fg); }
.marquee-reverse .marquee-track .marquee-you::before { background: var(--fg); }

/* ---------- Your week (before / after) ---------- */
.week { border-top: 1px solid var(--line); }
.services { border-top: 1px solid var(--line); }
.trades { border-top: 1px solid var(--line); }
.week-inner { display: grid; gap: 44px; }
.week-rows { border-top: 1px solid var(--line-strong); }
.week-head { display: none; }
.week-row { display: grid; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.week-when { font-family: var(--font-head); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.week-when b { font-weight: 400; color: var(--red); margin-right: 6px; }
.week-now, .week-with { margin: 0; }
.week-now { font-size: 16px; line-height: 1.5; color: var(--fg-muted); }
.week-with { position: relative; padding-left: 14px; font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--fg); }
.week-with::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; background: var(--red); box-shadow: 0 0 10px var(--red-glow); transform: scaleY(0); transform-origin: top; transition: transform 600ms var(--ease-out) 350ms; }
.week-row.is-visible .week-with::before { transform: scaleY(1); }
.week-tag { display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 999px; font-family: var(--font-head); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 2px; }
.week-now .week-tag { color: var(--fg-faint); border: 1px solid var(--line-strong); }
.week-with .week-tag { color: var(--fg); background: var(--red); }
.week-cta { display: grid; gap: 14px; justify-items: start; margin: 44px 0 0; }
.week-cta .hero-note { margin: 0; }

/* Lock-screen phone: notifications stack up (main.js) */
.week-demo { width: 100%; max-width: 300px; justify-self: center; }
.phone-lock { transform: perspective(1200px) rotateY(6deg) rotateX(2deg); }
.phone-lock::before { background: radial-gradient(120% 55% at 50% 108%, rgba(224, 22, 31, 0.30), rgba(224, 22, 31, 0) 70%), var(--bg); }
.lock-clock { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; padding: 58px 16px 16px; }
.lock-day { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.lock-time { font-family: var(--font-head); font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
.notes { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 46px; min-height: 300px; }
.note { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(242, 243, 245, 0.10); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; opacity: 0; transform: translateY(-12px) scale(0.97); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-spring); }
.note.is-shown { opacity: 1; transform: none; }
.note b { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.note b::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.note span { color: var(--fg-muted); }
.note-done { background: var(--red); border-color: var(--red); color: var(--fg); }
.note-done b::before { background: var(--fg); }
.note-done span { color: rgba(242, 243, 245, 0.88); }
.lock-tag { position: absolute; z-index: 1; left: 50%; bottom: 24px; transform: translateX(-50%); }

/* ---------- Services bento ---------- */
.bento { display: grid; grid-template-columns: 1fr; gap: 14px; }

.card {
  --mx: 50%; --my: 50%;
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 24px 0;
  min-height: 300px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 300ms;
}
/* Cursor-tracked spotlight (position set by main.js) */
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(224, 22, 31, 0.10), transparent 45%);
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
/* Red bar that grows across the top on hover */
.card::after {
  content: "";
  position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--ease-out);
}
.card:hover { border-color: rgba(224, 22, 31, 0.5); }
.card:hover::before { opacity: 1; }
.card:hover::after { transform: scaleX(1); }

.card-body { position: relative; z-index: 1; }
.card .icon {
  width: 48px; height: 48px; margin-bottom: 18px;
  fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.card h3 { margin-bottom: 10px; }
.card p { margin: 0; color: var(--fg-muted); font-size: 16px; }

/* Illustration area at the bottom of each card */
.viz {
  position: relative; z-index: 1;
  margin: 22px -24px 0;
  padding: 0 24px;
  flex: 1;
  min-height: 150px;
  display: flex; align-items: flex-end; justify-content: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
/* Illustrations animate only while their card is on screen (main.js toggles .is-live) */
.card .viz, .card .viz *, .card .viz *::before, .card .viz *::after { animation-play-state: paused; }
.card.is-live .viz, .card.is-live .viz *, .card.is-live .viz *::before, .card.is-live .viz *::after,
html.no-js .card .viz, html.no-js .card .viz *, html.no-js .card .viz *::before, html.no-js .card .viz *::after { animation-play-state: running; }

/* Ad creative mockup */
.viz-ad { flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 6px; }
.ad-frame {
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--bg); overflow: hidden;
}
.ad-thumb {
  position: relative; height: 110px;
  background: linear-gradient(135deg, rgba(224, 22, 31, 0.35), rgba(224, 22, 31, 0.05));
  display: grid; place-items: center;
}
.ad-play {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--red); position: relative;
}
.ad-play::after { content: ""; position: absolute; left: 15px; top: 12px; border-left: 12px solid var(--fg); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.ad-bars { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; gap: 4px; align-items: flex-end; height: 22px; }
.ad-bars i { flex: 1; background: rgba(242, 243, 245, 0.7); border-radius: 2px; height: 30%; animation: eq 1.2s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 0.1s); }
.ad-bars i:nth-child(2n) { --n: 1; } .ad-bars i:nth-child(3n) { --n: 2; } .ad-bars i:nth-child(4n) { --n: 3; } .ad-bars i:nth-child(5n) { --n: 4; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.ad-meta { padding: 12px 12px 12px; display: grid; gap: 8px; }
.ad-line { display: block; height: 8px; border-radius: 4px; background: rgba(242, 243, 245, 0.18); }
.ad-line-1 { width: 70%; } .ad-line-2 { width: 45%; }
.ad-cta { justify-self: start; margin-top: 4px; padding: 6px 10px; border-radius: 6px; background: var(--red); color: var(--fg); font-family: var(--font-head); font-size: 11px; }
.ad-progress { height: 3px; background: rgba(242, 243, 245, 0.1); }
.ad-progress span { display: block; height: 100%; background: var(--red); animation: progress 6s linear infinite; }
@keyframes progress { from { width: 0; } to { width: 100%; } }
.ad-platforms { display: flex; gap: 8px; }
.ad-platforms li { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--line); padding: 4px 8px; border-radius: 999px; }

/* Landing page mockup with a cursor that clicks the button */
.viz-page { align-items: flex-end; padding-bottom: 0; }
.browser {
  position: relative; width: 100%; max-width: 300px;
  border: 1px solid var(--line-strong); border-bottom: 0;
  border-radius: 10px 10px 0 0; background: var(--bg); overflow: hidden;
}
.browser-bar { display: flex; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(242, 243, 245, 0.25); }
.browser-body { padding: 14px 14px 20px; display: grid; gap: 8px; }
.sk { display: block; border-radius: 4px; background: rgba(242, 243, 245, 0.18); }
.sk-h { height: 12px; width: 62%; background: rgba(242, 243, 245, 0.35); }
.sk-t { height: 7px; width: 90%; } .sk-short { width: 55%; }
.sk-btn {
  justify-self: start; margin-top: 6px; padding: 7px 12px; border-radius: 6px;
  background: var(--red); color: var(--fg); font-family: var(--font-head); font-size: 11px;
  animation: btn-pulse 3.2s ease-in-out infinite;
}
@keyframes btn-pulse { 0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(224, 22, 31, 0); } 62% { box-shadow: 0 0 0 8px rgba(224, 22, 31, 0.35); transform: scale(0.96); } 70% { transform: scale(1); } }
.browser .cursor {
  position: absolute; width: 18px; height: 18px;
  fill: var(--fg); stroke: var(--bg); stroke-width: 1.2;
  animation: cursor-move 3.2s ease-in-out infinite;
}
@keyframes cursor-move {
  0%   { transform: translate(210px, 20px); }
  45%  { transform: translate(52px, 86px); }
  60%  { transform: translate(52px, 86px) scale(0.85); }
  70%  { transform: translate(52px, 86px); }
  100% { transform: translate(210px, 20px); }
}

/* Follow-up flow with a traveling pulse */
.viz-flow { flex-direction: column; align-items: stretch; justify-content: center; padding-bottom: 12px; }
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.flow::before { content: ""; position: absolute; left: 6%; right: 6%; top: 7px; height: 2px; background: var(--line-strong); }
.flow li { position: relative; text-align: center; font-size: 11px; font-weight: 600; color: var(--fg-muted); padding-top: 22px; }
.flow li::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: var(--bg-2); border: 2px solid var(--red);
  animation: node-light 4s ease-in-out infinite; animation-delay: calc(var(--i) * 1s);
}
.flow li:nth-child(1) { --i: 0; } .flow li:nth-child(2) { --i: 1; } .flow li:nth-child(3) { --i: 2; } .flow li:nth-child(4) { --i: 3; }
@keyframes node-light { 0%, 20%, 100% { background: var(--bg-2); box-shadow: none; } 8% { background: var(--red); box-shadow: 0 0 14px var(--red); } }
.flow::after {
  content: ""; position: absolute; top: 3px; left: 6%; width: 10px; height: 10px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red);
  animation: pulse-x 4s linear infinite;
}
@keyframes pulse-x { from { left: 6%; } to { left: calc(94% - 10px); } }

/* Node graph */
.viz-nodes { -webkit-mask-image: none; mask-image: none; padding-bottom: 20px; }
.viz-nodes svg { width: 100%; max-width: 340px; height: auto; }
.node-lines path { stroke-dasharray: 6 8; animation: dash 1.6s linear infinite; opacity: 0.7; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.node-dots circle { filter: drop-shadow(0 0 6px rgba(224, 22, 31, 0.8)); }
.node-dots circle:first-child { animation: ping-svg 2.4s ease-out infinite; transform-origin: 160px 60px; }
@keyframes ping-svg { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Ripple rings */
.viz-ripple { position: relative; min-height: 150px; }
.viz-ripple i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 16px var(--red); }
.viz-ripple span {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 2px solid var(--red); border-radius: 50%; opacity: 0;
  animation: ripple 3s ease-out infinite;
}
.viz-ripple span:nth-child(2) { animation-delay: 1s; }
.viz-ripple span:nth-child(3) { animation-delay: 2s; }
@keyframes ripple { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(4.2); opacity: 0; } }

/* Clock */
.viz-clock { flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.clock {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: radial-gradient(circle at center, rgba(224, 22, 31, 0.12), transparent 70%);
}
.clock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--red); }
.hand { position: absolute; left: 50%; bottom: 50%; width: 2px; background: var(--fg); transform-origin: bottom center; border-radius: 2px; }
.hand-h { height: 22px; margin-left: -1px; animation: spin 288s linear infinite; }
.hand-m { height: 32px; margin-left: -1px; background: var(--red); animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.clock-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }

/* Dot-matrix USA map (dots are generated by main.js) */
.viz-map { align-items: center; padding-bottom: 8px; }
.dotmap {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 3px;
  width: 100%; max-width: 520px;
}
.dotmap i {
  display: block; aspect-ratio: 1; border-radius: 50%;
  background: rgba(242, 243, 245, 0.16);
  transition: background 600ms, box-shadow 600ms;
}
.dotmap i.is-lit { background: var(--red); box-shadow: 0 0 8px var(--red); }
.dotmap i.is-empty { background: transparent; }

/* ---------- How it works ---------- */
.how { background: var(--bg-2); border-top: 1px solid var(--line); }

.pipeline { position: relative; margin: 0 0 56px; padding: 10px 0 0; }
.pipeline-svg { position: absolute; left: 0; right: 0; top: 10px; width: 100%; height: 40px; }
.pipe-track { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.pipe-pulse {
  fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 90 920;
  stroke-dashoffset: 90;
  animation: pipe 4.5s linear infinite;
}
@keyframes pipe { to { stroke-dashoffset: -920; } }
.pipeline-nodes { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.pipeline-nodes li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.node-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-2); border: 2px solid var(--fg-muted);
  margin-top: 13px;
}
.node-dot-end { background: var(--red); border-color: var(--red); box-shadow: 0 0 14px var(--red); }
.node-label { font-size: 11px; line-height: 1.25; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }

.steps { display: grid; gap: 28px; }
.step {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 300ms;
}
.step:hover { border-color: rgba(224, 22, 31, 0.5); }
.step-num {
  display: block; font-family: var(--font-head); font-size: 44px; line-height: 1;
  color: var(--red); margin-bottom: 10px;
}
.step p { color: var(--fg-muted); margin: 0; }
.step-you { border-color: rgba(224, 22, 31, 0.5); background: linear-gradient(180deg, rgba(224, 22, 31, 0.08), transparent); }

/* ---------- Ledger: who handles what ---------- */
.ledger { display: grid; gap: 14px; margin-top: 44px; }
.ledger-col { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.ledger-yours { border-color: rgba(224, 22, 31, 0.5); background: linear-gradient(180deg, rgba(224, 22, 31, 0.08), transparent); }
.ledger-col h3 { font-size: 24px; margin-bottom: 14px; }
.ledger-col ul { display: grid; gap: 10px; }
.ledger-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--fg-muted); }
.ledger-col li::before { flex: none; margin-top: 5px; }
.ledger-yours li { font-size: 18px; font-weight: 600; color: var(--fg); }
.ledger-yours li::before { width: 16px; height: 16px; margin-top: 6px; }
.ledger-kicker { margin: 18px 0 0; font-family: var(--font-head); font-size: 14px; color: var(--fg); }

/* ---------- Client care ---------- */
.care { background: var(--bg-2); border-top: 1px solid var(--line); }
.care-grid { display: grid; gap: 40px; }
.care-timeline { position: relative; display: grid; gap: 36px; }
.care-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line-strong); }
.care-stage { position: relative; padding-left: 32px; }
.care-stage::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--red); transition: background 400ms, box-shadow 400ms; }
.care-stage.is-visible::before, html.no-js .care-stage::before { background: var(--red); box-shadow: 0 0 14px var(--red); }
.care-when { display: block; font-family: var(--font-head); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.care-stage h3 { font-size: 22px; margin-bottom: 12px; }
.care-list { display: grid; gap: 10px; }
.care-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--fg-muted); }
.care-list li::before { flex: none; margin-top: 5px; }

/* The report card: four rows of bars, no digits */
.care-report { display: grid; gap: 14px; }
.report { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); padding: 18px; }
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.report-title { font-family: var(--font-head); font-size: 14px; }
.report-rows { display: grid; gap: 10px; }
.report-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--fg-muted); }
.report-v { flex: none; height: 10px; border-radius: 5px; background: rgba(242, 243, 245, 0.28); transform: scaleX(0); transform-origin: right; }
.report-v-red { background: var(--red); box-shadow: 0 0 10px var(--red-glow); }
.report-rows li:nth-child(1) .report-v { width: 44px; --i: 1; }
.report-rows li:nth-child(2) .report-v { width: 60px; --i: 2; }
.report-rows li:nth-child(3) .report-v { width: 36px; --i: 3; }
.report-rows li:nth-child(4) .report-v { width: 68px; --i: 4; }
.care-report.is-visible .report-v, html.no-js .report-v { animation: report-fill 700ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 120ms); }
@keyframes report-fill { to { transform: scaleX(1); } }
.report-notes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.report-notes p { margin: 0; display: grid; gap: 6px; }
.report-notes b { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); }
.report-caption { margin: 0; font-size: 14px; color: var(--fg-faint); max-width: 44ch; }

/* ---------- Trades (image mosaic) ---------- */
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-2); isolation: isolate;
}
.trade-tall { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.trade img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85);
  transform: translateY(var(--py, 0)) scale(1.12);
  transition: filter 500ms;
  will-change: transform;
}
.trade::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16, 18, 22, 0.92) 0%, rgba(16, 18, 22, 0.25) 55%, rgba(16, 18, 22, 0.05) 100%);
}
.trade::before {
  /* red frame that appears on hover */
  content: ""; position: absolute; inset: 0; z-index: 2;
  border: 2px solid var(--red); border-radius: var(--radius);
  opacity: 0; transition: opacity 300ms;
}
.trade:hover img { filter: saturate(1.05); }
.trade:hover::before { opacity: 1; }
.trade-label {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  padding: 7px 11px; background: var(--red); color: var(--fg);
  font-family: var(--font-head); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 4px;
}
/* The wall: every business type, lit at random while in view */
.wall { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 18px; }
.wall li { display: flex; align-items: center; font-family: var(--font-head); font-size: clamp(16px, 4vw, 26px); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg-muted); transition: color 500ms, text-shadow 500ms; }
.wall li::after { content: ""; flex: none; width: 6px; height: 6px; margin: 0 10px; border-radius: 50%; background: var(--red); }
.wall li:last-child::after, .wall li:nth-last-child(2)::after { display: none; }
.wall li.is-lit, .wall li:hover { color: var(--fg); text-shadow: 0 0 18px rgba(224, 22, 31, 0.55); }
.wall-you { color: var(--fg); background: var(--red); padding: 3px 12px; border-radius: 6px; }
.wall-you.is-lit, .wall-you:hover { color: var(--fg); text-shadow: none; }
.wall-note { margin: 0 0 40px; font-size: 15px; color: var(--fg-muted); max-width: 56ch; }
.wall-note a { color: var(--fg); }

/* ---------- Promise (scroll-lit words) ---------- */
.promise { background: var(--red); color: var(--fg); overflow: hidden; }
.promise-headline {
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.12;
  max-width: 24ch;
  margin-bottom: 40px;
}
.promise-headline .w { color: rgba(242, 243, 245, 0.8); transition: color 300ms; }
.promise-headline .w.is-lit { color: var(--fg); }
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badge {
  flex: 1 1 240px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: var(--bg); color: var(--fg);
  border-radius: 10px; font-size: 15px; line-height: 1.3;
}
.badge strong { display: block; font-family: var(--font-head); font-weight: 400; font-size: 16px; }
.badge svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Straight talk (why a new agency) ---------- */
.why { background: var(--bg-2); border-top: 1px solid var(--line); }
.why .step { background: var(--bg); }
.why-grid { gap: 14px; }
.why-note { margin: 24px 0 0; font-size: 14px; color: var(--fg-faint); max-width: 60ch; }
.why-note a { color: var(--fg); }

/* ---------- Final CTA + form ---------- */
.cta { overflow: hidden; border-top: 1px solid var(--line); }
.cta-inner { position: relative; z-index: 1; display: grid; gap: 40px; }
.cta-alt { color: var(--fg-muted); font-size: 15px; }
.cta-alt a { color: var(--fg); }

.next-steps { display: grid; gap: 12px; margin: 8px 0 26px; }
.next-steps li { display: flex; gap: 14px; align-items: flex-start; color: var(--fg-muted); font-size: 16px; }
.next-steps span {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(224, 22, 31, 0.6); color: var(--fg);
  font-family: var(--font-head); font-size: 14px;
}
.next-label { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.catch { margin: 0 0 22px; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius-sm); }
.catch-q { margin: 0 0 6px; font-family: var(--font-head); font-size: 17px; line-height: 1.2; }
.catch-q::before { content: "\201C"; color: var(--red); }
.catch-q::after  { content: "\201D"; color: var(--red); }
.catch-a { margin: 0; font-size: 15px; color: var(--fg-muted); }

.form-shell {
  position: relative;
  padding: 1px;
  border-radius: calc(var(--radius) + 1px);
  background: var(--line-strong);
  transition: background 200ms;
}
.form-shell:focus-within { background: var(--red); }
.sample-form {
  position: relative;
  padding: 28px 22px;
  background: var(--bg-2);
  border-radius: var(--radius);
}
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.field { margin-bottom: 16px; }
.field-row { display: grid; gap: 0 14px; }
.field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.field .optional { font-weight: 400; color: var(--fg-faint); }
.field .hint { display: block; margin-top: 6px; font-size: 13px; color: var(--fg-faint); }
.field input {
  width: 100%; padding: 14px 14px;
  font: inherit; font-size: 16px;               /* 16px stops iOS from zooming on focus */
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color 160ms, box-shadow 160ms;
}
.field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(224, 22, 31, 0.3); }
.field input[aria-invalid="true"] { border-color: var(--red); }
.field .error { display: block; margin-top: 6px; font-size: 13px; color: var(--fg); }
.field .error::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--red); vertical-align: 1px; }

.btn-spinner {
  display: none; width: 18px; height: 18px;
  border: 2px solid rgba(242, 243, 245, 0.4); border-top-color: var(--fg); border-radius: 50%;
  animation: spin 800ms linear infinite;
}
.sample-form.is-sending .btn-spinner { display: inline-block; }
.sample-form.is-sending .btn { pointer-events: none; opacity: 0.85; }

.form-status { margin: 14px 0 0; font-weight: 700; min-height: 1.4em; }
.form-status.is-error { color: var(--red); }
.form-fine { margin: 10px 0 0; font-size: 13px; color: var(--fg-faint); }
.form-fine a { color: var(--fg-muted); }

.sample-form.is-sent .field, .sample-form.is-sent .field-row,
.sample-form.is-sent .btn, .sample-form.is-sent .form-fine { display: none; }
.sample-form.is-sent .form-status { font-size: 22px; font-family: var(--font-head); font-weight: 400; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; overflow: hidden;
  padding: 56px 0 28px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.footer-inner { position: relative; display: grid; gap: 32px; }
.footer-brand img { width: 48px; margin-bottom: 14px; }
.footer-bio { color: var(--fg-muted); max-width: 40ch; margin: 0; }
.footer-nav ul { display: grid; gap: 2px; }
.footer-nav a { display: block; padding: 6px 0; color: var(--fg-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--fg); }
.footer-meta p { margin: 0 0 6px; }
.footer-meta a { color: var(--fg-muted); }
.footer-meta a:hover { color: var(--fg); }
.social { display: flex; gap: 10px; margin-top: 14px; }
.social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line-strong); border-radius: 10px; color: var(--fg);
  transition: border-color 160ms, color 160ms;
}
.social a:hover { border-color: var(--red); color: var(--red); }
.social svg { width: 20px; height: 20px; }
.footer-legal {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--fg-faint); font-size: 13px;
}
.footer-legal p { margin: 0; }
.footer-legal a { color: var(--fg-muted); }

/* ---------- Scroll reveal ----------
   Elements with .reveal start hidden and get .is-visible from
   main.js when they enter the viewport. If JS never runs, the
   no-js fallback below shows everything. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }
html.no-js .chat li { opacity: 1; transform: none; }
html.no-js .promise-headline .w { color: var(--fg); }
html.no-js .week-with::before { transform: none; }
html.no-js .note { opacity: 1; transform: none; }

/* ---------- Reduced motion ----------
   Everything still appears, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .hero-eyebrow, .hero-sub, .hero-actions, .hero-ticks, .hero-demo, .hero-headline .word {
    opacity: 1 !important; transform: none !important;
  }
  .chat li { opacity: 1 !important; transform: none !important; }
  .promise-headline .w { color: var(--fg) !important; }
  .marquee-track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; width: auto; justify-content: center; gap: 14px 28px; }
  .phone, .phone-lock { transform: none; }
  .week-with::before { transform: none !important; }
  .note { opacity: 1 !important; transform: none !important; }
  .trade img { transform: none; }
  .hero-headline .word.accent::before { opacity: 1; transform: none; }
  .report-v { transform: none !important; animation: none !important; }
  .marquee-track li { margin-right: 0; }
  .card .viz, .card .viz *, .card .viz *::before, .card .viz *::after { animation: none; }
}

/* ============================================================
   TABLET  (≥ 700px)
   ============================================================ */
@media (min-width: 700px) {
  :root { --gutter: 32px; }
  body { font-size: 18px; }
  .section { padding: 110px 0; }

  .brand img { width: 200px; }

  .hero { padding: 80px 0 120px; }
  .hero-headline { max-width: 12ch; }
  .hero-sub { font-size: 20px; max-width: 42ch; }

  .bento { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .card { padding: 32px 28px 0; }
  .viz { margin: 24px -28px 0; padding: 0 28px; }
  .card-ads { grid-column: 1 / 3; }
  .card-usa { grid-column: 1 / 3; }

  .pipeline-svg { height: 40px; }
  .node-label { font-size: 12px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .steps.why-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hero-ticks { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
  .ledger { grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
  .care-stage h3 { font-size: 24px; }
  .care-report { max-width: 520px; }

  .week-rows { border-top: 0; }
  .week-head { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 28px; padding: 0 0 12px; border-bottom: 1px solid var(--line-strong); font-family: var(--font-head); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
  .week-row { grid-template-columns: 120px 1fr 1fr; gap: 28px; align-items: start; padding: 26px 0; }
  .week-tag { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .week-now { font-size: 17px; }
  .week-with { font-size: 18px; }

  .wall { gap: 8px 0; margin-bottom: 22px; }
  .wall li::after { width: 7px; height: 7px; margin: 0 16px; }
  .wall-note { margin-bottom: 48px; }
  .step-num { font-size: 56px; }

  .trade-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
  .trade { aspect-ratio: auto; min-height: 220px; }
  .trade-tall { grid-column: 1 / 2; grid-row: 1 / 3; aspect-ratio: auto; }


  .cta-inner { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 56px; }
  .sample-form { padding: 36px 32px; }
  .field-row { grid-template-columns: 1fr 1fr; }

  .footer-inner { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* ============================================================
   DESKTOP  (≥ 1000px)
   ============================================================ */
@media (min-width: 1000px) {
  .header-inner { height: 78px; }
  .site-nav { position: static; display: block; padding: 0; border: 0; background: none; backdrop-filter: none; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 24px; }
  .site-nav a:not(.btn) { padding: 0; border: 0; white-space: nowrap; font-size: 14px; color: var(--fg-muted); }
  .site-nav a:not(.btn):hover { color: var(--fg); }
  .site-nav .btn { margin: 0; width: auto; }
  .nav-toggle { display: none; }

  .hero { min-height: calc(100svh - 78px); }
  .hero-inner { grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 48px; }
  .hero-headline { font-size: clamp(84px, 9.6vw, 148px); font-size: min(clamp(84px, 9.6vw, 148px), 16.6cqi); max-width: 11ch; }
  .hero-sub { font-size: 21px; }
  .hero-demo { max-width: 340px; justify-self: end; }

  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(300px, auto); }
  .card-ads      { grid-column: 1 / 3; grid-row: 1 / 3; }
  .card-landing  { grid-column: 3 / 5; grid-row: 1; }
  .card-followup { grid-column: 3 / 5; grid-row: 2; }
  .card-systems  { grid-column: 1 / 3; grid-row: 3; }
  .card-spread   { grid-column: 3 / 4; grid-row: 3; }
  .card-support  { grid-column: 4 / 5; grid-row: 3; }
  .card-usa      { grid-column: 1 / 5; grid-row: 4; flex-direction: row; align-items: stretch; gap: 32px; padding-bottom: 0; }
  .card-usa .card-body { flex: 0 0 38%; align-self: center; padding-bottom: 32px; }
  .card-usa .viz { margin: 0 -28px 0 0; padding: 20px 28px 20px 0; align-items: center; }
  .card-ads .viz-ad { padding-bottom: 12px; }
  .card-landing, .card-followup { flex-direction: row; gap: 24px; min-height: 0; }
  .card-landing .card-body, .card-followup .card-body { flex: 1; padding-bottom: 28px; }
  .card-landing .viz, .card-followup .viz { flex: 0 0 46%; margin: 0 -28px 0 0; padding: 0 28px 0 0; }
  .card-followup .viz { padding-bottom: 28px; align-items: center; }

  .trade { min-height: 250px; }

  .header-cta { display: none; }
  .steps.why-grid { grid-template-columns: repeat(4, 1fr); }
  .week-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 64px; align-items: start; }
  .week-demo { position: sticky; top: 110px; justify-self: end; }
  .care-grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
  .care-report { position: sticky; top: 110px; max-width: 460px; justify-self: end; }
}

/* ============================================================
   THE WORK (video section)
   ============================================================ */
.reel { background: var(--bg-2); border-top: 1px solid var(--line); }

.feature-video {
  position: relative;
  margin: 0 0 14px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line-strong), 0 30px 80px rgba(16, 18, 22, 0.6);
  isolation: isolate;
}
.feature-player { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg); }
.feature-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(to top, rgba(16, 18, 22, 0.92) 0%, rgba(16, 18, 22, 0.25) 45%, rgba(16, 18, 22, 0.15) 100%);
  transition: opacity 400ms, visibility 0s;
}
.feature-video.is-playing .feature-overlay { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 400ms, visibility 0s 400ms; }
.feature-tag {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--red); color: var(--fg);
  font-family: var(--font-head); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.play-btn {
  position: relative;
  width: 76px; height: 76px;
  border: 0; border-radius: 50%;
  background: var(--red); color: var(--fg);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(224, 22, 31, 0.5), 0 16px 40px rgba(16, 18, 22, 0.5);
  transition: transform 220ms var(--ease-spring);
}
.play-btn:hover { transform: scale(1.08); }
.play-tri {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; margin: -13px 0 0 -8px;
  border-left: 24px solid var(--fg); border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}
.feature-caption {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  display: grid; gap: 4px;
  font-size: 13px; color: var(--fg-muted);
  pointer-events: none;
  transition: opacity 400ms;
}
.feature-video.is-playing .feature-caption { opacity: 0; }
.feature-caption strong { font-family: var(--font-head); font-weight: 400; font-size: 18px; color: var(--fg); }

.reel-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.reel-card button {
  position: relative; display: block; width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg); color: var(--fg);
  overflow: hidden; cursor: pointer;
  transition: border-color 300ms;
}
.reel-card button:hover { border-color: rgba(224, 22, 31, 0.6); }
.reel-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.8);
  transition: transform 800ms var(--ease-out), filter 400ms;
}
.reel-card button:hover img { transform: scale(1.06); filter: saturate(1); }
.reel-card button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16, 18, 22, 0.95) 0%, rgba(16, 18, 22, 0.2) 50%, rgba(16, 18, 22, 0.3) 100%);
}
.reel-platform {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(16, 18, 22, 0.75); border: 1px solid var(--line-strong);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg);
}
.reel-play {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: rgba(224, 22, 31, 0.9);
  box-shadow: 0 8px 24px rgba(16, 18, 22, 0.5);
  transition: transform 220ms var(--ease-spring);
}
.reel-play::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  margin: -7px 0 0 -4px;
  border-left: 13px solid var(--fg); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.reel-card button:hover .reel-play { transform: scale(1.12); }
.reel-caption {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 14px;
  display: grid; gap: 2px; text-align: left;
}
.reel-caption b { font-family: var(--font-head); font-weight: 400; font-size: 14px; }
.reel-caption i { font-style: normal; font-size: 11px; color: var(--fg-muted); letter-spacing: 0.06em; text-transform: uppercase; }
/* Cards without a real video: no play badge, "Coming soon" on the platform tag, not clickable */
.reel-card.is-soon button { cursor: default; }
.reel-card.is-soon .reel-play { display: none; }
.reel-card.is-soon .reel-platform::after { content: " \00B7 Coming soon"; color: var(--fg-muted); }
.reel-card.is-soon .reel-caption b { display: none; }
.reel-note { margin: 22px 0 0; font-size: 14px; color: var(--fg-faint); max-width: 60ch; }

@media (min-width: 700px) {
  .reel-row { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .play-btn { width: 96px; height: 96px; }
  .play-tri { margin: -16px 0 0 -10px; border-left-width: 30px; border-top-width: 16px; border-bottom-width: 16px; }
  .feature-caption { left: 24px; right: 24px; bottom: 22px; }
  .feature-caption strong { font-size: 22px; }
  .feature-tag { top: 20px; left: 20px; }
}

/* ============================================================
   FORM PREVIEW (the sample page mock inside the form)
   ============================================================ */
.sample-preview { margin: 0 0 20px; }
.browser-full { max-width: none; border-bottom: 1px solid var(--line-strong); border-radius: 10px; }
.browser-full .browser-body { padding: 14px 14px 16px; gap: 8px; }
.pv-city { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.pv-h { font-family: var(--font-head); font-size: 17px; line-height: 1.15; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-sub { font-size: 12px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-h.is-placeholder, .pv-city.is-placeholder, .pv-sub.is-placeholder { color: var(--fg-faint); }
.pv-flag { display: none; position: absolute; top: 8px; right: 10px; padding: 3px 8px; border-radius: 999px; background: var(--red); color: var(--fg); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sample-form.is-sent .pv-flag { display: inline-flex; }
.sample-form.is-sent .sample-preview { margin-bottom: 8px; }
.preview-label { margin: 8px 0 0; font-size: 12px; color: var(--fg-faint); }