/* Bounded Phase 4E alignment for the accountant landing page. The route keeps
   its own campaign composition; these tokens and selectors bring its Hearth
   identity and theme contract into line with the shared system. */

html[data-theme="light"] body.offer-page {
  --ink: #2C2622;
  --muted: #62564F;
  --paper: #FAF7F2;
  --cream: #FFFDF9;
  --white: #FFFFFF;
  --pine: #2C2622;
  --pine-2: #69483D;
  --clay: #A94F36;
  --line: rgba(44, 38, 34, 0.16);
  --shadow: 0 28px 80px rgba(44, 38, 34, 0.12);
}

html[data-theme="dark"] body.offer-page {
  --ink: #FAF7F2;
  --muted: #D8D0C7;
  --paper: #1F1B18;
  --cream: #2C2622;
  --white: #FAF7F2;
  --pine: #2C2622;
  --pine-2: #65453C;
  --clay: #E8956D;
  --line: rgba(216, 208, 199, 0.16);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

html[data-theme] body.offer-page {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.offer-page .site-header {
  background: color-mix(in srgb, var(--paper) 94%, transparent) !important;
  border-color: var(--line) !important;
  box-shadow: 0 12px 36px rgba(44, 38, 34, 0.05);
}

.offer-page .brand {
  gap: 0.7rem;
  color: var(--ink) !important;
}

.offer-page .brand-wordmark {
  color: var(--ink) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.95rem, 3.2vw, 2.7rem);
  letter-spacing: -0.045em;
  line-height: 0.85;
}

.offer-page .brand-period {
  color: var(--clay);
}

.offer-page .brand-context {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.offer-page .nav-links,
.offer-page .back-home-link {
  color: var(--muted);
}

.offer-page .nav-links a:hover,
.offer-page .back-home-link:hover {
  color: var(--clay);
}

.offer-page .nav-links .button,
.offer-page .button {
  border-color: var(--clay);
  background: var(--clay);
  color: var(--white);
  box-shadow: 0 16px 34px rgba(44, 38, 34, 0.14);
}

.offer-page .button.secondary,
.offer-page .button.secondary.light {
  background: transparent;
  border-color: currentColor;
  color: inherit;
  box-shadow: none;
}

.offer-page .site-footer {
  background: var(--pine) !important;
  color: var(--white);
}

.offer-page .site-footer a,
.offer-page .site-footer span {
  color: var(--muted);
}

.offer-page .site-footer a:hover {
  color: var(--clay);
}

.offer-page .theme-toggle {
  border-color: var(--line);
  color: var(--ink);
}

@media (max-width: 560px) {
  .offer-page .brand-wordmark {
    font-size: 2rem;
  }

  .offer-page .brand-context {
    font-size: 0.75rem;
  }
}