/* ===================================================================
   Klaai marketing surface — index / claude / developers / terms /
   privacy / contact. Loaded on top of css/style.css; every rule here
   is scoped under body.marketing so the app dashboard and auth screens
   (which load style.css but not this file) are unaffected.

   Type system: one family — Geist — carries display AND body copy, in a
   full weight range (300-800). A display face paired with a system-font
   body was the single biggest thing making the page read as templated;
   committing one well-tuned family with real weight/size contrast (the
   way Vercel's own site uses Geist) reads as considered, not indecisive.
   Geist Mono stands in for the OS monospace stack in the ledger/receipt
   mockups. The existing color tokens from style.css are untouched —
   brand identity, not up for renegotiation here.
   =================================================================== */

body.marketing {
  --font-display: "Bricolage Grotesque", var(--font);
  --font-body: "Geist", var(--font);
  --font-mono-mk: "Geist Mono", var(--mono);

  /* Fluid modular scale, ~1.3x between steps. Hero tops out at 4.75rem
     (76px) — well under the point where a headline starts shouting. */
  --mk-h1: clamp(2.75rem, 2.15rem + 2.6vw, 4.75rem);
  --mk-h2: clamp(2rem, 1.72rem + 1.2vw, 2.85rem);
  --mk-h3: clamp(1.3rem, 1.22rem + 0.35vw, 1.55rem);
  --mk-h4: clamp(1.05rem, 1.01rem + 0.15vw, 1.15rem);
  --mk-lede: clamp(1.15rem, 1.08rem + 0.3vw, 1.375rem);
  --mk-body: 17px;
  --mk-small: 14px;

  font-family: var(--font-body);
  font-size: var(--mk-body);
  line-height: 1.65;
  font-feature-settings: "ss01" 1;
}

body.marketing h1,
body.marketing h2,
body.marketing h3,
body.marketing h4 {
  font-family: var(--font-display);
  font-weight: 640;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

body.marketing p,
body.marketing li {
  text-wrap: pretty;
}

body.marketing .nav-links,
body.marketing .btn {
  font-family: var(--font-body);
}

body.marketing .brand {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Premium hover states — a small lift, never a bounce. Zeroed globally
   for reduced motion below. */
body.marketing .btn {
  transition: transform 0.18s cubic-bezier(.16,1,.3,1), box-shadow 0.22s cubic-bezier(.16,1,.3,1),
              background 0.15s, border-color 0.15s;
}
body.marketing .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(14, 117, 104, 0.5);
}
body.marketing .btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(22, 33, 31, 0.18);
}

/* ============ Nav ============
   Sticky with a soft blur — a floating instrument rather than a plain
   static bar, the way Linear/Vercel/Raycast navs read as a considered
   surface instead of default browser chrome. */
body.marketing .nav {
  max-width: 1160px;
  padding: 20px 24px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 252, 251, 0.78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
body.marketing .nav-links {
  gap: 30px;
}
body.marketing .nav-links a {
  position: relative;
  padding: 4px 0;
  font-weight: 500;
}
body.marketing .nav-links .btn-ghost {
  border-color: var(--line);
}
body.marketing .nav-links .btn {
  padding: 10px 22px;
  font-weight: 600;
}
body.marketing .nav-links .btn-primary {
  padding: 10px 24px;
  box-shadow: 0 6px 16px -8px rgba(14, 117, 104, 0.55);
}
@media (max-width: 620px) {
  body.marketing .nav {
    padding: 14px 16px;
  }
  body.marketing .brand span:last-child {
    display: none;
  }
  body.marketing .nav-links {
    gap: 8px;
  }
  body.marketing .nav-links .btn {
    padding: 8px 14px;
    font-size: 13.5px;
  }
  body.marketing .nav-links .btn-primary {
    padding: 8px 16px;
  }
}
body.marketing .nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--accent);
  transition: right 0.22s cubic-bezier(.16,1,.3,1);
}
body.marketing .nav-links a:not(.btn):hover::after {
  right: 0;
}
body.marketing .nav-links a.active::after {
  right: 0;
  background: var(--ink-3);
}

/* ============ Hero kicker (replaces pill/eyebrow badge chrome) ============ */
body.marketing .hero-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
}

/* ============ Hero band (index.php) ============
   A full-bleed accent-soft wash behind the hero — the same existing token
   used everywhere else as a small badge tint, here spread across the whole
   first fold so the accent color actually owns a share of the page instead
   of appearing only in buttons and pills. Clipped so the layered visual
   stack (which intentionally bleeds past its column) never escapes the
   band's own edge. */
body.marketing .hero-band {
  background:
    radial-gradient(ellipse 720px 480px at 82% 8%, rgba(14, 117, 104, 0.10), transparent 68%),
    var(--accent-soft);
  overflow: hidden;
}

/* ============ Asymmetric hero (index.php) ============
   Copy sits in a narrower, left-weighted column; the product visual owns
   the wider share and is allowed to bleed toward the edge, breaking the
   symmetric text-left/image-right template. */
body.marketing .hero-stage {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) 32px clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
body.marketing .hero-copy h1 {
  font-size: var(--mk-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 750;
  animation: mkRise 0.7s cubic-bezier(.16, 1, .3, 1) both;
}
body.marketing .hero-copy h1 em {
  font-style: normal;
  color: var(--accent);
}
body.marketing .hero-copy .hero-kicker {
  animation: mkRise 0.6s cubic-bezier(.16, 1, .3, 1) both;
}
body.marketing .hero-copy .lede {
  font-family: var(--font-body);
  font-size: var(--mk-lede);
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 26px;
  max-width: 42ch;
  animation: mkRise 0.7s cubic-bezier(.16, 1, .3, 1) 0.08s both;
}
body.marketing .hero-copy .hero-cta {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  animation: mkRise 0.7s cubic-bezier(.16, 1, .3, 1) 0.16s both;
}
body.marketing .hero-proof {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 500;
  animation: mkRise 0.7s cubic-bezier(.16, 1, .3, 1) 0.22s both;
}
body.marketing .hero-proof span {
  position: relative;
  padding-left: 16px;
}
body.marketing .hero-proof span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
body.marketing .hero-proof span:first-child {
  padding-left: 0;
}
body.marketing .hero-proof span:first-child::before {
  display: none;
}

/* --- the layered visual stack --- */
body.marketing .hero-visual {
  position: relative;
  animation: mkRise 0.8s cubic-bezier(.16, 1, .3, 1) 0.24s both;
}
/* A second, quieter card peeking from behind — depth without clutter.
   Rotated a couple of degrees off-axis so it reads as a real object sitting
   underneath the primary mock, not a drop shadow. */
body.marketing .hero-card-back {
  position: absolute;
  top: -34px;
  right: -22px;
  width: 78%;
  max-width: 360px;
  transform: rotate(3.5deg);
  z-index: 1;
  opacity: 0.92;
}
body.marketing .hero-card-back .mock {
  box-shadow: 0 18px 40px -18px rgba(22, 33, 31, 0.22);
}
body.marketing .hero-card-back .mock-body {
  padding: 16px 18px 18px;
}
body.marketing .mini-tb {
  display: grid;
  gap: 7px;
}
body.marketing .mini-tb-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-2);
}
body.marketing .mini-tb-row span:last-child {
  font-family: var(--font-mono-mk);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body.marketing .mini-tb-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--accent-dark);
}
body.marketing .mini-tb-total span:last-child {
  font-family: var(--font-mono-mk);
}

/* The primary chat mock, offset in front of and below the peeking card. */
body.marketing .hero-card-front {
  position: relative;
  z-index: 2;
  margin: 46px 0 0 0;
}
body.marketing .hero-card-front .mock {
  max-width: none;
  box-shadow: 0 30px 70px -22px rgba(14, 117, 104, 0.32), 0 12px 32px rgba(22, 33, 31, 0.09);
}

@keyframes mkRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  body.marketing .hero-stage {
    grid-template-columns: 1fr;
    text-align: left;
  }
  body.marketing .hero-visual {
    order: 2;
    margin-top: 12px;
  }
  body.marketing .hero-card-back {
    display: none;
  }
  body.marketing .hero-card-front {
    margin-top: 0;
  }
}

/* ============ Narrow hero (claude.php / developers.php / contact.php) ============ */
body.marketing .hero-narrow h1 {
  font-size: var(--mk-h1);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.15;
}
body.marketing .hero-narrow h1 em {
  font-style: normal;
  color: var(--accent);
}
body.marketing .hero-sub {
  font-family: var(--font-body);
}

/* ============ Section rhythm ============
   Generous, varied vertical space instead of the flat 64px the shared
   .section rule uses everywhere — headroom is part of what makes a page
   feel considered rather than templated. */
body.marketing .section {
  padding-top: clamp(64px, 9vw, 128px);
  padding-bottom: clamp(64px, 9vw, 128px);
}

/* ============ Section headings ============ */
body.marketing .section-head h2 {
  font-size: var(--mk-h2);
  font-weight: 600;
}
body.marketing .section-more {
  text-align: center;
  margin-top: clamp(36px, 5vw, 56px);
}

/* ============ Chapter flow — "Tell it what happened" (index.php) ============
   Three alternating rows instead of three equal cards: each workflow gets its
   own small, distinct mock rather than an icon+heading+text tile identical to
   its neighbours. A single connecting line runs down the center, threading the
   chapters together — the "flow from one workflow to the next" the copy
   promises structurally, not just typographically. */
body.marketing .chapter-flow {
  position: relative;
  display: grid;
  gap: clamp(56px, 8vw, 96px);
  margin-top: 8px;
}
body.marketing .chapter-flow::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  background: linear-gradient(var(--line), var(--line) 70%, transparent);
  z-index: 0;
}
@media (max-width: 780px) {
  body.marketing .chapter-flow::before { display: none; }
}
body.marketing .chapter-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
body.marketing .chapter-row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media (max-width: 780px) {
  body.marketing .chapter-row::before { display: none; }
}
body.marketing .chapter-row.reverse .chapter-copy { order: 2; }
body.marketing .chapter-copy {
  max-width: 42ch;
}
body.marketing .chapter-row.reverse .chapter-copy {
  justify-self: end;
  text-align: right;
  margin-left: auto;
}
body.marketing .chapter-eyebrow {
  display: block;
  font-family: var(--font-mono-mk);
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 10px;
}
body.marketing .chapter-copy h3 {
  font-size: var(--mk-h3);
  font-weight: 600;
  margin-bottom: 10px;
}
body.marketing .chapter-copy p {
  color: var(--ink-2);
  font-size: 15.5px;
}
body.marketing .chapter-visual {
  position: relative;
}
body.marketing .chapter-row.reverse .chapter-visual {
  grid-row: 1;
}

/* Chapter 1 — bulk intake: a compact file list, each row ticked off. */
body.marketing .intake-mock .mock-body {
  padding: 8px 0;
  display: grid;
  gap: 0;
}
body.marketing .intake-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
body.marketing .intake-row:last-child { border-bottom: 0; }
body.marketing .intake-row i.ph { color: var(--ink-3); font-size: 15px; }
body.marketing .intake-row .name { flex: 1; color: var(--ink); }
body.marketing .intake-row .intake-stat { color: var(--accent-dark); font-weight: 600; font-size: 12px; }

/* Chapter 2 — a phone-shaped mock: receipt in, one-line reply out. */
body.marketing .phone-mock {
  width: 220px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 0 20px 46px -20px rgba(22, 33, 31, 0.22);
  padding: 10px;
}
body.marketing .chapter-row.reverse .phone-mock {
  margin-left: 0;
  margin-right: auto;
}
body.marketing .phone-notch {
  width: 50px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  margin: 0 auto 10px;
}
body.marketing .phone-receipt {
  background: #fffdf5;
  border: 1px solid #e8e2cf;
  border-radius: 6px;
  padding: 12px 10px;
  font-family: var(--font-mono-mk);
  font-size: 10.5px;
  color: #6b6a5c;
  text-align: center;
  transform: rotate(-1deg);
}
body.marketing .phone-receipt strong { display: block; color: #3a3a33; font-size: 11px; margin-bottom: 4px; }
body.marketing .phone-reply {
  margin-top: 10px;
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 12px;
  color: var(--accent-dark);
  font-weight: 500;
}

/* Chapter 3 — many clients: a stack of company rows, each with its own status. */
body.marketing .clients-mock .mock-body {
  padding: 10px;
  display: grid;
  gap: 8px;
}
body.marketing .client-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 12.5px;
}
body.marketing .client-row .client-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
body.marketing .client-row.done .client-dot { background: var(--green); }
body.marketing .client-row.pending .client-dot { background: var(--amber); }
body.marketing .client-row .client-name { flex: 1; color: var(--ink); font-weight: 500; }
body.marketing .client-row .st { color: var(--ink-2); font-size: 11.5px; }

@media (max-width: 780px) {
  body.marketing .chapter-row,
  body.marketing .chapter-row.reverse .chapter-copy {
    grid-template-columns: 1fr;
    text-align: left;
    justify-self: stretch;
    margin-left: 0;
  }
  body.marketing .chapter-row { grid-template-columns: 1fr; }
  body.marketing .chapter-row.reverse .chapter-copy { order: 0; }
  body.marketing .chapter-row.reverse .chapter-visual { grid-row: auto; }
  body.marketing .phone-mock { margin: 0 auto; }
}

/* ============ Ledger list — replaces repeated icon+card grids ============
   A hairline-divided list of rows (icon / heading+copy), evoking a chart of
   accounts rather than a wall of identical bordered boxes. Used once per
   page at most, for the section that's genuinely an enumerable list. */
body.marketing .ledger-list {
  border-top: 1px solid var(--line);
}
body.marketing .ledger-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  align-items: start;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}
body.marketing .ledger-row .ico {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
body.marketing .ledger-row h3 {
  font-size: var(--mk-h3);
  font-weight: 700;
  margin-bottom: 4px;
}
body.marketing .ledger-row p {
  color: var(--ink-2);
  font-size: 15px;
  max-width: 62ch;
}
@media (max-width: 620px) {
  body.marketing .ledger-row {
    grid-template-columns: 40px 1fr;
    gap: 14px;
  }
}

/* ============ Guided walkthrough — "Invoices, receipts..." (index.php) ============
   A large product frame with floating annotations on one side, a compact
   spec list on the other — a walkthrough of the two most visual features
   (invoices, tax handling) instead of six identical icon rows. Deliberately
   NOT the shared .ledger-list component (that stays exactly as-is for the
   Claude page's trust section) — this section earns its own composition. */
body.marketing .walkthrough {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
  margin-top: 12px;
}
body.marketing .walkthrough-panel,
body.marketing .spec-list {
  /* Grid items default to min-width:auto, which lets a wide child (the
     product table) blow out the track instead of shrinking to fit —
     the classic CSS Grid overflow trap. */
  min-width: 0;
}
body.marketing .walkthrough-panel {
  position: relative;
  margin: 18px 0;
}
body.marketing .product-frame {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 24px 60px -28px rgba(22, 33, 31, 0.28), 0 4px 14px rgba(22, 33, 31, 0.05);
  overflow: hidden;
}
body.marketing .product-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  background: #f4f8f7;
  border-bottom: 1px solid var(--line);
}
body.marketing .pf-dot { width: 9px; height: 9px; border-radius: 50%; background: #d6e0de; }
body.marketing .pf-title { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
body.marketing .product-table-scroll { overflow-x: auto; }
body.marketing table.product-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 13.5px; }
body.marketing table.product-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-2); font-weight: 600; padding: 12px 18px 8px;
}
body.marketing table.product-table th.r { text-align: right; }
body.marketing table.product-table td { padding: 11px 18px; border-top: 1px solid var(--line); vertical-align: middle; }
body.marketing table.product-table td.r { text-align: right; font-family: var(--font-mono-mk); font-variant-numeric: tabular-nums; color: var(--ink); }
body.marketing .product-frame-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: #fcfdfd;
  font-size: 12.5px;
  color: var(--ink-2);
}
body.marketing .product-frame-foot .balance-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-dark);
  font-weight: 600;
}

/* Floating annotations — small labelled callouts breaking off the panel's
   edge, the "here's what's actually happening" layer over the mock. */
body.marketing .annotation {
  position: absolute;
  width: 196px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  box-shadow: 0 14px 30px -14px rgba(22, 33, 31, 0.22);
  font-size: 12.5px;
  line-height: 1.45;
}
body.marketing .annotation strong {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
body.marketing .annotation span {
  color: var(--ink-2);
}
body.marketing .annotation-1 {
  top: -34px;
  right: -46px;
}
body.marketing .annotation-2 {
  bottom: -88px;
  left: -20px;
}
@media (max-width: 1150px) {
  body.marketing .annotation-1 { right: -12px; }
  body.marketing .annotation-2 { left: -8px; }
}
@media (max-width: 900px) {
  body.marketing .walkthrough { grid-template-columns: 1fr; }
  body.marketing .walkthrough-panel { margin: 0 0 110px; }
  body.marketing .annotation { width: min(240px, 76vw); }
  body.marketing .annotation-1 { top: auto; bottom: -96px; right: 4px; }
  body.marketing .annotation-2 { bottom: -190px; left: 4px; }
}
@media (max-width: 460px) {
  body.marketing .annotation { position: static; width: auto; margin-top: 12px; }
  body.marketing .walkthrough-panel { margin-bottom: 0; }
}

/* The spec list — a compact, numbered two-column register of the six
   things, paired alongside the panel rather than spanning full width. */
body.marketing .spec-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  align-self: start;
}
body.marketing .spec-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}
body.marketing .spec-n {
  font-family: var(--font-mono-mk);
  font-size: 12px;
  color: var(--ink-2);
  padding-top: 3px;
}
body.marketing .spec-row h3 {
  font-size: var(--mk-h4);
  font-weight: 600;
  margin-bottom: 4px;
}
body.marketing .spec-row p {
  color: var(--ink-2);
  font-size: 14px;
  max-width: 46ch;
}

/* ============ Flow band — "Claude does the books" (index.php) ============
   A dedicated dark section — the one deliberate departure from the page's
   light palette, reserved for the section that's literally about the
   ledger's rigor. Three stages connected by a rail with a slow-travelling
   pulse showing the direction of the flow: records → verifies → approve. */
body.marketing .flow-band {
  max-width: none;
  background:
    radial-gradient(ellipse 900px 420px at 15% 0%, rgba(14, 117, 104, 0.16), transparent 60%),
    linear-gradient(178deg, #142320 0%, #0e1a17 55%, #0b1614 100%);
  color: #e9f1ee;
}
body.marketing .flow-band > * {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
body.marketing .flow-band .section-head h2 { color: #fff; }
body.marketing .flow-band .section-head p { color: rgba(233, 241, 238, 0.68); }

body.marketing .flow-rail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 56px 1fr 56px 1fr;
  align-items: start;
  margin-top: 12px;
}
body.marketing .flow-connector {
  position: relative;
  top: 27px;
  height: 1px;
  background: rgba(233, 241, 238, 0.18);
  overflow: hidden;
}
body.marketing .flow-connector::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #4fd8c4, transparent);
  animation: flowPulse 3.2s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes flowPulse {
  0% { left: -40%; }
  100% { left: 100%; }
}
body.marketing .flow-stage {
  position: relative;
}
body.marketing .flow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 22px;
  color: #7fe0cc;
}
body.marketing .flow-stage h3 {
  color: #fff;
  font-size: var(--mk-h3);
  font-weight: 600;
  margin-top: 20px;
}
body.marketing .flow-stage p {
  color: rgba(233, 241, 238, 0.66);
  font-size: 14.5px;
  margin-top: 8px;
  max-width: 32ch;
}
@media (max-width: 780px) {
  body.marketing .flow-rail {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body.marketing .flow-connector {
    width: 1px;
    height: 40px;
    margin-left: 26px;
    top: 0;
  }
  body.marketing .flow-connector::after {
    left: 0; top: -40%; width: 100%; height: 40%;
    background: linear-gradient(180deg, transparent, #4fd8c4, transparent);
    animation-name: flowPulseV;
  }
  @keyframes flowPulseV {
    0% { top: -40%; }
    100% { top: 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  body.marketing .flow-connector::after { animation: none; left: 0; width: 100%; opacity: 0.5; }
}

/* ============ Pricing comparison table ============
   Tiers as columns, features as rows — a real comparison instead of four
   identical cards with a floating "most popular" pill. Rows are grouped
   (at-a-glance / included / support) with a hairline only between groups,
   not under every row — that's most of what makes a dense table read as
   calm instead of gridded. The recommended tier is marked by a restrained
   top rule and a small label, not a block of fill color. */
body.marketing .pricing-table-wrap {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow-x: auto;
  box-shadow: 0 1px 2px rgba(22, 33, 31, 0.04), 0 20px 48px -28px rgba(22, 33, 31, 0.16);
  background: var(--card);
}
body.marketing table.pricing-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
body.marketing table.pricing-table th,
body.marketing table.pricing-table td {
  padding: 15px 22px;
  text-align: center;
  vertical-align: middle;
}
body.marketing table.pricing-table th.row-label,
body.marketing table.pricing-table td.row-label {
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
/* Sticky row labels — on a narrow viewport the table scrolls horizontally
   to compare tiers, but the row you're reading should never scroll out of
   view with it. */
@media (max-width: 900px) {
  body.marketing table.pricing-table th.row-label,
  body.marketing table.pricing-table td.row-label {
    position: sticky;
    left: 0;
    background: var(--card);
    z-index: 1;
    box-shadow: 1px 0 0 0 var(--line);
    /* Left unconstrained, "Private deployment / bring your own database"
       forces this column past 300px wide on its own, swallowing the whole
       viewport before a single tier column comes into view. Wrap it and
       cap the width instead. */
    white-space: normal;
    max-width: 132px;
  }
}
body.marketing table.pricing-table thead th {
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
  padding-top: 30px;
  padding-bottom: 22px;
}
body.marketing table.pricing-table thead .tier-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
body.marketing table.pricing-table thead .tier-for {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 5px;
  white-space: normal;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
body.marketing table.pricing-table .price {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.marketing table.pricing-table .price span {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}
body.marketing table.pricing-table .yes {
  color: var(--accent);
  font-weight: 700;
}
body.marketing table.pricing-table .no {
  color: var(--ink-2);
}
/* Group boundaries — the only horizontal rules besides the header. */
body.marketing table.pricing-table tbody tr.grp-start td,
body.marketing table.pricing-table tbody tr.grp-start th {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
body.marketing table.pricing-table td.cta-cell,
body.marketing table.pricing-table th.cta-cell {
  padding-top: 26px;
  padding-bottom: 26px;
}
body.marketing table.pricing-table td.cta-cell .btn {
  width: 100%;
}
/* Recommended tier: a top rule in the accent color and a quiet label —
   the elevation cue instead of a block of fill. */
body.marketing table.pricing-table th.featured,
body.marketing table.pricing-table td.featured {
  background: rgba(14, 117, 104, 0.045);
  position: relative;
}
body.marketing table.pricing-table thead th.featured {
  box-shadow: inset 0 2px 0 0 var(--accent);
}
body.marketing table.pricing-table thead th.featured .tier-name::after {
  content: "Recommended";
  display: block;
  width: fit-content;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  margin: 8px auto 0;
}
body.marketing .pricing-note {
  text-align: center;
  color: var(--ink-2);
  font-size: 13.5px;
  margin-top: 26px;
}

@media (max-width: 620px) {
  body.marketing table.pricing-table {
    min-width: 640px;
  }
}

/* ============ CTA band — accent gradient variant ============ */
body.marketing .cta-band-accent {
  background: linear-gradient(150deg, #0e7568 0%, #0a5a50 55%, #073f38 100%);
  color: #fff;
}
body.marketing .cta-band-accent h2 {
  color: #fff;
}
body.marketing .cta-band-accent p {
  color: rgba(255, 255, 255, 0.82);
}
body.marketing .cta-band-accent a {
  color: rgba(255, 255, 255, 0.92);
}
body.marketing .cta-band-accent .btn-primary {
  background: #fff;
  color: var(--accent-dark) !important;
}
body.marketing .cta-band-accent .btn-primary:hover {
  background: #f2f6f5;
}

/* ============ Contact CTA (index.php) ============
   A real panel — icon, glow, floating motion, supporting meta line —
   instead of a bare heading and a button on empty white. */
body.marketing .contact-cta {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) clamp(28px, 5vw, 56px);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(22, 33, 31, 0.04), 0 30px 70px -30px rgba(14, 117, 104, 0.28);
  overflow: hidden;
}
body.marketing .contact-cta-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  width: 420px;
  height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(14, 117, 104, 0.16), transparent 70%);
  pointer-events: none;
}
body.marketing .contact-cta-icon {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  border-radius: 16px;
  background: linear-gradient(145deg, #12907f 0%, #0a5a50 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 28px -12px rgba(14, 117, 104, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  animation: ctaFloat 4.5s ease-in-out infinite;
}
@keyframes ctaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
body.marketing .contact-cta h2 {
  font-size: var(--mk-h2);
  position: relative;
}
body.marketing .contact-cta p {
  color: var(--ink-2);
  font-size: 16px;
  margin: 14px auto 0;
  max-width: 42ch;
  position: relative;
}
body.marketing .contact-cta .btn {
  position: relative;
  margin-top: 28px;
}
body.marketing .contact-cta-meta {
  position: relative;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}
body.marketing .contact-cta-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.marketing .contact-cta-meta i.ph {
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  body.marketing .contact-cta-icon { animation: none; }
}

/* ============ Site footer — a refined, dark ending ============
   The one other dark surface on the page besides the flow band, reserved
   for the close: a large statement instead of a small caption, minimal
   navigation, generous air. Dark and shared across every marketing page,
   so the site now has one deliberate, consistent way of ending. */
body.marketing .site-footer {
  position: relative;
  margin-top: 0;
  background: linear-gradient(178deg, #0e1a17 0%, #0b1614 100%);
  color: #e9f1ee;
  overflow: hidden;
}
/* A seam of accent light at the top edge, and a fine dot grid for texture —
   the same restrained-glow language as the flow band and auth aside,
   carried through to the page's very last surface. */
body.marketing .site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 216, 196, 0.55), transparent);
}
body.marketing .site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 700px 420px at 10% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 700px 420px at 10% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}
body.marketing .site-footer-top {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 104px) 24px clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
}
body.marketing .site-footer .brand { color: #fff; }
body.marketing .site-footer .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  transition: transform 0.3s cubic-bezier(.16,1,.3,1);
}
body.marketing .site-footer .brand-mark svg { width: 22px; height: 22px; }
body.marketing .site-footer .brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.06);
}
body.marketing .site-footer-statement {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: var(--mk-h2);
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
  max-width: 15ch;
}
body.marketing .site-footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
body.marketing .site-footer-col h4 {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(233, 241, 238, 0.56);
  margin-bottom: 14px;
}
body.marketing .site-footer-col a {
  display: block;
  color: rgba(233, 241, 238, 0.75);
  font-size: 14px;
  padding: 5px 0;
  transition: color 0.15s, transform 0.15s;
}
body.marketing .site-footer-col a:hover {
  color: #7fe0cc;
  transform: translateX(3px);
}
body.marketing .site-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 24px;
  text-align: center;
  font-size: 13px;
  color: rgba(233, 241, 238, 0.56);
}
body.marketing .site-footer-bottom a {
  color: rgba(233, 241, 238, 0.65);
}
body.marketing .site-footer-bottom a:hover {
  color: #7fe0cc;
}

@media (max-width: 720px) {
  body.marketing .site-footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
  }
  body.marketing .site-footer-links {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}
@media (max-width: 480px) {
  body.marketing .site-footer-links {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============ Contact page ============
   A narrow form floating alone on a wide page read as an accident of
   layout, not a design — paired now with an info column so the page has
   real structure and the width is doing something besides sitting empty. */
body.marketing .contact-hero {
  padding-bottom: 8px;
}
body.marketing .contact-layout {
  max-width: 1000px;
  padding-top: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
body.marketing .contact-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 6px;
}
body.marketing .contact-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
body.marketing .ci-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
body.marketing .contact-info-item h3 {
  font-size: var(--mk-h4);
  font-weight: 600;
  margin-bottom: 3px;
}
body.marketing .contact-info-item p {
  color: var(--ink-2);
  font-size: 14.5px;
}
body.marketing .contact-form-panel {
  box-shadow: 0 1px 2px rgba(22, 33, 31, 0.04), 0 24px 56px -28px rgba(22, 33, 31, 0.22);
}
@media (max-width: 780px) {
  body.marketing .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.marketing .contact-info {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }
  body.marketing .contact-info-item {
    flex: 1 1 220px;
  }
}

/* ============ Legal pages: TOC + content ============ */
body.marketing .legal-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: start;
}
body.marketing .legal-toc {
  /* Nav is sticky too (see "Nav" above) — the TOC has to clear its actual
     rendered height plus breathing room, not just an arbitrary offset, or
     the header sits on top of it as soon as the page scrolls. */
  position: sticky;
  top: calc(88px + 24px);
  max-height: calc(100vh - 88px - 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.marketing .legal-toc a {
  font-size: 13px;
  color: var(--ink-2);
  padding: 6px 10px;
  border-radius: 7px;
}
body.marketing .legal-toc a:hover {
  background: #f2f6f5;
  color: var(--ink);
}
body.marketing .legal-layout .legal {
  max-width: 700px;
  margin: 0;
  padding: 0;
}
body.marketing .legal h1 {
  font-size: var(--mk-h2);
}
body.marketing .legal h2 {
  font-family: var(--font-display);
  scroll-margin-top: calc(88px + 24px);
}

@media (max-width: 860px) {
  body.marketing .legal-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  body.marketing .legal-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.marketing * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============ Scroll reveal ============
   Visible by default (see js/marketing.js) — .is-pre/.is-in are only ever
   added by script, once IntersectionObserver + motion preference are
   confirmed, so a no-JS or reduced-motion visitor always sees the final,
   fully-visible state with no animation gate. */
body.marketing .reveal.is-pre {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
body.marketing .reveal.is-pre.is-in {
  opacity: 1;
  transform: translateY(0);
}