body.home-page {
  color: #432d25;
  background:
    radial-gradient(ellipse at 8% 12%, rgba(255, 197, 143, 0.28), transparent 30rem),
    radial-gradient(ellipse at 92% 35%, rgba(244, 164, 154, 0.2), transparent 34rem),
    linear-gradient(180deg, #fff5e8 0%, #fff8ec 46%, #ffefd9 100%);
}

.home-page .topbar {
  background: rgba(255, 247, 235, 0.94);
  border-bottom-color: rgba(174, 94, 51, 0.18);
  box-shadow: 0 5px 18px rgba(126, 69, 37, 0.08);
}

.home-page .brand,
.home-page .nav-links a {
  color: #59392e;
}

.home-page .brand-mark {
  background: linear-gradient(135deg, #e76f51, #f4a261);
}

.home-page .nav-links a:hover,
.home-page .nav-links a:focus-visible {
  color: #b54437;
}

.home-page .hero {
  gap: 1.5rem;
}

.home-page .hero-copy {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid rgba(196, 111, 72, 0.22);
  border-radius: 30px 22px 30px 22px;
  background: linear-gradient(140deg, #ffedcf 0%, #fff4df 55%, #ffe0ca 100%);
  box-shadow: 0 16px 36px rgba(141, 81, 46, 0.1);
}

.home-page .hero-copy h1 {
  color: #59372d;
}

.home-page .hero .eyebrow {
  color: #b94b3d;
}

.home-page .lead {
  color: #674c3e;
}

.home-page .hero .primary-btn {
  color: #fffaf2;
  background: linear-gradient(135deg, #d95d45, #ea8152);
  box-shadow: 0 10px 22px rgba(174, 70, 47, 0.2);
}

.home-page .hero .ghost-btn {
  color: #6b4435;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(156, 98, 61, 0.24);
}

.home-page .hero-card {
  background: linear-gradient(150deg, #e76f51 0%, #f08a5d 56%, #f4a261 100%);
  box-shadow: 0 18px 40px rgba(177, 79, 48, 0.2);
}

.home-page .score-pill {
  color: #6d3e2e;
  background: rgba(255, 242, 214, 0.78);
  border-color: rgba(255, 255, 255, 0.65);
}

.home-page .section-heading {
  padding: 1.25rem 1.5rem;
  border-left: 5px solid #e76f51;
  border-radius: 0 18px 18px 0;
  background: rgba(255, 249, 238, 0.78);
}

.home-page .section-heading h2 {
  color: #4b332b;
}

.home-page .section-heading .eyebrow {
  color: #bc5941;
}

.home-page .section-intro {
  color: #684e40;
}

.home-page .subject-card {
  --card-bg: #fff0df;
  --card-edge: #e8a16c;
  --card-link: #a44d36;
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  border-top: 5px solid var(--card-edge);
  box-shadow: 0 9px 22px rgba(112, 73, 48, 0.09);
}

.home-page .subject-card:nth-child(1) {
  --card-bg: #ffe4d6;
  --card-edge: #e98965;
  --card-link: #a54434;
}

.home-page .subject-card:nth-child(2) {
  --card-bg: #ffe3df;
  --card-edge: #df8c86;
  --card-link: #9b484a;
}

.home-page .subject-card:nth-child(3) {
  --card-bg: #fff0c9;
  --card-edge: #dfa94d;
  --card-link: #8a5b19;
}

.home-page .subject-card:nth-child(4) {
  --card-bg: #ffedbd;
  --card-edge: #d9a843;
  --card-link: #805518;
}

.home-page .subject-card:nth-child(5) {
  --card-bg: #e8efcf;
  --card-edge: #9eac68;
  --card-link: #51602f;
}

.home-page .subject-card:nth-child(6) {
  --card-bg: #f8e1c9;
  --card-edge: #cf9360;
  --card-link: #88512e;
}

.home-page .subject-card:nth-child(7) {
  --card-bg: #ffe8ce;
  --card-edge: #dfa66d;
  --card-link: #91532b;
}

.home-page .subject-card:nth-child(8) {
  --card-bg: #f3e3d7;
  --card-edge: #c69272;
  --card-link: #86533c;
}

.home-page .subject-card:nth-child(9) {
  --card-bg: #f8ddd8;
  --card-edge: #d38476;
  --card-link: #984b43;
}

.home-page .subject-card:nth-child(10) {
  --card-bg: #e9e6d4;
  --card-edge: #a39c68;
  --card-link: #615c36;
}

.home-page .subject-card:nth-child(11) {
  --card-bg: #ffe8bd;
  --card-edge: #d99a42;
  --card-link: #8c501c;
}

.home-page .subject-card:nth-child(12) {
  --card-bg: #e7e9e9;
  --card-edge: #899b9d;
  --card-link: #496369;
}

.home-page .subject-card:nth-child(13) {
  --card-bg: #f6e0bd;
  --card-edge: #c99251;
  --card-link: #805229;
}

.home-page .subject-card h3 {
  color: #49342c;
}

.home-page .subject-card p {
  color: #604a3e;
}

.home-page .subject-tag {
  color: #593b2f;
  background: rgba(255, 252, 242, 0.78);
  border: 1px solid rgba(124, 76, 47, 0.14);
}

.home-page .card-link {
  color: var(--card-link);
}

.home-page a.subject-card:hover,
.home-page a.subject-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(112, 73, 48, 0.16);
}

.home-page .how-to-section .section-heading {
  border-left-color: #e6a64f;
}

.home-page .step-card {
  background: #fff7e9;
  border: 1px solid #ead2ac;
  box-shadow: 0 8px 20px rgba(112, 73, 48, 0.07);
}

.home-page .step-number {
  color: #fffaf2;
  background: linear-gradient(135deg, #de6c4c, #e6a64f);
}

.home-page .step-card h3 {
  color: #54382c;
}

.home-page .step-card p,
.home-page .privacy-note {
  color: #685142;
}

.home-page .footer {
  background: rgba(242, 220, 190, 0.76);
  border-top: 1px solid rgba(164, 108, 62, 0.16);
}

.home-page .footer-inner {
  color: #654a3a;
}

:root[data-theme="dark"] body.home-page {
  color: #432d25;
  background:
    radial-gradient(ellipse at 8% 12%, rgba(255, 197, 143, 0.28), transparent 30rem),
    radial-gradient(ellipse at 92% 35%, rgba(244, 164, 154, 0.2), transparent 34rem),
    linear-gradient(180deg, #fff5e8 0%, #fff8ec 46%, #ffefd9 100%);
}

:root[data-theme="dark"] body.home-page .topbar {
  background: rgba(255, 247, 235, 0.94);
  border-bottom-color: rgba(174, 94, 51, 0.18);
}

:root[data-theme="dark"] body.home-page .brand,
:root[data-theme="dark"] body.home-page .nav-links a {
  color: #59392e;
}

:root[data-theme="dark"] body.home-page .hero-card {
  color: #fffaf2;
  background: linear-gradient(150deg, #e76f51 0%, #f08a5d 56%, #f4a261 100%);
}

:root[data-theme="dark"] body.home-page .subject-card,
:root[data-theme="dark"] body.home-page .step-card {
  color: #432d25;
  background: var(--card-bg, #fff7e9);
  border-color: var(--card-edge, #ead2ac);
}

:root[data-theme="dark"] body.home-page .subject-card h3,
:root[data-theme="dark"] body.home-page .step-card h3 {
  color: #49342c;
}

:root[data-theme="dark"] body.home-page .subject-card p,
:root[data-theme="dark"] body.home-page .step-card p,
:root[data-theme="dark"] body.home-page .section-intro,
:root[data-theme="dark"] body.home-page .privacy-note,
:root[data-theme="dark"] body.home-page .footer-inner {
  color: #604a3e;
}

@media (max-width: 700px) {
  .home-page .hero-copy {
    padding: 1.5rem;
  }
}