/* Approved visual layer: one restrained sans-serif typeface. */
:root {
  --font-sans: "Onest", sans-serif;
  --font-display: "Onest", sans-serif;
  --font-section: "Onest", sans-serif;
  --bg: #e7e8e4;
  --bg-elevated: #f3f2ee;
  --bg-muted: #d9ddd7;
  --text: #16251d;
  --text-heading: #16251d;
  --text-muted: #405046;
  --text-soft: #59665e;
  --accent: #9b4931;
  --accent-dim: #873b27;
  --accent-hover: #873b27;
  --border: rgba(22, 37, 29, .18);
  --border-strong: rgba(22, 37, 29, .38);
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--font-sans); font-size: 18px; line-height: 1.62; letter-spacing: 0; }
body * { font-family: var(--font-sans) !important; }
h1, h2, h3, h4, .section__title, .logo, .cta-final__eyebrow {
  font-family: var(--font-display) !important;
  color: var(--text-heading) !important;
  letter-spacing: -.03em;
}
h1 { font-size: clamp(3.25rem, 5vw, 4.25rem); line-height: 1.08; font-weight: 500; }
h2, .section__title { font-size: clamp(2.5rem, 3.6vw, 3.25rem); line-height: 1.12; font-weight: 500; }
h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.3; font-weight: 500; }
p, li, .section__subtitle, .hero__lead, .direction-card p, .support__card p,
.faq__answer, .tariff__desc, .review-card, .btn, button, input, textarea, label, a {
  font-family: var(--font-sans) !important;
  line-height: 1.65;
}
strong, b, button, .btn, .preview-button, .tariff-slide__buy { font-weight: 500 !important; }
.section { padding-block: clamp(5rem, 10vw, 9rem); }
.section__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__subtitle { max-width: 38rem; margin-top: 1.5rem; color: var(--text-muted); }

.header, .preview-header { background: rgba(231, 232, 228, .9); border-color: var(--border); }
.nav a, .preview-nav a, .logo__muted, .preview-brand__role { color: var(--text-muted); }
.btn--primary, .preview-button--primary, .tariff-slide__buy {
  background: var(--accent) !important; color: #fffdf9 !important; border-color: var(--accent) !important;
}
.btn--primary:hover, .preview-button--primary:hover, .tariff-slide__buy:hover { background: var(--accent-hover) !important; }
.btn--outline, .preview-button--outline { color: var(--text) !important; border-color: var(--border-strong) !important; background: transparent !important; }
a { color: var(--accent); }

.hero, .preview-hero, #curator, #faq { background: var(--bg); }
#curator.section, #faq.section--tight { background: var(--bg); }
.preview-audience__card, .support__card, .direction-card, .tariff-slide { background: var(--bg-elevated); border-color: var(--border); }
.preview-audience__card--accent { background: var(--text); color: #f3f2ee; }
.preview-audience__card--accent h3, .preview-audience__card--accent p { color: #f3f2ee; }

/* Directions: quiet paper surface, green reserved for Reviews. */
#directions.section--directions {
  background: var(--bg); color: var(--text); border-block-color: var(--border);
}
#directions .eyebrow, #directions .section-heading h2, #directions .section-heading > p:last-child,
#directions .direction-list h3, #directions .direction-list p, #directions .direction-list article > span { color: var(--text); }
#directions .section-heading > p:last-child, #directions .direction-list p { color: var(--text-muted); opacity: 1; }
#directions .direction-list { border-top-color: var(--border-strong); }
#directions .direction-list article { border-bottom-color: var(--border); }
#directions .direction-list b { color: var(--accent); }
#directions .directions-map__labels { fill: var(--text); }
#directions .directions-map__caption { fill: var(--text-muted); }

/* Support: linen surface with a quiet sage editorial detail in the quotation. */
#support.section--support { background: #f3f2ee; color: var(--text); border-block-color: var(--border); }
#support .support__bg { opacity: 0; }
#support .support__intro h2, #support .support__intro p, #support .support__intro blockquote,
#support .support__steps-item h3, #support .support__steps-item p, #support .support__steps-item > span { color: var(--text); }
#support .support__intro p:not(.support__kicker), #support .support__steps-item p { color: var(--text-muted); opacity: 1; }
#support .support__intro blockquote {
  position: relative;
  isolation: isolate;
  min-height: 13rem;
  padding: 1.5rem 12rem 1.5rem 1.75rem;
  overflow: hidden;
  background: #dfe3da;
  border-color: rgba(22, 37, 29, .3);
  border-left-color: var(--accent);
}
#support .support__intro blockquote::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 52%;
  background: linear-gradient(90deg, #dfe3da 0%, rgba(223, 227, 218, .18) 42%, transparent 72%), url("../assets/support-notebook-pen.png") right center / cover no-repeat;
}
#support .support__steps { border-top-color: rgba(22, 37, 29, .3); }
#support .support__steps-item { border-bottom-color: rgba(22, 37, 29, .22); }
@media (max-width: 700px) {
  #support .support__intro blockquote { min-height: 0; padding: 1.4rem 1.5rem 11rem; }
  #support .support__intro blockquote::before { top: auto; width: 100%; height: 55%; }
}

/* Reviews stays the only large green section. */
#reviews.section--dark { background: var(--text); color: #f3f2ee; }
#reviews .section__title { color: #f3f2ee !important; }
#reviews .section__subtitle { color: #d9ddd7; }

/* FAQ: a nearly imperceptible editorial orbit keeps the light surface alive. */
#faq.section--tight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #e7e8e4;
}
#faq > .container { position: relative; z-index: 1; }
#faq.section--tight::before,
#faq.section--tight::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
#faq.section--tight::before {
  top: 50%;
  right: clamp(-15rem, -12vw, -7rem);
  width: clamp(20rem, 34vw, 34rem);
  aspect-ratio: 1;
  border: 1px solid rgba(22, 37, 29, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(3rem, 6vw, 6rem) rgba(22, 37, 29, .045);
  transform: translateY(-50%);
  animation: faq-orbit-drift 18s ease-in-out infinite alternate;
}
#faq.section--tight::after {
  top: 18%;
  right: clamp(2rem, 7vw, 8rem);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(155, 73, 49, .32);
  box-shadow: -7rem 12rem 0 2px rgba(22, 37, 29, .12), -2rem 22rem 0 0 rgba(22, 37, 29, .12);
  animation: faq-orbit-drift 14s ease-in-out infinite alternate-reverse;
}
@keyframes faq-orbit-drift {
  from { transform: translate3d(0, -50%, 0) rotate(0deg); }
  to { transform: translate3d(-10px, calc(-50% - 8px), 0) rotate(3deg); }
}
@media (max-width: 700px) {
  #faq.section--tight::before { top: 78%; right: -13rem; }
  #faq.section--tight::after { top: 11%; right: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  #faq.section--tight::before,
  #faq.section--tight::after { animation: none; }
}

/* Final CTA: soft linen, calm outlined channels, terracotta hover. */
#contacts.cta-final { background: var(--bg-elevated); color: var(--text); border-top-color: var(--border); }
#contacts .cta-final__glow { opacity: .025; }
#contacts .cta-final__eyebrow, #contacts .cta-final__lead, #contacts .cta-final__note,
#contacts .cta-final__outro, #contacts .cta-final__list li { color: var(--text) !important; opacity: 1; }
#contacts .cta-final__note, #contacts .cta-final__outro, #contacts .cta-final__list li { color: var(--text-muted) !important; }
#contacts .cta-final__channels { display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; }
#contacts .cta-channel {
  flex: 1 1 0; min-width: 0; justify-content: center; gap: 8px; padding: 12px 10px;
  color: var(--text) !important; background: rgba(22, 37, 29, .055); border-color: rgba(22, 37, 29, .22);
}
#contacts .cta-channel__label { font-size: 14px; }
#contacts .cta-channel:hover { color: #fffdf9 !important; background: var(--accent); border-color: var(--accent); }
#contacts .cta-channel:hover .cta-channel__icon { color: #fffdf9; }

footer.footer { background: #f3f2ee; border-top-color: var(--border); }
footer.footer, footer.footer .footer__copy { color: var(--text-muted); }

*:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 700px) {
  body { font-size: 17px; }
  h1 { font-size: clamp(2.5rem, 10.25vw, 2.75rem); line-height: 1.06; }
  h2, .section__title { font-size: clamp(2rem, 8.5vw, 2.25rem); line-height: 1.1; }
  .section { padding-block: 4.5rem; }
}
@media (max-width: 520px) {
  #contacts .cta-final__channels { gap: 6px; }
  #contacts .cta-channel { padding: 10px 6px; gap: 5px; }
  #contacts .cta-channel__label { font-size: 12px; }
  #contacts .cta-channel__icon svg { width: 18px; height: 18px; }
}
