/* ==========================================================================
   Self-hosted fonts (latin subset) — no Google round-trip, no swap flash.
   Metrics-matched fallbacks below keep the swap from moving the layout.
   ========================================================================== */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/archivo-var.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/fonts/ibm-plex-sans-var.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'); size-adjust: 101%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Sans Fallback'; src: local('Arial'); size-adjust: 100%; ascent-override: 102%; descent-override: 27%; line-gap-override: 0%; }

/* ==========================================================================
   Lead Gen AI Systems — Design System
   Single source of truth for index.html + every /case-studies/* page.

   Token architecture (see ui-ux-pro-max "design-system" skill):
     Primitive  -> raw brand values, never referenced directly outside :root
     Semantic   -> purpose-named aliases components actually use
     Component  -> a few component-specific overrides, kept minimal on
                   purpose since this is a small static site, not an app
   ========================================================================== */

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

:root {
  /* ---- Primitive tokens ---- */
  --p-black-950: #141210;   /* warm near-black page */
  --p-black-900: #221F1B;   /* cards on the page */
  --p-black-band: #1D1A16;  /* alternate section band */
  --p-black-deep: #0C0B09;  /* contact + footer */
  --p-gold-500: #FFB700;
  --p-gold-600: #E0A100;
  --p-white-100: #F4EFE7;
  --p-gray-400: #A0978A;   /* 5.7:1 on the lightest surface (#221F1B), 6.5:1 on --bg */
  --p-gray-800: #322D27;
  --p-zinc-300: #CFC7BA;   /* 9.8:1 on the lightest surface */
  /* ---- Semantic tokens ---- */
  --bg: var(--p-black-950);
  --bg-surface: var(--p-black-900);
  --bg-band: var(--p-black-band);
  --bg-deep: var(--p-black-deep);
  --accent: var(--p-gold-500);
  --accent-strong: var(--p-gold-600);
  --on-accent: var(--p-black-950);
  --text: var(--p-white-100);
  --text-secondary: var(--p-zinc-300);
  --text-muted: var(--p-gray-400);
  --border: var(--p-gray-800);
  /* ---- Type scale ---- */
  --font-display: 'Archivo', 'Archivo Fallback', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'IBM Plex Sans Fallback', Arial, sans-serif;

  /* ---- Type scale: every font size on the site comes from here (see the Typography section at the end
     of this file and /style-guide/). Desktop values; tablet and phone values are set in the media queries
     below. 16px base on every screen, so every size is an even pixel number. ---- */
  --display: 4.5rem;       /* 72px  homepage hero headline */
  --h1: 3.5rem;            /* 56px  page title */
  --h2: 3rem;              /* 48px  section headline */
  --h3: 2rem;              /* 32px  heading inside a case study or legal page; big result numbers */
  --h4: 1.25rem;           /* 20px  card title */
  --h5: 1.125rem;          /* 18px  small heading */
  --h6: 1rem;              /* 16px  smallest heading (FAQ questions) */
  --text-large: 1.125rem;  /* 18px  intro lines, quotes */
  --text-regular: 1rem;    /* 16px  every paragraph */
  --text-small: 0.875rem;  /* 14px  card text, buttons, nav, footer */
  --text-tiny: 0.75rem;    /* 12px  tags and labels */
  --lh-heading: 1.05;      /* display, H1-H3 */
  --lh-title: 1.3;         /* H4-H6 */
  --lh-body: 1.6;          /* paragraphs, tags */

  /* ---- Section spacing (tablet and phone values in the media queries below) ---- */
  --section-y: 7rem;       /* 112px top and bottom padding of every section */
  --section-x: 2rem;       /* 32px side padding */
  --page-top: 9rem;        /* 144px first section, clears the fixed nav */
  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  /* ---- Radii ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  /* ---- Content widths (component tokens) ---- */
  --width-wide: 1100px;   /* homepage sections */
  --width-copy: 760px;    /* long-form case-study body */
}
/* Screen sizes used site-wide: phone <=640px, tablet 641-1023px, laptop 1024-1599px, big screen >=1600px.
   Big screens get a wider content area; text sizes stay on the type scale (16px base everywhere). */
/* Tablet and phone sizes for the type scale and section spacing */
@media (max-width: 1023px) { :root { --display: 3rem; --h1: 2.75rem; --h2: 2.5rem; --h3: 1.75rem; --section-y: 5.5rem; --page-top: 8rem; } }
@media (max-width: 640px) { :root { --display: 1.75rem; --h1: 2rem; --h2: 2rem; --h3: 1.5rem; --section-y: 4.5rem; --section-x: 1.25rem; } }
@media (min-width: 1600px) { :root { --width-wide: 1280px; --width-copy: 800px; } }
@media (min-width: 2200px) { :root { --width-wide: 1440px; --width-copy: 860px; } }

html { scroll-behavior: smooth; overflow-x: clip; }  /* nothing may widen the page on phones (the logo marquee did) */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

/* ==========================================================================
   Nav
   ========================================================================== */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-8);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s, box-shadow 0.3s;
}
nav.scrolled {
  background: var(--bg-deep);
  box-shadow: 0 1px 0 var(--border), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.nav-inner {
  max-width: var(--width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;  /* links centred in the space between logo and button (6 links did not fit page-centred at 1024px) */
  column-gap: var(--space-6);
  align-items: center;
}
.nav-logo {
  grid-column: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  justify-self: start;
  color: var(--text);
}
.nav-logo-icon { width: 22px; height: 22px; flex-shrink: 0; }
.nav-logo span { color: var(--accent); }
.nav-links {
  grid-column: 2;
  display: flex;
  gap: var(--space-6);  /* 24px: with "Free Tools" added, 32px made the links touch the logo at 1024px */
  align-items: center;
  justify-self: center;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
/* "Free Tools" dropdown: two groups, Deliverability and Cold Email (Karl, 2026-10-04) */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: none; padding: 0;
  color: var(--text-secondary); font: inherit; cursor: pointer; transition: color 0.2s; }
.nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle { color: var(--text); }
.nav-dropdown-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
.nav-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown-panel { display: none; position: absolute; top: calc(100% + var(--space-4)); left: 50%; transform: translateX(-50%);
  min-width: 520px; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-5) var(--space-6);
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.nav-dropdown.open .nav-dropdown-panel { display: grid; }
.nav-dropdown-group { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-links .nav-dropdown-label { margin-bottom: var(--space-2); }  /* the small amber .section-label style */
.nav-links .nav-dropdown-panel a { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  margin: 0 calc(var(--space-3) * -1); border-radius: var(--radius-sm); color: var(--text); font-weight: 600; }
.nav-tool-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--accent); }
.nav-tool-icon svg { width: 18px; height: 18px; }
.nav-links .nav-dropdown-panel a:hover .nav-tool-icon { border-color: var(--accent); }
.nav-links .nav-dropdown-panel a:hover { background: var(--bg-surface); }
.nav-tool-text span { display: block; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.nav-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav-cta {
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 600;
  padding: var(--space-2) var(--space-5);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-strong); }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.nav-toggle svg { width: 18px; height: 18px; }

.nav-logo { padding: var(--space-2) 0; }  /* 44px tap height */
.nav-menu-cta { display: none; }  /* the in-menu "Book a Call" only exists in the phone/tablet menu */
.nav-toggle line { transition: transform 0.2s, opacity 0.2s; transform-box: view-box; transform-origin: center; }

/* Phones and tablets (under 1024px): logo + menu button only; "Book a Call" lives inside the menu.
   The desktop links don't fit beside the logo until about 920px, so the menu covers every iPad held upright. */
@media (max-width: 1023px) {
  nav { padding: var(--space-3) var(--space-5); }
  .nav-inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); }
  .nav-right { grid-column: 2; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; width: 44px; height: 44px; }
  nav.menu-open .nav-toggle line:nth-child(1) { transform: rotate(45deg) translateY(6px); }
  nav.menu-open .nav-toggle line:nth-child(2) { opacity: 0; }
  nav.menu-open .nav-toggle line:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }
  nav.menu-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    justify-self: stretch;  /* the desktop rule centres the links; without this the open menu shrinks to a narrow column */
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    padding: var(--space-2) var(--space-5) var(--space-6);
    gap: 0;
    align-items: stretch;  /* full-width rows, not words centred in the panel */
  }
  nav.menu-open .nav-links a {
    display: block;
    padding: var(--space-4) 0;  /* about 48px tall rows */
    border-bottom: 1px solid var(--border);
    color: var(--text);
  }
  /* In the open menu "Free Tools" is a row that expands its tool links in place */
  nav.menu-open .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: var(--space-4) 0; border-bottom: 1px solid var(--border); color: var(--text); }
  nav.menu-open .nav-dropdown-panel { position: static; transform: none; min-width: 0; grid-template-columns: 1fr; gap: var(--space-4);
    padding: var(--space-4) 0 var(--space-4) var(--space-4); background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
  nav.menu-open .nav-links .nav-dropdown-panel a { display: flex; border-bottom: none; margin: 0; padding: var(--space-3) 0; }  /* icon left, name + description right */
  nav.menu-open .nav-menu-cta { display: block; margin-top: var(--space-5); }
  nav.menu-open .nav-menu-cta a { border-bottom: none; text-align: center; color: var(--on-accent); padding: var(--space-4) var(--space-6); }
  /* Dimmed page behind the open menu; a tap on it closes the menu (scripts.js) */
  nav.menu-open::after {
    content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 100vh;
    background: rgba(12, 11, 9, 0.7); z-index: -1;
  }
}
@media (max-width: 640px) {
  nav { padding: var(--space-2) var(--space-4); }
  .nav-logo { font-size: 0.95rem; letter-spacing: 0.03em; gap: var(--space-2); }
  .nav-logo-icon { width: 20px; height: 20px; }
}
html.menu-lock, html.menu-lock body { overflow: hidden; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-1px); }
/* Secondary actions are underlined text links, so "Book a Call" is the one button that stands out (Karl, 2026-10-07) */
.btn-ghost { color: var(--text); padding-left: var(--space-2); padding-right: var(--space-2);
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.btn-ghost:hover { color: var(--accent); text-decoration-color: var(--accent); }
/* Press feedback on every button-like link (Karl, 2026-10-07) */
.btn:active, .btn-sm:active, .nav-cta:active, .related-case-cta:active { transform: scale(0.98); }
/* Visible keyboard focus everywhere (Karl, 2026-10-07; there was none) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
/* Current page in the nav: scripts.js sets aria-current (Karl, 2026-10-07) */
.nav-links a[aria-current="page"], .nav-dropdown:has(a[aria-current="page"]) > .nav-dropdown-toggle { color: var(--accent); }
.btn-sm {
  display: inline-block;
  padding: var(--space-3) var(--space-8);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;  /* <button class="btn-sm"> must not keep the browser's bevelled border or Arial font */
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-sm:hover { background: var(--accent-strong); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

section { padding: var(--section-y) var(--section-x); max-width: var(--width-wide); margin: 0 auto; }

.case-section, .case-hero {
  max-width: var(--width-copy);
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
  border-top: 1px solid var(--border);
}
.case-hero { border-top: none; padding-top: var(--page-top); padding-bottom: var(--space-8); }

h2 {
  margin-bottom: var(--space-10);
  max-width: 24ch;
  text-wrap: balance;
}
.case-section h2, .case-hero h2 {
  margin-bottom: var(--space-5);
  max-width: none;
}

/* ==========================================================================
   Section bands: alternate surfaces so each section reads as its own block
   (hero on the page colour, then System banded, and so on).
   Sections stay 1100px wide; the band paints edge to edge behind them.
   ========================================================================== */
#system, #work, #testimonials, #faq {
  background: var(--bg-band);
  box-shadow: 0 0 0 100vmax var(--bg-band);
  clip-path: inset(0 -100vmax);
}
#contact, footer {
  background: var(--bg-deep);
  box-shadow: 0 0 0 100vmax var(--bg-deep);
  clip-path: inset(0 -100vmax);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
  padding-top: var(--page-top);
  padding-bottom: var(--space-16);
  /* soft amber glow behind the headline (Karl liked it in the redesign test, 2026-10-07) */
  background: radial-gradient(60% 50% at 50% 0%, rgba(255, 183, 0, 0.10), transparent 70%);
}
.hero-content { display: flex; flex-direction: column; align-items: center; max-width: min(100%, 62rem); }
/* Headline: always 3 lines, "Go-to-market systems / that fill your calendar / while you sleep." (Karl);
   the em-based width scales with the font, measured at 360 to 2560px */
.hero h1 { max-width: 12em; }
h1 {
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
h1 em { color: var(--accent); font-style: normal; }
.lede {
  margin-top: var(--space-5);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-secondary);
}
.cta-row { margin-top: var(--space-8); display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   Services grid
   ========================================================================== */

.grid-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--text-secondary); }
.card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: rgba(255, 183, 0, 0.1); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.card-icon svg { width: 20px; height: 20px; }

/* ==========================================================================
   Logo marquee
   ========================================================================== */

.logo-cloud {
  width: 100%;
  padding: var(--space-10) 0 0;
  border-top: 1px solid var(--border);
}
.logo-cloud-inner { max-width: var(--width-wide); margin: 0 auto; padding: 0 var(--space-8); }
.logo-cloud-label {
  text-align: center;
  color: var(--text-muted);
}
/* The strip spans the full content width (it was capped at 1000px with fixed 140px fades, leaving a 720px
   window on every screen); the fades are a share of the width so they scale from phones to big monitors. */
.logo-marquee-mask {
  margin: var(--space-8) auto 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-marquee-scroll 36s linear infinite;
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-8);
  flex-shrink: 0;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
.logo-item img {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
/* Instantly partner badge with its name beside it: founders don't all recognise the badge alone (Karl, 2026-10-04) */
.partner-badge { display: flex; align-items: center; gap: var(--space-3); }
.partner-badge img { width: 48px; height: auto; flex-shrink: 0; }
.partner-badge-text { color: var(--text-secondary); text-align: left; }
.partner-badge-text strong { color: var(--text); font-weight: 600; }
.hero-partner-badge { justify-content: center; margin-top: var(--space-8); }
/* The badge links to /partner-policy/ (Instantly Program ToS section 6: disclose wherever the badge shows) */
a.partner-badge { text-decoration: none; }
a.partner-badge:hover .partner-badge-text, a.partner-badge:hover .partner-badge-text strong { color: var(--accent); }
.footer-col > a.partner-badge { display: flex; align-self: flex-start; padding: 0; }
/* "Find us on" review-site links under the partner badge (Karl, 2026-10-05); no tile (Karl), so the Clutch C is recoloured light in its file */
.review-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); }
.review-links-label { color: var(--text-muted); width: 100%; }
.footer-col .review-links a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.review-links img { width: 24px; height: 24px; border-radius: 4px; }

/* ==========================================================================
   Work grid (homepage case-study preview cards)
   ========================================================================== */

.work-tag {
  display: inline-block;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Win tag (pill) — used on featured stats site-wide
   ========================================================================== */

.win-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 183, 0, 0.18);
  color: var(--accent);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
}
.win-tag svg { width: 12px; height: 12px; flex-shrink: 0; }


/* ==========================================================================
   Case-study hero elements
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.breadcrumb a { text-decoration: none; color: var(--text-muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span.current { color: var(--text); }
/* Long page names (phones): one static line that fades out at the right edge, never "..." and never animated
   (Karl, 2026-10-04: no ticker). scripts.js adds .is-faded only when the name doesn't fit. */
.breadcrumb { min-width: 0; }
.breadcrumb > * { flex-shrink: 0; }
.breadcrumb > .current { flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.breadcrumb > .current.is-faded { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }

.proof-frame {
  display: block;
  border: 1px solid var(--border);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: var(--space-5);
}
.proof-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.proof-dots { display: flex; gap: var(--space-1); flex-shrink: 0; }
.proof-dots span { width: 9px; height: 9px; border-radius: 50%; display: block; }
.proof-dots span:nth-child(1) { background: #ff5f57; }
.proof-dots span:nth-child(2) { background: #febc2e; }
.proof-dots span:nth-child(3) { background: #28c840; }
.proof-url {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: var(--space-1) var(--space-3);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proof-image { width: 100%; display: block; }

.case-hero h1 {
  margin-bottom: var(--space-2);
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.case-subheadline {
  color: var(--text-secondary);
  max-width: 60ch;
  margin-bottom: var(--space-4);
}
.case-date-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}
.case-date-line svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }

.case-body p, .case-section p {
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}
.case-list { list-style: none; margin-top: var(--space-4); }
.case-list li {
  color: var(--text-secondary);
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: var(--space-3);
}
.case-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.subsection-title {
  font-weight: 700;
  color: var(--text);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.subsection-proof { width: 100%; display: block; }

/* Stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  margin-bottom: var(--space-8);
}
.stat-cell { padding: var(--space-8) var(--space-5); text-align: center; border-left: 1px solid var(--border); }
.stat-cell:first-child { border-left: none; }
.stat-cell .num {
  font-variant-numeric: tabular-nums;  /* equal-width digits, so the count-up doesn't wobble */
  white-space: nowrap;
  color: var(--accent);
  margin-bottom: var(--space-1);
}
.stat-cell .label { color: var(--text-muted); }
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(3) { border-left: none; }
  .stat-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* Results teaser */
.results-teaser {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  padding: var(--space-8) var(--space-6) var(--space-2);
  margin-top: var(--space-8);
}
.results-teaser-label {
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-5);
}
.results-teaser .stat-strip { border: none; margin-bottom: 0; }
.results-teaser .stat-cell { padding: 0 var(--space-5) var(--space-6); }
@media (max-width: 640px) {
  .results-teaser .stat-cell:nth-child(n+3) { padding-top: var(--space-6); }
}
.results-teaser .stat-cell .num { color: var(--accent); }

/* Quote block */
.quote-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: var(--space-8);
}
.quote-block p {
  color: var(--text);
  font-style: italic;
  margin-bottom: var(--space-4);
}
.quote-proof { display: block; max-width: 420px; width: 100%; border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.quote-block cite { display: block; font-style: normal; color: var(--text-muted); }

.disclaimer {
  font-style: italic;
  color: var(--text-muted);
  max-width: 560px;
}


/* Homepage proof/contact strip */
.proof {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.proof p { color: var(--text-secondary); max-width: 42ch; }


.related-case-cta {
  display: inline-block;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}


/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  position: relative;
  padding: var(--space-12) var(--space-8) var(--space-8);
  max-width: var(--width-wide);
  margin: 0 auto;
  text-align: center;
}
footer p { color: var(--text-muted); }
footer a { color: var(--text); text-decoration: none; }
footer a:hover { color: var(--accent); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  text-align: left;
  margin-bottom: var(--space-10);
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col .footer-title { color: var(--text); margin-bottom: var(--space-1); }
.footer-col a { color: var(--text-muted); text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-muted); transition: border-color 0.2s, color 0.2s;
}
.footer-social a:hover { border-color: var(--accent); color: var(--accent); }
.footer-social svg { width: 15px; height: 15px; fill: currentColor; }
.footer-bottom { border-top: 1px solid var(--border); padding-top: var(--space-6); }
.footer-legal { margin-top: var(--space-2); }
.footer-legal a { color: var(--text-muted); text-decoration: none; }
.footer-legal a:hover { color: var(--accent); }
.footer-cookie-settings { background: none; border: none; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; }
.footer-cookie-settings:hover { color: var(--accent); }

/* About / Founder section — photo on the left, copy on the right */
.about-grid {
  display: grid; grid-template-columns: 1fr 220px; gap: var(--space-10); align-items: start;
}
.about-photo { width: 100%; height: auto; border-radius: var(--radius-md); display: block; grid-column: 2; grid-row: 1; }
.about-copy p { color: var(--text-secondary); margin-bottom: var(--space-4); }
.about-copy p:last-child { margin-bottom: 0; }
.about-name { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 200px; margin: 0 auto; grid-column: auto; grid-row: auto; }
}

/* Service card tool-icon chips — icons only, no "Tools:" label */

/* How It Works */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.step-card { position: relative; }
.step-num {
 color: var(--accent);
 margin-bottom: var(--space-3);
}
.step-card h3 { margin-bottom: var(--space-2); }
.step-card p { color: var(--text-secondary); }

/* FAQ */
.faq-list { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; padding: var(--space-5) 0; font-weight: 600;
  color: var(--text); list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--accent);
  flex-shrink: 0; transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--text-secondary); padding-bottom: var(--space-5); max-width: 65ch; }


/* ==========================================================================
   Responsive
   ========================================================================== */


/* Tablet */
@media (max-width: 1023px) {
  .steps-grid { gap: var(--space-5); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-6); }
  /* Touch: links get a 44px tap area */
  .footer-col { gap: 0; }
  .footer-col > a, .breadcrumb a, .footer-legal a, .footer-cookie-settings { display: inline-block; padding: var(--space-3) 0; }  /* text links only: the round LinkedIn icon keeps its centring */
}

/* Phone */
@media (max-width: 640px) {
  .grid-services, .steps-grid { grid-template-columns: minmax(0, 1fr); }
  .steps-grid { gap: var(--space-8); }
  .proof { padding: var(--space-8); }
  .proof .cta-row { width: 100%; }
  .proof .btn { flex: 1 1 100%; text-align: center; }
}

/* ==========================================================================
   Legal pages (Privacy Policy, Terms of Service)
   ========================================================================== */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: var(--page-top) var(--space-6) var(--section-y); }
.legal-wrap h1 { margin: 0 0 var(--space-2); max-width: none; }  /* left-aligned with the text; the shared h1 rule centres titles */
.legal-wrap p + p { margin-top: var(--space-4); }  /* space between consecutive paragraphs */
.legal-updated { color: var(--text-muted); margin-bottom: var(--space-10); }
.legal-wrap h2 { margin: var(--space-12) 0 var(--space-4); }
.legal-wrap p, .legal-wrap li { color: var(--text-secondary); }
.legal-wrap ul { padding-left: var(--space-5); margin: var(--space-3) 0 var(--space-4); }
.legal-action { margin-bottom: var(--space-5); }  /* the Consent Preferences button gets room before the text under it */
.legal-wrap li { margin-bottom: var(--space-2); }
.legal-wrap a { color: var(--accent); overflow-wrap: anywhere; }  /* long help-page addresses wrap on small phones */
.legal-note {
  background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  padding: var(--space-5); margin-top: var(--space-12); color: var(--text-muted);
}

/* ==========================================================================
   Service card mini-demos — small looping CSS animations that show what
   each engine actually does, instead of just describing it in prose.
   No real data anywhere (leads-demo uses obviously-fake names + blurred
   email placeholders, never real addresses).
   ========================================================================== */

.mini-demo {
  container-type: inline-size;
  height: 156px;  /* room for the AI SDR demo's label, bubble and tags without touching the edges */
  margin-bottom: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

/* Lead Generation Engine — websites being scraped, leads landing in a live
   feed. Emails are obviously-fake placeholders (never a real address), not
   blurred — the fake domain itself is the tell, blur just looked broken. */
.leads-demo { display: flex; flex-direction: column; padding: 0.75rem 0.9rem; }
.scrape-label {
  display: flex; align-items: center; gap: 0.7rem; font-size: 0.7rem;
  color: var(--accent); font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; margin-bottom: 0.7rem; flex-shrink: 0;
}
.scrape-glass {
  width: 12px; height: 12px; border: 1.5px solid var(--accent); border-radius: 50%;
  position: relative; flex-shrink: 0; margin-right: 0.15rem;
  animation: scrape-scan 2.4s ease-in-out infinite;
}
.scrape-glass::after {
  content: ''; position: absolute; width: 5px; height: 1.5px; background: var(--accent);
  top: 11px; left: 9px; transform: rotate(45deg); transform-origin: left;
}
@keyframes scrape-scan { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.scrape-word { transition: opacity 0.22s ease; }
.scrape-word.is-swapping { opacity: 0; }
.scrape-ellipsis span { animation: scrape-blink 1.4s ease-in-out infinite; }
.scrape-ellipsis span:nth-child(2) { animation-delay: 0.2s; }
.scrape-ellipsis span:nth-child(3) { animation-delay: 0.4s; }
@keyframes scrape-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.leads-feed-mask {
  flex: 1; overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}
.leads-track { display: flex; flex-direction: column; gap: 0.7rem; animation: leads-scroll 9s linear infinite; }
@keyframes leads-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.lead-row {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; white-space: nowrap;
  opacity: 0; animation: lead-row-in 0.4s ease-out forwards;
}
.lead-row:nth-child(2) { animation-delay: 0.15s; }
.lead-row:nth-child(3) { animation-delay: 0.3s; }
.lead-row:nth-child(4) { animation-delay: 0.45s; }
.lead-row:nth-child(5) { animation-delay: 0.6s; }
.lead-row:nth-child(6) { animation-delay: 0.75s; }
@keyframes lead-row-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.lead-name { color: var(--text); font-weight: 600; }
.lead-email { color: var(--text-muted); user-select: none; overflow: hidden; text-overflow: ellipsis; }
/* Verdict pill — same semantic colors used site-wide for verification
   status (green/amber/red), doubling as a quiet nod to the email
   verification layer behind the Lead Generation Engine. */
.lead-verdict {
  margin-left: auto; flex-shrink: 0; font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem; border-radius: 999px;
}
.lead-verdict.good { color: #22c55e; background: rgba(34, 197, 94, 0.15); }
.lead-verdict.risky { color: #f59e0b; background: rgba(245, 158, 11, 0.15); }
.lead-verdict.bad { color: #f87171; background: rgba(239, 68, 68, 0.15); }


/* DFY Full Outbound Engine — pipeline nodes pulsing in sequence.
   Grid-based (not flex+space-between) so every node sits dead-center in an
   equal-width column — the connecting line and the traveling dot are both
   derived from that same column geometry, so nothing needs a guessed pixel
   offset and nothing can drift out of alignment. */
.pipeline-demo { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 1.15rem; position: relative; z-index: 0; }
.pipeline-node {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  font-size: 0.7rem; color: var(--text-muted); position: relative;  /* no z-index: lines, dots and travel dot share .pipeline-demo's stacking context */
}
/* Static connector: two half-segments per gap, each running from a node's
   own dot-center (top: 15px = half the 30px dot) out to the midpoint toward
   its neighbor — so the line always meets the dot exactly, whatever the
   card's rendered width. */
.pipeline-node:not(:first-child)::before {
  content: ''; position: absolute; top: 15px; right: 50%; width: 50%; height: 1px;
  background: var(--border); z-index: 0;
}
.pipeline-node:not(:last-child)::after {
  content: ''; position: absolute; top: 15px; left: 50%; width: 50%; height: 1px;
  background: var(--border); z-index: 0;
}
.pipeline-node-dot {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg);
  position: relative; z-index: 1;
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; transition: none;
}
.pipeline-node-dot svg { width: 14px; height: 14px; color: inherit; }
.pipeline-node.active .pipeline-node-dot { animation: pipeline-pulse 4.8s ease-in-out infinite; }
.pipeline-node:nth-child(1) .pipeline-node-dot { animation-delay: 0s; }
.pipeline-node:nth-child(2) .pipeline-node-dot { animation-delay: 1.2s; }
.pipeline-node:nth-child(3) .pipeline-node-dot { animation-delay: 2.4s; }
.pipeline-node:nth-child(4) .pipeline-node-dot { animation-delay: 3.6s; }
/* Traveling dot per gap: each one only has to cross ITS OWN column (its own
   dot at left:50% to the next dot at left:150%, exact because the columns
   are equal width), and its delay reuses the exact same 1.2s spacing as the
   node pulses above — so it arrives precisely when the next node lights up,
   instead of a single dot racing the whole row on unrelated timing. */
.pipeline-travel-dot {
  position: absolute; top: 15px; left: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; z-index: 2;  /* always in front of every connector line */
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 6px 1px rgba(255, 183, 0, 0.6);
  opacity: 0;
  animation: pipeline-segment-travel 4.8s linear infinite;
}
.pipeline-node:nth-child(1) .pipeline-travel-dot { animation-delay: 0s; }
.pipeline-node:nth-child(2) .pipeline-travel-dot { animation-delay: 1.2s; }
.pipeline-node:nth-child(3) .pipeline-travel-dot { animation-delay: 2.4s; }
@keyframes pipeline-segment-travel {
  0% { left: 50%; opacity: 1; }
  24.9% { left: 150%; opacity: 1; }
  25%, 100% { left: 150%; opacity: 0; }
}
@keyframes pipeline-pulse {
  0%, 8% { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 183, 0, 0.15); }
  25%, 100% { background: var(--bg); border-color: var(--border); box-shadow: none; }
}

/* AI SDR Engine — a hook being AI-generated, typewriter effect */
.ai-demo { display: flex; flex-direction: column; justify-content: center; padding: 0 1.3rem; gap: 0.7rem; }
.ai-demo-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; color: var(--accent); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.ai-demo-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: hero-hub-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes hero-hub-dot-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.ai-bubble {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface);
  padding: 0.65rem 0.8rem;
  overflow: hidden;
}
.ai-typing {
  font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden;
  border-right: 2px solid var(--accent); display: inline-block; max-width: 100%;
  vertical-align: bottom;
  animation: ai-caret 0.7s step-end infinite;
  direction: rtl; text-align: left; /* a long line clips on the left, so the newest letters stay beside the caret with no JS scrolling */
}
.ai-typing > span { direction: ltr; unicode-bidi: isolate; }
.ai-tags { display: flex; gap: 0.4rem; }
.ai-tag {
  font-size: 0.6rem; font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.55rem;
}
@keyframes ai-caret { 50% { border-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .leads-track, .lead-row, .scrape-glass, .scrape-ellipsis span,
  .pipeline-node.active .pipeline-node-dot, .pipeline-track-dot, .ai-typing,
  .logo-marquee-track {
    animation: none !important;
  }
  .lead-row, .scrape-ellipsis span { opacity: 1; transform: none; }
  .ai-typing { border-right-color: transparent; }
}



/* DFY Mailbox Setup — a mock terminal verifying DNS records, deliberately
   a different visual language (monospace/code) from the node-flow
   pipeline used on the Full Outbound Engine card. */
.terminal-demo { padding: 0; display: flex; flex-direction: column; }  /* same background as the other three demos (was a leftover cool #08080a, Karl 2026-10-07) */
.terminal-bar {
  display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--border);
}
.term-dot { width: 8px; height: 8px; border-radius: 50%; }
.term-dot.red { background: #ff5f57; }
.term-dot.yellow { background: #febc2e; }
.term-dot.green { background: #28c840; }
.terminal-body { padding: 0.9rem; flex: 1; display: flex; align-items: center; }
.term-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem 1rem; width: 100%; }
.term-line {
  font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 500; line-height: 1.3;
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--text);
  opacity: 0; transform: translateY(4px);
  animation: term-line-in 0.4s ease-out forwards;
}
.term-line:nth-child(1) { animation-delay: 0.15s; }
.term-line:nth-child(2) { animation-delay: 0.75s; }
.term-line:nth-child(3) { animation-delay: 1.35s; }
.term-line:nth-child(4) { animation-delay: 1.95s; }
/* JS re-triggers these delays on a loop (see scripts.js) so the rows
   always land one-by-one, not all at once on the second pass. */
.term-check {
  width: 15px; height: 15px; border-radius: 50%; background: rgba(34, 197, 94, 0.15);
  color: #22c55e; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; flex-shrink: 0;
}
@keyframes term-line-in { to { opacity: 1; transform: translateY(0); } }
@container (max-width: 360px) { .terminal-body { padding: 0.5rem 0.9rem; } .term-grid { grid-template-columns: 1fr; gap: 0.3rem; } .term-line { font-size: 0.75rem; } }

@media (prefers-reduced-motion: reduce) {
  .term-line { animation: none !important; opacity: 1; transform: none; }
}

/* ==========================================================================
   Browser-chrome frame for Results card images + rounding sharp panels
   ========================================================================== */
.browser-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.browser-chrome {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.browser-dots { display: flex; gap: var(--space-1); flex-shrink: 0; }
.browser-dots span { width: 9px; height: 9px; border-radius: 50%; display: block; }
.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #febc2e; }
.browser-dots span:nth-child(3) { background: #28c840; }
.browser-url {
  flex: 1; min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.proof-frame, .stat-strip, .results-teaser { border-radius: var(--radius-md); overflow: hidden; }
.quote-block, .legal-note { border-radius: var(--radius-md); }
.proof-url { border-radius: var(--radius-sm); }

/* ==========================================================================
   The System — "LGAIS Lead Engine": tool logos orbiting a central hub.
   Original build, restored as its own section (not hero content).
   ========================================================================== */

#system { padding-bottom: var(--space-16); }
#system h2 { margin-bottom: var(--space-4); }
.system-intro { margin: 0 auto var(--space-8); text-align: center; }  /* subheadline under the System headline */
/* The journey under the circle: Source -> ... -> Book */
.system-flow { list-style: none; padding: 0; margin: var(--space-8) auto 0; max-width: 760px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); }
.system-flow li { display: flex; align-items: center; gap: var(--space-3); color: var(--text); font-weight: 600; }
.system-flow li:not(:last-child)::after { content: "\2192"; color: var(--accent); font-weight: 400; }  /* arrow ends the line when it wraps */
.system-visual { display: flex; align-items: center; justify-content: center; }

.orbit-visual { position: relative; width: 560px; height: 560px; margin: 0 auto; }

.orbit-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 116px; height: 116px; border-radius: 26px;
  background: var(--bg-deep);  /* the LGAIS logo tile (dark square, amber bolt) in the warm palette; was a cool #0c0c10 (Karl, 2026-10-07) */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(255, 183, 0, 0.25), 0 0 60px rgba(255, 183, 0, 0.3);
  z-index: 3;
  animation: orbit-hub-breathe 3.4s ease-in-out infinite;
}
@keyframes orbit-hub-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 183, 0, 0.25), 0 0 45px rgba(255, 183, 0, 0.25); }
  50% { box-shadow: 0 0 0 1px rgba(255, 183, 0, 0.35), 0 0 85px rgba(255, 183, 0, 0.45); }
}
.orbit-hub svg { width: 62px; height: 62px; }

/* "LGAIS Lead Engine" — boxed pill just below the hub */
.orbit-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, 84px);
  z-index: 3;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  color: var(--accent); white-space: nowrap;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 0.4rem 1rem;
}

.orbit-ring { position: absolute; inset: 0; animation: orbit-spin 34s linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* One arm per app: the line and its icon live in the SAME rotated element,
   both keyed to that arm's own --radius, so the icon stays welded to the
   end of its line as the ring spins, and the lines are different lengths. */
.orbit-arm {
  position: absolute; top: 50%; left: 50%;
  width: var(--radius); height: 0;
  transform-origin: left center;
  transform: rotate(var(--angle));
}
.orbit-line {
  position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right, rgba(255, 183, 0, 0.12), rgba(255, 183, 0, 0.5) 55%, rgba(255, 183, 0, 0.9));
}
.orbit-particle {
  position: absolute; top: 0; left: 100%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 6px 1px rgba(255, 183, 0, 0.7);
  transform: translate(-50%, -50%);
  animation: orbit-particle-flow 3s linear infinite;
  animation-delay: var(--sdelay, 0s);
}
@keyframes orbit-particle-flow {
  0% { left: 100%; opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 0; opacity: 0; }
}
.orbit-node {
  position: absolute; left: 100%; top: 0;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle)));
}
.orbit-node-inner {
  position: relative; display: block;
  animation: orbit-counter 34s linear infinite;
}
@keyframes orbit-counter { to { transform: rotate(-360deg); } }
/* white rounded-square card holding the logo (not a circle) */
.orbit-chip {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 15px;
  background: var(--p-white-100);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.orbit-icon { display: block; width: 34px; height: 34px; object-fit: contain; }
/* role label under each card — says what the tool does in the system */
.orbit-node-label {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
 font-weight: 600; white-space: nowrap;
  color: var(--text-secondary);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 0.2rem 0.6rem;
}


/* The same 6 steps as a numbered list: visible on phones only (the circle is too small to read there),
   kept for screen readers on bigger screens, where the circle itself is decorative. */
.system-steps {
  list-style: none;
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 640px) {
  .system-visual { display: none; }
  .system-steps {
    position: relative; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0;
  }
  /* centred cards, 2 per row in pipeline order (Karl, 2026-10-05: the old left-aligned column looked off-centre) */
  .system-steps li {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center;
    padding: var(--space-5) var(--space-3); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  }
  .system-step-text { display: flex; flex-direction: column; gap: var(--space-1); }
  .system-step-name { font-weight: 600; color: var(--text); }
  .system-step-role { color: var(--text-muted); }
  .system-steps .orbit-chip { position: relative; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
  .system-steps .orbit-icon { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-ring, .orbit-node-inner, .orbit-particle, .orbit-hub { animation: none !important; }
}

/* ==========================================================================
   2026-10-02 overhaul additions
   ========================================================================== */
/* Small amber section labels above each h2 (restored on Karl's request) */
.section-label, .eyebrow {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.eyebrow { margin-bottom: var(--space-4); }

/* Hero: highlight the promise in amber text (a marker band read badly on the dark page) */
.hl { color: var(--accent); white-space: nowrap; }  /* the highlighted phrase never splits across lines */

/* Homepage section headings sit centred, matching the centred hero */
:is(#system, #services, #work, #how-it-works, #testimonials, #about, #faq, #contact) > :is(.section-label, h2) {
  text-align: center; margin-left: auto; margin-right: auto;
}
#faq .faq-list { margin: 0 auto; }

/* Testimonials: Marielle-style card (photo, name, role, quote, the real Slack screenshot) */
.testimonial-card {
  max-width: 760px; margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}
.testimonial-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.testimonial-avatar { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.testimonial-name { font-weight: 600; color: var(--text); }
.testimonial-role { color: var(--text-muted); }
.testimonial-quote { color: var(--text-secondary); }
@media (max-width: 640px) { .testimonial-card { padding: var(--space-6); } }
/* Footer divider runs edge to edge like the footer band (the old border-top only spanned the 1100px box) */
footer::before {
  content: ''; position: absolute; top: 0; left: -100vmax; right: -100vmax;
  height: 1px; background: var(--border);
}
/* Proof-frame caption: the tool's icon + the real campaign name (no fake URL) */
.proof-source { display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--text-secondary); font-weight: 500; white-space: normal; line-height: var(--lh-title); }
.proof-source img { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }

/* Tool pages: the FAQ is its own banded section and its heading is centred, like the homepage FAQ */
.tool-page .faq-section {
  margin-top: var(--space-16); padding: var(--section-y) 0;
  background: var(--bg-band); box-shadow: 0 0 0 100vmax var(--bg-band); clip-path: inset(0 -100vmax);
}
.tool-page:has(> .faq-section:last-child) { padding-bottom: 0; }  /* band runs straight into the Contact band below */
.tool-page .faq-section > :is(.section-label, h2) { text-align: center; }
.tool-page .faq-section > h2, .tool-page .faq-list { margin-left: auto; margin-right: auto; }

/* Closing Contact section on case-study and tool pages: the same section as the homepage Contact,
   on the deepest colour so it runs into the footer */
section.cta-band { background: var(--bg-deep); box-shadow: 0 0 0 100vmax var(--bg-deep); clip-path: inset(0 -100vmax); }
.cta-band > :is(.section-label, h2) { text-align: center; margin-left: auto; margin-right: auto; }
.proof .cta-row { margin-top: 0; }

/* Footer brand column: the LGAIS logo with its wordmark, the Instantly partner badge under it.
   Phones and tablets: it runs across the top, the four link columns sit 2 x 2 below. */
.footer-cols { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
.footer-brand { gap: var(--space-4); }
.footer-brand .footer-logo { display: inline-flex; align-self: flex-start; font-size: 1.05rem; color: var(--text); padding: var(--space-2) 0; }  /* 44px tap height */
.footer-brand .footer-logo:hover { color: var(--text); }
@media (max-width: 1023px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; gap: var(--space-4); }
}

/* Case studies index: every case study as a card; 3 across on laptops, 2 on tablets, 1 on phones */
.cs-index > :is(.section-label, h1, .cs-intro) { text-align: center; margin-left: auto; margin-right: auto; }
.cs-index { padding-top: var(--page-top); }
.cs-index h1 { margin-bottom: var(--space-3); }
.cs-intro { color: var(--text-secondary); margin-bottom: var(--space-12); }
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.cs-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); text-decoration: none; transition: border-color 0.2s, transform 0.15s; }
/* same order as the homepage cards: client-type tag, screenshot, result pill, title, line, button */
.cs-card .browser-frame { align-self: stretch; }
.cs-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.cs-thumb { display: block; width: 100%; aspect-ratio: 900 / 394; object-fit: cover; object-position: top; }
.cs-card .win-tag { margin-bottom: var(--space-3); }
.cs-card h3 { color: var(--text); margin-bottom: var(--space-2); text-wrap: balance; }
.cs-card p { color: var(--text-secondary); margin-bottom: var(--space-4); }
.cs-card .related-case-cta { margin-top: auto; }
.cs-card:hover .related-case-cta { background: var(--accent-strong); }
@media (max-width: 1023px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cs-grid { grid-template-columns: minmax(0, 1fr); } }

/* Card tags are categories, not buttons: amber text, no border (Karl, 2026-10-03; same as karlkyamko.com) */
.work-tag { color: var(--accent); border: none; border-radius: 0; padding: 0; background: none; font-weight: 500; letter-spacing: 0.08em; }

/* Every case-study thumbnail uses the same window, whatever the screenshot's shape (zoomed in is fine) */
.cs-thumb { aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; background: var(--border); }  /* placeholder while a lazy image loads: never white (Karl saw white boxes on his phone, 2026-10-05) */

/* More Results on every case study: the next 3 cards from /case-studies/ (filled by bin/sync_layout.py),
   the same card as the case studies page; the section is wider than the text column so 3 cards fit */
.case-section.case-more { max-width: var(--width-wide); }
.case-more > h2 { text-align: center; }
.case-more .cta-row { margin-top: var(--space-8); }

/* ==========================================================================
   Typography: the ONLY place font sizes are set (structured like Webflow's Client-First, 2026-10-04).
   HTML tags carry the default style (h1-h6; body = Paragraph regular). When an element should look
   different from its tag (a card title is an h3 for screen readers but looks like H4), it is listed
   under the style it uses. Sizes come from the type-scale tokens in :root. Live reference: /style-guide/.
   Left out on purpose: the logo, the FAQ "+" glyph and the animated mock-ups (illustrations, not text).
   ========================================================================== */

/* H1: page titles (the one h1 on every page) */
h1, .heading-style-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--h1); line-height: var(--lh-heading); letter-spacing: -0.03em; }

/* Display: homepage hero headline */
.hero h1, .heading-style-display { font-family: var(--font-display); font-weight: 800; font-size: var(--display); line-height: var(--lh-heading); letter-spacing: -0.03em; }

/* H2: section headlines; How It Works step numbers */
h2, .heading-style-h2, .step-num { font-family: var(--font-display); font-weight: 800; font-size: var(--h2); line-height: var(--lh-heading); letter-spacing: -0.03em; }

/* H3: headings inside a case study or legal page; big result numbers */
h3, .heading-style-h3, .case-section h2, .case-hero h2, .legal-wrap h2, .stat-cell .num { font-family: var(--font-display); font-weight: 800; font-size: var(--h3); line-height: var(--lh-heading); letter-spacing: -0.02em; }

/* H4: every card title (services, steps, case studies) */
h4, .heading-style-h4, .card h3, .step-card h3, .cs-card h3, .case-section .author-box .author-box-name { font-family: var(--font-display); font-weight: 800; font-size: var(--h4); line-height: var(--lh-title); letter-spacing: -0.02em; }

/* H5: small headings inside a case study */
h5, .heading-style-h5, .subsection-title, .cookie-close { font-family: var(--font-body); font-weight: 600; font-size: var(--h5); line-height: var(--lh-title); letter-spacing: normal; }

/* H6: FAQ questions */
h6, .heading-style-h6, .faq-item summary { font-family: var(--font-body); font-weight: 600; font-size: var(--h6); line-height: var(--lh-title); letter-spacing: normal; }

/* Paragraph large: intro lines, subheadlines, quotes, the phone/tablet menu */
.text-size-large, .lede, .case-subheadline, .testimonial-quote, .quote-block p, nav.menu-open .nav-links { font-size: var(--text-large); line-height: var(--lh-body); }

/* Paragraph regular: the body default; every paragraph and list, main buttons */
body, .text-size-regular, .btn, .logo-item, .case-body p, .case-section p, .case-list li, .decision-list li, .about-copy p, .faq-item p, .legal-wrap p, .legal-wrap li { font-size: var(--text-regular); line-height: var(--lh-body); }

/* Paragraph small: card text, nav links, small buttons, breadcrumbs, captions, disclaimers, footer */
.text-size-small, .card p, .step-card p, .cs-card p, .nav-links, .nav-cta, .btn-sm, .related-case-cta,
.nav-tool-text span, .cs-card .blog-card-meta, .breadcrumb, .case-date-line, .quote-block cite, footer p, .footer-col a, .review-links-label, .legal-updated, .legal-note, .logo-cloud-label,
.testimonial-role, .orbit-badge, .system-flow li, .system-step-role, .disclaimer, .case-section .disclaimer, .cookie-table th, .cookie-table td, .compare-table th, .compare-table td, .dns-record, .article-figure figcaption, .word-list li, .word-count, .case-section .author-box .author-box-role { font-size: var(--text-small); line-height: var(--lh-body); }
/* Inline code in posts (record values like p=none) sits slightly smaller than the text around it, like .legal-wrap code */
.case-section code { font-size: 0.875em; }
/* Footer column headings: small bold labels (paragraphs, not h4, so the heading order stays valid) */
.footer-col .footer-title { font-family: var(--font-body); font-weight: 600; font-size: var(--text-small); line-height: var(--lh-body); letter-spacing: normal; }

/* Paragraph tiny: tags, section labels, pills, fake URL bars, stat labels, legal links */
.text-size-tiny, .section-label, .eyebrow, .work-tag, .win-tag, .browser-url, .proof-url, .stat-cell .label,
.results-teaser-label, .footer-legal, .orbit-node-label { font-size: var(--text-tiny); line-height: var(--lh-body); }
/* About the Author: the h2 reads as the small amber label (outranks the .case-section h2 H3 rule) */
.case-section h2.author-section-title { font-family: var(--font-body); font-weight: 600; font-size: var(--text-tiny); line-height: var(--lh-body); letter-spacing: 0.12em; margin-bottom: var(--space-3); }


/* /style-guide/ page: the live reference for the type scale and spacing (noindex, not linked) */
.sg { padding-top: var(--page-top); }
.sg h1 { margin-left: 0; margin-right: 0; max-width: none; margin-bottom: var(--space-4); }
.sg-intro { color: var(--text-secondary); max-width: 62ch; margin-bottom: var(--space-12); }
.sg-group { margin-top: var(--space-16); }
.sg-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); align-items: center;
  padding: var(--space-6) 0; border-top: 1px solid var(--border); }
.sg-name { color: var(--text); font-weight: 600; }
.sg-meta { color: var(--text-muted); }
.sg-meta code { color: var(--accent); font-family: inherit; }
.sg-now { color: var(--accent); }
.sg-sample { color: var(--text); overflow-wrap: anywhere; }
.sg-space-bar { height: var(--space-4); background: var(--accent); border-radius: var(--radius-sm); }
@media (max-width: 640px) { .sg-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }

/* Cookie banner (scripts.js): full-width bar at the bottom; RB2B loads only after Accept All */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; animation: cookie-bar-in 0.4s ease-out;
  background: var(--bg-surface); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45); }
.cookie-banner-inner { position: relative; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-6) var(--space-16) var(--space-6) var(--section-x); }  /* right padding keeps the buttons clear of the X */
.cookie-banner-title { color: var(--text); margin-bottom: var(--space-1); }
.cookie-banner p { color: var(--text-secondary); }
.cookie-banner .cookie-banner-title { color: var(--text); }
.cookie-banner a { color: var(--accent); }
.cookie-banner-actions { display: flex; gap: var(--space-3); flex-shrink: 0; }
.cookie-banner .btn-sm { min-height: 44px; min-width: 132px; padding: var(--space-2) var(--space-5); }  /* Reject All and Accept All look identical (regulators: declining as easy as accepting) */
.cookie-close { position: absolute; top: var(--space-1); right: var(--space-2); width: 44px; height: 44px;
  background: none; border: none; color: var(--text-secondary); cursor: pointer; }  /* sits beside the buttons, not at the screen edge */
.cookie-close:hover { color: var(--text); }
@keyframes cookie-bar-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } }
@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-5) var(--section-x); }
  .cookie-banner-title { padding-right: var(--space-8); }  /* clear of the X */
  .cookie-banner-actions > * { flex: 1; min-width: 0; }
}

/* Cookie Policy table */
/* Blog (2026-10-04): comparison tables, the decision list, sources; post pages reuse .case-hero / .case-section */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.case-hero .work-tag { display: inline-block; margin-bottom: var(--space-3); }
.author-byline { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); }
.author-byline img { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.author-byline p { color: var(--text-secondary); }
.author-name { color: var(--text); font-weight: 600; }
.article-figure { margin: var(--space-6) 0; }
.article-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.article-figure figcaption { margin-top: var(--space-3); color: var(--text-secondary); text-align: center; }
.article-figure figcaption a { color: var(--accent); }
/* About the Author card (redesigned 2026-10-11, Karl's call: the old box looked unfinished):
   small amber label, then a card: photo + name + role + LinkedIn mark in one row, a hairline, the bio full width */
.author-section-title { color: var(--accent); text-transform: uppercase; }
.author-box { padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.author-box-head { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.author-box-head img { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.author-box-id { flex: 1; min-width: 0; }
.case-section .author-box p { margin: 0; }
.case-section .author-box .author-box-name { color: var(--text); }
.case-section .author-box .author-box-role { color: var(--text-muted); margin-top: var(--space-1); }
.case-section .author-box .author-box-bio { color: var(--text-secondary); }
.author-linkedin { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px;
  color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: color 0.2s, border-color 0.2s; }
.author-linkedin:hover { color: var(--accent); border-color: var(--accent); }
.author-linkedin svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 640px) { .author-box { padding: var(--space-5); } .author-box-head img { width: 56px; height: 56px; } }
.cs-card .blog-card-meta { color: var(--text-muted); margin-top: auto; padding-top: var(--space-3); }
.blog-index .breadcrumb { justify-content: center; margin-bottom: var(--space-6); }
.case-section :is(p, li) > a { color: var(--accent); }  /* text links only; the More Results cards are links too */
.compare-table-wrap { overflow-x: auto; margin: var(--space-5) 0; border: 1px solid var(--border); border-radius: var(--radius-md); }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.compare-table thead th { color: var(--text); font-weight: 600; background: var(--bg-surface); }
.compare-table tbody th { color: var(--text); font-weight: 600; }
.compare-table tbody tr:last-child > * { border-bottom: none; }
.decision-list { margin: var(--space-4) 0; padding-left: var(--space-6); }
.decision-list li { color: var(--text-secondary); margin-bottom: var(--space-3); padding-left: var(--space-1); }
.decision-list li::marker { color: var(--accent); font-weight: 700; }
.case-section code, .dns-record { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); overflow-wrap: anywhere; }
/* Spam words post (2026-10-10): long word lists flow into columns (4 on laptops, 2 on phones) */
.word-list { list-style: none; columns: 4; column-gap: var(--space-6); margin: var(--space-3) 0 var(--space-8); }
@media (max-width: 1023px) { .word-list { columns: 3; } }
@media (max-width: 640px) { .word-list { columns: 2; column-gap: var(--space-4); } }
.word-list li { break-inside: avoid; color: var(--text-secondary); padding: var(--space-1) 0; overflow-wrap: anywhere; }
.word-list-short li { color: var(--text); }
.word-group-title { margin-top: var(--space-8); scroll-margin-top: 6rem; }
.word-count { color: var(--text-muted); font-weight: 400; }
.word-toc { columns: 2 16rem; column-gap: var(--space-6); }
.word-toc li { break-inside: avoid; }
.dns-record { margin: var(--space-3) 0 var(--space-5); padding: var(--space-3) var(--space-4); background: var(--bg-deep);
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); white-space: pre-wrap; }
@media (max-width: 640px) {
  /* phones: each row becomes a block (row name, then one line per column) */
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table tr { padding: var(--space-4); border-bottom: 1px solid var(--border); }
  .compare-table tbody tr:last-child { border-bottom: none; }
  .compare-table th, .compare-table td { padding: 0; border-bottom: none; }
  .compare-table td { margin-top: var(--space-2); }
  .compare-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text); font-weight: 600; }
}
.cookie-table-wrap { overflow-x: auto; margin: var(--space-4) 0 var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cookie-table { width: 100%; border-collapse: collapse; }
.cookie-table th, .cookie-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.cookie-table th { color: var(--text); font-weight: 600; background: var(--bg-surface); }
.cookie-table tr:last-child td { border-bottom: none; }
.cookie-table td:nth-child(-n+2) { white-space: nowrap; }  /* cookie names and lifetimes never break mid-word */
@media (max-width: 640px) {
  /* phones: each cookie becomes its own block (name, then "Lasts", then "Purpose") instead of three cramped columns */
  .cookie-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cookie-table, .cookie-table tbody, .cookie-table tr, .cookie-table td { display: block; }
  .cookie-table tr { padding: var(--space-4); border-bottom: 1px solid var(--border); }
  .cookie-table tr:last-child { border-bottom: none; }
  .cookie-table td { padding: 0; border-bottom: none; }
  .cookie-table td + td { margin-top: var(--space-2); }
  .cookie-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text); font-weight: 600; }
}
.legal-quote { margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); background: var(--bg-surface); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.legal-wrap .legal-quote p { margin: 0; }
.legal-wrap code { color: var(--accent); font-size: 0.875em; overflow-wrap: anywhere; }