/* =============================================================
   OSHA PULSE — Marketing v2 (WP-021)
   Lifted from .claude-project/design-system/ui-marketing/
     osha-pulse-marketing v2 - standalone-src.html
   The design HTML is the visual source of truth.

   Tokens come from colors_and_type.css — this file only adds
   page-specific layout/components.

   Class prefix policy: NO prefix. Class names match the design
   HTML byte-for-byte so a designer can grep either file and find
   the same selector. The legacy mk-* classes used by v1 stay in
   marketing.css (still loaded for legal pages and the v1 Home
   until it ships).
   ============================================================= */

/* ------------------------------------------------------------- *
 * Foundations                                                   *
 * ------------------------------------------------------------- */
html.mv2, html.mv2 body { margin: 0; padding: 0; }
html.mv2 { scroll-behavior: smooth; }
html.mv2 body {
  background: var(--op-stone-000);
  font-family: var(--op-font-sans);
  color: var(--op-fg-2);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.mv2 *, html.mv2 *::before, html.mv2 *::after { box-sizing: border-box; }

html.mv2 ::selection { background: var(--op-signal-200); color: var(--op-ink-900); }

/* Blazor's <FocusOnNavigate Selector="h1"> auto-focuses the first H1 on every
   route change (it's an accessibility hook for screen readers). Browsers draw
   the default focus ring on it — but since the H1 is not keyboard-actionable,
   the box is just visual noise. Suppress the outline ONLY on H1s targeted by
   FocusOnNavigate (those Blazor marks with tabindex="-1"); leave the focus
   ring intact for everything that's actually focusable. */
html.mv2 h1[tabindex="-1"]:focus,
html.mv2 h1[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* ------------------------------------------------------------- *
 * Layout helpers                                                *
 * ------------------------------------------------------------- */
.wrap   { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.narrow { max-width: 880px;  margin: 0 auto; padding: 0 40px; }

/* Section rhythm — every other section gets the wash for visual cadence. */
.mv2-section { padding: 88px 0; border-bottom: 1px solid var(--op-border-1); }
.mv2-section.tint  { background: var(--op-stone-050); }
.mv2-section.dark  { background: var(--op-ink-900); color: white; border-bottom-color: rgba(255,255,255,0.06); }

/* ------------------------------------------------------------- *
 * Type                                                          *
 * ------------------------------------------------------------- */
.mv2 h1, .mv2 h2, .mv2 h3, .mv2 h4 {
  font-family: var(--op-font-display);
  color: var(--op-fg-1);
  margin: 0;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1.hero {
  font-family: var(--op-font-display);
  font-weight: 700;
  font-size: clamp(44px, 5.5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--op-fg-1);
  margin: 0;
  text-wrap: balance;
}
h1.hero em { font-style: normal; color: var(--op-signal-600); }
h2.section {
  font-family: var(--op-font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 42px);
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -0.025em;
  color: var(--op-fg-1);
  text-wrap: balance;
}
h2.section em { font-style: normal; color: var(--op-signal-600); }

.eyebrow {
  font-family: var(--op-font-mono);
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--op-signal-600);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 22px;
}
.eyebrow.on-dark { color: var(--op-signal-400); }
.eyebrow .live-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--op-signal-500);
  animation: op-pulse 1400ms var(--op-ease-standard) infinite;
}
@keyframes op-pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
@media (prefers-reduced-motion: reduce) { .eyebrow .live-dot { animation: none; } }

p.sub {
  font-size: 18px; line-height: 1.55;
  color: var(--op-fg-2);
  max-width: 60ch;
  text-wrap: pretty;
  margin: 0;
}
p.section-lead {
  font-size: 17px; line-height: 1.6;
  color: var(--op-fg-3); max-width: 64ch;
  margin: 0 0 40px;
  text-wrap: pretty;
}
p.section-lead.on-dark { color: rgba(255,255,255,0.65); }
h2.section.on-dark { color: white; }

/* ------------------------------------------------------------- *
 * Nav                                                           *
 * ------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--op-border-1);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 40px;
  display: flex; align-items: center; gap: 32px;
}
.nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav .brand .name {
  font-family: var(--op-font-display);
  font-weight: 600; font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--op-fg-1);
}
.nav .brand .name .accent { color: var(--op-signal-600); font-weight: 500; }
.nav-links { display: flex; gap: 4px; margin-left: 20px; }
.nav-links a {
  font-size: 13.5px; font-weight: 500;
  color: var(--op-fg-2);
  padding: 7px 13px; border-radius: 6px;
  text-decoration: none;
  transition: background 200ms var(--op-ease-standard), color 200ms;
}
.nav-links a:hover { background: var(--op-bg-subtle); color: var(--op-fg-1); }
.nav-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.nav-signin {
  font-size: 13.5px; font-weight: 500;
  color: var(--op-fg-2); text-decoration: none;
  padding: 7px 12px;
}
.nav-signin:hover { color: var(--op-fg-1); }

/* Mobile nav (CSS-checkbox toggle, no JS) */
.nav-toggle { display: none; }                       /* hidden checkbox */
.nav-toggle-label {
  display: none;
  cursor: pointer;
  width: 36px; height: 36px;
  padding: 8px;
  margin-left: auto;
  border-radius: 8px;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  position: relative;
  width: 20px; height: 2px;
  background: var(--op-fg-1);
  border-radius: 2px;
  transition: transform 200ms var(--op-ease-standard);
}
.nav-toggle-label span::before { content: ''; position: absolute; top: -6px; }
.nav-toggle-label span::after  { content: ''; position: absolute; top:  6px; }

@media (max-width: 880px) {
  .nav-toggle-label { display: inline-flex; align-items: center; justify-content: center; }

  /* AB#531 — the open menu is ONE panel, laid out by flow.
     .nav-inner wraps so .nav-links and .nav-right land on their own rows
     below the brand, and the CTA follows the last link automatically. The
     previous version positioned each half absolutely and pushed the CTA down
     by a hard-coded `top: calc(100% + 220px)`; the links panel is 185px tall,
     so a 35px band of hero showed between two halves of the same menu, and no
     single constant could be right at every viewport. Nothing here measures
     anything, so there is no number left to drift. */
  .nav-inner { flex-wrap: wrap; row-gap: 0; }

  .nav-toggle-label { margin-left: auto; order: 1; }

  .nav-links,
  .nav-right {
    display: none;
    order: 2;
    /* Full-bleed row. `flex-basis: 100%` alone sizes to .nav-inner's CONTENT
       box (viewport minus its 40px side padding), so the white background
       stopped 80px short of the viewport and the panel's bottom border ended
       mid-screen. Widening by the padding on both sides and bleeding out with
       matching negative margins makes the row span edge to edge, the way the
       absolutely-positioned panels did. */
    flex-basis: calc(100% + 80px);
    margin-left: -40px; margin-right: -40px;
    padding: 0 40px;
    background: white;
  }

  .nav-links {
    flex-direction: column;
    margin-top: 0;
    padding-top: 12px;
    gap: 4px;
  }

  .nav-right {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--op-border-1);
    justify-content: flex-start;
    gap: 12px;
  }

  .nav-toggle:checked ~ .nav-inner .nav-links,
  .nav-toggle:checked ~ .nav-inner .nav-right { display: flex; }
}

/* ------------------------------------------------------------- *
 * CTA buttons                                                   *
 * ------------------------------------------------------------- */
.cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--op-accent);
  background: var(--op-accent); color: white;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background 200ms var(--op-ease-standard), border-color 200ms, transform 200ms;
  white-space: nowrap;
}
.cta:hover { background: var(--op-accent-hover); border-color: var(--op-accent-hover); color: white; }
.cta:active { transform: translateY(1px); }
.cta.ghost {
  background: transparent; color: var(--op-fg-1);
  border-color: var(--op-border-2);
}
.cta.ghost:hover { background: var(--op-stone-050); color: var(--op-fg-1); border-color: var(--op-border-2); }
.cta.lg { padding: 14px 24px; height: 50px; font-size: 15px; }
.cta.sm { padding: 7px 14px; height: 34px; font-size: 13px; }
.cta.invert {
  background: white; color: var(--op-ink-900);
  border-color: white;
}
.cta.invert:hover { background: var(--op-stone-050); color: var(--op-ink-900); border-color: var(--op-stone-050); }
.cta.dark-ghost {
  background: transparent; color: white;
  border-color: rgba(255,255,255,0.24);
}
.cta.dark-ghost:hover { background: rgba(255,255,255,0.06); color: white; }

/* ------------------------------------------------------------- *
 * Hero                                                          *
 * ------------------------------------------------------------- */
.hero-bay {
  padding: 96px 0 80px;
  background:
    radial-gradient(60% 90% at 80% 10%, rgba(12, 136, 152, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, white 0%, var(--op-stone-050) 100%);
  border-bottom: 1px solid var(--op-border-1);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}
.hero-copy { padding-top: 16px; }
.hero-cta-row {
  display: flex; gap: 12px;
  margin-top: 32px; align-items: center;
  flex-wrap: wrap;
}
.hero-fineprint {
  font-family: var(--op-font-mono);
  font-size: 12px;
  color: var(--op-fg-3);
  margin-top: 22px;
  display: flex; gap: 24px; flex-wrap: wrap;
  letter-spacing: 0.02em;
}
.hero-fineprint .check {
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-fineprint .check::before {
  content: '✓';
  color: var(--op-signal-600);
  font-weight: 700;
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-bay  { padding: 64px 0 56px; }
}

/* Severity ticker */
.ticker {
  background: white;
  border: 1px solid var(--op-border-1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px -16px rgba(7,16,26,0.10), 0 4px 8px rgba(7,16,26,0.04);
}
.ticker-header {
  padding: 11px 16px;
  border-bottom: 1px solid var(--op-border-1);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--op-stone-050);
  font-family: var(--op-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--op-fg-3);
  font-weight: 600;
}
.ticker-header .static-label {
  font-family: var(--op-font-mono);
  font-size: 10px;
  color: var(--op-fg-3);
  background: var(--op-stone-100);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--op-border-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.ticker-row {
  display: grid;
  grid-template-columns: 116px 1fr 90px;
  gap: 12px; align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--op-border-1);
  font-size: 13px;
  transition: background 200ms;
}
.ticker-row:last-child { border-bottom: none; }
.ticker-row:hover { background: var(--op-stone-050); }
.ticker-row .text {
  color: var(--op-fg-1);
  font-family: var(--op-font-mono);
  font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticker-row .when {
  font-family: var(--op-font-mono);
  font-size: 11.5px;
  color: var(--op-fg-3);
  text-align: right;
}
.ticker-footnote {
  font-size: 11.5px;
  color: var(--op-fg-3);
  margin: 12px 4px 0;
  line-height: 1.5;
  text-align: center;
}
.ticker-footnote em { font-style: normal; color: var(--op-fg-2); font-weight: 500; }

/* Severity pills */
.pill-sev {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--op-font-sans);
  letter-spacing: 0;
  white-space: nowrap;
}
.pill-sev::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px;
  background: currentColor;
}
.pill-sev.fatality { background: #2A0F12; color: #FFD3D3; }
.pill-sev.willful  { background: var(--op-danger-bg); color: var(--op-danger); }
.pill-sev.repeat   { background: var(--op-warning-bg); color: var(--op-warning); }
.pill-sev.serious  { background: #FAEFE1; color: #94621A; }
.pill-sev.other    { background: var(--op-signal-100); color: var(--op-signal-700); }

/* ------------------------------------------------------------- *
 * Trust strip                                                   *
 * ------------------------------------------------------------- */
.trust {
  background: white;
  padding: 56px 0;
  border-top: 1px solid var(--op-border-1);
  border-bottom: 1px solid var(--op-border-1);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: baseline;
}
.trust-stat .n {
  font-family: var(--op-font-display);
  font-weight: 700;
  font-size: 40px;
  color: var(--op-fg-1);
  letter-spacing: -0.025em;
  line-height: 1.0;
}
.trust-stat .l {
  font-family: var(--op-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--op-fg-3);
  margin-top: 8px;
  line-height: 1.45;
}
.trust-stat .l em { font-style: normal; color: var(--op-fg-2); font-weight: 600; }

@media (max-width: 880px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ------------------------------------------------------------- *
 * 3-step explainer                                              *
 * ------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
}
.step-card {
  background: white;
  border: 1px solid var(--op-border-1);
  border-radius: 14px;
  padding: 28px 28px 26px;
  box-shadow: var(--op-shadow-xs);
  transition: transform 200ms var(--op-ease-standard), box-shadow 200ms;
}
.step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--op-shadow-md);
}
.step-num {
  display: inline-block;
  font-family: var(--op-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--op-signal-700);
  background: var(--op-signal-050);
  border: 1px solid var(--op-signal-100);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.step-card h3 {
  font-family: var(--op-font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--op-fg-1);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  line-height: 1.2;
}
.step-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--op-fg-2);
  margin: 0;
}

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- *
 * Walkthrough — alternating screenshot rows                     *
 * ------------------------------------------------------------- */
.walk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 80px;
}
.walk-row:last-child { margin-bottom: 0; }
.walk-row .copy h3 {
  font-family: var(--op-font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--op-fg-1);
  line-height: 1.15;
  margin: 12px 0 14px;
  text-wrap: balance;
}
.walk-row .copy p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--op-fg-2);
  margin: 0;
  max-width: 50ch;
  text-wrap: pretty;
}
.walk-row .copy .tag {
  font-family: var(--op-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--op-signal-700);
  font-weight: 600;
}
.walk-row.reverse .copy { order: 2; }
.walk-row.reverse .shot { order: 1; }

@media (max-width: 880px) {
  .walk-row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
  .walk-row.reverse .copy, .walk-row.reverse .shot { order: 0; }
}

/* Product screenshot frame */
.shot {
  background: white;
  border-radius: 14px;
  border: 1px solid var(--op-border-1);
  box-shadow: 0 24px 48px -16px rgba(7,16,26,0.18), 0 4px 8px rgba(7,16,26,0.06);
  overflow: hidden;
  transition: box-shadow 300ms;
  position: relative;
}
.shot-demo-pill {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  background: rgba(7,16,26,0.82);
  color: white;
  font-family: var(--op-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.shot:hover { box-shadow: 0 32px 64px -16px rgba(7,16,26,0.24), 0 6px 12px rgba(7,16,26,0.08); }
.shot-chrome {
  height: 30px; padding: 0 14px;
  background: var(--op-stone-100);
  border-bottom: 1px solid var(--op-border-1);
  display: flex; align-items: center; gap: 10px;
}
.shot-chrome .dots { display: flex; gap: 5px; }
.shot-chrome .dots span {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--op-stone-300);
}
.shot-chrome .url {
  flex: 1; text-align: center;
  font-family: var(--op-font-mono);
  font-size: 11px;
  color: var(--op-fg-3);
}
.shot img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------- *
 * Without / With comparison                                     *
 * ------------------------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--op-border-1);
  border-radius: 16px;
  overflow: hidden;
  background: white;
  margin-top: 16px;
}
.compare-col { padding: 32px 36px; }
.compare-col.without {
  background: var(--op-stone-050);
  border-right: 1px solid var(--op-border-1);
}
.compare-col h3 {
  font-family: var(--op-font-display);
  font-weight: 600; font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--op-fg-1);
  margin: 12px 0 22px;
}
.compare-col .lbl {
  font-family: var(--op-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.compare-col.without .lbl { color: var(--op-fg-3); }
.compare-col.with .lbl { color: var(--op-signal-700); }
.compare-col ul {
  margin: 0; padding: 0; list-style: none;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--op-fg-2);
}
.compare-col.without ul li::before { content: '—'; color: var(--op-fg-4); margin-right: 8px; }
.compare-col.with ul li::before { content: '✓'; color: var(--op-signal-600); font-weight: 700; margin-right: 8px; }

@media (max-width: 880px) {
  .compare { grid-template-columns: 1fr; }
  .compare-col.without { border-right: 0; border-bottom: 1px solid var(--op-border-1); }
}

/* ------------------------------------------------------------- *
 * Inbox / PDF side-by-side                                      *
 * ------------------------------------------------------------- */
.inbox-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: flex-start;
}
.inbox-frame {
  background: white;
  border-radius: 14px;
  border: 1px solid var(--op-border-1);
  box-shadow: 0 24px 48px -16px rgba(7,16,26,0.18);
  overflow: hidden;
}
.inbox-email-img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  background: white;
}
.inbox-meta {
  font-family: var(--op-font-mono);
  font-size: 11px;
  color: var(--op-fg-3);
  padding: 10px 16px;
  border-bottom: 1px solid var(--op-border-1);
  display: flex; gap: 16px; flex-wrap: wrap;
  background: var(--op-stone-050);
}
.inbox-meta strong { color: var(--op-fg-1); font-weight: 600; }

.pdf-card {
  background: white;
  border-radius: 14px;
  border: 1px solid var(--op-border-1);
  padding: 16px;
  box-shadow: 0 24px 48px -16px rgba(7,16,26,0.18);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
a.pdf-card:hover {
  box-shadow: 0 28px 56px -14px rgba(7,16,26,0.26);
  transform: translateY(-2px);
}
.pdf-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--op-border-2);
}
.pdf-img-cap {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-family: var(--op-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--op-signal-600);
  letter-spacing: 0.01em;
}
.inbox-pitch h3 {
  font-family: var(--op-font-display);
  font-weight: 600; font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--op-fg-1);
  margin: 0 0 14px;
}
.inbox-pitch p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--op-fg-2);
  margin: 0 0 16px;
}
.inbox-pitch ul {
  list-style: none; padding: 0; margin: 0 0 18px;
  font-size: 14.5px; line-height: 1.85;
  color: var(--op-fg-2);
}
.inbox-pitch ul li::before {
  content: '↳'; color: var(--op-signal-600);
  margin-right: 10px; font-weight: 600;
}

@media (max-width: 880px) {
  .inbox-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ------------------------------------------------------------- *
 * Who it's for (dark cards on dark section)                     *
 * ------------------------------------------------------------- */
.dontdo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
/* 4-card variant — the "Who it's for" row gained a 4th (staffing) card. */
.dontdo-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
  .dontdo-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
.dontdo-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 26px 28px;
}
.dontdo-card h3 {
  font-family: var(--op-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--op-signal-400);
  font-weight: 600;
  margin: 0 0 12px;
}
.dontdo-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
.dontdo-card p strong { color: white; font-weight: 600; }

@media (max-width: 880px) {
  .dontdo-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- *
 * Pricing                                                       *
 * ------------------------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.price-card {
  background: white;
  border: 1px solid var(--op-border-1);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: var(--op-shadow-xs);
  position: relative;
  display: flex; flex-direction: column;
}
.price-card.featured {
  border: 2px solid var(--op-signal-600);
  box-shadow: 0 16px 40px -8px rgba(7,16,26,0.14);
}
.price-card .badge {
  position: absolute; top: -12px; right: 28px;
  background: var(--op-signal-600);
  color: white;
  font-family: var(--op-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
}
.price-card h3 {
  font-family: var(--op-font-display);
  font-weight: 700; font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--op-fg-1);
  margin: 0 0 4px;
}
.price-card .cap {
  font-size: 13px; color: var(--op-fg-3);
  margin-bottom: 18px;
}
.price-card .price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 6px;
}
.price-card .price .n {
  font-family: var(--op-font-display);
  font-weight: 700; font-size: 40px;
  color: var(--op-fg-1);
  letter-spacing: -0.025em; line-height: 1;
}
.price-card .price .per {
  font-size: 14px; color: var(--op-fg-3);
}
.price-card .effective {
  font-family: var(--op-font-mono);
  font-size: 12.5px; color: var(--op-fg-2);
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}
.price-card ul {
  list-style: none; padding: 0; margin: 0 0 26px;
  font-size: 14px;
  flex: 1;
}
.price-card ul li {
  padding: 5px 0;
  color: var(--op-fg-2);
  display: flex; align-items: flex-start; gap: 9px;
}
.price-card ul li::before {
  content: '✓';
  color: var(--op-signal-600);
  font-weight: 700;
  flex-shrink: 0;
}
.price-card .cta { width: 100%; justify-content: center; }

.price-note {
  font-size: 13.5px;
  color: var(--op-fg-3);
  margin-top: 28px;
  text-align: center;
  line-height: 1.55;
}
.price-note a {
  color: var(--op-signal-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 880px) {
  .price-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- *
 * FAQ                                                           *
 * ------------------------------------------------------------- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 8px;
}
.faq-card {
  background: white;
  border: 1px solid var(--op-border-1);
  border-radius: 12px;
  padding: 22px 24px;
  transition: border-color 200ms;
}
.faq-card:hover { border-color: var(--op-border-2); }
.faq-card[open] { border-color: var(--op-border-2); }
.faq-card summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
}
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary::after {
  content: '+';
  font-family: var(--op-font-mono);
  font-weight: 400; font-size: 20px;
  color: var(--op-fg-3); line-height: 1;
  flex-shrink: 0;
  transition: transform 200ms var(--op-ease-standard);
}
.faq-card[open] summary::after { content: '−'; }
.faq-card h3 {
  font-family: var(--op-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--op-fg-1);
  margin: 0 0 0;
  line-height: 1.3;
  flex: 1;
}
.faq-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--op-fg-2);
  margin: 10px 0 0;
}
.faq-card p strong { color: var(--op-fg-1); font-weight: 600; }

@media (max-width: 880px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- *
 * Final CTA                                                     *
 * ------------------------------------------------------------- */
.final-cta {
  padding: 120px 0;
  text-align: center;
  background: var(--op-ink-900);
  color: white;
  position: relative;
  overflow: hidden;
}
.final-cta .pulse-watermark {
  position: absolute;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  opacity: 0.06; pointer-events: none;
}
.final-cta h2 {
  font-family: var(--op-font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: white;
  margin: 0 0 22px;
  text-wrap: balance;
}
.final-cta h2 em { font-style: normal; color: var(--op-signal-400); }
.final-cta p {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0 auto 36px;
  max-width: 56ch;
}
.final-cta .row {
  display: flex; justify-content: center; gap: 12px;
  flex-wrap: wrap;
}
.final-cta .fineprint {
  margin-top: 28px;
  font-family: var(--op-font-mono);
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------- *
 * Footer                                                        *
 * ------------------------------------------------------------- */
footer.site-footer {
  background: #050B14;
  color: rgba(255,255,255,0.6);
  padding: 56px 0 32px;
  border-bottom: 0;
}
.footer-row1 {
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-row1 .brand-block {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.footer-row1 .brand-block .name {
  font-family: var(--op-font-display);
  font-weight: 600; font-size: 19px;
  color: white; letter-spacing: -0.015em;
}
.footer-row1 .brand-block .name .a { color: var(--op-signal-400); font-weight: 500; }
.footer-row1 .tagline {
  font-family: var(--op-font-display);
  font-weight: 500; font-size: 15px;
  color: rgba(255,255,255,0.6);
  max-width: 32ch;
  line-height: 1.5;
  margin: 0;
}
.footer-row1 h5 {
  font-family: var(--op-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  margin: 0 0 12px;
}
.footer-row1 ul { list-style: none; padding: 0; margin: 0; }
.footer-row1 ul li { padding: 5px 0; }
.footer-row1 ul li a {
  font-size: 13.5px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  transition: color 200ms;
}
.footer-row1 ul li a:hover { color: white; }
.footer-row2 {
  max-width: 1200px; margin: 32px auto 0;
  padding: 0 40px;
  display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--op-font-mono);
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  flex-wrap: wrap;
}

@media (max-width: 880px) {
  .footer-row1 { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ------------------------------------------------------------- *
 * Animations — ticker mount-in (no JS)                          *
 * ------------------------------------------------------------- */
@keyframes ticker-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ticker-row { animation: ticker-in 600ms var(--op-ease-standard) both; }
.ticker-row:nth-child(1) { animation-delay: 100ms; }
.ticker-row:nth-child(2) { animation-delay: 200ms; }
.ticker-row:nth-child(3) { animation-delay: 300ms; }
.ticker-row:nth-child(4) { animation-delay: 400ms; }
.ticker-row:nth-child(5) { animation-delay: 500ms; }
.ticker-row:nth-child(6) { animation-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
  .ticker-row { animation: none; }
}

/* ------------------------------------------------------------- *
 * AB#676 — home v3 additions                                    *
 * Audience strap (hero) and the pricing strap that replaced the *
 * full card grid on Home. Ported from the approved prototype at *
 * .claude-project/design-system/marketing-home-v3/home-v3.html. *
 * ------------------------------------------------------------- */
.aud-strap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}
.aud-strap .lbl {
  font-family: var(--op-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--op-fg-3);
  margin-right: 4px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--op-fg-1);
  background: #fff;
  border: 1px solid var(--op-border-2);
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
  transition: border-color 200ms, background 200ms;
}
.chip.first {
  border-color: var(--op-signal-600);
  background: var(--op-signal-050);
  color: var(--op-signal-800);
}
.chip.first::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--op-signal-600);
}
.chip .tag {
  font-family: var(--op-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--op-signal-700);
  margin-left: 2px;
}

/* AB#684 — the .price-strap rules are gone with the strap itself. They were
   scoped entirely under .price-strap, so nothing else lost styling: the
   pricing page's cards use the separate .price-card rules above, which share
   the .badge / .cap / .per class NAMES but not these declarations. */

/* =============================================================
   AB#677 — /who-its-for additions.
   .chip, .hero-bay, .compare and .tag already exist above and are
   reused as-is; only the classes this page introduces are here.
   ============================================================= */

/* The in-page jump row under the hero. Only anchor navigation in the
   site model, and it only ever points within this page. */
.jump { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:28px; }
.jump .lbl { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--op-ink-400); }
.jump .chip { text-decoration:none; }
.jump .chip:hover { border-color:var(--op-signal-400); color:var(--op-ink-800); }

/* One audience block: copy column beside a lists/screenshot column.
   Collapses to a single column on narrow viewports. */
.aud { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.aud > div > .tag { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
.aud > div > .tag .n { font-variant-numeric:tabular-nums; opacity:.65; }
.aud > div > .tag .first {
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    padding:2px 8px; border-radius:999px;
    background:var(--op-signal-100); color:var(--op-signal-700);
}
.aud h2 { font-size:28px; line-height:1.25; margin:0 0 16px; }
.aud p { margin:0 0 14px; }
.aud .cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }

/* "What you watch" / "What lands" — two short lists, side by side. */
.aud-lists { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.aud-list h3 {
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--op-ink-500); margin:0 0 10px;
}
.aud-list ul { margin:0; padding-left:18px; }
.aud-list li { margin-bottom:8px; line-height:1.5; }

/* Real artifact images already in wwwroot — never a new capture (AB#679). */
.aud-shot {
    display:block; width:100%; height:auto; margin-top:28px;
    border:1px solid var(--op-ink-200); border-radius:10px;
}

/* The honest limits beside the four "this is for you" answers. */
.qualifiers { margin:18px 0 0; padding-left:18px; }
.qualifiers li { margin-bottom:10px; line-height:1.55; }

@media (max-width: 860px) {
    .aud { grid-template-columns:1fr; gap:32px; }
    .aud-lists { grid-template-columns:1fr; gap:20px; }
}