/* ==========================================================================
   Dickens Media — Stylesheet
   Built on the adfects design system. Accent: Apple Blue #0A84FF.
   ========================================================================== */

:root {
  /* Color tokens */
  --bg:           #FFFFFF;
  --text:         #1C1D1F;
  --muted:        #6E6E76;
  --muted-2:      #6E6E76;
  --border:       #E4E7EC;
  --btn-bg:       #1C1D1F;
  --btn-bg-hover: #2D2E31;
  --btn-text:     #FFFFFF;
  --pill-bg:      #FFFFFF;
  --pill-border:  #E4E7EC;
  --frame-bg:     #F8F9FA;
  --mockup-pad:   #ECEEF0;
  --mockup-line:  #E3E3E3;
  --accent:       #0A6ED1;
  --accent-hover: #0A84FF;
  --accent-soft:  rgba(10, 132, 255, 0.05);
  --logo-green:   #2BB673;

  /* Typography */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Motion tokens (Emil Kowalski's curves): strong ease-out for entrances and
     feedback, strong ease-in-out for on-screen movement. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* contains full-bleed pseudos without breaking sticky nav */
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-weight: 500;
  color: var(--text);
}

h1 {
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  max-width: 16ch;
}
h2 {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
h3 {
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
h4 {
  font-size: 16px;
  letter-spacing: -0.01em;
}

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

/* Two-tone heading: muted first line, strong second line */
.t-fade { opacity: 0.3; }

/* Sword-glint shine sweep on the hero headline */
.t-glint {
  position: relative;
  display: inline-block;
  color: color-mix(in srgb, var(--text) 30%, transparent);
}
.t-glint::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--text);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 42%, rgba(0,0,0,0.85) 48%, #000 50%, rgba(0,0,0,0.85) 52%, transparent 58%);
  mask-image: linear-gradient(100deg, transparent 42%, rgba(0,0,0,0.85) 48%, #000 50%, rgba(0,0,0,0.85) 52%, transparent 58%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: -60% 0;
  mask-position: -60% 0;
  animation: glint-sweep-initial 3.2s cubic-bezier(0.3, 0.5, 0.35, 1) 0.7s 1 both;
}
.t-glint.is-glinting::after {
  animation: glint-sweep-hover 3.2s cubic-bezier(0.3, 0.5, 0.35, 1) 1 both;
}

@keyframes glint-sweep-initial {
  from { -webkit-mask-position: 72% 0; mask-position: 72% 0; }
  to { -webkit-mask-position: -60% 0; mask-position: -60% 0; }
}
@keyframes glint-sweep-hover {
  from { -webkit-mask-position: 72% 0; mask-position: 72% 0; }
  to { -webkit-mask-position: -60% 0; mask-position: -60% 0; }
}


@media (prefers-reduced-motion: reduce) {
  .t-glint::after { display: none; }
}




/* ---------- Layout: Frame ---------- */
.frame {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.16s var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-outline {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover {
  background: var(--frame-bg);
}

.btn-large { padding: 14px 26px; }

.btn-link {
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s ease;
}
.btn-link svg { transition: transform 0.15s var(--ease-out); }
.btn-link:hover { opacity: 0.85; }
.btn-link:hover svg { transform: translateX(3px); }

/* ---------- Navigation ---------- */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.top-nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.nav-logo-img { display: block; height: 24px; width: auto; }
/* Navbar logo runs a touch larger than the footer one */
.nav-bar .nav-logo-img { height: 28px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-cta { margin-left: 8px; }

.nav-menu-btn {
  display: none;
  width: 32px; height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  border-radius: 8px;
}
.nav-menu-btn span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-bar.is-open .nav-menu-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-bar.is-open .nav-menu-btn span:nth-child(2) { opacity: 0; }
.nav-bar.is-open .nav-menu-btn span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 32px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav-bar.is-open + .mobile-menu {
  display: flex;
  /* Pin under the sticky header so the menu is visible no matter how far
     the page is scrolled (in flow it would render off-screen at the top). */
  position: fixed;
  top: var(--nav-h, 56px);
  left: 0;
  right: 0;
  z-index: 49;
  max-height: calc(100vh - var(--nav-h, 56px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* While the menu is open the page scroll is locked on <html>, which breaks
   `position: sticky` on the header — pin it explicitly and pad the body so
   the content underneath doesn't jump. */
.menu-open .nav-bar.is-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.menu-open body { padding-top: var(--nav-h, 56px); }
.mobile-menu a {
  font-size: 14px;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu a.btn {
  margin-top: 12px;
  align-self: flex-start;
  padding: 12px 22px;
  border-bottom: none;
  color: #FFFFFF;
}
.mobile-menu a.btn:hover { color: #FFFFFF; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 32px 96px;
  text-align: center;
}
/* Blue → purple glows anchored to the top corners, fading along both edges.
   The blur lives on the wrapper while the clip-path lives on the child pseudo,
   so the blur is applied AFTER the clip and softens the polygon's inner edge
   (on a single element, clip-path runs after filter and leaves a hard line). */
.hero-glow {
  position: absolute;
  top: 0;
  width: 460px;
  height: 460px;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  animation: hero-glow 7s ease-in-out infinite;
}
.hero-glow::before {
  content: '';
  position: absolute;
  inset: 0;
}
.hero-glow-l { left: 0; transform-origin: top left; }
.hero-glow-l::before {
  background: linear-gradient(135deg,
    rgba(10, 132, 255, 0.42) 0%,
    rgba(91, 33, 182, 0.30) 32%,
    transparent 62%);
  clip-path: polygon(0 0, 100% 0, 30% 30%, 0 100%);
}
.hero-glow-r { right: 0; transform-origin: top right; animation-delay: -3.5s; }
.hero-glow-r::before {
  background: linear-gradient(225deg,
    rgba(10, 132, 255, 0.42) 0%,
    rgba(91, 33, 182, 0.30) 32%,
    transparent 62%);
  clip-path: polygon(100% 0, 0 0, 70% 30%, 100% 100%);
}
@keyframes hero-glow {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* White grid overlay — sits ABOVE the blue blurs, BELOW the content */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 32px 32px;
  /* Vertical lines pass exactly through the horizontal center (the +16px
     cancels the half-tile offset that `center` introduces); horizontal lines
     start at the top edge. This makes a grid line sit at 50% ± n·32 and at
     y = n·32, so the cells below (offset by multiples of 32) fill whole squares. */
  background-position: calc(50% + 16px) top;
}
.grid-cell {
  position: absolute;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.4);
}
.grid-cell-1  { left: calc(50% - 480px);  top: 32px; }
.grid-cell-2  { left: calc(50% - 384px);  top: 128px; }
.grid-cell-3  { left: calc(50% - 256px);  top: 256px; }
.grid-cell-4  { left: calc(50% + 256px);  top: 64px; }
.grid-cell-5  { left: calc(50% + 384px);  top: 192px; }
.grid-cell-6  { left: calc(50% + 480px);  top: 320px; }
/* Outer cells — revealed as the viewport grows wider (clipped on narrow screens). */
.grid-cell-7  { left: calc(50% - 608px);  top: 224px; }
.grid-cell-8  { left: calc(50% - 736px);  top: 96px; }
.grid-cell-9  { left: calc(50% - 864px);  top: 288px; }
.grid-cell-10 { left: calc(50% - 992px);  top: 160px; }
.grid-cell-11 { left: calc(50% - 1120px); top: 64px; }
.grid-cell-12 { left: calc(50% - 1248px); top: 256px; }
.grid-cell-13 { left: calc(50% + 608px);  top: 288px; }
.grid-cell-14 { left: calc(50% + 736px);  top: 128px; }
.grid-cell-15 { left: calc(50% + 864px);  top: 64px; }
.grid-cell-16 { left: calc(50% + 992px);  top: 224px; }
.grid-cell-17 { left: calc(50% + 1120px); top: 320px; }
.grid-cell-18 { left: calc(50% + 1248px); top: 96px; }

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.hero-pill {
  display: inline-block;
  padding: 7px 14px;
  background: var(--frame-bg);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.hero h1 {
  margin: 0 auto;
  max-width: none;
}
.hero-sub {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto;
}
.hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

/* ---------- Section primitives ---------- */
section { padding: 80px 32px 156px; }

/* Tighter run from How it works → Results: these sections read as one
   continuous product story, so collapse the gaps to the "tight" tokens
   (56px below + 40px above = 96px gap, vs the default 236px). */
.how { padding-bottom: 56px; }
.who-best-for { padding-top: 40px; padding-bottom: 56px; }
.dashboard { padding-top: 40px; padding-bottom: 56px; }
.results { padding-top: 40px; }

.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 14px;
  letter-spacing: 0;
}

.process-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 48px;
}
.process-header .process-title { max-width: 22ch; font-size: clamp(26px, 2.8vw, 36px); }
.process-header .process-sub {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
  max-width: 40ch;
}

/* Centered header variant: title + sub stacked, both centered */
.process-header.centered {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding-bottom: 56px;
}
.process-header.centered .process-title {
  max-width: 22ch;
  margin: 0 auto;
}
.process-header.centered .process-sub {
  max-width: 48ch;
  margin: 0 auto;
}

/* ---------- Logo ticker (Trusted by) ---------- */
.logos-wrap {
  padding: 24px 0 40px;
  text-align: center;
}
.logos-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-2);
  margin-bottom: 24px;
}
.logos-viewport {
  --mask-edge: 80px;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--mask-edge),
    #000 calc(100% - var(--mask-edge)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--mask-edge),
    #000 calc(100% - var(--mask-edge)),
    transparent
  );
}
.logos-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logos-ticker 100s linear infinite;
}
.logos-track--b {
  animation-direction: reverse;
  animation-duration: 100s;
}
.logos-viewport + .logos-viewport { margin-top: 12px; }
.logos-viewport:hover .logos-track {
  animation-play-state: paused;
}
.logo-cell {
  flex: 0 0 auto;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
}
/* Client logos: faint by default, full strength on hover */
.logo-img {
  display: block;
  height: 44px;
  width: 44px;
  border-radius: 11px;
  opacity: 0.72;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .logo-cell:hover .logo-img { opacity: 1; transform: translateY(-2px); }
}

@keyframes logos-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
}

/* ---------- Service sections (SpecGen / LeadGen) ---------- */
.service { padding: 80px 32px 156px; }
/* Tighter rhythm when two .service sections sit next to each other */
.service.tight-below { padding-bottom: 56px; }
.service.tight-above { padding-top: 40px; }
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.service-row.reverse .service-visual { order: -1; }

.service-text .section-eyebrow { margin-bottom: 14px; }
.service-text h2 { margin-bottom: 16px; max-width: 24ch; font-size: clamp(26px, 2.8vw, 36px); }
.service-text p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
  max-width: 48ch;
  margin-bottom: 24px;
}
.service-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}
.service-list li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--accent);
}

/* Service visual — holds the SpecGen / LeadGen illustrations (4:3) */
.service-visual {
  background: var(--mockup-pad);
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.service-visual > img,
.service-visual > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Floating-card composition variant — no gray mockup pad; the illustration
   floats on white like the How-it-works / SDR-Placement cards. Height comes
   from the composition box itself, not the 4:3 frame. */
.service-visual.composition {
  background: none;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  /* fill the grid row so the halo runs the full height of the text block
     beside it (the row is centered, so the cards stay vertically centered) */
  align-self: stretch;
}
/* Faint blurred-gradient halo behind the floating cards — the same Figma mesh
   as the Best-Fit card, at 10% so it only shimmers through */
.service-visual.composition::before {
  content: '';
  position: absolute;
  inset: 0 -8px;
  z-index: -1;
  border-radius: 20px;
  background: url('assets/best-fit-gradient.svg') center / cover no-repeat;
  opacity: 0.1;
}

/* ---------- Who We're Best For ---------- */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.fit-card {
  border-radius: 16px;
  padding: 32px 36px;
  border: 1px solid;
}
/* White inner fill + gray inner stroke + dropshadow + wider gray outer ring
   — matches the double-layer treatment of the Results section icons */
.fit-card-best {
  /* Figma gradient fill (blurred lavender mesh) on a slowly drifting layer,
     no strokes — white text on top */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: none;
  border-color: transparent;
  box-shadow: none;
}
.fit-card-best::before {
  content: '';
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: url('assets/best-fit-gradient.svg') center / cover no-repeat;
  /* deepen the blues/violets a touch — the raw mesh has white/near-white
     patches that wash out the white text on top */
  filter: saturate(1.45) brightness(0.9);
  will-change: transform;
  animation: fit-glow-drift 16s ease-in-out infinite;
}
@keyframes fit-glow-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}
.fit-card-not {
  background: #F5F6F8;
  border-color: transparent;
}
.fit-card-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fit-card-best .fit-card-title { color: #FFFFFF; }
.fit-card-not  .fit-card-title { color: var(--muted); }

.fit-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fit-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.fit-list svg {
  flex-shrink: 0;
  margin-top: 3px;
}
.fit-card-best .fit-list svg { color: #FFFFFF; }
.fit-card-best .fit-list li { color: #FFFFFF; }
.fit-card-not  .fit-list svg { color: var(--muted-2); }
.fit-card-not  .fit-list li  { color: var(--muted); }

/* ---------- Dashboard section ---------- */
.dashboard .process-header .process-title { max-width: 18ch; }

/* Showcase panel: rounded, inset from the section edges. The rounded, clipped
   panel masks the moving gradient blurs, frosted slats and white fill behind
   the heading + mockup. */
.dashboard-showcase {
  position: relative;
  /* Full-bleed: the panel spans the window width with ~48px padding on each
     side, regardless of the 1200px frame. */
  margin-left: calc(50% - 50vw + 48px);
  margin-right: calc(50% - 50vw + 48px);
  border-radius: 24px;
  overflow: hidden;
  background-color: #ffffff;
  padding: 56px 56px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dashboard-showcase .process-header { padding-bottom: 48px; }
/* Glow layers fill the rounded panel (not full-bleed) and keep the dashboard's
   own pastel palette; the mesh drifts continuously. Scoped under
   .dashboard-showcase so these win over the base .glow-bg / .glow-fill. */
.dashboard-showcase .glow-bg--panel,
.dashboard-showcase .glow-fill--panel {
  left: auto;
  right: auto;
  transform: none;
  width: auto;
  inset: 0;
}
.dashboard-showcase .glow-bg--panel::before {
  /* Blue + purple pastel mesh (original palette: purple, pink, light blue). */
  background:
    radial-gradient(50% 58% at 14% 102%, rgba(151, 124, 226, 0.34) 0%, rgba(151, 124, 226, 0) 68%),
    radial-gradient(44% 52% at 33% 106%, rgba(240, 138, 180, 0.30) 0%, rgba(240, 138, 180, 0) 68%),
    radial-gradient(58% 66% at 86% 96%, rgba(120, 184, 246, 0.32) 0%, rgba(120, 184, 246, 0) 70%),
    linear-gradient(0deg, #ffffff, #ffffff);
}
/* content sits above the glow layers */
.dashboard-showcase > .process-header,
.dashboard-showcase > .mockup-stage {
  position: relative;
  z-index: 2;
}
.mockup-stage {
  width: 100%;
  max-width: 1080px;
  background: rgba(255, 255, 255, 0.4);   /* wide outer stroke: white at 40% */
  border-radius: 14px;                    /* fully rounded — sits inset with a gap below */
  padding: 6px;
}
.mockup-frame {
  background: #FFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 2848 / 1500;   /* matches dashboard-screen-v2, so nothing is cropped */
  box-shadow:
    0 1px 2px rgba(13,13,23,.04),
    0 8px 24px -10px rgba(13,13,23,.10);
}
.mockup-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- How it works ---------- */
.how { padding-top: 140px; }

/* ---------- Process grid (How it works / Dashboard features) ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 -32px;
}
.process-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.process-card {
  display: flex;
  flex-direction: column;
  padding: 56px 32px;
}

/* Image-led card variant (How it works steps) */
.process-card.has-image {
  padding: 24px 8px 40px;
  text-align: center;
  align-items: center;
}
.process-card.has-image .process-card-title {
  margin-bottom: 2px;
}
.process-card.has-image .process-card-desc {
  max-width: 28ch;
}
.card-image {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 790 / 468;
  margin-bottom: 28px;
  /* no overflow clipping: the illustrations float on white (no gray frame
     anymore), and clipping cut cards + shadows at narrower viewports; the
     campaign card's overhang is already faded out by its own mask */
  position: relative;
}
/* Illustrations are lifted out of the layout flow so tall compositions can
   never stretch the frame — every card's number/title row starts at the
   same height. */
.card-image > div {
  position: absolute;
  inset: 0;
}
.card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* (Multichannel Outreach illustration now uses Tailwind utilities directly in
   the markup — compiled into tailwind.css via ./build-css.sh) */

/* (Campaign Setup illustration now uses Tailwind utilities directly in the
   markup — compiled into tailwind.css via ./build-css.sh) */

/* Discovery Call — meeting invitation + agenda overlay */
/* (Discovery Call illustration now uses Tailwind utilities directly in the
   markup — compiled into tailwind.css via ./build-css.sh) */

/* Icon-led card variant (SDR Process steps) */
.process-card.has-icon {
  padding: 32px 16px 40px;
  text-align: center;
  align-items: center;
}
.process-card.has-icon .process-card-title { margin-bottom: 6px; }
.process-card.has-icon .process-card-desc { max-width: 32ch; }
/* Icon styled to match the Results section: a light-gray frame around a
   white, bordered card with a dark stroke icon. */
.card-icon-wrap {
  padding: 4px;
  border-radius: 14px;
  background: #F0F1F3;
  display: inline-flex;
  margin-bottom: 22px;
}
.card-icon {
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  border: 1px solid #D9DCE0;
  border-radius: 9px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.card-icon svg { width: 24px; height: 24px; }

/* ---------- Decorator feature cards (blueprint-grid icon) ---------- */
@property --deco-line {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(28, 29, 31, 0.10);
}
.deco-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 24px auto 0;
}
.deco-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 28px 24px 32px;
  text-align: center;
}
.deco-card-header { padding-bottom: 12px; }
/* 144px square with a radially-masked blueprint grid + a bordered icon cell */
.deco-decorator {
  position: relative;
  width: 144px;
  height: 144px;
  margin: 0 auto;
  isolation: isolate;   /* scope the grid / sweep / icon z-order */
  --deco-line: rgba(28, 29, 31, 0.10);
  transition: --deco-line 0.2s ease;
}
.deco-card:hover .deco-decorator { --deco-line: rgba(28, 29, 31, 0.20); }
/* static blueprint grid */
.deco-decorator::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--deco-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--deco-line) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(farthest-corner at center, #000 40%, transparent 60%);
  mask-image: radial-gradient(farthest-corner at center, #000 40%, transparent 60%);
}
/* a soft blue gradient that sweeps diagonally across the grid, then rests; the
   three cards are staggered so the sweep steps across them at regular intervals */
.deco-decorator::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(10, 132, 255, 0) 43%, rgba(10, 132, 255, 0.4) 50%, rgba(10, 132, 255, 0) 57%);
  background-size: 300% 300%;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(farthest-corner at center, #000 40%, transparent 60%);
  mask-image: radial-gradient(farthest-corner at center, #000 40%, transparent 60%);
  animation: deco-sweep 4.5s ease-in-out infinite;
}
.deco-card:nth-child(2) .deco-decorator::after { animation-delay: -1.5s; }
.deco-card:nth-child(3) .deco-decorator::after { animation-delay: -3s; }
@keyframes deco-sweep {
  0%   { background-position: 200% 200%; }
  45%  { background-position: -100% -100%; }
  100% { background-position: -100% -100%; }
}
@media (prefers-reduced-motion: reduce) {
  .deco-decorator::after { animation: none; opacity: 0; }
}
.deco-icon {
  position: absolute;
  inset: 0;
  z-index: 2;   /* above the grid and the sweep */
  margin: auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  color: var(--text);
}
.deco-icon svg { width: 24px; height: 24px; }
/* Match the old SDR cards: title = .process-card-title, body = .process-card-desc */
.deco-card h3 {
  margin-top: 24px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.deco-card p {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- SDR Process: light-gray full-bleed section ---------- */
/* SDR Placement — testimonial-style background (adapted from the adfects
   reviews band, recolored to the site's blue/purple hero-blur palette):
   gradient blurs + frosted slats + seam lines, a white overlay over them,
   and full-bleed hairline strokes top & bottom. */
/* ===== Reusable animated glow background — blue/purple gradient-blur mesh,
   frosted slats (vertical white lines), seam lines, white overlay. Shared by
   SDR Placement and the Why Dickens (compare) section: full-bleed band with
   hairline strokes top & bottom. ===== */
.sdr-process,
.compare {
  position: relative;
  isolation: isolate;
}
.sdr-process {
  /* Top: 140px section padding above the eyebrow.
     Bottom: 100px section padding + 40px card padding-bottom → 140px from last text. */
  padding: 140px 32px 100px;
}
/* full-bleed hairline strokes above and below the section */
.sdr-process::before,
.sdr-process::after,
.compare::before,
.compare::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--border);
  z-index: 3;
  pointer-events: none;
}
.sdr-process::before,
.compare::before { top: 0; }
.sdr-process::after,
.compare::after { bottom: 0; }

/* full-bleed gradient-blur mesh behind the section */
.glow-bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 100vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.glow-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: glowDrift 26s ease-in-out infinite;
  background:
    radial-gradient(24% 80% at 1% 36%, rgba(10, 132, 255, 0.28) 0%, rgba(10, 132, 255, 0) 70%),
    radial-gradient(20% 62% at 13% 26%, rgba(91, 33, 182, 0.30) 0%, rgba(91, 33, 182, 0) 72%),
    radial-gradient(22% 50% at 99% 16%, rgba(10, 132, 255, 0.25) 0%, rgba(10, 132, 255, 0) 70%),
    radial-gradient(26% 78% at 90% 104%, rgba(91, 33, 182, 0.32) 0%, rgba(91, 33, 182, 0) 72%),
    radial-gradient(24% 66% at 100% 92%, rgba(10, 132, 255, 0.23) 0%, rgba(10, 132, 255, 0) 72%),
    radial-gradient(30% 46% at 72% 100%, rgba(91, 33, 182, 0.28) 0%, rgba(91, 33, 182, 0) 70%),
    linear-gradient(0deg, #f6f8fc, #f6f8fc);
}
@keyframes glowDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.16); }
  100% { transform: translate3d(0, 0, 0) scale(1.08); }
}
/* broad frosted white slats over the colors (vertical white lines) */
.glow-slats {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0.34) 58px, rgba(255,255,255,0) 116px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0.22) 101px, rgba(255,255,255,0) 202px);
  filter: blur(7px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,1) 100%);
}
/* fine sharp seam lines between the slats */
.glow-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 77px, rgba(255,255,255,0.45) 78px, rgba(255,255,255,0) 79px);
}
/* white overlay over the whole mesh */
.glow-fill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 100vw;
  z-index: 1;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
/* content sits above the background layers */
.sdr-process > .process-header,
.sdr-process > .process-grid,
.sdr-process > .deco-cards,
.compare > .process-header,
.compare > .compare-scroll {
  position: relative;
  z-index: 2;
}

/* ---------- Features split (Dashboard benefits as tabbed ticker) ---------- */
.features-section { padding: 40px 32px 56px; }
.features-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 72px;
  align-items: start;
}
.features-left {
  display: flex;
  flex-direction: column;
}
.features-title {
  font-size: clamp(26px, 2.8vw, 36px);   /* same size as all other section titles */
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-top: 12px;
}
.features-sub {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
  margin-top: 16px;
}

.features-progress {
  display: flex;
  gap: 6px;
  margin: 28px 0 16px;
}
.progress-dot {
  position: relative;
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.progress-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}
.progress-dot.is-active::after {
  animation: dot-fill 4s linear forwards;
  animation-play-state: paused;
}
.features-section.ticker-running .progress-dot.is-active::after {
  animation-play-state: running;
}
@keyframes dot-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.features-tabs {
  display: flex;
  flex-direction: column;
}
.feature-tab {
  position: relative;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  transition: color 0.2s ease;
}
.feature-tab:hover { color: var(--text); }
.feature-tab-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  color: inherit;
  transition: color 0.2s ease;
}
.feature-tab.is-active { color: var(--text); }
.feature-tab.is-active .feature-tab-title { color: var(--text); }
/* Fixed reserved height (not max-height) so every tab's description occupies
   the same vertical space — the section height stays constant when toggling,
   and the collapse/expand of two tabs cancels out during a switch (no jump). */
.feature-tab-desc {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.3s var(--ease-in-out), opacity 0.25s ease, padding 0.3s var(--ease-in-out);
}
.feature-tab.is-active .feature-tab-desc {
  height: 48px;
  opacity: 1;
  padding-top: 6px;
}
.feature-tab-desc p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  max-width: 40ch;
}

/* Image stack (right side) — pushed down independently of left column height */
.features-right {
  min-width: 0;
  margin-top: 140px;
}
.features-image-stack {
  display: grid;
  background: transparent;
  /* The colored frame + its rounded corners are drawn inside each SVG
     (resolution-independent, concentric with the inner panel), so the
     container itself stays square and lets the SVG corners show through. */
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 502 / 378;
}
.feature-image {
  grid-area: 1 / 1;
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* invisible stacked images must not swallow hover on the active one */
  pointer-events: none;
}
.feature-image.is-active { opacity: 1; pointer-events: auto; }
.feature-image svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }

/* Campaign Performance illustration — entrance reveal + chart hover.
   `cp-prep` is added by JS on load (so without JS everything stays visible),
   `cp-in` when the stack scrolls into view. The marker/tooltip layers animate
   opacity only: their transform stays free for the hover interaction. */
svg.cp-prep .cp-anim,
svg.cp-prep .cp-fade { opacity: 0; }
svg.cp-prep .cp-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
svg.cp-in .cp-anim { animation: cp-rise 0.55s var(--ease-out) forwards; }
svg.cp-in .cp-fade { animation: cp-fadein 0.45s var(--ease-out) forwards; }
svg.cp-in .cp-line { animation: cp-draw 0.7s cubic-bezier(0.33, 0, 0.2, 1) 0.45s forwards; }
svg.cp-in .cp-d1 { animation-delay: 0.08s; }
svg.cp-in .cp-d2 { animation-delay: 0.16s; }
svg.cp-in .cp-d3 { animation-delay: 0.22s; }
svg.cp-in .cp-d4 { animation-delay: 0.28s; }
svg.cp-in .cp-d5 { animation-delay: 0.36s; }
svg.cp-in .cp-d6 { animation-delay: 0.55s; }
svg.cp-in .cp-d7 { animation-delay: 1.05s; }
svg.cp-in .cp-d8 { animation-delay: 0.6s; }
svg.cp-in .cp-d9 { animation-delay: 0.68s; }
svg.cp-in .cp-d10 { animation-delay: 0.78s; }
svg.cp-in .cp-d11 { animation-delay: 0.46s; }
@keyframes cp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cp-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cp-draw { to { stroke-dashoffset: 0; } }
#cp-marker, #cp-tip { transition: transform 0.15s var(--ease-out); }
#cp-marker-dot { transition: cy 0.15s var(--ease-out); }
#cp-hit { cursor: crosshair; }

/* Channel Attribution illustration: donut segments sweep in, rows get the
   Linear hover fill. The arcs are hidden via zero dash (not opacity), so the
   final dash values live in the keyframes. */
svg.cp-prep .cp-arc-a,
svg.cp-prep .cp-arc-b { stroke-dasharray: 0 100; }
svg.cp-in .cp-arc-a { animation: cp-arc-a 0.6s cubic-bezier(0.33, 0, 0.2, 1) 0.3s forwards; }
svg.cp-in .cp-arc-b { animation: cp-arc-b 0.6s cubic-bezier(0.33, 0, 0.2, 1) 0.5s forwards; }
@keyframes cp-arc-a { to { stroke-dasharray: 56 44; } }
@keyframes cp-arc-b { to { stroke-dasharray: 40 60; } }
.ca-arc { transition: stroke-width 0.15s ease; cursor: pointer; }
.ca-arc:hover { stroke-width: 19; }
.ca-row .ca-row-bg { fill: transparent; transition: fill 0.12s ease; }
.ca-row:hover .ca-row-bg { fill: #F7F7F8; }

/* Meeting Pipeline illustration: draggable board cards (script.js manages the
   transforms, so no CSS transform on hover — it would be overridden anyway). */
.mp-card { cursor: grab; touch-action: none; transform-box: fill-box; transform-origin: center; }
.mp-card .mp-card-border { transition: stroke 0.12s ease; }
.mp-card:hover .mp-card-border { stroke: #DCDBDD; }
.mp-card.mp-dragging { cursor: grabbing; }
.mp-card.mp-dragging > g[filter] { filter: url(#mp-lift); }
#mp-indicator { transition: opacity 0.1s ease, transform 0.12s ease; pointer-events: none; }

/* ---------- Testimonials (chrome-less carousel, arrows flanking) ---------- */
.testimonials { padding-top: 140px; display: none; /* temporarily hidden */ }
.testimonials-carousel {
  max-width: 880px;
  margin: 0 auto;
}
.testimonials-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.testimonials-stack {
  display: grid;
  min-width: 0;
}
.testimonial {
  grid-area: 1 / 1;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.testimonial.is-active {
  opacity: 1;
  visibility: visible;
}
.testimonial-quote {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 56ch;
}
.testimonial-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mockup-pad);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.testimonial-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}
.testimonial-role {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

/* Arrow buttons — minimal, filled-triangle icon only */
.carousel-btn {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  padding: 0;
  color: var(--muted-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.carousel-btn:hover {
  color: var(--text);
  transform: scale(1.1);
}
.carousel-btn svg { display: block; }

.process-card-num {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 16px;
}

.process-card-icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  margin-bottom: 14px;
}

.process-card-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.process-card-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Results ---------- */
.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
}
.result-card {
  padding: 20px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Outer layer: light gray fill, no stroke. Inner: white box with thin border + shadow */
.result-icon-wrap {
  flex-shrink: 0;
  padding: 4px;
  border: none;
  border-radius: 14px;
  background: #F0F1F3;
  position: relative;
  transition: background 0.25s ease;
  overflow: visible;
}
.result-icon {
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid #D9DCE0;
  border-radius: 9px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.result-icon svg { width: 20px; height: 20px; }

/* Results icons on hover: the gray frame gives way to a soft blurred
   purple->blue gradient glow around the white layer, and a shine band loops
   across the icon while hovered (reference: tailark glow + loading shimmer). */
.result-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  /* Fully transparent at the edges so the halo fades out on its own — no
     filter layer that mobile browsers can clip into a hard square. */
  background: radial-gradient(closest-side, rgba(192, 132, 252, 0.85) 0%, rgba(139, 122, 250, 0.45) 45%, rgba(59, 130, 246, 0.18) 70%, rgba(59, 130, 246, 0) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: -1;
}
.result-icon::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-15deg);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .result-card:hover .result-icon-wrap { background: transparent; }
  .result-card:hover .result-icon-wrap::before { opacity: 0.55; }
  .result-card:hover .result-icon::after { animation: icon-shine 1.4s ease-in-out infinite; }
}

/* Mobile: tap the card to toggle the same icon glow + shine effect. */
@media (hover: none), (pointer: coarse) {
  .result-card.is-hovered .result-icon-wrap,
  .result-card:active .result-icon-wrap { background: transparent; }
  .result-card.is-hovered .result-icon-wrap::before,
  .result-card:active .result-icon-wrap::before { opacity: 0.55; }
  .result-card.is-hovered .result-icon::after,
  .result-card:active .result-icon::after { animation: icon-shine 1.4s ease-in-out infinite; }
}

@keyframes icon-shine {
  0%        { transform: translateX(-140%) skewX(-15deg); }
  60%, 100% { transform: translateX(330%) skewX(-15deg); }
}

.result-body { flex: 1; min-width: 0; }
.result-value {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;   /* keep each result title on a single line */
}
.result-label {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- Comparison (glow background, highlighted "ours" column) ---------- */
.compare {
  padding: 120px 32px 120px;
}
.compare-aside {
  margin: 0;
  font-style: italic;
  font-size: 14px;
  color: var(--muted-2);
}
.compare-scroll {
  overflow: visible;
}
.compare-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(max-content, 1.2fr) minmax(200px, 1.7fr) repeat(4, minmax(max-content, 0.9fr));
  grid-template-rows: repeat(9, auto);
  max-width: 1040px;
  margin: 0 auto;
}
.compare-row { display: contents; }

/* The elevated white card sits behind the "ours" (2nd) column and pops out
   slightly top and bottom. Absolutely positioned so it never disturbs the
   auto-placement of the cells. */
.compare-card {
  position: absolute;
  grid-column: 2 / 3;
  grid-row: 1 / -1;
  top: -16px;
  bottom: -16px;
  left: 12px;
  right: 12px;
  background: #FFFFFF;
  border: none;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  z-index: 0;
  pointer-events: none;
}

.compare-feature,
.compare-cell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 18px 16px;
  border-top: 1px solid rgba(228, 231, 236, 0.5);
}
.compare-feature {
  justify-content: flex-start;
  padding-left: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  white-space: nowrap;   /* keep each row label on a single line */
}
.compare-cell { justify-content: center; flex-direction: row; gap: 6px; padding-left: 8px; padding-right: 8px; }

/* Header row: no divider above, a little taller */
.compare-row-head .compare-feature,
.compare-row-head .compare-cell {
  border-top: none;
  padding-top: 26px;
  padding-bottom: 22px;
}
.compare-h {
  align-items: center;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;   /* keep each column label on a single line */
}
.compare-brand {
  flex-direction: row;        /* logo sits BESIDE the name, not above it */
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.compare-brand img { display: block; height: 24px; width: auto; }

/* Cell marks */
/* Cell text: alternatives muted/secondary, the Dickens column emphasized */
.cmp-txt {
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
  font-weight: 500;
  overflow-wrap: break-word;   /* only over-long single words break; multi-word values wrap at spaces */
  min-width: 0;
}
.compare-cell-ours .cmp-txt {
  color: var(--accent);
  font-weight: 600;
}
/* Status icon above the text */
.cmp-ico { width: 16px; height: 16px; flex-shrink: 0; }
.cmp-check { color: var(--accent); }
.cmp-check-muted { color: var(--muted-2); }
.cmp-x { color: var(--muted-2); opacity: 0.75; }
.cmp-dash {
  display: block;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--muted-2);
  opacity: 0.6;
  flex-shrink: 0;
}

/* ---------- FAQ ---------- */
.faq .process-header { padding-bottom: 32px; }
.faq-list {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
}
.faq-item { border-bottom: 1px solid var(--border); }
/* No rule above the first question, and no divider below the last —
   only the lines between questions remain */
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 0.15s ease;
}
.faq-question:hover { color: var(--accent); }
.faq-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--muted-2);
  transition: transform 0.2s ease, color 0.15s ease;
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
  color: var(--accent);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-in-out);
}
.faq-answer-inner {
  padding: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 56ch;
}

/* ---------- Final CTA ---------- */
.cta-section {
  padding: 24px 32px 156px;
  text-align: center;
  position: relative;
}
/* Hero-style decoration centered at the bottom of the CTA, emerging from
   behind the footer (cut off by it). Glow tints the area, the white grid and
   white cells are only visible where the glow sits. Full-bleed (100vw) and
   centered; .cta-bg clips its own bottom so the footer "cuts" the glow. */
.cta-bg {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 240px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  left: 50%;
  /* Most of the bloom sits below the footer line; only its tip peeks up. */
  bottom: -440px;
  transform: translateX(-50%);
  width: 1900px;     /* wide, shallow bloom */
  height: 600px;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(10, 132, 255, 0.32) 0%,
    rgba(91, 33, 182, 0.24) 46%,
    transparent 70%);
  filter: blur(44px);
}
.cta-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: calc(50% + 16px) bottom;
}
/* white cells, aligned to the grid (left ≡ 16 mod 32, bottom multiples of 32) */
.cta-cell-1 { left: calc(50% - 240px); bottom: 32px; }
.cta-cell-2 { left: calc(50% - 112px); bottom: 0px; }
.cta-cell-3 { left: calc(50% + 80px);  bottom: 64px; }
.cta-cell-4 { left: calc(50% + 208px); bottom: 0px; }
.cta-cell-5 { left: calc(50% - 368px); bottom: 32px; }
.cta-cell-6 { left: calc(50% + 336px); bottom: 64px; }
.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cta-title {
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 22ch;
}
.cta-sub {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  max-width: 40ch;
}
.cta-section .btn { margin-top: 8px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 56px;
  font-size: 13px;
  color: var(--muted);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 112px;
  border-bottom: 1px solid var(--border);
}
.footer-brand p {
  margin-top: 10px;
  color: var(--muted);
  max-width: 36ch;
}
.footer-col h5 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--text); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 12px;
  color: var(--muted-2);
  gap: 16px;
  flex-wrap: wrap;
}
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-social a:hover {
  color: var(--text);
  border-color: var(--text);
}

/* ---------- Legal pages (privacy / terms) ---------- */
.legal-section {
  padding: 80px 32px 156px;
}
.legal-section .legal-head {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.legal-section .legal-head h1 {
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin-bottom: 10px;
  max-width: none;
}
.legal-section .legal-head p { color: var(--muted); font-size: 14px; }
.legal-section .legal-content { max-width: 720px; }
.legal-section .legal-content h2 {
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 40px 0 12px;
  max-width: none;
}
.legal-section .legal-content h2:first-child { margin-top: 0; }
.legal-section .legal-content p,
.legal-section .legal-content li {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 12px;
}
.legal-section .legal-content ul {
  padding-left: 20px;
  list-style: disc;
}
.legal-section .legal-content ul li::marker { color: var(--muted-2); }
.legal-section .legal-content strong { color: var(--text); font-weight: 500; }
.legal-section .legal-content a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.legal-section .legal-content a:hover { border-bottom-color: var(--accent); }

/* ---------- Per-word title animation ---------- */
.anim-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out),
    filter 0.45s var(--ease-out);
}
.anim-words-host.in .anim-word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---------- Focus state ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .anim-word { opacity: 1; transform: none; filter: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Section text scale-up
   A uniform, modest bump to the readable content in every section — eyebrows,
   titles, subtitles, descriptions, and list/card text — for a slightly larger,
   more comfortable read. UI chrome (nav, buttons, footer, table cells) stays at
   its original size. Grouped here so the scale is easy to tune or revert.
   ========================================================================== */

/* Eyebrows / small section labels: 13 → 14 */
.section-eyebrow,
.hero-pill,
.logos-eyebrow,
.process-card-num { font-size: 14px; }

/* Section titles: clamp(26, 2.8vw, 36) → clamp(28, 3vw, 40) */
.process-header .process-title,
.features-title,
.cta-title { font-size: clamp(28px, 3vw, 40px); }

/* SpecGen / LeadGen headlines run larger than the other section titles, with the
   brand label ("SpecGen:" / "LeadGen:") inline in accent at the start of the title. */
.service-text h2 { font-size: clamp(32px, 3.8vw, 46px); }
.service-label { color: var(--accent); }

/* Hero supporting copy */
.hero-sub { font-size: 16px; }              /* 15 → 16 */

/* Subtitles / lead paragraphs: 16 → 17 */
.process-header .process-sub,
.service-text p,
.features-sub,
.cta-sub { font-size: 17px; }

/* Descriptions, list items, card body: 14 → 15 */
.service-list li,
.fit-list li,
.feature-tab-desc p,
.process-card-desc,
.compare-aside,
.faq-answer-inner { font-size: 15px; }

/* Card & feature headings */
.fit-card-title { font-size: 19px; }        /* 18 → 19 */
.feature-tab-title { font-size: 18px; }     /* 17 → 18 */
.process-card-title { font-size: 17px; }    /* 16 → 17 */
.faq-question { font-size: 16px; }          /* 15 → 16 */

/* Testimonials */
.testimonial-quote { font-size: 20px; }     /* 19 → 20 */
.testimonial-name { font-size: 15px; }      /* 14 → 15 */

/* Results */
.result-value { font-size: 16px; }          /* 15 → 16 */
.result-label { font-size: 14px; }          /* 13 → 14 */

/* ==========================================================================
   Comparison — intermediate widths (≤ 960px)
   The desktop table keeps every row on a single line via max-content columns,
   which needs ~850px of content. Narrower than that, the section (which has
   horizontal scroll disabled) would clip its rightmost column. Below 960px we
   therefore switch to flexible, shrinkable columns and let the labels wrap so
   the full table is always visible. Single-line rows remain a desktop-only
   treatment. Placed before the 768px block so those rules still win on mobile.
   ========================================================================== */
@media (max-width: 960px) {
  .compare-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  }
  .compare-feature { white-space: normal; }
  .compare-h { white-space: normal; }
  .compare-brand { white-space: normal; }
}

/* ==========================================================================
   Mobile (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .frame { margin: 0 16px; }

  /* Nav */
  .top-nav { padding: 12px 20px; }
  .nav-links, .nav-cta { display: none; }
  .nav-menu-btn { display: flex; }
  .mobile-menu { padding: 12px 20px 20px; }

  /* Hero */
  .hero { padding: 56px 20px 40px; }
  .hero-inner { gap: 16px; }
  .hero-glow {
    width: 240px;
    height: 240px;
    filter: blur(56px);
  }

  /* Section padding */
  section { padding: 64px 20px 24px; }
  .service { padding: 64px 20px 24px; }
  /* LeadGen ends with its illustration on mobile — breathe before the
     full-bleed SDR-Placement band that follows */
  .service.tight-above { padding-bottom: 64px; }
  /* Single column: no text block beside the illustration, so the halo keeps
     a fixed breathing margin around the composition instead of stretching */
  .service-visual.composition::before { inset: -20px -8px; }

  /* Comparison — tighter so the full table fits without horizontal scroll.
     On mobile the labels are allowed to wrap and the logo stacks above the
     name again; one-line rows are a desktop-only treatment. */
  .compare { padding: 64px 10px 64px; }
  .compare-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
  /* Comparison on mobile: transposed — every feature row becomes its own
     white card (headline on top, then each provider with its verdict stacked
     below), lined up in a horizontal scroller. */
  .compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 4px 20px 16px;
    scrollbar-width: thin;
  }
  .compare-grid {
    display: flex;
    gap: 0;
    min-width: max-content;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .compare-card,
  .compare-row.compare-row-head { display: none; }
  .compare-row {
    display: flex;
    flex-direction: column;
    width: 256px;
    flex: none;
    position: relative;
    padding: 18px 16px 6px;
  }
  /* Vertical divider between columns: inset from top and bottom, mirroring
     how the horizontal cell dividers stay clear of the left/right edges. */
  .compare-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: rgba(228, 231, 236, 0.6);
  }
  /* no divider before the first visible column */
  .compare-row-head + .compare-row::before { display: none; }
  .compare-feature {
    padding: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    white-space: normal;
    border-top: none;   /* desktop grid draws a line above each row label — not here */
  }
  .compare-cell {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 5px;
    column-gap: 6px;
    padding: 11px 0 12px;
    border-top: 1px solid rgba(228, 231, 236, 0.6);
  }
  /* provider label (logo for Dickens) above each verdict */
  .compare-cell::before {
    flex-basis: 100%;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
  }
  .compare-row .compare-cell:nth-child(2)::before {
    content: '';
    height: 18px;
    background: url('assets/logo.svg') no-repeat left center / contain;
  }
  .compare-row .compare-cell:nth-child(3)::before { content: 'In-house SDR'; }
  .compare-row .compare-cell:nth-child(4)::before { content: 'Lead-gen agency'; }
  .compare-row .compare-cell:nth-child(5)::before { content: 'DIY tools'; }
  .compare-row .compare-cell:nth-child(6)::before { content: 'Freelancer'; }
  .cmp-txt { font-size: 13px; }

  /* Logo ticker — tighter on mobile */
  .logos-wrap { padding: 16px 0 32px; }
  .logos-viewport { --mask-edge: 32px; }
  .logo-cell { padding: 0 10px; }
  .logo-img { height: 36px; width: 36px; border-radius: 9px; }

  /* Process header stacks */
  .process-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 32px;
  }
  .process-header.centered {
    align-items: center;
    text-align: center;
    padding-bottom: 40px;
  }

  /* Grids collapse */
  .service-row { grid-template-columns: 1fr; gap: 32px; }
  .service-row.reverse .service-visual { order: 0; }

  .process-grid,
  .process-grid.cols-4 {
    grid-template-columns: 1fr;
    margin: 0;
    gap: 16px;
  }
  .process-card {
    padding: 32px 20px;
  }
  .process-card.has-image {
    /* 8px sides like desktop, so the 284px illustration box fits: 375 viewport
       − 32 frame − 40 section padding − 16 card padding = 287 available */
    padding: 20px 8px 32px;
  }
  /* Mobile: pin the illustration box to its exact desktop size (284px wide at
     the 1280px reference) and center it — the compositions inside anchor to
     the box edges (left-0 / right-0), so a wider box would spread them apart.
     Tighter gap to the number/title below. */
  .process-card.has-image .card-image {
    width: 100%;
    max-width: 284px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 14px;
  }
  .process-card.has-icon {
    padding: 24px 16px 32px;
  }
  .card-icon-wrap { margin-bottom: 16px; }
  .card-icon { width: 40px; height: 40px; }
  .card-icon svg { width: 20px; height: 20px; }
  .deco-cards { grid-template-columns: 1fr; max-width: 360px; margin: 16px auto 0; }
  /* Grid items default to min-width:auto — the wide illustrations (tilted
     calling panel, chip row) forced the cards past the container so they hung
     off-center to the right. Let them shrink; the flex illustrations center
     their overflow symmetrically. */
  .deco-card { min-width: 0; }
  /* Mobile: section pad-top 80, card pad-bottom 32 → section pad-bottom 48 = 80 total */
  .sdr-process { padding: 80px 20px 48px; }

  /* Who We're Best For — single column */
  .fit-grid { grid-template-columns: 1fr; gap: 12px; }
  .fit-card { padding: 24px; }

  /* How it works — extra top space on mobile too */
  .how { padding-top: 80px; }

  .results-grid {
    grid-template-columns: 1fr;
    margin: 0;
    gap: 10px;
  }
  .result-card {
    padding: 16px;
    gap: 12px;
  }
  .result-icon { width: 36px; height: 36px; }
  .result-icon svg { width: 18px; height: 18px; }
  .result-value { font-size: 16px; white-space: normal; }

  /* Features split: stack text above image on mobile */
  .features-section { padding: 64px 20px 24px; }
  .features-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .features-right { margin-top: 0; }
  .features-title { font-size: 28px; }
  .features-progress { margin: 20px 0 8px; }
  .feature-tab { padding: 14px 0; }
  .feature-tab-title { font-size: 17px; }

  /* Testimonials carousel: tighter row */
  .testimonials { padding-top: 88px; }
  .testimonials-row { gap: 12px; }
  .testimonial { padding: 4px 8px; gap: 20px; }
  .testimonial-quote { font-size: 17px; }
  .carousel-btn { width: 24px; height: 24px; }
  .carousel-btn svg { width: 10px; height: 10px; }

  /* Mockup — keep the screenshot's native ratio on mobile too (no crop) */
  .dashboard-showcase {
    margin-left: calc(50% - 50vw + 16px);
    margin-right: calc(50% - 50vw + 16px);
    padding: 28px 14px 28px;
    border-radius: 16px;
  }
  .dashboard-showcase .process-header { padding-bottom: 28px; }
  .mockup-stage { padding: 4px; border-radius: 10px; }
  .mockup-frame { border-radius: 8px; }

  /* Service visual on mobile — keep the 4:3 illustration ratio */
  .service-visual { aspect-ratio: 4 / 3; }
  .service-visual-inner { padding: 16px; }

  /* CTA */
  .cta-section { padding: 64px 20px 64px; }

  /* Footer */
  .site-footer { padding: 40px 0 40px; }
  .footer-inner { padding: 0 20px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Legal */
  .legal-section { padding: 56px 20px 80px; }
}

/* ---------- Mobile scroll stability ----------
   On phones, compositing a blurred sticky nav on top of large infinitely
   animating gradient layers forces full-frame repaints while scrolling,
   which reads as flicker/jank. On coarse pointers we pause those ambient
   animations, drop the permanent will-change promotions, and keep the nav
   on its own stable layer. */
@media (hover: none), (pointer: coarse) {
  .nav-bar {
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translateZ(0);
  }

  .glow-bg::before,
  .fit-card-best::before {
    animation: none;
    will-change: auto;
  }

  /* Blur transitions are the most expensive part of the word reveal and
     the main source of visible tearing mid-scroll on mobile. */
  .anim-word {
    filter: none;
    transition:
      opacity 0.4s var(--ease-out),
      transform 0.4s var(--ease-out);
  }
  .anim-words-host.in .anim-word { filter: none; }
}