/* ============================================================
   LAUNCHZY — Design System v3 (2026-08-20)
   Light, editorial, institutional. The quiet-authority read:
   in a market where every AI vendor shouts, restraint is the
   differentiator. Monochrome cloudscape + Geist + hairlines.

   Palette is derived from the brand photograph. Source replaced
   2026-08-20 with a higher-resolution frame (941x1672): mean RGB
   177/170/165, warm bias +11, luminance p5-p95 = 116-222. Lighter
   and warmer than the first frame, which is why the paper tone is
   warm rather than neutral and why the hero scrim can sit lighter.

   Class vocabulary is intentionally unchanged from v2 so all 41
   pages re-theme without markup edits.
   ============================================================ */

:root {
  /* Surfaces */
  --paper:      #FBFAF9;   /* warm off-white, never pure #fff */
  --paper-2:    #F4F3F0;   /* alternating band */
  --paper-3:    #EBE9E5;   /* inset / rail */
  --ink:        #0C0C0D;   /* primary text, never pure #000 */
  --ink-2:      #343437;
  --muted:      #6B6B70;
  --muted-2:    #94949A;

  /* Greys sampled from the cloudscape */
  --cloud-1:    #C0C0C0;
  --cloud-2:    #A0A0A0;
  --cloud-3:    #808080;
  --cloud-4:    #606060;

  /* Hairlines — the Cluely signature */
  --line:        rgba(12,12,13,0.09);
  --line-2:      rgba(12,12,13,0.15);
  --line-strong: rgba(12,12,13,0.24);

  /* Single accent: the brand orange, deepened for a light ground.
     Was #FF6B00 (vivid, glow-heavy). Burnt is the adult version and
     clears WCAG AA on --paper at 5.6:1. */
  --accent:      #C2410C;
  --accent-ink:  #9A330A;
  --accent-soft: rgba(194,65,12,0.07);
  --accent-line: rgba(194,65,12,0.22);

  --success: #1F6F43;
  --danger:  #A32B1E;
  --info:    #1F5F7A;

  --nav-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1240px;

  /* Legacy aliases from v1/v2. Inline styles across the older pages still
     reference these; mapping them here re-themes those pages for free and
     stops an undefined var falling back to currentColor. */
  --text: var(--ink);
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --surface: #ffffff;
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --border: var(--line);
  --border-strong: var(--line-2);
  --glow: var(--accent);
  --glow-2: var(--accent);
  --glow-light: var(--accent);
  --glow-soft: var(--accent-soft);
  --bloom: none;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  margin: 0;
  overflow-x: hidden;
}

/* Display type: medium weight at large size reads institutional.
   Black weight reads startup. This is the core tonal decision. */
h1, h2, h3, h4, .headline {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

::selection { background: rgba(194,65,12,0.16); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: rgba(12,12,13,0.18); border-radius: 999px; border: 3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: rgba(12,12,13,0.3); }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; width: 100%; }
@media (min-width: 768px)  { .container { padding: 0 34px; } }
@media (min-width: 1024px) { .container { padding: 0 48px; } }

#solutions, #workforce, #process, #faq, #method, #proof { scroll-margin-top: calc(var(--nav-h) + 20px); }

.section { position: relative; padding: 112px 0; }
.section.tight { padding: 76px 0; }
@media (max-width: 768px) { .section { padding: 72px 0; } .section.tight { padding: 52px 0; } }

/* Hairline rule between chapters */
.rule { height: 1px; background: var(--line); width: 100%; }
.divider { height: 1px; background: var(--line); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
/* Accent = colour only, same face, same weight. No second family. */
.accent, .display-serif {
  color: var(--accent);
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}
.glow-text { text-shadow: none; }

/* Mono labels carry the technical-credibility signal. Used sparingly:
   max one eyebrow per three sections (see taste rules). */
.eyebrow {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ''; width: 16px; height: 1px; background: var(--line-strong); flex-shrink: 0;
}
.eyebrow.center { justify-content: center; }
.eyebrow.danger { color: var(--danger); }
.eyebrow.danger::before { background: var(--danger); opacity: .5; }

.section-head { max-width: 780px; }
.section-h {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(24px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.032em;
  font-weight: 500;
  margin: 0;
}
.section-sub {
  margin-top: 20px; font-size: 17px; line-height: 1.62; color: var(--muted); max-width: 62ch;
}
.sub-h {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 18px; line-height: 1.3; letter-spacing: -0.018em; font-weight: 500; color: var(--ink);
}

.speaker-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted-2);
}

/* Display numerals: mono gives them a measured, reported feel */
.stat-num {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   AMBIENT — retired. The photograph carries all atmosphere now.
   ============================================================ */
.ambient-grid, .calc-grid { background-image: none; }
.ambient-glow { background: none; }
.aurora { display: none; }
.home-saturn { display: none; }
#constellation { display: none; }
.glow-orb { display: none; }
.spin-ring { animation: none; }

/* ============================================================
   SURFACES
   ============================================================ */
.surface {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.surface-2 { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; }
.glass {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: border-color .3s var(--ease);
}
.glass:hover { border-color: var(--line-2); }
.gradient-border { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.gradient-border::before { display: none; }

/* ============================================================
   BUTTONS — one radius system: pill for actions.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.011em;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease);
}
.btn .arrow { transition: transform .28s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-primary, .cta-btn, .pricing-btn.primary {
  color: var(--paper); background: var(--ink); border-color: var(--ink);
}
.btn-primary:hover, .cta-btn:hover, .pricing-btn.primary:hover { background: #262629; border-color: #262629; }

.btn-glass, .btn-ghost, .pricing-btn.ghost {
  color: var(--ink); background: transparent; border: 1px solid var(--line-2);
}
.btn-glass:hover, .btn-ghost:hover, .pricing-btn.ghost:hover { border-color: var(--ink); background: rgba(12,12,13,0.03); }

.btn-accent { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

/* ============================================================
   NAVIGATION — flat, hairline-bottomed. Height capped at 68px.
   ============================================================ */
/* Frosted glass. Transparent enough that the cloudscape genuinely reads
   through it, with saturation lifted so the blur does not go flat, plus a
   1px inner highlight along the bottom for edge refraction. */
.lz-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: block; pointer-events: none;
  background: rgba(251,250,249,0.55);
  backdrop-filter: blur(20px) saturate(185%);
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  border-bottom: 1px solid transparent;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.lz-nav.scrolled {
  background: rgba(251,250,249,0.68);
  border-bottom-color: var(--line);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.6), 0 1px 24px rgba(12,12,13,0.05);
}
/* Blur is a progressive enhancement: without it the translucency would leave
   the nav links sitting on raw photograph, so fall back to solid paper. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lz-nav { background: rgba(251,250,249,0.97); }
}
@media (prefers-reduced-transparency: reduce) {
  .lz-nav, .lz-nav.scrolled {
    background: var(--paper);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}
.lz-nav-inner {
  pointer-events: auto;
  max-width: var(--maxw); margin: 0 auto;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 0 22px;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
@media (min-width: 768px)  { .lz-nav-inner { padding: 0 34px; } }
@media (min-width: 1024px) { .lz-nav-inner { padding: 0 48px; } }

.lz-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lz-logo { height: 17px; width: auto; display: block; }
.lz-brand .mark { display: none; }

.lz-navlinks { display: none; align-items: center; gap: 2px; }
@media (min-width: 960px) { .lz-navlinks { display: flex; } }
.lz-navlink {
  position: relative; padding: 7px 12px; border-radius: 8px;
  font-size: 14px; color: var(--muted); transition: color .22s var(--ease), background .22s var(--ease);
}
.lz-navlink:hover { color: var(--ink); background: rgba(12,12,13,0.045); }

.lz-nav-right { display: flex; align-items: center; gap: 9px; }
.lz-nav-cta {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap;
  padding: 9px 17px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  transition: background .24s var(--ease);
}
.lz-nav-cta:hover { background: #262629; }

/* Flex column with an explicit gap, not grid. A 3-child grid divides the
   button's full height into three rows and pushes the bars ~13px apart,
   which also breaks the X maths since the translate has to equal the real
   centre-to-centre distance. Here that distance is a known 5.5px
   (1.5px bar + 4px gap), so the arms meet exactly. */
.lz-burger {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 0;
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--line-2); cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease);
}
.lz-burger:hover { background: rgba(12,12,13,0.04); border-color: var(--line-strong); }
@media (min-width: 960px) { .lz-burger { display: none; } }
.lz-burger span {
  display: block; width: 16px; height: 1.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform .34s var(--ease), opacity .18s var(--ease);
}
.lz-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.lz-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.lz-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.lz-mobile {
  position: fixed; inset: 0 0 auto 0; z-index: 99; padding: 92px 22px 26px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transform: translateY(-110%); transition: transform .44s var(--ease);
}
.lz-mobile.open { transform: translateY(0); }
.lz-mobile a { display: block; padding: 15px 4px; font-size: 18px; border-bottom: 1px solid var(--line); color: var(--ink); }
.lz-mobile a:last-of-type { border-bottom: none; }

/* ============================================================
   HERO — the photograph is the background, full bleed and sharp.
   It feathers out at the bottom via a mask gradient so it melts
   into the paper instead of ending on a hard edge.
   ============================================================ */
.lz-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: min(880px, 92svh);
  padding: calc(var(--nav-h) + 72px) 0 128px;
  border-bottom: 0;
}
@media (max-width: 900px) {
  .lz-hero { min-height: auto; padding: calc(var(--nav-h) + 52px) 0 96px; }
}

.lz-hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: image-set(url("cloud-bg.webp") type("image/webp"), url("cloud-bg.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center 34%;
  /* Feathered bottom edge, anchored to the hero box (no transform on this
     layer, so the fade always lands exactly on the hero's bottom edge). */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0,0,0,0.55) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0,0,0,0.55) 78%, transparent 100%);
}
@media (max-width: 900px) {
  .lz-hero-bg {
    background-image: image-set(url("cloud-bg-m.webp") type("image/webp"), url("cloud-bg.jpg") type("image/jpeg"));
    background-position: center 28%;
  }
}

/* Legibility scrim. The photograph runs 116-222 in luminance, so its darker
   passages still sit under the 4.5:1 body-text threshold on their own. This
   lifts the left side where the copy sits and leaves the right of the frame
   open. Eased back from the first pass because the newer source is brighter. */
.lz-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(101deg,
      rgba(251,250,249,0.92) 0%,
      rgba(251,250,249,0.82) 28%,
      rgba(251,250,249,0.44) 52%,
      rgba(251,250,249,0.12) 76%,
      rgba(251,250,249,0.04) 100%),
    linear-gradient(to bottom, rgba(251,250,249,0.68) 0%, rgba(251,250,249,0) 20%);
}
@media (max-width: 900px) {
  .lz-hero-scrim {
    background:
      linear-gradient(to bottom,
        rgba(251,250,249,0.86) 0%,
        rgba(251,250,249,0.72) 42%,
        rgba(251,250,249,0.55) 100%);
  }
}

.lz-hero .hero-fade { display: none; }
.lz-hero-content { position: relative; z-index: 5; width: 100%; }
.hero-copy { max-width: 44rem; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 13px 6px 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--muted); margin-bottom: 26px;
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--success); flex-shrink: 0; }
.hero-badge-items { display: inline-flex; align-items: center; gap: 8px 11px; flex-wrap: wrap; }
.hero-badge-items span:not(:first-child) { position: relative; padding-left: 11px; }
.hero-badge-items span:not(:first-child)::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 999px; background: var(--muted-2);
}

/* Two lines max at every width. Wide container, restrained scale. */
.lz-h1 {
  font-size: clamp(36px, 4.9vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.038em;
  font-weight: 500;
  margin: 0;
  max-width: 19ch;   /* forces the two-line break at every width */
}
.lz-hero p.sub {
  margin-top: 26px; max-width: 52ch; font-size: clamp(16px, 1.6vw, 18.5px);
  line-height: 1.6; color: var(--muted); font-weight: 400;
}
.lz-hero .sub b { color: var(--ink); font-weight: 500; }
.hero-cta-row { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }

.hero-meta {
  margin-top: 30px; display: flex; flex-wrap: wrap; gap: 9px 24px;
  color: var(--muted-2); font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before {
  content: ''; width: 4px; height: 4px; border-radius: 999px; background: var(--accent); flex-shrink: 0;
}

.hero-chips { display: none; }

/* ============================================================
   PROOF RIBBON — real numbers, immediately after the hero.
   ============================================================ */
.proof-ribbon {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 860px) { .proof-ribbon { grid-template-columns: repeat(4, 1fr); } }
.proof-cell {
  padding: 30px 26px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.proof-cell:nth-child(2n) { border-right: 0; }
@media (min-width: 860px) {
  .proof-cell { border-bottom: 0; }
  .proof-cell:nth-child(2n) { border-right: 1px solid var(--line); }
  .proof-cell:last-child { border-right: 0; }
}
.proof-cell .n {
  font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.proof-cell .l { margin-top: 9px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.proof-cell .src {
  margin-top: 7px; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2);
}

/* ============================================================
   SOLUTIONS — divide-y rows, not a three-card grid.
   ============================================================ */
.card-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 680px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.solutions-list { border-top: 1px solid var(--line); }
.solutions-row {
  position: relative; display: grid; grid-template-columns: 46px 1fr auto; gap: 26px; align-items: start;
  padding: 34px 6px; border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.solutions-row:hover { background: rgba(12,12,13,0.018); padding-left: 14px; }
.solutions-row .ico {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: #fff; border: 1px solid var(--line-2); color: var(--ink); font-size: 19px;
}
.solutions-row .body { min-width: 0; }
.solutions-row h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.022em; margin: 0 0 8px; }
.solutions-row p { font-size: 15px; line-height: 1.62; color: var(--muted); margin: 0; max-width: 60ch; }
.solutions-row .go {
  align-self: center; display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; transition: color .24s var(--ease);
}
.solutions-row:hover .go { color: var(--accent); }
.solutions-row .go .arrow { transition: transform .28s var(--ease); }
.solutions-row:hover .go .arrow { transform: translateX(4px); }
@media (max-width: 720px) {
  .solutions-row { grid-template-columns: 40px 1fr; gap: 18px; padding: 26px 4px; }
  .solutions-row:hover { padding-left: 4px; }
  .solutions-row .go { grid-column: 2; margin-top: 14px; }
}

.lz-card {
  position: relative; padding: 28px; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.lz-card::before, .lz-card::after { display: none; }
.lz-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.lz-card .ico {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  margin-bottom: 18px; font-size: 19px;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink);
}
.lz-card h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; }
.lz-card p { font-size: 14.5px; line-height: 1.62; color: var(--muted); margin: 0; }
.lz-card .num {
  position: absolute; top: 22px; right: 24px;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; color: var(--muted-2);
}
.lz-card-cta {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
  padding: 0; background: none; border: 0;
  transition: color .24s var(--ease);
}
.lz-card-cta .arrow { transition: transform .28s var(--ease); }
.lz-card:hover .lz-card-cta, .solutions-row:hover .lz-card-cta { color: var(--accent); }
.lz-card:hover .lz-card-cta .arrow { transform: translateX(4px); }

.tilt { transform: none; transition: none; }
.tilt .lift { transform: none; }

/* ============================================================
   AI WORKFORCE ROSTER
   ============================================================ */
.agent-grid { display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 640px)  { .agent-grid { grid-template-columns: repeat(3, 1fr); } }
.agent {
  position: relative; padding: 24px 22px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: transparent; transition: background .3s var(--ease);
}
.agent::before { display: none; }
.agent:hover { background: #fff; }
.agent .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.agent .avatar {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; position: relative; overflow: hidden;
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 17px; color: var(--muted);
  background: var(--paper-2); border: 1px solid var(--line);
}
.agent .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.agent .status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-2);
}
.agent .status i { width: 5px; height: 5px; border-radius: 999px; background: var(--success); }
.agent .name { font-size: 16.5px; font-weight: 500; letter-spacing: -0.015em; }
.agent .role {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 4px;
}
.agent .desc { font-size: 13px; color: var(--muted); margin-top: 11px; line-height: 1.55; }

/* ============================================================
   METHOD / STEPS — numbered rail, not three equal cards
   ============================================================ */
.steps { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative; padding: 34px 28px 34px 0;
  background: transparent; border-bottom: 1px solid var(--line);
  transition: none;
}
@media (min-width: 900px) {
  .step { border-bottom: 0; border-right: 1px solid var(--line); padding: 34px 30px; }
  .step:first-child { padding-left: 0; }
  .step:last-child { border-right: 0; }
}
.step::before { display: none; }
.step:hover { transform: none; }
.step .step-n {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 500; font-size: 11px; letter-spacing: 0.14em; line-height: 1;
  color: var(--accent); background: none; -webkit-text-fill-color: currentColor;
}
.step h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; margin: 16px 0 9px; }
.step p { font-size: 14.5px; line-height: 1.62; color: var(--muted); margin: 0; }
.step .meta { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.step .meta .row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.step .meta .row b {
  color: var(--ink); font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; display: inline-flex; align-items: center;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.vs-wrap { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.vs-head, .vs-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr; align-items: stretch; }
.vs-head > div {
  padding: 15px 20px; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}
.vs-head .c-trad { color: var(--muted-2); }
.vs-head .c-lz { color: var(--accent); }
.vs-head .c-label { color: var(--muted-2); }
.vs-row > div {
  padding: 15px 20px; font-size: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.vs-row .c-trad { color: var(--muted); }
.vs-row .c-lz { color: var(--ink); background: rgba(194,65,12,0.028); }
.vs-row .c-lz::before, .vs-row .c-trad::before {
  content: ''; display: inline-block; width: 13px; height: 13px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.vs-row .c-lz::before {
  color: var(--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.vs-row .c-trad::before {
  color: var(--muted-2);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
@media (max-width: 720px) {
  .vs-head, .vs-row { grid-template-columns: 1fr 1fr; }
  .vs-head .c-label, .vs-row .c-label { display: none; }
}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industry-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
.industry {
  position: relative; padding: 32px; border-radius: 14px; overflow: hidden; min-height: 250px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #fff; border: 1px solid var(--line);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.industry::before, .industry::after { display: none; }
.industry:hover { transform: translateY(-3px); border-color: var(--line-2); }
.industry .tag {
  position: relative; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2);
}
.industry h3 { position: relative; font-size: 26px; font-weight: 500; letter-spacing: -0.026em; margin: 10px 0 8px; }
.industry p { position: relative; font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; max-width: 42ch; }
.industry .go { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--accent); }
.industry .go .arrow { transition: transform .3s var(--ease); }
.industry:hover .go .arrow { transform: translateX(4px); }
.industry-empty {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 22px 26px; border-radius: 12px; border: 1px dashed var(--line-2); background: var(--paper-2);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; cursor: pointer; background: none; border: none; color: var(--ink);
  padding: 24px 4px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: inherit; font-size: clamp(16px, 1.7vw, 18.5px); font-weight: 500; letter-spacing: -0.018em;
  transition: color .22s var(--ease);
}
.faq-q:hover { color: var(--accent); }
.faq-q .ic {
  flex-shrink: 0; width: 22px; height: 22px; position: relative; transition: transform .35s var(--ease);
}
.faq-q .ic::before, .faq-q .ic::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--muted); border-radius: 2px;
  transform: translate(-50%,-50%); transition: .35s var(--ease);
}
.faq-q .ic::before { width: 11px; height: 1.5px; }
.faq-q .ic::after { width: 1.5px; height: 11px; }
.faq-item.open .faq-q .ic { transform: rotate(180deg); }
.faq-item.open .faq-q .ic::after { opacity: 0; }
.faq-item.open .faq-q .ic::before { background: var(--accent); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease); }
.faq-a-inner { padding: 0 4px 24px; max-width: 74ch; font-size: 15.5px; line-height: 1.68; color: var(--muted); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta { position: relative; text-align: center; padding: 110px 0; overflow: hidden; border-top: 1px solid var(--line); }
.final-cta > * { position: relative; z-index: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.lz-footer { position: relative; border-top: 1px solid var(--line); padding: 62px 0 34px; background: var(--paper-2); }
.foot-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.foot-brand p { color: var(--muted); font-size: 13.5px; line-height: 1.62; max-width: 290px; margin: 15px 0 0; }
.foot-col h4 {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; font-weight: 500;
}
.foot-col a { display: block; padding: 5px 0; color: var(--muted); font-size: 13.5px; transition: color .22s var(--ease); }
.foot-col a:hover { color: var(--ink); }
.foot-bottom {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--muted-2);
}
.foot-social { display: flex; gap: 15px; align-items: center; }
.foot-social a { color: var(--muted); transition: color .22s var(--ease); }
.foot-social a:hover { color: var(--accent); }
.foot-social-icon {
  display: inline-block; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.foot-social-icon.li { -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/linkedin.svg"); mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/linkedin.svg"); }
.foot-social-icon.ig { -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/instagram.svg"); mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/instagram.svg"); }

/* ============================================================
   MOTION — entrance reveals only. Transform + opacity only.
   Values ported from Motion's spring feel into CSS easing.
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .06s; }
.reveal[data-d="2"] { transition-delay: .12s; }
.reveal[data-d="3"] { transition-delay: .18s; }
.reveal[data-d="4"] { transition-delay: .24s; }
.reveal[data-d="5"] { transition-delay: .30s; }
.reveal[data-d="6"] { transition-delay: .36s; }
.pulse { animation: none; }

/* ============================================================
   PAGE HERO (sub-pages)
   ============================================================ */
.page-hero { position: relative; padding: calc(var(--nav-h) + 72px) 0 34px; overflow: hidden; }
.page-hero .aurora span { display: none; }
.page-hero-inner { position: relative; z-index: 5; max-width: 860px; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  margin-bottom: 24px; transition: color .22s var(--ease);
}
.back-link:hover { color: var(--accent); }
.back-link .arrow { transition: transform .25s var(--ease); }
.back-link:hover .arrow { transform: translateX(-3px); }

/* ============================================================
   ATMOSPHERIC BAND — the photograph, full bleed, pre-blurred so
   the upscale is invisible and the softness reads as intentional.
   ============================================================ */
/* Atmospheric band. Soft-focus photograph, feathered top AND bottom via a mask
   gradient so it dissolves into the surrounding paper with no seam. No borders:
   a hairline would reintroduce exactly the hard cut the fade is removing. */
.atmos-band {
  position: relative; overflow: hidden;
  border: 0;
  background: transparent;
}
.atmos-band-img {
  position: absolute; inset: -14% 0 -14% 0;
  background-image: image-set(url("cloud-atmos.webp") type("image/webp"), url("cloud-atmos.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; will-change: transform;
}
/* Edge fade AND legibility wash in one layer, painted in the paper colour and
   anchored to the band (not to the image), so the parallax cannot drag the
   fade out of alignment. Opaque paper at both edges means the photograph
   dissolves into the surrounding white with no seam. */
.atmos-band::after {
  content: ''; position: absolute; inset: -1px 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg,
    var(--paper) 0%,
    rgba(251,250,249,0.92) 7%,
    rgba(251,250,249,0.62) 17%,
    rgba(251,250,249,0.44) 30%,
    rgba(251,250,249,0.44) 70%,
    rgba(251,250,249,0.62) 83%,
    rgba(251,250,249,0.92) 93%,
    var(--paper) 100%);
}
.atmos-band > .container { position: relative; z-index: 2; }

/* ============================================================
   ROI CALCULATOR / DEMO CHROME (sub-pages)
   ============================================================ */
.slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: var(--paper-3); border-radius: 999px; outline: none; cursor: pointer;
}
.slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 50%), var(--paper-3) var(--fill, 50%)); }
.slider::-moz-range-track { height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 50%), var(--paper-3) var(--fill, 50%)); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 999px;
  background: #fff; cursor: grab; margin-top: -7px; border: 1px solid var(--line-strong);
  box-shadow: 0 1px 3px rgba(12,12,13,0.16); transition: transform .15s var(--ease);
}
.slider::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
.slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: #fff;
  cursor: grab; border: 1px solid var(--line-strong); box-shadow: 0 1px 3px rgba(12,12,13,0.16); }
.loss-bar { height: 6px; background: var(--paper-3); border-radius: 999px; overflow: hidden; position: relative; }
.loss-bar-fill { height: 100%; background: var(--danger); border-radius: 999px;
  transition: width .4s var(--ease); box-shadow: none; }

.auto-tab { cursor: pointer; transition: all .3s var(--ease); position: relative; background: transparent; border: 1px solid var(--line); border-radius: 10px; }
.auto-tab.active { background: #fff; border-color: var(--line-strong); }
.auto-tab.active .tab-num { color: var(--accent); }
.auto-tab:hover:not(.active) { background: rgba(12,12,13,0.02); }
.auto-tab.active::after { display: none; }
.tab-num { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; color: var(--muted-2); transition: color .3s var(--ease); }
.panel { display: none; animation: fadeIn .4s var(--ease); }
.panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.timestamp { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--danger); display: inline-flex; align-items: center; gap: 8px; }
.timestamp::before { content: ''; width: 4px; height: 4px; border-radius: 999px; background: var(--danger); }
.cost-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2);
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }
.step-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink); }
.step-pill .num { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: var(--accent); letter-spacing: 0.1em; }
.check-icon { width: 14px; height: 14px; border-radius: 999px; background: rgba(31,111,67,0.1);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(31,111,67,0.28); color: var(--success); }
.demo-frame { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.ai-bubble { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px 12px 12px 4px; }
.customer-bubble, .patient-bubble { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px 12px 4px 12px; }
.quote-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.quote-line:last-child { border-bottom: none; }
.invoice-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; }
.crm-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.crm-row:last-child { border-bottom: none; }
.crm-key { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); padding-top: 2px; }
.schedule-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.schedule-item:last-child { border-bottom: none; }
.dot-success { width: 5px; height: 5px; border-radius: 999px; background: var(--success); flex-shrink: 0; }
.dot-pending { width: 5px; height: 5px; border-radius: 999px; background: var(--accent); flex-shrink: 0; }
.dot-recovered { width: 5px; height: 5px; border-radius: 999px; background: var(--info); flex-shrink: 0; }
.status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 999px; background: currentColor; margin-right: 3px; }
.progress-track { display: flex; gap: 4px; margin-top: 12px; }
.progress-cell { flex: 1; height: 4px; background: var(--paper-3); border-radius: 999px; }
.progress-cell.done { background: var(--accent); }
.star { color: var(--accent); }
.photo-tile { aspect-ratio: 1; border-radius: 9px; background: var(--paper-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.09em; color: var(--muted-2); text-transform: uppercase; }

/* ===== BENEFITS ===== */
.benefit-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px;
  transition: border-color .3s var(--ease); position: relative; overflow: hidden; }
.benefit-card::before, .benefit-card::after { display: none; }
.benefit-card:hover { transform: none; border-color: var(--line-2); }
.benefit-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 17px; color: var(--ink); }

/* ===== COMPARE TABLE (sub-pages) ===== */
.compare-row { display: grid; grid-template-columns: 1fr repeat(3, 72px); gap: 0; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; font-size: 13px; }
.compare-row:last-child { border-bottom: none; }
.compare-row .cell { text-align: center; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.compare-row .cell.yes { color: var(--accent); }
.compare-row .cell.no { color: var(--muted-2); }
.compare-row .cell.partial { color: var(--muted); }
.compare-header { display: grid; grid-template-columns: 1fr repeat(3, 72px); gap: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.compare-header .col-label { text-align: center; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted-2); }
.compare-header .col-label.highlight { color: var(--accent); }
.compare-inner { min-width: 520px; }
@media (max-width: 640px) {
  .compare-inner { min-width: 0; }
  .compare-row, .compare-header { grid-template-columns: 1fr repeat(3, 44px); column-gap: 4px; }
  .compare-row { font-size: 11.5px; padding: 10px 0; line-height: 1.3; }
  .compare-row .cell { font-size: 9.5px !important; }
  .compare-header .col-label { font-size: 8px; letter-spacing: 0.03em; }
}

/* ===== PRICING ===== */
.pricing-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px; transition: border-color .35s var(--ease); overflow: hidden; }
.pricing-card::before { display: none; }
.pricing-card.featured { border-color: var(--line-strong); background: #fff; }
.pricing-card:hover { transform: none; border-color: var(--line-2); }
.pricing-card.featured:hover { box-shadow: none; }
.price-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.price-badge.popular { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
.price-badge.starter { background: var(--paper-2); border: 1px solid var(--line); color: var(--muted); }
.price-badge.enterprise { background: var(--paper-2); border: 1px solid var(--line); color: var(--info); }
.pricing-line-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.pricing-line-item .tick { width: 15px; height: 15px; border-radius: 999px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: 9px; }
.pricing-line-item .tick.gold { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
.pricing-line-item .tick.dim { background: var(--paper-2); border: 1px solid var(--line); color: var(--muted-2); }
.pricing-line-item.active { color: var(--ink); }
.pricing-btn { width: 100%; padding: 13px; border-radius: 999px; font-size: 14.5px; font-weight: 500; letter-spacing: -0.011em; text-align: center; transition: all .24s var(--ease); cursor: pointer; display: block; text-decoration: none; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal { position: relative; padding: calc(var(--nav-h) + 60px) 0 40px; }
.legal-wrap { max-width: 760px; margin: 0 auto; }
.legal .updated { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.legal-note { margin: 24px 0 36px; padding: 18px 20px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.62; color: var(--muted); }
.legal-body h2 { font-size: 21px; letter-spacing: -0.024em; font-weight: 500; margin: 40px 0 13px; }
.legal-body h2 .n { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--accent); margin-right: 11px; }
.legal-body h3 { font-size: 16px; font-weight: 500; margin: 22px 0 8px; color: var(--ink); }
.legal-body p, .legal-body li { font-size: 15px; line-height: 1.72; color: var(--muted); }
.legal-body p { margin: 0 0 13px; }
.legal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-body ul { margin: 0 0 15px; padding-left: 19px; }
.legal-body li { margin-bottom: 7px; }
.legal-body li::marker { color: var(--muted-2); }
.legal-body strong { color: var(--ink); font-weight: 500; }
.legal-body .divider { margin: 36px 0; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lz-hero-bg, .atmos-band-img { transform: none !important; }
  .panel { animation: none; }
}

/* ============================================================
   BLOG — editorial index + article. Institutional reference feel.
   ============================================================ */
.blog-main { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 40px; position: relative; z-index: 1; }
.blog-head { text-align: left; max-width: 720px; margin: 0 0 48px; }
.blog-head h1 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; margin: 14px 0 0; }
.blog-head p { color: var(--muted); font-size: 17px; line-height: 1.62; margin-top: 18px; max-width: 60ch; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  position: relative; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: transparent; overflow: hidden;
  transition: background .3s var(--ease);
}
.blog-card::before { display: none; }
.blog-card:hover { transform: none; box-shadow: none; background: #fff; }
.blog-card-img { aspect-ratio: 1200 / 630; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.blog-card:hover .blog-card-img img { transform: scale(1.03); }
.blog-card-body { padding: 22px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.blog-tag { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.blog-card h2 {
  font-size: 1.06rem; font-weight: 500; letter-spacing: -0.022em; line-height: 1.32; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.blog-card p { color: var(--muted); font-size: 13.5px; line-height: 1.6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.blog-card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--muted-2);
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase;
  transition: color .24s var(--ease); }
.blog-card:hover .blog-card-more { color: var(--accent); }
.blog-card-more .arrow { transition: transform .28s var(--ease); }
.blog-card:hover .blog-card-more .arrow { transform: translateX(3px); }

/* Lead article on the blog index: one large editorial slot above the grid. */
.blog-lead {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: #fff; margin-bottom: 42px; transition: border-color .35s var(--ease);
}
.blog-lead:hover { border-color: var(--line-2); }
.blog-lead-media { position: relative; min-height: 280px; background: var(--paper-2); border-right: 1px solid var(--line); overflow: hidden; }
.blog-lead-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.blog-lead:hover .blog-lead-media img { transform: scale(1.03); }
.blog-lead-body { padding: 36px 38px; display: flex; flex-direction: column; gap: 13px; justify-content: center; }
.blog-lead-body h2 { font-size: clamp(21px, 2.3vw, 29px); font-weight: 500; letter-spacing: -0.028em; line-height: 1.18; }
.blog-lead-body p { color: var(--muted); font-size: 15px; line-height: 1.62; }
@media (max-width: 820px) {
  .blog-lead { grid-template-columns: 1fr; }
  .blog-lead-media { min-height: 0; aspect-ratio: 16/9; border-right: 0; border-bottom: 1px solid var(--line); }
  .blog-lead-body { padding: 26px 24px; }
}

.post-main { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 20px; position: relative; z-index: 1; }
.post-wrap { max-width: 720px; margin: 0 auto; }
.post-back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 26px; transition: color .22s var(--ease); }
.post-back:hover { color: var(--accent); }
.post-meta { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; color: var(--muted-2); font-size: 12.5px; margin-bottom: 15px; }
.post-meta .tag { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); font-size: 10px; }
.post-wrap h1 { font-size: clamp(28px, 3.8vw, 44px); font-weight: 500; letter-spacing: -0.034em; line-height: 1.1; margin: 0 0 24px; }
.post-cover { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin: 0 0 36px; }
.post-cover img { width: 100%; display: block; }
.post-body { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.post-body p { margin: 0 0 22px; }
.post-body h2 { font-size: 1.45rem; font-weight: 500; letter-spacing: -0.026em; color: var(--ink); margin: 44px 0 15px; }
.post-body h3 { font-size: 1.13rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 32px 0 11px; }
.post-body strong { color: var(--ink); font-weight: 500; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 20px; }
.post-body li { margin-bottom: 9px; }
.post-body li::marker { color: var(--muted-2); }
.post-body a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body a.btn-primary, .post-body a.btn-primary:visited { color: var(--paper); text-decoration: none; }
/* Wide tables scroll inside themselves. The page body must never scroll
   horizontally, so the table becomes its own overflow container rather than
   forcing the document wide on narrow screens. */
.post-body table {
  width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14.5px;
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.post-body table tbody, .post-body table thead { display: table; width: 100%; min-width: 460px; }
.post-body table tbody { border-top: 0; }
.post-body th { text-align: left; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.post-body td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.post-body td:first-child { color: var(--ink); }
.post-lead { font-size: 19px; line-height: 1.62; color: var(--muted); margin-bottom: 30px; }
.pull-stat { margin: 32px 0; padding: 26px 28px; border-radius: 12px; border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--paper-2); }
.pull-stat .n { font-family: 'Geist', sans-serif; font-weight: 500; font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1;
  letter-spacing: -0.04em; color: var(--ink); background: none; -webkit-text-fill-color: currentColor; font-variant-numeric: tabular-nums; }
.pull-stat .t { margin-top: 10px; color: var(--muted); font-size: 14.5px; }
.post-cta { margin: 44px 0 10px; padding: 30px; border-radius: 14px; text-align: left; border: 1px solid var(--line); background: var(--paper-2); }
.post-cta h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.024em; margin: 0 0 9px; }
.post-cta p { color: var(--muted); margin: 0 0 20px; font-size: 15px; }
.post-sources { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted-2); }
.post-sources h4 { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 500; }
.post-sources ul { margin: 0; padding-left: 17px; }
.post-sources li { margin-bottom: 6px; }
.post-sources a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.post-sources a:hover { color: var(--accent); }

/* Table of contents rail for long-form articles */
.post-toc { margin: 0 0 34px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.post-toc h4 { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 12px; font-weight: 500; }
.post-toc ol { margin: 0; padding-left: 18px; }
.post-toc li { margin-bottom: 7px; font-size: 14px; }
.post-toc a { color: var(--muted); transition: color .2s var(--ease); }
.post-toc a:hover { color: var(--accent); }

/* Key-takeaways block — the answer-engine friendly summary */
.key-takeaways { margin: 0 0 34px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; }
.key-takeaways h4 { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); margin: 0 0 13px; font-weight: 500; }
.key-takeaways ul { margin: 0; padding-left: 18px; }
.key-takeaways li { margin-bottom: 9px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-main { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 40px; position: relative; z-index: 1; }
.about-head { text-align: left; max-width: 720px; margin: 0 0 52px; }
.about-head h1 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; margin: 14px 0 0; }
.about-head p { color: var(--muted); font-size: 17px; line-height: 1.62; margin-top: 18px; max-width: 60ch; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; max-width: 700px; } }
@media (max-width: 620px) { .team-grid { grid-template-columns: 1fr; max-width: 380px; } }
.team-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; transition: border-color .35s var(--ease); }
.team-card::before { display: none; }
.team-card:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
.team-photo { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.02); transition: filter .5s var(--ease); }
.team-card:hover .team-photo img { filter: grayscale(0.15) contrast(1); }
.team-initials { font-family: 'Geist', sans-serif; font-weight: 500; font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1;
  color: var(--muted-2); background: none; -webkit-text-fill-color: currentColor; }
.team-photo-note { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2); }
.team-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 7px; }
.team-name { font-family: 'Geist', sans-serif; font-size: 1.13rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.team-role { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); }
.team-bio { color: var(--muted); font-size: 14px; line-height: 1.62; margin-top: 6px; }

/* ============================================================
   RESULTS / TESTIMONIALS
   ============================================================ */
.testimonial-card {
  position: relative; display: grid; grid-template-columns: 280px 1fr; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: #fff; transition: border-color .35s var(--ease);
}
.testimonial-card::before { display: none; }
.testimonial-card:hover { border-color: var(--line-2); }
.testimonial-media { position: relative; min-height: 220px; background: var(--paper-2); border-right: 1px solid var(--line); }
.testimonial-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonial-body { padding: 30px 34px; display: flex; flex-direction: column; gap: 15px; justify-content: center; }
.testimonial-logo { height: 18px; width: auto; opacity: 0.75; align-self: flex-start; filter: grayscale(1); }
.testimonial-quote { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); }
.testimonial-attrib { font-size: 13px; color: var(--muted); }
.testimonial-attrib strong { color: var(--ink); font-weight: 500; }
.testimonial-stats { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 2px; }
.testimonial-stats .stat .n { font-family: 'Geist', sans-serif; font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1;
  letter-spacing: -0.035em; color: var(--ink); background: none; -webkit-text-fill-color: currentColor; font-variant-numeric: tabular-nums; }
.testimonial-stats .stat .l { margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.testimonial-more { margin-top: 4px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted);
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; width: fit-content;
  transition: color .24s var(--ease); }
.testimonial-card:hover .testimonial-more { color: var(--accent); }
.testimonial-more .arrow { transition: transform .28s var(--ease); }
.testimonial-card:hover .testimonial-more .arrow { transform: translateX(3px); }
.testimonial-card.featured { box-shadow: none; }
.testimonial-card.featured .testimonial-body { padding: 38px 40px; gap: 19px; }
.testimonial-card.featured .testimonial-quote { font-size: 18px; }
.testimonial-card.featured .testimonial-stats { gap: 38px; margin-top: 5px; }
.testimonial-card.featured .testimonial-stats .stat .n { font-size: clamp(1.7rem, 2.8vw, 2.15rem); }
@media (max-width: 720px) {
  .testimonial-card { grid-template-columns: 1fr; }
  .testimonial-media { aspect-ratio: 16/9; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .testimonial-body, .testimonial-card.featured .testimonial-body { padding: 26px 22px; }
}

.result-head, .result-row { display: grid; grid-template-columns: 1fr 88px 88px; column-gap: 10px; align-items: center; }
.result-head { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.result-head span { text-align: center; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted-2); }
.result-head span:first-child { text-align: left; }
.result-row { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.result-row:last-child { border-bottom: none; }
.result-row .lbl { color: var(--ink-2); }
.result-row .before, .result-row .after { text-align: center; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
.result-row .before { color: var(--muted-2); }
.result-row .after { color: var(--accent); font-weight: 500; }
@media (max-width: 480px) {
  .result-head, .result-row { grid-template-columns: 1fr 62px 62px; column-gap: 6px; }
  .result-row { font-size: 12.5px; }
  .result-row .before, .result-row .after { font-size: 11px; }
}
.result-revenue { margin: 28px 0; padding: 26px 28px; border-radius: 12px; text-align: left;
  border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--paper-2); }
.result-revenue .n { font-family: 'Geist', sans-serif; font-weight: 500; font-size: clamp(2rem, 4.4vw, 2.8rem); line-height: 1;
  letter-spacing: -0.04em; color: var(--ink); background: none; -webkit-text-fill-color: currentColor; font-variant-numeric: tabular-nums; }
.result-revenue .t { margin-top: 9px; color: var(--muted); font-size: 14px; }

.stat-list { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.stat-list li { padding: 16px 0; border-bottom: 1px solid var(--line); background: none; border-radius: 0; }
.stat-list strong { color: var(--ink); font-weight: 500; }
.stat-source { display: block; margin-top: 6px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted-2); }
.stat-toc { display: flex; flex-wrap: wrap; gap: 9px 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.stat-toc a { color: var(--accent); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   ICONS
   ============================================================ */
.icon {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}