/* ─────────────────────────────────────────────────────────────────────────
   www.codenc.io — marketing site stylesheet
   Plain CSS, no build step. Brand palette mirrors web/src/index.css and
   docs/brand.md: charcoal #1a1a1a, terracotta #b8541f, white. The
   2026-04-29 polish overhaul added gradient accents, deeper shadows,
   smoother hover lifts, and a richer sectional rhythm — same brand
   discipline, more visual confidence.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --charcoal: #1a1a1a;
  --charcoal-soft: #2a2a2a;
  --terracotta: #b8541f;
  --terracotta-50: #fdf5ee;
  --terracotta-100: #fae5d3;
  --terracotta-200: #f3c4a0;
  --terracotta-400: #d77b3f;
  --terracotta-700: #96441b;
  --terracotta-800: #6f3214;
  --white: #ffffff;
  --cream: #faf7f2;

  /* Neutral gray scale, anchored on charcoal at 900. Pure neutral, no tint. */
  --gray-50: #fafafa;
  --gray-100: #f4f4f4;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --radius: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --measure: 65ch;
  --container: 1140px;

  /* Shadows on a charcoal-mixed alpha rather than pure black so the
     tint reads warm, not generic. */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06),
               0 1px 3px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 4px 8px rgba(26, 26, 26, 0.06),
               0 2px 4px rgba(26, 26, 26, 0.04);
  --shadow-lg: 0 14px 30px -10px rgba(26, 26, 26, 0.18),
               0 4px 10px -4px rgba(26, 26, 26, 0.08);
  --shadow-xl: 0 30px 60px -20px rgba(26, 26, 26, 0.25),
               0 10px 20px -8px rgba(26, 26, 26, 0.10);
  --shadow-glow: 0 18px 40px -16px rgba(184, 84, 31, 0.35),
                 0 6px 12px -6px rgba(184, 84, 31, 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--terracotta-100); color: var(--terracotta-800); }

/* ─── Layout ─────────────────────────────────────────────────────────── */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.container.narrow { max-width: 880px; }

/* main provides only the bottom breathing room. section padding stacks
   with main's padding above otherwise. */
main { padding-block: 0 clamp(2rem, 6vw, 5rem); }

section { padding-block: clamp(2.5rem, 6vw, 5rem); position: relative; }

/* Tinted section variants for sectional rhythm without a hard color
   shift. .section-cream has a paper-warm wash; .section-dark inverts
   for photo-style sections; .section-tight reduces vertical pad. */
.section-cream  { background: var(--cream); }
.section-cream + .section-cream { padding-top: 0; }

/* "Built for the Body" — centered-set block. Logo-mark on the left,
   prose on the right; stacks on mobile. The .md modifier on logo-mark
   gives the right visual weight without competing with the hero mark. */
.centered-set {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--terracotta);
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
}
.centered-set h3 {
  margin: 0 0 0.4em;
  font-size: 1.05rem;
  font-weight: 700;
}
.centered-set p { margin: 0 0 0.6em; }
.centered-set p:last-child { margin-bottom: 0; }
.centered-set code {
  background: var(--gray-100);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-size: 0.92em;
}
@media (max-width: 600px) {
  .centered-set { flex-direction: column; gap: 1rem; }
}
.section-dark {
  background: linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-soft) 100%);
  color: var(--gray-100);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: var(--gray-300); }
.section-dark .muted { color: var(--gray-400); }

section.section-tight { padding-block: clamp(1rem, 2vw, 1.75rem); }

/* Hero — different rhythm because of the visual stack on top. */
section.hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(60% 60% at 50% -10%, rgba(184, 84, 31, 0.08) 0%, transparent 70%),
    radial-gradient(40% 40% at 90% 20%, rgba(184, 84, 31, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  overflow: hidden;
}

/* A subtle "accent rule" between sections to add rhythm without lines. */
section + section:not(.section-cream):not(.section-dark)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 12vw, 120px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--terracotta-200), transparent);
  opacity: 0.7;
}

/* ─── Typography ─────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 0.55em;
  max-width: var(--measure);
  color: var(--charcoal);
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4rem); font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

p { margin: 0 0 1em; max-width: var(--measure); }

p.lead {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  color: var(--gray-700);
  line-height: 1.55;
}

/* "Eyebrow" — small uppercase label above a heading. Gives sections
   visual orientation without using illustration. */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--terracotta);
  margin-bottom: 0.85rem;
  padding-bottom: 0.4em;
  position: relative;
}
.eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 2px;
  background: var(--terracotta);
  border-radius: 2px;
}
.section-dark .eyebrow { color: var(--terracotta-200); }
.section-dark .eyebrow::after { background: var(--terracotta-200); }

/* "New" eyebrow variant — emerald with a soft pulse dot.
   Used on the audience-interactivity sections to signal newness
   without screaming. */
.eyebrow.is-new {
  color: #047857;
  padding-left: 1.2em;
}
.eyebrow.is-new::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: livepulse 2.4s ease-out infinite;
}
.eyebrow.is-new::after {
  background: #10b981;
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow.is-new::before { animation: none; }
}

a { color: var(--terracotta); text-decoration: none; transition: color 200ms; }
a:hover { color: var(--terracotta-700); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

ul.bare { list-style: none; padding: 0; margin: 0; }

.muted { color: var(--gray-600); }
.tiny  { font-size: 0.875rem; }

.text-center { text-align: center; }
.center-content { max-width: 720px; margin-inline: auto; }
.center-content p { margin-inline: auto; }

/* ─── Header / Nav ───────────────────────────────────────────────────── */

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(229, 229, 229, 0.7);
  transition: box-shadow 200ms;
}
header.site:hover { box-shadow: var(--shadow-sm); }

header.site .container {
  display: flex;
  align-items: center;
  /* No flex `gap` between brand + nav — gaps are unclickable strips
     that look like "the nav is broken" when a user clicks just-off
     a link and nothing happens. Spacing instead comes from `nav`'s
     `margin-left: auto` (pushes nav right) plus padding on the
     anchors themselves (so the entire visible area is part of some
     anchor's bounding box). 0.95rem padding-block stays so the
     header height is unchanged. */
  padding-block: 0.95rem;
}

header.site .brand {
  display: flex;
  align-items: center;
  /* Same idea — no flex gap between logo-mark and wordmark inside
     the brand anchor. The 0.625rem of visual space comes from
     padding on the wordmark span instead, so the whole horizontal
     run of the brand link is one continuous click target. */
  color: var(--charcoal);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  padding: 0.25rem 0.4rem;
  margin: -0.25rem -0.4rem;        /* offset padding so visual position unchanged */
  border-radius: var(--radius);
}

header.site .brand .wordmark { margin-left: 0.625rem; }
header.site .brand:hover { text-decoration: none; }

/* Tagline pill to the right of the wordmark — "Built for the Body."
   in italic with a terracotta period accent, on a soft cream chip
   that ties the brand color into the header without competing with
   the wordmark. Hidden on the narrow viewports where the nav steals
   the horizontal room. */
header.site .brand .brand-tag {
  margin-left: 0.75rem;
  padding: 0.25em 0.7em;
  background: var(--terracotta-50);
  color: var(--terracotta-700);
  border: 1px solid var(--terracotta-200);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
header.site .brand .brand-tag .dot {
  color: var(--terracotta);
  font-style: normal;
  margin-left: 0.05em;
}
@media (max-width: 760px) {
  header.site .brand .brand-tag { display: none; }
}

header.site nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  /* Tiny gap kept (0.25rem) so the nav doesn't read as a single
     button — but each anchor below has generous padding so the
     dead-zone strip is visually small AND every reasonable click
     lands on something. */
  gap: 0.25rem;
}

header.site nav a.secondary {
  color: var(--gray-700);
  font-weight: 500;
  font-size: 0.95rem;
  /* Wider horizontal padding eats the inter-link gap so the visible
     spacing between buttons is mostly clickable. Vertical padding
     unchanged so the header height doesn't grow. */
  padding: 0.55em 1rem;
  border-radius: var(--radius);
  transition: background-color 200ms, color 200ms;
}
header.site nav a.secondary:hover {
  color: var(--charcoal);
  text-decoration: none;
  background: var(--gray-100);
}
header.site nav a.secondary.active {
  color: var(--charcoal);
  background: var(--terracotta-100);
}

@media (max-width: 600px) {
  header.site nav .secondary { display: none; }
}

/* ─── Logo (CSS-rendered placeholder) ────────────────────────────────── */

.logo-mark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 18%;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}
.logo-mark.md { width: 3rem; height: 3rem; gap: 16%; }
.logo-mark.lg { width: 4rem; height: 4rem; gap: 16%; }
.logo-mark.xl { width: 5rem; height: 5rem; gap: 16%; }
.logo-mark .dot { background: var(--terracotta); border-radius: 50%; }
.logo-mark .square { background: var(--charcoal); border-radius: 8%; }

/* Animated breath on the hero mark — very slow, very gentle, only
   on mark.xl which only mounts in the hero. */
.logo-mark.xl .dot {
  animation: breath 6s ease-in-out infinite;
}
.logo-mark.xl .dot:nth-child(2) { animation-delay: 0.4s; }
.logo-mark.xl .dot:nth-child(3) { animation-delay: 0.8s; }
.logo-mark.xl .dot:nth-child(4) { animation-delay: 1.2s; }
.logo-mark.xl .dot:nth-child(6) { animation-delay: 1.6s; }
.logo-mark.xl .dot:nth-child(7) { animation-delay: 2.0s; }
.logo-mark.xl .dot:nth-child(8) { animation-delay: 2.4s; }
.logo-mark.xl .dot:nth-child(9) { animation-delay: 2.8s; }
@keyframes breath {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-mark.xl .dot { animation: none; }
}

.wordmark {
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--charcoal);
}
.wordmark .dot { color: var(--terracotta); }

/* ─── Beta badge ─────────────────────────────────────────────────────── */

.beta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: linear-gradient(135deg, var(--terracotta-100) 0%, var(--terracotta-50) 100%);
  color: var(--terracotta-700);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4em 0.85em;
  border-radius: var(--radius-full);
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid var(--terracotta-200);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, var(--shadow-sm);
}
.beta::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 0 rgba(184, 84, 31, 0.5);
  animation: betapulse 2.4s ease-out infinite;
}
@keyframes betapulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 84, 31, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(184, 84, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 84, 31, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .beta::before { animation: none; }
}

/* ─── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.85em 1.4em;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 200ms var(--ease),
              box-shadow 200ms var(--ease);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn.primary {
  background: linear-gradient(180deg, var(--terracotta-400) 0%, var(--terracotta) 60%, var(--terracotta-700) 100%);
  background-size: 100% 200%;
  background-position: 0 0;
  color: var(--white);
  box-shadow: var(--shadow-glow), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.btn.primary:hover {
  background-position: 0 100%;
  transform: translateY(-1px);
  box-shadow: 0 24px 40px -16px rgba(184, 84, 31, 0.45),
              0 8px 16px -8px rgba(184, 84, 31, 0.25);
}

.btn.secondary {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}
.btn.secondary:hover {
  border-color: var(--charcoal);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn.ghost {
  background: transparent;
  color: var(--charcoal);
}
.btn.ghost:hover { background: var(--gray-100); }

.btn.lg { font-size: 1rem; padding: 1em 1.6em; }

.btn .arrow {
  display: inline-block;
  transition: transform 200ms var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ─── Hero ───────────────────────────────────────────────────────────── */

.hero { text-align: center; }
.hero .container { max-width: 880px; position: relative; }
.hero .hero-wordmark {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0 auto 1rem;
  font-weight: 800;
}
.hero .logo-mark { margin: 0 auto 1.25rem; }
.hero h1 {
  margin: 0 auto 0.5rem;
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--terracotta) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero .hero-beta { margin: 0 auto 1.4rem; }
.hero p.lead { margin-inline: auto; max-width: 38rem; }
.hero .actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Trust strip below the hero CTAs — small text proof points. */
.hero .trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.25rem;
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--gray-600);
}
.hero .trust-strip > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.hero .trust-strip svg {
  width: 14px; height: 14px;
  color: var(--terracotta);
  flex-shrink: 0;
}

/* Hero showcase — the SVG-illustrated "screenshot stack" beneath the
   CTAs. Floats with a slow drift, has a stage-light glow behind it. */
.hero-showcase {
  margin-top: 3rem;
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1200px;
}
.hero-showcase::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  width: 70%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(184, 84, 31, 0.18) 0%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
}
.hero-showcase img,
.hero-showcase svg {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transform: rotateX(2deg);
  transition: transform 600ms var(--ease);
}
.hero-showcase:hover img,
.hero-showcase:hover svg {
  transform: rotateX(0deg);
}

/* ─── Tile grid (homepage feature blurbs) ────────────────────────────── */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.tile {
  padding: 1.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease),
              border-color 250ms var(--ease);
  position: relative;
  overflow: hidden;
}
.tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--terracotta), transparent);
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--terracotta-200);
}
.tile:hover::before { opacity: 1; }
.tile h3 { margin-bottom: 0.5em; }
.tile p { margin: 0; color: var(--gray-700); font-size: 0.95rem; }

.icon-tag {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--terracotta-50) 0%, var(--terracotta-100) 100%);
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  border: 1px solid var(--terracotta-200);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
/* Phosphor duotone glyphs inside .icon-tag pick up the terracotta
   color from the parent. Slight visual bump on the icon glyph so
   it reads at the same weight as the previous emoji. */
.icon-tag .ph-duotone,
.icon-tag .ph,
.icon-tag [class^="ph-"],
.icon-tag [class*=" ph-"] {
  font-size: 1.55rem;
  line-height: 1;
}
/* Variant: brand-logo image inside icon-tag (CodeMushroom mark).
   PNG fills the box minus a small inset; rounded to match. */
.icon-tag.icon-tag-logo {
  padding: 0.35rem;
  background: linear-gradient(135deg, var(--terracotta-50) 0%, #fff 100%);
}
.icon-tag.icon-tag-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ─── "By the numbers" stat bar ──────────────────────────────────────── */

.stat-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.stat-bar .stat { text-align: center; }
.stat-bar .stat .num {
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  font-weight: 800;
  color: var(--terracotta);
  letter-spacing: -0.04em;
  display: block;
  line-height: 1;
}
.stat-bar .stat .lbl {
  font-size: 0.8rem;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-top: 0.5rem;
  display: block;
}

/* ─── Two-column with illustration ───────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 820px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.flip > :first-child { order: 2; }
}
.split .visual {
  position: relative;
}
.split .visual svg,
.split .visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ─── Feature long-form (used on /features) ──────────────────────────── */

.feature-block {
  padding-block: 2rem;
  border-top: 1px solid var(--gray-200);
}
.feature-block:first-of-type { border-top: 0; padding-top: 1rem; }
.feature-block h3 { color: var(--charcoal); }
.feature-block ul { padding-left: 1.25rem; color: var(--gray-700); }
.feature-block li { margin-bottom: 0.45em; }

/* ─── Quote cards ────────────────────────────────────────────────────── */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.quote-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.quote-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.quote-card::before {
  content: '\201C';
  position: absolute;
  top: 0.6rem;
  left: 1.25rem;
  font-size: 4rem;
  line-height: 1;
  color: var(--terracotta-200);
  font-family: Georgia, serif;
  font-weight: 700;
}
/* `.quote-card.plain` suppresses the decorative quote glyph for cards
   that REUSE the card chrome (border, shadow, hover-lift) but aren't
   actually testimonials — e.g. the "What you don't pay for" feature
   claims on /pricing. Without this, the giant glyph paints over the
   <h3>'s first character. */
.quote-card.plain::before { content: none; }
.quote-card blockquote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--charcoal);
  padding-top: 0.5rem;
}
.quote-card cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 500;
}
.quote-card cite strong { color: var(--charcoal); font-weight: 600; }

/* ─── CTA band ───────────────────────────────────────────────────────── */

.cta-band {
  background: linear-gradient(135deg,
    var(--charcoal) 0%,
    var(--charcoal-soft) 60%,
    var(--terracotta-800) 130%);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 50%;
  height: 200%;
  background: radial-gradient(40% 40% at 50% 50%,
    rgba(184, 84, 31, 0.4) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.cta-band h2, .cta-band p { color: var(--white); position: relative; z-index: 1; }
.cta-band .actions { position: relative; z-index: 1; justify-content: center; margin-top: 1.5rem; display: flex; gap: 0.85rem; flex-wrap: wrap; }
.cta-band p.lead { color: rgba(255, 255, 255, 0.85); max-width: 560px; margin-inline: auto; }

/* CodeMushroom credit on the about page. */
.codemushroom-logo {
  max-height: 56px;
  width: auto;
  display: inline-block;
  opacity: 0.92;
  background: #0f172a;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  box-sizing: content-box;
}
.codemushroom-logo:hover { opacity: 1; }

/* ─── Footer ─────────────────────────────────────────────────────────── */

footer.site {
  border-top: 1px solid var(--gray-200);
  background: var(--cream);
  padding-block: 3rem;
  margin-top: 4rem;
  font-size: 0.9rem;
  color: var(--gray-600);
}
footer.site .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
footer.site .col { min-width: 12rem; }
footer.site h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--charcoal);
  margin: 0 0 0.7em;
  font-weight: 700;
}
footer.site a { color: var(--gray-700); }
footer.site a:hover { color: var(--terracotta); text-decoration: underline; }

footer.site .col.tagline { max-width: 18rem; }

/* ─── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Focus ring ─────────────────────────────────────────────────────── */

*:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Reveal on scroll (CSS-only, IntersectionObserver-free) ─────────── */
/* Class set by inline JS in each page (~5 lines). Falls back to "always
   visible" when JS is off — content stays accessible. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT MOCKUPS
   Pure-HTML reproductions of the in-app surfaces. Used in marketing in
   place of raw screenshots so we get pixel-perfect responsive scaling,
   no asset pipeline, and (importantly) the visuals automatically follow
   the brand palette — change a token here and every mockup updates.

   Naming: `.pm-` for "product mockup" so the marketing-only classes
   don't collide with anything in the React app.
   ═══════════════════════════════════════════════════════════════════════ */

/* Browser-chrome frame — a wrapper that gives a card the look of a
   browser window (titlebar with dots + a faked URL pill). Use as
   the outer shell on any product mockup that "lives in a browser."
   The frame supports inner content of any shape via flex columns. */
.pm-browser {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--charcoal);
  width: 100%;
  max-width: 100%;
}
.pm-browser .pm-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: linear-gradient(180deg, #fbfbfb, #f1f1f1);
  border-bottom: 1px solid var(--gray-200);
}
.pm-browser .pm-titlebar .pm-dots {
  display: inline-flex;
  gap: 0.35rem;
}
.pm-browser .pm-titlebar .pm-dots span {
  width: 0.625rem; height: 0.625rem;
  border-radius: 50%;
  background: var(--gray-300);
}
.pm-browser .pm-titlebar .pm-dots span:nth-child(1) { background: #ff5f57; }
.pm-browser .pm-titlebar .pm-dots span:nth-child(2) { background: #febc2e; }
.pm-browser .pm-titlebar .pm-dots span:nth-child(3) { background: #28c840; }
.pm-browser .pm-titlebar .pm-url {
  flex: 1;
  margin: 0 0.5rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 0.25rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gray-600);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
}
.pm-browser .pm-titlebar .pm-url .pm-lock {
  color: var(--gray-400);
  margin-right: 0.35em;
}

/* App-chrome strip — a thin nav bar to put under the titlebar when
   showing a logged-in app view. Mirrors the React app's top nav. */
.pm-appnav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.45rem 0.85rem;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.72rem;
  color: var(--gray-700);
}
.pm-appnav .pm-brand-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}
.pm-appnav .pm-brand-mini .logo-mark { width: 1rem; height: 1rem; gap: 18%; }
.pm-appnav .pm-tabs {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}
.pm-appnav .pm-tabs span {
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  color: var(--gray-600);
}
.pm-appnav .pm-tabs span.active {
  background: var(--terracotta-100);
  color: var(--terracotta-700);
  font-weight: 600;
}
.pm-appnav .pm-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.pm-appnav .pm-avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
}

/* ── Slide editor mockup ──────────────────────────────────────────────
   Two-column layout: a left rail of slide thumbnails and a main
   "stage" showing the current slide with a small inspector strip. */
.pm-editor {
  display: grid;
  grid-template-columns: 9rem 1fr;
  background: var(--gray-50);
  min-height: 18rem;
}
.pm-editor .pm-rail {
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  padding: 0.55rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;
}
.pm-editor .pm-rail-header {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  padding: 0.1rem 0.25rem;
}
.pm-thumb {
  aspect-ratio: 16/9;
  border-radius: 6px;
  background: var(--gray-200);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  font-size: 0.55rem;
  color: var(--white);
  padding: 0.3rem;
  display: flex;
  align-items: flex-end;
}
.pm-thumb.scripture { background: linear-gradient(135deg, #2a2a2a, #3d3025); }
.pm-thumb.lyric    { background: linear-gradient(135deg, #1a1a1a, #2a2118); }
.pm-thumb.image    { background: linear-gradient(135deg, #b8541f, #6f3214); }
.pm-thumb.audience { background: linear-gradient(135deg, #0f3a52, #0f5b6f); }
.pm-thumb.video    { background: linear-gradient(135deg, #2a1a3a, #4a2050); }
.pm-thumb.countdown { background: linear-gradient(135deg, #1a2a3a, #2a3a4a); }
.pm-thumb.active   { border-color: var(--terracotta); box-shadow: 0 0 0 2px rgba(184, 84, 31, 0.2); }
.pm-thumb .pm-thumb-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  background: var(--terracotta);
}
.pm-thumb.scripture .pm-thumb-strip { background: #6366f1; }
.pm-thumb.lyric    .pm-thumb-strip { background: #f59e0b; }
.pm-thumb.image    .pm-thumb-strip { background: #f43f5e; }
.pm-thumb.audience .pm-thumb-strip { background: #14b8a6; }
.pm-thumb.video    .pm-thumb-strip { background: #d946ef; }

.pm-editor .pm-stage {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.pm-editor .pm-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.65rem;
  color: var(--gray-600);
}
.pm-editor .pm-toolbar .pm-pill {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--gray-200);
}
.pm-editor .pm-toolbar .pm-pill.accent {
  background: var(--terracotta);
  color: var(--white);
  border-color: var(--terracotta);
}
.pm-editor .pm-canvas {
  flex: 1;
  border-radius: 8px;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(184, 84, 31, 0.18), transparent 70%),
    linear-gradient(180deg, #1a1a1a, #0d0d0d);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  min-height: 9rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.pm-editor .pm-canvas .pm-eyebrow-tiny {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta-200);
  margin-bottom: 0.45rem;
}
.pm-editor .pm-canvas .pm-headline {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.pm-editor .pm-canvas .pm-byline {
  margin-top: 0.45rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.05em;
}

/* ── Projector mockup ─────────────────────────────────────────────────
   A 16:9 dark stage for showing the projection output. Useful for
   showing the audience-response slide (QR + question + tallies). */
.pm-projector {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(184, 84, 31, 0.16), transparent 70%),
    linear-gradient(180deg, #1a1a1a, #0d0d0d);
  border-radius: var(--radius-lg);
  aspect-ratio: 16/9;
  color: var(--white);
  position: relative;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.pm-projector .pm-stage-pad {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 4%;
  gap: 3%;
}
.pm-join-card {
  width: 36%;
  background: rgba(255, 255, 255, 0.97);
  color: var(--charcoal);
  border-radius: 14px;
  padding: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
}
.pm-join-card .pm-join-eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
}
.pm-qr {
  width: 64%;
  aspect-ratio: 1;
  background:
    /* 7×7 module pattern using radial-gradient dots; a real QR
       has many more, but visually this reads unmistakably as a QR. */
    linear-gradient(to right, #0f172a 14.28%, transparent 14.28%) 0 0/14.28% 14.28%,
    linear-gradient(to bottom, #0f172a 14.28%, transparent 14.28%) 0 0/14.28% 14.28%;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
  /* Quiet zone */
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--gray-200);
  /* Three position markers — drawn with ::before, ::after, and a
     pseudo-positioned descendant. */
}
.pm-qr::before,
.pm-qr::after,
.pm-qr > span {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border: 3px solid #0f172a;
  background: #fff;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px #0f172a;
}
.pm-qr::before { top: 6%; left: 6%; }
.pm-qr::after  { top: 6%; right: 6%; }
.pm-qr > span  { bottom: 6%; left: 6%; }
.pm-join-card .pm-code {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(1.25rem, 4vw, 2rem);
  letter-spacing: 0.18em;
  line-height: 1;
}
.pm-join-card .pm-host {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gray-500);
}

.pm-projector .pm-q-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4%;
  min-width: 0;
  justify-content: center;
}
.pm-projector .pm-q-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.pm-projector .pm-q-meta .pm-q-timer {
  color: #fda4af;
  font-weight: 700;
}
.pm-projector .pm-prompt {
  font-size: clamp(0.9rem, 1.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--white);
}
.pm-projector .pm-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3%;
}
.pm-choice {
  position: relative;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow: hidden;
  font-size: 0.75rem;
}
.pm-choice .pm-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(255, 255, 255, 0.10);
}
.pm-choice .pm-letter {
  position: relative;
  width: 1.4rem; height: 1.4rem;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.7rem;
}
.pm-choice .pm-text { position: relative; flex: 1; min-width: 0; }
.pm-choice .pm-pct { position: relative; font-family: var(--font-mono); font-size: 0.65rem; opacity: 0.85; }
.pm-choice.correct {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.15);
}
.pm-choice.correct .pm-bar { background: rgba(16, 185, 129, 0.35); }
.pm-choice.correct .pm-letter { background: #10b981; }

/* ── Phone frame ──────────────────────────────────────────────────────
   Compact phone shell for showing the voter / member-facing surface.
   Width is set in HTML inline style for layout flexibility; aspect
   ratio is locked. */
.pm-phone {
  --pw: 14rem;
  width: var(--pw);
  aspect-ratio: 9/19;
  background: #0f172a;
  border-radius: calc(var(--pw) * 0.13);
  padding: calc(var(--pw) * 0.05);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.04);
  position: relative;
}
.pm-phone .pm-notch {
  position: absolute;
  top: calc(var(--pw) * 0.025);
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: calc(var(--pw) * 0.04);
  background: #000;
  border-radius: calc(var(--pw) * 0.05);
  z-index: 2;
}
.pm-phone .pm-screen {
  background: linear-gradient(160deg, #0f172a 0%, #1f2937 55%, #6f3214 130%);
  width: 100%;
  height: 100%;
  border-radius: calc(var(--pw) * 0.09);
  color: var(--white);
  display: flex;
  flex-direction: column;
  padding: calc(var(--pw) * 0.08) calc(var(--pw) * 0.06);
  font-size: 0.6rem;
  position: relative;
  overflow: hidden;
}
.pm-phone .pm-status {
  display: flex;
  justify-content: space-between;
  font-size: 0.55rem;
  opacity: 0.65;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.pm-phone .pm-codestrip {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.4rem;
  margin-bottom: 0.65rem;
}
.pm-phone .pm-codestrip .pm-brand-mini { font-size: 0.55rem; letter-spacing: 0.2em; font-weight: 700; }
.pm-phone .pm-codestrip .pm-code-mini { font-family: var(--font-mono); font-size: 0.55rem; opacity: 0.75; letter-spacing: 0.18em; }
.pm-phone .pm-q {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0.5rem 0 0.6rem;
}
.pm-phone .pm-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.45rem;
}
.pm-phone .pm-choice-list {
  display: flex; flex-direction: column; gap: 0.35rem;
}
.pm-phone .pm-choice-list .pm-c {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pm-phone .pm-choice-list .pm-c.picked {
  border-color: #34d399;
  background: rgba(16, 185, 129, 0.22);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4);
}
.pm-phone .pm-choice-list .pm-c .pm-letter {
  width: 0.9rem; height: 0.9rem;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem; font-weight: 700;
}
.pm-phone .pm-foot {
  margin-top: auto;
  font-size: 0.5rem;
  text-align: center;
  opacity: 0.5;
}

/* ── Service-plan / list rows mockup ────────────────────────────── */
.pm-plan {
  background: var(--white);
  font-size: 0.72rem;
  padding: 0.4rem 0;
}
.pm-plan .pm-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 6rem 4rem;
  gap: 0.65rem;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.pm-plan .pm-row.header {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-500);
  border-bottom-color: var(--gray-200);
}
.pm-plan .pm-row .pm-h {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--gray-500);
  font-size: 0.65rem;
}
.pm-plan .pm-row .pm-title { color: var(--charcoal); font-weight: 600; }
.pm-plan .pm-row .pm-sub { font-size: 0.6rem; color: var(--gray-500); margin-top: 0.1rem; }
.pm-plan .pm-row .pm-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-600);
}
.pm-plan .pm-row .pm-kind .pm-dot-k {
  width: 0.4rem; height: 0.4rem; border-radius: 50%;
}
.pm-plan .pm-row .pm-kind.song .pm-dot-k     { background: #f59e0b; }
.pm-plan .pm-row .pm-kind.scripture .pm-dot-k { background: #6366f1; }
.pm-plan .pm-row .pm-kind.sermon .pm-dot-k   { background: #b8541f; }
.pm-plan .pm-row .pm-kind.welcome .pm-dot-k  { background: #14b8a6; }
.pm-plan .pm-row .pm-assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
}
.pm-plan .pm-row .pm-pic {
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--terracotta-100);
  color: var(--terracotta-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 700;
}
.pm-plan .pm-row .pm-status {
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}
.pm-plan .pm-row .pm-status.ok { background: #d1fae5; color: #065f46; }
.pm-plan .pm-row .pm-status.pending { background: #fef3c7; color: #92400e; }

/* ═══════════════════════════════════════════════════════════════════════
   v3 MARKETING-SITE COMPONENTS (2026-05-16)
   Built around real screenshots from a seeded local stack. Replaces
   the v2 CSS-mockup approach. The `.shot-*` classes are the canonical
   container for any product screenshot; the older `.pm-*` classes
   below are kept only for back-compat with pages we haven't touched.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero v4 (2026-05-17) — tagline-forward.
   User direction: "Built for the Body" out front, drop the dense
   "Open beta · free during launch / The whole church, on one
   screen." subtitle, no big hero image (the feature tour below
   carries the visuals). Centered, breathing room, brand mark
   anchor. */
.hero-v4 {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
  background:
    radial-gradient(70% 60% at 50% -20%, rgba(184, 84, 31, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
}
.hero-v4 .container { max-width: 920px; }
.hero-v4 .mark {
  margin: 0 auto 1rem;
}

/* Wordmark above the H1 — "Codenc.io" with the terracotta period.
   Sized smaller than the H1 so the tagline reads as the
   protagonist, the wordmark as the byline. */
.hero-v4 .hero-wordmark {
  display: block;
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 auto 1rem;
}
.hero-v4 .hero-wordmark .dot { color: var(--terracotta); }

/* Gradient headline — restores the 2-color treatment from v3 hero
   that the user liked. Charcoal → terracotta sweep across the
   tagline so it has the same warmth as the wordmark's period. */
.hero-v4 .gradient-headline {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal) 55%, var(--terracotta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-v4 .gradient-headline .dot {
  /* The period stays solid terracotta (not part of the gradient)
     so it pops as the wordmark's signature accent. -webkit-text-
     fill-color cancels the inherited transparent fill from the
     gradient parent. */
  -webkit-text-fill-color: var(--terracotta);
  color: var(--terracotta);
}
.hero-v4 h1 {
  font-size: clamp(2.75rem, 1.5rem + 5vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0 auto 0.85rem;
  color: var(--charcoal);
  max-width: 18ch;
}
.hero-v4 h1 .dot {
  color: var(--terracotta);
}
.hero-v4 .sub {
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.35rem);
  color: var(--gray-700);
  margin: 0 auto 2rem;
  max-width: 40rem;
  line-height: 1.45;
}
.hero-v4 .sub strong { color: var(--charcoal); font-weight: 600; }
.hero-v4 .actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Feature tour ────────────────────────────────────────────────
   Auto-cycling carousel introduced 2026-05-17. Two columns on wide:
   a numbered list of features on the left (click any to scroll the
   page to that feature's deep dive), and a single large screenshot
   on the right that crossfades to match the active item. Auto-
   advances every ~5s; hovering anywhere in the section pauses the
   rotation. On narrow viewports the list stacks above the
   screenshot. */
.feature-tour {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--white);
}
.feature-tour .container {
  max-width: 1140px;
}
.feature-tour > .container > header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.feature-tour h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  letter-spacing: -0.03em;
  margin: 0.25rem auto 0.75rem;
  max-width: 18ch;
}
.feature-tour h2 + p { max-width: 36rem; margin-inline: auto; }

.tour-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: stretch;
}
@media (min-width: 900px) {
  .tour-grid {
    grid-template-columns: minmax(20rem, 26rem) 1fr;
    align-items: start;
  }
}

/* Feature list — numbered rows. Each row is a button so the whole
   area is clickable + keyboard-reachable. */
.tour-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tour-list > li > button {
  /* Make the whole row a tappable, keyboard-reachable button. */
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  color: var(--gray-700);
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 200ms var(--ease);
}
.tour-list > li > button:hover {
  background: var(--gray-50);
  color: var(--charcoal);
}
.tour-list > li > button:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}
.tour-list > li.active > button {
  background: var(--white);
  border-color: var(--terracotta-200);
  box-shadow: var(--shadow-sm);
  /* Soft "you are here" cue: a vertical terracotta bar on the left
     edge that animates in. */
  position: relative;
}
.tour-list > li.active > button::before {
  content: '';
  position: absolute;
  left: 0; top: 12%;
  width: 3px;
  height: 76%;
  background: var(--terracotta);
  border-radius: 0 3px 3px 0;
}
.tour-list .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
  transition: background-color 200ms, color 200ms;
}
.tour-list > li.active .num {
  background: var(--terracotta);
  color: var(--white);
}
.tour-list .copy { min-width: 0; flex: 1; }
.tour-list .copy h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: -0.005em;
}
.tour-list .copy p {
  margin: 0.2em 0 0;
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.45;
  max-width: 26rem;
}
.tour-list .copy p em {
  color: var(--terracotta-700);
  font-style: normal;
  font-weight: 600;
}

/* Auto-advance progress bar — sits at the bottom of the active
   row, animates from 0→100% over the cycle interval. Restarts
   each time `.active` changes. */
.tour-list > li.active > button::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem; bottom: 0.45rem;
  height: 2px;
  border-radius: 999px;
  background: var(--terracotta-100);
  overflow: hidden;
  pointer-events: none;
}
.tour-list > li.active > button > .progress {
  position: absolute;
  left: 1rem; bottom: 0.45rem;
  height: 2px;
  border-radius: 999px;
  background: var(--terracotta);
  pointer-events: none;
  animation: tourTick var(--tour-interval, 5s) linear forwards;
  transform-origin: left center;
}
.tour-list > li:not(.active) > button > .progress { display: none; }
@keyframes tourTick {
  from { width: 0; }
  to   { width: calc(100% - 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-list > li.active > button > .progress { animation: none; width: 100%; }
}

/* Tour stage — single canvas, screenshots fade-cross over each
   other when the active feature changes. */
.tour-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  /* Cream so the self-contained, gradient-backed framed screenshots
     (portrait phone OR landscape browser) blend in when shown with
     object-fit: contain. */
  background: var(--cream);
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(15, 23, 42, 0.30),
    0 12px 18px -8px rgba(15, 23, 42, 0.15),
    0 0 0 1px rgba(15, 23, 42, 0.06);
}
.tour-shot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  /* contain (not cover): the images already carry their own frame +
     gradient + tilt, so they must never be cropped. */
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 600ms var(--ease), transform 800ms var(--ease);
  pointer-events: none;
}
.tour-shot.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
@media (max-width: 900px) {
  .tour-stage { aspect-ratio: 4 / 3; }
}

/* Tiny "tap to jump" hint at the bottom of the list — fades in on
   first interaction (handled by JS adding .has-hovered). */
.tour-hint {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--gray-500);
  text-align: center;
  font-style: italic;
}
@media (min-width: 900px) {
  .tour-hint { text-align: left; padding-left: 1rem; }
}

/* Hero — copy centered + big single product shot below.  ────────
   v2 of the hero: dropped the side-by-side stack with overlapping
   phone (read as "AI collage" per user review). One bold visual
   below the copy reads cleaner and lets the projector breathe.
   (Retained for back-compat; v4 above is the active hero.) */
.hero-v3 {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(184, 84, 31, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  position: relative;
  overflow: hidden;
}
.hero-v3 .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.85em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--terracotta-100);
  color: var(--terracotta-700);
  border: 1px solid var(--terracotta-200);
  margin-bottom: 1.25rem;
}
.hero-v3 .hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta);
  box-shadow: 0 0 0 0 rgba(184, 84, 31, 0.5);
  animation: betapulse 2.4s ease-out infinite;
}
.hero-v3 h1 {
  font-size: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 1rem;
  max-width: 22ch;
}
.hero-v3 h1 .accent {
  background: linear-gradient(135deg, var(--terracotta-400) 0%, var(--terracotta) 60%, var(--terracotta-700) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero-v3 .lead {
  max-width: 38rem;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  color: var(--gray-700);
  margin-bottom: 1.75rem;
}
.hero-v3 .actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.hero-v3 .trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
  font-size: 0.85rem;
  color: var(--gray-600);
}
.hero-v3 .trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.hero-v3 .trust .check {
  width: 16px; height: 16px;
  background: var(--terracotta);
  color: white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Hero copy column — centered, wide enough for the headline to
   land on two lines max at desktop. */
.hero-v3 .copy {
  text-align: center;
  max-width: 56rem;
  margin: 0 auto;
}
.hero-v3 .copy h1 { margin-inline: auto; }
.hero-v3 .copy .lead { margin-inline: auto; }
.hero-v3 .copy .actions { justify-content: center; }
.hero-v3 .copy .trust { justify-content: center; }

/* Showcase — single dramatic shot below. Sits on a soft tilted
   plinth, with multi-layer shadow that reads like a real product
   screenshot, not a comp. Wide on desktop, container-clamped
   to avoid running off the page. */
.hero-v3 .showcase {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  /* perspective lets the inner image tilt subtly */
  perspective: 1500px;
}
.hero-v3 .showcase::before {
  content: '';
  position: absolute;
  top: 25%; left: 50%;
  width: 75%; height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(184, 84, 31, 0.22) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
.hero-v3 .showcase .projector {
  display: block;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  height: auto;
  border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
  box-shadow:
    0 60px 100px -30px rgba(15, 23, 42, 0.45),
    0 30px 50px -20px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(15, 23, 42, 0.08);
  background: #0f172a;
  position: relative;
  z-index: 1;
  transform: perspective(1500px) rotateX(2deg);
  transform-origin: 50% 100%;
  transition: transform 600ms var(--ease);
}
.hero-v3 .showcase:hover .projector {
  transform: perspective(1500px) rotateX(0deg);
}

/* "Just shipped" — emerald callout strip between hero and pillars,
   highlighting the audience-response framework launch. */
.whats-new {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  color: var(--white);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.whats-new .container {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.whats-new .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.85em;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.whats-new .copy { flex: 1; min-width: 18rem; }
.whats-new .copy strong { color: var(--white); font-weight: 700; }
.whats-new .copy p { margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 1rem; }
.whats-new a.cta {
  color: var(--white);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.whats-new a.cta:hover { border-bottom-color: var(--white); text-decoration: none; }

/* Pillars — three side-by-side cards introducing the three biggest
   user journeys (plan, run, connect). Each card has an icon-tag,
   short headline, 1-line description, and a small screenshot
   thumbnail at the bottom that doubles as a deep-link anchor. */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
.pillar {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.pillar .pillar-body {
  padding: 1.5rem;
}
.pillar .pillar-body .icon-tag {
  margin-bottom: 0.85rem;
}
.pillar .pillar-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.4em;
}
.pillar .pillar-body p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.95rem;
}
.pillar .pillar-shot {
  display: block;
  margin: 0;
  background: var(--gray-100);
  border-top: 1px solid var(--gray-200);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.pillar .pillar-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  display: block;
}

/* Feature row v3 — alternating big text + big shot, full container
   width. Replaces the older .feature-row. Each row's shot has a
   subtle drop shadow + 1px border for depth. */
.feature-v3 {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .feature-v3 { grid-template-columns: 0.9fr 1.1fr; }
  .feature-v3.flip > :first-child { order: 2; }
}
.feature-v3 .copy .eyebrow { margin-bottom: 0.85rem; }
.feature-v3 .copy h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1rem;
}
.feature-v3 .copy p.lead {
  font-size: 1.1rem;
  margin: 0 0 1.25rem;
}
.feature-v3 .copy ul {
  list-style: none; padding: 0; margin: 0;
}
.feature-v3 .copy li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55em;
  color: var(--gray-700);
  font-size: 0.98rem;
  line-height: 1.55;
}
.feature-v3 .copy li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 2px;
  background: var(--terracotta);
  transform: rotate(45deg);
}
.feature-v3 .copy li strong { color: var(--charcoal); font-weight: 600; }
.feature-v3 .visual {
  position: relative;
}
.feature-v3 .visual .shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow:
    0 30px 50px -20px rgba(15, 23, 42, 0.30),
    0 12px 18px -8px rgba(15, 23, 42, 0.15),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  background: var(--white);
}
/* Visual variant: phone-shaped screenshot centered in its column.
   The .shot CSS expects 16:10-ish desktop ratios; phone shots
   (9/19) need different sizing so they don't stretch. */
.feature-v3 .visual.phone-frame-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.feature-v3 .visual .phone-shot {
  /* 2026-06-04: images now carry their own device frame + gradient +
     shadow (tools/screenshot/stylize-marketing.py), so the old dark CSS
     frame is removed to avoid a double frame — we just size + center. */
  width: auto;
  max-width: 27rem;
  max-height: 42rem;
  height: auto;
  border-radius: 0;
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* Visual variant: side-by-side projector + phone. Used on the
   audience-interactivity feature where the relationship between
   the two surfaces is the point. NO overlap (reads as AI collage). */
.feature-v3 .visual.duo {
  display: grid;
  grid-template-columns: 1fr 11rem;
  gap: 0.5rem;
  align-items: center;
}
.feature-v3 .visual.duo .shot {
  /* Already styled above. */
}
.feature-v3 .visual.duo .phone {
  /* Pre-framed image (own device frame + gradient + shadow) — no CSS frame. */
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
@media (max-width: 700px) {
  .feature-v3 .visual.duo { grid-template-columns: 1fr; gap: 1rem; }
  .feature-v3 .visual.duo .phone { max-width: 12rem; margin: 0 auto; }
}

/* Replaces-this-stack — a clean table-grid with strike-throughs
   and dollar signs. */
.replaces {
  background: var(--cream);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
}
.replaces h3 {
  margin: 0 0 0.5em;
  font-size: 1.25rem;
}
.replaces .savings {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  font-weight: 800;
  color: var(--terracotta);
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
  margin: 0.25em 0 1.5rem;
}
.replaces .savings small {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 500;
  margin-top: 0.4em;
  letter-spacing: normal;
}
.replaces .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 700px) {
  .replaces .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .replaces .grid { grid-template-columns: repeat(3, 1fr); }
}
.replaces .grid > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  font-size: 0.9rem;
}
.replaces .grid .name {
  flex: 1;
  font-weight: 500;
}
.replaces .grid .strike {
  color: var(--gray-500);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.replaces .grid .price {
  color: var(--gray-500);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
}
.replaces .grid .check {
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  flex-shrink: 0;
}

/* "One roof" variant — tiles of what the church gets BACK (time,
   attention, simplicity) rather than a brand-by-brand strikethrough.
   Same .replaces shell, taller card shape with title + description
   stacked vertically. */
.replaces .grid.one-roof {
  gap: 1rem;
}
.replaces .grid.one-roof > .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.1rem 1.15rem;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  text-align: left;
}
.replaces .grid.one-roof > .card .name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.replaces .grid.one-roof > .card .desc {
  color: var(--gray-600);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Pricing snapshot — a single big card, three tiers, transparent. */
.pricing-snap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 800px) {
  .pricing-snap { grid-template-columns: repeat(3, 1fr); }
}
.pricing-snap .tier {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
}
.pricing-snap .tier.featured {
  border-color: var(--terracotta);
  box-shadow: 0 18px 40px -16px rgba(184, 84, 31, 0.25), 0 0 0 1px var(--terracotta);
  transform: scale(1.02);
}
.pricing-snap .tier .ribbon {
  position: absolute;
  top: -0.85rem; right: 1rem;
  background: var(--terracotta);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35em 0.85em;
  border-radius: 999px;
}
.pricing-snap .tier h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--terracotta);
  font-weight: 700;
  margin: 0 0 0.6em;
}
.pricing-snap .tier .amount {
  display: flex; align-items: baseline; gap: 0.3rem;
  margin-bottom: 0.85em;
}
.pricing-snap .tier .amount .num {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pricing-snap .tier .amount .period {
  font-size: 0.95rem;
  color: var(--gray-500);
}
.pricing-snap .tier p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--gray-600);
}

/* Closing CTA band — replaces the older .cta-band on home. Bigger,
   bolder, with the brand gradient + the audience-feature photo
   peeking subtly behind. */
.cta-v3 {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(135deg, #0f172a 0%, #1f2937 55%, var(--terracotta-800) 130%);
  color: var(--white);
  border-radius: var(--radius-xl);
  text-align: center;
  overflow: hidden;
}
.cta-v3::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(45% 45% at 50% 50%, rgba(184, 84, 31, 0.45) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.cta-v3 h2 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0 0 0.85rem;
  position: relative;
}
.cta-v3 p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 36rem;
  margin: 0 auto 1.85rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  position: relative;
}
.cta-v3 .actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* Caption strip under a feature shot — light, italic, attribution-y. */
.shot-caption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--gray-600);
}
.shot-caption .real-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.65em;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--white);
  border: 1px solid var(--terracotta-200);
  color: var(--terracotta-700);
  border-radius: 999px;
}
.shot-caption .real-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #10b981;
}
.shot-caption strong { color: var(--charcoal); }

/* ── Real-screenshot showcase ─────────────────────────────────────
   For when we drop a true PNG capture of a product surface into the
   page. The frame mimics the .pm-browser look (border + shadow +
   rounded corners) so screenshots and CSS mockups share the same
   container styling. Use `.pm-shot-frame` standalone, or
   `.pm-shot-stack` to layer a main screenshot with a phone-shaped
   companion peeking out from the corner. */
.pm-shot-frame {
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-xl);
  background: var(--white);
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
.pm-shot-stack {
  position: relative;
  display: block;
  max-width: 100%;
  padding-bottom: 2rem;
  padding-right: 1rem;
}
.pm-shot-stack .pm-shot-main {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-xl);
  position: relative;
  z-index: 1;
}
.pm-shot-stack .pm-shot-phone {
  position: absolute;
  width: 18%;
  min-width: 9rem;
  max-width: 14rem;
  height: auto;
  right: -1rem;
  bottom: -1rem;
  border-radius: 1.25rem;
  border: 1px solid var(--gray-300);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  z-index: 2;
  background: #0f172a;
}
@media (max-width: 700px) {
  .pm-shot-stack .pm-shot-phone {
    width: 26%;
    right: -0.5rem;
    bottom: -0.75rem;
  }
}

/* "Real screenshot" caption tag — used to label a screenshot block
   so visitors don't mistake it for a mockup. */
.pm-real-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--white);
  color: var(--terracotta);
  border: 1px solid var(--terracotta-200);
  box-shadow: var(--shadow-sm);
}
.pm-real-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
}

/* Mosaic of real screenshots — used for the "see it in action"
   strip on the home page. Different aspect ratios per cell so the
   strip doesn't feel uniform / mockup-y. */
.pm-mosaic-real {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(12, 1fr);
}
.pm-mosaic-real > figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  background: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.pm-mosaic-real > figure:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.pm-mosaic-real > figure > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.pm-mosaic-real > figure > figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.65rem 0.9rem;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0));
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pm-mosaic-real > figure.span-6 { grid-column: span 6; aspect-ratio: 16 / 10; }
.pm-mosaic-real > figure.span-4 { grid-column: span 4; aspect-ratio: 4 / 3; }
.pm-mosaic-real > figure.span-3 { grid-column: span 3; aspect-ratio: 3 / 4; }
.pm-mosaic-real > figure.span-7 { grid-column: span 7; aspect-ratio: 16 / 10; }
.pm-mosaic-real > figure.span-5 { grid-column: span 5; aspect-ratio: 5 / 4; }
@media (max-width: 820px) {
  .pm-mosaic-real { grid-template-columns: 1fr; }
  .pm-mosaic-real > figure { grid-column: 1 / -1 !important; aspect-ratio: 16 / 10 !important; }
}

/* ── Stage diagram (hero "three surfaces" composite) ──────────────── */
.pm-stack {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  min-height: 22rem;
  display: flex;
  justify-content: center;
}
.pm-stack .pm-stack-main {
  width: min(95%, 56rem);
  position: relative;
  z-index: 2;
  transform: perspective(1400px) rotateX(2deg);
  transform-origin: 50% 100%;
}
.pm-stack .pm-stack-side {
  position: absolute;
  z-index: 1;
}
.pm-stack .pm-stack-side.right {
  right: -1%;
  bottom: -5%;
  width: 16rem;
  z-index: 3;
}
.pm-stack .pm-stack-side.left {
  left: -1%;
  bottom: 4%;
  width: 13rem;
  z-index: 3;
}
@media (max-width: 820px) {
  .pm-stack .pm-stack-side { display: none; }
  .pm-stack .pm-stack-main { transform: none; }
  .pm-stack { padding-top: 1.5rem; min-height: auto; }
}

/* ── Dashboard tiles mockup ───────────────────────────────────────── */
.pm-dash {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding: 0.85rem;
  background: var(--gray-50);
  font-size: 0.65rem;
}
.pm-dash .pm-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}
.pm-dash .pm-card .pm-lbl {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-500);
}
.pm-dash .pm-card .pm-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--terracotta);
  letter-spacing: -0.03em;
  margin-top: 0.15rem;
  line-height: 1;
}
@media (max-width: 600px) {
  .pm-dash { grid-template-columns: repeat(2, 1fr); }
}

/* ── Email broadcast mockup ───────────────────────────────────────── */
.pm-email {
  background: var(--white);
  padding: 1rem;
  font-size: 0.7rem;
}
.pm-email .pm-email-head {
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 0.5rem;
  margin-bottom: 0.6rem;
}
.pm-email .pm-email-head .pm-from { font-weight: 600; color: var(--charcoal); }
.pm-email .pm-email-head .pm-to   { color: var(--gray-500); font-size: 0.6rem; }
.pm-email .pm-email-subj { font-size: 1rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.45rem; }
.pm-email .pm-email-body { color: var(--gray-700); }
.pm-email .pm-email-body a { color: var(--terracotta); }

/* ── Showcase grid (mosaic of 3-4 mockups for a "see it" gallery) ── */
.pm-mosaic {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1.4fr 1fr;
  align-items: stretch;
}
.pm-mosaic .pm-mosaic-stack {
  display: grid;
  gap: 1.25rem;
  grid-template-rows: 1fr 1fr;
}
@media (max-width: 820px) {
  .pm-mosaic { grid-template-columns: 1fr; }
}

/* Caption strip beneath a mockup. Keeps each mockup self-explained
   without breaking the visual rhythm of the surrounding section. */
.pm-caption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--gray-600);
}
.pm-caption .pm-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  background: var(--terracotta-100);
  color: var(--terracotta-700);
  border: 1px solid var(--terracotta-200);
}
.pm-caption strong { color: var(--charcoal); }

/* Section that pairs a feature description with a product mockup —
   alternating left/right on subsequent .feature-row instances. */
.feature-row {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .feature-row { grid-template-columns: 1fr 1.15fr; }
  .feature-row.flip > :first-child { order: 2; }
}
.feature-row h3 { font-size: clamp(1.4rem, 1rem + 1vw, 1.85rem); }
.feature-row .lead { font-size: 1.05rem; line-height: 1.6; }
.feature-row ul.bullets { list-style: none; padding: 0; margin: 0.85rem 0 0; }
.feature-row ul.bullets li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.45rem;
  color: var(--gray-700);
}
.feature-row ul.bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--terracotta);
  transform: rotate(45deg);
}
.feature-row ul.bullets li strong { color: var(--charcoal); }