/* ============================================
   PUPGRADE, Marketing Site Stylesheet
   Light-mode palette (Sage + Terracotta + Cream)
   Shared by landing.html, about.html
   ============================================ */

:root {
  --bg:        #F7F0E4;
  --surface:   #FFFFFF;
  --surface2:  #F1ECDF;
  --surface3:  #E7E0CC;
  --accent:    #1E3A5F;
  --accent-dim:#142A47;
  --accent-tint:rgba(30,58,95,0.08);
  --cta:       #A9741A;
  --cta-dim:   #8A5E13;
  --cta-tint:  rgba(169,116,26,0.12);
  --secondary: #D9B382;
  --secondary-tint: rgba(217,179,130,0.20);
  --success:   #5A9171;
  --warning:   #D9933D;
  --danger:    #C25A4F;
  --gold:      #D4A24B;
  --text:      #1F2622;
  --muted:     #646C5D;
  --border:    #E3D9C5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-top: 36px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.18s; }
button { font-family: inherit; cursor: pointer; }
/* No italics anywhere — owner preference, applies globally */
em, i, cite { font-style: normal; }

/* ─── Typography ─── */
/* OYE dual-color header hover (the two colors visible at rest TRADE PLACES on hover).
   Pattern: header text is one color, .hl-cta/.hl-sage span is another. Hover swaps them.
   Plain headers without a highlight span shift to gold (or secondary on dark bands). */

h1, h2, h3, h4, h5, h6,
.hl-cta, .hl-sage,
.fmk-title, .fmk-head, .area-name, .m-label,
.feature-eyebrow, .tcard-name, .wedge-label,
.tier h3, .tier-tag, .tier-price, .tier-badge,
.foot-brand, .stat-num, .stat-label {
  transition: color 150ms;
}

/* Plain header text on light bands: dark → gold on hover */
h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
  color: var(--gold);
}

/* DUAL-COLOR FLIP, headers with .hl-cta (default: dark text + terracotta span) */
h1:has(.hl-cta):hover,
h2:has(.hl-cta):hover,
h3:has(.hl-cta):hover,
h4:has(.hl-cta):hover { color: var(--cta); }
h1:hover .hl-cta,
h2:hover .hl-cta,
h3:hover .hl-cta,
h4:hover .hl-cta { color: var(--text); }

/* DUAL-COLOR FLIP, headers with .hl-sage (default: dark text + sage span) */
h1:has(.hl-sage):hover,
h2:has(.hl-sage):hover,
h3:has(.hl-sage):hover,
h4:has(.hl-sage):hover { color: var(--accent); }
h1:hover .hl-sage,
h2:hover .hl-sage,
h3:hover .hl-sage,
h4:hover .hl-sage { color: var(--text); }

/* Heading-equivalent divs (mockup card titles, area names, etc.) */
.fmk-title:hover, .fmk-head:hover,
.area-name:hover, .m-label:hover,
.feature-eyebrow:hover, .tcard-name:hover, .wedge-label:hover,
.tier-tag:hover, .tier-price:hover, .tier-badge:hover,
.foot-brand:hover, .stat-num:hover, .stat-label:hover {
  color: var(--gold);
}

/* Card-level hover propagates to their title-equivalent children */
.area-card:hover .area-name,
.loop-stop:hover h4,
.step:hover h4,
.fail-card:hover h4,
.callout:hover h3,
.tier:hover h3 { color: var(--gold); }

/* DARK BANDS (band-sage, cta-band, dive): swap target is secondary (warm cream) and cta */
.band-sage h1, .band-sage h2, .band-sage h3, .band-sage h4,
.cta-band h1, .cta-band h2, .cta-band h3,
.dive h2, .dive h3, .dive h4 { color: var(--bg); }

/* Plain header (no highlight) on dark band: cream → secondary on hover */
.band-sage h1:hover, .band-sage h2:hover, .band-sage h3:hover, .band-sage h4:hover,
.cta-band h1:hover, .cta-band h2:hover, .cta-band h3:hover,
.dive h2:hover, .dive h3:hover, .dive h4:hover { color: var(--secondary); }

/* DARK BAND DUAL-COLOR FLIP for .hl-cta: cream text + terracotta span swap */
.band-sage h1:has(.hl-cta):hover,
.band-sage h2:has(.hl-cta):hover,
.band-sage h3:has(.hl-cta):hover,
.cta-band h2:has(.hl-cta):hover { color: var(--cta); }
.band-sage h1:hover .hl-cta,
.band-sage h2:hover .hl-cta,
.band-sage h3:hover .hl-cta,
.cta-band h2:hover .hl-cta { color: var(--bg); }

/* DARK BAND DUAL-COLOR FLIP for .hl-sage: cream + sage on dark, swap with secondary */
.band-sage h1:has(.hl-sage):hover,
.band-sage h2:has(.hl-sage):hover { color: var(--secondary); }
.band-sage h1:hover .hl-sage,
.band-sage h2:hover .hl-sage { color: var(--bg); }

/* Phase cards (inside .dive, dark) */
.phase:hover h4 { color: var(--secondary); }
.band-sage .area-card:hover .area-name { color: var(--secondary); }

/* Feature-mockup cards (dark green background): gold on hover */
.feature-mockup:hover .fmk-title,
.feature-mockup .fmk-title:hover { color: var(--gold); }
.feature-mockup:hover .fmk-head,
.feature-mockup .fmk-head:hover { color: var(--gold); }

.display {
  font-family: 'Fraunces', 'DM Sans', serif;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.lead { font-size: 1.125rem; color: var(--muted); line-height: 1.6; margin-top: 18px; }

h1.display { font-size: clamp(2.25rem, 6vw, 4rem); }
h1.display.hero-h1 {
  /* Two lines (see the <br>), so it no longer needs to shrink to fit one line.
     Stays a proper hero size on phones (min 2rem) instead of collapsing tiny. */
  font-size: clamp(2rem, 7vw, 3.1rem);
}
h2.display { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 1rem; font-weight: 700; }

/* Highlight words inside headings */
.hl-cta {
  color: var(--cta);
}
.hl-sage {
  color: var(--accent);
}
.hl-strike {
  position: relative;
  color: var(--muted);
  font-weight: 700;
}
.hl-strike::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%;
  top: 55%;
  height: 4px;
  background: var(--cta);
  transform: rotate(-3deg);
  border-radius: 4px;
}

/* Pill-style eyebrows (more color on headers) */
.pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  letter-spacing: 0.1em;
}
.pill-sage   { background: var(--accent); color: var(--bg); }
.pill-cta    { background: var(--cta);    color: #fff; }
.pill-cream  { background: var(--secondary); color: var(--accent-dim); }
.pill-cta-inverse {
  background: var(--secondary);
  color: var(--accent-dim);
}

/* ─── Layout ─── */
.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 48px 0; }
@media (min-width: 768px) { section { padding: 72px 0; } }
/* Anchor-target offset so sticky-nav doesn't cover section titles when jumped to */
section[id], div[id^="how"], div[id^="faq"] { scroll-margin-top: 96px; }
/* Same offset when an FAQ/info dropdown is expanded and faq-scroll.js pins its
   question to the top (keeps the summary clear of the sticky nav) */
.faq details > summary, details.deck-edu > summary { scroll-margin-top: 96px; }

/* Colored section bands */
.band-cream { background: var(--surface2); }
.band-cream + .band-cream { border-top: 1px solid var(--border); }
.band-sage  { background: var(--accent); color: var(--bg); }
.band-sage h2.display { color: var(--bg); }
.band-sage .lead { color: rgba(247,240,228,0.78); }

/* ─── OYE Brand Bar (umbrella, present on every sub-brand page) ─── */
.oye-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 102;
  height: 36px;
  background: #090806;
  border-bottom: 1px solid rgba(201,168,76,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
}
.oye-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: rgba(255,255,255,0.82);
  font-family: 'Fraunces', 'Playfair Display', serif;
  font-size: 0.75rem;
  font-weight: 600;
  transition: color 150ms;
}
.oye-brand em { font-style: normal; color: #7BA6D9; transition: color 150ms; }
.oye-brand svg ellipse, .oye-brand svg circle, .oye-brand svg line { stroke: rgba(255,255,255,0.65); transition: stroke 150ms; }
.oye-brand:hover { color: #7BA6D9; }
.oye-brand:hover em { color: rgba(255,255,255,0.82); }
.oye-brand:hover svg ellipse, .oye-brand:hover svg circle, .oye-brand:hover svg line { stroke: #7BA6D9; }
.oye-net-links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.oye-net-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.oye-net-link svg { opacity: 0.65; transition: opacity 0.15s; flex-shrink: 0; }
.oye-net-link:hover { color: #7BA6D9; }
.oye-net-link:hover svg { opacity: 1; }
@media (max-width: 700px) { .oye-net-links { display: none; } }

/* ─── Nav ─── */
.nav {
  position: sticky;
  top: 36px;
  z-index: 50;
  background: rgba(247,240,228,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.brand {
  position: relative;
  /* Grid, not flex: an absolutely positioned child of a FLEX container resolves
     left:0 against the content box, so padding-left shoved the mark 148px right
     and it stopped hanging off the left edge. A grid container uses the padding
     box, which is what .brand-mark's left:0 has always assumed. */
  display: grid; align-content: center; justify-items: start;
  min-height: 52px;
  padding-left: 148px;          /* tucked close to the overhanging mark */
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* Mark hangs from the nav and bleeds down over the page scrolling below. */
.brand-mark {
  position: absolute;
  left: 0; top: -14px;
  width: 154px; height: 154px;
  object-fit: contain;
  transition: transform 0.25s;
  z-index: 1;
}
/* Rounded wordmark to match the logo; ".app" is a contrasting tone that
   flips with "pupgrade" on hover (per the OYE hover-color convention). */
.brand-word {
  font-family: 'Fredoka', 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  transition: color 0.2s;
}
.brand-tld {
  color: var(--cta);
  transition: color 0.2s;
}
.brand:hover .brand-word { color: var(--cta); }
.brand:hover .brand-tld  { color: var(--text); }
/* Footer reuses the same two-tone wordmark + hover flip. */
.foot-brand:hover .brand-word { color: var(--cta); }
.foot-brand:hover .brand-tld  { color: var(--text); }
.brand:hover .brand-mark { transform: rotate(-8deg); }
.nav-links {
  display: flex;
  gap: 18px;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 500;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  margin: 0 12px;
}
.nav-links::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .nav-links { gap: 32px; font-size: 0.92rem; overflow: visible; margin: 0; flex: initial; }
}
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--cta);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease-out;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }
/* Active state mirrors the in-app bottom-nav .active pattern */
.nav-links a.nav-active { color: var(--text); }
.nav-links a.nav-active::after { transform: scaleX(1); background: var(--accent); }
/* Don't break the underline anim when nav-links scrolls horizontally on mobile */
.nav-links a { position: relative; flex-shrink: 0; }
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-cta {
  background: var(--cta);
  color: #fff;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 700;
  border: 0;
  /* Never wrap to two lines (that's the vertical "expand" seen mid-collapse). */
  white-space: nowrap;
  /* Only transition cosmetic props, never padding/font/size. Transitioning
     "all" made the button visibly expand/shrink when the mobile media query
     re-applied its smaller padding on load. */
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s;
  box-shadow: 0 2px 12px rgba(169,116,26,0.25);
}
.nav-cta:hover {
  background: var(--cta-dim);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(169,116,26,0.4);
}
.nav-login {
  background: transparent;
  color: var(--accent);
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 700;
  border: 1.5px solid var(--accent);
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s, color 0.2s;
  margin-right: 8px;
  text-decoration: none;
}
.nav-login:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 0;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  border: 0;
  transition: all 0.2s;
  cursor: pointer;
}
.btn-primary {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 22px rgba(169,116,26,0.30);
}
.btn-primary:hover {
  background: var(--cta-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(169,116,26,0.45);
}
.btn-primary.btn-tone-sage {
  background: var(--accent);
  box-shadow: 0 4px 22px rgba(30,58,95,0.30);
}
.btn-primary.btn-tone-sage:hover {
  background: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(30,58,95,0.45);
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn-ghost:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translateY(-1px);
}
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }
.btn-sm { padding: 10px 18px; font-size: 0.88rem; }

/* ─── Hero ─── */
.hero {
  padding: 32px 0 56px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,116,26,0.15) 0%, transparent 70%);
  top: -150px; right: -150px;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,58,95,0.12) 0%, transparent 70%);
  bottom: -120px; left: -100px;
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; }
  .hero { padding: 56px 0 72px; }
}
.hero-sub {
  margin-top: 24px;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--muted);
  max-width: 520px;
  line-height: 1.6;
}
.hero-ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-meta {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 18px;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
}
.hero-meta span::before { content: '●'; color: var(--accent); margin-right: 6px; }

/* App preview (fake mobile shell) */
.app-preview {
  background: #101B2E;
  border-radius: 28px;
  padding: 14px;
  box-shadow: 0 30px 60px -20px rgba(20,32,27,0.4), 0 18px 36px -18px rgba(31,38,34,0.3);
  position: relative;
  aspect-ratio: 9/19.5;
  max-width: 360px;
  margin: 0 auto;
  transition: transform 0.4s ease-out;
}
.app-preview:hover { transform: translateY(-6px) rotate(-1deg); }
.app-preview-screen {
  background: #172742;
  height: 100%;
  border-radius: 18px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  color: #EEEAE0;
  font-size: 0.78rem;
}
.app-prev-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: #7BA6D9;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.app-prev-title { font-weight: 700; font-size: 1rem; margin-bottom: 12px; color: #EEEAE0; }
.app-prev-card {
  background: #1F3352;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #243750;
}
.app-prev-next {
  background: rgba(123,166,217,0.14);
  border: 1px solid #7BA6D9;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}
.app-prev-next-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: #7BA6D9;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.app-prev-next-name { font-weight: 700; margin: 4px 0 2px; }
.app-prev-next-desc { font-size: 0.75rem; color: #8FA095; }
.app-prev-dots { display: flex; gap: 5px; margin-top: 8px; }
.app-prev-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.app-prev-dot.on { background: #7BA6D9; }
.app-prev-dot.gold { background: #D4A24B; }
.app-prev-cta {
  margin-top: auto;
  background: #A9741A;
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
}

/* ─── Wedge ─── */
.wedge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 768px) {
  .wedge-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.wedge-compare {
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 12px 36px -18px rgba(31,38,34,0.18);
}
.wedge-row {
  padding: 22px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  gap: 16px;
  transition: background 0.15s;
}
.wedge-row:hover { background: var(--surface2); }
.wedge-row:last-child { border-bottom: 0; }
.wedge-label { font-weight: 700; font-size: 0.95rem; }
.wedge-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.wedge-price {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.35rem;
  white-space: nowrap;
}
.wedge-row.highlight {
  background: var(--accent-tint);
  border-bottom: 0;
}
.wedge-row.highlight:hover { background: rgba(30,58,95,0.14); }
.wedge-row.highlight .wedge-price { color: var(--cta); font-size: 1.7rem; }

/* ─── Pillars ─── */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
}
@media (min-width: 720px) { .pillars-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .pillars-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillars-4 { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  transition: all 0.2s;
  position: relative;
}
.pillar h3 { font-size: 1.15rem; margin-bottom: 8px; }
.pillar p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

.pillar.pillar-link {
  cursor: pointer;
  display: block;
  color: var(--text);
}
.pillar.pillar-link:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 16px 36px -16px rgba(30,58,95,0.22);
}
.pillar.pillar-link:hover .pillar-cta { color: var(--cta); }
.pillar.pillar-link:hover .pillar-cta::after { transform: translateX(4px); }
.pillar-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 18px;
  transition: transform 0.25s;
}
.icon-sage { background: var(--accent-tint); color: var(--accent); }
.icon-cta  { background: var(--cta-tint);    color: var(--cta); }
.icon-gold { background: var(--secondary-tint); color: var(--accent-dim); }
.pillar.pillar-link:hover .pillar-icon { transform: scale(1.08) rotate(-4deg); }
.pillar-cta {
  display: inline-block;
  margin-top: 16px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  transition: color 0.18s;
}
.pillar-cta::after {
  content: '';
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.18s;
}

/* ─── Pricing ─── */
.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 48px;
}
@media (min-width: 880px) {
  .tiers { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
}
.tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
}
.tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(31,38,34,0.18);
}
.tier.featured {
  border: 2px solid var(--accent);
  position: relative;
  box-shadow: 0 24px 50px -22px rgba(30,58,95,0.30);
  transform: scale(1.02);
}
.tier.featured:hover {
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 32px 60px -22px rgba(30,58,95,0.40);
}
@media (max-width: 879px) {
  .tier.featured { transform: none; }
  .tier.featured:hover { transform: translateY(-4px); }
}
.tier-badge {
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  background: var(--cta);
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(169,116,26,0.4);
}
.tier h3 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 4px;
  color: var(--text);
}
.tier-tag { color: var(--muted); font-size: 0.88rem; margin-bottom: 22px; }
.tier-price {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.tier.featured .tier-price { color: var(--cta); }
.tier-price small {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--muted);
  letter-spacing: 0;
}
.tier-period { color: var(--muted); font-size: 0.88rem; margin: 8px 0 26px; }
.tier ul { list-style: none; margin: 0 0 26px; flex: 1; }
.tier ul li {
  padding: 8px 0;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.94rem;
  color: var(--text);
  line-height: 1.5;
}
.tier ul li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.tier ul li.muted { color: var(--muted); }
.tier ul li.muted::before { content: '-'; color: var(--muted); }
.tier .btn { width: 100%; }
.tier-btn-stack { display: flex; flex-direction: column; gap: 8px; }
.tier-btn-stack .btn-sm { background: transparent; box-shadow: none; }
.tier-btn-stack .btn-sm:hover {
  background: var(--accent);
  color: var(--bg);
  transform: none;
}
.tier-foot {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}
.tier-anchor {
  margin-top: 40px;
  padding: 22px 28px;
  background: var(--surface);
  border-radius: 16px;
  font-size: 0.95rem;
  color: var(--text);
  text-align: center;
  border: 1px solid var(--border);
}
.tier-anchor strong { color: var(--cta); }
.band-sage .tier-anchor {
  background: rgba(247,240,228,0.06);
  color: rgba(247,240,228,0.92);
  border-color: rgba(247,240,228,0.15);
}
.band-sage .tier-anchor strong { color: var(--secondary); }

/* ─── Final CTA ─── */
.final-cta {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  color: var(--bg);
  border-radius: 28px;
  padding: 64px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,116,26,0.20) 0%, transparent 70%);
  top: -100px; right: -80px;
  pointer-events: none;
}
.final-cta > * { position: relative; z-index: 1; }
.final-cta h2 { color: var(--bg); margin-bottom: 14px; }
.final-cta p { color: rgba(247,240,228,0.80); margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
.final-cta .btn-ghost {
  color: var(--bg);
  border-color: rgba(247,240,228,0.4);
}
.final-cta .btn-ghost:hover { background: rgba(247,240,228,0.12); color: var(--bg); border-color: var(--bg); }
.final-cta .btn-primary { box-shadow: 0 8px 28px rgba(0,0,0,0.25); }

/* ─── About-page extras (used on about.html) ─── */
.matrix-wrap {
  margin-top: 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}
table.matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  font-size: 0.92rem;
}
table.matrix th, table.matrix td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
table.matrix th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'DM Mono', monospace;
  background: var(--surface2);
  white-space: nowrap;
}
table.matrix th:first-child, table.matrix td:first-child {
  position: sticky; left: 0;
  background: var(--surface);
  z-index: 1;
  font-weight: 600;
}
table.matrix th:first-child { background: var(--surface2); }
table.matrix tr.us td { background: var(--accent-tint); color: var(--accent-dim); font-weight: 700; }
table.matrix tr.us td:first-child { background: var(--accent); color: var(--bg); }
table.matrix td.yes { color: var(--success); font-weight: 700; }
table.matrix td.no  { color: var(--muted); }
table.matrix td.partial { color: var(--warning); font-weight: 600; }
.matrix-note {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--muted);
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 42px;
  counter-reset: step;
}
@media (min-width: 880px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 24px;
  counter-increment: step;
  transition: all 0.2s;
}
.step:hover {
  transform: translateY(-3px);
  border-color: var(--secondary);
  box-shadow: 0 16px 32px -16px rgba(31,38,34,0.18);
}
.step::before {
  content: counter(step);
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--secondary);
  line-height: 1;
}
.step h4 { margin: 10px 0 6px; font-size: 1.05rem; }
.step p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

.dive {
  background: var(--accent);
  color: var(--bg);
  border-radius: 28px;
  padding: 40px;
}
@media (min-width: 768px) { .dive { padding: 64px; } }
.dive .eyebrow { color: var(--secondary); }
.dive h2 { color: var(--bg); }
.dive p, .dive .lead { color: rgba(247,240,228,0.82); }
.phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 36px;
}
@media (min-width: 720px) { .phases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .phases { grid-template-columns: repeat(4, 1fr); } }
.phase {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(247,240,228,0.18);
  border-radius: 16px;
  padding: 22px;
  transition: all 0.2s;
}
.phase:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(247,240,228,0.30);
  transform: translateY(-2px);
}
.phase-tag {
  display: inline-block;
  background: var(--cta);
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
  font-weight: 700;
}
.phase h4 { margin-bottom: 6px; color: var(--bg); }
.phase p { font-size: 0.86rem; }

.contrast {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 38px;
}
@media (min-width: 768px) { .contrast { grid-template-columns: 1fr 1fr; gap: 28px; } }
.contrast-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
}
.contrast-block.no  { border-left: 5px solid var(--danger);  }
.contrast-block.yes { border-left: 5px solid var(--success); }
.contrast-block h3 { margin-bottom: 18px; }
.contrast-block ul li {
  list-style: none;
  padding: 8px 0;
  font-size: 0.95rem;
  color: var(--text);
  display: flex;
  gap: 12px;
  line-height: 1.55;
}
.contrast-block.no  li::before { content: '✕'; color: var(--danger);  font-weight: 800; }
.contrast-block.yes li::before { content: '✓'; color: var(--success); font-weight: 800; }

.faq {
  margin-top: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.faq details {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.faq details:last-child { border-bottom: 0; }
.faq details[open] { background: var(--surface2); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 28px;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::after {
  content: '+';
  color: var(--cta);
  font-size: 1.6rem;
  font-weight: 700;
  transition: transform 0.2s;
  line-height: 1;
}
.faq details[open] summary::after { content: '-'; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cta); }
.faq-answer {
  padding: 0 28px 26px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.96rem;
}

.callouts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 36px;
}
@media (min-width: 880px) { .callouts { grid-template-columns: 1fr 1fr; gap: 28px; } }
.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 36px;
  transition: all 0.2s;
}
.callout:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 16px 36px -16px rgba(30,58,95,0.18);
}
.callout-emoji { font-size: 2.2rem; margin-bottom: 16px; }
.callout h3 { margin-bottom: 10px; }
.callout p { color: var(--muted); line-height: 1.6; }
.tag-row { margin-top: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  background: var(--secondary-tint);
  color: var(--accent-dim);
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
}

/* ─── Footer ─── */
footer {
  padding: 64px 0 40px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--muted);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 32px;
}
@media (min-width: 720px) { .foot-grid { grid-template-columns: minmax(240px, 2fr) repeat(auto-fit, minmax(140px, 1fr)); gap: 36px; } }
.foot-brand { font-weight: 800; font-size: 1.05rem; color: var(--text); }
.foot-tagline { color: var(--muted); margin-top: 6px; max-width: 280px; }
.foot-col h5 {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 12px;
}
.foot-col a { display: block; width: fit-content; max-width: 100%; padding: 5px 0; color: var(--muted); }
.foot-col a:hover { color: var(--cta); }
.foot-social-row { display: flex; gap: 10px; margin-top: 16px; }
.social-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 38, 34, .06);
  color: var(--muted);
  border-radius: 50%;
  transition: color 0.15s;
}
.social-icon svg { width: 17px; height: 17px; fill: currentColor; }
.social-icon:hover { background: rgba(31, 38, 34, .06); color: var(--cta); }
.foot-line {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
}
.foot-line > span:first-child a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border); }
.foot-line > span:first-child a:hover { color: var(--cta); text-decoration-color: var(--cta); }
.foot-line-solo { border-top: none; padding-top: 0; }
.foot-legal a { color: var(--muted); transition: color 0.18s; }
.foot-legal a:hover { color: var(--cta); }

/* ─── Section header helper ─── */
.section-head {
  text-align: center;
  margin-bottom: 8px;
}
.section-head h2 { margin-top: 14px; }
.section-head .lead { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ─── v2 additions: stats, feature rows, areas grid, testimonials, loop ─── */

/* Stat strip (under hero, or anywhere mid-page) */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 720px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat {
  text-align: center;
  padding: 0 12px;
}
.stat-num {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.025em;
  color: var(--accent);
  line-height: 1;
}
.stat-num.cta { color: var(--cta); }
.stat-num.gold { color: var(--gold); }
.stat-label {
  margin-top: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Feature rows, alternating image/copy */
.feature-rows {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 48px;
}
@media (min-width: 768px) { .feature-rows { gap: 96px; } }
.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 880px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: 64px; }
  .feature-row.reverse > .feature-copy { order: 2; }
  .feature-row.reverse > .feature-mockup { order: 1; }
}
.feature-copy h3 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  margin: 14px 0 14px;
  line-height: 1.15;
}
.feature-copy p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.feature-copy p + p { margin-top: 12px; }
.feature-copy .tag-row { margin-top: 18px; }
.feature-copy .feature-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cta);
  font-weight: 600;
}

/* In-product mockup card (smaller than the hero phone) */
.feature-mockup {
  background: #101B2E;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 28px 60px -28px rgba(20,32,27,0.45), 0 14px 30px -16px rgba(31,38,34,0.28);
  position: relative;
  color: #EEEAE0;
  transition: transform 0.35s ease-out;
}
.feature-mockup:hover { transform: translateY(-4px); }
.feature-mockup .fmk-head {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: #7BA6D9;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.feature-mockup .fmk-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #EEEAE0;
  margin-bottom: 14px;
}
.feature-mockup .fmk-card {
  background: #172742;
  border: 1px solid #243750;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  font-size: 0.84rem;
}
.feature-mockup .fmk-card.accent {
  background: rgba(123,166,217,0.14);
  border-color: #7BA6D9;
}
.feature-mockup .fmk-card.warn {
  background: rgba(169,116,26,0.14);
  border-color: #A9741A;
}
.feature-mockup .fmk-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.fmk-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: #8FA095;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.fmk-dots { display: flex; gap: 5px; margin-top: 8px; }
.fmk-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.10); }
.fmk-dot.on { background: #7BA6D9; }
.fmk-dot.gold { background: #D4A24B; }
.fmk-dot.cta { background: #A9741A; }
.fmk-bar {
  height: 6px; border-radius: 100px;
  background: rgba(255,255,255,0.08);
  margin-top: 8px; position: relative; overflow: hidden;
}
.fmk-bar > span {
  display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, #7BA6D9, #D4A24B);
}

/* 12 focus areas grid */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 40px;
}
@media (min-width: 640px) { .areas-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .areas-grid { grid-template-columns: repeat(4, 1fr); } }
.area-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 18px;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.area-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 28px -16px rgba(30,58,95,0.22);
}
.area-card .area-emoji {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.area-card .area-name {
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.area-card .area-blurb {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.area-card .area-skills {
  margin-top: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cta);
}
.area-card.foundation {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.area-card.foundation .area-name { color: var(--bg); }
.area-card.foundation .area-blurb { color: rgba(247,240,228,0.78); }
.area-card.foundation .area-skills { color: var(--secondary); }

/* Foundation banner, sits ABOVE the 12-card grid so the count is honest */
.foundation-banner {
  background: var(--accent);
  color: var(--bg);
  border-radius: 18px;
  padding: 22px 26px;
  margin-top: 40px;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  transition: transform 0.18s, box-shadow 0.18s;
}
.foundation-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(30,58,95,0.45);
}
.foundation-banner .fb-emoji {
  font-size: 2.2rem;
  text-align: center;
}
.foundation-banner .fb-name {
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--bg);
  margin-bottom: 2px;
}
.foundation-banner .fb-blurb {
  font-size: 0.88rem;
  color: rgba(247,240,228,0.82);
  line-height: 1.5;
}
.foundation-banner .fb-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  text-align: right;
  white-space: nowrap;
}
.band-sage .foundation-banner {
  background: rgba(247,240,228,0.10);
  border: 1px solid rgba(247,240,228,0.20);
}
@media (max-width: 640px) {
  .foundation-banner { grid-template-columns: 48px 1fr; }
  .foundation-banner .fb-meta { grid-column: 2; text-align: left; }
}

/* Grid that follows the banner: tighten the top spacing */
.foundation-banner + .areas-grid { margin-top: 16px; }
.band-sage .area-card {
  background: rgba(247,240,228,0.06);
  border-color: rgba(247,240,228,0.18);
}
.band-sage .area-card .area-name { color: var(--bg); }
.band-sage .area-card .area-blurb { color: rgba(247,240,228,0.78); }
.band-sage .area-card .area-skills { color: var(--secondary); }

/* Testimonial cards */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
@media (min-width: 880px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
.tcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px;
  position: relative;
}
.tcard::before {
  content: '“';
  position: absolute;
  top: 18px; right: 28px;
  font-family: 'Fraunces', serif;
  font-size: 5rem;
  color: var(--secondary);
  line-height: 1;
  opacity: 0.45;
}
.tcard-quote {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.tcard-who {
  margin-top: 22px;
  display: flex; align-items: center; gap: 12px;
}
.tcard-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.tcard-name { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.tcard-role { font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Loop diagram (4 stops on a horizontal/vertical track) */
.loop {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  position: relative;
}
@media (min-width: 880px) {
  .loop {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .loop::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 12%; right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--secondary) 0 8px, transparent 8px 16px);
    z-index: 0;
  }
}
.loop-stop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 20px;
  position: relative;
  z-index: 1;
  transition: all 0.18s;
}
.loop-stop:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -16px rgba(30,58,95,0.20);
}
.loop-stop-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 1rem;
  margin-bottom: 14px;
}
.loop-stop h4 {
  font-size: 1.02rem;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}
.loop-stop p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Mastery scale (about page) */
.mastery {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 8px 0;
}
.mastery-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 14px 22px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.mastery-row:last-child { border-bottom: 0; }
.mastery-row .m-level {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--cta);
  text-align: center;
}
.mastery-row .m-label { font-weight: 700; font-size: 0.95rem; }
.mastery-row .m-crit { font-size: 0.85rem; color: var(--muted); margin-top: 2px; line-height: 1.5; }

/* Dark CTA band (final push, slightly different from .final-cta) */
.cta-band {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  color: var(--bg);
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,116,26,0.18) 0%, transparent 70%);
  top: -160px; right: -120px;
  pointer-events: none;
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2.display { color: var(--bg); }
.cta-band .lead { color: rgba(247,240,228,0.82); max-width: 540px; margin-left: auto; margin-right: auto; }
.cta-band-actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-ghost { color: var(--bg); border-color: rgba(247,240,228,0.45); }
.cta-band .btn-ghost:hover { background: rgba(247,240,228,0.12); color: var(--bg); border-color: var(--bg); }

/* Compact comparison row (for "what shipped today" tags under features) */
.shipped-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-tint);
  color: var(--accent-dim);
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}
.shipped-tag::before { content: '●'; color: var(--success); font-size: 0.75rem; }

/* Dark section variant of pillars (for placement on .band-sage) */
.band-sage .pillar {
  background: rgba(247,240,228,0.06);
  border-color: rgba(247,240,228,0.18);
  color: var(--bg);
}
.band-sage .pillar h3 { color: var(--bg); }
.band-sage .pillar p { color: rgba(247,240,228,0.78); }
.band-sage .pillar-cta { color: var(--secondary); }
.band-sage .pillar.pillar-link:hover { border-color: var(--secondary); box-shadow: none; }

/* ============================================
   Mobile hamburger + drawer
   ============================================ */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  margin-left: 4px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.nav-burger:hover { background: var(--surface2); }
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  margin: 4px auto;
  transition: transform 0.22s ease, opacity 0.18s ease;
  transform-origin: center;
}
body.nav-drawer-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-drawer-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-drawer-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.nav-drawer-open { overflow: hidden; }

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 32, 27, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.nav-drawer-open .nav-drawer-backdrop { opacity: 1; pointer-events: auto; }
.nav-drawer-inner {
  position: absolute;
  top: 0; right: 0;
  width: min(86%, 320px);
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--border);
  padding: calc(var(--oye-bar-h, 36px) + 80px) 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0.24, 1);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  pointer-events: auto;
}
body.nav-drawer-open .nav-drawer-inner { transform: translateX(0); }
.nav-drawer-link {
  display: block;
  padding: 14px 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light, rgba(238,234,224,0.06));
}
.nav-drawer-link:hover { color: var(--accent); }
.nav-drawer-group {
  margin-top: 18px;
  padding: 2px 4px 6px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.nav-drawer-group + .nav-drawer-link { border-top: 1px solid var(--border-light, rgba(238,234,224,0.06)); }
.nav-drawer-ctas {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nav-drawer-ctas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  margin: 0;
  border: 0;
  transition: all 0.18s;
}
.nav-drawer-ctas .nav-login {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.nav-drawer-ctas .nav-login:hover { background: var(--accent); color: #fff; }
.nav-drawer-ctas .nav-cta {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 22px rgba(169, 116, 26, 0.30);
}

/* Collapse to the hamburger below 1024px. The logged-in nav (wide brand + 5
   links + notification bell + Sign out) starts crowding and the Sign out
   button gets squeezed/wrapped around ~900px, so we switch to the drawer at
   the tablet-landscape breakpoint where the full row is guaranteed to fit. */
@media (max-width: 1023px) {
  .nav-burger { display: block; }
  .nav .nav-inner > .nav-links { display: none !important; }
  .nav .nav-inner > .nav-cta-group .nav-login { display: none; }
  .nav .nav-inner > .nav-cta-group .nav-cta { padding: 9px 14px; font-size: 0.84rem; }
  /* Brand must be allowed to give up space so the right-side controls never
     get pushed off-screen (was clipping "Sign out" / "Create account"). */
  .brand { min-width: 0; }
  /* Redundant top-bar CTAs are hidden on mobile — each is still reachable:
     • Sign out (app pages) is cloned into the burger drawer.
     • login/signup's cross-link CTA also lives in the card body + drawer.
     Marketing's short "Try free" stays (it's the primary conversion CTA). */
  .nav .nav-inner > .nav-cta-group #navSignOut { display: none; }
  .nav .nav-inner > .nav-cta { display: none; }
}

/* ============================================
   Mobile polish (marketing pages)
   ============================================ */

/* Prevent iOS auto-zoom on focused inputs (must be >= 16px) */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="search"], select, textarea {
  font-size: 16px;
}

/* Tighten the nav at narrow widths (hamburger handles links + login) */
@media (max-width: 640px) {
  .nav-inner { padding: 10px 14px; gap: 8px; }
  .brand { font-size: 1.5rem; min-height: 46px; padding-left: 90px; }
  .brand-mark { width: 92px; height: 92px; top: -3px; }
}

/* Phone nav: trim the row padding + CTA so the visible "Try free" never
   bleeds past the right edge on ~375–420px phones. */
@media (max-width: 420px) {
  .nav-inner { padding: 10px 12px; }
  .nav .nav-inner > .nav-cta-group .nav-cta { padding: 8px 13px; font-size: 0.82rem; }
}

/* Very narrow phones (≤360px): the full-size wordmark + mark crowds out the
   burger/CTA, so step the brand down. The logo still reads clearly. */
@media (max-width: 360px) {
  .brand { font-size: 1.08rem; padding-left: 60px; min-height: 40px; }
  .brand-mark { width: 62px; height: 62px; top: 0; }
}

/* OYE site-health strip: the droptimize credit is one rigid nowrap block.
   On narrow phones let it wrap + shrink (and trim the band padding) so it
   never forces horizontal scroll. */
@media (max-width: 420px) {
  [data-oye-strip] { padding-left: 14px !important; padding-right: 14px !important; }
  span:has(> .oye-dt-lnk), span:has(> .dt-lnk) {
    flex-wrap: wrap !important;
    flex-shrink: 1 !important;
    justify-content: center;
    row-gap: 4px;
  }
}

/* True-phone tighten on hero stats, tiers, CTAs */
@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .hero-stats .stat-num { font-size: 1.05rem; }
  .hero-stats .stat-label { font-size: 0.75rem; letter-spacing: 0.04em; }
  .tier { padding: 28px 22px; }
  .tier-price { font-size: 2.4rem; }
  .final-cta { padding: 48px 22px; }
  .cta-band { padding: 56px 0; }
  .dive { padding: 32px 22px; }
  .contrast-block { padding: 24px 20px; }
}

/* Pack-add input shouldn't force horizontal overflow on tiny phones */
@media (max-width: 360px) {
  .pack-add-form input.pack-add-input { min-width: 0; flex: 1 1 140px; }
}

/* Notification bell (injected by nav-badge.js) needs breathing room from the
   Sign out CTA so users don't tap Sign out by accident. */
.nav .nav-inner #navBellLink,
.nav .nav-inner .nav-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 14px;
  color: var(--text);
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.nav .nav-inner #navBellLink:hover,
.nav .nav-inner .nav-bell:hover {
  background: var(--surface2);
  color: var(--accent);
}
.nav .nav-inner .nav-bell-count {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--cta);
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 4px;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.nav .nav-inner .nav-bell-count:not(:empty) { display: inline-flex; }

/* ─── "More" dropdown inside .nav-links (Tight 5-link nav) ─── */
.nav-more { position: relative; flex-shrink: 0; }
.nav-more-toggle {
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}
@media (min-width: 768px) { .nav-more-toggle { font-size: 0.92rem; } }
.nav-more-toggle:hover { color: var(--text); }
.nav-more-chev { font-size: 0.75em; transition: transform 0.18s; line-height: 1; }
.nav-more.open .nav-more-chev { transform: rotate(180deg); }
.nav-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.06);
  z-index: 60;
}
.nav-more.open .nav-more-menu { display: block; }
/* Open the dropdown on hover for mouse users (both .app and .dog share this nav).
   Touch/keyboard keep the click toggle above. The ::before bridges the 8px gap
   between the toggle and the menu so moving the cursor down doesn't drop hover. */
@media (hover: hover) and (pointer: fine) {
  .nav-more:hover .nav-more-menu { display: block; }
  .nav-more:hover .nav-more-chev { transform: rotate(180deg); }
  .nav-more-menu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
}
.nav-more-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.nav-more-menu a:hover { background: var(--surface2); color: var(--accent); }
.nav-more-menu a.nav-active { background: var(--accent-tint, rgba(30,58,95,0.08)); color: var(--accent); }
.nav-more-menu-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  opacity: 0.85;
}

/* On mobile drawer (built by nav-burger.js), the More button is hidden;
   the drawer flattens all items including those nested inside .nav-more-menu. */
@media (max-width: 640px) {
  .nav .nav-inner > .nav-links .nav-more { display: none; }
}

/* ─── WCAG AA contrast + a11y fixes (droptimize audit 2026-05-28) ─────────
   Brand gold (#D4A24B) and accent (#D98E5A) only hit ~2.5:1 as small text on
   the dark surface (#16202E). These bump the affected small-text spots to AA
   (>=4.5:1) while leaving large fills, icons, and big numerals on the original
   brand colors. --muted was also lifted (#7C8479 -> #A2ABA0) at :root. */
.nav-cta{
  background:var(--accent);
  color:#101B2E !important;
  padding:7px 15px;
  border-radius:999px;
  font-weight:700;
  line-height:1.1;
}
.nav-cta:hover{ background:#E6A877; color:#101B2E !important; }
.brand-tld{ color:#F4D98F !important; }
.foot-h{
  font-family:'Fraunces',serif;
  font-size:0.82rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:700;
  color:var(--text);
  margin:0 0 12px;
}

/* ─── Corrective AA overrides (light theme) — supersede the earlier block ─── */
.nav-cta{ background:#B4D335 !important; color:#12213A !important; }
.nav-cta:hover{ background:#A3C22A !important; color:#12213A !important; }
.brand-tld{ color:var(--cta) !important; }
.band-sage .hl-cta, .cta-band .hl-cta { color:#F3B58C !important; }
.band-sage .tier-anchor strong { color:#F0DCBE !important; }
table.matrix td.partial { color:#8E5A14 !important; }
table.matrix td.yes     { color:#2E4E7A !important; }
.oye-s-seo,.oye-s-sec,.oye-s-of6,.oye-s-perf,.oye-s-a11y,.oye-s-bp { color:#7E6320 !important; }
.oye-s-date { color:#2E4E7A !important; }
.dt-t2, .oye-dt-t2 { color:#7E6320 !important; }

/* ─── Dark score strip: on-dark ink ────────────────────────────────────────
   The three rules directly above were written when the footer score strip was
   CREAM. It is #1F2622 now, and because they are !important they beat the
   strip's own inline colours: the numbers painted #7E6320 (2.7:1) and the date
   painted navy no matter what the markup said. Editing the inline styles alone
   changes nothing, which is why an earlier pass at this appeared to work in
   source and still rendered unreadable. Scope the light-theme values away from
   the dark strip only. pet.html's strip is cream and carries no
   [data-oye-strip] attribute, so it keeps the rules above unchanged. */
[data-oye-strip] .oye-s-seo, [data-oye-strip] .oye-s-sec, [data-oye-strip] .oye-s-of6, [data-oye-strip] .oye-s-perf,
[data-oye-strip] .oye-s-a11y, [data-oye-strip] .oye-s-bp { color: var(--gold) !important; }
[data-oye-strip] .oye-s-date { color: #4ADE80 !important; }
[data-oye-strip] .oye-dt-t2  { color: var(--gold) !important; }

/* The shared OYE World widget injects itself as the footer's FIRST child, so
   the footer's whole 64px top padding sat above it while its own 18px sat
   below: 65px / 19px, and it read as glued to the footer rather than sitting
   between the two. Give it equal air on both sides. :has() means a page where
   the widget never injected keeps the original 64px. */
footer:has(> .oyw) { padding-top: 0; }
footer > .oyw      { padding-top: 18px; }

/* ─── OYE World widget: pin the ink ──────────────────────────────────────
   The widget is shared across every OYE brand and chooses its own colours at
   runtime from whatever background it can measure. On this site that goes wrong
   two ways. The "15" count pill is hard-coded gold #C9A84C, which is 2.02:1 on
   our cream footer, unreadable on every page all the time. And the summary label
   only turns dark if the widget resolves the background in time; when injection
   beats our stylesheet it keeps the same gold, so the label reads 16:1 on one
   load and 2.02:1 on the next. Pin both to brand ink so every CritterEdu page
   looks identical and neither depends on a race. !important because the widget
   sets its choice as an INLINE style, which a plain rule cannot outrank. */
.oyw > summary { color: var(--text, #1F2622) !important; }          /* 13.65:1 on cream */
.oyw-count {
  color: var(--cta-dim, #8A5E13) !important;                        /* 5.02:1, still gold */
  border-color: rgba(138, 94, 19, 0.45) !important;
}

/* ─── Progress feed (dog_posts): shared composer + post cards ─────────────
   Used on my.html (owner timeline), community.html (pack feed), and
   dog.html (public, read-only). Tokens: --surface/--text/--muted/--border. */
.pg-feed { display: flex; flex-direction: column; gap: 14px; }

.pg-composer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pg-composer-body {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  box-sizing: border-box;
}
.pg-composer-body:focus { outline: none; border-color: var(--accent); }
.pg-composer-media-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-composer-link {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
}
.pg-composer-link:focus { outline: none; border-color: var(--accent); }
.pg-composer-addlink, .pg-composer-lib {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.pg-composer-addlink:hover, .pg-composer-lib:hover { border-color: var(--accent); }
.pg-composer-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-tint, rgba(30,58,95,0.1));
  color: var(--text);
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-size: 0.8rem;
}
.pg-chip button { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--muted); padding: 0 2px; }
.pg-composer-library { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.pg-lib-item {
  text-align: left; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; font-size: 0.82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-lib-item:hover { border-color: var(--accent); }
.pg-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pg-composer-controls { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 4px; }
.pg-composer-ctl { display: inline-flex; flex-direction: column; gap: 5px; }
.pg-composer-ctl-label {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); font-weight: 700;
}
.pg-composer-react { display: inline-flex; gap: 6px; }
.pg-react-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.8rem; padding: 5px 12px;
}
.pg-react-btn.active { border-color: var(--accent); color: var(--text); background: var(--accent-tint, rgba(30,58,95,0.1)); }
.pg-composer-vis { display: inline-flex; gap: 6px; }
.pg-vis-btn {
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600;
}
.pg-vis-btn.active { border-color: var(--accent); color: var(--text); background: var(--accent-tint, rgba(30,58,95,0.1)); }
.pg-composer-post {
  border: 0; background: var(--cta); color: #fff;
  border-radius: 999px; padding: 8px 22px; cursor: pointer; font: inherit; font-weight: 700;
}
.pg-composer-post:hover { filter: brightness(1.05); }
.pg-composer-post:disabled { opacity: 0.6; cursor: default; }

.pg-post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.pg-post-head { display: flex; align-items: center; gap: 10px; }
.pg-post-avatar { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; align-items: center; justify-content: center; }
.pg-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pg-post-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pg-post-name { font-weight: 700; color: var(--text); }
.pg-post-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.76rem; color: var(--muted); }
.pg-post-handle { color: var(--muted); }
.pg-post-vis { font-size: 0.75rem; }
.pg-post-del { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.pg-post-del:hover { color: var(--cta); }
.pg-post-body { margin: 10px 0 0; color: var(--text); line-height: 1.5; white-space: normal; word-wrap: break-word; }
.pg-post-media { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.pg-post-media-item { border-radius: 10px; overflow: hidden; }
.pg-post-media-item img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.pg-post-media-item iframe { max-width: 100%; border-radius: 10px; }
.pg-post-media-cap { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.pg-post-empty { color: var(--muted); text-align: center; padding: 18px; }

/* Repost / edit / actions on post cards */
.pg-post-actions { margin-left: auto; display: inline-flex; gap: 2px; flex-shrink: 0; }
.pg-post-act {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 0.95rem; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.pg-post-act:hover { color: var(--text); background: var(--accent-tint, rgba(30,58,95,0.1)); }
.pg-post-act.pg-post-del:hover { color: var(--cta); }
/* Admin moderation tools live in their own highlighted gold section so they're
   never mistaken for a member's own controls. Only shown to admins, on posts
   they don't own. */
.pg-post-admin {
  align-items: center; gap: 2px; margin-left: 6px; padding: 2px 7px 2px 5px;
  background: var(--gold-bg, rgba(212,162,75,0.16));
  border: 1px solid rgba(212,162,75,0.55); border-radius: 999px;
}
.pg-admin-tag {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gold, #b07d1a); padding-right: 2px; white-space: nowrap;
}
.pg-post-admin .pg-post-act { color: var(--gold, #b07d1a); }
.pg-post-admin .pg-post-act:hover { color: var(--text); background: rgba(212,162,75,0.28); }
.pg-post-admin .pg-post-act.pg-post-del:hover { color: var(--cta); }
.pg-post-head-sm .pg-post-avatar { width: 30px; height: 30px; }
.pg-post-head-sm .pg-post-name { font-size: 0.9rem; }
.pg-post-quote {
  margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 10px;
  background: var(--bg);
}
.pg-post-quote .pg-post-body { margin-top: 8px; font-size: 0.92rem; }
.pg-post-quote-missing { color: var(--muted); font-size: 0.85rem; }
.pg-edit, .pg-repost-form { margin-top: 10px; }
.pg-edit-btns { display: inline-flex; gap: 8px; align-items: center; }

/* ─── Social footer: like / comment / share (public posts) ─────────────── */
.pg-post-social {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.pg-soc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 0.85rem;
  padding: 5px 9px; border-radius: 999px; line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.pg-soc-btn:hover { background: var(--accent-tint, rgba(30,58,95,0.1)); color: var(--text); }
.pg-soc-ico { font-size: 1.05rem; line-height: 1; }
.pg-soc-count { min-width: 0.6em; text-align: left; }
.pg-soc-paw { width: 17px; height: 17px; display: block; fill: currentColor; transition: transform 0.16s ease; }
.pg-soc-like.liked { color: var(--cta); }
.pg-soc-like.liked .pg-soc-paw { transform: scale(1.12); }
.pg-soc-like.liked:hover { background: var(--cta-tint, rgba(169,116,26,0.12)); }
.pg-soc-share { margin-left: auto; }
.pg-soc-label { font-size: 0.82rem; }

/* ─── Comments drawer ──────────────────────────────────────────────────── */
.pg-comments { margin-top: 10px; }
.pg-cmt-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.pg-cmt-empty { color: var(--muted); font-size: 0.86rem; padding: 4px 0; }
.pg-cmt { display: flex; gap: 9px; align-items: flex-start; }
.pg-cmt-avatar {
  display: inline-flex; width: 30px; height: 30px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; align-items: center; justify-content: center;
}
.pg-cmt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pg-cmt-main { flex: 1; min-width: 0; }
.pg-cmt-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 0.78rem; }
.pg-cmt-name { font-weight: 700; color: var(--text); font-size: 0.86rem; }
.pg-cmt-handle, .pg-cmt-time { color: var(--muted); }
.pg-cmt-body { color: var(--text); line-height: 1.45; margin-top: 2px; word-wrap: break-word; }
.pg-cmt-acts { display: flex; gap: 12px; margin-top: 4px; }
.pg-cmt-link {
  border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--muted); font: inherit; font-size: 0.76rem; font-weight: 600;
}
.pg-cmt-link:hover { color: var(--accent); }
.pg-cmt-del:hover { color: var(--cta); }
.pg-cmt-replies {
  margin-top: 10px; margin-left: 39px;
  display: flex; flex-direction: column; gap: 12px;
  border-left: 2px solid var(--border); padding-left: 11px;
}
.pg-cmt-compose { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.pg-cmt-replybox { margin-top: 10px; margin-left: 39px; }
.pg-cmt-input {
  flex: 1; min-width: 0; resize: vertical;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; font: inherit; font-size: 0.88rem;
  background: var(--surface); color: var(--text);
}
.pg-cmt-input:focus { outline: none; border-color: var(--accent); }
.pg-cmt-post {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--bg);
  font: inherit; font-size: 0.84rem; font-weight: 600;
  padding: 8px 14px; flex-shrink: 0; align-self: flex-start;
}
.pg-cmt-post:hover { filter: brightness(1.05); }
.pg-cmt-post:disabled { opacity: 0.6; cursor: default; }
.pg-cmt-signin {
  border: 1px solid var(--accent); border-radius: 999px; cursor: pointer;
  background: none; color: var(--accent);
  font: inherit; font-size: 0.84rem; font-weight: 600; padding: 8px 14px;
}
.pg-cmt-signin:hover { background: var(--accent); color: var(--bg); }

/* ─── Dog Park tab (embedded community.html) ───────────────────────────── */
.dogpark-frame {
  width: 100%; height: 84vh; min-height: 560px;
  border: 0; border-radius: 14px; display: block; background: var(--surface);
}
@media (max-width: 768px) { .dogpark-frame { height: 88vh; border-radius: 0; } }

/* ─── Collapsible profile section (Progress dropdown) ──────────────────── */
details.profile-collapse { }
details.profile-collapse > summary.profile-collapse-head {
  display: flex; align-items: baseline; gap: 10px;
  cursor: pointer; list-style: none; user-select: none;
}
details.profile-collapse > summary.profile-collapse-head::-webkit-details-marker { display: none; }
.profile-collapse-chevron { margin-left: auto; color: var(--muted); font-size: 0.95rem; transition: transform 0.18s ease; }
details.profile-collapse[open] > summary .profile-collapse-chevron { transform: rotate(180deg); }
.profile-collapse-body { margin-top: 14px; }

/* ─── Pending pack-requests card (profile editor) ──────────────────────── */
.pack-requests-card {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); margin: 0 0 16px; overflow: hidden;
}
.pack-requests-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; cursor: pointer; padding: 12px 14px;
  font: inherit; color: var(--text); font-weight: 700;
}
.pack-requests-title { font-size: 0.95rem; }
.pack-requests-badge {
  background: var(--cta); color: #fff; border-radius: 999px;
  font-size: 0.75rem; font-weight: 800; min-width: 1.4em; text-align: center;
  padding: 1px 7px; line-height: 1.5;
}
.pack-requests-chevron { margin-left: auto; color: var(--muted); transition: transform 0.18s ease; }
.pack-requests-toggle[aria-expanded="false"] .pack-requests-chevron { transform: rotate(-90deg); }
.pack-requests-list { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.pack-requests-list[hidden] { display: none; }
.pack-req-row { display: flex; align-items: center; gap: 10px; }
.pack-req-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pack-req-name { font-weight: 700; color: var(--text); font-size: 0.9rem; }
.pack-req-handle { color: var(--muted); font-size: 0.78rem; }
.pack-req-acts { display: inline-flex; gap: 6px; flex-shrink: 0; }
.pack-req-accept, .pack-req-decline {
  border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 700; padding: 6px 12px;
}
.pack-req-accept { background: var(--accent); color: var(--bg); }
.pack-req-accept:hover { filter: brightness(1.05); }
.pack-req-decline { background: none; color: var(--muted); border: 1px solid var(--border); }
.pack-req-decline:hover { color: var(--cta); border-color: var(--cta); }
.pack-req-accept:disabled, .pack-req-decline:disabled { opacity: 0.6; cursor: default; }

/* Tennis-green primary CTA (navy ink); text accents stay gold */
.btn-primary{background:#B4D335 !important;color:#12213A !important;box-shadow:0 4px 22px rgba(180,211,53,.35) !important}
.btn-primary:hover{background:#A3C22A !important;color:#12213A !important}

/* CritterEdu wordmark: C and U as navy collegiate bookends (echo the CU monogram) */
.brand-cu{color:var(--accent);font-weight:800;font-size:1.14em;letter-spacing:-.01em;}

/* Wordmark hover color-flip (org-wide rule) — beats the !important .brand-tld default */
.brand:hover .brand-word,.foot-brand:hover .brand-word{color:var(--cta)!important;}
.brand:hover .brand-tld,.foot-brand:hover .brand-tld{color:var(--text)!important;}