/**
 * marketing.css — the Obsidian public marketing site (2026-07-16 rebrand).
 * Home / For Agents / For Photographers / For Brokerages / Features / Pricing /
 * Contact / Sign-in / 404 / 500. Loaded automatically by publicShell for every
 * theme:"obsidian" page, after tokens.css + public.css. Implements the owner's
 * DESIGN.md ("Obsidian — High-Contrast Dark": #09090b zinc canvas, one violet
 * #a78bfa accent used for function only, borders over shadows, all-Geist) at
 * the reference mock's craft level, with the contrast floors from the
 * art-direction spec: 12px minimum type, #a1a1aa body-gray floor (7.76:1),
 * near-black text on violet fills (white-on-violet is 2.7:1 and FAILS).
 *
 * Semantic colors come from tokens.css §2d [data-theme="obsidian"]; the
 * rgba(255,255,255,.02–.10) glass values here are the Obsidian surface
 * language and intentionally match the reference mock.
 *
 * Breakpoints are hardcoded px (custom props can't be read inside @media width
 * conditions): 600 (container gutter / small tablet), 768 (tablet),
 * 1024 (desktop / flat nav), 1280 (flagship air).
 */

/* --- Motion tokens (Obsidian-scoped; base scale in tokens.css stays neutral) - */
[data-theme="obsidian"] {
  --reveal-duration: 700ms;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); /* decelerate, no overshoot */
  --pulse-duration: 2200ms;
}

/* --- Canvas texture: the 40px violet dot grid, decorative-only (5%) --------- */
[data-theme="obsidian"] body {
  background-image: radial-gradient(circle at 1px 1px, rgba(167, 139, 250, 0.05) 1px, transparent 0);
  background-size: 40px 40px;
}

/* --- Sticky blurred header --------------------------------------------------
   Keeps public.css's z-index:45 mobile-nav stacking contract intact. */
[data-theme="obsidian"] .pub-header {
  position: sticky;
  top: 0;
  background: rgba(9, 9, 11, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="obsidian"] .pub-brand {
  letter-spacing: 0.2em;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}
[data-theme="obsidian"] .pub-nav a {
  font-size: 0.75rem; /* 12px floor — never the mock's 10px */
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-secondary);
}
[data-theme="obsidian"] .pub-nav a:hover { color: var(--color-accent); }
[data-theme="obsidian"] .pub-nav a[aria-current="page"] { color: var(--color-text-primary); }
[data-theme="obsidian"] .pub-nav a.pub-nav-cta {
  color: var(--color-text-on-accent);
  border-radius: 999px;
}
[data-theme="obsidian"] .pub-nav a.pub-nav-cta:hover { color: var(--color-text-on-accent); }

/* --- Buttons: uppercase precision, violet glow on hover ---------------------
   Fills/borders/text colors resolve from the §2d tokens via public.css; this
   layer adds the Obsidian voice + micro-interactions (motion spec §3). */
[data-theme="obsidian"] .btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  transition: filter var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
[data-theme="obsidian"] .btn-lg { font-size: 0.875rem; }
[data-theme="obsidian"] .btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(167, 139, 250, 0.35);
}
[data-theme="obsidian"] .btn-primary:active {
  transform: translateY(0) scale(0.97);
  filter: brightness(1.02);
  transition-duration: 60ms;
}
[data-theme="obsidian"] .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--color-text-primary);
}
[data-theme="obsidian"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-border-interactive);
}

/* --- Reveal system (motion spec §1–2) ---------------------------------------
   `.rv` is a marker: fully visible by default. Only <html class="js"> (set
   synchronously by marketing.js) hides unrevealed elements — no-JS visitors
   see everything immediately, correct by construction. */
.rv { opacity: 1; transform: none; }
.js .rv {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.js .rv.rv-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js .rv {
    transform: none;
    /* !important is required to win over tokens.css's global 0.001ms
       reduced-motion kill-switch — a 150ms opacity-only fade is the motion
       spec's deliberate "acknowledge the change" signal, with zero motion
       vector (a11y review #2 confirmed the intent is safe). */
    transition: opacity 150ms linear !important;
    transition-delay: 0ms !important;
  }
  .obs-pill-dot { animation: none; opacity: 1; box-shadow: none; }
  [data-theme="obsidian"] .btn:hover,
  [data-theme="obsidian"] .btn:active,
  .mkt-cap:hover, .mkt-crosslink-card:hover { transform: none; }
}

/* --- Section flow ------------------------------------------------------------ */
.mkt-sections > * + * { margin-top: var(--space-10); }
@media (min-width: 768px)  { .mkt-sections > * + * { margin-top: var(--space-11); } }
@media (min-width: 1024px) { .mkt-sections > * + * { margin-top: var(--space-12); } }
@media (min-width: 1280px) {
  .mkt-sections > .mkt-hero + *,
  .mkt-sections > * + .mkt-termsheet,
  .mkt-sections > .mkt-termsheet + * { margin-top: var(--space-13); }
}

/* --- Band variants: Obsidian has one accent, not three warm hues ------------
   paper/wash/sand/stone (light-era call sites, unchanged in the composers) all
   collapse to one RAISED treatment; ink stays the RECESSED flagship beat. */
.mkt-band { padding-block: var(--space-9); }
@media (min-width: 1024px) { .mkt-band { padding-block: var(--space-11); } }
.mkt-band--paper, .mkt-band--wash, .mkt-band--sand, .mkt-band--stone {
  background: rgba(255, 255, 255, 0.02);
  /* .08 hairlines — .05 was pixel-invisible against the hero scrim's 90%-black
     tail, so the hero→proof seam read as dead space (critic IMPROVE). */
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}
.mkt-band--ink {
  background: var(--obs-surface-lowest);
  border-block: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Shared section header --------------------------------------------------- */
.mkt-section-head { margin-bottom: var(--space-6); }
@media (min-width: 1024px) { .mkt-section-head { margin-bottom: var(--space-8); } }
.mkt-kicker {
  margin: 0 0 var(--space-4);
  font: var(--fw-bold) 0.75rem / 1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--color-accent);
}
.mkt-section-head h1,
.mkt-section-head h2 {
  margin: 0;
  max-width: 24ch;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.15;
}
.mkt-section-head h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1.1; }
.mkt-section-head h1 em,
.mkt-section-head h2 em { font-style: italic; font-weight: var(--fw-light, 300); color: var(--color-text-secondary); }
.mkt-lede {
  margin: var(--space-4) 0 0;
  max-width: 56ch;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  font-weight: 300;
  color: var(--color-text-secondary);
}

/* --- Status pill (hero) ------------------------------------------------------ */
.obs-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 6px 14px;
  border-radius: 999px;
  /* Opaque-dark violet backing: the pill sits over the (brighter, 0.5-opacity)
     hero photo, so its own fill must carry the contrast — violet text on this
     composite ≈ 6.3:1. */
  background-color: rgba(9, 9, 11, 0.72);
  background-image: linear-gradient(rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0.12));
  border: 1px solid rgba(167, 139, 250, 0.30);
  font: var(--fw-semibold) 0.75rem / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent); /* ~6.5:1 on its own tint */
}
.obs-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  /* 5 iterations (~11s) then static — satisfies WCAG 2.2.2's pause/stop
     requirement without an on-page control (a11y review #3). */
  animation: obs-pulse var(--pulse-duration) ease-in-out 5;
}
@keyframes obs-pulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.45); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 4px rgba(167, 139, 250, 0); }
}

/* --- Hero: centered display type over the dimmed night photo -----------------
   AA by construction (see editorialHero() header): the photo never exceeds
   25% opacity over the #09090b canvas, and the 3-stop scrim sits on top —
   worst-case composite backdrop ≈ #2c2c31, so #fafafa ≈ 12:1 and the violet
   gradient ends stay ≥4.5:1 at display sizes. Never raise the opacity, never
   remove the scrim. ⚠ NO z-index on .mkt-hero (mobile-nav stacking contract). */
.mkt-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78vh;
  padding-block: var(--space-11);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}
@media (min-width: 1024px) { .mkt-hero { min-height: min(85vh, 820px); } }
.mkt-hero-media { position: absolute; inset: 0; background: var(--color-bg-canvas); }
.mkt-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* 0.5 opacity + the ≥0.6 mid-scrim below IS the contrast guarantee (critic
     fix round: the hero set is true-night photography, so 0.25 read as
     near-black; 0.5 restores the atmospheric beat). Recomputed worst case —
     a hypothetically all-white photo: 0.5 × (1 − 0.6 scrim) = 20% white
     ≈ #333338 backdrop → #fafafa ≈ 11:1, #a1a1aa ≈ 4.6:1, violet gradient
     ends ≥4.2:1 at display sizes (large-text tier). Change either number and
     you must redo this math. */
  opacity: 0.5;
}
.mkt-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(9, 9, 11, 0.8) 0%,
    rgba(9, 9, 11, 0.6) 38%,
    rgba(9, 9, 11, 0.6) 62%,
    rgba(9, 9, 11, 0.9) 100%);
}
.mkt-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% -20%, rgba(167, 139, 250, 0.10), transparent 70%);
}
.mkt-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mkt-hero h1 {
  margin: 0 0 var(--space-6);
  /* 22ch + balance keeps the violet-gradient tail ("fee stack.") intact on
     one line at desktop — 16ch orphaned "stack." (critic BLOCKER). */
  max-width: 22ch;
  text-wrap: balance;
  overflow-wrap: break-word; /* FIX-A11Y-3 guard, unchanged */
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.mkt-hero--compact h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); max-width: 20ch; }
.mkt-hero h1 em {
  font-style: italic;
  font-weight: 200;
  color: var(--color-text-secondary);
}
.obs-grad {
  background: linear-gradient(135deg, var(--obs-violet-300) 0%, var(--obs-violet-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--obs-violet-400); /* fallback if clip unsupported */
}
.mkt-hero-sub {
  margin: 0 0 var(--space-8);
  max-width: 52ch;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  font-weight: 300;
  color: var(--color-text-secondary);
}
.mkt-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}
.mkt-hero-ctas .btn { width: auto; }
@media (max-width: 599px) { .mkt-hero-ctas { width: 100%; } .mkt-hero-ctas .btn { flex: 1 1 100%; } }

/* --- Glass card language ------------------------------------------------------ */
.mkt-cap,
.mkt-crosslink-card,
.mkt-pricing-col,
.mkt-problem-stat,
.mkt-contact-sent {
  background: rgba(18, 18, 21, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
}
.obs-icon-tile {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(167, 139, 250, 0.10);
  color: var(--color-accent);
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.obs-icon-tile svg { width: 26px; height: 26px; }
.obs-icon-tile--error { background: rgba(239, 68, 68, 0.10); color: var(--color-error-text); margin-bottom: 0; }
.obs-checks {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.obs-checks li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--fw-bold) 0.75rem / 1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-secondary);
}
.obs-checks li::before { content: "✓"; color: var(--color-accent); font-size: 0.9rem; }

/* --- Capability grid (solution cards / persona bento) ------------------------ */
/* align-items:start — a text-only card must never stretch to a photo-card
   sibling's height (the dead-rectangle defect; same fix the pricing grid
   already carries). */
.mkt-capabilities { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 768px)  { .mkt-capabilities { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
@media (min-width: 1024px) { .mkt-capabilities { grid-template-columns: repeat(3, 1fr); } }
/* 4-item groups (Home bento, Features' 4-card groups) balance as 2×2 — the
   fix for the light-era orphaned-4th-card defect. */
@media (min-width: 1024px) { .mkt-capabilities--four { grid-template-columns: repeat(2, 1fr); } }
.mkt-cap {
  margin: 0;
  padding: var(--space-7);
  transition: border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
@media (min-width: 1024px) { .mkt-cap { padding: var(--space-8); } }
.mkt-cap:hover { border-color: rgba(167, 139, 250, 0.4); transform: translateY(-2px); }
.mkt-cap:hover .obs-icon-tile:not(.obs-icon-tile--error) { background: var(--color-accent); color: var(--color-text-on-accent); }
.mkt-cap h2, .mkt-cap h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.mkt-cap p { margin: 0; font-size: 0.9375rem; line-height: 1.6; font-weight: 300; color: var(--color-text-secondary); }
.mkt-cap-media {
  margin: calc(-1 * var(--space-7)) calc(-1 * var(--space-7)) var(--space-5);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--color-bg-surface-1);
}
@media (min-width: 1024px) { .mkt-cap-media { margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-5); } }
.mkt-cap-media img { width: 100%; height: 100%; object-fit: cover; }
.mkt-capabilities--single { display: block; }
.mkt-capabilities--single .mkt-cap { max-width: 64ch; }

/* --- Problem section (Home) --------------------------------------------------- */
.mkt-problem { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .mkt-problem { grid-template-columns: 1.15fr 1fr; gap: var(--space-10); } }
.mkt-problem-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.mkt-problem-row { display: flex; gap: var(--space-5); align-items: flex-start; }
.mkt-problem-row .obs-icon-tile { flex-shrink: 0; width: 48px; height: 48px; border: 1px solid rgba(239, 68, 68, 0.2); }
.mkt-problem-row h3 {
  margin: 0 0 var(--space-2);
  font: var(--fw-semibold) var(--fs-heading-md) / var(--lh-heading-md) var(--font-sans);
  color: var(--color-text-primary);
}
.mkt-problem-row p { margin: 0; max-width: 44ch; font-size: 0.9375rem; line-height: 1.6; font-weight: 300; color: var(--color-text-secondary); }
.mkt-problem-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  aspect-ratio: 16 / 10;
  padding: var(--space-8);
  text-align: center;
  overflow: hidden;
}
.mkt-problem-stat::before {
  content: "";
  position: absolute; inset: -40%;
  background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.06), transparent 60%);
  pointer-events: none;
}
.mkt-problem-figure {
  position: relative;
  margin: 0;
  font: var(--fw-bold) clamp(3.5rem, 6vw, 5rem) / 1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--color-error-text); /* red = problem framing only (DESIGN.md) */
}
.mkt-problem-caption {
  position: relative;
  margin: 0;
  max-width: 30ch;
  font: var(--fw-semibold) 0.75rem / 1.5 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-secondary);
}

/* --- Proof Strip — real listing output, dark gallery ------------------------- */
.mkt-proof-grid {
  list-style: none; margin: 0; padding: 0 0 var(--space-2);
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--space-4);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
}
.mkt-proof-grid:focus-visible { outline: var(--border-thick) solid var(--color-focus-ring); outline-offset: 4px; }
.mkt-proof-grid li { margin: 0; scroll-snap-align: start; }
.mkt-proof-grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--color-bg-surface-1);
}
@media (min-width: 600px) {
  .mkt-proof-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); overflow: visible; padding-bottom: 0; }
}
@media (min-width: 1024px) { .mkt-proof-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- How-It-Works: numbered steps, violet numerals ---------------------------- */
.mkt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .mkt-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
@media (min-width: 1024px) { .mkt-steps { gap: var(--space-9); } }
.mkt-step { margin: 0; padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.mkt-step-num {
  display: block; margin-bottom: var(--space-3);
  font: var(--fw-bold) 0.875rem / 1 var(--font-sans);
  letter-spacing: 0.2em;
  color: var(--color-accent);
  font-feature-settings: "tnum" 1;
}
.mkt-step h3 {
  margin: 0 0 var(--space-2);
  font: var(--fw-semibold) var(--fs-heading-md) / var(--lh-heading-md) var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.mkt-step p { margin: 0; max-width: 40ch; font-size: 0.9375rem; line-height: 1.6; font-weight: 300; color: var(--color-text-secondary); }

/* --- Term-Sheet Comparison: the money module ----------------------------------
   The ClosingVista column wins by violet + weight; the violet cells are 18px
   bold (large-text tier) on a near-black tint — ≥7:1 either way. */
.mkt-termsheet-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow-x: auto;
}
@media (min-width: 1024px) { .mkt-termsheet-panel { padding: var(--space-8); } }
.mkt-termsheet-table { width: 100%; border-collapse: collapse; font-feature-settings: "tnum" 1; }
.mkt-termsheet-table th, .mkt-termsheet-table td { text-align: left; vertical-align: top; padding: var(--space-5) var(--space-4); }
.mkt-termsheet-table th:first-child, .mkt-termsheet-table td:first-child { padding-left: 0; }
.mkt-termsheet-table th:last-child, .mkt-termsheet-table td:last-child { padding-right: 0; }
.mkt-termsheet-table thead th {
  font: var(--fw-semibold) 0.75rem / 1.4 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mkt-termsheet-table thead th.ts-ours { color: var(--color-accent); }
.mkt-termsheet-table tbody th[scope="row"] { font: var(--fw-medium) 1.0625rem / 1.5 var(--font-sans); color: var(--color-text-primary); }
.mkt-termsheet-table tbody td { font: 300 0.9375rem / 1.6 var(--font-sans); color: var(--color-text-secondary); }
.mkt-termsheet-table tbody tr + tr th, .mkt-termsheet-table tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.mkt-termsheet-table .ts-ours { background: rgba(167, 139, 250, 0.05); }
.mkt-termsheet-table td.ts-ours { font: var(--fw-bold) 1.0625rem / 1.5 var(--font-sans); color: var(--color-accent); padding-inline: var(--space-4); }
.mkt-termsheet-table thead th.ts-ours { padding-inline: var(--space-4); }
@media (max-width: 599px) {
  /* Stack each <tr> into a block; explicit ARIA roles in the markup keep the
     table semantics alive after display is overridden. */
  .mkt-termsheet-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mkt-termsheet-table, .mkt-termsheet-table tbody, .mkt-termsheet-table tr, .mkt-termsheet-table th, .mkt-termsheet-table td { display: block; }
  .mkt-termsheet-table tr { padding: var(--space-4) 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
  .mkt-termsheet-table tr:first-child { border-top: 0; padding-top: 0; }
  .mkt-termsheet-table th[scope="row"] { padding: 0 0 var(--space-2); border: 0; }
  .mkt-termsheet-table td { padding: 0 0 var(--space-1); border: 0; }
  .mkt-termsheet-table td.ts-ours { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
  .mkt-termsheet-table td::before { content: attr(data-label) ": "; font-weight: var(--fw-semibold); font-size: 0.75rem; color: var(--color-text-secondary); }
}

/* Mode B — compact single-comparison card */
.mkt-termsheet-card { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .mkt-termsheet-card { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.mkt-termsheet-card .ts-usual, .mkt-termsheet-card .ts-ours { margin: 0; font-size: var(--fs-body-lg); line-height: 1.6; font-feature-settings: "tnum" 1; }
.mkt-termsheet-card .ts-usual { color: var(--color-text-secondary); font-weight: 300; }
.mkt-termsheet-card .ts-ours { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.mkt-termsheet-card .ts-tag {
  display: block; margin-bottom: var(--space-3);
  font: var(--fw-semibold) 0.75rem / 1.2 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--color-text-secondary);
}
.mkt-termsheet-card .ts-ours .ts-tag { color: var(--color-accent); }
.mkt-termsheet-caption { margin: var(--space-5) 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }

/* --- Pending-price marker (retained no-op mechanism) -------------------------- */
.mkt-pending { margin-left: 1px; font-size: 0.72em; font-weight: var(--fw-semibold); color: var(--color-text-secondary); vertical-align: super; line-height: 0; }
.mkt-pending-legend { margin: var(--space-5) 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }
.mkt-pending-legend span { font-weight: var(--fw-semibold); }

/* --- Persona Crosslink --------------------------------------------------------- */
.mkt-crosslink { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px)  { .mkt-crosslink { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
@media (min-width: 1024px) { .mkt-crosslink { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.mkt-crosslink-card {
  position: relative; display: block; text-decoration: none; padding: var(--space-6);
  transition: border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.mkt-crosslink-card:hover { border-color: rgba(167, 139, 250, 0.4); transform: translateY(-2px); }
.mkt-crosslink-card:focus-visible { outline: var(--border-thick) solid var(--color-focus-ring); outline-offset: 2px; }
.mkt-crosslink-card h3 { margin: 0 0 var(--space-2); font: var(--fw-semibold) var(--fs-heading-sm) / var(--lh-heading-sm) var(--font-sans); letter-spacing: -0.01em; color: var(--color-text-primary); }
.mkt-crosslink-card p { margin: 0; padding-right: var(--space-6); font-size: 0.9375rem; line-height: 1.5; font-weight: 300; color: var(--color-text-secondary); }
.mkt-crosslink-arrow { position: absolute; top: var(--space-6); right: var(--space-6); color: var(--color-text-secondary); font-size: var(--fs-heading-sm); transition: color var(--duration-fast) var(--ease-standard); }
.mkt-crosslink-card:hover .mkt-crosslink-arrow { color: var(--color-accent); }

/* --- Photo-backed closing CTA band ---------------------------------------------
   Placard stays OPAQUE (never text on the raw photo); violet corner glows live
   on the band behind the photo, never intersecting placard text. */
.mkt-cta-band--photo { position: relative; overflow: hidden; }
.mkt-cta-band--photo::before, .mkt-cta-band--photo::after {
  content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: rgba(167, 139, 250, 0.12); filter: blur(100px); pointer-events: none;
}
.mkt-cta-band--photo::before { top: -100px; left: -100px; }
.mkt-cta-band--photo::after { bottom: -100px; right: -100px; }
.mkt-cta-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg-surface-1); }
.mkt-cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.55; }
.mkt-hero-placard {
  position: relative; margin-top: calc(-1 * var(--space-8));
  background: var(--color-bg-surface-1); /* opaque — no text ever sits on the photo */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
}
.mkt-hero-placard h2 {
  margin: 0 0 var(--space-3); max-width: 24ch; margin-inline: auto;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.mkt-cta-lede { margin: 0 0 var(--space-6); font-size: var(--fs-body-lg); line-height: 1.6; font-weight: 300; color: var(--color-text-secondary); }
.mkt-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.mkt-cta-actions .btn { width: auto; }
@media (max-width: 599px) { .mkt-cta-actions .btn { width: 100%; } }
@media (min-width: 768px) {
  .mkt-cta-band--photo { display: flex; align-items: center; justify-content: center; min-height: min(52vh, 460px); padding-block: var(--space-10); }
  .mkt-cta-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .mkt-hero-placard { margin-top: 0; max-width: 38rem; padding: var(--space-9); }
}

/* --- Pricing: three glass columns, differentiated by heading only -------------- */
.mkt-pricing { padding-top: var(--space-9); }
.mkt-pricing-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-top: var(--space-2); }
@media (min-width: 768px) { .mkt-pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.mkt-pricing-col { padding: var(--space-6); }
.mkt-pricing-col h2 { margin: 0; font: var(--fw-semibold) var(--fs-heading-md) / var(--lh-heading-md) var(--font-sans); letter-spacing: -0.01em; color: var(--color-text-primary); }
/* Light-era warm head tints collapse to one neutral treatment — accent is
   function, never decoration, and no column reads as "the winner" by color. */
.mkt-pricing-col-head,
.mkt-pricing-col-head--paper, .mkt-pricing-col-head--sand, .mkt-pricing-col-head--stone {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.mkt-pricing-col dl { margin: 0; }
.mkt-pricing-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mkt-pricing-row:first-child { border-top: 0; }
.mkt-pricing-row dt { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 0.9375rem; font-weight: 300; color: var(--color-text-secondary); }
.mkt-pricing-row dd {
  margin: 0; text-align: right; overflow-wrap: anywhere;
  font: var(--fw-semibold) var(--fs-data-md) / var(--lh-data-md) var(--font-sans);
  color: var(--color-text-primary); font-feature-settings: "tnum" 1;
}
.mkt-overage-note { margin: var(--space-6) 0 0; max-width: 60ch; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }
.mkt-pricing-note { margin: var(--space-4) 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }
.mkt-pricing .mkt-pending-legend { margin-top: var(--space-3); }

/* --- Contact ------------------------------------------------------------------- */
.mkt-contact { padding-top: var(--space-9); padding-bottom: var(--space-11); }
.mkt-contact-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 768px) { .mkt-contact-grid { grid-template-columns: 2fr 3fr; gap: var(--space-9); align-items: start; } }
.mkt-contact-intro .mkt-section-head { margin-bottom: var(--space-5); }
.mkt-contact-reassure { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.mkt-contact-reassure li { position: relative; padding-left: var(--space-5); font-size: 0.9375rem; line-height: 1.5; font-weight: 300; color: var(--color-text-secondary); }
.mkt-contact-reassure li::before { content: "—"; position: absolute; left: 0; color: var(--color-accent); }
.mkt-contact-photo { max-width: 22rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.08); background: var(--color-bg-surface-1); }
.mkt-contact-photo img { width: 100%; height: 100%; object-fit: cover; }
.mkt-contact-form { max-width: 34rem; }
.mkt-contact-form .btn { margin-top: var(--space-2); }
.field-optional { font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; color: var(--color-text-secondary); }
/* Inputs: recessed fill + interactive border (4.1:1) + violet focus ring —
   a hairline is never the sole boundary of a control (a11y delta table). */
.mkt-contact-form input,
.mkt-contact-form textarea,
.signin-page input[type="email"] {
  width: 100%;
  background: var(--obs-surface-lowest);
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--fs-body-md);
}
.mkt-contact-form input:focus-visible,
.mkt-contact-form textarea:focus-visible,
.signin-page input[type="email"]:focus-visible {
  outline: var(--border-thick) solid var(--color-focus-ring);
  outline-offset: 1px;
}
.mkt-contact-sent { max-width: 34rem; padding: var(--space-8); }
.mkt-contact-sent h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-text-primary); }
.mkt-contact-sent p { margin: 0 0 var(--space-5); font-size: var(--fs-body-lg); line-height: 1.6; font-weight: 300; color: var(--color-text-secondary); }
.mkt-contact-sent .btn { width: auto; }

/* --- Sign-in: centered glass card on the dot grid ------------------------------ */
.signin-page {
  max-width: 420px;
  margin: var(--space-12) auto;
  padding: var(--space-8);
  background: rgba(18, 18, 21, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
}
.signin-page h1 { font: var(--fw-semibold) clamp(1.5rem, 3vw, 1.875rem) / 1.2 var(--font-display); letter-spacing: -0.01em; margin: 0 0 var(--space-3); color: var(--color-text-primary); }
.signin-page > p { color: var(--color-text-secondary); font-weight: 300; margin: 0 0 var(--space-5); }
.signin-page form.field { display: flex; flex-direction: column; gap: var(--space-3); }
.signin-page label { font: var(--fw-semibold) 0.75rem / 1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-text-secondary); }
.signin-page input[type="email"] { height: 44px; padding: 0 var(--space-3); }
.signin-resend { font-size: var(--fs-body-sm); }
.signin-link-box { word-break: break-all; background: var(--obs-surface-lowest); border: 1px solid rgba(255, 255, 255, 0.08); padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-body-sm); }
.signin-expired-notice { background: var(--color-warning-tint); color: var(--color-warning-text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-body-sm); margin-bottom: var(--space-5); }

/* --- Mega footer ----------------------------------------------------------------
   publicShell renders this structure only on obsidian pages. Fixes the light-era
   footer-crowding defect (three variable-width items fighting space-between). */
[data-theme="obsidian"] .pub-footer.obs-footer {
  display: block;
  background: var(--obs-surface-lowest);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: var(--space-11) var(--space-7) var(--space-8);
}
@media (max-width: 599px) { [data-theme="obsidian"] .pub-footer.obs-footer { padding-inline: var(--space-5); } }
.obs-footer-grid { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
@media (min-width: 768px) { .obs-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); } }
.obs-footer-brand .pub-brand { display: inline-block; margin-bottom: var(--space-4); }
.obs-footer-brand p { margin: 0 0 var(--space-2); max-width: 34ch; font-size: 0.875rem; line-height: 1.6; font-weight: 300; color: var(--color-text-secondary); }
.obs-footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
.obs-footer-col h3 {
  margin: 0 0 var(--space-2);
  font: var(--fw-semibold) 0.75rem / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-text-secondary);
}
/* padding grows each link's hit area to ≥28px (WCAG 2.5.8) without changing
   the visual rhythm (negative margin compensates). */
.obs-footer-col a { font-size: 0.875rem; line-height: 1.4; font-weight: 300; color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); padding-block: 4px; margin-block: -4px; }
.obs-footer-col a:hover { color: var(--color-accent); text-decoration: underline; }
.obs-footer-bottom {
  margin: var(--space-9) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* --- Error/empty state blocks (404/500) ---------------------------------------- */
[data-theme="obsidian"] .state-block .btn { margin-top: var(--space-2); }
/* 404/500 now use a real <h1> (a11y review #5); style it like public.css's
   .state-block h2 so nothing shifts visually. */
[data-theme="obsidian"] .state-block h1 { font: var(--fw-semibold) var(--fs-heading-lg) / 1.25 var(--font-sans); color: var(--color-text-primary); margin: var(--space-4) 0 var(--space-2); }

/* --- Support widget, Obsidian skin (critic IMPROVE) ----------------------------
   The launcher inherits its violet fill from the §2d tokens; this aligns its
   voice with .btn (uppercase precision) on obsidian pages only — light-theme
   pages keep the widget's own look. */
[data-theme="obsidian"] .cvw-launcher { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }