/* PawValet — Refine layer
   Editorial polish that sits ON TOP of tokens.css + base.css + components.css.
   Tighter rhythm, magazine-grade hierarchy, confident concierge signals.
   Nothing here invents tokens — only composes them. */

/* ═══════════════════════════════════════════════════════════
   GLOBAL — slightly more confident scale + breathing
   ═══════════════════════════════════════════════════════════ */

body { font-feature-settings: 'kern', 'liga', 'calt', 'ss01', 'ss02'; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY POLISH — better wrapping, no orphans/widows,
   sensible line lengths, no two-letter dangles on a line.
   ═══════════════════════════════════════════════════════════ */

/* Headings: balanced multi-line wrapping (browsers re-flow so no line is much shorter than others) */
h1, h2, h3, h4,
.section-title,
.hero-title-refined,
.pillar-title-refined,
.step-refined-title,
.rates-name,
.rates-header-title,
.signup-intro h2,
.whatsapp-copy h2,
.bruno-text h2 {
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Body copy: pretty wrap (browser avoids a 1-2 word last line) */
p, li, dd, .field-label, .hero-sub-refined,
.pillar-desc-refined, .step-refined-desc,
.rates-desc, .section-lead, .lead, .bruno-body p,
.faq-body p, .signup-meta-item span {
  text-wrap: pretty;
}

/* Narrow viewports — only break truly oversized words (URLs, technical strings),
   never mid-syllable. Auto-hyphenation creates "won-derful / safe-ly" splits that
   read worse than slightly uneven line lengths. */
@media (max-width: 540px) {
  .bruno-body p, .faq-body p, .pillar-desc-refined,
  .step-refined-desc, .rates-desc, .hero-sub-refined,
  .section-lead, .lead {
    -webkit-hyphens: manual;
    hyphens: manual;
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* Cap reading width on long-form paragraphs for readability */
.bruno-body p, .faq-body p,
.hero-sub-refined, .section-lead, .lead,
.whatsapp-copy p.lead, .signup-intro p {
  max-width: 60ch;
}

/* ═══════════════════════════════════════════════════════════
   HERO — tighter mobile rhythm + cleaner index strip
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  /* The masthead strip becomes noisy on mobile when half its cells are hidden.
     Keep only the two essentials, stacked tight as a single editorial line. */
  .hero-index {
    gap: var(--space-2);
    padding-block: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .hero-index-cell { font-size: 11px; letter-spacing: 0.12em; }

  /* Pull eyebrow + headline tight together (was too airy) */
  .hero-content-refined .hero-eyebrow-refined { margin-bottom: var(--space-4); }
  .hero-title-refined {
    /* Slightly tighter so "neighbours about" lands clean */
    font-size: clamp(2.25rem, 5.5vw + 1rem, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
  .hero-sub-refined { font-size: var(--text-base); margin-top: var(--space-4); }
  .hero-actions-refined { margin-top: var(--space-5); gap: var(--space-3); flex-direction: column; align-items: stretch; }
  .hero-actions-refined .btn { width: 100%; justify-content: center; padding-block: var(--space-3); }
  .hero-actions-refined .btn-secondary { background: transparent; }
}

/* Hero index strip — hide noisy cells under 540px (was already partial; now fully hidden) */
@media (max-width: 540px) {
  .hero-index { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   SECTION HEADINGS — uniform mobile rhythm
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .section-title {
    font-size: clamp(1.75rem, 4.5vw + 0.75rem, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
  }
  .section-lead, .lead { font-size: var(--text-base); line-height: 1.55; }
  .section-head { margin-bottom: var(--space-6); }

  /* Section markers — keep flush left with rest of content */
  .section-marker { gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-5); }
  .section-marker-num { font-size: var(--text-base); }
  .section-marker-label { font-size: 11px; letter-spacing: 0.12em; }
}

/* ═══════════════════════════════════════════════════════════
   FORMS — consistent vertical rhythm, no orphan single-radio rows
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .form .form-row-2 { grid-template-columns: 1fr; gap: var(--space-4); }
  .form .pill-group { gap: 6px; }
  .form .pill-label { padding: 10px 14px; font-size: 13px; }
  .form .field { margin-bottom: 0; }
  .form .field-label { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 6px; }
  .form .field-input, .form .field-select, .form .field-textarea { font-size: 16px; /* prevents iOS zoom on focus */ padding: 14px 16px; }
  .form .checkbox-field { gap: var(--space-3); font-size: var(--text-sm); line-height: 1.5; align-items: flex-start; }
  .form-submit .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   FAQ — mobile cleaner summary line, no awkward icon wrap
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .faq-refined .faq-summary {
    font-size: var(--text-lg);
    padding-block: var(--space-4);
    gap: var(--space-3);
    line-height: 1.35;
  }
  .faq-refined .faq-body p { font-size: var(--text-sm); line-height: 1.6; }
}

/* ═══════════════════════════════════════════════════════════
   RATES CARD — tighten mobile typography, no orphans
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .rates-row { padding: var(--space-5); gap: var(--space-3); }
  .rates-name { font-size: var(--text-xl); }
  .rates-tag { font-size: 10.5px; letter-spacing: 0.1em; }
  .rates-desc { font-size: var(--text-sm); line-height: 1.55; }
  .rates-price { align-items: flex-start; padding-top: var(--space-2); }
  .rates-header { padding: var(--space-4) var(--space-5); }
  .rates-header-meta { font-size: 10.5px; letter-spacing: 0.1em; }
  .rates-footnote { font-size: var(--text-sm); line-height: 1.5; padding: var(--space-5); }
}

/* ═══════════════════════════════════════════════════════════
   STEPS / PILLARS — no orphan two-letter widow lines
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .pillar-title-refined, .step-refined-title {
    font-size: var(--text-xl);
    text-wrap: balance;
  }
  .step-refined-desc, .pillar-desc-refined {
    max-width: none; /* let mobile fill its column naturally */
  }
  .step-refined-num { font-size: var(--text-2xl); }
  .step-refined-eyebrow { font-size: 11px; letter-spacing: 0.12em; }
}

/* ═══════════════════════════════════════════════════════════
   ANNOUNCE BAR — center-balanced wrapping
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 540px) {
  /* Two-line max, tight rhythm. Smaller font + tighter line-height + balanced wrap. */
  .announce { padding-block: 6px; }
  .announce-inner {
    text-wrap: balance;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.03em;
    gap: 8px;
  }
}

/* Stop horizontal overflow — use overflow-x: clip on html only.
   Putting overflow-x:hidden on body breaks position:sticky on iOS Safari
   (sticky requires body to be a real scroll container). clip on html
   contains any escaping element without affecting sticky inside body. */
html { overflow-x: clip; }

/* Anchor jumps (#how, #signup, etc.) land below the sticky nav, not under it. */
html { scroll-padding-top: calc(64px + env(safe-area-inset-top, 0px) + 8px); }
@media (min-width: 720px) { html { scroll-padding-top: 96px; } }

/* Belt-and-braces: each section also reserves space at its top for the nav */
main > section { scroll-margin-top: calc(64px + env(safe-area-inset-top, 0px) + 8px); }
@media (min-width: 720px) { main > section { scroll-margin-top: 96px; } }

/* ═══════════════════════════════════════════════════════════
   NAV — stable height (no layout shift on load / scroll)
   Sticky on every viewport; iOS-safe (no overflow:hidden on body).
   ═══════════════════════════════════════════════════════════ */
.nav { position: sticky; top: 0; z-index: var(--z-nav); }
.nav .nav-inner { min-height: 56px; }
.nav .nav-brand-mark { height: 40px; width: 40px; max-width: 56px; }
.nav.scrolled { border-bottom-width: 1px; }

/* ═══════════════════════════════════════════════════════════
   SECTION RHYTHM — three palettes alternated so every section
   change is unmistakable. Order down the page:
     hero (bg)
   → pillars (DARK ink)
   → whatsapp (surface tint)
   → bruno (bg)
   → pullquote (terracotta soft)
   → how (bg)
   → walkers cards (surface tint)
   → pricing (bg)
   → signup (DARK ink, already)
   → walker recruit (surface tint)
   → faq (bg)
   → footer (DARK ink, already)
   ═══════════════════════════════════════════════════════════ */
main > section { border-top: 1px solid var(--color-border); }
main > section:first-child { border-top: none; }

/* Surface-tinted (between dark ones) for contrast */
.whatsapp-section,
.walkers,
#walkers {
  background: var(--color-surface);
}

/* Dark sections: pillars (new) + signup (existing) — both inherit ink palette */
.pillars-refined,
.signup,
.footer { border-top: none; }

/* Pullquote: DARK background to break the cream flow */
.pullquote {
  background: var(--color-ink) !important;
  border-block: none !important;
  color: var(--color-bg);
}
.pullquote .pullquote-text { color: var(--color-bg); }
.pullquote .pullquote-text em { color: var(--color-terracotta); }
.pullquote .pullquote-mark { color: var(--color-terracotta); opacity: 0.7; }
.pullquote .pullquote-attrib { color: oklch(70% 0.012 60); }
.pullquote .pullquote-attrib .rule { background: oklch(70% 0.012 60); }

/* Footer brand mark — the dark-bg version: force cream rendering via filter
   (the SVG uses currentColor but <img> can't inherit, so the file renders
   in default black on the dark footer). brightness(0)+invert(1) = white. */
.footer .footer-lockup-mark { filter: brightness(0) invert(1); }

/* ═══════════════════════════════════════════════════════════
   WALKER CARDS — real 9:16 portraits, mobile-first editorial polish
   ═══════════════════════════════════════════════════════════ */
.walkers-rail {
  /* Mobile: horizontal snap-scroll rail of full-bleed cards */
  display: flex !important;
  flex-wrap: nowrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-inline: var(--space-gutter);
  margin-inline: calc(50% - 50vw);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.walkers-rail::-webkit-scrollbar { display: none; }
.walkers-rail .walker-card {
  flex: 0 0 78vw;
  max-width: 320px;
  scroll-snap-align: start;
}

@media (min-width: 720px) {
  .walkers-rail {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .walkers-rail .walker-card { flex: initial; max-width: none; }
}

/* Card frame */
.walker-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-soft),
              box-shadow var(--duration-normal) var(--ease-out-soft);
}
.walker-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* 9:16 portrait photo container */
.walker-card .walker-photo {
  position: relative;
  aspect-ratio: 9 / 16;
  margin: 0;
  background: var(--color-surface-2);
  overflow: hidden;
}
/* Image fills the 9:16 container at its own 9:16 aspect — NO cropping.
   Walker on top half, dog on bottom half of every photo, both fully visible. */
.walker-card .walker-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 800ms var(--ease-out-soft);
}
.walker-card:hover .walker-photo img { transform: scale(1.03); }

/* Badge — small frosted pill in the top-left, doesn't obscure the dog */
.walker-card .walker-badge {
  background: oklch(20% 0.012 60 / 0.85);
  color: var(--color-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}
.walker-card .walker-badge svg { color: var(--color-sage); }

.container-narrow {
  width: 100%;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding-inline: var(--space-gutter);
}

/* — Editorial section marker (numbered TOC-style heading) — */
.section-marker {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border);
}

.section-marker-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-sage-deep);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  letter-spacing: -0.01em;
  line-height: 1;
  flex-shrink: 0;
  min-width: 3ch;
}

.section-marker-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.section-marker-meta {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-marker-meta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sage);
  display: inline-block;
}

@media (max-width: 720px) {
  .section-marker-meta { display: none; }
  .section-marker { gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-6); }
  .section-marker-num { font-size: var(--text-base); min-width: 2.5ch; }
  .section-marker-label { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   HERO — concierge confidence
   ═══════════════════════════════════════════════════════════ */

.hero-refined {
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 5rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  position: relative;
}

.hero-refined .container { position: relative; }

/* Soft atmospheric radial — only in hero */
.hero-refined::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 85% 0%, oklch(88% 0.035 145 / 0.45), transparent 60%),
    radial-gradient(ellipse 60% 50% at 5% 100%, oklch(90% 0.05 38 / 0.35), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.hero-refined .container > * { position: relative; z-index: 1; }

/* — Index strip across the top: tiny meta about the page — */
.hero-index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-3);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-index-cell { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.hero-index-cell strong { color: var(--color-ink); font-weight: 600; letter-spacing: var(--tracking-eyebrow); }
.hero-index-cell .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-sage); display: inline-block; }

@media (max-width: 720px) {
  .hero-index { font-size: 10px; gap: var(--space-3); }
  .hero-index-cell:nth-child(n+3) { display: none; }
}

.hero-grid-refined {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: end;
}

@media (min-width: 980px) {
  .hero-grid-refined {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-8);
    align-items: stretch;
  }
}

.hero-content-refined {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-3) var(--space-4);
}

.hero-eyebrow-refined {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink-3);
}

.hero-eyebrow-refined .rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-sage);
}

.hero-eyebrow-refined .crest {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-sage-deep);
  font-size: var(--text-sm);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

.hero-title-refined {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 1.2rem + 7vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 380;
  color: var(--color-ink);
  text-wrap: balance;
}

.hero-title-refined em {
  font-style: italic;
  color: var(--color-sage-deep);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 340;
}

.hero-title-refined .ampersand {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 300;
  color: var(--color-terracotta);
  padding-inline: 0.05em;
}

.hero-sub-refined {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  color: var(--color-ink-2);
  max-width: 46ch;
  line-height: 1.55;
  font-weight: 400;
}

.hero-actions-refined {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* — Editorial trust ledger across the bottom — */
.hero-ledger {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.hero-ledger-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-ledger-num {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-ink);
  line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 340;
  letter-spacing: -0.02em;
}

.hero-ledger-num small {
  font-size: 0.55em;
  color: var(--color-ink-3);
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 500;
  margin-left: 2px;
}

.hero-ledger-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--color-ink-3);
  line-height: 1.35;
}

@media (max-width: 640px) {
  .hero-ledger { grid-template-columns: 1fr 1fr; }
  .hero-ledger-cell:nth-child(3) { grid-column: span 2; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
}

/* — Hero visual: editorial frame with live status — */
.hero-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
  isolation: isolate;
  box-shadow: 0 20px 60px oklch(20% 0.012 60 / 0.10), 0 6px 18px oklch(20% 0.012 60 / 0.06);
}

.hero-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(1.05) contrast(1.02);
  z-index: 1;
}

.hero-frame::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, oklch(20% 0.012 60 / 0.2) 50%, oklch(15% 0.012 60 / 0.65) 100%);
  pointer-events: none;
}

/* Live status chip — top-left */
.hero-live {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: oklch(20% 0.012 60 / 0.78);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  color: var(--color-bg);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: oklch(78% 0.10 145);
  box-shadow: 0 0 0 0 oklch(78% 0.10 145 / 0.6);
  animation: live-pulse 2s infinite ease-in-out;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(78% 0.10 145 / 0.55); }
  50%      { box-shadow: 0 0 0 8px oklch(78% 0.10 145 / 0); }
}

/* Editorial credit at bottom */
.hero-frame-credit {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
  z-index: 3;
  color: var(--color-bg);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
}

.hero-frame-credit-name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 380;
  line-height: 1;
  margin-bottom: 6px;
}

.hero-frame-credit-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero-frame-credit-temp {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 340;
  opacity: 0.95;
  text-align: right;
}

.hero-frame-credit-temp small {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 4px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   LIVE PRESENCE TICKER — novel concierge signal
   ═══════════════════════════════════════════════════════════ */

.presence {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-5) 0;
  border-block: 1px solid oklch(35% 0.012 60);
  position: relative;
  overflow: hidden;
}

.presence::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 100% at 8% 50%, oklch(58% 0.045 145 / 0.18), transparent 70%),
    radial-gradient(ellipse 50% 100% at 92% 50%, oklch(62% 0.105 38 / 0.12), transparent 70%);
  pointer-events: none;
}

.presence-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-6);
  align-items: center;
  position: relative;
}

.presence-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: oklch(78% 0.06 145);
}

.presence-label .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(78% 0.10 145);
  box-shadow: 0 0 0 0 oklch(78% 0.10 145 / 0.55);
  animation: live-pulse 2s infinite ease-in-out;
}

.presence-stats {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: oklch(82% 0.008 80);
  flex-wrap: wrap;
}

.presence-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.presence-stat-num {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-bg);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  letter-spacing: -0.02em;
}

.presence-stat-num em {
  font-style: italic;
  color: oklch(78% 0.06 145);
}

.presence-stat-label {
  letter-spacing: 0.04em;
  color: oklch(70% 0.008 80);
  font-size: 12px;
}

.presence-stat-sep {
  width: 1px;
  height: 18px;
  background: oklch(38% 0.012 60);
}

.presence-cta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-bg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  opacity: 0.95;
}

.presence-cta:hover { color: oklch(82% 0.07 145); }
.presence-cta svg { width: 12px; height: 12px; }

@media (max-width: 880px) {
  .presence-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .presence-cta { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PILLARS — refined with roman numerals + tighter type
   ═══════════════════════════════════════════════════════════ */

/* DARK editorial pillars — manifesto block on warm ink */
.pillars-refined {
  background: var(--color-ink);
  color: var(--color-bg);
  border-block: none;
}
.pillars-refined .section-marker { border-color: oklch(35% 0.012 60); }
.pillars-refined .section-marker-num { color: var(--color-sage); }
.pillars-refined .section-marker-label { color: oklch(72% 0.012 60); }
.pillars-refined .section-marker-meta  { color: oklch(60% 0.012 60); }
.pillars-refined .section-title { color: var(--color-bg); }
.pillars-refined .section-title em { color: var(--color-sage); }

.pillars-grid-refined {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-7);
  border-top: 1px solid oklch(35% 0.012 60);
}

@media (min-width: 720px) { .pillars-grid-refined { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px){ .pillars-grid-refined { grid-template-columns: repeat(4, 1fr); } }

.pillar-refined {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Mobile-first: symmetric vertical padding, content uses the section gutter, no asymmetric inset. */
  padding: var(--space-7) 0;
  border-bottom: 1px solid oklch(35% 0.012 60);
  position: relative;
}

.pillar-refined:last-child { border-bottom: none; }

@media (min-width: 720px) {
  .pillar-refined { padding: var(--space-6) var(--space-6) var(--space-6) 0; border-right: 1px solid oklch(35% 0.012 60); }
  .pillar-refined:nth-child(2n) { border-right: none; padding-right: 0; padding-left: var(--space-6); }
  .pillar-refined:nth-last-child(-n+2) { border-bottom: none; }
}

@media (min-width: 1080px) {
  .pillar-refined { padding: var(--space-6) var(--space-5) var(--space-7); border-right: 1px solid oklch(35% 0.012 60); border-bottom: none; }
  .pillar-refined:nth-child(2n) { border-right: 1px solid oklch(35% 0.012 60); padding-left: var(--space-5); padding-right: var(--space-5); }
  .pillar-refined:last-child   { border-right: none; padding-right: 0; }
  .pillar-refined:first-child  { padding-left: 0; }
}

/* Mobile: roman numeral + uppercase eyebrow paired on one row, anchored to the title — no orphan floats */
.pillar-roman {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-sage-deep);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  letter-spacing: 0;
  margin-bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  line-height: 1;
}

.pillar-roman { color: var(--color-sage); }
.pillar-roman::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--color-sage);
  display: inline-block;
}

/* Dark-pillar overrides: titles + body + detail strap all on warm-ink bg */
.pillars-refined .pillar-title-refined { color: var(--color-bg); }
.pillars-refined .pillar-title-refined em { color: var(--color-sage); }
.pillars-refined .pillar-desc-refined { color: oklch(80% 0.012 60); }
.pillars-refined .pillar-detail { color: oklch(60% 0.012 60); }
.pillars-refined .pillar-detail strong { color: var(--color-bg); }

.pillar-title-refined {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
}

.pillar-title-refined em {
  font-style: italic;
  color: var(--color-sage-deep);
}

.pillar-desc-refined {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.6;
  max-width: 38ch;
}

.pillar-detail {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.pillar-detail strong { color: var(--color-ink); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   WHATSAPP PREVIEW — novel "see what you'll get"
   ═══════════════════════════════════════════════════════════ */

.whatsapp-section {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  border-block: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.whatsapp-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 10% 90%, oklch(90% 0.04 38 / 0.35), transparent 60%);
  pointer-events: none;
}

.whatsapp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
}

@media (min-width: 980px) {
  .whatsapp-grid {
    grid-template-columns: 1fr 0.85fr;
    gap: var(--space-9);
  }
}

.whatsapp-copy { max-width: 52ch; }

.whatsapp-copy h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 380;
  margin-block: var(--space-3) var(--space-5);
}

.whatsapp-copy h2 em {
  font-style: italic;
  color: var(--color-sage-deep);
}

.whatsapp-copy .lead {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  line-height: 1.55;
  margin-bottom: var(--space-6);
}

.whatsapp-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.whatsapp-bullet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: baseline;
}

.whatsapp-bullet-time {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-sage-deep);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  letter-spacing: -0.01em;
  white-space: nowrap;
  min-width: 5ch;
}

.whatsapp-bullet-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.45;
}

.whatsapp-bullet-text small {
  display: block;
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* — Phone mockup — */
.phone-frame {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  background: oklch(10% 0.008 60);
  border-radius: 44px;
  padding: 14px;
  box-shadow:
    0 30px 80px oklch(20% 0.012 60 / 0.18),
    0 10px 30px oklch(20% 0.012 60 / 0.12),
    inset 0 0 0 1px oklch(35% 0.012 60);
  position: relative;
}

.phone-frame::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 28px;
  background: oklch(8% 0.008 60);
  border-radius: 0 0 16px 16px;
  z-index: 2;
}

.phone-screen {
  background: #ECE5DD; /* WhatsApp wallpaper, warm-leaning */
  background-image:
    radial-gradient(circle at 25% 25%, oklch(95% 0.012 80 / 0.5) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, oklch(95% 0.012 80 / 0.5) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 32px;
  overflow: hidden;
  aspect-ratio: 9 / 18;
  display: flex;
  flex-direction: column;
}

.phone-statusbar {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 24px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  flex-shrink: 0;
  background: transparent;
}

.phone-statusbar-icons { display: inline-flex; align-items: center; gap: 5px; opacity: 0.85; }

.phone-chathead {
  background: #075E54;
  color: white;
  padding: 8px 14px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.phone-chathead-back {
  color: white;
  opacity: 0.9;
  font-size: 18px;
  line-height: 1;
}

.phone-chathead-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-sage);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: white;
  font-size: 15px;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  flex-shrink: 0;
}

.phone-chathead-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
}

.phone-chathead-status {
  font-family: var(--font-sans);
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.phone-thread {
  flex: 1;
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.phone-day {
  align-self: center;
  background: oklch(95% 0.012 80 / 0.9);
  color: var(--color-ink-3);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  margin-block: 4px;
  font-weight: 500;
}

.phone-msg {
  background: white;
  border-radius: 8px 8px 8px 2px;
  padding: 7px 10px 5px;
  max-width: 80%;
  align-self: flex-start;
  font-size: 13.5px;
  color: var(--color-ink);
  line-height: 1.35;
  box-shadow: 0 1px 1px oklch(20% 0.012 60 / 0.08);
  position: relative;
}

.phone-msg-time {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: var(--color-ink-3);
  letter-spacing: 0.02em;
  vertical-align: bottom;
  position: relative;
  bottom: 0;
}

.phone-msg-photo {
  background: white;
  border-radius: 8px 8px 8px 2px;
  padding: 4px;
  max-width: 70%;
  align-self: flex-start;
  box-shadow: 0 1px 1px oklch(20% 0.012 60 / 0.08);
}

.phone-msg-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 5px;
  display: block;
}

.phone-msg-photo-caption {
  padding: 5px 6px 2px;
  font-size: 12.5px;
  color: var(--color-ink);
  line-height: 1.35;
}

.phone-msg-photo-time {
  font-size: 10px;
  color: var(--color-ink-3);
  display: block;
  text-align: right;
  margin-top: 2px;
}

.phone-msg-system {
  align-self: center;
  background: oklch(95% 0.012 80 / 0.95);
  color: var(--color-ink-2);
  font-size: 11px;
  padding: 5px 11px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   BRUNO PRIMARY = TRIO PHOTO — landscape on every viewport, never cropped
   ═══════════════════════════════════════════════════════════ */

/* Override the original 4:5 portrait so the trio (1600×1200 landscape) shows in full */
.bruno-refined .bruno-img-primary { aspect-ratio: 4 / 3; }
.bruno-refined .bruno-img-primary img { object-fit: cover; object-position: center 50%; }

/* ═══════════════════════════════════════════════════════════
   MOBILE FULL-BLEED IMAGES — edge-to-edge, no cropping, no dogs cut
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
  /* Trio + birthday photos: full viewport width, natural aspect ratio, NO crop. */
  .bruno-refined .bruno-grid { gap: var(--space-5); }
  .bruno-refined .bruno-images {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .bruno-refined .bruno-img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
    grid-column: auto !important;
    grid-row: auto !important;
    transform: none !important;
  }
  .bruno-refined .bruno-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: auto;
    display: block;
  }
  .bruno-refined .bruno-img figcaption {
    padding-inline: var(--space-gutter);
    padding-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    color: var(--color-ink-3);
    text-transform: uppercase;
    background: transparent !important;
    color: var(--color-ink-3) !important;
    position: static !important;
    text-align: left;
  }

  /* Hero photo: full viewport width on mobile, natural landscape aspect.
     Live chip + caption remain overlaid; image is NOT cropped. */
  .hero-refined .hero-grid-refined {
    display: block;
  }
  .hero-refined .hero-content-refined {
    margin-bottom: var(--space-6);
  }
  .hero-refined .hero-frame {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    aspect-ratio: auto;
  }
  .hero-refined .hero-frame img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }
  /* When image is fully visible (not cropped), the dark gradient overlay
     looks weird floating under a contained image — hide it on mobile. */
  .hero-refined .hero-frame::after {
    display: none;
  }
  /* Live chip + credit need to sit OUTSIDE the photo on mobile (since photo
     fills natural aspect, overlays would float on whitespace). Reposition
     them below the image as a clean caption row. */
  .hero-refined .hero-frame .hero-live {
    position: static;
    display: inline-flex;
    margin: var(--space-3) var(--space-gutter) 0;
    background: oklch(20% 0.012 60 / 0.92);
  }
  .hero-refined .hero-frame .hero-frame-credit {
    position: static;
    color: var(--color-ink);
    padding: var(--space-3) var(--space-gutter) var(--space-2);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
  }
  .hero-refined .hero-frame .hero-frame-credit-name { color: var(--color-ink); }
  .hero-refined .hero-frame .hero-frame-credit-meta { color: var(--color-ink-3); opacity: 1; }
  .hero-refined .hero-frame .hero-frame-credit-temp { color: var(--color-ink); }
  .hero-refined .hero-frame .hero-frame-credit-temp small { color: var(--color-ink-3); opacity: 1; }

  /* WhatsApp phone mockup: leave centered, just tighten max-width */
  .whatsapp-section .phone-frame { max-width: 360px; }
}

/* ═══════════════════════════════════════════════════════════
   BRUNO — editorial story polish (drop cap + signature)
   ═══════════════════════════════════════════════════════════ */

.bruno-refined .bruno-body { max-width: 54ch; font-size: var(--text-base); }

.bruno-refined .bruno-body p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-style: italic;
  float: left;
  font-size: 4.2em;
  line-height: 0.85;
  padding: 0.08em 0.12em 0 0;
  color: var(--color-sage-deep);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 320;
  letter-spacing: -0.04em;
}

/* Mobile: drop cap smaller so the first paragraph keeps a comfortable
   reading rhythm next to it (was eating 3 lines of column width). */
@media (max-width: 540px) {
  .bruno-refined .bruno-body p:first-of-type::first-letter {
    font-size: 3em;
    line-height: 0.9;
    padding: 0.04em 0.12em 0 0;
  }
  /* Tighten paragraph spacing for mobile readability */
  .bruno-refined .bruno-body p + p { margin-top: var(--space-4); }
}

.bruno-signature {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-strong);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bruno-signature-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--color-ink);
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 340;
  line-height: 1;
}

.bruno-signature-role {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-3);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS — refined editorial timeline
   ═══════════════════════════════════════════════════════════ */

.steps-refined {
  display: grid;
  gap: 0;
  margin-top: var(--space-8);
  position: relative;
  counter-reset: step;
}

@media (min-width: 880px) {
  .steps-refined {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
}

.step-refined {
  counter-increment: step;
  position: relative;
  /* Mobile-first: symmetric padding, content uses the container gutter */
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-border-strong);
}

.step-refined:last-child { border-bottom: 1px solid var(--color-border-strong); }

@media (min-width: 880px) {
  .step-refined {
    padding: var(--space-7) var(--space-6) var(--space-8) 0;
    border-top: 1px solid var(--color-border-strong);
    border-bottom: none;
    border-right: 1px solid var(--color-border);
  }
  .step-refined:last-child { border-right: none; border-bottom: none; padding-right: 0; }
  .step-refined:first-child { padding-right: var(--space-6); }
}

.step-refined-num {
  position: absolute;
  top: var(--space-6);
  right: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-3xl);
  color: var(--color-sage-deep);
  line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 300;
  letter-spacing: -0.04em;
}

@media (min-width: 880px) {
  .step-refined-num { right: var(--space-6); top: var(--space-7); }
  .step-refined:last-child .step-refined-num { right: 0; }
}

.step-refined-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-4);
}

.step-refined-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  margin-bottom: var(--space-4);
  max-width: 18ch;
}

.step-refined-title em { font-style: italic; color: var(--color-sage-deep); }

.step-refined-desc {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: 1.55;
  max-width: 32ch;
  margin-bottom: var(--space-5);
}

.step-refined-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.step-refined-meta-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  font-weight: 600;
}

.step-refined-meta-value {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-ink);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* ═══════════════════════════════════════════════════════════
   PULL QUOTE — terracotta editorial block
   ═══════════════════════════════════════════════════════════ */

.pullquote {
  background:
    radial-gradient(ellipse 60% 80% at 10% 0%, oklch(90% 0.05 38 / 0.4), transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 100%, oklch(88% 0.025 145 / 0.3), transparent 65%),
    var(--color-surface);
  border-block: 1px solid var(--color-border);
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
  position: relative;
}

.pullquote-inner {
  max-width: 950px;
  margin: 0 auto;
  padding-inline: var(--space-gutter);
  text-align: left;
  position: relative;
}

.pullquote-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(5rem, 3rem + 6vw, 10rem);
  line-height: 0.6;
  color: var(--color-terracotta);
  position: absolute;
  top: -0.1em;
  left: var(--space-gutter);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 300;
  opacity: 0.85;
  pointer-events: none;
}

.pullquote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 380;
  max-width: 28ch;
  margin-left: clamp(2rem, 4vw, 5rem);
  text-wrap: balance;
}

.pullquote-text em {
  font-style: italic;
  color: var(--color-terracotta-deep);
}

.pullquote-attrib {
  margin-top: var(--space-6);
  margin-left: clamp(2rem, 4vw, 5rem);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-3);
  font-weight: 600;
}

.pullquote-attrib .rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-ink-3);
}

/* ═══════════════════════════════════════════════════════════
   PRICING — magazine "rate card" treatment
   ═══════════════════════════════════════════════════════════ */

.rates-card {
  margin-top: var(--space-7);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}

.rates-header {
  padding: var(--space-6) var(--space-6) var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: end;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.rates-header-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.rates-header-title em { font-style: italic; color: var(--color-sage-deep); }

.rates-header-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-3);
  font-weight: 600;
  text-align: right;
}

.rates-row {
  display: grid;
  grid-template-columns: 1fr;
  padding: var(--space-6);
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  align-items: baseline;
  transition: background var(--duration-normal) var(--ease-out-soft);
}

.rates-row:last-child { border-bottom: none; }
.rates-row:hover { background: oklch(96% 0.012 80); }

@media (min-width: 760px) {
  .rates-row {
    grid-template-columns: 0.45fr 1fr auto;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-7);
    align-items: center;
  }
}

.rates-row-featured {
  background:
    radial-gradient(ellipse 50% 100% at 0% 50%, oklch(90% 0.025 145 / 0.5), transparent 70%),
    var(--color-bg);
}
.rates-row-featured:hover {
  background:
    radial-gradient(ellipse 50% 100% at 0% 50%, oklch(88% 0.030 145 / 0.6), transparent 70%),
    var(--color-bg);
}

.rates-name-block { display: flex; flex-direction: column; gap: 4px; }

.rates-name {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
}

.rates-name em { font-style: italic; color: var(--color-sage-deep); }

.rates-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
  margin-top: 4px;
}

.rates-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sage);
}

.rates-desc {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.55;
  max-width: 50ch;
}

.rates-desc strong { color: var(--color-ink); font-weight: 600; }

.rates-price {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  font-weight: 380;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-ink);
  text-align: right;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  white-space: nowrap;
}

.rates-price-currency {
  font-family: var(--font-sans);
  font-size: 0.4em;
  font-weight: 600;
  color: var(--color-ink-3);
  letter-spacing: 0.06em;
  margin-right: 0.2em;
  vertical-align: 0.4em;
}

.rates-price-per {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-top: 4px;
  text-align: right;
}

.rates-price-allin {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--color-sage-deep);
  margin-top: 4px;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

.rates-footnote {
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.rates-footnote strong { color: var(--color-ink); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   FAQ — minor refinement
   ═══════════════════════════════════════════════════════════ */

.faq-refined .faq-summary { font-size: var(--text-xl); padding-block: var(--space-5); }
.faq-refined .faq-summary em { font-style: italic; color: var(--color-sage-deep); }

/* ═══════════════════════════════════════════════════════════
   SIGNUP MODULE — slight refinement to the dark module
   ═══════════════════════════════════════════════════════════ */

.signup-refined .signup-intro h2 {
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
}

.signup-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: oklch(58% 0.045 145 / 0.18);
  color: oklch(82% 0.07 145);
  border: 1px solid oklch(58% 0.045 145 / 0.35);
  border-radius: var(--radius-pill);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.signup-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(78% 0.10 145);
  animation: live-pulse 2s infinite ease-in-out;
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — refined wordmark
   ═══════════════════════════════════════════════════════════ */

.footer-refined h3 em { font-style: italic; color: oklch(78% 0.06 145); }

/* ═══════════════════════════════════════════════════════════
   VARIANT SWITCHES (driven by data-attr on <body>)
   ═══════════════════════════════════════════════════════════ */

/* Hero variants */
[data-hero="centered"] .hero-grid-refined {
  grid-template-columns: 1fr !important;
  text-align: center;
  align-items: center;
  justify-items: center;
}
[data-hero="centered"] .hero-content-refined { align-items: center; }
[data-hero="centered"] .hero-sub-refined { margin-inline: auto; }
[data-hero="centered"] .hero-actions-refined { justify-content: center; }
[data-hero="centered"] .hero-ledger { width: 100%; max-width: 720px; }
[data-hero="centered"] .hero-frame {
  width: 100%;
  max-width: 980px;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-6);
}
[data-hero="centered"] .hero-frame img { object-position: center 38%; }

[data-hero="quiet"] .hero-refined::before { opacity: 0.35; }
[data-hero="quiet"] .hero-title-refined { font-size: clamp(2.5rem, 1.2rem + 5.5vw, 5.5rem); }
[data-hero="quiet"] .hero-grid-refined { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
[data-hero="quiet"] .hero-frame { aspect-ratio: 3 / 4; }

@media (max-width: 980px) {
  [data-hero="quiet"] .hero-grid-refined { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* Bruno variants */
[data-bruno="stacked"] .bruno-grid { grid-template-columns: 1fr !important; gap: var(--space-7); }
[data-bruno="stacked"] .bruno-images { max-width: 720px; margin: 0 auto; }
[data-bruno="stacked"] .bruno-text   { max-width: 720px; margin: 0 auto; }

[data-bruno="quote"] .bruno-grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-9); }
[data-bruno="quote"] .bruno-body p:not(:first-of-type) { display: none; }
[data-bruno="quote"] .bruno-body p:first-of-type {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.25;
  color: var(--color-ink);
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 380;
  letter-spacing: -0.015em;
}
[data-bruno="quote"] .bruno-body p:first-of-type::first-letter { font-size: 1em; padding: 0; float: none; color: var(--color-ink); }
[data-bruno="quote"] .bruno-facts { display: none; }

/* How-it-works variants */
[data-how="cards"] .steps-refined {
  gap: var(--space-5);
  border-top: none;
}
[data-how="cards"] .step-refined {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) !important;
  border-right: 1px solid var(--color-border) !important;
}

[data-how="vertical"] .steps-refined { grid-template-columns: 1fr !important; max-width: 780px; margin-inline: auto; }
[data-how="vertical"] .step-refined { border-right: none !important; padding: var(--space-7) 0 !important; }
[data-how="vertical"] .step-refined-num { right: 0 !important; top: var(--space-7) !important; font-size: clamp(3rem, 2rem + 3vw, 5rem); }
[data-how="vertical"] .step-refined-title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }

/* Accent palette swap */
[data-accent="terracotta"] {
  --color-sage: var(--color-terracotta);
  --color-sage-deep: var(--color-terracotta-deep);
  --color-sage-soft: var(--color-terracotta-soft);
}

/* Density */
[data-density="airy"]     { --space-section: clamp(6rem, 4rem + 6vw, 12rem); }
[data-density="dense"]    { --space-section: clamp(3rem, 2rem + 3vw, 6rem); }

/* ═══════════════════════════════════════════════════════════
   TWEAKS — hide panel chrome when off (panel controls itself)
   ═══════════════════════════════════════════════════════════ */
.tweaks-panel-hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   FINAL MOBILE OVERRIDES — appended last so they always win
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  /* Drop the busy masthead strip on small phones — clean eyebrow above headline is enough */
  .hero-index { display: none !important; }
  /* Eliminate the air it left between announce/nav and the first headline */
  .hero-refined > .container { padding-top: var(--space-5); }
  /* Tighter content padding so headlines breathe edge-to-edge with the gutter */
  .container { padding-inline: var(--space-gutter); }
}

@media (max-width: 720px) {
  /* Section padding tighter on small screens (was clamped between 4rem and 9rem; force lower end) */
  main > section { padding-block: clamp(2.5rem, 6vw + 1rem, 4rem); }
  /* The hero shouldn't have hairline border on top of nav — keep it borderless */
  .hero-refined { border-top: none; padding-top: 0; }
  /* Footer too */
  .footer { padding-block: var(--space-7); }
}