/* =====================================================================
   Rogue Coach Teams, site.css (v2)

   Layout language: a floating pill nav, bands that alternate between
   midnight and warm paper, mono eyebrows, one gradient line per heading,
   and real client screenshots set in browser frames.

   Brand (guidelines v1.0): Midnight #0B0F1A, Graphite #151A23,
   Gold #FBBF24, Inter / Inter Tight, pill buttons, 20 to 28px radii,
   soft gold glow instead of hard shadows.

   Every component reads its colours from the band it sits in (.dark or
   .light), so the same card works on both without a variant class.
   ===================================================================== */

/* ------------------------------------------------------------ 1. Tokens */
:root {
  --midnight: #0B0F1A;
  --graphite: #151A23;
  --gold: #FBBF24;
  --gold-6: #E6A400;
  --orange: #FF861A;
  --amber-7: #A84D08;
  --orange-7: #C2410C;
  --paper: #F8F6F1;
  --paper-2: #F1ECE2;

  --f-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --wrap: 1200px;
  --gut: 24px;
  --sec-y: clamp(80px, 9vw, 128px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --grad-dark: linear-gradient(92deg, #FDE68A 0%, #FBBF24 40%, #FF861A 100%);
  --grad-light: linear-gradient(92deg, #A84D08 0%, #C2410C 100%);
}

.dark {
  --bg: var(--midnight);
  --fg: #F3F4F6;
  --fg-2: #D1D5DB;
  --mute: #A3AAB6;
  --card: linear-gradient(180deg, #161C28 0%, #11161F 100%);
  --card-solid: #141A24;
  --card-2: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.17);
  --accent: var(--gold);
  --grad: var(--grad-dark);
  --eb-fg: var(--gold);
  --eb-bg: rgba(251, 191, 36, 0.07);
  --eb-line: rgba(251, 191, 36, 0.26);
  --icon-bg: rgba(251, 191, 36, 0.09);
  --icon-fg: var(--gold);
  --shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.75);
  --frame-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --badge-bg: rgba(251, 191, 36, 0.12);
  --badge-fg: var(--gold);
  --badge-line: rgba(251, 191, 36, 0.32);
  --ghost-bg: transparent;
  --gold-line: rgba(251, 191, 36, 0.42);
  --focus: var(--gold);
  color-scheme: dark;
}

.light {
  --bg: var(--paper);
  --fg: #0B0F1A;
  --fg-2: #1F2937;
  --mute: #545B68;
  --card: #FFFFFF;
  --card-solid: #FFFFFF;
  --card-2: #FBFAF6;
  --line: #E6DFD1;
  --line-2: #D6CCB8;
  --accent: var(--amber-7);
  --grad: var(--grad-light);
  --eb-fg: var(--amber-7);
  --eb-bg: #FFFFFF;
  --eb-line: #EADCC0;
  --icon-bg: #FBF1DC;
  --icon-fg: var(--amber-7);
  --shadow: 0 22px 44px -30px rgba(84, 58, 14, 0.3);
  --frame-shadow: 0 40px 80px -40px rgba(84, 58, 14, 0.45), 0 0 0 1px #E6DFD1;
  --badge-bg: #FBF1DC;
  --badge-fg: var(--amber-7);
  --badge-line: #EBCF95;
  --ghost-bg: #FFFFFF;
  --gold-line: #E9C97F;
  --focus: var(--amber-7);
  color-scheme: light;
}
.light--2 { --bg: var(--paper-2); }

/* ------------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  background: var(--midnight);
  color: #F3F4F6;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
figure { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus, var(--gold)); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(251, 191, 36, 0.35); color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--midnight);
  padding: 12px 20px; font-weight: 700; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }
.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: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: calc(800px + var(--gut) * 2); }

.i { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }

/* ------------------------------------------------------- 3. Typography */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.15rem + 5.6vw, 5.6rem); font-weight: 800; line-height: 1.0; letter-spacing: -0.042em; }
h2 { font-size: clamp(2.1rem, 1.25rem + 3.3vw, 3.85rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.036em; }
h3 { font-size: 1.28rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.016em; }
h4 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.08em;
}
/* In headings the accent line wraps as its own balanced block, so a long
   second line never strands one word. */
h1 .grad, h2 .grad { display: inline-block; text-wrap: balance; }

.lede {
  font-size: clamp(1.06rem, 0.98rem + 0.32vw, 1.22rem);
  line-height: 1.65;
  color: var(--mute);
  max-width: 62ch;
  margin: 0;
}
.lede b, .lede strong { color: var(--fg); font-weight: 600; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 13px;
  border-radius: 999px;
  background: var(--eb-bg);
  border: 1px solid var(--eb-line);
  color: var(--eb-fg);
  font: 500 12.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.eyebrow .i { width: 13px; height: 13px; }

.kicker {
  font: 500 12.5px/1.3 var(--f-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.tiny { font-size: 14px; color: var(--mute); line-height: 1.55; }
.tlink {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-weight: 600;
}
.tlink:hover { text-decoration-thickness: 2px; }
.arrowlink {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 600; text-decoration: none;
}
.arrowlink .i { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.arrowlink:hover .i { transform: translateX(4px); }

/* ---------------------------------------------------------- 4. Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--midnight);
  font: 600 16px/1.2 var(--f-body);
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(251, 191, 36, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
}
.btn:hover { transform: translateY(-2px); background: #FCC93F; box-shadow: 0 18px 36px -12px rgba(251, 191, 36, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn .i { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn:hover .i { transform: translateX(3px); }
.btn--ghost {
  background: var(--ghost-bg, transparent);
  color: var(--fg);
  border-color: var(--line-2);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ghost-bg, var(--card-2)); border-color: var(--fg); box-shadow: none; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: 0.6; pointer-events: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* -------------------------------------------------------------- 5. Nav */
/* The drawer is a sibling of .navbar, never a descendant: backdrop-filter
   makes an element the containing block for its fixed children. */
.topbar {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 60;
  padding: 0 16px;
  pointer-events: none;
}
.navbar {
  pointer-events: auto;
  max-width: 1240px; height: 66px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 0 10px 0 22px;
  border-radius: 999px;
  background: rgba(12, 17, 29, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background 0.3s, box-shadow 0.3s;
}
.topbar.is-stuck .navbar { background: rgba(10, 14, 24, 0.9); }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: #FFFFFF; text-decoration: none;
  font: 700 17px/1 var(--f-display); letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand img { width: 40px; height: auto; display: block; }
.nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav a {
  color: #C3C9D4; text-decoration: none;
  font: 500 15px/1 var(--f-body);
  padding: 11px 15px; border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.nav a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }
.nav a[aria-current="page"] { color: #FFFFFF; background: rgba(255, 255, 255, 0.09); }
.navbar .btn { margin-left: 0; }

.burger {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16); background: transparent;
  cursor: pointer; padding: 0; align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  display: block; width: 18px; height: 1.6px; background: #FFFFFF; position: relative;
  transition: transform 0.3s var(--ease), background 0.2s;
}
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 55;
  display: none; flex-direction: column;
  padding: 104px 24px 32px;
  background: #080B13;
  overflow-y: auto;
}
.drawer.is-open { display: flex; }
.drawer a:not(.btn) {
  color: #FFFFFF; text-decoration: none;
  font: 700 1.6rem/1.2 var(--f-display); letter-spacing: -0.025em;
  padding: 16px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.drawer a[aria-current="page"] { color: var(--gold); }
.drawer .btn { margin-top: 28px; }

/* ---------------------------------------------------------- 6. Bands */
.sec {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--fg);
  padding: var(--sec-y) 0;
  overflow: hidden;
}
.sec--flush-top { padding-top: 0; }
.sec--tight { padding: calc(var(--sec-y) * 0.72) 0; }

/* One soft warm light per band, never a hard shadow. */
.glow::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -30%; width: min(1400px, 140%); height: 90%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(251, 191, 36, 0.13), transparent 70%);
}
.glow--low::before { top: auto; bottom: -40%; }
.glow--side::before { left: 12%; top: -10%; width: 900px; height: 900px; }
.light.glow::before { background: radial-gradient(50% 50% at 50% 50%, rgba(251, 191, 36, 0.16), transparent 70%); }

/* Faint engineering grid, faded out toward the edges. */
.gridbg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 28%, #000 20%, transparent 75%);
  mask-image: radial-gradient(60% 55% at 50% 28%, #000 20%, transparent 75%);
}

/* Section heads */
.head { max-width: 780px; margin: 0 auto 64px; text-align: center; }
.head .lede { margin: 22px auto 0; }
.head--left { margin-left: 0; text-align: left; }
.head--left .lede { margin-left: 0; }
.head--split {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: end;
  max-width: none; text-align: left; margin: 0 0 64px;
}
.note::before {
  content: ""; display: block; width: 52px; height: 2px; margin-bottom: 20px;
  background: var(--grad); border-radius: 2px;
}
.note p { color: var(--mute); margin: 0 0 12px; }
.note p:first-child { color: var(--fg); font-weight: 600; font-size: 1.08rem; }

/* ------------------------------------------------------ 7. Home hero */
.hero { padding: 176px 0 var(--sec-y); text-align: center; }
.hero h1 { font-size: clamp(2.6rem, 1rem + 4.7vw, 5.2rem); max-width: 17ch; margin: 0 auto; }
.hero .lede { margin: 28px auto 0; max-width: 60ch; }
.hero .cta-row { justify-content: center; margin-top: 36px; }

/* Three client sites, side by side. All three are fully visible: the outer two
   lean back a little in 3D and tuck under the centre one by a sliver, so the row
   still reads as a fan. Hovering an outer frame turns it to face you. On phones
   the row becomes a swipeable strip that advances on its own (site.js). */
.fan {
  position: relative;
  max-width: 1240px; margin: 76px auto 0;
  display: grid; grid-template-columns: 1fr 1.16fr 1fr; align-items: center;
  perspective: 1800px;
}
.frame {
  position: relative;
  margin: 0;
  border-radius: 18px; overflow: hidden;
  background: #FFFFFF;
  box-shadow: var(--frame-shadow);
}
.frame__bar {
  height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 14px;
  background: #EDEFF3; border-bottom: 1px solid #DDE1E7;
}
.frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #CDD2DA; }
.frame__bar i:first-child { background: #F2A7A0; }
.frame__bar i:nth-child(2) { background: #F4D08B; }
.frame__bar i:nth-child(3) { background: #A9DDB0; }
.frame__bar span {
  margin-left: 12px; height: 16px; flex: 1; max-width: 260px; border-radius: 999px; background: #FFFFFF;
}
.frame img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.fan .frame { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.fan .frame--l { grid-column: 1; grid-row: 1; z-index: 2; margin-right: -3%; transform-origin: 100% 50%; --rest: rotateY(15deg) translateZ(-30px); transform: var(--rest); }
.fan .frame--c { grid-column: 2; grid-row: 1; z-index: 3; --rest: none; transform: var(--rest); }
.fan .frame--r { grid-column: 3; grid-row: 1; z-index: 2; margin-left: -3%; transform-origin: 0% 50%; --rest: rotateY(-15deg) translateZ(-30px); transform: var(--rest); }
.fan .frame--l:hover, .fan .frame--r:hover { transform: none; z-index: 4; }
.fan-dots { display: none; }

.stats {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 1000px; margin: 40px auto 0;
  border: 1px solid var(--line); border-radius: 26px;
  background: rgba(21, 26, 35, 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  text-align: left;
}
.stat { padding: 28px 30px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__n {
  font: 800 clamp(2rem, 1.4rem + 1.6vw, 2.7rem)/1 var(--f-display);
  letter-spacing: -0.035em; color: var(--fg);
}
.stat__n em { font-style: normal; color: var(--accent); }
.stat__l { margin: 10px 0 0; color: var(--mute); font-size: 15px; line-height: 1.45; }

/* ---------------------------------------------------- 8. Page hero */
.phero { padding: 180px 0 104px; text-align: center; }
.phero h1 { font-size: clamp(2.5rem, 1.2rem + 4.8vw, 4.9rem); max-width: 15ch; margin: 0 auto; }
.phero .lede { margin: 26px auto 0; }
.phero .cta-row { justify-content: center; margin-top: 34px; }
.phero--split { text-align: left; }
.phero--split .inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
.phero--split h1 { margin: 0; }
.phero--split .lede { margin-left: 0; }
.phero--split .cta-row { justify-content: flex-start; }
.phero__meta { margin-top: 22px; font: 500 13px/1.4 var(--f-mono); letter-spacing: 0.08em; color: var(--mute); text-transform: uppercase; }

/* ------------------------------------------------- 9. Generic cards */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px;
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease), border-color 0.35s;
}
.card h3 { margin-bottom: 10px; }
/* :where() keeps these at element weight, so .kicker, .tier__per and friends win. */
:where(.card) p { color: var(--mute); margin: 0; }
:where(.card) p + p { margin-top: 12px; }
.card--hover:hover { transform: translateY(-4px); border-color: var(--line-2); }
.card--gold { border-color: var(--gold-line); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.1), 0 40px 80px -44px rgba(251, 191, 36, 0.45); }

.ico {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--icon-bg); color: var(--icon-fg);
  border: 1px solid var(--line);
  flex: none;
}
.ico .i { width: 22px; height: 22px; }
.ico--sq { border-radius: 14px; }

.num {
  font: 500 12.5px/1 var(--f-mono); color: var(--mute);
  padding: 7px 11px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--line);
}
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px;
  background: var(--eb-bg); border: 1px solid var(--eb-line); color: var(--eb-fg);
}
.badge {
  display: inline-flex; align-items: center; white-space: nowrap; flex: none;
  font: 600 13px/1 var(--f-body);
  padding: 7px 13px; border-radius: 999px;
  background: var(--badge-bg); color: var(--badge-fg);
  border: 1px solid var(--badge-line);
}

.grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--top { align-items: start; }
.split--5-7 { grid-template-columns: 5fr 7fr; }
.split--7-5 { grid-template-columns: 7fr 5fr; }

/* Check lists: the tick is drawn, so it takes the band's accent. */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.ticks li { position: relative; padding-left: 32px; color: var(--fg-2); line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.08em;
  width: 21px; height: 21px; border-radius: 50%; background: var(--icon-bg);
}
.ticks li::after {
  content: ""; position: absolute; left: 7.5px; top: calc(0.08em + 5px);
  width: 5px; height: 9px;
  border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ticks strong { color: var(--fg); }

/* ------------------------------------------------ 10. Problem cards */
.pcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1060px; margin: 0 auto; }
.pcard { padding: 30px 32px 34px; border-radius: 28px; }
.pcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.pcard h3 { font-size: 1.5rem; margin-bottom: 12px; }

/* Signal line: the one path on the site that animates. A coach's
   visibility over time, flat and silent, then a rhythm, then a climb. */
.signal-wrap { max-width: 1060px; margin: 0 auto 56px; }
.signal { display: block; width: 100%; height: auto; overflow: visible; }
.signal__flat { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 8; }
.signal__path {
  fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200);
}
.signal__dot { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.signal.is-live .signal__path { animation: draw 2s var(--ease) forwards; }
.signal.is-live .signal__dot { animation: pop 0.5s var(--ease) 1.7s forwards; }
.signal__caps {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 12px;
  font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute);
}
.signal__caps b { color: var(--accent); font-weight: 500; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }

/* ----------------------------------------------- 11. Why + method */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.why__copy > p:not(.eyebrow) { color: var(--mute); font-size: 1.12rem; margin: 0 0 14px; max-width: 46ch; }
.why__copy > p.strong { color: var(--fg); font-weight: 600; }
.minis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 38px; }
.mini { padding: 22px 22px 24px; border-radius: 22px; }
.mini .ico { width: 42px; height: 42px; margin-bottom: 18px; }
.mini .ico .i { width: 19px; height: 19px; }
.mini h3 { font-size: 1.06rem; margin-bottom: 6px; }
.mini p { font-size: 14.5px; line-height: 1.5; }

.method {
  background: var(--card); border: 1px solid var(--line); border-radius: 32px;
  padding: 36px 34px 26px; box-shadow: var(--shadow);
  position: sticky; top: 110px;
}
.light .method { box-shadow: 0 50px 90px -50px rgba(84, 58, 14, 0.45); }
.method__h { font-size: 1.45rem; }
.method__sub { color: var(--mute); margin: 8px 0 26px; padding-bottom: 24px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.msteps { list-style: none; margin: 0; padding: 0; }
.mstep { display: grid; grid-template-columns: 50px 1fr; gap: 16px; position: relative; padding-bottom: 14px; }
.mstep:not(:last-child)::before {
  content: ""; position: absolute; left: 24.5px; top: 52px; bottom: 2px; width: 1px; background: var(--line-2);
}
.mstep .ico { background: var(--card-solid); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.3); }
.mstep__box { background: var(--card-2); border: 1px solid var(--line); border-radius: 18px; padding: 15px 18px 16px; }
.mstep__t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mstep__t b { font: 700 1.08rem/1.2 var(--f-display); color: var(--fg); letter-spacing: -0.01em; }
.mstep__t span { font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.mstep__t .mstep__n { margin-left: auto; color: var(--accent); }
.mstep p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--mute); }

/* ------------------------------------------- 12. Spotlight (video) */
.spot { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.spot blockquote {
  margin: 30px 0 0; padding: 22px 24px;
  border-radius: 20px; border: 1px solid var(--line); background: var(--card-2);
  font: 500 1.12rem/1.55 var(--f-body); color: var(--fg);
}
.spot blockquote em { font-style: normal; color: var(--accent); }
.spot blockquote footer { margin-top: 12px; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }

.vid {
  position: relative; border-radius: 28px; overflow: hidden;
  background: #000; aspect-ratio: 16 / 9;
  border: 1px solid var(--line-2);
  box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.95), 0 0 0 6px rgba(251, 191, 36, 0.05);
}
.vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vid__play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(8, 11, 19, 0.82) 0%, rgba(8, 11, 19, 0.1) 55%);
}
.vid__ring {
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--midnight);
  box-shadow: 0 0 0 12px rgba(251, 191, 36, 0.16), 0 24px 40px -12px rgba(251, 191, 36, 0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.vid__ring .i { width: 30px; height: 30px; margin-left: 4px; }
.vid__play:hover .vid__ring { transform: scale(1.07); box-shadow: 0 0 0 16px rgba(251, 191, 36, 0.14), 0 24px 40px -12px rgba(251, 191, 36, 0.7); }
.vid__bar {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 18px; border-radius: 16px;
  background: rgba(8, 11, 19, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.vid__bar small { display: block; font: 500 12.5px/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #A3AAB6; margin-bottom: 4px; }
.vid__bar b { color: #FFFFFF; font: 600 15.5px/1.2 var(--f-body); }
.live { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.22); }
.vid.is-playing .vid__bar { display: none; }

.outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 64px; }
.outcome { padding: 24px; border-radius: 22px; }
.outcome .ico { width: 44px; height: 44px; margin-bottom: 18px; border-radius: 13px; }
.outcome .ico .i { width: 20px; height: 20px; }
.outcome h3 { font-size: 1.1rem; margin-bottom: 6px; }
.outcome p { font-size: 15px; line-height: 1.5; }

/* ---------------------------------------------- 13. Before / after */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1120px; margin: 0 auto; align-items: start; }
.ba figure { margin: 0; }
.ba .frame img { aspect-ratio: 16 / 10; }
.ba__tag {
  position: absolute; bottom: 16px; left: 16px; z-index: 2;
  font: 600 12.5px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(11, 15, 26, 0.85); color: #FFFFFF;
}
.ba__tag--after { background: var(--gold); color: var(--midnight); }
.ba figcaption { margin-top: 18px; color: var(--mute); font-size: 15.5px; line-height: 1.55; max-width: 48ch; }
.ba figcaption b { color: var(--fg); font-weight: 600; }
.ba figure:last-child { margin-top: 56px; }

/* --------------------------------------------------- 14. Work grid */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.wcard .frame img { aspect-ratio: 4 / 5; object-position: 50% 0; transition: object-position 6s linear; }
.wcard:hover .frame img { object-position: 50% 100%; }
.wcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; }
.wcard h3 { font-size: 1.25rem; }
.wcard .kicker { margin: 0; color: var(--mute); }

/* ------------------------------------------------------ 15. Lanes */
.lanes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lane { display: flex; flex-direction: column; padding: 34px; border-radius: 28px; }
.lane:hover { border-color: rgba(251, 191, 36, 0.35); transform: translateY(-4px); }
.lane .ico { margin-bottom: 26px; }
.lane h3 { font-size: 1.55rem; margin-bottom: 12px; }
.lane p { margin-bottom: 26px; }
.lane__foot {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.lane__foot span { font: 500 12.5px/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.lane__foot b { color: var(--fg); font-weight: 600; font-size: 15px; }
.lane--q {
  background: radial-gradient(90% 70% at 100% 0%, rgba(251, 191, 36, 0.14), transparent 60%), var(--card-solid);
  border-color: rgba(251, 191, 36, 0.3);
}

/* ------------------------------------------------------ 16. Paths */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1060px; margin: 0 auto; }
.path { display: flex; flex-direction: column; padding: 38px 36px; border-radius: 32px; }
.path.dark {
  background: radial-gradient(90% 60% at 100% 0%, rgba(251, 191, 36, 0.16), transparent 60%), var(--midnight);
  border-color: rgba(251, 191, 36, 0.35);
  color: var(--fg);
  box-shadow: 0 50px 90px -50px rgba(11, 15, 26, 0.7);
}
.path__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.path h3 { font-size: 1.6rem; }
.path__price { font: 800 clamp(2.5rem, 2rem + 1.6vw, 3.3rem)/1 var(--f-display); letter-spacing: -0.045em; color: var(--fg); margin: 18px 0 8px; }
.path__price span { font-size: 0.42em; letter-spacing: -0.02em; color: var(--mute); font-weight: 700; }
.path__per { font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.path > p { color: var(--mute); margin: 22px 0 0; }
.path .ticks { margin: 26px 0 32px; }
.path .btn { margin-top: auto; }

/* ------------------------------------------------ 17. Photo card */
.photo {
  position: relative; border-radius: 30px; overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.9);
}
.photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.photo .vid__bar { pointer-events: auto; }

/* ----------------------------------------------------- 18. Quotes */
.quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.quote { display: flex; flex-direction: column; margin: 0; padding: 26px 24px; border-radius: 24px; }
.quote__who { display: flex; gap: 13px; align-items: center; margin-bottom: 20px; }
.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font: 800 17px/1 var(--f-display); color: var(--midnight);
  background: var(--grad-dark);
}
.quote__who b { display: block; color: var(--fg); font-size: 16px; line-height: 1.2; }
.quote__who div span { display: block; margin-top: 4px; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.quote blockquote { margin: 0 0 22px; color: var(--fg-2); font-size: 15.5px; line-height: 1.62; }
.quote__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.quote__foot a { font-size: 14.5px; }
.quote__foot span { font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.06em; color: var(--mute); text-transform: uppercase; }

/* -------------------------------------------------------- 19. FAQ */
.faqs { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
.faqs__side { position: sticky; top: 120px; }
.faqs__side .lede { margin-top: 22px; }
.advice { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.advice b { display: block; color: var(--fg); font-weight: 600; }
.advice p { color: var(--mute); margin: 4px 0 14px; font-size: 15px; }
.advice small { display: block; margin-top: 10px; color: var(--mute); font-size: 13.5px; }

.acc { display: grid; gap: 12px; }
.acc details {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow); transition: border-color 0.25s;
}
.acc details[open] { border-color: var(--line-2); }
.acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 22px 22px 26px;
  font: 700 1.08rem/1.35 var(--f-display); color: var(--fg); letter-spacing: -0.01em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; transition: background 0.25s; }
.acc details[open] summary::before { background: var(--accent); }
.acc summary::after {
  content: "+"; margin-left: auto; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--mute);
  font: 400 22px/1 var(--f-body);
  transition: transform 0.3s var(--ease), color 0.25s, border-color 0.25s;
}
.acc details[open] summary::after { transform: rotate(45deg); color: var(--accent); border-color: var(--accent); }
.acc__a { padding: 0 26px 24px 49px; color: var(--mute); line-height: 1.65; }
.acc__a a { color: var(--accent); }

/* -------------------------------------------------------- 20. CTA */
.cta { text-align: center; }
.cta h2 { max-width: 16ch; margin: 0 auto; }
.cta .lede { margin: 24px auto 0; }
.cta-cards { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 20px; max-width: 940px; margin: 60px auto 0; text-align: left; align-items: stretch; }
.ccard { display: flex; flex-direction: column; padding: 36px; border-radius: 30px; }
.ccard .ico { width: 58px; height: 58px; margin-bottom: 28px; }
.ccard .ico .i { width: 24px; height: 24px; }
.ccard h3 { font-size: 1.75rem; margin-bottom: 10px; letter-spacing: -0.03em; }
.ccard p { margin-bottom: 24px; }
.ccard .badge { position: absolute; top: 34px; right: 34px; }
.ccard .btn { align-self: flex-start; margin-top: auto; }
.ccard small { display: block; margin-top: 14px; color: var(--mute); font-size: 13.5px; }
.checks {
  list-style: none; padding: 34px 0 0; margin: 56px auto 0; max-width: 940px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px;
  border-top: 1px solid var(--line);
  font: 500 14px/1.3 var(--f-mono); color: var(--fg-2);
}
.checks li { display: inline-flex; align-items: center; gap: 9px; }
.checks .i { width: 16px; height: 16px; color: var(--accent); }

/* ---------------------------------------------------- 21. Footer */
.ftr { background: #080B13; color: #A3AAB6; padding: 88px 0 104px; border-top: 1px solid rgba(255, 255, 255, 0.06); }  /* bottom room so the WhatsApp button never covers the last line */
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
.ftr h4 {
  display: flex; align-items: center; gap: 9px; margin: 6px 0 20px;
  font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #FFFFFF;
}
.ftr h4::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ftr a { color: #A3AAB6; text-decoration: none; transition: color 0.2s; }
.ftr a:hover { color: #FFFFFF; }
.ftr ul a { display: inline-flex; align-items: center; min-height: 24px; }  /* 24px tap targets (WCAG 2.5.8) */
.ftr__tag { margin: 22px 0 0; font: 800 1.45rem/1.2 var(--f-display); letter-spacing: -0.025em; color: #FFFFFF; }
.ftr__tag span { color: var(--gold); }
.ftr__small { margin: 14px 0 0; max-width: 36ch; font-size: 15px; }
.ftr__contact a { display: inline-flex; align-items: center; gap: 12px; }
.ftr__contact .ico { width: 38px; height: 38px; background: rgba(251, 191, 36, 0.08); color: var(--gold); border-color: rgba(255, 255, 255, 0.08); }
.ftr__contact .ico .i { width: 17px; height: 17px; }
.ftr__base {
  margin-top: 72px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 500 12.5px/1.4 var(--f-mono); letter-spacing: 0.04em;
}

/* ------------------------------------------- 22. Story track (about) */
.track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.track::before { content: ""; position: absolute; left: 25px; right: 25px; top: 25px; height: 1px; background: var(--line-2); }
.tstep { position: relative; }
.tstep__n {
  position: relative; z-index: 1;
  width: 50px; height: 50px; border-radius: 50%; margin-bottom: 24px;
  display: grid; place-items: center;
  background: var(--card-solid); border: 1px solid var(--line-2);
  font: 600 13px/1 var(--f-mono); color: var(--accent);
  box-shadow: var(--shadow);
}
.tstep:last-child .tstep__n { background: var(--gold); color: var(--midnight); border-color: var(--gold); }
.tstep h3 { font-size: 1.18rem; margin-bottom: 8px; }
.tstep p { color: var(--mute); font-size: 15px; line-height: 1.55; margin: 0; }

/* --------------------------------------------------- 23. Team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.person { overflow: hidden; padding: 0; border-radius: 26px; }
.person img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.person__b { padding: 20px 22px 24px; }
.person h3 { font-size: 1.2rem; margin-bottom: 4px; }
.person .kicker { margin-bottom: 12px; }
.person p { font-size: 14.5px; line-height: 1.55; }

.promise { font: 600 clamp(1.45rem, 1.1rem + 1.4vw, 2.2rem)/1.35 var(--f-display); letter-spacing: -0.02em; color: var(--fg); margin: 0; }

/* ------------------------------------------------- 24. Sprint tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.tier { display: flex; flex-direction: column; padding: 34px 30px 28px; border-radius: 30px; }
.tier--feat {
  background: radial-gradient(120% 50% at 50% 0%, rgba(251, 191, 36, 0.12), transparent 60%), var(--card-solid);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.12), 0 50px 90px -50px rgba(251, 191, 36, 0.45);
}
.tier__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tier__top h3 { font-size: 1.55rem; }
.tier__sub { color: var(--mute); margin: 6px 0 22px; }
.tier__price { font: 800 3.1rem/1 var(--f-display); letter-spacing: -0.045em; color: var(--fg); }
.tier__per { font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 10px 0 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.tier__group { margin-bottom: 24px; }
.tier__group h4 { font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.tier .ticks { gap: 10px; }
.tier .ticks li { font-size: 15px; }
.tier .btn { margin-top: 6px; }
.tier__note { font-size: 13.5px; color: var(--mute); text-align: center; margin: 14px 0 0; }

.glance { padding: 32px; border-radius: 28px; }
.glance .kicker { margin-bottom: 18px; }

/* ---------------------------------------------- 25. Phase cards */
.phase .pill { margin-bottom: 20px; }
.phase h3 { font-size: 1.4rem; margin-bottom: 18px; }

/* ------------------------------------------- 26. Service catalogue */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fchip {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: 500 14.5px/1 var(--f-body);
  background: var(--card); color: var(--fg-2);
  border: 1px solid var(--line-2);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fchip:hover { border-color: var(--fg); }
.fchip[aria-pressed="true"] { background: var(--midnight); color: #FFFFFF; border-color: var(--midnight); }
.shown { font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 30px; }

.svc { display: flex; flex-direction: column; padding: 28px; border-radius: 26px; }
.svc.is-hidden { display: none; }
.svc__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.svc__price { font: 800 2rem/1 var(--f-display); letter-spacing: -0.04em; color: var(--fg); white-space: nowrap; }
.svc__was { font: 500 1rem/1 var(--f-body); color: var(--mute); text-decoration: line-through; margin-right: 8px; letter-spacing: 0; }
.svc h3 { font-size: 1.3rem; margin-bottom: 8px; }
.svc__deliv { margin: 22px 0 22px; }
.svc__deliv .kicker { color: var(--mute); margin-bottom: 12px; }
.svc .ticks li { font-size: 15px; }
.svc__turn { margin: auto 0 18px; padding-top: 18px; border-top: 1px solid var(--line); font: 500 12.5px/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--mute); text-transform: uppercase; }

/* --------------------------------------------------------- 27. Form */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { font: 600 14.5px/1.3 var(--f-body); color: var(--fg); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 14px 16px;
  font: 400 16px/1.4 var(--f-body); color: var(--fg);
  background: var(--card-2); border: 1px solid var(--line-2); border-radius: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8A909B; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18); }
.formnote { margin: 0; padding: 14px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.formnote--ok { background: #ECFDF3; color: #14532D; border: 1px solid #BBF7D0; }
.formnote--err { background: #FEF2F2; color: #7F1D1D; border: 1px solid #FECACA; }
.formnote .tlink { color: inherit; }

/* --------------------------------------------------------- 28. Posts */
.post {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  text-decoration: none; color: inherit; border-radius: 26px;
}
.post:hover { transform: translateY(-4px); border-color: var(--line-2); }
.post img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line); }
.post__b { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.post time { font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.post h3 { font-size: 1.3rem; margin-bottom: 10px; }
.post p { font-size: 15px; line-height: 1.55; margin-bottom: 20px; }
.post .arrowlink { margin-top: auto; }

/* ------------------------------------------------------ 29. Article */
.prose { font-size: 1.1rem; line-height: 1.78; color: var(--fg-2); max-width: 70ch; margin: 0 auto; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.3rem); margin: 2.1em 0 0.6em; line-height: 1.15; }
.prose h3 { font-size: 1.35rem; margin: 1.8em 0 0.5em; }
.prose h4 { margin: 1.6em 0 0.4em; }
.prose p { margin: 0 0 1.2em; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose strong, .prose b { color: var(--fg); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.4em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  margin: 1.8em 0; padding: 22px 26px;
  border-left: 3px solid var(--gold); border-radius: 0 18px 18px 0;
  background: var(--card); box-shadow: var(--shadow);
  font-size: 1.15rem; color: var(--fg);
}
.prose blockquote p:last-child { margin: 0; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: 18px; margin: 1.6em 0; }
.prose figure { margin: 1.8em 0; }
.prose figcaption { font-size: 14px; color: var(--mute); margin-top: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card); border-radius: 14px; overflow: hidden; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--f-display); color: var(--fg); background: var(--card-2); }
.prose details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; margin: 0 0 12px; }
.prose summary { cursor: pointer; font-weight: 600; color: var(--fg); }
.prose aside { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; margin: 1.6em 0; }
.scrollx { overflow-x: auto; margin: 0 0 1.4em; }
.cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 26px; box-shadow: var(--frame-shadow); margin: 0 0 56px; }

/* -------------------------------------------------------- 30. Motion */
/* Hidden states only apply while html has .js, which the inline head
   script removes again if site.js has not run within 2.5s. */
html.js .rise { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); transition-delay: var(--d, 0ms); }
html.js .rise.is-in { opacity: 1; transform: none; }
html.js .lift { opacity: 0; }
html.js body.is-ready .lift { animation: lift 0.95s var(--ease) var(--d, 0ms) forwards; }
/* The hero headline is the LCP element: it paints at once and only rises, it never waits behind a fade. */
html.js .hero h1.lift { opacity: 1; }
html.js body.is-ready .hero h1.lift { animation: lift-rise 0.95s var(--ease) var(--d, 0ms) both; }
@keyframes lift-rise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes lift { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
html.js .fan .frame { opacity: 0; }
html.js body.is-ready .fan .frame { animation: deal 1.2s var(--ease) var(--d, 400ms) both; }
@keyframes deal {
  from { opacity: 0; translate: 0 70px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  html.js .rise, html.js .lift, html.js .fan .frame { opacity: 1; transform: none; }
  html.js .fan .frame { transform: var(--rest); }
  .signal__path { stroke-dashoffset: 0; }
  .signal__dot { opacity: 1; }
  .wcard:hover .frame img { object-position: 50% 0; }
}

/* ---------------------------------------------------- 31. Responsive */
@media (max-width: 1100px) {
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(3, 1fr); }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .nav, .navbar > .btn { display: none; }
  .burger { display: inline-flex; }
  .navbar { padding: 0 10px 0 20px; }
  .why, .spot, .faqs, .split, .split--5-7, .split--7-5, .head--split, .phero--split .inner { grid-template-columns: 1fr; gap: 44px; }
  .head--split { gap: 24px; }
  .method, .faqs__side { position: static; }
  .work { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .track { grid-template-columns: 1fr; gap: 0; }
  .track::before { left: 25px; right: auto; top: 25px; bottom: 25px; width: 1px; height: auto; }
  .tstep { display: grid; grid-template-columns: 50px 1fr; gap: 0 20px; padding-bottom: 28px; }
  .tstep__n { margin: 0; grid-row: span 2; }
  .ba figure:last-child { margin-top: 0; }
}

@media (max-width: 720px) {
  :root { --gut: 16px; }
  body { font-size: 16.5px; }
  .hero { padding-top: 138px; }
  .phero { padding: 144px 0 80px; }
  .pcards, .minis, .lanes, .paths, .cta-cards, .grid, .grid--2, .grid--4, .quotes, .outcomes, .work, .ba, .team, .field--2 { grid-template-columns: 1fr; }
  .fan {
    display: flex; gap: 14px; perspective: none;
    margin: 48px calc(var(--gut) * -1) 0; padding: 4px var(--gut) 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .fan::-webkit-scrollbar { display: none; }
  .fan .frame, .fan .frame--l, .fan .frame--r, .fan .frame--c {
    flex: 0 0 86%; margin: 0; scroll-snap-align: center; --rest: none; transform: none;
  }
  .fan-dots { display: flex; justify-content: center; gap: 8px; margin-top: 2px; }
  .fan-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); transition: width 0.35s var(--ease), background 0.35s; }
  .fan-dots i.is-on { width: 22px; background: var(--gold); }
  .stats { grid-template-columns: 1fr; margin-top: 20px; }
  .eyebrow { letter-spacing: 0.07em; padding: 8px 13px 8px 11px; gap: 7px; }
  .stat { padding: 22px 24px; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .card, .lane, .path, .ccard, .glance { padding: 26px 22px; }
  .pcard { padding: 26px 22px 28px; }
  .method { padding: 28px 20px 18px; border-radius: 26px; }
  .mstep { grid-template-columns: 42px 1fr; gap: 12px; }
  .mstep .ico { width: 42px; height: 42px; }
  .mstep:not(:last-child)::before { left: 20.5px; top: 44px; }
  .mstep__t .mstep__n { margin-left: 0; }
  .acc summary { padding: 18px 18px 18px 20px; font-size: 1.02rem; }
  .acc__a { padding: 0 20px 20px 43px; }
  .faqs { gap: 36px; }
  .ftr__grid { grid-template-columns: 1fr; gap: 36px; }
  .ftr__base { flex-direction: column; }
  .vid__bar { left: 10px; right: 10px; bottom: 10px; padding: 10px 14px; }
  .vid__ring { width: 66px; height: 66px; }
  .ba__tag { bottom: 12px; left: 12px; }
  .cover { margin: 0 0 40px; border-radius: 20px; }
  .checks { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
  .person img { aspect-ratio: 4 / 3; }
}

/* Phones: the gallery and the outcome cards go two-up so the page stays scannable. */
@media (max-width: 720px) {
  .work { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .wcard__meta { margin-top: 12px; }
  .wcard h3 { font-size: 0.98rem; }
  .wcard .kicker { display: none; }
  .work .frame { border-radius: 12px; }
  .work .frame__bar { height: 20px; padding: 0 8px; gap: 4px; }
  .work .frame__bar i { width: 6px; height: 6px; }
  .work .frame__bar span { display: none; }
  .outcomes { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
  .outcome { padding: 18px 16px; }
}

@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 12px; padding-bottom: 12px; }
  .brand { font-size: 15.5px; gap: 9px; }
  .brand img { width: 34px; }
  .btn { padding: 0 22px; }
  .cta-row .btn { width: 100%; }
  .ccard .btn { align-self: stretch; }
}


/* ---- client-site frames that scroll (hero fan + work cards) ---- */
.frame .scroll { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.frame .scroll img { width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; animation: pagescroll 22s ease-in-out infinite alternate; will-change: transform; }
.fan .frame--l .scroll img { animation-duration: 26s; animation-delay: -6s; }
.fan .frame--r .scroll img { animation-duration: 30s; animation-delay: -12s; }
@keyframes pagescroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
.frame .scroll { container-type: size; }
.wcard__link { display: block; color: inherit; text-decoration: none; }
.wcard .frame img { aspect-ratio: 1280 / 2600; height: auto; object-fit: initial; object-position: initial; transition: none; }
.wcard .frame { aspect-ratio: 4 / 5; overflow: hidden; }
.wcard .frame img { animation: pagescroll2 24s ease-in-out infinite alternate; }
@keyframes pagescroll2 { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
.wcard .frame { container-type: size; }
.wcard .frame__bar { position: relative; z-index: 1; }
.crew-solo { max-width: 780px; }
@media (prefers-reduced-motion: reduce) { .frame .scroll img, .wcard .frame img { animation: none; } }

/* ---- WhatsApp widget ---- */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 999px; background: #25D366; color: #06210f; font: 700 14px/1 var(--f-body, Inter, sans-serif); text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.wa:hover { transform: translateY(-2px); }
.wa .i { width: 20px; height: 20px; }
@media (max-width: 640px) { .wa span { display: none; } .wa { padding: 15px; } }

/* ---- offer landing page: line-item cards ---- */
.items .item { position: relative; }
.item__n { position: absolute; top: 22px; right: 26px; font: 600 12.5px/1 var(--f-mono); letter-spacing: 0.12em; color: var(--mute); }
.item h3 { margin: 20px 0 10px; }
.item__why { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(127,127,127,.22); font-size: 0.95rem; }
.frame__bar span { font: 500 10.5px/1 var(--f-mono, monospace); color: #6b7280; display: flex; align-items: center; padding: 0 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* =====================================================================
   v2.1, 1 Oct 2026 (Harsh's feedback doc)
   ===================================================================== */

/* ---- The Rogue engine: the steps light up in order as it scrolls into view
   (site.js adds .is-lit), the connector fills with gold, and every icon keeps
   moving with its own small gesture once the card is live. ---- */
.mstep .ico { position: relative; transition: background 0.5s var(--ease), color 0.5s, border-color 0.5s, box-shadow 0.6s var(--ease); }
.mstep__box { transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease), background 0.6s var(--ease); }
.mstep:not(:last-child)::after {
  content: ""; position: absolute; left: 24px; top: 52px; bottom: 2px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--orange));
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.8s var(--ease);
}
.mstep.is-lit:not(:last-child)::after { transform: scaleY(1); }
.mstep.is-lit .ico {
  background: radial-gradient(circle at 50% 35%, #FDE68A 0%, #FBBF24 55%, #F59E0B 100%);
  color: #0B0F1A; border-color: rgba(251, 191, 36, 0.9);
  box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.13), 0 0 26px rgba(251, 191, 36, 0.55);
}
.mstep.is-lit .mstep__box { border-color: rgba(251, 191, 36, 0.55); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.16), 0 16px 36px -22px rgba(251, 191, 36, 0.6); }
.light .mstep.is-lit .mstep__box { background: #FFFBF0; }
.dark .mstep.is-lit .mstep__box { background: rgba(251, 191, 36, 0.06); }
.mstep.is-lit .mstep__n { color: var(--accent); }
.mstep.is-lit .ico::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(251, 191, 36, 0.75); pointer-events: none; opacity: 0;
}
.method.is-loaded.is-live .mstep.is-lit .ico::after { animation: eng-ring 2.6s var(--ease) infinite; }
.method.is-loaded.is-live .mstep:nth-child(2).is-lit .ico::after { animation-delay: 0.35s; }
.method.is-loaded.is-live .mstep:nth-child(3).is-lit .ico::after { animation-delay: 0.7s; }
.method.is-loaded.is-live .mstep:nth-child(4).is-lit .ico::after { animation-delay: 1.05s; }
.method.is-loaded.is-live .mstep:nth-child(5).is-lit .ico::after { animation-delay: 1.4s; }
/* Decorative loops run on the compositor and only start after load (.method.is-loaded, set by site.js on the section itself so the restyle stays local). */
.method .mstep .ico .i, .method .mstep .ico::after { will-change: transform; }
@keyframes eng-ring { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.7); opacity: 0; } }

.method.is-loaded.is-live .mstep .ico .i { animation: var(--ia, eng-bob) var(--it, 2.8s) ease-in-out infinite alternate; transform-origin: 50% 50%; }
.method.is-live .mstep:nth-child(1) .ico .i { --ia: eng-turn; --it: 3.4s; }
.method.is-live .mstep:nth-child(2) .ico .i { --ia: eng-bob; --it: 2.4s; }
.method.is-live .mstep:nth-child(3) .ico .i { --ia: eng-breathe; --it: 2.2s; }
.method.is-live .mstep:nth-child(4) .ico .i { --ia: eng-swing; --it: 2.6s; }
.method.is-live .mstep:nth-child(5) .ico .i { --ia: eng-sway; --it: 3s; transform-origin: 50% 12%; }
@keyframes eng-turn { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes eng-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes eng-breathe { from { transform: scale(0.86); } to { transform: scale(1.12); } }
@keyframes eng-swing { from { transform: rotate(-16deg) scale(0.95); } to { transform: rotate(16deg) scale(1.05); } }
@keyframes eng-sway { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@media (max-width: 720px) {
  .mstep:not(:last-child)::after { left: 20px; top: 44px; }
}

/* ---- Before / after: one frame, a client switch and a Before / After toggle.
   Each state is the whole page, scrolling inside the frame. ---- */
.bax { max-width: 1040px; margin: 0 auto; }
.bax__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.bax__clients, .bax__switch {
  position: relative; padding: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2);
}
.bax__clients { display: inline-flex; gap: 4px; }
.bax__client {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--mute); font: 600 14.5px/1.2 var(--f-body);
  transition: background 0.25s, color 0.25s;
}
.bax__client:hover { color: var(--fg); }
.bax__client[aria-selected="true"] { background: rgba(255, 255, 255, 0.1); color: var(--fg); }
.bax__switch { display: inline-grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
.bax__switch button {
  position: relative; z-index: 1; min-height: 44px; min-width: 108px; padding: 0 20px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--mute); font: 600 13px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.35s;
}
.bax__switch button[aria-pressed="true"] { color: var(--midnight); }
.bax__thumb {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
  border-radius: 999px; background: #E5E7EB;
  transition: transform 0.45s var(--ease), background 0.45s, box-shadow 0.45s;
}
.bax[data-state="after"] .bax__thumb { transform: translateX(100%); background: var(--gold); box-shadow: 0 8px 22px -8px rgba(251, 191, 36, 0.7); }
.bax__frame .frame__bar { gap: 7px; }
.bax__tag {
  margin-left: auto; padding: 5px 10px; border-radius: 999px;
  font: 600 11.5px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase;
  background: #0B0F1A; color: #FFFFFF; transition: background 0.35s, color 0.35s;
}
.bax[data-state="after"] .bax__tag { background: var(--gold); color: var(--midnight); }
.bax__view {
  position: relative; aspect-ratio: 16 / 10; overflow-x: hidden; overflow-y: auto;
  background: #FFFFFF; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(11, 15, 26, 0.35) transparent;
}
.bax__view:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 0; }
.bax__pane { display: none; }
.bax__pane.is-on { display: block; animation: bax-in 0.5s var(--ease); }
.bax__pane img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }
.bax__view.is-loading { background: linear-gradient(100deg, #F3F4F6 30%, #FFFFFF 50%, #F3F4F6 70%) 0 0 / 300% 100%; animation: bax-shimmer 1.4s linear infinite; }
@keyframes bax-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bax-shimmer { to { background-position: -300% 0; } }
.bax__hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px; pointer-events: none;
  background: rgba(11, 15, 26, 0.84); color: #FFFFFF; font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.05em;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); transition: opacity 0.4s;
}
.bax__hint .i { width: 14px; height: 14px; animation: eng-bob 1.1s ease-in-out infinite alternate; }
.bax.is-touched .bax__hint { opacity: 0; }
.bax__cap { margin: 20px auto 0; max-width: 72ch; text-align: center; color: var(--mute); font-size: 15.5px; line-height: 1.55; }
.bax__cap b { color: var(--fg); font-weight: 600; }
@media (max-width: 720px) {
  .bax__bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .bax__clients { display: grid; grid-template-columns: 1fr 1fr; }
  .bax__client { padding: 0 10px; font-size: 13.5px; }
  .bax__switch { width: 100%; }
  .bax__switch button { min-width: 0; }
  .bax__view { aspect-ratio: 4 / 5; }
  .bax__hint { bottom: 12px; font-size: 12.5px; padding: 8px 13px; }
}

/* ---- Footer line, typed out (site.js). The ghost copy holds the space so
   nothing reflows while it types. ---- */
.tw { margin: 0; }
.tw__line { position: relative; display: inline-block; padding-right: calc(0.55em + 2px); }
.tw__ghost { visibility: hidden; }
.tw__t { position: absolute; inset: 0 0 auto 0; }
.tw__c {
  display: inline-block; width: 0.55em; height: 1.1em; margin-left: 2px; vertical-align: -0.18em;
  background: var(--gold); animation: tw-blink 1.05s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }

/* ---- A la carte cards: one photograph each, slowly drifting, with a gold sheen
   that sweeps across on hover. The drift only runs once the card is in view. ---- */
.svc__img {
  position: relative; margin: -28px -28px 24px; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 25px 25px 0 0; background: #0B0F1A; border-bottom: 1px solid var(--line);
}
.svc__img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); animation: svc-drift 18s ease-in-out infinite alternate; animation-play-state: paused;
}
.svc.is-in .svc__img img { animation-play-state: running; }
.svc:nth-child(3n+2) .svc__img img { animation-duration: 21s; animation-delay: -7s; }
.svc:nth-child(3n) .svc__img img { animation-duration: 24s; animation-delay: -13s; }
@keyframes svc-drift {
  0% { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.15) translate3d(-2.6%, -1.6%, 0); }
}
.svc__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(253, 230, 138, 0.28) 50%, transparent 68%);
  transform: translateX(-110%); transition: transform 1.2s var(--ease);
}
.svc:hover .svc__img::after { transform: translateX(110%); }
.svc { transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s; }
.svc:hover { transform: translateY(-5px); border-color: var(--gold-line); box-shadow: 0 34px 60px -38px rgba(168, 77, 8, 0.45); }
.svc__top .kicker { margin: 0; }
@media (max-width: 720px) { .svc__img { margin: -26px -22px 22px; } }

/* ---- Sprint tiers: the lead promise, right under the price ---- */
.tier__lead {
  display: flex; align-items: center; gap: 10px; margin: -8px 0 26px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid rgba(251, 191, 36, 0.38);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.04));
  color: var(--fg-2); font-size: 15px; line-height: 1.35;
}
.tier__lead .i { width: 18px; height: 18px; flex: none; color: var(--accent); }
.tier__lead b { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .method.is-live .mstep .ico .i, .method.is-live .mstep.is-lit .ico::after, .bax__hint .i, .tw__c,
  .svc__img img, .bax__pane.is-on, .bax__view.is-loading { animation: none; }
  .svc__img::after { display: none; }
}

/* ---- /offer/: a native WordPress page in block markup (gen_offer.py). The block
   wrappers carry the same classes as the static pages, so only a few new pieces. ---- */
.after90 { margin: 32px auto 0; max-width: 68ch; text-align: center; font-size: 1.05rem; color: var(--fg-2); }
.after90 b { color: var(--fg); }
.wrap--guar { max-width: calc(860px + var(--gut) * 2); }
.bonus { max-width: 800px; margin: 0 auto; padding: 38px 40px; }
.bonus__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.bonus__top .ico { width: 54px; height: 54px; }
.bonus h3 { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem); letter-spacing: -0.03em; margin-bottom: 14px; }
.bonus .ticks { margin: 24px 0; }
.bonus p.tiny { margin: 0; }
.pk-note { margin: 32px auto 0; max-width: 74ch; text-align: center; }
p.acc__a { margin: 0; }
.rct-page .phase .pill { margin: 0 0 20px; }
.rct-page .glance .ticks { gap: 12px; }
@media (max-width: 720px) { .bonus { padding: 28px 22px; } }
.item .kicker { margin: 18px 0 10px; }
.cta .cta-row { justify-content: center; margin-top: 32px; }

/* =====================================================================
   v2.2, 9 Oct 2026: /offer/ and /growth-team/ (gen_offer.py) reworked into
   a decision page: the crew's real sites in the hero, proof first, six
   jobs, the roadmap, packages with a comparison, the full scope folded,
   the guarantee, the team, and a call bar on phones. Every new piece is
   .ofr-*, so no other page changes.
   ===================================================================== */

/* ---- hero: copy on the left, three real client sites on the right ---- */
.ofr-hero { padding-bottom: calc(var(--sec-y) * 0.8); }
.ofr-hero h1 { font-size: clamp(2.55rem, 1.2rem + 3.7vw, 4.4rem); max-width: 14ch; }
.ofr-hero h1.ofr-h1--long { font-size: clamp(2.2rem, 1.05rem + 2.9vw, 3.6rem); max-width: 19ch; }
.ofr-hero .lede { margin-top: 24px; }
.ofr-hero .cta-row { margin-top: 32px; }
/* The headline is the LCP element: it paints at once and only rises (same rule as the home hero). */
html.js .ofr-hero h1.lift { opacity: 1; }
html.js body.is-ready .ofr-hero h1.lift { animation: lift-rise 0.95s var(--ease) var(--d, 0ms) both; }
@media (min-width: 961px) {
  .ofr-hero .inner { grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
}

.ofr-assure { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ofr-assure li { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 15px; line-height: 1.3; }
.ofr-assure .i { width: 16px; height: 16px; color: var(--accent); }

.ofr-collage { position: relative; aspect-ratio: 1 / 0.9; }
.ofr-collage .frame { position: absolute; margin: 0; }
.ofr-collage .frame__bar { height: 24px; gap: 6px; padding: 0 11px; }
.ofr-collage .frame__bar i { width: 8px; height: 8px; }
.ofr-collage .frame__bar span { max-width: 40%; height: 12px; margin-left: 8px; }
.ofr-c1 { left: 0; top: 21%; width: 70%; z-index: 2; }
.ofr-c2 { right: 0; top: 0; width: 64%; z-index: 1; }
.ofr-c3 { right: 5%; bottom: 8%; width: 52%; z-index: 3; }
.ofr-collage__cap {
  position: absolute; left: 0; bottom: 0; margin: 0;
  font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute);
}
.ofr-stats { max-width: none; margin-top: 72px; }

/* ---- proof: Maria's Search Console, her video, two sites before / after ---- */
.ofr-case { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; padding: 40px; border-radius: 30px; }
.ofr-case__copy .kicker { margin-bottom: 14px; }
.ofr-case h3 { font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.2rem); line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 14px; }
.ofr-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.ofr-metric { padding: 18px 18px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--card-2); }
.ofr-metric b { display: block; font: 800 clamp(1.7rem, 1.3rem + 1.1vw, 2.3rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--fg); }
.ofr-metric span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--mute); }
.ofr-quote {
  margin: 0; padding: 18px 20px; border-left: 3px solid var(--gold); border-radius: 0 16px 16px 0;
  background: var(--card-2); font: 500 1.05rem/1.55 var(--f-body); color: var(--fg);
}
.ofr-quote em { font-style: normal; color: var(--accent); }
.ofr-quote footer { margin-top: 10px; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.ofr-shot { margin: 0; }
.ofr-shot__frame { display: block; text-decoration: none; transition: transform 0.35s var(--ease); }
.ofr-shot__frame:hover { transform: translateY(-3px); }
.ofr-shot .frame img { aspect-ratio: 949 / 366; object-fit: fill; }
.ofr-shot figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--mute); }

.ofr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; align-items: start; }
.ofr-pair .kicker { margin: 0 0 14px; }
.ofr-pair .vid { border-radius: 22px; }
.ofr-pair .bax { max-width: none; }
.ofr-pair .bax__bar { margin-bottom: 14px; gap: 12px; }
.ofr-pair .bax__client { padding: 0 14px; font-size: 14px; }
.ofr-pair .bax__switch button { min-width: 84px; padding: 0 14px; }
.ofr-pair__note { margin: 14px 0 0; }
/* The video and the before / after switch were drawn for dark bands; this band is paper. */
.ofr-proof .vid { box-shadow: var(--frame-shadow); }
.light.ofr-proof .bax__clients, .light.ofr-proof .bax__switch { background: #FFFFFF; }
.light.ofr-proof .bax__client:hover { color: var(--fg); }
.light.ofr-proof .bax__client[aria-selected="true"] { background: var(--midnight); color: #FFFFFF; }
.light.ofr-proof .bax__thumb { background: #ECE6D9; }

/* ---- six jobs the crew takes on ---- */
.ofr-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ofr-job { display: flex; flex-direction: column; padding: 30px 28px 26px; border-radius: 26px; }
.ofr-job__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.ofr-job h3 { font-size: 1.32rem; margin: 0 0 10px; }
.ofr-job p { font-size: 15.5px; line-height: 1.55; }
.ofr-job .ofr-job__win { color: var(--fg-2); font-weight: 600; }
.ofr-job p.ofr-tag {
  margin-top: auto; padding-top: 20px; display: flex; align-items: center; gap: 9px;
  font: 500 12px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.ofr-tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); }
.ofr-tag--up::before { background: transparent; border: 1.5px solid var(--gold); box-shadow: none; }
.ofr-jobs__more { margin: 32px 0 0; text-align: center; }

/* ---- packages: headline items, the full list folded, then the comparison ---- */
.tier__fit { margin: 0 0 18px; color: var(--fg-2); font-size: 15.5px; line-height: 1.5; }
.tier__fit b { color: var(--fg); }
.tier__keys { margin-bottom: 4px; }
.tier__more { margin: 22px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tier__more summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px; font: 600 15px/1.3 var(--f-body); color: var(--fg);
}
.tier__more summary::-webkit-details-marker { display: none; }
.tier__more summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--accent); font: 400 20px/1 var(--f-body); transition: transform 0.3s var(--ease);
}
.tier__more[open] summary::after { transform: rotate(45deg); }
.tier__more .tier__group:first-of-type { margin-top: 8px; }

.ofr-compare { margin-top: 80px; }
.ofr-compare__head { display: block; list-style: none; max-width: 640px; margin: 0 auto 28px; text-align: center; }
.ofr-compare__head::-webkit-details-marker { display: none; }
.ofr-compare__head h3 { font-size: clamp(1.55rem, 1.15rem + 1.2vw, 2.1rem); letter-spacing: -0.03em; }
.ofr-compare__head span { display: block; margin: 10px 0 0; color: var(--mute); }
@media (min-width: 721px) { .ofr-compare__head { pointer-events: none; cursor: default; } }
.ofr-table-wrap { border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); padding: 6px 22px 12px; }
.ofr-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.ofr-table th, .ofr-table td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ofr-table thead th { padding: 22px 12px 16px; font: 700 1.12rem/1.2 var(--f-display); letter-spacing: -0.01em; color: var(--fg); }
.ofr-table thead small { display: block; margin-top: 6px; font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.08em; color: var(--mute); }
.ofr-table thead .is-feat { color: var(--accent); }
.ofr-table .is-feat { background: rgba(251, 191, 36, 0.06); }
.ofr-table tbody th { width: 24%; color: var(--fg); font-weight: 600; }
.ofr-table td { width: 25.33%; color: var(--fg-2); }
.ofr-table tr.ofr-grp th { padding: 28px 12px 10px; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border-bottom-color: var(--line-2); }
.ofr-table tbody tr:last-child th, .ofr-table tbody tr:last-child td { border-bottom: 0; }
.ofr-yes .i { width: 20px; height: 20px; color: var(--accent); }
.ofr-no { display: inline-block; width: 16px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--line-2); vertical-align: top; }

/* ---- every line item, folded in two columns that open independently ---- */
.ofr-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; counter-reset: scope; }
.ofr-scope details { counter-increment: scope; }
.ofr-scope summary::before {
  content: counter(scope, decimal-leading-zero); width: auto; height: auto; border-radius: 0; background: none;
  font: 600 12.5px/1 var(--f-mono); letter-spacing: 0.1em; color: var(--mute);
}
.ofr-scope details[open] summary::before { background: none; color: var(--accent); }
.ofr-scope__body { padding: 0 26px 24px; }
.ofr-scope__body > p { color: var(--mute); margin: 0 0 12px; }
.ofr-scope__body .kicker { margin: 18px 0 12px; color: var(--accent); }
.ofr-scope__body .item__why { margin: 18px 0 0; }
.ofr-scope__body .ticks li { font-size: 15.5px; }
.ofr-scope__tag b { color: var(--fg); }
.ofr-scope__ask {
  display: grid; gap: 6px; padding: 22px 24px 24px; border-radius: 22px;
  border: 1px dashed rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.04);
}
.ofr-scope__ask b { color: var(--fg); font: 700 1.08rem/1.35 var(--f-display); letter-spacing: -0.01em; }
.ofr-scope__ask span { color: var(--mute); font-size: 15px; line-height: 1.5; }
.ofr-scope__ask .arrowlink { margin-top: 8px; }

/* ---- guarantee: the 200 leads, the refund, ownership ---- */
.ofr-promise { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch; }
.ofr-promise__lead { grid-row: span 2; }
.ofr-promise .card { padding: 32px 30px; border-radius: 28px; }
.ofr-promise h3 { font-size: 1.45rem; letter-spacing: -0.02em; margin: 18px 0 12px; }
.ofr-promise__lead h3 { font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.1rem); margin-top: 0; }
.ofr-promise .ticks { margin: 20px 0; }
.ofr-promise__card .ticks { margin-bottom: 0; }
.ofr-promise__lead p.tiny { margin: 0; }

/* ---- the team ---- */
.ofr-team { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 16px; }
.ofr-person { flex: 0 0 calc((100% - 96px) / 7); text-align: center; }
.ofr-person img {
  display: block; width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; background: #E5E7EB;
  border: 2px solid rgba(251, 191, 36, 0.45); box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.06);
}
.ofr-person b { display: block; color: var(--fg); font: 700 1.05rem/1.2 var(--f-display); }
.ofr-person span { display: block; margin-top: 6px; color: var(--mute); font: 500 11.5px/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ofr-team__more { margin: 40px 0 0; text-align: center; }

/* ---- pictures held back until the page has loaded ([data-after-load], site.js): lazy images
   inside stay display:none, so they are not fetched while the headline and fonts load. Without
   JS (no html.js) they show and load as usual. ---- */
html.js [data-after-load]:not(.is-loaded) img { display: none; }
.ofr-collage .scroll { background: linear-gradient(180deg, #EEF0F3 0%, #F8F8F9 100%); }
/* .frame .scroll img resets aspect-ratio to auto; these load late, so give them their real shape up front. */
.ofr-collage .scroll img { aspect-ratio: 1280 / 2600; }
.vid__poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.vid.is-playing .vid__poster { display: none; }

/* ---- /growth-team/ is a funnel page (template "RCT v2 funnel": no nav, no footer). The brand
   sits above the headline, the call repeats after each part, and a who-it-is-for block. ---- */
.ofr-hero--funnel { padding-top: 72px; }
.ofr-brand { display: flex; width: fit-content; align-items: center; gap: 11px; margin: 0 0 34px; color: #FFFFFF; font: 700 17px/1 var(--f-display); letter-spacing: -0.015em; }
.ofr-brand img { width: 40px; height: auto; display: block; }
.ofr-cta { margin: 56px auto 0; text-align: center; }
.ofr-cta .btn { min-width: 280px; }
.ofr-cta__note { margin: 14px auto 0; max-width: 60ch; color: var(--mute); font-size: 14.5px; line-height: 1.5; }
.ofr-bridge { max-width: 62ch; margin: 44px auto 0; text-align: center; color: var(--fg-2); font-size: 1.08rem; line-height: 1.6; }
.ofr-bridge b { color: var(--fg); }
.ofr-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1060px; margin: 0 auto; align-items: stretch; }
.ofr-fit__card { padding: 34px 32px; border-radius: 28px; }
.ofr-fit__card h3 { font-size: 1.45rem; margin-bottom: 22px; }
.ticks--no li::before { background: rgba(127, 127, 127, 0.14); }
.ticks--no li::after {
  content: "\00D7"; left: 0; top: 0.08em; width: 21px; height: 21px; border: 0; transform: none;
  display: block; text-align: center; font: 600 15px/21px var(--f-body); color: var(--mute);
}

/* ---- /growth-team/ urgency (10 Oct 2026): the month-end countdown (site.js [data-countdown])
   in the hero, above the packages, on each Buy button, in the closing call and in the call bar.
   Hidden without JS, so a visitor never sees frozen numbers. ---- */
html:not(.cd):not(.cd-on) [data-countdown] { display: none; }
.ofr-clock {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  width: fit-content; max-width: 100%; margin-top: 24px; padding: 12px 12px 12px 18px;
  border-radius: 22px; border: 1px solid var(--gold-line); background: rgba(251, 191, 36, 0.06);
}
.ofr-clock__label { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--fg); font: 600 15px/1.35 var(--f-body); }
.ofr-clock__label b { font-weight: 700; color: var(--accent); }
.ofr-clock__pulse { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.ofr-clock__pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--orange);
  opacity: 0; animation: cd-pulse 1.8s var(--ease) infinite;
}
@keyframes cd-pulse { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.4); opacity: 0; } }
.ofr-clock__units { display: flex; gap: 6px; }
.ofr-clock__units span { min-width: 54px; padding: 8px 6px 7px; border-radius: 12px; text-align: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.ofr-clock__units b { display: block; color: var(--fg); font: 800 1.45rem/1 var(--f-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ofr-clock__units i { display: block; margin-top: 5px; color: var(--mute); font: 500 10.5px/1 var(--f-mono); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.ofr-clock__foot { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0 19px; color: var(--mute); font-size: 13px; line-height: 1.4; }
.ofr-sticky__price::before { content: "\00B7"; margin: 0 6px; }
.ofr-clock--center { margin: 30px auto 0; justify-content: center; }

.ofr-urgent {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px 48px;
  max-width: 1060px; margin: 0 auto 40px; padding: 30px 34px; border-radius: 28px;
  border: 1px solid var(--gold-line);
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 134, 26, 0.12), transparent 60%), rgba(251, 191, 36, 0.05);
}
.ofr-urgent .kicker { margin-bottom: 8px; }
.ofr-urgent h3 { margin: 0; font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); letter-spacing: -0.025em; }
.ofr-urgent h3 span { color: var(--accent); }
.ofr-urgent__copy p:last-child { margin: 12px 0 0; max-width: 54ch; color: var(--mute); font-size: 15.5px; line-height: 1.6; }
.ofr-urgent .ofr-clock__units { gap: 8px; }
.ofr-urgent .ofr-clock__units span { min-width: 72px; padding: 12px 8px 10px; border-radius: 16px; }
.ofr-urgent .ofr-clock__units b { font-size: 2.2rem; }
.ofr-urgent__date { margin: 12px 0 0; text-align: center; color: var(--mute); font: 500 12px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }

.tier__clock { display: flex; align-items: center; justify-content: center; gap: 9px; margin: auto 0 12px; color: var(--fg-2); font-size: 13.5px; line-height: 1.35; text-align: center; }
.tier__clock b { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

.ofr-wait { max-width: 56ch; margin: 22px auto 0; color: var(--fg-2); font-size: 1.05rem; line-height: 1.6; }
.ofr-wait b { color: var(--fg); }
.ofr-buynow { margin: 22px auto 0; }
.ofr-sticky--all p b { font-variant-numeric: tabular-nums; }
/* /growth-team/ is the 1 Oct page, whose packages sit on a light section */
.light .ofr-urgent { background: radial-gradient(120% 140% at 100% 0%, rgba(255, 134, 26, 0.1), transparent 60%), #FFFDF8; box-shadow: var(--shadow); }
.light .ofr-clock__units span { background: var(--card-solid); border-color: var(--line-2); }
/* no menu on funnel pages: the hero does not clear a floating nav, and anchors do not either */
.rct-funnel .phero { padding-top: 72px; }
.rct-funnel .phero .ofr-brand { margin-bottom: 28px; }
html:has(body.rct-funnel) { scroll-padding-top: 24px; }

/* ---- call bar: phones and tablets, where the nav's own button is hidden ---- */
.ofr-sticky { display: none; }

@media (min-width: 961px) {
  .rct-funnel .ofr-sticky, .ofr-sticky.ofr-sticky--all {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 50%; bottom: 18px; z-index: 50; width: 520px;
    padding: 8px 8px 8px 22px; border-radius: 999px;
    background: rgba(10, 14, 24, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
    transform: translate(-50%, calc(100% + 30px)); transition: transform 0.45s var(--ease);
  }
  .rct-funnel .ofr-sticky.is-on, .ofr-sticky--all.is-on { transform: translate(-50%, 0); }
  .rct-funnel .ofr-sticky p, .ofr-sticky--all p { flex: 1; margin: 0; color: #C3C9D4; font: 500 14px/1.3 var(--f-body); }
  .rct-funnel .ofr-sticky p b, .ofr-sticky--all p b { display: block; color: #FFFFFF; font-weight: 700; font-size: 15.5px; }
  .rct-funnel .ofr-sticky .btn, .ofr-sticky--all .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
}

@media (max-width: 1100px) {
  .ofr-person { flex-basis: calc((100% - 48px) / 4); }
}

@media (max-width: 860px) {
  .ofr-promise { grid-template-columns: 1fr; }
  .ofr-promise__lead { grid-row: auto; }
}

@media (max-width: 960px) {
  .ofr-hero .inner { gap: 48px; }
  .ofr-hero h1, .ofr-hero h1.ofr-h1--long { max-width: 18ch; }
  .ofr-collage { max-width: 640px; }
  .ofr-case { grid-template-columns: 1fr; gap: 32px; }
  .ofr-pair { grid-template-columns: 1fr; gap: 40px; }
  .ofr-jobs { grid-template-columns: repeat(2, 1fr); }
  .ofr-scope { grid-template-columns: 1fr; }
  .ofr-sticky {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
    padding: 8px 8px 8px 20px; border-radius: 999px;
    background: rgba(10, 14, 24, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
    transform: translateY(calc(100% + 24px)); transition: transform 0.45s var(--ease);
  }
  .ofr-sticky.is-on { transform: none; }
  .ofr-sticky p { flex: 1; min-width: 0; margin: 0; color: #C3C9D4; font: 500 13.5px/1.3 var(--f-body); }
  .ofr-sticky p b { display: block; color: #FFFFFF; font-weight: 700; font-size: 15px; }
  .ofr-sticky .btn { min-height: 48px; padding: 0 20px; font-size: 15px; }
  /* one thing at the bottom of the screen: the WhatsApp button steps aside while the bar is up */
  .wa { transition: opacity 0.3s, transform 0.3s; }
  body:has(.ofr-sticky.is-on) .wa { opacity: 0; pointer-events: none; transform: translateY(16px); }
}

@media (max-width: 720px) {
  .ofr-hero { padding-bottom: 72px; }
  .ofr-assure { gap: 8px 18px; }
  .ofr-assure li { font-size: 14.5px; }
  .ofr-collage .frame__bar { height: 18px; gap: 4px; padding: 0 8px; }
  .ofr-collage .frame__bar i { width: 6px; height: 6px; }
  .ofr-collage .frame__bar span { display: none; }
  .ofr-collage .frame { border-radius: 12px; }
  .ofr-collage__cap { font-size: 11.5px; }
  .ofr-stats { margin-top: 48px; }
  .ofr-case { padding: 24px 20px; border-radius: 24px; }
  .ofr-metric { padding: 14px 14px 12px; }
  .ofr-metric span { font-size: 13.5px; }
  .ofr-jobs { grid-template-columns: 1fr; gap: 12px; }
  .ofr-job { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 20px 18px 18px; }
  .ofr-job__top { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .ofr-job__top .ico { width: 44px; height: 44px; }
  .ofr-job__top .ico .i { width: 20px; height: 20px; }
  .ofr-job__top .badge { position: absolute; top: 18px; right: 16px; font-size: 12px; padding: 5px 10px; }
  .ofr-job > :not(.ofr-job__top) { grid-column: 2; }
  .ofr-job h3 { font-size: 1.12rem; margin-bottom: 6px; }
  .ofr-job--badge h3 { padding-right: 104px; }
  .ofr-job p { font-size: 15px; }
  .ofr-job p.ofr-tag { padding-top: 12px; }
  .ofr-compare { margin-top: 48px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
  .ofr-compare__head {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px;
    margin: 0; padding: 18px 18px 18px 20px; text-align: left; cursor: pointer;
  }
  .ofr-compare__head h3 { font-size: 1.15rem; letter-spacing: -0.015em; }
  .ofr-compare__head span { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.45; }
  .ofr-compare__head::after {
    content: "+"; grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--accent);
    font: 400 21px/1 var(--f-body); transition: transform 0.3s var(--ease);
  }
  .ofr-compare[open] .ofr-compare__head::after { transform: rotate(45deg); }
  .ofr-compare .ofr-table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 22px 22px; box-shadow: none; background: none; }
  .ofr-table-wrap { padding: 4px 16px 8px; border-radius: 22px; }
  .ofr-table thead { display: none; }
  .ofr-table, .ofr-table tbody, .ofr-table tr, .ofr-table th, .ofr-table td { display: block; width: auto; }
  .ofr-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ofr-table tbody tr:last-child { border-bottom: 0; }
  .ofr-table th, .ofr-table td { padding: 0; border: 0; }
  .ofr-table tbody th { width: auto; margin-bottom: 8px; }
  .ofr-table tr.ofr-all { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .ofr-table tr.ofr-all th { margin: 0; }
  .ofr-table tr.ofr-all td { display: none; }
  .ofr-table tr.ofr-all td:first-of-type { display: block; padding: 0; }
  .ofr-table tr.ofr-all td:first-of-type::before { content: none; }
  .ofr-table td { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 5px 0; font-size: 14.5px; }
  .ofr-table td::before { content: attr(data-tier); font: 500 11.5px/1.7 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
  .ofr-table .is-feat { background: none; }
  .ofr-table tr.ofr-grp { padding: 22px 0 8px; border-bottom: 1px solid var(--line-2); }
  .ofr-table tr.ofr-grp th { padding: 0; }
  .ofr-scope__body { padding: 0 20px 20px; }
  .ofr-promise .card { padding: 26px 22px; }
  .ofr-team { gap: 26px 12px; }
  .ofr-person { flex-basis: calc((100% - 24px) / 3); }
  .ofr-person img { width: 76px; height: 76px; }
  .ofr-sticky p { font-size: 13px; }
  .ofr-hero--funnel, .rct-funnel .phero { padding-top: 40px; }
  .ofr-brand { margin-bottom: 26px; font-size: 15.5px; }
  .ofr-cta { margin-top: 40px; }
  .ofr-cta .btn { width: 100%; min-width: 0; }
  .ofr-fit { grid-template-columns: 1fr; }
  .ofr-fit__card { padding: 26px 22px; }
  .ofr-clock { width: 100%; padding: 14px; }
  .ofr-sticky__price { display: none; }
  .ofr-clock__units { width: 100%; }
  .ofr-clock__units span { flex: 1; min-width: 0; }
  .ofr-urgent { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; padding: 24px 20px; border-radius: 24px; }
  .ofr-urgent .ofr-clock__units span { flex: 1; min-width: 0; }
  .ofr-urgent .ofr-clock__units b { font-size: 1.8rem; }
}

@media (max-width: 400px) {
  .ofr-sticky .btn { width: auto; padding: 0 16px; white-space: nowrap; }
  .ofr-sticky p b { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ofr-sticky, .wa { transition: none; }
  .ofr-clock__pulse::after { animation: none; }
  .ofr-shot__frame:hover { transform: none; }
}

/* =====================================================================
   /growth-team/ visuals, 10 Oct 2026 (feedback doc, tab "feedback 2":
   "Move the logo top left" and "it lacks actual visuals and animations").
   Added around the 1 Oct copy, which stays word for word (gen_growth_team.py).
   Every new piece is .gt-*, or scoped to the funnel template (.rct-funnel),
   so no other page changes. Decorative loops run on the compositor
   (transform / opacity) and stop for prefers-reduced-motion.
   ===================================================================== */

/* ---- the logo, in the page's top-left corner (outside the content column) ---- */
.rct-funnel .gt-hero { padding-top: 132px; }
.gt-logo {
  position: absolute; top: 30px; left: clamp(20px, 3vw, 44px); z-index: 6; margin: 0;
  display: flex; align-items: center; gap: 12px;
  color: #FFFFFF; font: 700 18px/1 var(--f-display); letter-spacing: -0.015em;
}
.gt-logo img { width: 46px; height: auto; display: block; }

/* ---- hero: the crew's client sites behind the at-a-glance card ---- */
@media (min-width: 961px) {
  .gt-hero .inner { grid-template-columns: 1.06fr 0.94fr; gap: 56px; }
}
/* the glow is sized in px, not in % of the hero: the headline reflows when the web font arrives, and a
   %-sized glow moved with it (counted as a layout shift on phones) */
.gt-hero.glow::before { top: -300px; height: 960px; }
.gt-stage { position: relative; }
.gt-collage { position: relative; aspect-ratio: 1 / 0.8; margin-bottom: -64px; }
.gt-collage .frame { position: absolute; margin: 0; }
.gt-collage.is-loaded.is-live .frame { animation: gt-float 9s ease-in-out infinite alternate; }
.gt-collage:not(.is-live) .scroll img { animation-play-state: paused; }
.gt-collage .frame__bar { height: 24px; gap: 6px; padding: 0 11px; }
.gt-collage .frame__bar i { width: 8px; height: 8px; }
.gt-collage .frame__bar span { max-width: 40%; height: 12px; margin-left: 8px; }
.gt-collage .scroll { background: linear-gradient(180deg, #EEF0F3 0%, #F8F8F9 100%); }
.gt-collage .scroll img { aspect-ratio: 1280 / 2600; }
.gt-f1 { left: 0; top: 15%; width: 64%; z-index: 2; }
.gt-f2 { right: 0; top: 0; width: 58%; z-index: 1; }
.gt-f3 { right: 3%; top: 42%; width: 45%; z-index: 3; }
.gt-collage.is-loaded.is-live .gt-f2 { animation-duration: 11s; animation-delay: -4s; }
.gt-collage.is-loaded.is-live .gt-f3 { animation-duration: 10s; animation-delay: -7s; }
@keyframes gt-float { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
.gt-collage__cap {
  position: absolute; left: 0; top: 0; margin: 0; max-width: 40%;
  font: 500 11.5px/1.35 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute);
}
.gt-stage .glance {
  position: relative; z-index: 4; margin-left: 9%;
  background: linear-gradient(180deg, rgba(22, 28, 40, 0.97) 0%, rgba(17, 22, 31, 0.97) 100%);
}
/* the six lines tick in one after another */
html.js .gt-stage .glance .ticks li { opacity: 0; }
html.js body.is-ready .gt-stage .glance .ticks li { animation: lift 0.7s var(--ease) both; animation-delay: calc(480ms + var(--i, 0) * 110ms); }
.gt-stage .glance .ticks li:nth-child(2) { --i: 1; }
.gt-stage .glance .ticks li:nth-child(3) { --i: 2; }
.gt-stage .glance .ticks li:nth-child(4) { --i: 3; }
.gt-stage .glance .ticks li:nth-child(5) { --i: 4; }
.gt-stage .glance .ticks li:nth-child(6) { --i: 5; }

/* ---- proof: the Search Console chart draws in from the left ---- */
html.js .gt-proof .ofr-shot .frame img { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease) 0.25s; }
html.js .gt-proof .ofr-case.is-in .ofr-shot .frame img { clip-path: inset(0 0 0 0); }

/* ---- why 90 days: a 12-week track that runs once, over the three phase cards ---- */
.gt-track { margin: 0 0 30px; padding: 26px 30px 22px; border-radius: 24px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.gt-track__label { margin: 0 0 12px; font: 500 12px/1.3 var(--f-mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.gt-track__weeks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); }
.gt-track__weeks li {
  text-align: center; font: 600 12.5px/1 var(--f-mono); color: var(--mute);
  transition: color 0.4s var(--ease); transition-delay: calc(var(--i) * 230ms);
}
.gt-track__weeks li:nth-child(4n) { border-right: 1px dashed var(--line-2); }
.gt-track__weeks li:last-child { border-right: 0; }
.gt-track.is-in .gt-track__weeks li { color: var(--accent); }
.gt-track__rail { position: relative; height: 6px; border-radius: 6px; background: var(--paper-2); }
.gt-track__fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--grad);
  transform: scaleX(0); transform-origin: left center; transition: transform 2.8s var(--ease) 0.2s;
}
.gt-track__dot {
  position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #FFFFFF; border: 3px solid var(--orange-7); box-shadow: 0 0 0 6px rgba(194, 65, 12, 0.14);
  transition: left 2.8s var(--ease) 0.2s;
}
.gt-track.is-in .gt-track__fill { transform: scaleX(1); }
.gt-track.is-in .gt-track__dot { left: 100%; }
.gt-track__marks { position: relative; height: 46px; margin-top: 14px; }
.gt-track__marks p {
  position: absolute; top: 0; left: calc(var(--at) * 100%); transform: translateX(-50%); margin: 0;
  color: var(--fg-2); font-size: 14px; line-height: 1.35; white-space: nowrap; text-align: center;
  opacity: 0.35; transition: opacity 0.5s var(--ease); transition-delay: calc(0.2s + var(--at) * 2.6s);
}
.gt-track__marks p:first-child { transform: none; text-align: left; }
.gt-track__marks p:last-child { transform: translateX(-100%); text-align: right; }
.gt-track__marks b { display: block; margin-bottom: 3px; font: 600 11.5px/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.gt-track.is-in .gt-track__marks p { opacity: 1; }
html:not(.js) .gt-track__fill { transform: none; }
html:not(.js) .gt-track__dot { left: 100%; }
html:not(.js) .gt-track__marks p { opacity: 1; }
#why90:has(.gt-track) .phase:nth-child(2) { --d: 160ms; }
#why90:has(.gt-track) .phase:nth-child(3) { --d: 320ms; }

/* ---- every line item: one photograph on top, slowly drifting, with a sheen on hover ---- */
.gt-ph {
  position: relative; margin: -30px -30px 0; aspect-ratio: 2.5 / 1; overflow: hidden;
  border-radius: 23px 23px 0 0; background: #0B0F1A; border-bottom: 1px solid var(--line);
}
.gt-ph img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  transform: scale(1.04); animation: svc-drift 20s ease-in-out infinite alternate; animation-play-state: paused;
}
.item.is-in.is-live .gt-ph img { animation-play-state: running; }
.items .item:nth-child(even) .gt-ph img { animation-duration: 23s; animation-delay: -8s; }
.gt-ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(253, 230, 138, 0.26) 50%, transparent 68%);
  transform: translateX(-110%); transition: transform 1.2s var(--ease);
}
.item:hover .gt-ph::after { transform: translateX(110%); }
.gt-ph + .item__n {
  z-index: 2; top: 16px; right: 16px; padding: 7px 10px; border-radius: 999px; color: #E5E7EB;
  background: rgba(11, 15, 26, 0.7); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gt-ph ~ .ico {
  position: relative; z-index: 2; margin-top: -25px;
  background: linear-gradient(var(--icon-bg), var(--icon-bg)), var(--card-solid);
  border-color: var(--gold-line); box-shadow: 0 0 0 5px var(--card-solid);
}
.items .item.is-in .gt-ph ~ .ico { animation: gt-pop 0.6s var(--ease) 0.35s both; }
@keyframes gt-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- bonus: where the 200 leads come from, beside the card ---- */
.gt-bonus { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 24px; max-width: 1080px; margin: 0 auto; align-items: stretch; }
.gt-bonus .bonus { max-width: none; margin: 0; }
.gt-flow {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 22px 28px; border-radius: 28px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); --d: 180ms;
}
.gt-flow .kicker { margin: 0 0 20px; }
.gt-flow__src { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.gt-node {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--fg); font: 600 14.5px/1.25 var(--f-body);
}
.gt-node .ico { width: 34px; height: 34px; }
.gt-node .ico .i { width: 16px; height: 16px; }
.gt-flow__src .gt-node { flex-direction: column; justify-content: center; gap: 8px; padding: 14px 8px; text-align: center; font-size: 13.5px; }
.gt-node--mid { border-color: var(--gold-line); background: var(--badge-bg); }
.gt-flow__join {
  position: relative; display: block; width: 50%; height: 26px;
  border: 2px solid var(--gold-line); border-top: 0; border-radius: 0 0 16px 16px;
}
.gt-flow__v { position: relative; display: block; width: 2px; height: 26px; background: var(--gold-line); }
/* light running down each line, on a loop */
.gt-flow__v::after, .gt-flow__join i {
  content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 10px 2px rgba(255, 134, 26, 0.55);
  opacity: 0;
}
.gt-flow.is-live .gt-flow__v::after, .gt-flow.is-live .gt-flow__join i { animation: gt-drop 1.8s linear infinite; }
.gt-flow__join i { left: -5px; }
.gt-flow.is-live .gt-flow__join i { animation-name: gt-drop-short; }
.gt-flow__join i:last-child { left: auto; right: -5px; }
.gt-flow.is-live .gt-flow__join i:last-child { animation-delay: -0.9s; }
.gt-flow.is-live .gt-flow__v:nth-child(6)::after { animation-delay: -0.6s; }
.gt-flow.is-live .gt-flow__v:nth-child(8)::after { animation-delay: -1.2s; }
@keyframes gt-drop { 0% { transform: translateY(0); opacity: 0; } 20%, 75% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes gt-drop-short { 0% { transform: translateY(0); opacity: 0; } 20%, 70% { opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
.gt-ring { position: relative; width: 180px; height: 180px; margin-top: 6px; }
.gt-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.gt-ring circle { fill: none; stroke-width: 10; }
.gt-ring__bg { stroke: var(--paper-2); }
.gt-ring__fg { stroke: url(#gt-ring-g); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 0; }
html.js .gt-ring__fg { stroke-dashoffset: 327; transition: stroke-dashoffset 2.2s var(--ease) 0.2s; }
html.js .gt-flow.is-in .gt-ring__fg { stroke-dashoffset: 0; }
.gt-ring__n { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; }
.gt-ring__n b { font: 800 3rem/1 var(--f-display); letter-spacing: -0.045em; color: var(--fg); font-variant-numeric: tabular-nums; }
.gt-ring__n span { margin-top: 6px; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }

/* ---- guarantee: a slowly turning seal ---- */
.gt-seal { position: relative; width: 156px; height: 156px; margin: 0 auto 28px; }
.gt-seal::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(251, 191, 36, 0.28); }
.gt-seal__ring { display: block; width: 100%; height: 100%; }
.gt-seal.is-live .gt-seal__ring { animation: gt-spin 32s linear infinite; }
.gt-seal__ring text { fill: var(--gold); font: 600 10.5px var(--f-mono); }
.gt-seal__core {
  position: absolute; inset: 31px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px;
  color: var(--gold); border: 1px solid var(--gold-line);
  background: radial-gradient(circle at 50% 28%, rgba(251, 191, 36, 0.24), rgba(251, 191, 36, 0.05) 70%);
  box-shadow: 0 0 46px -8px rgba(251, 191, 36, 0.5);
}
.gt-seal__core .i { width: 24px; height: 24px; }
.gt-seal__core b { color: #FFFFFF; font: 800 1.45rem/1 var(--f-display); letter-spacing: -0.03em; }
@keyframes gt-spin { to { transform: rotate(360deg); } }

/* ---- packages: a light sweeps across the most chosen package now and then ---- */
body:has(.gt-hero) .tier--feat { overflow: hidden; }
body:has(.gt-hero) .tier--feat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(251, 191, 36, 0.16) 50%, transparent 62%);
  transform: translateX(-100%);
}
body:has(.gt-hero) .tier--feat.is-live::after { animation: gt-sweep 7s var(--ease) 2s infinite; }
@keyframes gt-sweep { 0% { transform: translateX(-100%); } 32%, 100% { transform: translateX(100%); } }

/* ---- closing call: the people who would do the work ---- */
.gt-crew { margin: 30px auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gt-crew__faces { list-style: none; margin: 0; padding: 0; display: flex; }
.gt-crew__faces li { width: 56px; height: 56px; margin-left: -12px; border-radius: 50%; background: #1F2937; }
.gt-crew__faces li:first-child { margin-left: 0; }
.gt-crew__faces img {
  display: block; width: 100%; height: 100%; border-radius: 50%; background: #E5E7EB;
  border: 3px solid var(--midnight); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55);
  transition: transform 0.3s var(--ease);
}
.gt-crew__faces li:hover img { transform: translateY(-5px); }
html.js .cta .wrap .gt-crew__faces li { opacity: 0; }
html.js .cta .wrap.is-in .gt-crew__faces li { animation: gt-pop 0.55s var(--ease) both; animation-delay: calc(450ms + var(--i) * 80ms); }
.gt-crew__names { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.4; }

@media (max-width: 960px) {
  .gt-stage { max-width: 620px; }
  .gt-bonus { grid-template-columns: 1fr; max-width: 800px; }
}

@media (max-width: 720px) {
  .rct-funnel .gt-hero { padding-top: 92px; }
  .gt-logo { top: 24px; gap: 10px; font-size: 16px; }
  .gt-logo img { width: 40px; }
  .gt-stage { display: flex; flex-direction: column; }
  .gt-collage { order: 2; margin: 28px 0 0; }
  .gt-collage .frame__bar { height: 18px; gap: 4px; padding: 0 8px; }
  .gt-collage .frame__bar i { width: 6px; height: 6px; }
  .gt-collage .frame__bar span { display: none; }
  .gt-collage .frame { border-radius: 12px; }
  /* the caption runs along the bottom on phones (at the top it wrapped into the first frame at 360px) */
  .gt-collage { aspect-ratio: 1 / 0.76; }
  .gt-f1 { top: 9%; }
  .gt-f3 { top: 35%; }
  .gt-collage__cap { top: auto; bottom: 0; max-width: none; font-size: 12px; letter-spacing: 0.08em; }
  .gt-stage .glance { margin-left: 0; }
  .gt-track { padding: 20px 16px 18px; border-radius: 20px; }
  .gt-track__weeks li { font-size: 11px; }
  .gt-track__marks { height: auto; display: grid; gap: 10px; margin-top: 18px; }
  .gt-track__marks p, .gt-track__marks p:first-child, .gt-track__marks p:last-child {
    position: static; transform: none; text-align: left; white-space: normal;
  }
  .gt-track__marks b { display: inline; margin: 0 8px 0 0; }
  .gt-ph { margin: -26px -22px 0; border-radius: 23px 23px 0 0; }
  .gt-flow { padding: 26px 18px 24px; }
  .gt-seal { width: 150px; height: 150px; }
  .gt-seal__core { inset: 30px; }
  .gt-crew__faces li { width: 48px; height: 48px; margin-left: -10px; }
  .gt-ring__n span { font-size: 12px; }
  /* readable for a 40+ audience on a phone */
  .rct-funnel .ofr-clock__units i { font-size: 11.5px; }
  /* a full-size tap target for the FAQ's call link */
  .rct-funnel .faqs__side .arrowlink { padding: 11px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-collage .frame, .gt-ph img, .gt-flow__v::after, .gt-flow__join i,
  .gt-seal__ring, body:has(.gt-hero) .tier--feat::after { animation: none; }
  .gt-flow__v::after, .gt-flow__join i, body:has(.gt-hero) .tier--feat::after { display: none; }
  .gt-ph::after { display: none; }
  html.js .gt-stage .glance .ticks li, html.js .cta .wrap .gt-crew__faces li { opacity: 1; animation: none; }
  html.js .gt-proof .ofr-shot .frame img { clip-path: none; }
}