/* Homepage marketing layer only. Device, record, journal and feature scenes
   retain their reconstructed app colours and all original image assets. */
.home-content .hero h1,
.home-content .product-copy h2,
.home-content .benefit-list h3,
.home-content #steps-title,
.home-content .sharing-copy h2,
.home-content .audience-copy h2,
.home-content .privacy h2,
.home-content .blog-intro h2,
.home-content .faq h2,
.home-content .closing h2,
.home-content #features .feature-section-heading h2,
.home-content #features .feature-narrative h3,
.home-content #journal-story .journal-heading h2 {
  color: var(--cocoa);
}
.home-content .hero h1 em,
.home-content .sharing-copy .sharing-heading-accent {
  color: var(--heading-accent);
}

.home-content .hero .eyebrow,
.home-content .product-section .eyebrow,
.home-content .steps-section .eyebrow,
.home-content .sharing-section .eyebrow,
.home-content .audience-copy .eyebrow,
.home-content .blog-intro .eyebrow,
.home-content .faq .eyebrow,
.home-content .closing .eyebrow,
.home-content #features .feature-eyebrow,
.home-content #features .feature-kicker,
.home-content #journal-story .journal-eyebrow {
  color: var(--accent-small);
}
.home-content .hero-description,
.home-content .hero-copy .small-note,
.home-content .product-copy .section-description,
.home-content .sharing-copy .section-description,
.home-content .sharing-copy .sharing-note,
.home-content .benefit-list p,
.home-content .steps-row small,
.home-content .steps-reassurance,
.home-content .audience-copy p:not(.eyebrow),
.home-content .privacy p,
.home-content .blog-intro > .blog-description,
.home-content .blog-action > span,
.home-content .faq details > p,
.home-content #features .feature-section-heading > p,
.home-content #features .feature-narrative > p:last-child,
.home-content #journal-story .journal-heading .journal-intro,
.home-content #journal-story .journal-heading .journal-product-note {
  color: var(--quiet);
}

.home-content .blog-intro,
.home-content .privacy,
.home-content #features .feature-panel,
.home-content #features .feature-secondary-grid .feature-panel {
  background-color: var(--paper);
  border-color: var(--line);
}
.home-content .audience-card { border-color: var(--line); }
.home-content .personal-card { background-color: var(--paper); }
.home-content .steps-row .step-icon,
.home-content .benefit-list li > span.benefit-check {
  background-color: var(--oat);
  border-color: var(--line);
  color: var(--cocoa);
}
.home-content .sharing-copy .sharing-note { border-left-color: var(--rose); }

.home-content .closing {
  --quiet: var(--quiet-on-oat);
  --accent-small: var(--accent-on-oat);
  --heading-accent: var(--accent-on-oat);
  background-color: var(--oat);
  color: var(--cocoa);
}
.home-content .closing .closing-description { color: var(--quiet); }

/* Outer calls to action: no selector reaches the app/phone illustration. */
.home-content :is(.hero-copy, .product-copy, .sharing-copy, .audience-copy,
    .blog-intro, .closing-inner) .button,
.home-content .blog-intro .blog-button {
  background-color: var(--cocoa);
  border-color: var(--cocoa);
  color: var(--milk);
}
.home-content :is(.hero-copy, .product-copy, .sharing-copy, .audience-copy,
    .blog-intro, .closing-inner) .button:hover:not(:disabled),
.home-content .blog-intro .blog-button:hover {
  background-color: var(--cocoa-hover);
  border-color: var(--cocoa-hover);
  color: var(--milk);
}
.home-content :is(.hero-copy, .product-copy, .sharing-copy, .audience-copy,
    .blog-intro, .closing-inner) .button-outline {
  background-color: transparent;
  border-color: var(--cocoa);
  color: var(--cocoa);
}
.home-content :is(.hero-copy, .product-copy, .sharing-copy, .audience-copy,
    .blog-intro, .closing-inner) .button-outline:hover:not(:disabled) {
  background-color: var(--oat);
  border-color: var(--cocoa);
  color: var(--cocoa);
}
.home-content :is(.hero-copy, .product-copy, .sharing-copy, .audience-copy,
    .blog-intro) .text-link {
  color: var(--accent-small);
  border-bottom-color: var(--line);
}
.home-content :is(.hero-copy, .product-copy, .sharing-copy, .audience-copy,
    .blog-intro) .text-link:hover {
  color: var(--cocoa);
  border-bottom-color: currentColor;
}
.home-content :is(.hero-copy, .product-copy, .sharing-copy, .audience-copy,
    .blog-intro, .closing-inner) a:focus-visible,
.home-content .faq summary:focus-visible {
  outline: 2px solid var(--cocoa);
  outline-offset: 5px;
}