/* Letterhead v1 — design system */

:root {
  --ink: #0e0e0c;
  --ink-2: #2a2a26;
  --muted: #5b5b54;
  --line: #e7e3d8;
  --bg: #fafaf3;
  --bg-2: #f3efe1;
  --bg-card: #ffffff;
  /* Brand teal/green (primary accent) */
  --brand: #11424A;
  --brand-2: #1c5d68;
  /* Warm cream tints — replaced earlier cool-teal greys (#e6eff0/#f1f6f6)
     that read as "mistakes" against the cream page bg. These keep a subtle
     hover/UI tint without breaking the warm color story. */
  --brand-soft: #efe9d6;
  --brand-tint: #f5f0df;
  /* Warm accent (used sparingly) */
  --gold: #f5b400;
  --gold-deep: #c98c00;
  --serif: "Newsreader", "Times New Roman", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --max: 1180px;
  --max-narrow: 760px;
  --radius: 6px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand); }

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.015em; }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.15rem; font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 1em; }
p.lead { font-size: 1.2rem; color: var(--ink-2); max-width: 60ch; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 .8em;
}

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: var(--max-narrow); }

.section { padding: 96px 0; border-bottom: 1px solid var(--line); }
.section.tight { padding: 56px 0; }
/* Tinted bands are reserved for the two proof strips — customer logos and
   testimonials — via .band. .section.alt still appears in markup but no
   longer tints: alternating beige bands put two tinted sections back-to-back,
   and the per-section fade (refine layer) left a pale seam between them. */
.section.band { background: var(--bg-2); }
.section.dark { background: var(--ink); color: #fafaf3; border-bottom: 0; }
.section.dark h1, .section.dark h2, .section.dark h3 { color: #fafaf3; }
.section.dark .eyebrow { color: var(--gold); }
.section.dark a { color: #fafaf3; }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 243, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
.brand {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand .dot { color: var(--brand); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: 0.95rem; text-decoration: none; color: var(--ink-2); }
.nav a:hover { color: var(--ink); }
.nav .has-menu { position: relative; }
.nav .menu {
  position: absolute; top: 100%; left: -16px; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(20,20,16,0.08);
  min-width: 240px; display: none;
  margin-top: 8px;
}
.nav .has-menu:hover .menu, .nav .has-menu:focus-within .menu { display: block; }
.nav .menu a { display: block; padding: 8px 10px; border-radius: 6px; }
.nav .menu a:hover { background: var(--brand-tint); color: var(--brand); }
.nav-cta {
  background: var(--brand); color: #fafaf3 !important; padding: 10px 18px;
  border-radius: 999px; font-weight: 600;
}
.nav-cta:hover { background: var(--brand-2); color: #fafaf3 !important; }
.nav-login {
  border: 1px solid var(--brand); color: var(--brand) !important; padding: 10px 18px;
  border-radius: 999px; font-weight: 600;
}
.nav-login:hover { background: var(--brand); color: #fafaf3 !important; }
/* Login is a pill, not a text link — opt it out of the nav hover-underline
   that polish_site.py injects for `.nav > a:not(.nav-cta)`. */
.nav-login::after { display: none; }


.menu-toggle { display: none; background: none; border: 1px solid var(--line); padding: 8px 12px; border-radius: 6px; font: inherit; cursor: pointer; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--brand); color: #fafaf3; }
.btn.primary:hover { background: var(--brand-2); color: #fafaf3; }
.btn.secondary { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn.secondary:hover { background: var(--brand); color: #fafaf3; }
.btn.ghost { background: transparent; color: var(--brand); padding: 14px 0; }
.btn.ghost:hover { color: var(--brand-2); }
.btn.ghost:after { content: " →"; transition: margin .15s ease; }
.btn.ghost:hover:after { margin-left: 4px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }

/* Hero */
.hero {
  padding: 112px 0 96px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.hero h1 { max-width: 18ch; }
.hero h1 .hero-subline {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.62em;
  color: var(--brand);
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.hero p.lead { font-size: 1.3rem; max-width: 56ch; color: var(--ink-2); }
.hero-meta { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); margin-top: 22px; }

/* Layouts */
.grid { display: grid; gap: 24px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .nav { display: none; }
  .menu-toggle { display: inline-block; }
  /* The top-nav "Book a test drive" CTA is desktop-only; the hamburger drawer
     shouldn't carry it (the sticky bottom CTA covers conversion on mobile). */
  .nav .nav-cta { display: none; }
  .nav.open { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; background: var(--bg); padding: 20px 24px; border-bottom: 1px solid var(--line); align-items: flex-start; gap: 16px; max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .hero { padding: 72px 0 64px; }
  .section { padding: 64px 0; }
}

/* The complete desktop nav needs more room than the page's 880px layout
   breakpoint, particularly at 125%+ browser zoom. Collapse it independently
   before the logo and actions start crowding one another. */
@media (max-width: 1240px) {
  .header-inner { height: 60px; padding: 0 20px; }
  .nav { display: none; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 14px;
    font-size: 0.95rem;
  }
  .nav .nav-cta { display: none; }
  .nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 20px 32px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open a,
  .nav.open .has-menu > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 1.05rem;
  }
  .nav.open .has-menu { width: 100%; display: block; }
  .nav.open .has-menu > a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-right: 8px;
  }
  .nav.open .has-menu > a::after {
    content: "+";
    margin-left: auto;
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
  }
  .nav.open .has-menu[aria-expanded="true"] > a::after { content: "\2212"; }
  .nav.open .menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    margin: 0;
    padding: 0 0 0 16px;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    max-height: 0;
  }
  .nav.open .has-menu[aria-expanded="true"] .menu {
    max-height: 600px;
    padding-bottom: 12px;
  }
  .nav.open .has-menu.menu-product .menu {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  .nav.open .has-menu.menu-product[aria-expanded="true"] .menu {
    max-height: 1000px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.card.flat { background: transparent; }
.card h3 { margin-bottom: .4em; }
.card .eyebrow { color: var(--brand); }

/* Product card */
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; height: 100%;
  transition: border-color .15s ease, transform .15s ease;
}
.product-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.product-card .name {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0 0 .25em;
}
.product-card .tag { color: var(--brand); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.product-card .lead-line { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-2); margin: 0 0 .8em; }
.product-card .desc { color: var(--muted); margin: 0 0 1.4em; font-size: .98rem; }
.product-card a.more { margin-top: auto; text-decoration: none; color: var(--ink); font-weight: 600; }
.product-card a.more:after { content: " →"; }

/* Stat block */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat .num {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.stat .num .accent { color: var(--brand); }
.stat .label { color: var(--muted); margin-top: 8px; font-size: .95rem; }

/* Logos / customer bar */
.logos {
  display: flex; flex-wrap: wrap; gap: 36px 56px; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.logos span { opacity: 0.85; }

/* Quote */
.quote {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.35;
  color: var(--ink);
  max-width: 32ch;
}
.quote .mark { color: var(--brand); margin-right: 4px; }
.quote-attr { font-family: var(--sans); font-size: 0.95rem; color: var(--muted); margin-top: 18px; }

/* Two-up */
.two-up { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 880px) { .two-up { grid-template-columns: 1fr; gap: 32px; } }

/* Setup-grid: text + card stacked left, full-height media right */
.setup-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.setup-grid .setup-media { display: flex; }
.setup-grid .media-frame.setup-tall {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 480px;
}
@media (max-width: 880px) {
  .setup-grid { grid-template-columns: 1fr; gap: 32px; }
  .setup-grid .media-frame.setup-tall { min-height: 280px; }
}

/* Compare table */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px;
}
.compare .col {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px;
}
.compare .col.bad { background: #fdf3ef; border-color: #f1d8c8; }
.compare .col.bad h4 { color: #b04a2a; }
.compare .col h4 { margin-top: 0; color: var(--brand); }
.compare ul { padding-left: 18px; margin: 0; color: var(--ink-2); }
.compare li { margin: 0 0 .5em; }

/* Footer */
.footer { padding: 64px 0 48px; background: var(--ink); color: #d6d2c2; }
/* Column headers (h3 after the polish-step heading-order normalization,
   h4 in the raw source). Style both so the column labels render correctly. */
.footer h3, .footer h4 { color: #fafaf3; font-size: 0.9rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; }
.footer a { color: #d6d2c2; text-decoration: none; display: block; padding: 4px 0; font-size: .95rem; }
.footer a:hover { color: #cfe2e4; }
.footer-brand { margin-bottom: 40px; }
.footer-brand-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-brand-top .brand-mark { margin: 0; }
/* Restore button shape (the generic `.footer a` rule would flatten the pill) and
   make the CTA cream rather than brand-fill against the dark footer. */
.footer-brand .footer-cta { flex-shrink: 0; display: inline-block; padding: 14px 24px; background: #fafaf3; color: var(--ink); border-color: #fafaf3; }
.footer-brand .footer-cta:hover { background: #ebe8db; color: var(--ink); border-color: #ebe8db; }
.footer-brand p { margin: 16px 0 0; max-width: 40ch; color: #a8a496; font-size: .95rem; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 36px 28px; }
@media (max-width: 880px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer .legal { color: var(--muted); font-size: 0.85rem; padding-top: 32px; margin-top: 32px; border-top: 1px solid #2a2a26; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer .legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; }
.footer .legal-links a { display: inline; padding: 0; }

/* Legal pages (Termly embeds) — fluid to the normal container width */
.legal-embed { width: 100%; }
.legal-iframe { display: block; width: 100%; height: 1600px; border: 0; }
@media (max-width: 640px) { .legal-iframe { height: 1900px; } }

/* Inline list (capabilities) */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 880px) { .feature-list { grid-template-columns: 1fr; } }
.feature-list .item { padding: 0; }
.feature-list .item h4 { margin: 0 0 6px; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; }
.feature-list .item p { color: var(--muted); margin: 0; font-size: 0.97rem; }

/* CTA panel */
.cta-panel {
  background: var(--ink);
  color: #fafaf3;
  border-radius: var(--radius-lg);
  padding: 56px;
  text-align: center;
}
.cta-panel h2 { color: #fafaf3; margin-bottom: 0.4em; }
.cta-panel p { color: #d6d2c2; max-width: 50ch; margin: 0 auto 24px; }
/* Primary CTA on the dark ink panel: cream background with ink text reads
   much better than brand teal on near-black (which gets visually muddy). */
.cta-panel .btn.primary { background: #fafaf3; color: var(--ink); border-color: #fafaf3; }
.cta-panel .btn.primary:hover { background: #ebe8db; color: var(--ink); border-color: #ebe8db; }
.cta-panel .btn.secondary { color: #fafaf3; border-color: #fafaf3; background: transparent; }
.cta-panel .btn.secondary:hover { background: #fafaf3; color: var(--brand); }
.cta-panel .btn.ghost { color: #fafaf3; }
.cta-panel .btn.ghost:hover { color: #cfe2e4; }

/* Newsletter subscribe callout (Netlify form) — resources + newsletter pages */
.subscribe-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 480px; margin: 6px auto 0; }
.subscribe-input {
  flex: 1 1 240px; min-width: 0; padding: 13px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08);
  color: #fafaf3; font: inherit; font-size: .97rem;
}
.subscribe-input::placeholder { color: #a8a496; }
.subscribe-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.subscribe-form .btn { flex: 0 0 auto; }
.subscribe-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cta-panel .subscribe-fine { font-size: .82rem; color: #a8a496; margin: 14px auto 0; }

/* Article styles */
article.prose { max-width: 70ch; }
article.prose h2 { margin-top: 1.6em; }
article.prose p { color: var(--ink-2); }
article.prose ul, article.prose ol { color: var(--ink-2); }
article.prose blockquote {
  border-left: 3px solid var(--brand);
  padding-left: 18px;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 1.4em 0;
}

/* Case study layout */
.case-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 28px; background: transparent; border-radius: var(--radius-lg); }
@media (max-width: 880px) { .case-result { grid-template-columns: 1fr; } }
.case-result .stat .num { font-size: 2.4rem; }

/* Tag chip */
.chip { display: inline-block; padding: 4px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; color: var(--ink-2); margin-right: 6px; }

/* ----- Logo (SVG mark) ----- */
.brand-mark { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.brand-mark img, .brand-mark svg { height: 28px; width: auto; display: block; }
.footer .brand-mark img { height: 32px; opacity: 1; }
.brand-mark.large img, .brand-mark.large svg { height: 40px; }

/* ----- Hero with media slot ----- */
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero-grid .hero-copy h1 { max-width: 18ch; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ----- Image / media placeholder ----- */
.media-frame {
  position: relative;
  background: transparent;
  border: 1px dashed var(--brand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
}
.media-frame.solid { background: var(--brand); color: #fafaf3; border-color: var(--brand); }
.media-frame.solid .media-frame-label { color: #fafaf3; }
.media-frame .media-frame-label { display: inline-block; max-width: 26ch; }
.media-frame .media-frame-label:before {
  content: "▶";
  display: block;
  font-size: 1.6rem;
  margin-bottom: 10px;
  letter-spacing: 0;
}
.media-frame.ratio-16x9 { aspect-ratio: 16 / 9; }
.media-frame.ratio-4x3 { aspect-ratio: 4 / 3; }
.media-frame.ratio-1x1 { aspect-ratio: 1 / 1; }
.media-frame.ratio-3x2 { aspect-ratio: 3 / 2; }
.media-frame.ratio-21x9 { aspect-ratio: 21 / 9; }
.media-frame.cover { aspect-ratio: auto; min-height: 320px; }
.media-frame.full { margin-top: 0; }
.product-card .media-frame { margin-top: 16px; }

/* ----- Icon (line-art) ----- */
.icon-badge {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.icon-badge svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.feature-list .item .icon-badge { margin-bottom: 12px; }

/* ----- Hero badge (solid brand pill: official glyph + label) -----
   The eyebrow treatment on product/capability heroes, e.g. "LETTERHEAD STUDIO".
   ICON_LIB glyphs are bare <svg viewBox> with no size or stroke, so — exactly
   like .icon-badge above — we size them and force fill:none + stroke:currentColor
   here (children with their own fill="currentColor", e.g. the audience-hub dot,
   keep it). Without this rule the global `img,svg{max-width:100%;display:block}`
   blows the icon up to a full-width black fill. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: #fafaf3;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 1.2em;
}
.hero-badge-icon { display: inline-flex; align-items: center; justify-content: center; }
.hero-badge-icon svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ----- Section header wrapper (eyebrow + h2 [+ lead]) -----
   Plain text-only header pair. The earlier deck-style kicker (line-art icon
   + uppercase label + hairline rule) was rolled back per request. */
.section-head { margin-bottom: 32px; }
.section-head h2 { margin: 0.4em 0 0; }
.section-head .lead { margin-top: 0.7em; max-width: none; }

/* ----- Customer logo bar (real wordmark SVGs, monochrome teal) ----- */
.logos-bar {
  display: flex; flex-wrap: wrap; gap: 28px 56px;
  align-items: center; justify-content: center;
}
.logos-bar .logo {
  display: inline-flex;
  align-items: center;
  height: 28px;
  opacity: 0.85;
  transition: opacity .15s ease;
  white-space: nowrap;
}
.logos-bar .logo:hover { opacity: 1; }
.logos-bar .logo-img img {
  height: 28px;
  width: auto;
  max-width: 220px;
  display: block;
  /* Tint the monochrome SVG wordmarks to brand teal (#11424A). */
  filter: brightness(0) saturate(100%) invert(20%) sepia(30%) saturate(1700%) hue-rotate(157deg) brightness(85%) contrast(95%);
}
/* Townsquare wordmark is longer than most; let it render full-width. */
.logos-bar .logo-img img[src*="townsquare-media"] { max-width: 260px; }
.logos-bar .logo-text {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--brand);
}
.logos-bar .logo-text.condensed { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 800; letter-spacing: -0.01em; font-size: 1.05rem; }
.logos-bar .logo-text.uppercase { text-transform: uppercase; font-family: var(--sans); font-weight: 700; letter-spacing: 0.18em; font-size: 0.85rem; }
.logos-bar .logo-text.italic { font-style: italic; }

/* ----- Integration orbit (platform.html) ----- */
.orbit {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
  padding: 32px 16px;
}
.orbit .orbit-core {
  position: relative;
  z-index: 3;
  background: var(--brand);
  color: #fafaf3;
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  text-align: center;
  max-width: 360px;
  box-shadow: 0 18px 40px rgba(17, 66, 74, 0.18);
}
.orbit .orbit-core h3 { color: #fafaf3; margin: 0 0 .3em; }
.orbit .orbit-core p { color: rgba(250,250,243,0.85); margin: 0; font-size: 0.95rem; }
/* Letterhead + Studio badge variant: logo on top, icon + Studio name below. */
.orbit .orbit-core.orbit-badge { padding: 26px 30px; max-width: 240px; }
.orbit .orbit-badge-logo { display: block; height: 32px; width: auto; margin: 0 auto 14px; }
.orbit .orbit-badge-row { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fafaf3; }
.orbit .orbit-badge-icon { display: inline-flex; }
.orbit .orbit-badge-name { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.005em; color: #fafaf3; }

/* Studio page: tighten the gap between "Who it's for & why Studio" (two_up)
   and the named-quote outcomes strip directly below — they read as one
   "this is why teams choose Studio" beat. */
.studio-two-up-tight > section + section { padding-top: 0; margin-top: -24px; }
.orbit .orbit-ring {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.orbit .orbit-ring:before {
  content: ""; position: absolute;
  width: 92%; max-width: 760px; aspect-ratio: 1 / 1;
  border: 1px dashed var(--brand);
  border-radius: 50%;
  opacity: 0.35;
}
.orbit .orbit-ring.inner:before { width: 60%; max-width: 480px; opacity: 0.5; }
.orbit .orbit-chip {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(20,20,16,0.06);
  pointer-events: auto;
  white-space: nowrap;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}
.orbit .orbit-chip.orbit-chip-img { padding: 8px 14px; min-height: 44px; }
.orbit .orbit-chip.orbit-chip-img img {
  height: 22px;
  width: auto;
  max-width: 130px;
  display: block;
  filter: brightness(0) saturate(100%) invert(20%) sepia(30%) saturate(1700%) hue-rotate(157deg) brightness(85%) contrast(95%);
}
@media (max-width: 720px) {
  .orbit { min-height: auto; }
  .orbit .orbit-ring { display: none; }
  .orbit .orbit-chip { position: static; display: inline-block; margin: 4px; }
  .orbit .orbit-core { margin: 16px 0; }
}

/* ----- Outcome callout strip ----- */
.outcomes-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
@media (max-width: 880px) { .outcomes-strip { grid-template-columns: 1fr; } }
.outcome {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--bg-card);
  text-align: left;
}
.outcome .outcome-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--brand);
  letter-spacing: -0.02em;
  line-height: 1;
}
.outcome .outcome-title { font-family: var(--sans); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-2); margin: 10px 0 6px; }
.outcome .outcome-desc { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* ----- Homepage integration marquee (auto-scrolling horizontal strip) ----- */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: marquee-scroll 50s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 36px;
}
.marquee-item img {
  height: 26px;
  width: auto;
  max-width: 150px;
  display: block;
  filter: brightness(0) saturate(100%) invert(20%) sepia(30%) saturate(1700%) hue-rotate(157deg) brightness(85%) contrast(95%);
  opacity: 0.88;
}

/* ----- Integrations page: logo grid by category ----- */
.integration-category { margin-bottom: 48px; }
.integration-category h3 {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.integration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .integration-grid { grid-template-columns: repeat(2, 1fr); } }
.integration-tile {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 110px;
  transition: border-color .15s ease, transform .15s ease;
}
.integration-tile:hover { border-color: var(--brand); transform: translateY(-2px); }
.integration-tile img {
  height: 28px;
  width: auto;
  max-width: 80%;
  display: block;
  filter: brightness(0) saturate(100%) invert(20%) sepia(30%) saturate(1700%) hue-rotate(157deg) brightness(85%) contrast(95%);
}
.integration-tile .integration-name {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* Linked integration tiles (slug has a /integrations/<slug> detail page). */
a.integration-tile { text-decoration: none; cursor: pointer; }
a.integration-tile .integration-name { transition: color .15s ease; }
a.integration-tile:hover .integration-name { color: var(--brand); }
/* Mechanism label (Native / Via Zapier / Talk to us) — keeps every tile
   honest about how the tool actually connects. */
.integration-mech {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.75;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: -6px;
}
/* Custom-integration tile icon (plus-in-a-box, brand-tinted like the logos). */
.integration-custom-icon {
  color: #1e4a56;
  opacity: 0.85;
}

/* ----- Section CTA strip ----- */
.section-cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  padding: 22px 28px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius-lg);
  margin-bottom: 36px;
}
.section-cta-strip p { margin: 0; color: var(--ink-2); font-size: 1rem; flex: 1; min-width: 240px; }
.section-cta-strip .btn { margin: 0; }

/* ----- Page-content brand mark (footer & cta) ----- */
.cta-panel .brand-mark img { filter: none; height: 28px; }

/* ----- Blog: post page ----- */
.post-header { padding: 64px 0 24px; }
.post-header h1 { margin: .2em 0 .25em; }
.post-meta { font-family: var(--sans); color: var(--muted); font-size: .95rem; margin: 0; }
.post-hero { margin: 16px 0 32px; }
.post-hero img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.post-hero figcaption {
  font-family: var(--sans); font-size: .9rem; color: var(--muted);
  margin-top: 10px; text-align: center;
}
.post-body { padding-bottom: 56px; }
.post-body figure { margin: 1.6em 0; }
.post-body figure img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.post-body figure figcaption {
  font-family: var(--sans); font-size: .9rem; color: var(--muted);
  margin-top: 10px; text-align: center;
}
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-body code {
  background: var(--bg-2); padding: 1px 6px; border-radius: 4px;
  font-size: .92em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.post-body pre {
  background: #0f1c1f; color: #e7efef; padding: 16px 18px; border-radius: var(--radius-lg);
  overflow-x: auto; font-size: .9rem; line-height: 1.55;
}
.post-body pre code { background: transparent; padding: 0; color: inherit; }
.post-tags { font-family: var(--sans); margin: 8px 0 0; padding-bottom: 32px; }
.post-tag {
  display: inline-block; padding: 3px 10px; margin: 0 6px 6px 0;
  background: var(--bg-2); color: var(--ink-2); border-radius: 999px;
  font-size: .85rem;
}

/* ----- Blog: pullquote directive ----- */
aside.pullquote {
  margin: 2em 0; padding: 24px 28px;
  background: var(--brand-tint); border-left: 4px solid var(--brand);
  border-radius: var(--radius);
}
aside.pullquote p {
  margin: 0; font-family: var(--serif);
  font-size: 1.4rem; line-height: 1.4; color: var(--ink);
}

/* ----- Blog: inline CTA directive ----- */
aside.post-cta {
  margin: 2.4em 0; padding: 26px 28px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
aside.post-cta p { margin: 0; flex: 1; min-width: 240px; color: var(--ink-2); }
aside.post-cta .btn { margin: 0; }

/* ----- Blog: listing card thumb ----- */
.product-card .post-thumb {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 16px;
}

/* ----- Admin table ----- */
.admin-table {
  width: 100%; border-collapse: collapse; margin-top: 24px;
  font-size: .95rem;
}
.admin-table th, .admin-table td {
  text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-table th {
  font-family: var(--sans); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); font-weight: 600;
}
.admin-table .status-pill {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  color: #fafaf3; font-size: .8rem; font-weight: 600;
}
.admin-table a { color: var(--brand); text-decoration: none; }
.admin-table a:hover { text-decoration: underline; }

/* ----- Category pill ----- */
.category-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  background: var(--bg-2);
  color: var(--ink-2);
}
.category-pill.cat-strategy   { background: var(--brand-soft); color: var(--brand); }
.category-pill.cat-revenue    { background: #fff4d6; color: #8a6500; }
.category-pill.cat-production { background: #fce7e0; color: #a04826; }
.category-pill.cat-product    { background: #ece4f4; color: #5a3d8c; }
.category-pill.cat-customers  { background: #e4ede0; color: #3d6133; }
.category-pill.cat-company    { background: #ece9dc; color: var(--muted); }

.post-category { margin: 0 0 12px; }
.card-category { margin-bottom: 12px; }
.card-category:empty { display: none; }

/* === build_site.py component styles (capability product, use-case cards,
   quote carousel, icon cards, comparison tables). BASE LAYER: these must stay
   above the first script-appended marker — append_or_replace re-runs swallow
   any unmarked rules placed between script markers (see CLAUDE.md §7); that
   is exactly how these styles were once lost. === */
/* === Combined "in product" capability section (build_site.capability_product_block) ===
   Big-3 featured tiles up top, feature cards directly below under one headline. */
/* Stretch the row so all three big tiles share one fixed, consistent height. */
.capability-product .product-gallery { align-items: stretch; }
.capability-product .product-gallery .gallery-tile figcaption { min-height: 72px; }
.capability-product .feature-grid { margin-top: 60px; }
@media (max-width:760px){
  .capability-product .product-gallery { align-items: start; }
  .capability-product .feature-grid { margin-top: 40px; }
}

/* === Homepage use-case cards: tighter height (text-only, no image) === */
.use-case-card { padding: 24px 24px 22px; }
.use-case-card .name { font-size: 1.18rem; line-height: 1.28; margin-bottom: .4em; }
.use-case-card .desc { font-size: .95rem; line-height: 1.5; margin-bottom: 0; }
.use-case-card .uc-more { margin-top: 16px !important; }

/* === Quote carousel (build_site.quote_carousel) === */
.quote-carousel { position: relative; max-width: 62ch; margin: 0 auto; text-align: center; }
.qc-viewport { position: relative; overflow: hidden; }
.qc-slide { display: none; margin: 0; }
.qc-slide.is-active { display: block; animation: qc-fade .5s ease; }
@keyframes qc-fade { from { opacity: 0; } to { opacity: 1; } }
.qc-quote { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.42; color: var(--ink); margin: 0 0 28px; }
.qc-quote::before { content: "\201C"; }
.qc-quote::after { content: "\201D"; }
.qc-attr { display: flex; align-items: center; justify-content: center; gap: 14px; }
.qc-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.qc-who { display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
.qc-who strong { color: var(--ink); }
.qc-who span { color: var(--muted); font-size: .92rem; }
.qc-dots { display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
.qc-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--line); cursor: pointer; padding: 0; transition: background .2s ease; }
.qc-dot.is-active { background: var(--brand); }
.qc-arrow { position: absolute; top: 34%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s ease; }
.qc-arrow:hover { border-color: var(--ink); }
.qc-prev { left: -10px; }
.qc-next { right: -10px; }
@media (max-width: 720px) { .qc-arrow { display: none; } }

/* === Icon cards (no imagery) — onboarding pages: icon + title + body, N-up === */
.icon-card-grid { display: grid; gap: 22px; margin-top: 8px; }
.icon-card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.icon-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.icon-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; }
.icon-card .icon-badge { margin-bottom: 12px; }
.icon-card h3 { font-size: 1.08rem; line-height: 1.25; margin: 0 0 .4em; }
.icon-card p { color: var(--ink-2); margin: 0; line-height: 1.55; font-size: .96rem; }
@media (max-width: 860px) { .icon-card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .icon-card-grid.cols-2, .icon-card-grid.cols-3 { grid-template-columns: 1fr; } }

/* === Comparison + integration templates === */
.why-grid .why-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }
.why-grid .why-card h3 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .4em; }
.why-grid .why-card p { color: var(--ink-2); margin: 0; line-height: 1.55; }
.compare-table-wrap { margin-top: 28px; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 540px; }
.compare-table th, .compare-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table thead th { border-bottom: 2px solid var(--ink); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.compare-table tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.compare-table td { color: var(--ink-2); }
.compare-table .ct-us { background: var(--brand-tint); }
.compare-table td.ct-us { color: var(--ink); }
.compare-table thead th.ct-us { color: var(--brand); border-bottom-color: var(--brand); }
.ct-yes { color: var(--brand); font-weight: 700; font-size: 1.15rem; }
.ct-no { color: var(--muted); }

/* Capability-card row divider lives in refine_site.py (it must override the

/* Blog index (search-first): markup from build_site.py render_blog_index_body().
   bx- prefix. Lives in the base layer on purpose — no post-process script owns
   this page, and anything after the enhance markers gets swallowed on rebuild. */
.bx-hidden { display: none !important; }
.bx-search { position: relative; max-width: 720px; margin-top: 8px; }
.bx-search svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--muted); pointer-events: none;
}
#bx-q {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink);
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 15px 120px 15px 50px;
  box-shadow: 0 1px 2px rgba(14,14,12,.04); outline: none;
}
#bx-q::placeholder { color: var(--muted); }
#bx-q:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.bx-count {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: .8rem; color: var(--muted); pointer-events: none;
}
.bx-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.bx-chips button {
  font: inherit; font-size: .82rem; cursor: pointer; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; transition: border-color .12s ease, color .12s ease;
}
.bx-chips button:hover { border-color: var(--brand-2); color: var(--brand-2); }
.bx-chips button[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
.bx-sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.bx-sec-head h2 { margin: 0; font-size: 1.5rem; }
.bx-rule { flex: 1; height: 1px; background: var(--line); }
.bx-hint { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.bx-feat { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.bx-lead, .bx-mini {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); text-decoration: none; display: block;
  transition: transform .15s ease, border-color .15s ease;
}
.bx-lead:hover, .bx-mini:hover { transform: translateY(-2px); border-color: var(--brand-2); }
.bx-lead { overflow: hidden; display: flex; flex-direction: column; }
.bx-lead-img {
  width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; display: block;
  border-bottom: 1px solid var(--line);
}
.bx-lead-body { padding: 22px 24px 24px; }
.bx-kicker {
  display: flex; gap: 10px; align-items: center; font-size: .72rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; margin-bottom: 10px;
}
.bx-kicker .bx-k, .bx-row .bx-k { color: var(--brand-2); }
.bx-lead-body h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.65rem;
  line-height: 1.18; margin: 0 0 10px; letter-spacing: -.01em;
}
.bx-lead-body p { color: var(--muted); margin: 0; font-size: .95rem; max-width: 60ch; }
.bx-minis { display: flex; flex-direction: column; gap: 20px; }
.bx-mini { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.bx-mini h3 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; line-height: 1.25; margin: 0; }
.bx-rows { border-top: 1px solid var(--line); }
.bx-row {
  display: grid; grid-template-columns: 132px 1fr auto; gap: 18px;
  align-items: baseline; padding: 15px 4px; border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.bx-row .bx-d { font-size: .82rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bx-row .bx-t { font-size: 1.02rem; font-weight: 600; color: var(--ink); transition: color .12s ease; }
.bx-row:hover .bx-t { color: var(--brand-2); }
.bx-row .bx-x {
  display: block; font-size: .85rem; color: var(--muted); font-weight: 400;
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62ch;
}
.bx-row > .bx-k { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.bx-row .bx-t mark { background: var(--brand-soft); color: inherit; border-radius: 2px; padding: 0 1px; }
.bx-arch {
  font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 8px; margin-left: 8px; vertical-align: 2px;
}
/* The results section toggles display:none↔block after load, so it can't rely
   on polish_site.py's IntersectionObserver fade (a hidden section never
   intersects). Exempt it — the id selector outranks the .section fade rule. */
#bx-results-sec { opacity: 1; transform: none; }
.bx-empty { padding: 36px 4px; color: var(--muted); }
.bx-empty strong {
  color: var(--ink); font-family: var(--serif); font-weight: 500;
  font-size: 1.15rem; display: block; margin-bottom: 6px;
}
@media (max-width: 860px) {
  .bx-feat { grid-template-columns: 1fr; }
  .bx-row { grid-template-columns: 1fr; gap: 4px; }
  .bx-row .bx-x { white-space: normal; }
  .bx-row > .bx-k { display: none; }
  #bx-q { padding-right: 90px; }
}

/* ----- wire_images.py: appended at build time ----- */

/* Use-case + product card spacing — Bruce flagged image crashing into copy
   above and the link below. Give the media-frame real breathing room. */
.product-card .media-frame { margin-top: 22px; }
.product-card .media-frame.has-image + .more,
.product-card .media-frame.has-image + span.more { margin-top: 20px; display: inline-block; }
.product-card .desc { margin-bottom: 1.6em; }

/* Filled media-frame slots — image fills the slot cleanly */
.media-frame.has-image {
  border: none;
  background: transparent;
  padding: 0;
  display: block;
}
.media-frame.has-image > img,
.media-frame.has-image > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-lg);
}
.media-frame.has-image.contain > img,
.media-frame.has-image.contain > picture > img {
  object-fit: contain;
  background: transparent;          /* was var(--brand-soft) — caused double-tint with hero bg */
  padding: 12px;
}
.setup-grid .media-frame.has-image.setup-tall > img { height: 100%; object-fit: contain; }

/* Video slots (assets/video/*.mp4) — muted autoplaying loops.
   Base sizing mirrors the <img> rules above. The hero + capability-card
   variants mirror the elevation treatment refine_site.py gives images
   (those selectors only target `> img`, so videos style themselves here). */
.media-frame.has-video > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-lg);
}
/* Hero loops: natural aspect ratio, capped height, soft lift — mirrors
   refine_site.py's `.hero .hero-grid .media-frame.has-image > img`. */
.hero .hero-grid .media-frame.has-video > video {
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 12px;
  filter:
    drop-shadow(0 1px 1px rgba(20, 20, 16, 0.04))
    drop-shadow(0 22px 36px rgba(20, 20, 16, 0.12));
  transform: translateZ(0);
}
/* Capability-card loops: fill the 16:9 frame, brand-tinted lift — mirrors
   refine_site.py's `.capabilities-section .product-card ... > img`. */
.capabilities-section .product-card .media-frame.has-video > video {
  border-radius: 12px;
  filter:
    drop-shadow(0 1px 1px rgba(20, 20, 16, 0.04))
    drop-shadow(0 16px 32px rgba(20, 20, 16, 0.10))
    drop-shadow(0 40px 72px rgba(17, 66, 74, 0.16));
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.capabilities-section .product-card:hover .media-frame.has-video > video {
  transform: translateY(-2px) scale(1.01);
}

/* Nav dropdown forgiveness — 8px gap between trigger and menu was killing :hover.
   Trigger hit area extends downward, menu has a ::before bridge upward, opacity
   transition gives stable hit area, .menu:hover keeps it open when on the menu. */
.nav .has-menu > a {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: -14px;
}
.nav .menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.16s ease-out, visibility 0.16s ease-out, transform 0.16s ease-out;
}
.nav .menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav .has-menu:hover .menu,
.nav .has-menu:focus-within .menu,
.nav .menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}


/* ----- polish_site.py: appended at build time ----- */

/* ROI-calculator secondary CTA — hidden for everyone except A/B variant 'b'
   (html.ab-roi-b is stamped by the experiment block in POLISH_JS; markup is
   emitted by hero()/cta_panel() in build_site.py with roi_cta=True). Keeping
   it display:none for control/no-JS means crawlers and variant 'a' see the
   exact pre-experiment page. */
.roi-cta { display: none; }
html.ab-roi-b .roi-cta { display: inline-block; }

/* a11y: skip-to-content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--brand);
  color: #fafaf3;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 12px;
  outline: 3px solid var(--accent, #14B8A6);
  outline-offset: 2px;
}

/* a11y: refined focus ring on interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #14B8A6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 2027-trend polish: subtle scroll-fade-in for sections + cards */
@media (prefers-reduced-motion: no-preference) {
  .section,
  .product-card,
  .outcome,
  .card,
  .hero-copy,
  .hero-grid > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .in-view,
  .hero .hero-copy,
  .hero .hero-grid > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* card hover: gentle lift with a teal bloom shadow */
  .product-card,
  .outcome,
  .card,
  .media-frame.has-image {
    will-change: transform, box-shadow;
  }
  .product-card,
  .outcome,
  .card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .product-card:hover,
  .card:not(form):hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -16px rgba(13, 148, 136, 0.25),
                0 4px 12px -4px rgba(20, 20, 16, 0.08);
  }

  /* media-frame images: subtle inner zoom on hover, very gentle */
  .media-frame.has-image > img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .product-card:hover .media-frame.has-image > img,
  .media-frame.has-image:hover > img {
    transform: scale(1.02);
  }

  /* CTA button — micro shine */
  .btn.primary,
  .nav-cta {
    background-image: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.06) 100%);
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
  }
  .btn.primary:hover,
  .nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px rgba(13, 148, 136, 0.4);
  }
  .btn.primary:active,
  .nav-cta:active {
    transform: translateY(0);
  }

  /* link underline animation on nav and inline links */
  .nav > a:not(.nav-cta),
  .more {
    position: relative;
  }
  .nav > a:not(.nav-cta)::after,
  .more::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity 0.25s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav > a:not(.nav-cta):hover::after,
  .more:hover::after {
    opacity: 0.6;
    transform: scaleX(1);
  }
}

/* Demo form (native Netlify form) */
.demo-form { display: flex; flex-direction: column; gap: 14px; }
.demo-form .demo-hp { position: absolute; left: -5000px; }
.demo-form .demo-field span { font-weight: 600; font-size: 0.9rem; color: var(--ink); display: block; margin-bottom: 6px; }
.demo-form .demo-field .req { color: var(--brand); display: inline; margin: 0; } /* generic span rule above is display:block; keep the asterisk on the label line */
.demo-form input[type="text"],
.demo-form input[type="email"],
.demo-form textarea {
  width: 100%; padding: 12px; font: inherit; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.demo-form input:focus,
.demo-form textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}
.demo-form textarea { min-height: 96px; resize: vertical; }
.demo-form .demo-submit { width: 100%; margin-top: 4px; }
.demo-form-success h3 { margin: 0 0 8px; }
.demo-form-success p { color: var(--ink-2); margin: 0; }
/* /polish_site.py CSS */


/* ----- polish_site.py: demo page redesign ----- */
.demo-hero { padding: 56px 0 32px; background: transparent; }
.demo-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.demo-hero-copy h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  margin: 16px 0 18px;
  letter-spacing: -0.018em;
}
.demo-hero-copy .lead {
  font-size: 1.15rem; line-height: 1.55;
  color: var(--ink-2); margin: 0 0 28px;
  max-width: 52ch;
}
.demo-promises {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.demo-promises li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.98rem; color: var(--ink);
}
.demo-promises li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--brand); color: #fafaf3;
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
}
.demo-quote {
  margin: 0; padding: 18px 22px;
  background: var(--bg-card);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.5;
}
.demo-quote cite {
  display: block; margin-top: 8px;
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.demo-hero-form {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 32px 64px -16px rgba(2, 6, 23, 0.12),
              0 4px 12px -4px rgba(2, 6, 23, 0.06);
  position: relative;
  scroll-margin-top: 100px;
}
.demo-hero-form .demo-form-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.demo-hero-form .demo-form-sub {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin: 0 0 18px;
}
/* demo trust strip */
.demo-trust { padding: 40px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.demo-trust .eyebrow.center { text-align: center; margin: 0 0 24px; }
.demo-prep { padding: 64px 0; }
.demo-prep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.demo-prep-col h2 {
  font-size: 1.65rem;
  margin: 0 0 18px;
  letter-spacing: -0.012em;
}
.demo-prep-col ul {
  padding-left: 22px;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.6;
}
.demo-prep-col li { margin-bottom: 10px; }

@media (max-width: 880px) {
  .demo-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .demo-prep-grid { grid-template-columns: 1fr; gap: 40px; }
  .demo-hero-form { padding: 24px; }
}
/* /polish_site.py demo page */

/* ----- polish_site.py: newsletter overlay ----- */
.lh-nl {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;                 /* above .mobile-sticky-cta (80) */
  width: min(390px, calc(100vw - 48px));
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px 20px;
  box-shadow:
    0 2px 6px rgba(20,20,16,0.06),
    0 12px 28px rgba(20,20,16,0.10),
    0 28px 56px rgba(17,66,74,0.14);
  transform: translateY(calc(100% + 32px));
  opacity: 0;
  transition: transform .42s cubic-bezier(0.16,1,0.3,1), opacity .28s ease;
}
.lh-nl.is-visible { transform: translateY(0); opacity: 1; }
.lh-nl[hidden] { display: none; }

.lh-nl-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.lh-nl-close:hover { background: var(--brand-tint); color: var(--ink); }
.lh-nl-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.lh-nl-eyebrow {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.lh-nl-title {
  margin: 0 0 8px;
  padding-right: 28px;         /* clear the close button */
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.22;
  font-weight: 500;
  color: var(--ink);
}
.lh-nl-copy {
  margin: 0 0 16px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted);
}
.lh-nl-form { display: flex; flex-direction: column; gap: 10px; }
.lh-nl-input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lh-nl-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.lh-nl-submit { width: 100%; justify-content: center; text-align: center; }
.lh-nl-fine {
  margin: 12px 0 0;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--muted);
}
/* Honeypot + visually-hidden label: off-screen, never focusable by sighted use */
.lh-nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lh-nl-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lh-nl-success .lh-nl-title { padding-right: 28px; }
.lh-nl-success .lh-nl-copy { margin-bottom: 0; }

/* Mobile: full-width bottom sheet. No scrim — the panel stays non-modal so it
   never blocks reading and needs no focus trap. */
@media (max-width: 640px) {
  .lh-nl {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    padding: 20px 20px 18px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  @supports (padding: max(0px)) {
    .lh-nl { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  }
  .lh-nl-title { font-size: 1.2rem; }
  /* Two fixed bottom bars would eat the viewport and compete for the same tap.
     While the sheet is open the test-drive pill stands down. !important is
     required here: refine_site.py's .mobile-sticky-cta.is-visible rule is
     appended LATER in site.css, so it wins on source order at equal
     specificity. See the CSS block ordering trap in CLAUDE.md. */
  body.lh-nl-open .mobile-sticky-cta { transform: translateY(140%) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-nl { transition: opacity .2s ease; transform: none; }
  .lh-nl.is-visible { transform: none; }
}
/* /polish_site.py newsletter overlay */

/* === build_site.py: landing-page template (lp-*) ===
   Kept ABOVE the enhance_site.py append blocks: that script's
   append_or_replace() rebuilds its last block to end-of-file, so
   anything appended after it gets stripped on every build. */
/* Conversion landing pages (/lp/*). Minimal chrome (logo + one CTA), a
   form-first hero, and stacked supporting sections below. Distinct from the
   marketing site's full header/footer so there are no competing exits. */

/* Minimal header — logo on the left, the single CTA on the right. Sticky so
   the one action is always one click away. */
.lp-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 243, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.lp-header-inner {
  max-width: var(--max); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.lp-header .brand-mark img { height: 26px; display: block; }
.lp-nav-cta { padding: 10px 18px; }
@media (max-width: 560px) { .lp-nav-cta { display: none; } }

/* Form-first hero — copy on the left, the form card on the right. */
.lp-hero { padding: 64px 0 56px; border-bottom: 1px solid var(--line); }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
@media (max-width: 980px) { .lp-hero-grid { grid-template-columns: 1fr; gap: 36px; } }
.lp-hero-copy h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1.08; max-width: 16ch; margin: 14px 0 0; }
.lp-hero-copy .lead { margin-top: 18px; font-size: 1.2rem; max-width: 52ch; }
.lp-kind-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-tint); color: var(--brand);
  border: 1px solid var(--brand-soft); border-radius: 999px;
  padding: 5px 13px; font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.lp-bullets { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.lp-bullets li { position: relative; padding-left: 30px; color: var(--ink-2); font-size: 1.04rem; }
.lp-bullets li:before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-11'/%3E%3C/svg%3E") center / 13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-11'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.lp-hero-visual { margin-top: 30px; }
.lp-hero-visual img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.lp-trust { margin-top: 22px; color: var(--muted); font-size: .92rem; }

/* The form card — the page's single conversion target. */
.lp-form-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 26px;
  box-shadow: 0 18px 48px -28px rgba(17, 66, 74, 0.45);
  position: sticky; top: 88px;
}
@media (max-width: 980px) { .lp-form-card { position: static; } }
.lp-form-card h2 { font-size: 1.5rem; margin: 0 0 4px; }
.lp-form-card .lp-form-sub { color: var(--muted); margin: 0 0 18px; font-size: .98rem; }
.lp-form { display: flex; flex-direction: column; gap: 14px; }
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-field > span { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.lp-field > span .req { color: var(--brand); }
.lp-field input, .lp-field select, .lp-field textarea {
  width: 100%; box-sizing: border-box; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; background: #fff; color: var(--ink);
}
.lp-field input:focus, .lp-field select:focus, .lp-field textarea:focus {
  outline: none; border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(28, 93, 104, 0.14);
}
.lp-field textarea { min-height: 92px; resize: vertical; }
.lp-submit { width: 100%; margin-top: 4px; }
.lp-consent { font-size: .82rem; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
.lp-consent a { color: var(--brand); }
.lp-hp { position: absolute; left: -5000px; }
.lp-form-success {
  background: var(--brand-tint); border: 1px solid var(--brand-soft);
  border-radius: var(--radius-lg); padding: 28px 26px;
}
.lp-form-success h2 { color: var(--brand); margin: 0 0 8px; font-size: 1.4rem; }
.lp-form-success p { color: var(--ink-2); margin: 0; }

/* Phone-first variant (meta.compact: true — the booth QR page /lp/event-gift).
   Minimal hero so the form card lands inside the first screen, optional-field
   hint, a 2×2 grid when a features block has four cards, and a confirmation
   panel bold enough to show a person across a table. */
.lp-hero--compact { padding: 26px 0 40px; }
.lp-hero--compact .lp-hero-grid { gap: 26px; }
.lp-hero--compact .lp-hero-copy h1 { font-size: clamp(1.9rem, 5.6vw, 2.9rem); max-width: 18ch; margin-top: 12px; }
.lp-hero--compact .lp-hero-copy .lead { margin-top: 12px; font-size: 1.06rem; }
.lp-hero--compact .lp-form-card { padding: 22px 18px; }
.lp-hero--compact .lp-form-card h2 { font-size: 1.35rem; }
.lp-field .lp-opt { font-weight: 500; color: var(--muted); }
.lp-features:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .lp-features:has(> :nth-child(4)) { grid-template-columns: 1fr; } }
.lp-hero--compact .lp-form-success {
  background: var(--brand); border-color: var(--brand); color: #fafaf3;
  text-align: center; padding: 34px 24px 30px;
}
.lp-hero--compact .lp-form-success::before {
  content: ""; display: block; width: 68px; height: 68px; margin: 0 auto 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%23f5b400'/%3E%3Cpath d='M19 33l9 9 18-20' fill='none' stroke='%2311424A' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lp-hero--compact .lp-form-success h2 { color: #fafaf3; font-size: 2.1rem; margin-bottom: 10px; }
.lp-hero--compact .lp-form-success p { color: rgba(250, 250, 243, .9); font-size: 1.08rem; line-height: 1.5; }
.lp-hero--compact .lp-form-success p + p { margin-top: 10px; }
.lp-hero--compact .lp-form-success p strong { color: #fafaf3; }
.lp-hero--compact .lp-form-success .lp-claim-stamp {
  display: inline-block; margin-top: 18px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .25);
  color: #fafaf3; font-weight: 600; font-size: .95rem; letter-spacing: .02em;
}
.lp-hero--compact .lp-form-success .lp-scroll-hint { display: block; margin-top: 22px; font-size: .92rem; color: rgba(250, 250, 243, .7); }
@media (max-width: 980px) {
  .lp-hero--compact { padding-top: 16px; }
  .lp-hero--compact .lp-hero-grid { gap: 18px; }
}

/* Supporting sections below the fold reuse the site's .section rhythm. */
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 38px; }
@media (max-width: 880px) { .lp-features { grid-template-columns: 1fr; } }
.lp-feature .icon-badge { margin-bottom: 12px; }
.lp-feature h3 { font-size: 1.12rem; margin: 0 0 6px; }
.lp-feature p { color: var(--ink-2); margin: 0; font-size: 1rem; }

.lp-steps { display: grid; gap: 22px; margin-top: 38px; counter-reset: lp-step; }
.lp-step { display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start; }
.lp-step:before {
  counter-increment: lp-step; content: counter(lp-step);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand); color: #fafaf3;
  display: grid; place-items: center; font-weight: 700; font-size: 1.15rem;
}
.lp-step h3 { margin: 6px 0 4px; font-size: 1.12rem; }
.lp-step p { margin: 0; color: var(--ink-2); }

.lp-faq { margin-top: 32px; border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-weight: 600; font-size: 1.08rem; color: var(--ink);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:after {
  content: "+"; position: absolute; right: 6px; top: 16px;
  font-size: 1.5rem; font-weight: 400; color: var(--brand); transition: transform .15s ease;
}
.lp-faq details[open] summary:after { content: "\2212"; }
.lp-faq .lp-faq-a { padding: 0 40px 22px 0; color: var(--ink-2); margin: 0; }

.lp-richtext { color: var(--ink-2); font-size: 1.08rem; max-width: 70ch; }
.lp-richtext p { margin: 0 0 1em; }

/* Minimal footer — copyright + the two legal links only. */
.lp-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 28px 0; }
.lp-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lp-footer .brand-mark img { height: 22px; display: block; opacity: .85; }
.lp-legal { color: var(--muted); font-size: .9rem; }
.lp-legal a { color: var(--ink-2); }

/* "What drives pricing" card — the per-product pricing pages
   (/studio-pricing, /suite-pricing) reuse the lp-* form-first hero inside
   the FULL site chrome (build_site.py `_pricing_page`). */
.pricing-drivers {
  margin-top: 32px; max-width: 460px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px 24px;
}
.pricing-drivers h2 { font-size: 1.05rem; margin: 0; }
.pricing-drivers .lp-bullets { margin-top: 14px; }


/* ----- enhance_site.py: appended at build time ----- */

/* === Rented vs Owned (Tier 1 narrative IP) === */
.rented-owned {
  background: transparent;
}
.rented-owned .eyebrow {
  text-align: center;
  margin-bottom: 16px;
}
.ro-headline {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 18px;
}
.ro-sub {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto 48px;
  color: var(--ink-2);
  font-size: 1.15rem;
  line-height: 1.6;
}
.ro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.ro-card {
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
.ro-card.ro-rented {
  opacity: 0.66;
  filter: grayscale(0.3);
}
.ro-card.ro-owned {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fafaf3;
  border-color: transparent;
  box-shadow: 0 20px 40px -16px rgba(13, 148, 136, 0.35);
  transform: translateY(-4px);
}
.ro-card.ro-owned p { color: #fafaf3; opacity: 0.92; }
.ro-card.ro-owned:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 56px -16px rgba(13, 148, 136, 0.45);
}
/* Linked product cards (repurposed grid) get interactive feedback */
a.ro-card { cursor: pointer; }
a.ro-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.18);
  border-color: var(--brand);
}
a.ro-card .ro-status { transition: transform 0.2s; }
a.ro-card:hover .ro-status { transform: translateX(3px); }

/* ----- ai_ready.py: Ask-AI copy-md button ----- */
.ask-ai-btn--copy {
  cursor: pointer;
  background: var(--bg-card);
  font-family: inherit;
  line-height: inherit;
}
.ask-ai-btn--copy .ask-ai-copy-label { min-width: 0; }
/* /ai_ready.py copy-md CSS */
.ro-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  gap: 10px;
}
.ro-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ro-status {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,0.06);
  color: var(--ink-2);
}
.ro-card.ro-rented .ro-status {
  background: rgba(220, 38, 38, 0.08);
  color: #C10007;
}
.ro-status.ro-owned-status {
  background: rgba(255,255,255,0.18);
  color: #fafaf3;
}
.ro-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 880px) {
  .ro-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ro-grid { grid-template-columns: 1fr; }
}

/* === Animated outcome counters + customer quotes === */
.outcomes-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.outcomes-strip .outcome {
  text-align: center;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: transform 0.3s, box-shadow 0.3s, opacity 0.7s;
}
.outcomes-strip .outcome:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -16px rgba(13, 148, 136, 0.25);
}
.outcomes-strip .outcome-num .accent {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  display: inline-block;
  letter-spacing: -0.02em;
}
.outcomes-strip .outcome-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 8px 0 4px;
  color: var(--ink);
}
.outcomes-strip .outcome-desc {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin: 0 0 18px;
  line-height: 1.5;
}
.outcomes-strip .outcome-quote {
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin: 14px 0 0;
  line-height: 1.5;
}
.outcomes-strip .outcome-quote cite {
  display: block;
  font-style: normal;
  margin-top: 6px;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.8rem;
}
@media (max-width: 880px) {
  .outcomes-strip { grid-template-columns: 1fr; }
}

/* === Campaign vs Product mindset === */
.mindset {
  background: var(--bg-card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ms-headline {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.2;
  text-align: center;
  max-width: 26ch;
  margin: 12px auto 12px;
}
.ms-sub {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 40px;
  color: var(--ink-2);
  font-size: 1.05rem;
}
.ms-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.ms-col {
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg);
}
.ms-col.ms-old { opacity: 0.7; }
.ms-col.ms-new {
  background: transparent;
  border-color: var(--brand);
  box-shadow: 0 16px 40px -16px rgba(13, 148, 136, 0.25);
}
.ms-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fafaf3;
  margin-bottom: 16px;
}
.ms-tag.ms-tag-new {
  background: var(--brand);
  color: #fafaf3;
}
.ms-howmost {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.ms-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ms-col li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  color: var(--ink);
}
.ms-col li:last-child { border-bottom: 0; }
.ms-col.ms-old li::before { content: "× "; color: #C10007; font-weight: 700; margin-right: 6px; }
.ms-col.ms-new li::before { content: "✓ "; color: var(--brand); font-weight: 700; margin-right: 6px; }
.ms-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  color: var(--brand);
  font-weight: 200;
}
.ms-quote {
  max-width: 62ch;
  margin: 48px auto 0;
  padding: 24px 32px;
  text-align: center;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
  border-left: 3px solid var(--brand);
  background: var(--bg);
}
.ms-quote cite {
  display: block;
  margin-top: 12px;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 600;
  color: var(--ink-2);
}
@media (max-width: 880px) {
  .ms-grid { grid-template-columns: 1fr; }
  .ms-arrow { transform: rotate(90deg); padding: 8px 0; }
}

/* === Mega menu v2 — Linear / Plaid-tier polish ===
   Drops the tinted square icon backgrounds (which read as Material-Design 2018)
   in favor of monochrome inline icons. Tighter typography, generous vertical
   rhythm, hairline group dividers, section header, bottom "View all" CTA. */
.nav .menu {
  min-width: 360px;
  padding: 10px;
  left: -18px;
  border-radius: 16px;
  box-shadow: 0 24px 64px -16px rgba(2, 6, 23, 0.18),
              0 2px 8px -2px rgba(2, 6, 23, 0.06);
  border: 1px solid var(--line);
  background: var(--bg-card);
  margin-top: 12px;
}
/* Wider 2-col mega for use-cases */
.nav .has-menu.menu-wide .menu {
  min-width: 720px;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  padding: 16px;
}
.nav .has-menu.menu-wide:hover .menu,
.nav .has-menu.menu-wide:focus-within .menu,
.nav .has-menu.menu-wide .menu:hover { display: grid !important; }

/* Item: spacious vertical rhythm */
.nav .menu a {
  display: grid !important;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  text-decoration: none;
  position: relative;
  transition: background 0.16s ease-out;
}
.nav .menu a:hover {
  background: var(--brand-soft, var(--brand-tint));
  transform: none;
}
.nav .menu a + a { margin-top: 0; }

/* Hairline separator between rows (not at edges) */
.nav .has-menu:not(.menu-wide) .menu a:not(:first-of-type)::before {
  content: "";
  position: absolute;
  left: 16px; right: 16px; top: 0;
  height: 1px;
  background: var(--line);
  opacity: 0.6;
}
.nav .has-menu:not(.menu-wide) .menu a:hover::before,
.nav .has-menu:not(.menu-wide) .menu a:hover + a::before { opacity: 0; }

/* Monochrome inline icons — no background plate */
.nav .menu a .menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  color: var(--ink-2);
  transition: color 0.16s ease-out, transform 0.2s ease-out;
}
.nav .menu a:hover .menu-icon {
  color: var(--brand);
  transform: translateX(1px);
}
.nav .menu a .menu-icon svg {
  width: 20px;
  height: 20px;
}

.nav .menu a .menu-text { min-width: 0; padding-right: 24px; }
.nav .menu a strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 4px;
  letter-spacing: -0.008em;
  transition: color 0.16s ease-out;
}
.nav .menu a span.menu-desc {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.45;
  letter-spacing: -0.003em;
}

/* Arrow that appears on hover — the "you can click this" cue without underline */
.nav .menu a .menu-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  color: var(--brand);
  font-size: 14px;
  transition: opacity 0.16s, transform 0.2s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.nav .menu a:hover .menu-arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.nav .menu a:hover strong { color: var(--brand); }
.nav .menu a::after { display: none; }

/* Footer CTA — the ENTIRE bar is now a clickable button.
   2027-future: glass / inset / subtle. No double-decoration. */
.nav .menu a.menu-footer {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 10px -10px -10px;
  padding: 16px 20px !important;
  border-top: 1px solid var(--line);
  border-radius: 0 0 14px 14px !important;
  background: transparent;
  text-decoration: none !important;
  transition: background 0.2s ease-out, transform 0.2s ease-out;
  position: relative;
  isolation: isolate;
}
.nav .has-menu.menu-wide .menu a.menu-footer {
  margin: 12px -16px -16px;
  padding: 18px 22px !important;
}
.nav .menu a.menu-footer:hover {
  background: transparent;
  transform: none !important;
}
.nav .menu a.menu-footer::before,
.nav .menu a.menu-footer::after { display: none !important; }
.nav .menu a.menu-footer .menu-footer-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav .menu a.menu-footer .menu-footer-text strong {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
}
.nav .menu a.menu-footer .menu-footer-sub {
  font-size: 0.78rem;
  color: var(--ink-2);
  font-weight: 400;
  line-height: 1.4;
}
.nav .menu a.menu-footer .menu-footer-arrow {
  flex-shrink: 0;
  color: var(--brand);
  font-size: 1.1rem;
  font-weight: 500;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nav .menu a.menu-footer:hover .menu-footer-arrow {
  transform: translateX(4px);
}
.nav .menu a.menu-footer:hover .menu-footer-text strong {
  color: var(--brand-2, var(--brand));
}

/* When a menu has a section header */
.nav .menu .menu-section-title {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  padding: 6px 16px 10px;
  margin-bottom: 4px;
}
/* /enhance_site.py CSS */
/* ----- enhance_site.py: demo high-impact polish ----- */

/* AE bio card inside the form card */
.demo-ae {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 0 18px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(13,148,136,0.18);
}
.demo-ae-photo {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px -1px rgba(0,0,0,0.08);
}
.demo-ae-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2, #0d736b) 100%);
  color: #fafaf3;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px -3px rgba(13,148,136,0.35);
  font-family: 'Newsreader', 'Inter', system-ui, sans-serif;
}
.demo-ae-avatar span { display: block; line-height: 1; transform: translateY(-1px); }
.demo-ae-text { line-height: 1.35; min-width: 0; }
.demo-ae-name { margin: 0; font-size: 0.92rem; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo-ae-name strong { font-weight: 600; }
.demo-ae-role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(13,148,136,0.08);
}
.demo-ae-tagline { margin: 2px 0 0; font-size: 0.82rem; color: var(--ink-2); }

/* Form-footer extras: pricing + microtrust + escape valve */
.demo-form-extras {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demo-form-pricing {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
}
.demo-form-pricing strong { font-weight: 600; }
.demo-form-pricing a { color: var(--brand); font-weight: 600; text-decoration: none; }
.demo-form-pricing a:hover { color: var(--brand-2, var(--brand)); }
.demo-form-pricing-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fafaf3;
  font-weight: 700;
  font-size: 0.85rem;
}
.demo-form-microtrust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.demo-form-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.demo-form-escape {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.demo-form-escape a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.15s;
}
.demo-form-escape a:hover {
  color: var(--brand-2, var(--brand));
}

/* "What happens next" 3-step strip */
.demo-next {
  background: var(--bg-card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 64px 0;
}
.demo-next-eyebrow {
  text-align: center;
  margin-bottom: 36px;
}
.demo-next-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  counter-reset: nextstep;
}
.demo-next-step {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s, border-color 0.25s;
}
.demo-next-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(13,148,136,0.18);
  border-color: rgba(13,148,136,0.25);
}
.demo-next-num {
  position: absolute;
  top: -18px;
  left: 24px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2, #0d736b) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fafaf3;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px -6px rgba(13,148,136,0.5);
}
.demo-next-num span { display: block; }
.demo-next-body { margin-top: 8px; }
.demo-next-body h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.demo-next-body p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.55;
}

@media (max-width: 840px) {
  .demo-next-steps { grid-template-columns: 1fr; gap: 24px; }
}
/* /demo extras */

/* ----- developers / API & MCP page ----- */
.dev-code { background:#0e0e0c; border:1px solid #2a2a26; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 50px -28px rgba(0,0,0,.55); }
.dev-code-top { display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid #2a2a26; }
.dev-code-top > span { width:11px; height:11px; border-radius:50%; background:#3a3a36; }
.dev-code-top .dev-code-name { width:auto; height:auto; border-radius:0; background:none; margin-left:10px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:#8a8f86; }
.dev-code-pre { margin:0; padding:20px 22px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.7; color:#d7e0d2; overflow-x:auto; white-space:pre; }
.dev-code-pre .cc { color:#00F890; }
.dev-code-cap { margin:0; padding:11px 22px; border-top:1px solid #2a2a26; font-family:ui-monospace,monospace; font-size:11px; color:#8a8f86; }
.dev-inline { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--bg-card); border:1px solid var(--line); padding:2px 7px; border-radius:6px; font-size:.9em; }
.dev-pill { display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 12px; border-radius:999px; background:var(--brand-tint); color:var(--brand); border:1px solid var(--brand-soft); }
.dev-pill.beta { background:#fff5e0; color:var(--gold-deep); border-color:#f0dca8; }
.dev-chips { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.dev-chip { display:inline-flex; align-items:center; gap:9px; background:var(--bg-card); border:1px solid var(--line); border-radius:999px; padding:10px 18px; font-size:.95rem; color:var(--ink); }
.dev-chip .tk { width:18px; height:18px; border-radius:50%; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; font-size:11px; }
.dev-mcp-card { background:var(--brand); border-radius:var(--radius-lg); padding:26px; color:#dfeae7; }
.dev-mcp-card .row { display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px dashed rgba(255,255,255,.16); }
.dev-mcp-card .row:last-child { border-bottom:0; }
.dev-mcp-card .ic { flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:rgba(0,248,144,.16); color:#00F890; display:grid; place-items:center; font-size:15px; }
.dev-mcp-card b { color:#fff; font-weight:650; font-size:.95rem; }
.dev-mcp-card span { display:block; color:#aec3bf; font-size:.85rem; }
.dev-flow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dev-node { background:var(--bg-card); border:1px solid var(--line); border-radius:10px; padding:12px 16px; font-weight:600; font-size:.9rem; color:var(--ink); }
.dev-node.lh { background:var(--brand); color:#fff; border-color:var(--brand); }
.dev-arrow { color:var(--muted); font-size:1.1rem; }

/* --- Section H2 type: bring back drama ---
   Most h2 sit around 2rem. Bump to clamp() so big-screen sections
   actually breathe. */
.section h2:not(.demo-h1):not(.ms-headline):not(.ro-headline) {
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* --- Product gallery: drop the bordered tiles ---
   Earlier I put a border on .gallery-tile .media-frame to keep them
   readable. Now that we're going "blended and contemporary," replace
   the border with the same shadow-lift treatment as the hero image. */
.product-gallery .gallery-tile .media-frame {
  background: transparent !important;
  border: none !important;
  border-radius: 14px;
  overflow: visible;
}
.product-gallery .gallery-tile .media-frame.has-image > img,
.product-gallery .gallery-tile .media-frame.has-image > picture > img {
  border-radius: 14px;
  filter:
    drop-shadow(0 1px 1px rgba(20, 20, 16, 0.04))
    drop-shadow(0 12px 28px rgba(20, 20, 16, 0.09))
    drop-shadow(0 32px 56px rgba(17, 66, 74, 0.14));
}

/* --- Compare blocks (two_up_block "what's broken / what changes") ---
   Lives on every product + use-case page as bordered card pairs. Currently
   reads like "two more bordered cards in a sea of bordered cards." Drop
   the border + bg-card chrome, lean on subtle background tints + a single
   accent stripe down the left edge to signal which column is which. */
.compare .col {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 28px !important;
  position: relative;
}
.compare .col::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-2);
  opacity: 0.6;
}
.compare .col.bad::before {
  background: #d97757;
  opacity: 0.7;
}
.compare .col h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--brand-2);
}
.compare .col.bad h4 {
  color: #c1572f;
  background: transparent !important;
}
.compare .col.bad {
  background: transparent !important;
}
.compare ul {
  font-size: 1.02rem;
  line-height: 1.6;
}

/* --- Rented vs Owned cards ---
   Keep the conceit (3 grayed rented channels vs 1 elevated EMAIL/OWNED
   card) but drop the bordered chrome on the rented ones — let the
   desaturation + opacity carry the visual. Strengthen the owned card
   pop with a real lift. */
.ro-card.ro-rented {
  background: transparent !important;
  border: none !important;
  padding: 24px 0 !important;
  opacity: 0.55;
}
.ro-card.ro-rented::before {
  display: none;
}
.ro-card.ro-owned {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  border: none !important;
  box-shadow:
    0 1px 1px rgba(20, 20, 16, 0.05),
    0 24px 48px rgba(17, 66, 74, 0.30),
    0 56px 96px rgba(17, 66, 74, 0.20) !important;
  transform: translateY(-8px) !important;
  border-radius: 18px !important;
  padding: 32px !important;
}
.ro-card.ro-owned:hover {
  transform: translateY(-12px) !important;
}
.rented-owned {
  background: transparent;
}

/* --- Stats blocks (.stats with .stat children) ---
   The product pages use stats_block which renders 4 .stat tiles with
   numbers + labels. Currently feels like another row of similar tiles.
   Add a serif-heavy treatment matching outcomes-strip, with subtle
   left-border division. */
.stats { gap: 0 !important; }
.stats .stat {
  padding: 8px 28px 8px 0 !important;
  border-right: 1px solid var(--line);
}
.stats .stat:last-child { border-right: none; padding-right: 0 !important; }
.stats .stat .num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.03em;
}
.stats .stat .num .accent {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats .stat .label {
  font-size: 0.95rem;
  margin-top: 14px;
  color: var(--ink-2);
  max-width: 24ch;
}
@media (max-width: 880px) {
  .stats .stat {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
    padding: 18px 0 !important;
  }
  .stats .stat:last-child { border-bottom: none; }
}

/* --- Mindset section (campaign vs product) ---
   The Mindset section's ms-grid uses bordered columns too. Strip the
   border, keep the visual contrast between campaign (faded) and product
   (full color) sides via opacity + accent stripe like .compare. */
.ms-grid .ms-col {
  background: transparent !important;
  border: none !important;
}
.ms-grid .ms-old {
  opacity: 0.6;
}

/* =================================================================
   === MOBILE-FIRST OVERHAUL
   =================================================================
   Bruce: "people will be scanning us at conferences on phones."
   This block targets viewports ≤640px hard. Goals:
     • Type that doesn't overflow (375px viewport floor)
     • 17px body min, 16px UI min, no clipped strings
     • 44px+ touch targets on every interactive element
     • Container pad 20px (was 24px desktop) so content uses every pixel
     • Hero stacks copy → image with crisp spacing
     • Section padding 56px (was 96px+)
     • CTAs full-width on mobile (one-thumb friendly)
     • Logo strip stays a single legible row (smaller logos, smaller gap)
     • Outcomes/stats stack with the big serif numbers staying readable
     • Sticky bottom-of-viewport CTA when scrolled past the hero —
       the "conference scan to book" pattern. */

/* --- Mobile overflow safety: prevent any element from pushing the page
   wider than the viewport. The hero image, Ask-AI bar, and stray flex
   children were all overflowing 375px viewports. The hero shell uses
   overflow:visible (so the image can bleed past on desktop) so we
   override that at narrow viewports specifically. --- */
@media (max-width: 880px) {
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  .hero, .section, main, .container { overflow-x: hidden !important; }
  img, picture, svg, video { max-width: 100%; height: auto; }
  .hero-grid, .hero-copy, .cta-row, .ask-ai, .product-stack {
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  /* --- Container + section padding --- */
  .container { padding: 0 20px; max-width: 100vw; box-sizing: border-box; }
  .section { padding: 56px 0; }
  .section.tight { padding: 40px 0; }
  body { font-size: 16px; }
  p { max-width: 100%; }

  /* --- Hero on mobile: stacked, copy first, image second --- */
  .hero { padding: 28px 0 40px; }
  .hero .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero h1 {
    font-size: clamp(1.85rem, 8.4vw, 2.4rem);
    line-height: 1.1;
    max-width: none;
    letter-spacing: -0.02em;
  }
  .hero h1 .hero-subline {
    font-size: 0.62em;
    margin-top: 8px;
  }
  .hero p.lead {
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: none;
  }
  .hero .eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
  }
  /* Image cleanly inside the viewport, no horizontal overflow */
  .hero .hero-grid .media-frame.has-image > img,
  .hero .hero-grid .product-stack > .media-frame > img {
    max-height: none;
    width: 100%;
    border-radius: 10px;
    filter:
      drop-shadow(0 1px 1px rgba(20,20,16,0.04))
      drop-shadow(0 10px 20px rgba(20,20,16,0.10));
  }
  .hero .hero-grid > .media-frame,
  .hero .hero-grid > .product-stack {
    margin-right: 0 !important;
  }

  /* --- Buttons full-width-ish on mobile, real touch targets --- */
  .cta-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .cta-row .btn {
    min-height: 48px;
    padding: 14px 22px;
    font-size: 1rem;
    width: 100%;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cta-row .btn.ghost,
  .cta-row .btn.secondary {
    background: transparent;
    border: 1px solid var(--line);
  }

  /* --- Top nav on mobile: bigger tap target on the toggle, the
         open-menu sheet uses safer spacing --- */
  .header-inner { padding: 0; height: 60px; }
  .menu-toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 14px;
    font-size: 0.95rem;
  }
  .nav.open {
    top: 60px;
    padding: 24px 20px 32px;
    gap: 18px;
    /* Bound the drawer to the viewport and scroll its overflow internally so
       the last items (and the CTA) are always reachable instead of being
       clipped off the bottom of the screen. */
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open a,
  .nav.open .has-menu > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 1.05rem;
  }
  /* Mobile sub-menus are tap-to-expand accordions. The .has-menu node
     has a trigger button injected by mobile-nav.js; aria-expanded drives
     the open/closed state. Sub-menu starts collapsed (max-height:0) and
     opens to natural height when the trigger sets aria-expanded=true. */
  .nav.open .has-menu {
    width: 100%;
    display: block;
  }
  .nav.open .has-menu > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-right: 8px;
  }
  .nav.open .has-menu > a::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--muted);
    margin-left: auto;
    transition: transform 0.2s ease;
  }
  .nav.open .has-menu[aria-expanded="true"] > a::after {
    content: "−";
  }
  .nav.open .menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 16px;
    gap: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.28s ease, padding-bottom 0.2s ease;
  }
  .nav.open .has-menu[aria-expanded="true"] .menu {
    max-height: 600px;
    padding-bottom: 12px;
  }
  /* Studio/Suite mega-menus carry a desktop `max-height:none; overflow:visible`
     rule (enhance_site.py, specificity 0,4,0) that otherwise outranks the
     accordion collapse above, leaving the whole product panel expanded on
     mobile. Re-assert the collapse (with !important to beat that rule
     regardless of source order) so they fold like every other sub-menu. The
     product panel has its own 8px padding, so zero it on collapse to avoid a
     leftover sliver. */
  .nav.open .has-menu.menu-product .menu {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  .nav.open .has-menu.menu-product[aria-expanded="true"] .menu {
    max-height: 1000px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .nav.open .menu a {
    font-size: 0.94rem;
    color: var(--ink-2);
    padding: 8px 0;
    display: flex;
    align-items: center;
    min-height: 36px;
  }

  /* --- Ask-AI bar: hidden on small screens ---
     The pill of Claude/ChatGPT/Perplexity deep-link buttons doesn't lay out
     cleanly at phone widths, so we drop it on mobile. It still renders on
     desktop/tablet, where there's room for the full row. --- */
  .ask-ai {
    display: none !important;
  }

  /* --- Logo strip: stays a clean wrapping row at mobile --- */
  .logos-bar {
    gap: 24px;
    padding: 4px 0;
  }
  .logos-bar .logo-img img {
    height: 18px;
    max-width: 110px;
  }

  /* --- Stats + outcomes: stack with big numbers retained --- */
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .stats .stat {
    padding: 18px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  .stats .stat:nth-last-child(-n+1) { border-bottom: none; }
  .stats .stat .num {
    font-size: 2.1rem !important;
  }
  .outcomes-strip { grid-template-columns: 1fr; gap: 0; }
  .outcomes-strip .outcome {
    border-left: none !important;
    border-top: 1px solid var(--line) !important;
    padding: 24px 0 !important;
  }
  .outcomes-strip .outcome:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }
  .outcomes-strip .outcome-num { font-size: 3rem !important; }

  /* --- Two-up / compare: single column, accent stripe stays --- */
  .compare { grid-template-columns: 1fr; gap: 24px; }
  .two-up { grid-template-columns: 1fr; gap: 28px; }

  /* --- Rented-vs-Owned: stack to single column, owned card up top --- */
  .ro-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ro-card.ro-owned { order: -1; }
  .ro-card.ro-rented { padding: 18px 0 !important; }

  /* --- Capabilities grid: single column, image still lifted --- */
  .capabilities-section .grid.cols-2 { grid-template-columns: 1fr !important; gap: 36px; }
  .capabilities-section .product-card .name { font-size: 1.45rem !important; }
  .capabilities-section .product-card .media-frame.has-image > img {
    filter:
      drop-shadow(0 1px 1px rgba(20, 20, 16, 0.04))
      drop-shadow(0 10px 22px rgba(20, 20, 16, 0.10));
  }

  /* --- Section H2: scaled for narrow viewports --- */
  .section h2:not(.demo-h1):not(.ms-headline):not(.ro-headline) {
    font-size: clamp(1.55rem, 6.5vw, 2rem) !important;
    line-height: 1.15;
  }
  .lead { font-size: 1.05rem; line-height: 1.5; }

  /* --- Forms: 44px touch targets, no zoom on focus (16px font) --- */
  input, textarea, select, button {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea { min-height: 96px; }

  /* --- Card padding: less on mobile --- */
  .card { padding: 20px; }
  .product-card { padding: 20px; }

  /* --- Footer: tighter column stack --- */
  .footer { padding: 40px 0 24px; }
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .footer .legal { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* === Sticky-bottom hero CTA on mobile only ===
   Inserted via refine_site.py worker so any page with a hero gets a
   small floating "Book a test drive" pill once the user scrolls past
   the hero. Pattern: people at conferences see the QR, scroll a
   little, then need ONE tap to book. */
@media (max-width: 640px) {
  .mobile-sticky-cta {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    min-height: 52px;
    background: var(--brand);
    color: #fafaf3;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    box-shadow:
      0 4px 12px rgba(20,20,16,0.16),
      0 16px 32px rgba(17,66,74,0.30);
    transform: translateY(140%);
    transition: transform 0.32s cubic-bezier(0.16,1,0.3,1);
  }
  .mobile-sticky-cta.is-visible {
    transform: translateY(0);
  }
  .mobile-sticky-cta:after {
    content: "→";
    font-weight: 400;
  }
  /* Avoid overlap with iOS home-bar safe area */
  @supports (padding: max(0px)) {
    .mobile-sticky-cta {
      bottom: max(16px, env(safe-area-inset-bottom));
    }
  }
}
@media (min-width: 641px) {
  .mobile-sticky-cta { display: none; }
}

/* === END ELEVATION v3 + MOBILE-FIRST === */

/* Floating insight card — uses existing card conventions.
   Visible by default (above-fold safe). Entry transition only when the
   parent product-stack is below the fold and observed by reveal JS. */
.stack-overlay {
  position: absolute;
  z-index: 3;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(20, 20, 16, 0.08),
              0 2px 6px rgba(20, 20, 16, 0.04);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 200px;
}

.stack-overlay-anchor { line-height: 1; }
.stack-overlay-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.stack-overlay-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1;
}
.stack-overlay-delta {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand);
  margin-top: 6px;
}
.stack-overlay-spark {
  width: 56px;
  height: 28px;
  flex-shrink: 0;
}
.stack-overlay-spark path { fill: none; stroke: var(--brand); stroke-width: 2; }
.stack-overlay-spark .fill { fill: rgba(17, 66, 74, 0.10); stroke: none; }

/* Floating status pill — small, less prominent than overlay card */
.stack-pill {
  position: absolute;
  z-index: 3;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(20, 20, 16, 0.08);
  padding: 8px 16px 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.stack-pill::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(17, 66, 74, 0.12);
  flex-shrink: 0;
}
.stack-pill--gold::before {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(245, 180, 0, 0.18);
}

/* Position helpers */
.stack-overlay.--tr  { top: -18px; right: -16px; }
.stack-overlay.--br  { bottom: -18px; right: -16px; }
.stack-overlay.--bl  { bottom: -18px; left: -16px; }
.stack-pill.--bl     { bottom: 18px; left: -18px; }
.stack-pill.--tl     { top: 18px; left: -16px; }
.stack-pill.--tr     { top: 18px; right: -16px; }

/* Mobile: collapse to a clean stack (no floating overlap, no overflow) */
@media (max-width: 720px) {
  .stack-overlay,
  .stack-pill {
    position: static;
    margin: 12px 0 0;
    transform: none;
    box-shadow: 0 4px 14px rgba(20, 20, 16, 0.06);
  }
}

/* Reduced motion: no entry transform (default visibility already 1) */
@media (prefers-reduced-motion: reduce) {
  [data-reveal-blur] { filter: none !important; transition: none !important; }
}


/* === Technique 3: Ambient Brand Glows ===
   Radial gradients at large blur, very low opacity. Derived from brand
   tokens. Pseudo-elements behind content (z-index: -1) with pointer-events:
   none. Parent gets isolation + position:relative + overflow:hidden. */
.brand-ambient {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.brand-ambient::before,
.brand-ambient::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(72px);
}
/* Bruce 2026-05: brand-ambient teal radial glows read as grey wash against
   the cream page bg — neutralized. Class kept for backward compat; pseudo-
   element backgrounds zeroed out. Re-enable later by giving these backgrounds
   if a section explicitly wants a brand glow. */
.brand-ambient::before {
  width: 0; height: 0;
  background: transparent;
}
.brand-ambient::after {
  width: 0; height: 0;
  background: transparent;
}

/* Soft / warm variants — also zeroed. */
.brand-ambient--soft::before,
.brand-ambient--soft::after,
.brand-ambient--warm::before,
.brand-ambient--warm::after { background: transparent; }

/* Dark variant: for sections with dark brand background */
.brand-ambient--dark::before { background: radial-gradient(closest-side, rgba(28, 93, 104, 0.45), transparent 72%); }
.brand-ambient--dark::after  { background: radial-gradient(closest-side, rgba(17, 66, 74, 0.30), transparent 72%); }


/* === Technique 4: Subtle Noise Texture ===
   Inline SVG turbulence. opacity 0.035, soft-light blend. Only on large
   flat-color or gradient areas. Never on dense reading content. */
.has-noise {
  position: relative;
  isolation: isolate;
}
.has-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.65' numOctaves='2' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.has-noise--strong::after { opacity: 0.055; }


/* === Technique 2: Reveal refinement ===
   Existing reveal in polish_site.py uses opacity + translateY. Add a
   tiny blur layer for groups marked with [data-reveal-blur]. Hero is
   excluded (above-fold should never feel slow). */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal-blur] {
    filter: blur(6px);
    transition: filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-reveal-blur].in-view { filter: blur(0); }

  /* Light stagger for child groups marked with [data-reveal-group] */
  [data-reveal-group] > .in-view:nth-child(2) { transition-delay: 0.08s; }
  [data-reveal-group] > .in-view:nth-child(3) { transition-delay: 0.16s; }
  [data-reveal-group] > .in-view:nth-child(4) { transition-delay: 0.24s; }
}
/* /refine_site.py */


/* ----- ai_ready.py: Ask-AI bar ----- */
.ask-ai {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 18px 0 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ask-ai-label {
  grid-column: 1 / -1;
  padding-left: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.ask-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: 0 2px 7px rgba(20, 20, 16, 0.035);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
}
.ask-ai-btn .ask-ai-icon {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--brand);
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.ask-ai-btn:hover {
  background: var(--brand-tint);
  color: var(--brand);
  border-color: var(--brand-soft);
}
.ask-ai-btn:hover .ask-ai-icon { transform: scale(1.15); }
.ask-ai-btn::after { display: none !important; }
.ask-ai-btn--copy {
  padding: 9px 12px;
  font-size: 0.84rem;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .ask-ai {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    gap: 8px;
    margin: 14px 0 4px;
  }
  .ask-ai-label {
    grid-column: 1 / -1;
    padding: 0 2px 2px;
  }
  .ask-ai-btn {
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.8rem;
    padding: 9px 8px;
  }
  .ask-ai-btn--copy { padding: 9px 8px; font-size: 0.82rem; }
}
/* /ai_ready.py CSS */


/* ----- enhance_site.py: Product mega-menu grouping (Plans | Capabilities) ----- */
.nav .has-menu.menu-wide .menu .menu-group-h {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 8px 16px 2px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav .has-menu.menu-wide .menu .menu-group-h:first-child { margin-top: 0; }
.nav .menu .menu-text .menu-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 99px;
  padding: 1px 7px;
  vertical-align: middle;
}
/* ----- enhance_site.py: /demo restructure ----- */

/* Form-first hero — 7/5 split, form on the right */
.demo-hero {
  padding-top: 60px;
  padding-bottom: 32px;
  background: transparent;
}
.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
.demo-copy { padding-top: 12px; }
.demo-h1 {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 18px;
}
.demo-h1 .demo-h1-soft {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.demo-copy .lead {
  max-width: 52ch;
  margin-bottom: 28px;
  font-size: 1.08rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.demo-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.5;
}
.demo-bullets .demo-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fafaf3;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}
.demo-proof {
  border-left: 3px solid var(--brand);
  padding: 12px 18px;
  margin: 24px 0 0;
  background: rgba(13, 148, 136, 0.04);
  border-radius: 0 8px 8px 0;
}
.demo-proof p {
  margin: 0 0 6px;
  font-style: italic;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.5;
}
.demo-proof cite {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-2);
  font-size: 0.85rem;
}

/* Form card — sticky on tall viewports for long forms */
.demo-form-card {
  position: sticky;
  top: 92px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 28px 22px;
  box-shadow: 0 24px 64px -16px rgba(2, 6, 23, 0.12),
              0 2px 8px -2px rgba(2, 6, 23, 0.04);
  scroll-margin-top: 92px;
}
.demo-form-head { margin-bottom: 18px; }
.demo-form-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand);
  margin: 0 0 6px;
}
.demo-form-sub {
  font-size: 0.96rem;
  color: var(--ink-2);
  margin: 0 0 6px;
  line-height: 1.45;
}
.demo-form-fineprint {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin: 14px 0 0;
  opacity: 0.85;
  line-height: 1.45;
}

/* Trustbar styling on the demo page — quieter than homepage version */
.demo-trustbar { padding-top: 24px; padding-bottom: 24px; }
.demo-trust-eyebrow {
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-transform: none;
  text-align: center;
  margin-bottom: 22px;
}
.demo-trustbar .logos-bar img { opacity: 0.75; transition: opacity 0.2s; }
.demo-trustbar .logos-bar img:hover { opacity: 1; }

/* Below-fold "what to bring / what you'll see" — compact 3-col */
.demo-helpers { padding-top: 48px; padding-bottom: 80px; }
.demo-helper-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto;
}
.demo-helper {
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.demo-helper-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
}
.demo-helper ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.55;
}
.demo-helper ul li { margin-bottom: 10px; }
.demo-helper ul li:last-child { margin-bottom: 0; }
.demo-helper.demo-helper-cta {
  background: transparent;
  border-color: rgba(13, 148, 136, 0.2);
}
.demo-helper.demo-helper-cta p { margin: 0; color: var(--ink); line-height: 1.55; font-size: 0.94rem; }
.demo-helper.demo-helper-cta a { color: var(--brand); font-weight: 600; }

@media (max-width: 980px) {
  .demo-grid { grid-template-columns: 1fr; gap: 32px; }
  .demo-form-card { position: static; }
  .demo-helper-grid { grid-template-columns: 1fr; gap: 18px; }
}
/* /demo restructure */

/* ----- enhance_site.py: Comparisons/Integrations re-home ----- */

/* Product dropdowns (Studio / Suite) — each product gets its OWN compact
   dropdown so only one product's space opens at a time. Layout: a prominent
   intro (icon + name + roomy description + CTA), a 3-column grid of icon +
   title + one-liner capability cards, and an Integrations/Comparisons row along
   the bottom. Scoped under `.nav .has-menu.menu-product .menu` so it outranks
   the generic enriched-menu `a` styling (display:grid !important, 14px padding,
   hairline ::before). */
.nav .has-menu.menu-product .menu {
  min-width: 720px;
  padding: 14px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}
/* Each product's icon-badge in the top-nav toggle. The toggle stays a normal
   inline link — same box model as the icon-less items (Capabilities/Use cases/
   Pricing) — so its label sits on the exact same line as theirs. The catch is
   that a 16px glyph is taller than the text, so vertical-align:middle alone
   would grow the line box downward and ride the Studio/Suite labels higher than
   the others once .nav (flex, align-items:center) centered the row. Symmetric
   negative vertical margins (-8px top and bottom) pull the icon's full height
   back out of the line-box calc, so it's optically centered with the label
   without inflating the line. */
.nav .has-menu.menu-product > a .nav-prod-icon { display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin: -8px 6px -8px 0; color: var(--ink-2); transition: color .15s ease; }
.nav .has-menu.menu-product > a .nav-prod-icon svg { display: block; width: 16px; height: 16px; }
.nav .has-menu.menu-product:hover > a .nav-prod-icon,
.nav .has-menu.menu-product > a:hover .nav-prod-icon { color: var(--brand); }

/* Reset the generic mega-menu anchor styling for our custom anchors. */
.nav .has-menu.menu-product .menu a {
  display: inline-flex !important;
  grid-template-columns: none !important;
  gap: 0; margin: 0; padding: 0;
}
.nav .has-menu.menu-product .menu a:hover { background: transparent; transform: none; }
.nav .has-menu.menu-product .menu a::before,
.nav .has-menu.menu-product .menu a::after { content: none !important; display: none !important; }
.nav .has-menu.menu-product .menu .pm-panel { display: block; }

/* Intro — prominent product identity + roomy description + CTA. */
.nav .has-menu.menu-product .menu .pm-intro {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start; gap: 0 14px;
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.nav .has-menu.menu-product .menu .pm-intro-icon { display: flex; width: 26px; height: 26px; margin-top: 1px; color: var(--brand); }
.nav .has-menu.menu-product .menu .pm-intro-icon svg { width: 26px; height: 26px; }
.nav .has-menu.menu-product .menu .pm-intro-body { min-width: 0; }
.nav .has-menu.menu-product .menu .pm-intro-name { display: block; font-size: 1.08rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.nav .has-menu.menu-product .menu .pm-intro-desc { display: block; margin-top: 4px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.nav .has-menu.menu-product .menu a.pm-intro-cta {
  display: inline-flex !important; align-items: center; gap: 5px; align-self: center;
  font-size: .82rem; font-weight: 600; color: var(--brand); white-space: nowrap;
  padding: 8px 13px !important; border-radius: 8px; border: 1px solid var(--line);
  transition: background .15s ease, border-color .15s ease;
}
.nav .has-menu.menu-product .menu a.pm-intro-cta:hover { background: var(--bg); border-color: var(--brand); }

/* Capabilities — 3-column grid of icon + title + one-liner cards. */
.nav .has-menu.menu-product .menu .pm-caps { display: block; }
.nav .has-menu.menu-product .menu .pm-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 8px; row-gap: 2px;
  align-items: stretch;
}
.nav .has-menu.menu-product .menu a.pm-cap {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px; align-items: start;
  padding: 8px 9px; border-radius: 8px;
  white-space: normal; font-weight: 400; color: var(--ink);
  transition: background .15s ease;
}
.nav .has-menu.menu-product .menu a.pm-cap:hover { background: var(--bg); }
.nav .has-menu.menu-product .menu a.pm-cap .pm-cap-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--ink-2); flex-shrink: 0; transition: color .15s ease; }
.nav .has-menu.menu-product .menu a.pm-cap:hover .pm-cap-icon { color: var(--brand); }
.nav .has-menu.menu-product .menu a.pm-cap .pm-cap-icon svg { width: 18px; height: 18px; }
.nav .has-menu.menu-product .menu a.pm-cap .pm-cap-text { min-width: 0; display: block; }
.nav .has-menu.menu-product .menu a.pm-cap .pm-cap-name { display: block; font-size: .85rem; font-weight: 600; line-height: 1.25; color: var(--ink); transition: color .15s ease; }
.nav .has-menu.menu-product .menu a.pm-cap:hover .pm-cap-name { color: var(--brand); }
.nav .has-menu.menu-product .menu a.pm-cap .pm-cap-desc { display: block; font-size: .75rem; line-height: 1.3; color: var(--ink-2); margin-top: 2px; text-wrap: pretty; }

/* Suite-only set-off group. */
.nav .has-menu.menu-product .menu .pm-caps-suite { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.nav .has-menu.menu-product .menu .pm-caps-eyebrow { display: block; margin: 0 0 4px 2px; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Integrations · Comparisons · Onboarding · Pricing — a 2x2 grid along the bottom. */
.nav .has-menu.menu-product .menu .pm-extra-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.nav .has-menu.menu-product .menu a.pm-extra-link {
  display: flex !important; align-items: center; gap: 11px;
  padding: 10px; border-radius: 8px;
  transition: background .15s ease;
}
.nav .has-menu.menu-product .menu a.pm-extra-link:hover { background: var(--bg); }
.nav .has-menu.menu-product .menu .pm-extra-icon { display: flex; width: 18px; height: 18px; color: var(--ink-2); flex-shrink: 0; transition: color .15s ease; }
.nav .has-menu.menu-product .menu a.pm-extra-link:hover .pm-extra-icon { color: var(--brand); }
.nav .has-menu.menu-product .menu .pm-extra-icon svg { width: 18px; height: 18px; }
.nav .has-menu.menu-product .menu .pm-extra-text strong { display: block; font-size: .87rem; font-weight: 600; color: var(--ink); line-height: 1.2; transition: color .15s ease; }
.nav .has-menu.menu-product .menu a.pm-extra-link:hover .pm-extra-text strong { color: var(--brand); }

/* Mobile (accordion nav): drop the per-capability one-liners and condense the
   cards to a 2-column icon + title list; stack the intro + CTA. */
@media (max-width: 900px) {
  .nav .has-menu.menu-product .menu { min-width: 0; padding: 8px; max-height: none; overflow: visible; }
  .nav .has-menu.menu-product .menu .pm-intro { grid-template-columns: 24px 1fr; }
  .nav .has-menu.menu-product .menu .pm-intro-icon { width: 22px; height: 22px; }
  .nav .has-menu.menu-product .menu .pm-intro-icon svg { width: 22px; height: 22px; }
  .nav .has-menu.menu-product .menu a.pm-intro-cta { grid-column: 1 / -1; justify-content: center; margin-top: 8px; }
  .nav .has-menu.menu-product .menu .pm-cap-grid { grid-template-columns: 1fr 1fr; }
  .nav .has-menu.menu-product .menu a.pm-cap .pm-cap-desc { display: none; }
}

/* Comparisons list on the product pages — scannable head-to-head rows. */
.compare-list { list-style: none; padding: 0; margin: 0; max-width: 620px; }
.compare-list li { border-bottom: 1px solid var(--line); }
.compare-list li:first-child { border-top: 1px solid var(--line); }
.compare-list a,
.compare-list .compare-list-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.06rem;
  transition: color .15s ease, padding .15s ease;
}
.compare-list a::after {
  content: "\2192";
  color: var(--brand);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.compare-list a:hover { color: var(--brand); padding-left: 10px; }
.compare-list a:hover::after { opacity: 1; transform: translateX(0); }
.compare-list .compare-list-soon { color: var(--muted); font-weight: 500; cursor: default; }
.compare-list .compare-list-soon::after { content: "Soon"; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ----- enhance_site.py: feature thumbnails + expand modal (polished) ----- */
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px 48px; }
.feature-grid .feature-item { display:grid; grid-template-columns:1fr minmax(180px,260px); gap:26px; align-items:center; }
.feature-grid .feature-copy h4 { margin:6px 0 8px; font-size:1.12rem; }
.feature-grid .feature-copy p { color:var(--ink-2); margin:0; max-width:38ch; line-height:1.55; }
.feature-thumb { position:relative; display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer; border-radius:14px; -webkit-tap-highlight-color:transparent; }
.feature-thumb-img { display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 6px 20px -10px rgba(2,6,23,.25); background:#fff; transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
.feature-thumb-img img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top left; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.feature-thumb:hover .feature-thumb-img { transform:translateY(-3px); box-shadow:0 16px 36px -14px rgba(2,6,23,.42); }
.feature-thumb:hover .feature-thumb-img img { transform:scale(1.05); }
.feature-thumb-cue { position:absolute; bottom:10px; right:10px; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.95); color:var(--ink); font-size:.72rem; font-weight:600; box-shadow:0 2px 8px rgba(2,6,23,.18); opacity:0; transform:translateY(5px); transition:opacity .2s ease, transform .2s ease; }
.feature-thumb:hover .feature-thumb-cue, .feature-thumb:focus-visible .feature-thumb-cue { opacity:1; transform:translateY(0); }
.feature-thumb:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
@media (hover:none){ .feature-thumb-cue{ opacity:1; transform:none; } }
@media (max-width:860px){
  .feature-grid { grid-template-columns:1fr; gap:30px; }
  .feature-grid .feature-item { grid-template-columns:1fr; }
  .feature-thumb { max-width:520px; }
}
.feature-modal[hidden]{ display:none; }
.feature-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:28px; }
.feature-modal-backdrop{ position:absolute; inset:0; background:rgba(13,20,20,.62); opacity:0; transition:opacity .25s ease; }
.feature-modal-dialog{ position:relative; z-index:1; background:var(--bg-card,#fff); border-radius:18px; max-width:920px; width:100%; max-height:90vh; overflow:auto; box-shadow:0 40px 90px -24px rgba(2,6,23,.55); opacity:0; transform:translateY(14px) scale(.985); transition:opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1); }
.feature-modal.is-open .feature-modal-backdrop{ opacity:1; }
.feature-modal.is-open .feature-modal-dialog{ opacity:1; transform:none; }
.feature-modal-figure{ margin:0; background:linear-gradient(180deg,#f6f7f3,#edefe9); border-radius:18px 18px 0 0; padding:24px; }
.feature-modal-figure img{ display:block; width:100%; max-height:58vh; object-fit:contain; border-radius:10px; box-shadow:0 10px 30px -12px rgba(2,6,23,.3); }
.feature-modal-body{ padding:22px 28px 28px; }
.feature-modal-body h3{ margin:0 0 8px; }
.feature-modal-body p{ margin:0; color:var(--ink-2); max-width:66ch; line-height:1.6; }
.feature-modal-close{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.95); font-size:1.4rem; line-height:1; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(2,6,23,.14); }
.feature-modal-close:hover{ background:#fff; }
@media (max-width:560px){ .feature-modal{ padding:0; align-items:flex-end; } .feature-modal-dialog{ max-height:94vh; border-radius:18px 18px 0 0; } .feature-modal-figure{ border-radius:18px 18px 0 0; padding:14px; } }
@media (prefers-reduced-motion:reduce){ .feature-modal-backdrop,.feature-modal-dialog,.feature-thumb-img,.feature-thumb-img img,.feature-thumb-cue{ transition:none; } }
/* In-grid sub-group divider: caps pre-head label + hairline rule. Rendered when
   a capability page's features declare `subgroup:` (Production: Workflow /
   Content creation clusters — see FEATURE_SUBGROUPS in build_site.py). */
.feature-subhead { display:flex; align-items:center; gap:16px; margin:46px 0 26px; }
.feature-subhead:first-of-type { margin-top:30px; }
.feature-subhead .eyebrow { margin:0; white-space:nowrap; }
.feature-subhead::after { content:""; flex:1; height:1px; background:var(--line); }
/* Feature-library numbering (unlisted /features-index.html only — public pages
   never pass `numbers` to feature_grid_html). The chip is the card's permanent
   number from content/features/_numbers.yml; the dashed slot marks a card whose
   numbered image (site/assets/img/features/<n>.png) hasn't been uploaded yet.
   Copy-only cards (no image anywhere) let the copy span the full card width. */
.feat-num { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 8px; margin-left:10px; border-radius:999px; background:var(--brand); color:#fff; font-size:.78rem; font-weight:700; vertical-align:middle; }
.feature-thumb-missing { display:flex; align-items:center; justify-content:center; text-align:center; padding:18px; min-height:120px; border:1.5px dashed var(--line); border-radius:14px; color:var(--muted); font-size:.85rem; line-height:1.5; }
.feature-thumb-missing code { font-size:.8rem; }
.feature-grid .feature-item > .feature-copy:only-child { grid-column:1 / -1; }
.feature-grid .feature-item > .feature-copy:only-child p { max-width:62ch; }

/* ----- enhance_site.py: agents loop graphic ----- */
.agentloop { max-width:960px; margin:0 auto; }
.al-part-label { font:600 .72rem/1 var(--sans,Inter); letter-spacing:.14em; text-transform:uppercase; color:var(--brand); opacity:.8; text-align:center; margin:0 0 6px; }
.al-part-sub { font:500 .9rem/1.4 var(--sans,Inter); color:var(--muted); text-align:center; margin:0 auto 26px; max-width:48ch; }
.al-chip { display:flex; align-items:center; gap:9px; background:var(--bg-card); border:1px solid var(--line); border-radius:13px; padding:10px 14px; box-shadow:0 2px 10px rgba(17,66,74,.06); white-space:nowrap; }
.al-chip .ic { flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand); }
.al-chip .ic svg { width:16px; height:16px; }
.al-chip b { font:600 .9rem/1 var(--sans,Inter); color:var(--ink); }
.al-hub { position:relative; width:620px; height:312px; max-width:100%; margin:0 auto; }
.al-hub svg.wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wire { stroke:var(--brand); stroke-opacity:.28; stroke-width:1.5; stroke-dasharray:4 6; fill:none; }
.wire-dot { fill:var(--brand); }
.al-you { position:absolute; left:310px; top:156px; transform:translate(-50%,-50%); width:120px; height:120px; border-radius:50%; background:var(--brand); color:#fafaf3; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 14px 34px rgba(17,66,74,.3); z-index:2; }
.al-you .ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.16); margin-bottom:6px; }
.al-you .ic svg { width:17px; height:17px; }
.al-you strong { font:600 .95rem/1 var(--sans,Inter); }
.al-you span { font:500 .68rem/1.2 var(--sans,Inter); color:rgba(250,250,243,.82); margin-top:3px; }
.al-role { position:absolute; transform:translate(-50%,-50%); z-index:2; }
.al-pipe { position:relative; width:100%; margin:0 auto; }
.al-pipe-row { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:nowrap; }
.al-card { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; gap:5px; background:var(--brand); color:#fafaf3; border-radius:14px; padding:13px 15px; width:118px; box-shadow:0 8px 22px rgba(17,66,74,.2); }
.al-card .ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.16); }
.al-card .ic svg { width:16px; height:16px; }
.al-card strong { font:600 .88rem/1.15 var(--sans,Inter); }
.al-card span { font:500 .72rem/1.25 var(--sans,Inter); color:rgba(250,250,243,.82); }
.al-chev { flex:0 0 auto; color:var(--brand); opacity:.45; }
.al-step { flex:0 0 auto; }
.al-pipe-track { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:60px; z-index:1; overflow:visible; }
.al-pipe-track .rail { fill:none; stroke:var(--brand); stroke-opacity:.18; stroke-width:2; stroke-dasharray:5 7; }
.al-pipe-track .item { fill:var(--brand); }
.al-pipe-track .item-halo { fill:var(--brand); opacity:.16; }
.al-loop2 { position:relative; min-height:260px; margin-top:34px; }
.al-loop2-head { position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.al-loop2-title { font:600 1rem/1.3 var(--sans,Inter); color:var(--ink-2); margin:0; text-align:center; }
.al-loop2 .al-pipe { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); }
.al-badge { display:inline-flex; align-items:center; gap:8px; font:600 .82rem/1 var(--sans,Inter); color:var(--brand); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:9px 16px; box-shadow:0 2px 10px rgba(17,66,74,.06); }
.al-badge svg { width:16px; height:16px; animation:alspin 4s linear infinite; }
@keyframes alspin { to { transform:rotate(360deg); } }
@media (max-width:680px) {
  /* hub: scale the fixed 620px graphic to fit, collapsing layout width with
     symmetric negative margins so it stays centred (.section already clips
     overflow-x on mobile per site.css) */
  .al-hub { transform:scale(.5); transform-origin:top center; height:156px; margin:0 -155px; }
  /* pipeline: stack vertically, chevrons point down, hide the horizontal rail */
  .al-loop2 { min-height:auto; }
  .al-loop2-head { position:static; }
  .al-loop2 .al-pipe { position:static; transform:none; margin-top:20px; }
  .al-pipe-track { display:none; }
  .al-pipe-row { flex-direction:column; gap:8px; }
  .al-chev { transform:rotate(90deg); }
  .al-card, .al-chip.al-step { width:auto; min-width:184px; }
}
@media (prefers-reduced-motion:reduce) {
  .al-badge svg { animation:none; }
  .wire-dot, .al-pipe-track .item, .al-pipe-track .item-halo { display:none; }
}


/* ----- refine_site.py: polish layer ----- */

/* === Technique 1: Layered Product Mockup ===
   Wraps a base product image with 1-2 floating overlay cards.
   Uses existing radius + shadow conventions. Real metrics, restrained. */
.product-stack {
  position: relative;
  isolation: isolate;
}
.product-stack > .media-frame {
  position: relative;
  z-index: 1;
}

/* === Product gallery — 2-up or 3-up image tiles with captions ===
   Used on portfolio/production/intelligence/revenue pages to expose more
   product imagery without wall-of-text feature lists. */
.product-gallery { gap: 28px; }
.product-gallery .gallery-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.product-gallery .gallery-tile .media-frame {
  margin: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.product-gallery .gallery-tile figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.product-gallery .gallery-tile figcaption strong {
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.product-gallery .gallery-tile figcaption span {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.4;
}

/* =================================================================
   === ELEVATION v3 — fold-first, mobile-first
   =================================================================
   Bruce feedback on v2: "you broke the fold; the grey behind the image
   is wrong (image is transparent — let it overlay); mobile experience
   matters because conference scans." Restart direction:
     • Compact hero — CTAs stay above the fold at 900px viewport
     • Image floats on transparent bg — NO wash, NO radial glow behind
     • Keep a tasteful drop shadow (image lifts, not boxed)
     • Mobile-first: stack copy + image cleanly, no overflow, big
       touch targets, sticky CTA pinned at the bottom of the hero on
       small viewports (the conference-scan pattern) */

/* --- Hero shell — compact, no glow wash, no inherited tints ---
   Bruce flagged a grey box still behind the hero image. Source was the
   `.brand-ambient` + `.has-noise` classes the refine pipeline attaches
   to most sections — their pseudo-elements paint a radial gradient and
   a turbulence-noise overlay. Both must be killed on the hero so the
   transparent PNG floats on the plain section background only. */
.hero {
  background: var(--bg);
  padding: 56px 0 64px;
  border-bottom: none !important;
  position: relative;
  overflow: visible;
}
.hero.brand-ambient::before,
.hero.brand-ambient::after,
.hero.has-noise::after {
  display: none !important;
  content: none !important;
}
.hero .hero-grid {
  /* Image column ~57% so the mockup reads big without crushing the copy.
     With the bleed-right (-3vw) on wide viewports + 12px image radius,
     the rendered image feels substantially larger than the column track. */
  grid-template-columns: minmax(0, 0.95fr) 1.25fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
/* Image bleeds slightly past container on the right at wide viewports
   — feels like it's spilling out of the page instead of contained. */
@media (min-width: 1100px) {
  .hero .hero-grid > .media-frame,
  .hero .hero-grid > .product-stack {
    margin-right: -3vw;
  }
}
@media (max-width: 880px) {
  .hero { padding: 32px 0 48px; }
  .hero .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero .hero-grid > .media-frame,
  .hero .hero-grid > .product-stack {
    margin-right: 0;
  }
}

/* --- Hero typography: balanced — bigger than original, smaller than v2 --- */
.hero h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  max-width: 20ch;
  margin: 0 0 0.5em;
}
.hero h1 .hero-subline {
  font-size: 0.5em;
  display: block;
  margin-top: 10px;
  color: var(--brand);
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.2;
}
.hero p.lead {
  font-size: clamp(1rem, 1.05vw, 1.18rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
  margin-bottom: 1.4em;
}
.hero .eyebrow {
  color: var(--brand-2);
  margin-bottom: 1.2em;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}

/* --- Stacked hero (homepage): eyebrow + H1 run full-width centered on top;
   the serif subline, lead, and CTAs sit left-aligned below, next to the
   media. Markup from build_site.py hero(stacked=True). --- */
.hero-stacked .hero-top {
  text-align: center;
  margin: 0 0 52px;
}
.hero-stacked .hero-top h1 {
  max-width: none;
  margin: 0 auto;
  text-wrap: balance;
}
.hero-stacked .hero-copy .hero-subline {
  /* h2 scale — this line is the hero's second beat, not a caption */
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  color: var(--brand);
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}
@media (max-width: 640px) {
  .hero-stacked .hero-top { margin-bottom: 30px; }
  .hero-stacked .hero-copy .hero-subline { font-size: 1.5rem; }
}

/* --- Hero image: float, don't box ---
   Strip the cascading card chrome from the v2 cascade, but DROP the
   brand-glow radial that was making the area behind the image feel
   like a grey wash. The transparent PNG floats on the page bg with
   only a soft drop shadow lifting it. */
.hero .hero-grid .media-frame,
.hero .hero-grid .media-frame.has-image,
.hero .hero-grid .media-frame.has-image.contain,
.hero .hero-grid .product-stack > .media-frame {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
}
.hero .hero-grid .media-frame.has-image > img,
.hero .hero-grid .product-stack > .media-frame > img {
  width: 100%;
  height: auto;
  /* `max-height: 72vh` lets the image grow on tall viewports but caps
     it at 72% of viewport height so CTAs stay above the 900px fold. */
  max-height: 72vh;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  /* Soft 2-stop shadow — lift without competing brand wash */
  filter:
    drop-shadow(0 1px 1px rgba(20, 20, 16, 0.04))
    drop-shadow(0 22px 36px rgba(20, 20, 16, 0.12));
  transform: translateZ(0);
}
.hero .container { position: relative; z-index: 1; }
/* NOTE: deliberately NO .hero::before glow. Image is transparent —
   let it sit on the cream bg without a colored wash behind it. */

/* --- Section transitions: blend, don't band ---
   Tinted --bg-2 (#f3efe1) bands are limited to the two proof strips
   (.section.band: customer logos + testimonials); .section.alt no longer
   tints (base css). A hard color flip at the band edges would feel choppy,
   so fade in/out of the page bg instead. */
.section.band {
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    var(--bg-2) 42%,
    var(--bg-2) 58%,
    var(--bg) 100%
  );
  border-bottom: none !important;
  border-top: none !important;
}
/* If two bands ever sit back-to-back, drop the fade at the shared edge so
   they merge instead of leaving a pale seam between them. */
.section.band:has(+ .section.band) {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 42%, var(--bg-2) 100%);
}
.section.band + .section.band {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-2) 58%, var(--bg) 100%);
}
.section {
  border-bottom: none !important;
}
.section + .section,
.section + .hero {
  border-top: none;
}

/* --- Logo strip: breathing room + tasteful presence ---
   Default rule renders logos tight. Bruce: "logo bar is small and
   squished." Bump gap, lift opacity, allow color on hover. */
.logos-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
  padding: 8px 0;
}
.logos-bar .logo,
.logos-bar .logo-img {
  display: inline-flex;
  align-items: center;
  height: 32px;
}
.logos-bar .logo-img img {
  height: 26px;
  max-width: 160px;
  width: auto;
  opacity: 0.72;
  filter: grayscale(1) brightness(0.9);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.logos-bar .logo-img:hover img {
  opacity: 1;
  filter: grayscale(0) brightness(1);
}

/* --- Outcomes strip: kill the bordered card chrome ---
   Three bordered cards with hover-lift = templated SaaS. Replace with a
   clean stat row separated by hairline dividers, much bigger numbers.
   This is what makes the outcomes section actually *feel* like a stat
   moment instead of three more cards in a sea of cards. */
.outcomes-strip {
  background: transparent;
  border: none;
  padding: 0;
  gap: 0 !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  margin: 0 auto;
}
.outcomes-strip .outcome {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--line) !important;
  padding: 12px 36px !important;
  text-align: left !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}
.outcomes-strip .outcome:first-child {
  border-left: none !important;
  padding-left: 0 !important;
}
.outcomes-strip .outcome:hover {
  transform: none !important;
  box-shadow: none !important;
}
.outcomes-strip .outcome-num {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: 0.35em;
  color: var(--ink);
}
.outcomes-strip .outcome-num .accent {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.outcomes-strip .outcome-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 14px;
}
.outcomes-strip .outcome-desc {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.outcomes-strip .outcome-quote {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-2);
  font-family: var(--serif);
}
.outcomes-strip .outcome-quote cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
}
@media (max-width: 880px) {
  .outcomes-strip { grid-template-columns: 1fr; }
  .outcomes-strip .outcome {
    border-left: none !important;
    border-top: 1px solid var(--line) !important;
    padding: 24px 0 !important;
  }
  .outcomes-strip .outcome:first-child { border-top: none !important; padding-top: 0 !important; }
}

/* --- Capabilities grid: drop bordered card chrome ---
   capabilities_block emits .product-card with image at the bottom of
   each card. The bordered card makes everything feel like the same
   templated tile. Strip the border + bg; let the image (which is now
   bigger and shadow-lifted) carry the visual weight. Keep a single
   subtle bottom rule so the image doesn't visually orphan into the
   card below it. Last row hides the trailing line. */
.capabilities-section .product-card {
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(20, 20, 16, 0.06) !important;
  padding: 8px 8px 36px !important;
  border-radius: 0 !important;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.capabilities-section .product-card:nth-last-child(-n+2) { border-bottom: none !important; }
@media (max-width: 760px) {
  .capabilities-section .product-card:nth-last-child(-n+2) { border-bottom: 1px solid rgba(20, 20, 16, 0.06) !important; }
  .capabilities-section .product-card:last-child { border-bottom: none !important; }
}
.capabilities-section .product-card:hover {
  background: transparent !important;
  border: none !important;
  transform: translateY(-4px) !important;
  box-shadow: none !important;
}
.capabilities-section .product-card .tag {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--brand-2);
  margin-bottom: 14px;
}
.capabilities-section .product-card .name {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 12px;
}
.capabilities-section .product-card .desc {
  margin-bottom: 22px !important;
  font-size: 0.98rem;
  line-height: 1.55;
}
/* Equal-height rows: the card is a flex column (base .product-card) and the
   grid stretches every card in a row to the same height. Pinning the media
   frame to the bottom (margin-top:auto) absorbs copy-length differences
   between the button and the image, so imagery and the bottom rules line up
   across the row. */
.capabilities-section .product-card .media-frame {
  margin-top: auto !important;
}
/* "See X" buttons: the flex column was stretching them edge-to-edge.
   Shrink-wrap and right-align, with a guaranteed gap above the media. */
.capabilities-section .product-card .btn {
  align-self: flex-end;
  width: auto;
  margin-bottom: 22px;
}
.capabilities-section .product-card .media-frame.has-image {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.capabilities-section .product-card .media-frame.has-image > img {
  border-radius: 12px;
  filter:
    drop-shadow(0 1px 1px rgba(20, 20, 16, 0.04))
    drop-shadow(0 16px 32px rgba(20, 20, 16, 0.10))
    drop-shadow(0 40px 72px rgba(17, 66, 74, 0.16));
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.capabilities-section .product-card:hover .media-frame.has-image > img {
  transform: translateY(-2px) scale(1.01);
}
.capabilities-section h2 {
  font-size: clamp(1.9rem, 3vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-bottom: 16px;
}
.capabilities-section .eyebrow {
  margin-bottom: 18px;
}

/* --- Section H2 type: bring back drama ---
   Most h2 sit around 2rem. Bump to clamp() so big-screen sections
   actually breathe. */
.section h2:not(.demo-h1):not(.ms-headline):not(.ro-headline) {
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* --- Product gallery: drop the bordered tiles ---
   Earlier I put a border on .gallery-tile .media-frame to keep them
   readable. Now that we're going "blended and contemporary," replace
   the border with the same shadow-lift treatment as the hero image. */
.product-gallery .gallery-tile .media-frame {
  background: transparent !important;
  border: none !important;
  border-radius: 14px;
  overflow: visible;
}
.product-gallery .gallery-tile .media-frame.has-image > img,
.product-gallery .gallery-tile .media-frame.has-image > picture > img {
  border-radius: 14px;
  filter:
    drop-shadow(0 1px 1px rgba(20, 20, 16, 0.04))
    drop-shadow(0 12px 28px rgba(20, 20, 16, 0.09))
    drop-shadow(0 32px 56px rgba(17, 66, 74, 0.14));
}

/* --- Compare blocks (two_up_block "what's broken / what changes") ---
   Lives on every product + use-case page as bordered card pairs. Currently
   reads like "two more bordered cards in a sea of bordered cards." Drop
   the border + bg-card chrome, lean on subtle background tints + a single
   accent stripe down the left edge to signal which column is which. */
.compare .col {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 28px !important;
  position: relative;
}
.compare .col::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-2);
  opacity: 0.6;
}
.compare .col.bad::before {
  background: #d97757;
  opacity: 0.7;
}
.compare .col h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--brand-2);
}
.compare .col.bad h4 {
  color: #c1572f;
  background: transparent !important;
}
.compare .col.bad {
  background: transparent !important;
}
.compare ul {
  font-size: 1.02rem;
  line-height: 1.6;
}

/* --- Rented vs Owned cards ---
   Keep the conceit (3 grayed rented channels vs 1 elevated EMAIL/OWNED
   card) but drop the bordered chrome on the rented ones — let the
   desaturation + opacity carry the visual. Strengthen the owned card
   pop with a real lift. */
.ro-card.ro-rented {
  background: transparent !important;
  border: none !important;
  padding: 24px 0 !important;
  opacity: 0.55;
}
.ro-card.ro-rented::before {
  display: none;
}
.ro-card.ro-owned {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  border: none !important;
  box-shadow:
    0 1px 1px rgba(20, 20, 16, 0.05),
    0 24px 48px rgba(17, 66, 74, 0.30),
    0 56px 96px rgba(17, 66, 74, 0.20) !important;
  transform: translateY(-8px) !important;
  border-radius: 18px !important;
  padding: 32px !important;
}
.ro-card.ro-owned:hover {
  transform: translateY(-12px) !important;
}
.rented-owned {
  background: transparent;
}

/* --- Stats blocks (.stats with .stat children) ---
   The product pages use stats_block which renders 4 .stat tiles with
   numbers + labels. Currently feels like another row of similar tiles.
   Add a serif-heavy treatment matching outcomes-strip, with subtle
   left-border division. */
.stats { gap: 0 !important; }
.stats .stat {
  padding: 8px 28px 8px 0 !important;
  border-right: 1px solid var(--line);
}
.stats .stat:last-child { border-right: none; padding-right: 0 !important; }
.stats .stat .num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.03em;
}
.stats .stat .num .accent {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats .stat .label {
  font-size: 0.95rem;
  margin-top: 14px;
  color: var(--ink-2);
  max-width: 24ch;
}
@media (max-width: 880px) {
  .stats .stat {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
    padding: 18px 0 !important;
  }
  .stats .stat:last-child { border-bottom: none; }
}

/* --- Mindset section (campaign vs product) ---
   The Mindset section's ms-grid uses bordered columns too. Strip the
   border, keep the visual contrast between campaign (faded) and product
   (full color) sides via opacity + accent stripe like .compare. */
.ms-grid .ms-col {
  background: transparent !important;
  border: none !important;
}
.ms-grid .ms-old {
  opacity: 0.6;
}

/* =================================================================
   === MOBILE-FIRST OVERHAUL
   =================================================================
   Bruce: "people will be scanning us at conferences on phones."
   This block targets viewports ≤640px hard. Goals:
     • Type that doesn't overflow (375px viewport floor)
     • 17px body min, 16px UI min, no clipped strings
     • 44px+ touch targets on every interactive element
     • Container pad 20px (was 24px desktop) so content uses every pixel
     • Hero stacks copy → image with crisp spacing
     • Section padding 56px (was 96px+)
     • CTAs full-width on mobile (one-thumb friendly)
     • Logo strip stays a single legible row (smaller logos, smaller gap)
     • Outcomes/stats stack with the big serif numbers staying readable
     • Sticky bottom-of-viewport CTA when scrolled past the hero —
       the "conference scan to book" pattern. */

/* --- Mobile overflow safety: prevent any element from pushing the page
   wider than the viewport. The hero image, Ask-AI bar, and stray flex
   children were all overflowing 375px viewports. The hero shell uses
   overflow:visible (so the image can bleed past on desktop) so we
   override that at narrow viewports specifically. --- */
@media (max-width: 880px) {
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  .hero, .section, main, .container { overflow-x: hidden !important; }
  img, picture, svg, video { max-width: 100%; height: auto; }
  .hero-grid, .hero-copy, .cta-row, .ask-ai, .product-stack {
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  /* --- Container + section padding --- */
  .container { padding: 0 20px; max-width: 100vw; box-sizing: border-box; }
  .section { padding: 56px 0; }
  .section.tight { padding: 40px 0; }
  body { font-size: 16px; }
  p { max-width: 100%; }

  /* --- Hero on mobile: stacked, copy first, image second --- */
  .hero { padding: 28px 0 40px; }
  .hero .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero h1 {
    font-size: clamp(1.85rem, 8.4vw, 2.4rem);
    line-height: 1.1;
    max-width: none;
    letter-spacing: -0.02em;
  }
  .hero h1 .hero-subline {
    font-size: 0.62em;
    margin-top: 8px;
  }
  .hero p.lead {
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: none;
  }
  .hero .eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
  }
  /* Image cleanly inside the viewport, no horizontal overflow */
  .hero .hero-grid .media-frame.has-image > img,
  .hero .hero-grid .product-stack > .media-frame > img {
    max-height: none;
    width: 100%;
    border-radius: 10px;
    filter:
      drop-shadow(0 1px 1px rgba(20,20,16,0.04))
      drop-shadow(0 10px 20px rgba(20,20,16,0.10));
  }
  .hero .hero-grid > .media-frame,
  .hero .hero-grid > .product-stack {
    margin-right: 0 !important;
  }

  /* --- Mobile hero order: the image graphic sits BELOW the subhead and
         ABOVE the body copy. The media frame is a sibling of .hero-copy, so
         flatten .hero-copy with display:contents and reorder the resulting
         flex children (subhead → image → body → CTAs). --- */
  .hero .hero-grid {
    display: flex;
    flex-direction: column;
  }
  .hero .hero-grid .hero-copy {
    display: contents;
  }
  .hero .hero-grid > .media-frame,
  .hero .hero-grid > .product-stack {
    order: 3;
    margin-top: 4px;
  }
  /* Stacked hero (homepage): eyebrow + h1 live in .hero-top above the grid,
     so the subhead (serif subline) is the grid's first beat. */
  .hero-stacked .hero-grid .hero-copy .hero-subline { order: 1; margin-bottom: 0; }
  .hero-stacked .hero-grid .hero-copy .lead { order: 4; }
  .hero-stacked .hero-grid .hero-copy .cta-row { order: 5; }
  .hero-stacked .hero-grid .hero-copy .hero-meta { order: 6; }
  /* Non-stacked heroes (capability/inner pages): eyebrow + h1 (subhead rides
     inside h1) sit inside .hero-copy, so order them ahead of the image. */
  .hero:not(.hero-stacked) .hero-grid .hero-copy .eyebrow,
  .hero:not(.hero-stacked) .hero-grid .hero-copy .hero-badge { order: 1; }
  .hero:not(.hero-stacked) .hero-grid .hero-copy h1 { order: 2; }
  .hero:not(.hero-stacked) .hero-grid .hero-copy .lead { order: 4; }
  .hero:not(.hero-stacked) .hero-grid .hero-copy .cta-row { order: 5; }
  .hero:not(.hero-stacked) .hero-grid .hero-copy .hero-meta { order: 6; }

  /* --- Buttons full-width-ish on mobile, real touch targets --- */
  .cta-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .cta-row .btn {
    min-height: 48px;
    padding: 14px 22px;
    font-size: 1rem;
    width: 100%;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cta-row .btn.ghost,
  .cta-row .btn.secondary {
    background: transparent;
    border: 1px solid var(--line);
  }

  /* --- Top nav on mobile: bigger tap target on the toggle, the
         open-menu sheet uses safer spacing --- */
  .header-inner { padding: 0 20px; height: 60px; }
  .menu-toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 14px;
    font-size: 0.95rem;
  }
  .nav.open {
    top: 60px;
    padding: 24px 20px 32px;
    gap: 18px;
    /* Bound the drawer to the viewport and scroll its overflow internally so
       the last items (and the CTA) are always reachable instead of being
       clipped off the bottom of the screen. */
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open a,
  .nav.open .has-menu > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 1.05rem;
  }
  /* Mobile sub-menus are tap-to-expand accordions. The .has-menu node
     has a trigger button injected by mobile-nav.js; aria-expanded drives
     the open/closed state. Sub-menu starts collapsed (max-height:0) and
     opens to natural height when the trigger sets aria-expanded=true. */
  .nav.open .has-menu {
    width: 100%;
    display: block;
  }
  .nav.open .has-menu > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-right: 8px;
  }
  .nav.open .has-menu > a::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--muted);
    margin-left: auto;
    transition: transform 0.2s ease;
  }
  .nav.open .has-menu[aria-expanded="true"] > a::after {
    content: "−";
  }
  .nav.open .menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 16px;
    gap: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.28s ease, padding-bottom 0.2s ease;
  }
  .nav.open .has-menu[aria-expanded="true"] .menu {
    max-height: 600px;
    padding-bottom: 12px;
  }
  /* Studio/Suite mega-menus carry a desktop `max-height:none; overflow:visible`
     rule (enhance_site.py, specificity 0,4,0) that otherwise outranks the
     accordion collapse above, leaving the whole product panel expanded on
     mobile. Re-assert the collapse (with !important to beat that rule
     regardless of source order) so they fold like every other sub-menu. The
     product panel has its own 8px padding, so zero it on collapse to avoid a
     leftover sliver. */
  .nav.open .has-menu.menu-product .menu {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  .nav.open .has-menu.menu-product[aria-expanded="true"] .menu {
    max-height: 1000px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .nav.open .menu a {
    font-size: 0.94rem;
    color: var(--ink-2);
    padding: 8px 0;
    display: flex;
    align-items: center;
    min-height: 36px;
  }

  /* --- Ask-AI bar: hidden on small screens ---
     The pill of Claude/ChatGPT/Perplexity deep-link buttons doesn't lay out
     cleanly at phone widths, so we drop it on mobile. It still renders on
     desktop/tablet, where there's room for the full row. --- */
  .ask-ai {
    display: none !important;
  }

  /* --- Logo strip: stays a clean wrapping row at mobile --- */
  .logos-bar {
    gap: 24px;
    padding: 4px 0;
  }
  .logos-bar .logo-img img {
    height: 18px;
    max-width: 110px;
  }

  /* --- Stats + outcomes: stack with big numbers retained --- */
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .stats .stat {
    padding: 18px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  .stats .stat:nth-last-child(-n+1) { border-bottom: none; }
  .stats .stat .num {
    font-size: 2.1rem !important;
  }
  .outcomes-strip { grid-template-columns: 1fr; gap: 0; }
  .outcomes-strip .outcome {
    border-left: none !important;
    border-top: 1px solid var(--line) !important;
    padding: 24px 0 !important;
  }
  .outcomes-strip .outcome:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }
  .outcomes-strip .outcome-num { font-size: 3rem !important; }

  /* --- Two-up / compare: single column, accent stripe stays --- */
  .compare { grid-template-columns: 1fr; gap: 24px; }
  .two-up { grid-template-columns: 1fr; gap: 28px; }

  /* --- Rented-vs-Owned: stack to single column, owned card up top --- */
  .ro-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ro-card.ro-owned { order: -1; }
  .ro-card.ro-rented { padding: 18px 0 !important; }

  /* --- Capabilities grid: single column, image still lifted --- */
  .capabilities-section .grid.cols-2 { grid-template-columns: 1fr !important; gap: 36px; }
  .capabilities-section .product-card .name { font-size: 1.45rem !important; }
  .capabilities-section .product-card .media-frame.has-image > img {
    filter:
      drop-shadow(0 1px 1px rgba(20, 20, 16, 0.04))
      drop-shadow(0 10px 22px rgba(20, 20, 16, 0.10));
  }

  /* --- Section H2: scaled for narrow viewports --- */
  .section h2:not(.demo-h1):not(.ms-headline):not(.ro-headline) {
    font-size: clamp(1.55rem, 6.5vw, 2rem) !important;
    line-height: 1.15;
  }
  .lead { font-size: 1.05rem; line-height: 1.5; }

  /* --- Forms: 44px touch targets, no zoom on focus (16px font) --- */
  input, textarea, select, button {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea { min-height: 96px; }

  /* --- Card padding: less on mobile --- */
  .card { padding: 20px; }
  .product-card { padding: 20px; }

  /* --- Footer: tighter column stack --- */
  .footer { padding: 40px 0 24px; }
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .footer .legal { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* === Sticky-bottom hero CTA on mobile only ===
   Inserted via refine_site.py worker so any page with a hero gets a
   small floating "Book a test drive" pill once the user scrolls past
   the hero. Pattern: people at conferences see the QR, scroll a
   little, then need ONE tap to book. */
@media (max-width: 640px) {
  .mobile-sticky-cta {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    min-height: 52px;
    background: var(--brand);
    color: #fafaf3;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    box-shadow:
      0 4px 12px rgba(20,20,16,0.16),
      0 16px 32px rgba(17,66,74,0.30);
    transform: translateY(140%);
    transition: transform 0.32s cubic-bezier(0.16,1,0.3,1);
  }
  .mobile-sticky-cta.is-visible {
    transform: translateY(0);
  }
  .mobile-sticky-cta:after {
    content: "→";
    font-weight: 400;
  }
  /* Avoid overlap with iOS home-bar safe area */
  @supports (padding: max(0px)) {
    .mobile-sticky-cta {
      bottom: max(16px, env(safe-area-inset-bottom));
    }
  }
}
@media (min-width: 641px) {
  .mobile-sticky-cta { display: none; }
}

/* === END ELEVATION v3 + MOBILE-FIRST === */

/* Floating insight card — uses existing card conventions.
   Visible by default (above-fold safe). Entry transition only when the
   parent product-stack is below the fold and observed by reveal JS. */
.stack-overlay {
  position: absolute;
  z-index: 3;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(20, 20, 16, 0.08),
              0 2px 6px rgba(20, 20, 16, 0.04);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 200px;
}

.stack-overlay-anchor { line-height: 1; }
.stack-overlay-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.stack-overlay-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1;
}
.stack-overlay-delta {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand);
  margin-top: 6px;
}
.stack-overlay-spark {
  width: 56px;
  height: 28px;
  flex-shrink: 0;
}
.stack-overlay-spark path { fill: none; stroke: var(--brand); stroke-width: 2; }
.stack-overlay-spark .fill { fill: rgba(17, 66, 74, 0.10); stroke: none; }

/* Floating status pill — small, less prominent than overlay card */
.stack-pill {
  position: absolute;
  z-index: 3;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(20, 20, 16, 0.08);
  padding: 8px 16px 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.stack-pill::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(17, 66, 74, 0.12);
  flex-shrink: 0;
}
.stack-pill--gold::before {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(245, 180, 0, 0.18);
}

/* Position helpers */
.stack-overlay.--tr  { top: -18px; right: -16px; }
.stack-overlay.--br  { bottom: -18px; right: -16px; }
.stack-overlay.--bl  { bottom: -18px; left: -16px; }
.stack-pill.--bl     { bottom: 18px; left: -18px; }
.stack-pill.--tl     { top: 18px; left: -16px; }
.stack-pill.--tr     { top: 18px; right: -16px; }

/* Mobile: collapse to a clean stack (no floating overlap, no overflow) */
@media (max-width: 720px) {
  .stack-overlay,
  .stack-pill {
    position: static;
    margin: 12px 0 0;
    transform: none;
    box-shadow: 0 4px 14px rgba(20, 20, 16, 0.06);
  }
}

/* Reduced motion: no entry transform (default visibility already 1) */
@media (prefers-reduced-motion: reduce) {
  [data-reveal-blur] { filter: none !important; transition: none !important; }
}


/* === Technique 3: Ambient Brand Glows ===
   Radial gradients at large blur, very low opacity. Derived from brand
   tokens. Pseudo-elements behind content (z-index: -1) with pointer-events:
   none. Parent gets isolation + position:relative + overflow:hidden. */
.brand-ambient {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.brand-ambient::before,
.brand-ambient::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(72px);
}
/* Default (light section): subtle teal glow upper-right + warm gold accent */
.brand-ambient::before {
  width: 520px; height: 520px;
  top: -180px; right: -140px;
  background: radial-gradient(closest-side, rgba(28, 93, 104, 0.14), transparent 72%);
}
.brand-ambient::after {
  width: 380px; height: 380px;
  bottom: -160px; left: -120px;
  background: radial-gradient(closest-side, rgba(17, 66, 74, 0.08), transparent 72%);
}

/* Soft variant: even paler — for light sections that need just a hint */
.brand-ambient--soft::before { background: radial-gradient(closest-side, rgba(28, 93, 104, 0.08), transparent 72%); }
.brand-ambient--soft::after  { background: radial-gradient(closest-side, rgba(17, 66, 74, 0.05), transparent 72%); }

/* Warm variant: gold accent — for CTA sections, very sparingly */
.brand-ambient--warm::before { background: radial-gradient(closest-side, rgba(245, 180, 0, 0.10), transparent 72%); }
.brand-ambient--warm::after  { background: radial-gradient(closest-side, rgba(28, 93, 104, 0.12), transparent 72%); }

/* Dark variant: for sections with dark brand background */
.brand-ambient--dark::before { background: radial-gradient(closest-side, rgba(28, 93, 104, 0.45), transparent 72%); }
.brand-ambient--dark::after  { background: radial-gradient(closest-side, rgba(17, 66, 74, 0.30), transparent 72%); }


/* === Technique 4: Subtle Noise Texture ===
   Inline SVG turbulence. opacity 0.035, soft-light blend. Only on large
   flat-color or gradient areas. Never on dense reading content. */
.has-noise {
  position: relative;
  isolation: isolate;
}
.has-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.65' numOctaves='2' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.has-noise--strong::after { opacity: 0.055; }


/* === Technique 2: Reveal refinement ===
   Existing reveal in polish_site.py uses opacity + translateY. Add a
   tiny blur layer for groups marked with [data-reveal-blur]. Hero is
   excluded (above-fold should never feel slow). */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal-blur] {
    filter: blur(6px);
    transition: filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-reveal-blur].in-view { filter: blur(0); }

  /* Light stagger for child groups marked with [data-reveal-group] */
  [data-reveal-group] > .in-view:nth-child(2) { transition-delay: 0.08s; }
  [data-reveal-group] > .in-view:nth-child(3) { transition-delay: 0.16s; }
  [data-reveal-group] > .in-view:nth-child(4) { transition-delay: 0.24s; }
}
/* /refine_site.py */


/* ----- refine_site.py: nav dropdown edge-collision -----
   Pairs with nav-dropdown-align.js. Menus are left-anchored to their trigger by
   default; when JS detects one would overflow the right edge it adds
   .menu-align-right to the .has-menu, and the rule below mirrors the anchor so
   the menu grows leftward instead. max-width is a hard safety net so an
   over-wide menu shrinks rather than clips, even before/without JS. The high-
   specificity selector beats the base/v2 `.nav .menu { left: -18px }` rules. */
.nav .menu {
  max-width: calc(100vw - 24px);
}
.nav .has-menu.menu-align-right > .menu {
  left: auto !important;
  right: -18px !important;
}