/* ==========================================================================
   CANOPY landing pages
   Right-sized proportions (SaaS, not magazine). Per-template palettes
   preserved. Motion: magnetic CTAs, scroll reveals, header blur, price counter.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --canopy-bg:        #0F1810;
  --canopy-bg-tint:   #16221A;
  --canopy-bg-deep:   #0A1209;
  --canopy-fg:        #F4F1E8;
  --canopy-muted:     #C7C4B5;
  --canopy-soft:      #8A8978;
  --canopy-border:    rgba(244,241,232,0.10);
  --canopy-border-strong: rgba(244,241,232,0.22);
  --canopy-primary:   #E8C547;
  --canopy-primary-2: #7C9070;
  --canopy-accent:    #E8C547;
  --canopy-card-bg:   rgba(244,241,232,0.025);
  --canopy-card-hover:rgba(244,241,232,0.055);

  --font-display:     'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-script:      'Allura', 'Cormorant Garamond', cursive;
  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --max-w:            1180px;
  --max-w-text:       680px;
  --ease:             cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Per-template palettes — colors unchanged
   -------------------------------------------------------------------------- */

body.theme-willowbrook {
  --canopy-bg:        #181610;
  --canopy-bg-tint:   #221E15;
  --canopy-bg-deep:   #100E08;
  --canopy-fg:        #FAF6E8;
  --canopy-muted:     #C8C0A8;
  --canopy-soft:      #8C8470;
  --canopy-border:    rgba(232,197,71,0.14);
  --canopy-border-strong: rgba(232,197,71,0.28);
  --canopy-primary:   #E8C547;
  --canopy-primary-2: #7C9070;
  --canopy-accent:    #E8C547;
  --canopy-card-bg:   rgba(232,197,71,0.04);
  --canopy-card-hover:rgba(232,197,71,0.085);
}

body.theme-mossbloom {
  --canopy-bg:        #0F1E1E;
  --canopy-bg-tint:   #14282A;
  --canopy-bg-deep:   #0A1717;
  --canopy-fg:        #EAF2F0;
  --canopy-muted:     #B8C8C5;
  --canopy-soft:      #7E908D;
  --canopy-border:    rgba(123,168,194,0.16);
  --canopy-border-strong: rgba(123,168,194,0.32);
  --canopy-primary:   #4D9385;
  --canopy-primary-2: #7BA8C2;
  --canopy-accent:    #7BA8C2;
  --canopy-card-bg:   rgba(123,168,194,0.045);
  --canopy-card-hover:rgba(123,168,194,0.09);
}

body.theme-resonance {
  --canopy-bg:        #15101F;
  --canopy-bg-tint:   #1F1830;
  --canopy-bg-deep:   #0E0A18;
  --canopy-fg:        #F4EFF7;
  --canopy-muted:     #C2B5CC;
  --canopy-soft:      #8E7FA0;
  --canopy-border:    rgba(212,160,58,0.16);
  --canopy-border-strong: rgba(212,160,58,0.34);
  --canopy-primary:   #9C7CB5;
  --canopy-primary-2: #5A3D6B;
  --canopy-accent:    #D4A03A;
  --canopy-card-bg:   rgba(212,160,58,0.045);
  --canopy-card-hover:rgba(212,160,58,0.10);
}

body.theme-rivera {
  --canopy-bg:        #0A1F26;
  --canopy-bg-tint:   #112C36;
  --canopy-bg-deep:   #07161B;
  --canopy-fg:        #FAF3EE;
  --canopy-muted:     #B8D0D8;
  --canopy-soft:      #7E9AA4;
  --canopy-border:    rgba(43,176,204,0.18);
  --canopy-border-strong: rgba(43,176,204,0.36);
  --canopy-primary:   #2BB0CC;
  --canopy-primary-2: #0E8AA8;
  --canopy-accent:    #FF6B4A;
  --canopy-card-bg:   rgba(43,176,204,0.045);
  --canopy-card-hover:rgba(43,176,204,0.10);
}

body.theme-hearthwood {
  --canopy-bg:        #1F1812;
  --canopy-bg-tint:   #2A211A;
  --canopy-bg-deep:   #16100A;
  --canopy-fg:        #F4ECDF;
  --canopy-muted:     #C8B49A;
  --canopy-soft:      #8E7A60;
  --canopy-border:    rgba(200,149,107,0.18);
  --canopy-border-strong: rgba(200,149,107,0.34);
  --canopy-primary:   #C8956B;
  --canopy-primary-2: #9A6B45;
  --canopy-accent:    #C8956B;
  --canopy-card-bg:   rgba(200,149,107,0.045);
  --canopy-card-hover:rgba(200,149,107,0.10);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0; padding: 0;
  background: var(--canopy-bg);
  color: var(--canopy-fg);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--canopy-accent); text-decoration: none; transition: color 0.3s var(--ease); }
a:hover { color: var(--canopy-fg); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; }

img { display: block; max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Scroll reveal — initial state, motion.js toggles .is-in
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

header.canopy-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 22px 0;
  transition: padding 0.5s var(--ease), background-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
  background-color: transparent;
}

header.canopy-header.is-scrolled {
  padding: 14px 0;
  background-color: color-mix(in srgb, var(--canopy-bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--canopy-border);
}

header.canopy-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none;
  color: var(--canopy-fg);
  line-height: 1;
}

.brand svg { width: 28px; height: 28px; flex-shrink: 0; display: block; }

.brand .wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--canopy-fg);
  line-height: 1;
}

.brand .subtitle {
  display: inline-block;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--canopy-border-strong);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--canopy-muted);
  vertical-align: 2px;
}

nav.top-nav a {
  color: var(--canopy-muted);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  margin-left: 28px;
  position: relative;
}

nav.top-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

nav.top-nav a:hover { color: var(--canopy-fg); }
nav.top-nav a:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Hero — right-sized
   -------------------------------------------------------------------------- */

section.hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: 112px 0 56px;
  overflow: hidden;
}

.hero-image {
  position: absolute; inset: 0; z-index: 0;
}

.hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.40;
  will-change: transform;
  transition: transform 0.6s var(--ease);
}

.hero-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.05) 35%,
    var(--canopy-bg) 96%);
}

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

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--canopy-accent);
  margin: 0 0 22px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: currentColor;
}

h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 22px;
  max-width: 720px;
  color: var(--canopy-fg);
}

h1 em, h1 .accent {
  font-style: italic;
  font-weight: 300;
  color: var(--canopy-accent);
  position: relative;
}

/* hairline draws under the italic phrase in H1 on page-load reveal */
h1 em::after, h1 .accent::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s 0.6s var(--ease-out);
}

[data-reveal].is-in h1 em::after,
[data-reveal].is-in h1 .accent::after { transform: scaleX(1); }

.tagline {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--canopy-muted);
  max-width: 540px;
  line-height: 1.65;
  margin: 0 0 36px;
}

.cta-row {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}

/* --------------------------------------------------------------------------
   Buttons — magnetic, with arrow slide
   -------------------------------------------------------------------------- */

.btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transform: translate(var(--mx), var(--my));
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.btn .arrow {
  display: inline-block;
  font-size: 0.95rem;
  letter-spacing: 0;
  transition: transform 0.45s var(--ease);
}

.btn:hover .arrow { transform: translateX(5px); }

.btn-primary {
  background: var(--canopy-accent);
  color: #1A1A1A;
}

.btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--canopy-fg);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
  z-index: 0;
}

.btn-primary > * { position: relative; z-index: 1; }

.btn-primary:hover::before { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--canopy-fg);
  border-color: var(--canopy-border-strong);
}

.btn-secondary:hover {
  border-color: var(--canopy-fg);
  background: var(--canopy-card-bg);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

section { padding: 96px 0; position: relative; }
section.tinted { background: var(--canopy-bg-tint); }
section.deep   { background: var(--canopy-bg-deep); }

.section-head {
  max-width: 720px;
  margin-bottom: 48px;
}

h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 16px;
  max-width: 680px;
  color: var(--canopy-fg);
}

h2 em, h2 .accent {
  font-style: italic;
  font-weight: 300;
  color: var(--canopy-accent);
}

h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0;
  margin: 0 0 10px;
  color: var(--canopy-fg);
}

p {
  color: var(--canopy-muted);
  font-weight: 300;
  line-height: 1.65;
  margin: 0 0 14px;
}

p:last-child { margin-bottom: 0; }

p.lead {
  font-size: 1.05rem;
  color: var(--canopy-muted);
  max-width: var(--max-w-text);
}

/* --------------------------------------------------------------------------
   Two-column rows
   -------------------------------------------------------------------------- */

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.row.three { grid-template-columns: repeat(3, 1fr); gap: 40px; }

.col-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--canopy-accent);
  margin: 0 0 18px;
}

/* --------------------------------------------------------------------------
   Editorial image + text
   -------------------------------------------------------------------------- */

.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.editorial.flip .editorial-image { order: 2; }

.editorial-image {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 460px;
  overflow: hidden;
  background: var(--canopy-bg-tint);
}

.editorial-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: transform 1.4s var(--ease), filter 1s var(--ease);
}

.editorial-image:hover img {
  transform: scale(1.04);
  filter: saturate(1);
}

.editorial-text h2 { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Product cards — index
   -------------------------------------------------------------------------- */

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-top: 8px;
}

.product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.product-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 320px;
  overflow: hidden;
  background: var(--canopy-bg-tint);
}

.product-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.95);
  transition: transform 1.4s var(--ease), filter 0.8s var(--ease);
}

.product-card:hover .product-card-image img {
  transform: scale(1.05);
  filter: saturate(1.05) brightness(1);
}

.product-card-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.product-card-meta { padding: 20px 0 0; }

.product-card-meta .eyebrow {
  margin-bottom: 10px;
  font-size: 0.62rem;
}

.product-card-meta h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  color: var(--canopy-fg);
}

.product-card-meta p {
  margin: 0 0 14px;
  font-size: 0.93rem;
  max-width: 440px;
  color: var(--canopy-muted);
  line-height: 1.55;
}

.product-card-meta .price-line {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--canopy-accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.product-card-meta .price-line::after {
  content: "→";
  display: inline-block;
  transition: transform 0.4s var(--ease);
}

.product-card:hover .product-card-meta .price-line::after { transform: translateX(5px); }

.product-card-meta .price-line .muted {
  color: var(--canopy-soft);
  font-weight: 300;
}

.product-card.theme-willowbrook { --canopy-accent: #E8C547; }
.product-card.theme-mossbloom   { --canopy-accent: #7BA8C2; }
.product-card.theme-resonance   { --canopy-accent: #D4A03A; }
.product-card.theme-rivera      { --canopy-accent: #FF6B4A; }
.product-card.theme-hearthwood  { --canopy-accent: #C8956B; }

/* --------------------------------------------------------------------------
   Feature lists
   -------------------------------------------------------------------------- */

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

ul.feature-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--canopy-border);
  color: var(--canopy-fg);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.5;
}

ul.feature-list li:first-child { padding-top: 0; }
ul.feature-list li:last-child { border-bottom: none; }

ul.feature-list li strong { font-weight: 500; color: var(--canopy-fg); }

/* --------------------------------------------------------------------------
   Pricing block
   -------------------------------------------------------------------------- */

.pricing-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--canopy-border-strong);
  padding-top: 48px;
  margin: 8px 0 0;
}

.pricing-block .price {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.8vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--canopy-accent);
}

.pricing-block .price-suffix {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--canopy-muted);
}

.pricing-block .price-own {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--canopy-muted);
  letter-spacing: 0;
  text-transform: none;
}

.pricing-block .price-own strong {
  color: var(--canopy-accent);
  font-weight: 500;
}

.pricing-block .price-detail {
  margin: 20px 0 24px;
  color: var(--canopy-muted);
  max-width: 380px;
  font-size: 0.95rem;
}

.pricing-block .pricing-includes h4 {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--canopy-accent);
  margin: 0 0 14px;
}

.pricing-block .pricing-includes ul.feature-list li {
  padding: 12px 0;
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   Callout
   -------------------------------------------------------------------------- */

.callout {
  border-left: 1px solid var(--canopy-accent);
  padding: 4px 0 4px 22px;
  margin: 32px 0;
  max-width: 680px;
}

.callout p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--canopy-fg);
  margin: 0;
}

.callout strong { font-weight: 500; font-style: normal; color: var(--canopy-accent); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-block { border-top: 1px solid var(--canopy-border); }

.faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--canopy-border);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
}

.faq-item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  margin: 0;
}

.faq-item p { margin: 0; font-size: 0.95rem; }

.faq-item code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 0.84em;
  color: var(--canopy-accent);
  padding: 1px 6px;
  background: var(--canopy-card-bg);
  border: 1px solid var(--canopy-border);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   CTA strip
   -------------------------------------------------------------------------- */

.cta-strip {
  text-align: center;
  padding: 80px 0;
  background: var(--canopy-bg-tint);
}

.cta-strip .eyebrow { justify-content: center; }
.cta-strip h2 { margin: 0 auto 24px; text-align: center; max-width: 680px; }
.cta-strip .cta-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer.canopy-footer {
  background: var(--canopy-bg-deep);
  padding: 64px 0 32px;
  color: var(--canopy-soft);
  border-top: 1px solid var(--canopy-border);
}

footer.canopy-footer .container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

footer.canopy-footer h4 {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--canopy-fg);
  margin: 0 0 18px;
}

footer.canopy-footer a {
  display: block;
  color: var(--canopy-muted);
  text-decoration: none;
  font-size: 0.88rem;
  margin-bottom: 10px;
}

footer.canopy-footer a:hover { color: var(--canopy-fg); }

footer.canopy-footer .footer-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--canopy-fg);
  margin-bottom: 12px;
}

footer.canopy-footer .footer-blurb {
  font-size: 0.88rem;
  max-width: 300px;
  line-height: 1.55;
}

footer.canopy-footer .colophon {
  grid-column: 1 / -1;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--canopy-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .container, .container-narrow { padding: 0 22px; }
  section { padding: 64px 0; }
  section.hero { padding: 96px 0 48px; min-height: auto; }
  .row, .row.three, .editorial, .pricing-block, .products-grid, .faq-item {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .editorial.flip .editorial-image { order: 0; }
  footer.canopy-footer .container { grid-template-columns: 1fr 1fr; }
  nav.top-nav a { margin-left: 14px; font-size: 0.66rem; letter-spacing: 0.16em; }
  .brand .subtitle { display: none; }
  .cta-strip { padding: 64px 0; }
  h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
}

@media (max-width: 560px) {
  footer.canopy-footer .container { grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; justify-content: center; }
  footer.canopy-footer .colophon { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* ==========================================================================
   2026-05-19 — hub rebuilt on the af803ae system
   Word-flip hero, CSS-only luxe hero field (no external/broken assets),
   9-app grid, per-app accents. Positioning: a complete app per kind of
   teacher — never a school system.
   ========================================================================== */

/* ---- Word-flip headline ---- */
.flip {
  color: var(--canopy-accent);
  font-style: italic;
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.flip-word {
  display: inline-block;
  transition: opacity 0.34s var(--ease-out), transform 0.34s var(--ease-out);
}
.flip-word.is-out { opacity: 0; transform: translateY(-0.32em); }
.flip-word.is-pre { opacity: 0; transform: translateY(0.32em); }
.flip::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: currentColor; opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  .flip-word { transition: none; }
}

/* ---- Hero field — pure CSS, intentional, nothing missing ---- */
.hero-canopy {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(58% 52% at 80% 16%, color-mix(in srgb, var(--canopy-accent) 22%, transparent) 0%, transparent 60%),
    radial-gradient(52% 60% at 10% 90%, color-mix(in srgb, var(--canopy-primary-2) 20%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, var(--canopy-bg-deep) 0%, var(--canopy-bg) 64%);
}
.hero-canopy::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 58%, var(--canopy-bg) 100%);
}
section.hero .tagline { max-width: 600px; }
.credibility {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--canopy-border);
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--canopy-soft); font-weight: 500;
}

/* ---- 9-app grid ---- */
.products-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 960px) and (min-width: 601px) { .products-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 600px) { .products-grid { grid-template-columns: 1fr; } }

.product-card {
  border: 1px solid var(--canopy-border);
  background: var(--canopy-card-bg);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.product-card:hover {
  border-color: var(--canopy-border-strong);
  background: var(--canopy-card-hover);
  transform: translateY(-3px);
}
.pc-art {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  display: flex; align-items: flex-end; padding: 26px 28px;
  background:
    radial-gradient(78% 70% at 82% 18%, color-mix(in srgb, var(--canopy-accent) 30%, transparent) 0%, transparent 64%),
    linear-gradient(155deg, color-mix(in srgb, var(--canopy-accent) 16%, var(--canopy-bg-tint)) 0%, var(--canopy-bg-deep) 78%);
}

/* When a product card has a real app screenshot inside .pc-art (hub
   grid), fill the slot with the image — anchored at the top so each
   vertical's brand band reads as the card art. The gradient above
   stays as a fallback while the image lazy-loads. */
.pc-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease);
}
.product-card:hover .pc-art img { transform: scale(1.03); }
.pc-art .persona {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--canopy-fg);
  opacity: 0.92;
  letter-spacing: 0.01em;
}
.pc-art .persona small {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--canopy-muted);
  margin-bottom: 4px;
}
.product-card-meta { padding: 24px 28px 28px; }
.product-card-meta h3 { font-size: 1.32rem; }
.product-card-meta .who {
  font-family: var(--font-sans);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--canopy-soft); margin: 0 0 10px;
}

/* per-card brand on the hub. Each card scope inherits the same locked
   palette as its vertical's body.v-<id> block — so the hub reads as a
   gallery of 9 distinct brands, not 9 cards of the same dark forest.
   Source of truth is REWRITE/verticals/<id>/branding.json. See
   PALETTES_SOURCE_OF_TRUTH.md. */
.product-card.v-music {
  --canopy-bg:#20162F; --canopy-bg-tint:#2A1F3D; --canopy-bg-deep:#15101F;
  --canopy-fg:#F4EFE3; --canopy-muted:#C7B5BD; --canopy-soft:#8E7CA0;
  --canopy-border:rgba(212,160,58,0.18); --canopy-border-strong:rgba(212,160,58,0.36);
  --canopy-primary:#5A3D6B; --canopy-primary-2:#5A3D6B; --canopy-accent:#D4A03A;
  --canopy-card-bg:rgba(212,160,58,0.05); --canopy-card-hover:rgba(212,160,58,0.10);
}
.product-card.v-microschools {
  --canopy-bg:#1A2620; --canopy-bg-tint:#243228; --canopy-bg-deep:#111B17;
  --canopy-fg:#FAF1DE; --canopy-muted:#D6C5AC; --canopy-soft:#948468;
  --canopy-border:rgba(244,228,184,0.18); --canopy-border-strong:rgba(244,228,184,0.36);
  --canopy-primary:#5A7561; --canopy-primary-2:#D9A5A0; --canopy-accent:#F4E4B8;
  --canopy-card-bg:rgba(244,228,184,0.05); --canopy-card-hover:rgba(244,228,184,0.10);
}
.product-card.v-classroom {
  --canopy-bg:#1F1612; --canopy-bg-tint:#2A1E18; --canopy-bg-deep:#160F0C;
  --canopy-fg:#FAF3EE; --canopy-muted:#D8C6BD; --canopy-soft:#9B7E6F;
  --canopy-border:rgba(201,124,93,0.18); --canopy-border-strong:rgba(201,124,93,0.36);
  --canopy-primary:#C97C5D; --canopy-primary-2:#9CA98B; --canopy-accent:#B07A7E;
  --canopy-card-bg:rgba(201,124,93,0.05); --canopy-card-hover:rgba(201,124,93,0.10);
}
.product-card.v-arts {
  --canopy-bg:#1F1719; --canopy-bg-tint:#2A1F23; --canopy-bg-deep:#150F12;
  --canopy-fg:#F6ECE4; --canopy-muted:#D2B8B0; --canopy-soft:#95817C;
  --canopy-border:rgba(232,144,114,0.20); --canopy-border-strong:rgba(232,144,114,0.40);
  --canopy-primary:#A8B89A; --canopy-primary-2:#B8A4D4; --canopy-accent:#E89072;
  --canopy-card-bg:rgba(232,144,114,0.06); --canopy-card-hover:rgba(232,144,114,0.12);
}
.product-card.v-stem {
  --canopy-bg:#162848; --canopy-bg-tint:#1B355A; --canopy-bg-deep:#0F1D34;
  --canopy-fg:#F4EEDB; --canopy-muted:#D2C5A1; --canopy-soft:#998D70;
  --canopy-border:rgba(250,181,34,0.18); --canopy-border-strong:rgba(250,181,34,0.36);
  --canopy-primary:#1B355A; --canopy-primary-2:#D87421; --canopy-accent:#FAB522;
  --canopy-card-bg:rgba(250,181,34,0.05); --canopy-card-hover:rgba(250,181,34,0.10);
}
.product-card.v-theater {
  --canopy-bg:#3D1A3D; --canopy-bg-tint:#4A234A; --canopy-bg-deep:#2C112C;
  --canopy-fg:#F4E9F0; --canopy-muted:#C8AEBE; --canopy-soft:#886A7C;
  --canopy-border:rgba(122,75,122,0.30); --canopy-border-strong:rgba(122,75,122,0.50);
  --canopy-primary:#3D1A3D; --canopy-primary-2:#5C3A2E; --canopy-accent:#7A4B7A;
  --canopy-card-bg:rgba(122,75,122,0.10); --canopy-card-hover:rgba(122,75,122,0.18);
}
.product-card.v-tutoring {
  --canopy-bg:#15201C; --canopy-bg-tint:#1E2A26; --canopy-bg-deep:#0E1614;
  --canopy-fg:#F0EFE3; --canopy-muted:#C7C7B5; --canopy-soft:#8C8D7F;
  --canopy-border:rgba(216,221,208,0.16); --canopy-border-strong:rgba(216,221,208,0.32);
  --canopy-primary:#4F6B62; --canopy-primary-2:#7A968D; --canopy-accent:#D8DDD0;
  --canopy-card-bg:rgba(216,221,208,0.05); --canopy-card-hover:rgba(216,221,208,0.10);
}
.product-card.v-martial {
  --canopy-bg:#2F4F3F; --canopy-bg-tint:#37594A; --canopy-bg-deep:#243E32;
  --canopy-fg:#F2ECE2; --canopy-muted:#CFBEC4; --canopy-soft:#9E8B91;
  --canopy-border:rgba(185,160,181,0.22); --canopy-border-strong:rgba(185,160,181,0.42);
  --canopy-primary:#B9A0B5; --canopy-primary-2:#5C3A2E; --canopy-accent:#B9A0B5;
  --canopy-card-bg:rgba(185,160,181,0.07); --canopy-card-hover:rgba(185,160,181,0.14);
}
.product-card.v-k12 {
  --canopy-bg:#1F1813; --canopy-bg-tint:#2A2018; --canopy-bg-deep:#16100C;
  --canopy-fg:#FAF2E4; --canopy-muted:#D9C9B0; --canopy-soft:#998A75;
  --canopy-border:rgba(254,216,166,0.18); --canopy-border-strong:rgba(254,216,166,0.36);
  --canopy-primary:#9B7D61; --canopy-primary-2:#92ADA4; --canopy-accent:#FED8A6;
  --canopy-card-bg:rgba(254,216,166,0.05); --canopy-card-hover:rgba(254,216,166,0.10);
}

/* ---- small bits ---- */
.steps { counter-reset: step; }
.steps .col-eyebrow::before {
  counter-increment: step;
  content: "0" counter(step) "  ";
  color: var(--canopy-accent);
}
.scale-note {
  margin-top: 28px; font-size: 0.86rem; color: var(--canopy-soft);
  border-top: 1px solid var(--canopy-border); padding-top: 20px;
}

/* ==========================================================================
   Per-app full-page themes (one palette per kind of teaching).
   Each vertical page sets <body class="v-<id>">.

   Source of truth for these colors is:
     - REWRITE/verticals/<id>/branding.json  (machine, per vertical)
     - REWRITE/BRAND_SPEC.md §3              (human mirror)
     - REWRITE/PALETTES_SOURCE_OF_TRUTH.md   (read first)
   All 9 blocks below were aligned to the locked spec on 2026-05-19. Do
   NOT edit any v-<id> block without first updating that vertical's
   branding.json — spec changes flow spec → CSS, never the reverse.
   ========================================================================== */

body.v-music {
  /* Resonance — Concert Hall at Dawn (light marketing context, 2026-05-21).
     Locked palette values from branding.json are PRESERVED — the plum, gold,
     and aubergine are unchanged. What flipped is the room they sit in:
     cream/ivory page backgrounds instead of aubergine, so the marketing site
     reads calm and feminine while the in-app zen home keeps the after-dark
     palette. Spec: BRAND_SPEC.md §3.music + Path A discussion (2026-05-21).
       primary   #5A3D6B  Deep Plum    → headlines, primary buttons, accents
       secondary #D4A03A  Warm Gold    → CTA gold, script-accent flourishes
       tertiary  #15101F  Aubergine    → body text only, never background */
  --canopy-bg:#F7F2EA;       /* page cream */
  --canopy-bg-tint:#EFE6D6;  /* warm ivory band */
  --canopy-bg-deep:#E8DFEC;  /* soft plum-tint band */
  --canopy-fg:#15101F;       /* aubergine body text */
  --canopy-muted:#6B5878;    /* secondary text */
  --canopy-soft:#9E8FA8;     /* tertiary text */
  --canopy-border:rgba(90,61,107,0.16);
  --canopy-border-strong:rgba(90,61,107,0.32);
  --canopy-primary:#5A3D6B;
  --canopy-primary-2:#5A3D6B;
  --canopy-accent:#D4A03A;
  --canopy-card-bg:rgba(90,61,107,0.04);
  --canopy-card-hover:rgba(90,61,107,0.08);
}
body.v-microschools {
  /* Willowbrook — Lake House (LOCKED, branding.json):
       primary   #5A7561  Sage Green       → page background family
       secondary #D9A5A0  Soft Blush       → hero glow / depth
       tertiary  #F4E4B8  Buttery Cream    → primary CTA, links, accents */
  --canopy-bg:#1A2620; --canopy-bg-tint:#243228; --canopy-bg-deep:#111B17;
  --canopy-fg:#FAF1DE; --canopy-muted:#D6C5AC; --canopy-soft:#948468;
  --canopy-border:rgba(244,228,184,0.18); --canopy-border-strong:rgba(244,228,184,0.36);
  --canopy-primary:#5A7561; --canopy-primary-2:#D9A5A0; --canopy-accent:#F4E4B8;
  --canopy-card-bg:rgba(244,228,184,0.05); --canopy-card-hover:rgba(244,228,184,0.10);
}
body.v-classroom_teachers {
  /* Rivera — Cozy Spice on a cream Sunday (light marketing context, 2026-05-21).
     Locked palette PRESERVED — terracotta primary, sage secondary, dusty rose
     accent. Page flipped to warm cream / ivory / rose-tint bands so the
     marketing site reads warm-organized and calm. Spec: BRAND_SPEC.md §3
     Rivera + branding.json classroom_teachers.
       primary   #C97C5D  Terracotta  → headlines, brand
       secondary #9CA98B  Sage Green  → secondary text, muted accents
       tertiary  #B07A7E  Dusty Rose  → CTA pop, script flourishes, deep band */
  --canopy-bg:#FAF5EE;       /* warm cream */
  --canopy-bg-tint:#F2E8DC;  /* warm ivory band */
  --canopy-bg-deep:#F2E0DC;  /* pale dusty-rose band */
  --canopy-fg:#3A2620;       /* warm espresso body text */
  --canopy-muted:#7A5C50;    /* warm brown secondary */
  --canopy-soft:#A89488;     /* pale warm gray */
  --canopy-border:rgba(201,124,93,0.18);
  --canopy-border-strong:rgba(201,124,93,0.36);
  --canopy-primary:#C97C5D;
  --canopy-primary-2:#9CA98B;
  --canopy-accent:#B07A7E;
  --canopy-card-bg:rgba(201,124,93,0.04);
  --canopy-card-hover:rgba(201,124,93,0.08);
}
body.v-arts {
  /* Marigold — Bohemian gallery, light marketing context (2026-05-21).
     Locked palette PRESERVED — coral primary, lavender secondary, sage
     tertiary, exact branding.json hexes. Page flipped to warm cream /
     ivory / lavender-tint bands so the marketing surface reads bright,
     bohemian, gallery-airy, while the in-app zen home keeps its own
     treatment. Spec: BRAND_SPEC.md §3 Marigold + branding.json arts.
       primary   #E89072  Coral       → brand, links, script, CTA
       secondary #B8A4D4  Lavender    → hero glow, soft-tint deep band
       tertiary  #A8B89A  Sage Green  → tertiary text / muted supporting */
  --canopy-bg:#FBF6F0;       /* warm gallery cream */
  --canopy-bg-tint:#F3EBE0;  /* warm ivory band */
  --canopy-bg-deep:#ECE5EF;  /* pale lavender-tint band */
  --canopy-fg:#3A2A2C;       /* deep warm brown body text */
  --canopy-muted:#7C6166;    /* muted mauve secondary text */
  --canopy-soft:#9AA38C;     /* sage-leaning tertiary text */
  --canopy-border:rgba(232,144,114,0.18);
  --canopy-border-strong:rgba(232,144,114,0.36);
  --canopy-primary:#E89072;
  --canopy-primary-2:#B8A4D4;
  --canopy-accent:#E89072;
  --canopy-card-bg:rgba(232,144,114,0.04);
  --canopy-card-hover:rgba(232,144,114,0.08);
}
body.v-stem {
  /* Helix Lab — Yellow/Purple Bold, light marketing context (2026-05-21).
     Locked palette PRESERVED — deep purple primary, mustard yellow
     secondary, burnt orange tertiary, exact branding.json hexes. Page
     flipped to warm cream / ivory / pale-purple-tint bands so the
     marketing surface reads bright and energetic, while the in-app zen
     home keeps its own "lab at midnight" treatment. Spec: BRAND_SPEC.md
     §3 Helix Lab + branding.json stem.
       primary   #1B355A  Deep Purple     → headlines, brand, links, script
       secondary #FAB522  Mustard Yellow  → CTA, accents
       tertiary  #D87421  Burnt Orange    → warm depth, hero glow */
  --canopy-bg:#FAF6EE;       /* warm cream */
  --canopy-bg-tint:#F0E9DA;  /* warm ivory band */
  --canopy-bg-deep:#E6E8EE;  /* pale cool purple-tint band */
  --canopy-fg:#22283A;       /* deep ink-navy body text */
  --canopy-muted:#5C5A6E;    /* muted navy-gray secondary text */
  --canopy-soft:#938E7E;     /* warm gray tertiary text */
  --canopy-border:rgba(27,53,90,0.16);
  --canopy-border-strong:rgba(27,53,90,0.32);
  --canopy-primary:#1B355A;
  --canopy-primary-2:#D87421;
  --canopy-accent:#FAB522;
  --canopy-card-bg:rgba(27,53,90,0.04);
  --canopy-card-hover:rgba(27,53,90,0.08);
}
body.v-theater {
  /* Merritt Theater Academy — Purple Mushrooms, light marketing context
     (2026-05-22). Locked palette PRESERVED — Very Dark Grape primary, Coffee
     Brown secondary, Antique Violet tertiary, exact branding.json hexes. Page
     flipped to warm playbill-cream / ivory / antique-violet-tint bands so the
     marketing surface reads warm and theatrical, while the in-app home keeps
     its own treatment. Parallel to the music / classroom / arts / stem
     light-pivot blocks. Spec: BRAND_SPEC.md §3 Merritt Theater Academy +
     branding.json theater.
       primary   #3D1A3D  Very Dark Grape     → headlines, brand, links, script
       secondary #5C3A2E  Dark Coffee Brown   → warm depth, hero glow
       tertiary  #7A4B7A  Dark Antique Violet → primary CTA, accents */
  --canopy-bg:#F8F2EC;       /* warm playbill cream */
  --canopy-bg-tint:#EFE4D8;  /* warm ivory band */
  --canopy-bg-deep:#EAE0EA;  /* pale antique-violet-tint band */
  --canopy-fg:#241324;       /* near-black grape body text */
  --canopy-muted:#6E5468;    /* muted grape-mauve secondary text */
  --canopy-soft:#9C8A98;     /* pale mauve-gray tertiary text */
  --canopy-border:rgba(61,26,61,0.16);
  --canopy-border-strong:rgba(61,26,61,0.32);
  --canopy-primary:#3D1A3D;
  --canopy-primary-2:#5C3A2E;
  --canopy-accent:#7A4B7A;
  --canopy-card-bg:rgba(61,26,61,0.04);
  --canopy-card-hover:rgba(61,26,61,0.08);
}
body.v-tutoring {
  /* Tessera — Brushstrokes Eucalyptus (LOCKED, branding.json):
       primary   #4F6B62  Deep Eucalyptus  → page background family
       secondary #7A968D  Mid Eucalyptus   → hero glow / depth
       tertiary  #D8DDD0  Pale Sage Cream  → primary CTA, links, accents */
  --canopy-bg:#15201C; --canopy-bg-tint:#1E2A26; --canopy-bg-deep:#0E1614;
  --canopy-fg:#F0EFE3; --canopy-muted:#C7C7B5; --canopy-soft:#8C8D7F;
  --canopy-border:rgba(216,221,208,0.16); --canopy-border-strong:rgba(216,221,208,0.32);
  --canopy-primary:#4F6B62; --canopy-primary-2:#7A968D; --canopy-accent:#D8DDD0;
  --canopy-card-bg:rgba(216,221,208,0.05); --canopy-card-hover:rgba(216,221,208,0.10);
}
body.v-martial_arts {
  /* Cedar Ridge — Stitch #4 Purple Mushrooms, light marketing surface
     (2026-05-22). Locked palette PRESERVED — Very Dark Pistachio Green
     primary, Dark Coffee Brown secondary, Medium Light Eggplant tertiary,
     exact branding.json hexes. Page flipped to warm stone / sage-ivory /
     pale-eggplant-tint bands so the marketing surface reads warm and calm,
     while the in-app home keeps its own dark forest-dojo treatment.
     Parallel to the music / classroom / arts / stem / theater light-pivot
     blocks. Spec: BRAND_SPEC.md §3 Cedar Ridge + branding.json martial_arts.
       primary   #2F4F3F  Very Dark Pistachio Green → headlines, brand, links, CTA
       secondary #5C3A2E  Dark Coffee Brown         → warm depth
       tertiary  #B9A0B5  Medium Light Eggplant     → the pale accent band */
  --canopy-bg:#F1EEE5;       /* warm pale stone */
  --canopy-bg-tint:#E7E3D6;  /* warm sage-ivory band */
  --canopy-bg-deep:#E9E2E6;  /* pale eggplant-tint band */
  --canopy-fg:#17201A;       /* near-black forest body text */
  --canopy-muted:#55615A;    /* muted sage secondary text */
  --canopy-soft:#8B968D;     /* pale sage-gray tertiary text */
  --canopy-border:rgba(47,79,63,0.16);
  --canopy-border-strong:rgba(47,79,63,0.32);
  --canopy-primary:#2F4F3F;
  --canopy-primary-2:#5C3A2E;
  --canopy-accent:#2F4F3F;
  --canopy-card-bg:rgba(47,79,63,0.04);
  --canopy-card-hover:rgba(47,79,63,0.08);
}
body.v-k12 {
  /* Stonefield Academy — Cabin (LOCKED, branding.json):
       primary   #9B7D61  Milky Coffee     → page background family
       secondary #92ADA4  Eucalyptus       → hero glow / depth
       tertiary  #FED8A6  Cream            → primary CTA, links, accents */
  --canopy-bg:#1F1813; --canopy-bg-tint:#2A2018; --canopy-bg-deep:#16100C;
  --canopy-fg:#FAF2E4; --canopy-muted:#D9C9B0; --canopy-soft:#998A75;
  --canopy-border:rgba(254,216,166,0.18); --canopy-border-strong:rgba(254,216,166,0.36);
  --canopy-primary:#9B7D61; --canopy-primary-2:#92ADA4; --canopy-accent:#FED8A6;
  --canopy-card-bg:rgba(254,216,166,0.05); --canopy-card-hover:rgba(254,216,166,0.10);
}

/* vertical-page module groups */
.modules-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media (max-width:760px){ .modules-grid{ grid-template-columns:1fr; gap:28px; } }
.modules-grid h4 {
  font-family:var(--font-sans); font-size:0.66rem; font-weight:500;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--canopy-accent);
  margin:0 0 14px;
}
.modules-grid .tag {
  display:inline-block; font-size:0.78rem; color:var(--canopy-soft);
  border:1px solid var(--canopy-border); border-radius:999px;
  padding:2px 12px; margin:0 8px 8px 0;
}
.persona-line {
  font-family:var(--font-display); font-style:italic; font-size:1.05rem;
  color:var(--canopy-accent); margin:0 0 26px;
}

/* ---- Mobile header: the inline nav can't fit beside the wordmark on a
   phone — it wrapped into a cramped block over the logo. Drop it on small
   screens; the footer carries the full nav and the hero CTAs cover intent. */
@media (max-width: 760px) {
  nav.top-nav { display: none; }
  header.canopy-header .container { justify-content: flex-start; }
  header.canopy-header { padding: 18px 0; }
  header.canopy-header.is-scrolled { padding: 12px 0; }
}

/* ==========================================================================
   Mobile polish — sharp at phone widths (rhythm, sizing, no overflow)
   ========================================================================== */

html, body { overflow-x: hidden; }

@media (max-width: 760px) {
  section { padding: 56px 0; }
  section.hero { padding: 88px 0 44px; min-height: auto; }

  h1 {
    white-space: normal;
    font-size: clamp(1.2rem, 4.4vw, 1.6rem);
    line-height: 1.2; letter-spacing: -0.01em;
  }
  .h1-lead { display: block; opacity: 0.85; margin-bottom: 4px; }
  .flip {
    display: inline-block;
    font-size: clamp(2.6rem, 11vw, 3.6rem);
    line-height: 1.04;
  }
  .h1-stop { display: none; }
  h2 { font-size: clamp(1.45rem, 6vw, 1.95rem); }
  .tagline { font-size: 1rem; max-width: none; }
  p.lead { font-size: 1rem; }

  .eyebrow { font-size: 0.64rem; letter-spacing: 0.18em; margin-bottom: 16px; }
  .eyebrow::before { width: 18px; }
  .col-eyebrow { font-size: 0.62rem; letter-spacing: 0.18em; }
  .section-head { margin-bottom: 30px; }

  .credibility {
    gap: 7px 16px; font-size: 0.66rem; letter-spacing: 0.08em;
    margin-top: 22px; padding-top: 18px;
  }

  /* cards: shorter art, proportional padding, tighter stack */
  .pc-art { aspect-ratio: 16 / 9; padding: 20px 22px; }
  .pc-art .persona { font-size: 1.35rem; }
  .product-card-meta { padding: 20px 22px 24px; }
  .products-grid { gap: 18px; }

  /* stacked pricing rows: less air between halves */
  .pricing-block { padding-top: 32px; gap: 20px; }
  .pricing-block .price { font-size: 2.3rem; }

  /* founder image block shouldn't be a giant empty panel */
  .editorial-image { aspect-ratio: 16 / 11; max-height: 280px; }
  /* ...but the upgraded vertical pages put real photographs in
     .editorial-image (the #ai still-life and the #walkthrough moments).
     Those must show full, not crop top + bottom to the legacy 16/11. */
  body.v-music .editorial-image,
  body.v-classroom_teachers .editorial-image,
  body.v-arts .editorial-image,
  body.v-stem .editorial-image,
  body.v-theater .editorial-image { aspect-ratio: auto; max-height: none; }

  /* footer: comfortable tap targets, tighter shell */
  footer.canopy-footer { padding: 48px 0 26px; }
  footer.canopy-footer .container { gap: 32px 28px; }
  footer.canopy-footer a { margin-bottom: 14px; font-size: 0.95rem; }
  footer.canopy-footer .colophon { margin-top: 32px; gap: 8px; }
}

@media (max-width: 480px) {
  .container, .container-narrow { padding: 0 18px; }
  h1 { font-size: clamp(1.1rem, 4.4vw, 1.45rem); }
  .flip { font-size: clamp(2.4rem, 11vw, 3.3rem); }
  .cta-row { gap: 12px; }
  .cta-row .btn { width: 100%; justify-content: center; }
  footer.canopy-footer .container { grid-template-columns: 1fr; }
}

/* Hero headline: on desktop it stays on one line (default .h1-lead is
   inline). On mobile (≤760px) we override and stack — the rotating word
   becomes the visual hook, much larger than the lead. The .flip span
   stays inline-block so the trailing period rides with it on the same
   line as the word. */
.h1-lead { display: inline; }

/* --------------------------------------------------------------------------
   App screenshots inside landing copy
   -------------------------------------------------------------------------- */

.app-shot {
  margin: 56px auto;
  max-width: 360px;
  padding: 0;
}
.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.05) inset;
}
.app-shot.wide   { max-width: 880px; }
.app-shot.wide img   { border-radius: 16px; }
.app-shot.banner { max-width: 1080px; }
.app-shot.banner img { border-radius: 14px; }
.app-shot figcaption {
  text-align: center;
  margin-top: 16px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--canopy-text-dim, #98a0aa);
  opacity: 0.75;
}

.app-shot-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  max-width: 720px;
  margin: 56px auto;
  align-items: end;
}
.app-shot-row .app-shot { margin: 0; max-width: none; }

/* ==========================================================================
   2026-05-21 — Light marketing surface (music pilot)
   Calm, feminine, editorial — derived from reference deck Tammy approved
   2026-05-21 (path A). Cream/ivory/plum-tint bands, Allura script accents,
   asymmetric image+text editorials, three-column quote testimonials.
   Scoped to .v-music for the pilot; other verticals stay on the dark
   surface until each is converted.
   ========================================================================== */

/* Allura script accent — single-word flourishes in section eyebrows */
.script {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 2.6rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--canopy-primary);
  line-height: 1;
}
@media (max-width: 760px) { .script { font-size: 2.1rem; } }

/* Hero sub-line — small, lowercase, italic ("designed for teachers, by a teacher") */
.hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--canopy-muted);
  margin: 0 0 28px;
}

/* Headline lockup — single-line, never wraps; flip word stays compact */
@media (min-width: 761px) {
  body.v-music .hero h1 {
    white-space: nowrap;
    font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  }
}
body.v-music .hero h1 .flip { font-style: italic; }

/* Stat row — small, refined row of 4 plain facts (not loud).
   Grid of 4 equal columns so all four sit on one line and never wrap
   to a 3 + 1 orphan; collapses to a 2x2 grid on narrow viewports. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 12px 20px;
  margin: 40px auto 0;
  max-width: 940px;
  padding: 24px 18px;
  border-top: 1px solid var(--canopy-border);
  border-bottom: 1px solid var(--canopy-border);
}
.stat-row > span {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--canopy-muted);
  text-align: center;
}
@media (max-width: 880px) {
  .stat-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    max-width: 480px;
  }
}

/* Section band colors — alternating cream / ivory / plum-tint */
body.v-music section.band-cream     { background: var(--canopy-bg); }
body.v-music section.band-ivory     { background: var(--canopy-bg-tint); }
body.v-music section.band-plum-tint { background: var(--canopy-bg-deep); }

/* Editorial image+text — asymmetric two-column layout (signature ref pattern) */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin: 24px 0;
}
.editorial.image-right { direction: ltr; }
.editorial.image-right > .editorial-text { order: 1; }
.editorial.image-right > .editorial-image { order: 2; }
.editorial-image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 60px -28px rgba(21, 16, 31, 0.30);
}
.editorial-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.editorial-text h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  line-height: 1.2;
  margin: 8px 0 14px;
  color: var(--canopy-primary);
}
.editorial-text p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--canopy-fg);
  margin: 0 0 14px;
}
@media (max-width: 760px) {
  .editorial { grid-template-columns: 1fr; gap: 28px; }
  .editorial.image-right > .editorial-text { order: 2; }
  .editorial.image-right > .editorial-image { order: 1; }
}

/* Optional-AI heading label — bold-but-small label, signature treatment */
.optional-ai-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--canopy-accent);
  padding: 6px 14px;
  border: 1px solid var(--canopy-accent);
  border-radius: 999px;
  margin-bottom: 18px;
}

/* Three-column quote block — anonymous teacher testimonials */
.quote-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin: 32px 0 8px;
}
@media (max-width: 760px) {
  .quote-row { grid-template-columns: 1fr; gap: 32px; }
}
.quote-card {
  text-align: center;
  padding: 0 8px;
}
.quote-card .quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--canopy-accent);
  margin-bottom: 6px;
}
.quote-card .quote-body {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--canopy-primary);
  margin: 0 0 14px;
}
.quote-card .quote-attr {
  font-family: var(--font-script);
  font-size: 1.5rem;
  font-style: normal;
  line-height: 1;
  color: var(--canopy-muted);
}

/* Founder pull-quote — single-line credential under the testimonial row */
.founder-pullquote {
  max-width: 740px;
  margin: 56px auto 0;
  padding: 28px 24px 0;
  border-top: 1px solid var(--canopy-border);
  text-align: center;
}
.founder-pullquote .pullquote-body {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--canopy-fg);
  margin: 0 0 10px;
}
.founder-pullquote .pullquote-sig {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--canopy-muted);
}
.founder-pullquote .pullquote-sig strong {
  color: var(--canopy-primary);
  font-weight: 600;
}

/* FAQ — clean two-column list (no accordion JS) */
.faq-list {
  max-width: 880px;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
}
@media (max-width: 760px) {
  .faq-list { grid-template-columns: 1fr; gap: 28px; }
}
.faq-list .faq-q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--canopy-primary);
  margin: 0 0 10px;
}
.faq-list .faq-a {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--canopy-fg);
  margin: 0;
}

/* Section spacing — calmer, more whitespace on the light surface */
body.v-music section {
  padding-top: 96px;
  padding-bottom: 96px;
}
body.v-music .hero { padding-top: 64px; padding-bottom: 32px; }

/* Header/footer adapt to light surface */
body.v-music .canopy-header {
  background: rgba(247, 242, 234, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--canopy-border);
}
body.v-music .canopy-header a,
body.v-music .canopy-header .wordmark { color: var(--canopy-primary); }
body.v-music .canopy-header .subtitle { color: var(--canopy-muted); }
body.v-music .canopy-footer {
  background: var(--canopy-bg-tint);
  color: var(--canopy-fg);
  border-top: 1px solid var(--canopy-border);
}
body.v-music .canopy-footer a { color: var(--canopy-primary); }
body.v-music .canopy-footer h4 { color: var(--canopy-muted); }

/* Buttons on light surface — keep gold-on-cream legibility */
body.v-music .btn-primary {
  background: var(--canopy-accent);
  color: var(--canopy-fg);
  border-color: var(--canopy-accent);
}
body.v-music .btn-secondary {
  background: transparent;
  color: var(--canopy-primary);
  border-color: var(--canopy-primary);
}

@media (max-width: 760px) {
  .app-shot { max-width: 280px; margin: 40px auto; }
  .app-shot.wide, .app-shot.banner { max-width: 100%; }
  .app-shot-row { grid-template-columns: 1fr; gap: 40px; max-width: 320px; }
}

/* ==========================================================================
   2026-05-21 — Music landing lifestyle photography wiring
   Six Canva-generated lifestyle images dropped into the cream/plum surface.
   Hero gets a soft framed photo under the stat row. Final CTA gets a
   full-bleed bg image with a cream overlay so the headline stays readable.
   ========================================================================== */

/* Hero photograph — prominent, near-full-container width, the visual
   anchor of the page. Uses .hero-photograph (NOT .hero-image) to avoid
   colliding with the legacy .hero-image full-bleed-bg pattern at line 264
   which sets position:absolute + opacity:0.4. */
body.v-music .hero-photograph {
  position: relative;
  z-index: 2;
  margin: 40px auto 0;
  max-width: 900px;
  aspect-ratio: 5 / 2;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 28px 80px -40px rgba(21, 16, 31, 0.40);
}
body.v-music .hero-photograph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
}
@media (max-width: 760px) {
  body.v-music .hero-photograph {
    margin-top: 28px;
    border-radius: 4px;
    aspect-ratio: 5 / 3;
  }
}

/* Final CTA full-bleed background photograph + cream overlay */
body.v-music .cta-strip.has-bg-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.v-music .cta-strip.has-bg-image .cta-bg-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(247, 242, 234, 0.78) 0%, rgba(232, 223, 236, 0.88) 100%),
    url('images/music/final-cta-piano-bench.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   2026-05-21 — Light marketing surface (Rivera / classroom_teachers)
   Parallel to the music light-pivot block. Token block flips above
   (body.v-classroom_teachers). Selectors mirror v-music; the only deltas
   are the header backdrop cream tone (warmer than music) and the final-CTA
   bg-image path. Cozy Spice palette: terracotta primary, sage secondary,
   dusty rose accent.
   ========================================================================== */

@media (min-width: 761px) {
  body.v-classroom_teachers .hero h1 {
    white-space: nowrap;
    font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  }
}
body.v-classroom_teachers .hero h1 .flip { font-style: italic; }

body.v-classroom_teachers section.band-cream     { background: var(--canopy-bg); }
body.v-classroom_teachers section.band-ivory     { background: var(--canopy-bg-tint); }
body.v-classroom_teachers section.band-plum-tint { background: var(--canopy-bg-deep); }

body.v-classroom_teachers section {
  padding-top: 96px;
  padding-bottom: 96px;
}
body.v-classroom_teachers .hero { padding-top: 64px; padding-bottom: 32px; }

body.v-classroom_teachers .canopy-header {
  background: rgba(250, 245, 238, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--canopy-border);
}
body.v-classroom_teachers .canopy-header a,
body.v-classroom_teachers .canopy-header .wordmark { color: var(--canopy-primary); }
body.v-classroom_teachers .canopy-header .subtitle { color: var(--canopy-muted); }
body.v-classroom_teachers .canopy-footer {
  background: var(--canopy-bg-tint);
  color: var(--canopy-fg);
  border-top: 1px solid var(--canopy-border);
}
body.v-classroom_teachers .canopy-footer a { color: var(--canopy-primary); }
body.v-classroom_teachers .canopy-footer h4 { color: var(--canopy-muted); }

body.v-classroom_teachers .btn-primary {
  background: var(--canopy-accent);
  color: #FFFFFF;
  border-color: var(--canopy-accent);
}
body.v-classroom_teachers .btn-secondary {
  background: transparent;
  color: var(--canopy-primary);
  border-color: var(--canopy-primary);
}

body.v-classroom_teachers .hero-photograph {
  position: relative;
  z-index: 2;
  margin: 40px auto 0;
  max-width: 900px;
  aspect-ratio: 5 / 2;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 28px 80px -40px rgba(58, 38, 32, 0.40);
}
body.v-classroom_teachers .hero-photograph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
}
@media (max-width: 760px) {
  body.v-classroom_teachers .hero-photograph {
    margin-top: 28px;
    border-radius: 4px;
    aspect-ratio: 5 / 3;
  }
}

body.v-classroom_teachers .cta-strip.has-bg-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.v-classroom_teachers .cta-strip.has-bg-image .cta-bg-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(250, 245, 238, 0.78) 0%, rgba(242, 224, 220, 0.88) 100%),
    url('images/classroom_teachers/final-cta-classroom.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   2026-05-21 — Light marketing surface (Marigold / arts)
   Parallel to the music + classroom light-pivot blocks. Token block flips
   above (body.v-arts). Selectors mirror v-classroom_teachers; deltas are
   the header backdrop cream tone, the coral button keeps dark text (coral
   is lighter than the Rivera dusty rose), and the final-CTA bg-image path
   + lavender-tint overlay. Bohemian gallery palette: coral brand,
   lavender depth, sage supporting.
   ========================================================================== */

@media (min-width: 761px) {
  body.v-arts .hero h1 {
    white-space: nowrap;
    font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  }
}
body.v-arts .hero h1 .flip { font-style: italic; }

body.v-arts section.band-cream     { background: var(--canopy-bg); }
body.v-arts section.band-ivory     { background: var(--canopy-bg-tint); }
body.v-arts section.band-plum-tint { background: var(--canopy-bg-deep); }

body.v-arts section {
  padding-top: 96px;
  padding-bottom: 96px;
}
body.v-arts .hero { padding-top: 64px; padding-bottom: 32px; }

body.v-arts .canopy-header {
  background: rgba(251, 246, 240, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--canopy-border);
}
body.v-arts .canopy-header a,
body.v-arts .canopy-header .wordmark { color: var(--canopy-primary); }
body.v-arts .canopy-header .subtitle { color: var(--canopy-muted); }
body.v-arts .canopy-footer {
  background: var(--canopy-bg-tint);
  color: var(--canopy-fg);
  border-top: 1px solid var(--canopy-border);
}
body.v-arts .canopy-footer a { color: var(--canopy-primary); }
body.v-arts .canopy-footer h4 { color: var(--canopy-muted); }

body.v-arts .btn-primary {
  background: var(--canopy-accent);
  color: var(--canopy-fg);
  border-color: var(--canopy-accent);
}
body.v-arts .btn-secondary {
  background: transparent;
  color: var(--canopy-primary);
  border-color: var(--canopy-primary);
}

body.v-arts .hero-photograph {
  position: relative;
  z-index: 2;
  margin: 40px auto 0;
  max-width: 900px;
  aspect-ratio: 5 / 2;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 28px 80px -40px rgba(58, 38, 32, 0.40);
}
body.v-arts .hero-photograph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
}
@media (max-width: 760px) {
  body.v-arts .hero-photograph {
    margin-top: 28px;
    border-radius: 4px;
    aspect-ratio: 5 / 3;
  }
}

body.v-arts .cta-strip.has-bg-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.v-arts .cta-strip.has-bg-image .cta-bg-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(251, 246, 240, 0.78) 0%, rgba(236, 229, 239, 0.88) 100%),
    url('images/arts/final-cta-studio.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   2026-05-21 — Light marketing surface (Helix Lab / stem)
   Parallel to the music + classroom + arts light-pivot blocks. Token block
   flips above (body.v-stem). Selectors mirror v-arts; deltas are the header
   backdrop cream tone, the mustard button keeps dark navy text (mustard is
   bright), and the final-CTA bg-image path + pale-purple-tint overlay.
   Yellow/Purple Bold palette: deep-purple brand, mustard CTA, burnt-orange
   depth.
   ========================================================================== */

@media (min-width: 761px) {
  body.v-stem .hero h1 {
    white-space: nowrap;
    font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  }
}
body.v-stem .hero h1 .flip { font-style: italic; }

body.v-stem section.band-cream     { background: var(--canopy-bg); }
body.v-stem section.band-ivory     { background: var(--canopy-bg-tint); }
body.v-stem section.band-plum-tint { background: var(--canopy-bg-deep); }

body.v-stem section {
  padding-top: 96px;
  padding-bottom: 96px;
}
body.v-stem .hero { padding-top: 64px; padding-bottom: 32px; }

body.v-stem .canopy-header {
  background: rgba(250, 246, 238, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--canopy-border);
}
body.v-stem .canopy-header a,
body.v-stem .canopy-header .wordmark { color: var(--canopy-primary); }
body.v-stem .canopy-header .subtitle { color: var(--canopy-muted); }
body.v-stem .canopy-footer {
  background: var(--canopy-bg-tint);
  color: var(--canopy-fg);
  border-top: 1px solid var(--canopy-border);
}
body.v-stem .canopy-footer a { color: var(--canopy-primary); }
body.v-stem .canopy-footer h4 { color: var(--canopy-muted); }

body.v-stem .btn-primary {
  background: var(--canopy-accent);
  color: var(--canopy-fg);
  border-color: var(--canopy-accent);
}
body.v-stem .btn-secondary {
  background: transparent;
  color: var(--canopy-primary);
  border-color: var(--canopy-primary);
}

body.v-stem .hero-photograph {
  position: relative;
  z-index: 2;
  margin: 40px auto 0;
  max-width: 900px;
  aspect-ratio: 5 / 2;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 28px 80px -40px rgba(34, 40, 58, 0.40);
}
body.v-stem .hero-photograph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
}
@media (max-width: 760px) {
  body.v-stem .hero-photograph {
    margin-top: 28px;
    border-radius: 4px;
    aspect-ratio: 5 / 3;
  }
}

body.v-stem .cta-strip.has-bg-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.v-stem .cta-strip.has-bg-image .cta-bg-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(250, 246, 238, 0.78) 0%, rgba(230, 232, 238, 0.90) 100%),
    url('images/stem/final-cta-lab.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   2026-05-22 — Light marketing surface (Merritt Theater Academy / theater)
   Parallel to the music + classroom + arts + stem light-pivot blocks. Token
   block flips above (body.v-theater). Selectors mirror v-stem; the one delta
   is the primary button — Antique Violet is a dark accent, so its label runs
   cream, not the dark ink stem uses on bright mustard. Final-CTA reuses the
   auditorium photograph (walkthrough-house) under a cream overlay.
   ========================================================================== */

@media (min-width: 761px) {
  body.v-theater .hero h1 {
    white-space: nowrap;
    font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  }
}
body.v-theater .hero h1 .flip { font-style: italic; }

body.v-theater section.band-cream     { background: var(--canopy-bg); }
body.v-theater section.band-ivory     { background: var(--canopy-bg-tint); }
body.v-theater section.band-plum-tint { background: var(--canopy-bg-deep); }

body.v-theater section {
  padding-top: 96px;
  padding-bottom: 96px;
}
body.v-theater .hero { padding-top: 64px; padding-bottom: 32px; }

body.v-theater .canopy-header {
  background: rgba(248, 242, 236, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--canopy-border);
}
body.v-theater .canopy-header a,
body.v-theater .canopy-header .wordmark { color: var(--canopy-primary); }
body.v-theater .canopy-header .subtitle { color: var(--canopy-muted); }
body.v-theater .canopy-footer {
  background: var(--canopy-bg-tint);
  color: var(--canopy-fg);
  border-top: 1px solid var(--canopy-border);
}
body.v-theater .canopy-footer a { color: var(--canopy-primary); }
body.v-theater .canopy-footer h4 { color: var(--canopy-muted); }

body.v-theater .btn-primary {
  background: var(--canopy-accent);
  color: #F8F2EC;
  border-color: var(--canopy-accent);
}
body.v-theater .btn-secondary {
  background: transparent;
  color: var(--canopy-primary);
  border-color: var(--canopy-primary);
}

body.v-theater .hero-photograph {
  position: relative;
  z-index: 2;
  margin: 40px auto 0;
  max-width: 900px;
  aspect-ratio: 5 / 2;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 28px 80px -40px rgba(36, 19, 36, 0.42);
}
body.v-theater .hero-photograph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
}
@media (max-width: 760px) {
  body.v-theater .hero-photograph {
    margin-top: 28px;
    border-radius: 4px;
    aspect-ratio: 5 / 3;
  }
}

body.v-theater .cta-strip.has-bg-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.v-theater .cta-strip.has-bg-image .cta-bg-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(248, 242, 236, 0.85) 0%, rgba(234, 224, 234, 0.93) 100%),
    url('images/theater/walkthrough-house.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   App showcase — the "see the actual app" product section. Shared across
   verticals (themed by the active body.v-<id> palette vars). Added
   2026-05-22 with the martial_arts upgrade; retrofit target for the
   already-shipped vertical pages.
   ========================================================================== */
.app-showcase {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 12px;
}
.app-showcase-frame {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--canopy-border);
  box-shadow: 0 30px 70px -38px rgba(0, 0, 0, 0.45);
}
.app-showcase-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.app-showcase-text h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--canopy-primary);
  margin: 0 0 14px;
}
.app-showcase-text p {
  color: var(--canopy-muted);
  margin: 0 0 18px;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .app-showcase {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .app-showcase-frame {
    max-width: 300px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   2026-05-22 — Light marketing surface (Cedar Ridge / martial_arts)
   Parallel to the music + classroom + arts + stem + theater light-pivot
   blocks. Token block flips above (body.v-martial_arts). Selectors mirror
   v-theater; the primary button is the dark forest green with a stone
   label. Final-CTA reuses the dojo class photograph under a stone overlay.
   ========================================================================== */

@media (min-width: 761px) {
  body.v-martial_arts .hero h1 {
    white-space: nowrap;
    font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  }
}
body.v-martial_arts .hero h1 .flip { font-style: italic; }

body.v-martial_arts section.band-cream     { background: var(--canopy-bg); }
body.v-martial_arts section.band-ivory     { background: var(--canopy-bg-tint); }
body.v-martial_arts section.band-plum-tint { background: var(--canopy-bg-deep); }

body.v-martial_arts section {
  padding-top: 96px;
  padding-bottom: 96px;
}
body.v-martial_arts .hero { padding-top: 64px; padding-bottom: 32px; }

body.v-martial_arts .canopy-header {
  background: rgba(241, 238, 229, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--canopy-border);
}
body.v-martial_arts .canopy-header a,
body.v-martial_arts .canopy-header .wordmark { color: var(--canopy-primary); }
body.v-martial_arts .canopy-header .subtitle { color: var(--canopy-muted); }
body.v-martial_arts .canopy-footer {
  background: var(--canopy-bg-tint);
  color: var(--canopy-fg);
  border-top: 1px solid var(--canopy-border);
}
body.v-martial_arts .canopy-footer a { color: var(--canopy-primary); }
body.v-martial_arts .canopy-footer h4 { color: var(--canopy-muted); }

body.v-martial_arts .btn-primary {
  background: var(--canopy-accent);
  color: #F1EEE5;
  border-color: var(--canopy-accent);
}
body.v-martial_arts .btn-secondary {
  background: transparent;
  color: var(--canopy-primary);
  border-color: var(--canopy-primary);
}

body.v-martial_arts .hero-photograph {
  position: relative;
  z-index: 2;
  margin: 40px auto 0;
  max-width: 900px;
  aspect-ratio: 5 / 2;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 28px 80px -40px rgba(23, 32, 26, 0.42);
}
body.v-martial_arts .hero-photograph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
}
@media (max-width: 760px) {
  body.v-martial_arts .hero-photograph {
    margin-top: 28px;
    border-radius: 4px;
    aspect-ratio: 5 / 3;
  }
}

body.v-martial_arts .cta-strip.has-bg-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.v-martial_arts .cta-strip.has-bg-image .cta-bg-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(241, 238, 229, 0.86) 0%, rgba(233, 226, 230, 0.93) 100%),
    url('images/martial_arts/walkthrough-class.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   HUB — body.is-hub on index.html
   The hub is the parent-brand landing page (FabrizioTech parent palette).
   The page itself stays on the neutral default palette (no v-<id> class on
   body). Per-card brand colors live on .product-card.v-<id> blocks above
   and continue to apply unchanged — the page reads neutral, the grid reads
   as a colorful gallery of nine distinct brands.
   ========================================================================== */

body.is-hub .hero-photograph {
  position: relative;
  z-index: 2;
  margin: 40px auto 0;
  max-width: 900px;
  aspect-ratio: 5 / 2;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 28px 80px -40px rgba(15, 24, 16, 0.55);
}
body.is-hub .hero-photograph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 760px) {
  body.is-hub .hero-photograph {
    margin-top: 28px;
    border-radius: 4px;
    aspect-ratio: 5 / 3;
  }
}

/* Hub vertical bands: nine full-width rectangles stacked one per row,
   each filled solid in that vertical's locked branding primary
   (REWRITE/verticals/<id>/branding.json). Ordered as a color sort —
   warm and light at the top, descending to cool and dark at the
   bottom. No gaps: the stack reads as one continuous swatch ribbon,
   rounded only on its outer corners. */
body.is-hub .products-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
}
body.is-hub .product-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  padding: 0 40px;
  border: 0;
  border-radius: 0;
  color: #F4EFE3;
  transition: filter 0.35s var(--ease);
}
body.is-hub .product-card:hover { filter: brightness(1.09); transform: none; }
body.is-hub .pc-label {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
}
body.is-hub .pc-go {
  font-size: 1.2rem;
  opacity: 0.7;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
body.is-hub .product-card:hover .pc-go { transform: translateX(6px); opacity: 1; }

/* Band fills — locked branding primaries, color-sorted top to bottom. */
body.is-hub .product-card.v-arts         { background: #E89072; }
body.is-hub .product-card.v-classroom    { background: #C97C5D; }
body.is-hub .product-card.v-k12          { background: #9B7D61; }
body.is-hub .product-card.v-microschools { background: #5A7561; }
body.is-hub .product-card.v-tutoring     { background: #4F6B62; }
body.is-hub .product-card.v-martial      { background: #2F4F3F; }
body.is-hub .product-card.v-stem         { background: #1B355A; }
body.is-hub .product-card.v-music        { background: #5A3D6B; }
body.is-hub .product-card.v-theater      { background: #3D1A3D; }

/* The two lightest fills need a deep label for legible contrast. */
body.is-hub .product-card.v-arts,
body.is-hub .product-card.v-classroom { color: #241813; }

@media (max-width: 600px) {
  body.is-hub .product-card { min-height: 74px; padding: 0 24px; gap: 16px; }
  body.is-hub .pc-label { font-size: 1.42rem; }
}

/* ── Apps section: split into solo + team bands ───────────── */
.apps-band {
  margin-bottom: 64px;
}
.apps-band:last-of-type {
  margin-bottom: 0;
}
.apps-band-head {
  margin-bottom: 28px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--canopy-rule, rgba(255,255,255,0.10));
}
.apps-band-head .col-eyebrow {
  margin: 0;
  order: 2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.apps-band-h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--canopy-fg);
  order: 1;
  flex: 1;
}
.apps-band-arrow {
  display: inline-block;
  margin-left: 8px;
  color: var(--canopy-accent);
}
@media (max-width: 600px) {
  .apps-band { margin-bottom: 48px; }
  .apps-band-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .apps-band-head .col-eyebrow { order: 1; }
  .apps-band-h { order: 2; }
}

/* ==========================================================================
   2026-05-23 — Academy pages: editorial-image aspect-ratio fix
   The 4 academy landing pages use banner-format imagery (1920x750 / 2400x938,
   ~2.56:1) instead of the 16:9 desktop_wallpaper Canva exports. The default
   .editorial-image container locks to 16:10 (1.6:1), which leaves a visible
   strip of canopy-bg-tint below the image. Override on .is-academy so the
   container conforms to the image's natural height.
   ========================================================================== */
body.is-academy .editorial-image {
  aspect-ratio: auto;
  max-height: none;
  background: transparent;
}