@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&family=Nunito:wght@400;500;600;700;800&display=swap');

/* OPTION C — Soft Playful / refined color system
   70% warm neutrals · 20% Matcha green family · 10% semantic/product accents.
   Color is used to establish hierarchy, not decorate every surface. */
:root {
  --c-canvas: #fff9f2;
  --c-surface: #fffefb;
  --c-surface-muted: #faf5ec;
  --c-ink: #263027;
  --c-muted: #626b63;
  --c-quiet: #858d85;
  --c-line: rgba(38, 48, 39, 0.12);

  --c-green: #4f7a59;
  --c-green-deep: #36563f;
  --c-green-soft: #e8f1e5;
  --c-green-wash: #f3f7f1;

  --c-coral: #9f493e;
  --c-coral-soft: #f8e4de;
  --c-gold: #b98325;
  --c-gold-soft: #f7edcf;
  --c-sky: #496f77;
  --c-sky-soft: #e4eef0;
  --c-orange: #8f5718;
  --c-orange-soft: #f8ead7;
}

body {
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--c-ink) !important;
  background: var(--c-canvas) !important;
}

.site-shell {
  background: var(--c-canvas) !important;
}

.header {
  border-bottom: 1px solid var(--c-line) !important;
  background: rgba(255, 249, 242, 0.95) !important;
  backdrop-filter: blur(18px) !important;
}

.brand-name strong {
  color: var(--c-ink) !important;
  font-weight: 800 !important;
}

.brand-name span {
  color: var(--c-quiet) !important;
  font-weight: 700 !important;
}

.nav-links a {
  color: #5a645b !important;
  font-weight: 700 !important;
}

.nav-links a:hover {
  background: var(--c-green-soft) !important;
  color: var(--c-green-deep) !important;
}

.button {
  border-radius: 16px !important;
  font-weight: 800 !important;
}

.button-primary {
  background: var(--c-green) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(54, 86, 63, 0.18) !important;
}

.button-primary:hover {
  background: var(--c-green-deep) !important;
  box-shadow: 0 16px 30px rgba(54, 86, 63, 0.2) !important;
}

.button-secondary {
  border-color: var(--c-line) !important;
  background: rgba(255, 254, 251, 0.9) !important;
  color: var(--c-ink) !important;
  box-shadow: 0 8px 20px rgba(38, 48, 39, 0.06) !important;
}

.mobile-menu-button {
  background: var(--c-green-soft) !important;
  color: var(--c-green-deep) !important;
}

/* HERO — illustration is the color-rich object; chrome stays calm. */
.hero {
  background-image:
    linear-gradient(90deg, rgba(255, 249, 242, 0.92) 0%, rgba(255, 249, 242, 0.68) 36%, rgba(255, 249, 242, 0.12) 70%),
    url('/hero-illustration.avif') !important;
  background-size: cover !important;
  background-position: center !important;
}

.hero::before {
  background:
    linear-gradient(180deg, rgba(243, 247, 241, 0.08), transparent 58%, rgba(232, 241, 229, 0.84)) !important;
}

.hero::after {
  height: 10rem !important;
  background: linear-gradient(180deg, transparent, var(--c-green-soft)) !important;
}

.hero h1 {
  color: var(--c-ink) !important;
  font-size: clamp(3.8rem, 8.1vw, 7.2rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.055em !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.hero h1 span {
  color: var(--c-green-deep) !important;
}

.hero-copy {
  color: var(--c-muted) !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
}

.trust-line {
  color: var(--c-muted) !important;
  font-weight: 600 !important;
}

.trust-line svg {
  color: var(--c-green) !important;
}

.hero-subscribe input[type='email'] {
  border: 1px solid rgba(79, 122, 89, 0.18) !important;
  border-radius: 16px !important;
  background: rgba(255, 254, 251, 0.94) !important;
  color: var(--c-ink) !important;
  box-shadow: 0 8px 20px rgba(38, 48, 39, 0.06) !important;
}

.hero-subscribe button[type='submit'] {
  border-radius: 16px !important;
  background: var(--c-green) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* SECTION FRAME */
.section {
  padding: clamp(5rem, 9vw, 7.5rem) 0 !important;
}

.section-kicker {
  color: var(--c-green-deep) !important;
  font-weight: 800 !important;
}

.section-title h2 {
  font-family: "Lora", Georgia, serif !important;
  color: var(--c-ink) !important;
  font-size: clamp(2.8rem, 5.4vw, 4.8rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  font-weight: 600 !important;
}

.section-title p {
  color: var(--c-muted) !important;
  font-weight: 500 !important;
}

/* WORLDS — product tint is local, not an ecosystem-wide background language. */
.worlds-section {
  background: linear-gradient(180deg, var(--c-green-soft) 0%, var(--c-canvas) 18%, var(--c-canvas) 100%) !important;
}

.worlds-grid {
  gap: 1.4rem !important;
}

.world-card {
  border: 1px solid var(--c-line) !important;
  border-radius: 26px !important;
  box-shadow: 0 14px 34px rgba(38, 48, 39, 0.07) !important;
}

.world-card.green {
  background: linear-gradient(145deg, var(--c-surface), #eff6ec) !important;
}

.world-card.peach {
  background: linear-gradient(145deg, var(--c-surface), #fbede7) !important;
}

.world-card-media {
  border-radius: 20px !important;
  box-shadow: none !important;
}

.world-card-content {
  padding: 1.4rem 1.55rem 1.6rem !important;
}

.world-icon {
  border-radius: 14px !important;
  background: rgba(255, 254, 251, 0.9) !important;
  box-shadow: inset 0 0 0 1px var(--c-line) !important;
}

.world-label {
  color: var(--c-green-deep) !important;
  font-weight: 800 !important;
}

.world-card.peach .world-label {
  color: var(--c-coral) !important;
}

.world-card h3 {
  font-family: "Lora", Georgia, serif !important;
  color: var(--c-ink) !important;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  font-weight: 600 !important;
}

.world-card p {
  color: var(--c-muted) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/* SKILLS — categorical color through pale tints + dark glyphs.
   Similar perceived luminance prevents one category from shouting over another. */
.skills-section {
  background: linear-gradient(180deg, var(--c-canvas), var(--c-surface-muted)) !important;
}

.skills-grid {
  gap: 1rem !important;
}

.skill-card {
  padding: 1.5rem 1rem !important;
}

.skill-orb {
  width: 64px !important;
  height: 64px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.skill-orb.teal {
  background: var(--c-sky-soft) !important;
  border-color: rgba(73, 111, 119, 0.12) !important;
  color: var(--c-sky) !important;
}

.skill-orb.coral {
  background: var(--c-coral-soft) !important;
  border-color: rgba(168, 80, 67, 0.12) !important;
  color: var(--c-coral) !important;
}

.skill-orb.matcha {
  background: var(--c-green-soft) !important;
  border-color: rgba(79, 122, 89, 0.12) !important;
  color: var(--c-green-deep) !important;
}

.skill-orb.orange {
  background: var(--c-orange-soft) !important;
  border-color: rgba(148, 96, 29, 0.12) !important;
  color: var(--c-orange) !important;
}

.skill-orb.lemon {
  background: var(--c-gold-soft) !important;
  border-color: rgba(185, 131, 37, 0.12) !important;
  color: #765716 !important;
}

.skill-card h3 {
  color: var(--c-ink) !important;
  font-weight: 800 !important;
}

.skill-card p {
  color: var(--c-muted) !important;
  font-weight: 500 !important;
}

.parent-panel {
  border: 1px solid var(--c-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 254, 251, 0.86) !important;
  box-shadow: 0 14px 32px rgba(38, 48, 39, 0.06) !important;
}

.parent-panel h3 {
  font-family: "Lora", Georgia, serif !important;
  color: var(--c-ink) !important;
  font-weight: 600 !important;
}

.parent-panel p {
  color: var(--c-muted) !important;
  font-weight: 500 !important;
}

.resource-pill {
  border: 1px solid rgba(185, 131, 37, 0.12) !important;
  border-radius: 14px !important;
  background: var(--c-gold-soft) !important;
  color: #654b16 !important;
  font-weight: 700 !important;
}

/* FAMILY PASS — conversion surface stays mostly neutral; green means action/selection. */
.family-pass-section {
  background: linear-gradient(180deg, #fff8ee, var(--c-surface-muted)) !important;
}

.family-pass-section::before {
  background:
    linear-gradient(90deg, rgba(255, 249, 242, 0.96), rgba(255, 249, 242, 0.74), rgba(255, 249, 242, 0.28)) !important;
}

.family-pass-copy .eyebrow {
  border: 1px solid rgba(79, 122, 89, 0.16) !important;
  background: rgba(255, 254, 251, 0.78) !important;
  color: var(--c-green-deep) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.eyebrow-dot {
  background: var(--c-green) !important;
}

.family-pass-copy h2 {
  font-family: "Lora", Georgia, serif !important;
  color: var(--c-ink) !important;
  font-size: clamp(3rem, 5.4vw, 5rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  font-weight: 600 !important;
}

.family-pass-copy p {
  color: var(--c-muted) !important;
  font-weight: 500 !important;
}

.free-access-line {
  color: var(--c-green-deep) !important;
  font-weight: 700 !important;
}

.family-pass-card {
  border: 1px solid var(--c-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 254, 251, 0.94) !important;
  box-shadow: 0 16px 38px rgba(38, 48, 39, 0.07) !important;
}

.family-pass-card h3 {
  font-family: "Lora", Georgia, serif !important;
  color: var(--c-ink) !important;
  font-weight: 600 !important;
}

.family-pass-benefits li {
  color: #4d5a50 !important;
  font-weight: 600 !important;
}

.family-pass-benefits li::before {
  background: var(--c-green-soft) !important;
  color: var(--c-green-deep) !important;
}

.segment-options {
  border-radius: 14px !important;
  background: #efeee7 !important;
}

.segment-button {
  border-radius: 11px !important;
  color: var(--c-ink) !important;
  font-weight: 800 !important;
}

.segment-button[aria-pressed='true'] {
  border-color: var(--c-green) !important;
  background: var(--c-green) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.best-value {
  background: var(--c-gold-soft) !important;
  color: #5f4513 !important;
}

.price-panel {
  border: 1px solid rgba(38, 48, 39, 0.08) !important;
  border-radius: 18px !important;
  background: var(--c-surface) !important;
}

/* COMMERCE GRAMMAR — coral attracts, gold frames value, green closes. */
.price-main,
.price-amount {
  color: var(--c-ink) !important;
}

.price-amount {
  font-weight: 800 !important;
}

.price-cadence,
.price-detail,
.family-pass-trust {
  color: var(--c-muted) !important;
}

.price-savings {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  margin-top: 0.65rem !important;
  border: 1px solid rgba(159, 73, 62, 0.14) !important;
  border-radius: 10px !important;
  background: var(--c-coral-soft) !important;
  color: var(--c-coral) !important;
  padding: 0.38rem 0.62rem !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.price-savings:empty {
  display: none !important;
}

.best-value {
  border: 1px solid rgba(185, 131, 37, 0.16) !important;
  background: var(--c-gold-soft) !important;
  color: #5f4513 !important;
  font-weight: 800 !important;
}

.family-pass-actions .button-primary {
  background: var(--c-green) !important;
  color: #fff !important;
}

.family-pass-actions .button-primary:hover {
  background: var(--c-green-deep) !important;
}

.family-pass-actions .button-secondary {
  background: transparent !important;
  color: var(--c-green-deep) !important;
}

.footer {
  border-top: 1px solid var(--c-line) !important;
  background: #f3eee5 !important;
  color: var(--c-muted) !important;
}

.footer-note {
  font-weight: 500 !important;
}

/* Keep decorative transition ridges in the same low-saturation family. */
.hero-transition .back,
.worlds-to-skills .back,
.skills-to-family .back {
  background: #e7f0e4 !important;
}

.hero-transition .mid,
.worlds-to-skills .mid,
.skills-to-family .mid {
  background: #f5efdf !important;
}

.hero-transition .front,
.worlds-to-skills .front,
.skills-to-family .front {
  background: var(--c-canvas) !important;
}

@media (max-width: 559px) {
  .hero h1 {
    font-size: clamp(3.2rem, 15vw, 4.4rem) !important;
  }

  .hero::before {
    background:
      linear-gradient(90deg, rgba(255, 249, 242, 0.96), rgba(255, 249, 242, 0.78) 58%, rgba(255, 249, 242, 0.18)) !important;
  }
}

/* Source-build cross-surface additions */
:root {
  --matcha-canvas: #FFF9F2;
  --matcha-surface: #FFFEFB;
  --matcha-surface-muted: #FAF5EC;
  --matcha-ink: #263027;
  --matcha-ink-muted: #626B63;
  --matcha-green: #4F7A59;
  --matcha-green-deep: #36563F;
  --matcha-green-soft: #E8F1E5;
  --matcha-coral: #9F493E;
  --matcha-coral-soft: #F8E4DE;
  --matcha-gold: #B98325;
  --matcha-gold-soft: #F7EDCF;
}

.signpost { font-family: "Nunito", system-ui, sans-serif !important; }

/* Editorial brand surfaces: Lora adds reflection without turning UI ornamental. */
.manifesto-hero h1,
.manifesto-section h2,
.manifesto-section blockquote,
.editorial-title,
.article-title {
  font-family: "Lora", Georgia, serif !important;
}

/* Commerce safety: purchase salience lives around value, not child-facing urgency. */
[data-commerce-savings], .price-savings {
  background: var(--c-coral-soft) !important;
  color: var(--c-coral) !important;
}
[data-commerce-value], .best-value {
  background: var(--c-gold-soft) !important;
}

/* Test environment should never imply scarcity through animation. */
[data-commerce-savings], .best-value { animation: none !important; }

/* Shared editorial/resource surfaces — production V4 shell. */
body.matcha-editorial-page {
  background: var(--c-canvas) !important;
  color: var(--c-ink) !important;
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.matcha-editorial-page .font-body,
.matcha-editorial-page p,
.matcha-editorial-page li,
.matcha-editorial-page a,
.matcha-editorial-page button {
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.matcha-editorial-page .font-display,
.matcha-editorial-page article h1,
.matcha-editorial-page article h2,
.matcha-editorial-page article h3 {
  font-family: "Lora", Georgia, serif !important;
  letter-spacing: -0.025em;
}

.matcha-editorial-page main {
  background: var(--c-canvas);
}

.matcha-editorial-page article .prose {
  color: var(--c-muted);
}

.matcha-editorial-page article .prose h2,
.matcha-editorial-page article .prose h3,
.matcha-editorial-page article .prose strong {
  color: var(--c-ink);
}

.matcha-editorial-page article .prose a {
  color: var(--c-green-deep);
  text-underline-offset: .15em;
}