/* Green /hno/ portal only. Photography keeps its natural colors. */
:root {
  --ink: #203c2c;
  --muted: #586c5e;
  --blue: #245f3e;
  --blue-hover: #18472d;
  --white: #fcfdf9;
  --canvas: #f5f8f1;
  --ice: #edf3e8;
  --line: #d5e1cf;
  --theme-paper: #fcfdf9;
  --theme-wash: #edf3e8;
  --theme-accent: #245f3e;
  --theme-soft: #e1ebda;
  --theme-border-strong: #8fa58e;
  --theme-shadow: #173d2814;
  accent-color: var(--theme-accent);
  scrollbar-color: var(--theme-border-strong) var(--canvas);
}
body { background: var(--theme-paper); color: var(--ink); }
::selection { background: var(--theme-soft); color: var(--ink); }
*::-webkit-scrollbar-track { background: var(--canvas); }
*::-webkit-scrollbar-thumb { background: var(--theme-border-strong); border-color: var(--canvas); }
.section-heading h2, .discovery-heading h2, .journey h2, .practice h2, .faq h2,
.topic-title, .topic-detail-copy h2, .account-main h1, .legal-page h1 {
  font-family: Quicksand, Manrope, sans-serif; font-weight: 500; letter-spacing: -.035em;
}
.logo .wordmark { font-family: Quicksand, Manrope, sans-serif; font-weight: 500; }
.wordmark, .hno-wordmark, .brand-dot { color: var(--theme-accent); }
.hno-round-dot:after { background: var(--theme-accent); }
.topics, .clinic-discovery, .provider-discovery { background: var(--theme-paper); }
.topic-card, .topic-index>button, .clinic-discovery-grid>a, .provider-card { border-color: var(--line); }
.topic-photo, .sleep-card>img, #topic-detail-image { filter: none; }
#topic-detail-image[src$="green-sleep.jpg"] { object-position: 85% center; }
.allergy-card.has-topic-photo:after, .prevention-card.has-topic-photo:after, .sleep-card:after { display: none; }

/* Separate type and image: clear, unfiltered photographs with a sage paper panel. */
.topic-grid { grid-template-columns: 1.12fr 1fr; grid-template-rows: repeat(2,minmax(245px,auto)); }
.sleep-card { background: var(--theme-wash); min-height: 530px; }
.sleep-card>img { inset: 0 0 auto; height: calc(100% - 155px); object-position: 56% 55%; }
.sleep-card .sleep-content { top: auto; bottom: 0; inset-inline: 0; min-height: 155px; padding: 23px 30px 26px; background: var(--theme-wash); }
.sleep-card .topic-title { font-size: clamp(30px,3vw,39px); color: var(--ink); text-shadow: none; }
.sleep-card .topic-description { color: var(--muted); margin-top: 12px; }
.sleep-card .circle-link { bottom: 27px; }
.allergy-card.has-topic-photo, .prevention-card.has-topic-photo { background: var(--theme-wash); padding: 25px; min-height: 255px; }
.allergy-card>.topic-photo, .prevention-card>.topic-photo { left: 48%; width: 52%; object-position: 58% center; z-index: -1; }
.allergy-card .topic-text, .prevention-card .topic-text { max-width: 43%; }
.allergy-card .topic-name, .prevention-card .topic-name { display: none; }
.allergy-card .topic-title, .prevention-card .topic-title { font-size: clamp(24px,2.1vw,30px); line-height: 1.2; }
.allergy-card .topic-description, .prevention-card .topic-description { padding: 0; font-size: 13px; color: var(--muted); }
.topic-index>button.has-topic-photo { background: var(--theme-wash); border-color: var(--line); padding-bottom: 58px; }
.topic-index>button.has-topic-photo>span:last-child {
  top: auto; bottom: 17px; right: 19px; margin: 0;
  width: 30px; height: 30px; background: transparent; color: var(--theme-accent); font-size: 23px;
}
.topic-grid .circle-link { top: auto; bottom: 18px; right: 20px; background: transparent; color: var(--theme-accent); width: 32px; height: 32px; }
.topic-card:hover .circle-link { background: transparent; color: var(--blue-hover); transform: translate(2px,-2px); }
.topic-index>button.has-topic-photo:hover { background: var(--theme-soft); }
.topic-index [data-topic="Schwindel & Gleichgewicht"] .topic-photo { object-position: center 15%; }
.topic-index small, .topic-description, .section-heading p { color: var(--muted); }
.topic-title, .topic-name { color: var(--ink); }
.circle-link, .step-number { background: var(--theme-paper); color: var(--theme-accent); }
.journey { background: var(--theme-paper); }
.practice, .practice-statement { background: var(--theme-wash); }
.practice-statement, .practice-features>span { border-color: var(--line); }
.practice-word, .practice-word span, .journey h2 span, .dialog-brand, .section-eyebrow, .practice-features>span { color: var(--theme-accent); }
.field-label, .search-field>.icon, .discovery-location { color: var(--muted); }

/* The same palette through search, appointment selection, profiles and accounts. */
.site-dropdown, .topic-options, dialog, .clinic-discovery-grid>a, .provider-card,
.login-panel, .role-card, .sidebar, .calendar-shell, .table-shell, .stat, .empty-state { background: var(--theme-paper); border-color: var(--line); }
.site-dropdown a:hover, .topic-options button:hover, .topic-options button:first-child,
.topic-options button:focus-visible, .view-toggle button[aria-pressed=true] { background: var(--theme-wash); }
.button, .search-submit { background: var(--theme-accent); color: #fff; }
.button:hover:not(:disabled), .search-submit:hover:not(:disabled) { background: var(--blue-hover); box-shadow: 0 6px 20px var(--theme-shadow); }
.button:disabled { background: var(--theme-soft); color: var(--muted); }
.outline-button, .form-control, .date-button, .slot { background: var(--theme-paper); border-color: var(--line); }
.date-button:hover, .slot:hover, .date-button[aria-pressed=true], .slot[aria-pressed=true] { background: var(--theme-wash); border-color: var(--theme-accent); color: var(--theme-accent); }
.booking-progress li[aria-current=step] { color: var(--theme-accent); border-color: var(--theme-accent); }
.results-mode button[aria-pressed=true] { background: var(--theme-accent); color: #fff; }
.topic-detail-footer, footer { background: var(--theme-wash); border-color: var(--line); }
.site-control { color: var(--theme-accent); }
.site-control:hover, .site-control[aria-expanded=true] { background: var(--theme-wash); color: var(--blue-hover); }
.film-menu-control { color: var(--theme-accent); border-color: var(--line); }
.film-menu-control:focus-visible { outline-color: var(--theme-accent); }
.hno-immersive .site-header.is-scrolled { background: #fcfdf9f5; }
.hno-immersive .site-header.is-scrolled .site-control { color: var(--theme-accent); }
.hno-search-hero .booking-bar { background: #fcfdf9f5; border-color: var(--line); }
.hno-search-hero .search-field>.icon { color: var(--theme-accent); }
.hno-search-hero .locate-button { color: var(--theme-accent); background: var(--theme-wash); }
.partner-bar { background: #fcfdf9f5; border-color: var(--line); }
.workspace { background: var(--canvas); }
.account-profile-bar { border-color: var(--line); }
.profile-panel>p, .sidebar-bottom p, .workspace-footer { color: var(--muted); }

.legal-page { --legal-accent: var(--theme-accent); --legal-ink: var(--ink); background: var(--canvas); color: var(--ink); }
.legal-page .card, .legal-page .site-header { background: var(--theme-paper); border-color: var(--line); }
.legal-page .lead, .legal-page .card .soft, .legal-back, .legal-footer { color: var(--muted); }
.legal-page .card a, .legal-back:hover { color: var(--theme-accent); text-decoration-color: var(--theme-border-strong); }
.legal-footer { background: var(--theme-paper); border-color: var(--line); }
.legal-page .legal-hero, .legal-page .legal-card { background: var(--theme-paper); border-color: var(--line); }
.legal-page .legal-kicker, .legal-page .legal-nav a { color: var(--theme-accent); }
.hno-footer-powered { color: var(--muted); }
footer .hno-footer-powered { position: static; font-size: 11px; margin-left: auto; }
footer:has(>.hno-footer-powered) { display: flex; justify-content: flex-end; gap: 20px; }
.hno-footer-powered:hover { color: var(--theme-accent); }
.hno-footer-powered:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 4px; }
.registration-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 24px; }
.registration-footer>span { margin-right: auto; }
@media (max-width: 1000px) and (min-width: 761px) {
  .allergy-card.has-topic-photo, .prevention-card.has-topic-photo { padding: 20px; }
  .allergy-card>.topic-photo, .prevention-card>.topic-photo { left: 52%; width: 48%; }
  .allergy-card .topic-text, .prevention-card .topic-text { max-width: 48%; }
  .allergy-card .topic-title, .prevention-card .topic-title { font-size: 24px; }
}
@media (max-width: 760px) {
  .topic-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .sleep-card { min-height: 450px; }
  .sleep-card .sleep-content { padding: 22px 24px; }
  .allergy-card.has-topic-photo, .prevention-card.has-topic-photo { padding: 24px; min-height: 255px; }
  .topic-detail-footer .button { white-space: normal; line-height: 1.4; }
  .form-control, .filter-bar input, .filter-bar select, .search-field input { font-size: 16px; }
  body:has(.account-main) .header-inner { gap: 14px; }
  .clinic-global .practice-brand-name { font-size: 18px; }
  .account-main .button { white-space: normal; }
}
@media (max-width: 380px) {
  .allergy-card.has-topic-photo, .prevention-card.has-topic-photo { padding: 20px; min-height: 250px; }
  .allergy-card .topic-title, .prevention-card .topic-title { font-size: 22px; }
  .allergy-card .topic-description, .prevention-card .topic-description { font-size: 12px; }
  .sleep-card .topic-title { font-size: 29px; }
  .sleep-card .sleep-content { padding-inline: 20px; }
  .sleep-card .topic-description { max-width: 22ch; }
  .topic-index { grid-template-columns: 1fr; }
  .clinic-global .practice-brand-name { font-size: 16px; }
}
@media (max-width: 600px) {
  .allergy-card.has-topic-photo, .prevention-card.has-topic-photo { padding: 210px 24px 24px; min-height: 355px; }
  .allergy-card>.topic-photo, .prevention-card>.topic-photo { inset: 0 0 auto; width: 100%; height: 190px; object-position: center; }
  .allergy-card .topic-text, .prevention-card .topic-text { display: block; width: 100%; max-width: none; }
  .allergy-card .topic-title, .prevention-card .topic-title { font-size: 27px; }
  .allergy-card .topic-description, .prevention-card .topic-description { padding-right: 52px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .sleep-card:hover>img { transform: none; }
}