/* Sitewide atmosphere, sampled from the user-approved breathing reference.
   Content surfaces stay quiet; the page canvas carries the colour. */
:root {
  --paper: #fff6df !important;
  --surface-input: #fff6df !important;
  --surface-header: #fff6df !important;
  /* One continuous, muted blend: no bright radial patches or white midpoint. */
  --aira-page-gradient: linear-gradient(115deg, #dfeee9 0%, #f3eac8 100%);
  --wellness-gradient: var(--aira-page-gradient);
}
body {
  background: var(--aira-page-gradient) fixed !important;
  min-height: 100vh;
}
.site-shell, .app-main, .app-content, .join-page,
.hero, .page-hero, .listing-hero, .support-hero, .about-hero,
.pro-hero, .services-hero, .guide-page-hero, .aira-hero,
.audience-section, .programs, .feature-band, .skill-section,
.pathway-detail, .pathway-regulation, .guide-destinations,
.wellness-body .wellness-hero, .wellness-body .studio-intro,
.wellness-body .practice-section, .wellness-body .practice-section:nth-of-type(odd),
.wellness-body #ground, .wellness-body .next-step {
  background: transparent !important;
}
.site-header, .app-topbar, .studio-nav, .pathway-subnav {
  background: #fff6df !important;
}
/* A single opaque ivory avoids cool colour bleed through pale surfaces. */
body :is(.app-panel, .app-metric, .aira-form, .aira-history-panel,
  .aira-settings-section, .practice-card, .mood-card, .refresh-card,
  .update-card, .mobile-tab-bar, .app-topbar, .floating-note) {
  background-color: #fff6df !important;
}
body :is(textarea, select, input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=hidden])) {
  background-color: #fff6df !important;
}
.button, .button-cream, .final-cta .button-cream,
.pro-callout .button-cream, .feed-access-primary, .pause-card a {
  background: #fff6df !important;
  color: #244638 !important;
  border: 1px solid #69867c;
  box-shadow: 0 4px 16px rgba(36, 70, 56, .08);
}
.button:hover, .button-cream:hover, .final-cta .button-cream:hover,
.pro-callout .button-cream:hover, .feed-access-primary:hover, .pause-card a:hover {
  background: #244638 !important;
  color: #fff6df !important;
  box-shadow: 0 8px 22px rgba(24, 53, 42, .22);
}
/* Dark support/status panels retain their semantic hierarchy; broad bands
   become translucent so the same canvas remains visible while scrolling. */
.final-cta, .pro-callout, .service-trust {
  background: rgba(255, 250, 240, .65) !important;
  color: #244638;
}
@media (max-width: 420px) {
  .wellness-body .breath-instruction { grid-template-columns: minmax(0,1fr); }
  .wellness-body .breath-instruction > span { justify-self: start; }
  .wellness-body .wellness-orb { width: 125px; height: 125px; }
}
@media print {
  body { background: #fff !important; }
}
/* Two-tone focus stays visible on both the gradient and dark support panels. */
body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #244638 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px #fff6df !important;
}
/* Readable copy on the brighter canvas; retain light copy in dark cards. */
body p { font-size: 1rem !important; line-height: 1.65; font-weight: 500; }
body small, body .eyebrow { font-size: .875rem !important; line-height: 1.5; font-weight: 500; }
body :is(.hero-intro, .feature-list p, .practice-copy > p, .wellness-hero > div > p,
  .guide-page-hero > div > p, .section-intro > p, .listing-hero > p,
  .about-hero > p, .page-hero > p, .support-hero > p, .services-hero > p) {
  color: #344f43;
}
body .nav-links a { font-size: .875rem; font-weight: 600; }
body :is(.aira-status, .aira-input-note, .aira-setting-row p, .aira-settings-status p) {
  color: #344f43;
  font-size: .875rem !important;
  line-height: 1.6;
  font-weight: 500;
}
@media (max-width: 600px) and (max-height: 800px) {
  .aira-page:not(.aira-has-started) .aira-chat-card { min-height: 0; gap: 10px; }
  .aira-page:not(.aira-has-started) .aira-chat-top h2 { font-size: 32px; }
  .aira-page:not(.aira-has-started) .aira-voice-button { width: 140px; height: 128px; }
  .aira-page:not(.aira-has-started) .aira-voice-button::before { width: 94px; height: 94px; left: 23px; }
}
@media (min-width: 801px) and (max-width: 1120px) {
  body .nav-links { gap: 10px; margin-left: 12px; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:not(:disabled), .feed-access-primary, .pause-card a {
    transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
  }
  .button:not(:disabled):hover, .feed-access-primary:hover, .pause-card a:hover {
    transform: translateY(-2px) scale(1.025);
  }
  .button:not(:disabled):active { transform: translateY(0) scale(.99); }
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .button:hover, .feed-access-primary:hover, .pause-card a:hover { transform: none !important; }
}
.button:disabled:hover { transform: none; box-shadow: none; }

/* Standalone navigation actions look actionable without changing link semantics. */
.service-catalog .service-visual-illustrated {
  padding: 0; min-height: 190px; background: #fff6df;
  display: flex; align-items: center; justify-content: center;
}
.service-visual-illustrated img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: contain;
}
.support-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
body :is(.text-link, .text-button, .app-inline-action, .app-card-action, .service-action, .program-card > a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 44px;
  padding: .7rem 1.15rem;
  border: 1px solid #69867c;
  border-radius: 999px;
  background: #fff6df;
  color: #244638 !important;
  font-family: var(--sans, sans-serif);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(36, 70, 56, .08);
}
body :is(.text-link, .text-button, .app-inline-action, .app-card-action, .service-action, .program-card > a):hover {
  background: #244638;
  color: #fff6df !important;
  border-color: #fff6df;
  box-shadow: 0 8px 22px rgba(24, 53, 42, .22);
}
body p a:not(.button):not(.text-link) {
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .2em;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body :is(.text-link, .text-button, .app-inline-action, .app-card-action, .service-action, .program-card > a) {
    transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
  }
  body :is(.text-link, .text-button, .app-inline-action, .app-card-action, .service-action, .program-card > a):hover { transform: translateY(-2px); }
}
body .program-card > a { align-self: flex-start; margin-top: auto; }
body .service-body .service-action { align-self: flex-start; margin-top: auto; text-align: center; }
body .service-action span { margin-left: 0; }
/* Continuous page canvas. The companion page is deliberately excluded. */
body:not(.aira-page) :is(main > section, .assessment-library, .privacy-strip,
  .support-options, .directory-controls, .workspace-header, .final-cta,
  .pro-callout, .service-trust):not(.care-note):not(#urgent-help):not(.public-safety-card):not(.home-highlight):not(.pause-card):not(.directory-hero):not(.directory-controls) {
  background: transparent !important;
}
body:not(.aira-page) :is(.quote-section, .release-section, .final-cta, .pro-callout),
body:not(.aira-page) :is(.quote-section, .release-section, .final-cta, .pro-callout) > :is(p, h2, blockquote) {
  color: #244638 !important;
}
body:not(.aira-page) :is(.app-panel, .app-metric, .practice-card, .mood-card,
  .refresh-card, .update-card, .quiet-card, .data-card, .prompt-card) {
  background: rgba(215, 231, 221, .82) !important;
  border: 1px solid #91ab9d;
}
body:not(.aira-page) :is(.audience-card, .program-card, .assessment-card,
  .app-service-card, .app-journey-card, .professional-card, .support-grid > article,
  .start-grid > a, .feature-list > article) {
  background: #cadfd4 !important;
  color: #244638 !important;
  border: 1px solid #8da79b;
  box-shadow: 0 8px 22px rgba(36,70,56,.06);
}
body:not(.aira-page) :is(.audience-card, .program-card, .assessment-card,
  .app-service-card, .app-journey-card, .professional-card, .support-grid > article,
  .start-grid > a, .feature-list > article):nth-child(3n + 2) { background: #e0ddec !important; }
body:not(.aira-page) :is(.audience-card, .program-card, .assessment-card,
  .app-service-card, .app-journey-card, .professional-card, .support-grid > article,
  .start-grid > a, .feature-list > article):nth-child(3n) { background: #eedbce !important; }
body:not(.aira-page) :is(.audience-card, .program-card, .assessment-card,
  .app-service-card, .app-journey-card, .professional-card, .support-grid > article,
  .start-grid > a, .feature-list > article) :is(h2,h3,p,small,.tag,.card-number,.card-action) {
  color: #244638 !important;
}
body:not(.aira-page) .feature-list > article { padding: 20px; border-radius: 16px; margin-bottom: 12px; }
body:not(.aira-page) .service-product { background: #cadfd4; border-color: #8da79b; }
body:not(.aira-page) .service-product:nth-child(3n + 2) { background: #e0ddec; }
body:not(.aira-page) .service-product:nth-child(3n) { background: #eedbce; }
body:not(.aira-page) .service-product .service-body { background: transparent !important; color: #244638; }
/* Native controls keep character preferences usable with keyboard and touch. */
body:not(.aira-page) .guide-personalise { margin: 16px 0; padding: 14px; border: 1px solid #91ab9d; border-radius: 14px; background: #d7e7dd; }
body:not(.aira-page) .guide-personalise summary { cursor: pointer; font-size: 1rem; font-weight: 600; }
body:not(.aira-page) .guide-character-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
body:not(.aira-page) .guide-character-options label { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border: 1px solid #8da79b; border-radius: 12px; font-size: .875rem; cursor: pointer; }
body:not(.aira-page) .guide-character-options label:has(input:checked) { background: #fff6df; outline: 2px solid #244638; }
body:not(.aira-page) .guide-character-options img { width: 58px; height: 66px; object-fit: contain; }
body:not(.aira-page) .guide-preference-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: .875rem; }
body:not(.aira-page) .guide-preference-row select { min-height: 44px; max-width: 60%; border: 1px solid #8da79b; border-radius: 8px; padding: 8px; color: #244638; }
body:not(.aira-page) .guide-reset-position { min-height: 44px; margin-top: 12px; padding: 8px 12px; border: 1px solid #8da79b; border-radius: 999px; background: #fff6df; color: #244638; cursor: pointer; }
body:not(.aira-page) .aira-unified-launcher[data-character] { width: var(--guide-size,88px); height: calc(var(--guide-size,88px) * 1.07); }
body:not(.aira-page) .aira-unified-launcher[data-character] > img { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px var(--guide-glow,rgba(36,70,56,.18))); }
body .programs .program-card > a { padding: .7rem 1.15rem; }
body .program-card > p { margin-bottom: 24px; }

/* Aira palette — based on the approved Coastal Meadow and woodland charts. */
:root {
  --ink: #243c2c !important;
  --paper: #ece69d !important;
  --cream: #e9d985 !important;
  --surface-input: #ece69d !important;
  --surface-header: #ece69d !important;
  --mist: #a9b6c4 !important;
  --mint: #439a86 !important;
  --sage: #7a9445 !important;
  --sand: #e9d985 !important;
  --blush: #a9b6c4 !important;
  --accent-turquoise: #007991 !important;
  --accent-yellow: #e9d985 !important;
  --aira-page-gradient: radial-gradient(ellipse at 8% 18%, rgba(0,121,145,.22) 0%, transparent 45%), radial-gradient(ellipse at 92% 72%, rgba(67,154,134,.22) 0%, transparent 46%), linear-gradient(135deg, #ece69d 0%, #e9d985 48%, #a9b6c4 100%) !important;
}
body { color: #243c2c; }
.site-header, .app-topbar, .studio-nav, .pathway-subnav { background: #ece69d !important; }
.button, .button-cream, .final-cta .button-cream, .pro-callout .button-cream, .feed-access-primary, .pause-card a { background: #e9d985 !important; color: #243c2c !important; border-color: #59789f; }
.button:hover, .button-cream:hover, .final-cta .button-cream:hover, .pro-callout .button-cream:hover, .feed-access-primary:hover, .pause-card a:hover { background: #243c2c !important; color: #ece69d !important; }
#home-page .student-card, #home-page .feature-list article:nth-child(1), #home-page .program-card { background: #a9b6c4 !important; }
#home-page .pro-card, #home-page .feature-list article:nth-child(2), #home-page .program-card.dark-card { background: #439a86 !important; color: #243c2c !important; }
#home-page .care-card, #home-page .feature-list article:nth-child(3), #home-page .program-card.sand-card { background: #e9d985 !important; }
#home-page .final-cta { background: #ece69d !important; }
#home-page .hero, .page-hero, .listing-hero, .pro-hero, .support-hero, .about-hero, .wellness-body .wellness-hero { background: linear-gradient(120deg, rgba(236,230,157,.92), rgba(233,217,133,.84) 52%, rgba(169,182,196,.7)) !important; }
.assessment-card-featured { background: #a9b6c4 !important; border-color: #59789f !important; }
.assessment-card:has([data-start="anxiety"]) { background: #439a86 !important; border-color: #243c2c !important; }
.assessment-card-warm { background: #e9d985 !important; border-color: #7a9445 !important; }
.privacy-strip { background: linear-gradient(110deg, #a9b6c4, #ece69d 55%, #e9d985) !important; border-color: #59789f !important; }
.public-safety-card { background: #243c2c !important; color: #ece69d !important; border-left-color: #007991 !important; }
.wellness-body .studio-nav a:first-of-type { background: #e9d985 !important; border-color: #7a9445 !important; }
.wellness-body .next-step, .wellness-body .release-section { background: #243c2c !important; color: #ece69d !important; }

/* Keep the established page canvas. The chart colours are for accents and cards, not a site-wide background replacement. */
:root {
  --paper: #fff6df !important;
  --surface-input: #fff6df !important;
  --surface-header: #fff6df !important;
  --aira-page-gradient: radial-gradient(ellipse at 5% 60%, #58d3c5 0%, transparent 55%), radial-gradient(ellipse at 95% 35%, #fad85c 0%, transparent 53%), linear-gradient(135deg, #e3f8f3, #c2efe9 48%, #f8f4e9 85%) !important;
}
.site-header, .app-topbar, .studio-nav, .pathway-subnav { background: #fff6df !important; }
#home-page .hero, .page-hero, .listing-hero, .pro-hero, .support-hero, .about-hero, .wellness-body .wellness-hero { background: transparent !important; }
.final-cta, .pro-callout, .service-trust { background: rgba(255,250,240,.65) !important; }

/* Home-page refinements from the latest visual review. */
#home-page .hero .button-row .button,
.site-header .header-actions .button.button-small {
  background: #243c2c !important;
  border-color: #243c2c !important;
  color: #fff !important;
}
#home-page .hero .button-row .button:hover,
.site-header .header-actions .button.button-small:hover { background: #007991 !important; border-color: #007991 !important; }
#home-page .hero {
  background: linear-gradient(118deg, #c8e5f5 0%, #dcece8 48%, #fff0bd 100%) !important;
}
#home-page .student-card { background: #e9d985 !important; }
#home-page .care-card,
#home-page .feature-list article:nth-child(1),
#home-page .program-card:first-child { background: #d8d0ef !important; }
#home-page .feature-list article { border-radius: 24px !important; overflow: hidden; }
#home-page .programs { background: linear-gradient(118deg, rgba(169,182,196,.46) 0%, rgba(236,230,157,.58) 58%, rgba(255,246,223,.82) 100%) !important; }
#home-page .program-card { box-shadow: 0 14px 32px rgba(36,60,44,.10); }
#home-page .program-card.dark-card { color: #173d35 !important; }
#home-page .program-card.dark-card p { color: #fffdf1 !important; font-weight: 600; }
#home-page .program-card.dark-card .tag { color: #173d35 !important; }
#home-page .final-cta { background: linear-gradient(115deg, #fbe4ea 0%, #f7d6df 55%, #f3c9d5 100%) !important; }
.service-trust {
  background: linear-gradient(115deg, #fce7ec 0%, #f8d8e1 55%, #f3cbd7 100%) !important;
  color: #243c2c !important;
}
.service-trust .eyebrow,
.service-trust div p { color: #435f4c !important; }

/* Professionals follows the same uninterrupted canvas as the home experience. */
body:has(.pro-hero) { background: var(--aira-page-gradient) fixed !important; }
body:has(.pro-hero) .site-shell,
body:has(.pro-hero) main,
body:has(.pro-hero) .pro-hero,
body:has(.pro-hero) .professional-offers { background: transparent !important; }
body:has(.pro-hero) .professional-offers .offer-grid article { background: transparent; }
body:has(.pro-hero) .pro-callout {
  background: linear-gradient(115deg, #fce7ec 0%, #f8d8e1 55%, #f3cbd7 100%) !important;
  color: #243c2c !important;
}
body:has(.pro-hero) .pro-callout .eyebrow,
body:has(.pro-hero) .pro-callout h2 { color: #243c2c !important; }
body:has(.pro-hero) .pro-callout .button-cream {
  background: #243c2c !important;
  border-color: #243c2c !important;
  color: #fff6df !important;
}
.audience-card .audience-illustration { width: calc(100% + 48px); height: 184px; margin: -24px -24px 26px; object-fit: cover; object-position: center; border-radius: 20px 20px 0 0; filter: saturate(.84) contrast(.96); }
#home-page .feature-band { display: block; padding-top: 94px; padding-bottom: 94px; }
#home-page .feature-heading { text-align: center; margin-bottom: 42px; }
#home-page .feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1220px; margin: 0 auto; }
#home-page .feature-list article { display: block; padding: 30px; border: 1px solid rgba(36,60,44,.16); border-radius: 20px !important; }
#home-page .feature-list h3 { font-size: 28px; }
#home-page .feature-list p { max-width: none; font-size: 15px; }
#home-page .programs { background: linear-gradient(118deg, #a9b6c4 0%, #dcecf1 28%, #ece69d 68%, #f4edbd 100%) !important; }
@media (max-width:800px) { .audience-card .audience-illustration { width: calc(100% + 56px); height: 200px; margin: -28px -28px 26px; } #home-page .feature-list { grid-template-columns: 1fr; } }
.page-hero > .button[href="#paths"] { background: #244638 !important; color: #fff8e7 !important; border-color: #244638 !important; }
.page-hero > .button[href="#paths"] span { color: inherit !important; }
#home-page .program-card.dark-card > a { min-height: 36px !important; padding: .48rem .8rem !important; font-size: .75rem !important; }
@media (min-width: 801px) {
  .site-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 28px; background: #439a86 !important; }
  .site-header .nav-links { justify-content: center; margin-left: 0; }
  .site-header .nav-links a, .site-header .brand, .site-header .header-actions > a:not(.button) { color: #243c2c; }
}

/* Consistent public navigation: ivory surface, no filled page badges. */
body:not(.aira-page) .site-header { background: #fff8e7 !important; }
body:not(.aira-page) .site-header .nav-links a {
  background: transparent !important;
  border-radius: 0;
  padding: 0;
}
body:not(.aira-page) .site-header .nav-links a[href="assessments.html"] { font-weight: 500; }
@media (max-width: 800px) {
  body:not(.aira-page) .site-header .nav-links { background: #fff8e7 !important; }
}
/* The shared canvas should whisper colour, not compete with the content. */
:root {
  --aira-page-gradient: radial-gradient(ellipse at 5% 60%, rgba(88,211,197,.12) 0%, transparent 56%), radial-gradient(ellipse at 95% 35%, rgba(250,216,92,.14) 0%, transparent 54%), linear-gradient(135deg, #f8f4e9 0%, #f7f3e7 52%, #f8f4e9 100%) !important;
}
/* Pastel blue and yellow canvas; preserve the companion's existing palette. */
body:not(.aira-page) {
  --aira-page-gradient: linear-gradient(110deg, #cfe6f6 0%, #dfebed 32%, #eeeccf 62%, #f6e5ad 100%) !important;
}
/* Compact wellness tools, with readable shortcuts below the fixed header. */
.wellness-body .studio-nav {
  height: auto; min-height: 64px; padding-top: 8px; padding-bottom: 8px;
  gap: 12px; top: 88px; flex-wrap: wrap;
  color: #244638;
}
.wellness-body .studio-nav a {
  color: #244638; background: #fff6df; border: 1px solid #69867c;
  border-radius: 999px; padding: 10px 16px; min-height: 44px;
  font-size: .875rem; font-weight: 600;
}
.wellness-body .studio-nav a span, .wellness-body .studio-nav > span { color: #344f43; }
.wellness-body .studio-nav a:hover { background: #244638; color: #fff6df; }
.wellness-body .studio-nav a:hover span { color: #fff6df; }
.wellness-body .practice-section { padding-top: 40px; padding-bottom: 40px; gap: 36px; scroll-margin-top: 164px; }
.wellness-body .practice-copy h2 { font-size: clamp(28px,3vw,38px); letter-spacing: -1px; }
.wellness-body .practice-card { padding: 24px; }
.wellness-body .orb-stage { height: 190px; margin: 12px 0 16px; }
.wellness-body .ground-prompt { min-height: 120px; }
.wellness-body .ground-permission { padding-top: 16px; }
.wellness-body .studio-intro { padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 900px) {
  .wellness-body .practice-section { gap: 20px; padding-top: 28px; padding-bottom: 28px; }
  .wellness-body .practice-copy { position: static; }
}
@media (max-width: 800px) {
  .wellness-body .studio-nav { top: calc(75px + env(safe-area-inset-top)); gap: 8px; }
  .wellness-body .studio-nav > span { display: none; }
  .wellness-body .studio-nav a { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .wellness-body .practice-section { scroll-margin-top: 204px; }
}
@media (max-width: 420px) {
  .wellness-body .sense-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 8px; }
  .wellness-body .sense-steps li { min-width: 0; }
  .wellness-body .sense-steps li::after { display: none; }
  .wellness-body .release-player { flex-direction: column; gap: 12px; }
  .wellness-body .release-player > div { min-width: 0; }
}

/* Support carries the same quiet, continuous canvas as the public home page. */
body.support-page,
body.support-page .site-shell,
body.support-page main,
body.support-page .support-options {
  background: var(--aira-page-gradient) !important;
}
body.support-page .site-shell,
body.support-page main,
body.support-page .support-options {
  background-attachment: fixed !important;
}

/* Keep urgent support prominent, while giving it a more considered footprint. */
body.support-page #urgent-help {
  width: min(960px, calc(100% - 48px));
  margin: 28px auto 20px;
  padding: clamp(26px, 3.5vw, 42px) clamp(24px, 5vw, 54px);
  border-radius: 22px;
}
body.support-page #urgent-help h2 { font-size: clamp(28px, 3.2vw, 42px); }
body.support-page #urgent-help .safety-links { margin-top: 20px; }

/* The next-step cards borrow the home page's blue, green, yellow and cream notes. */
body.support-page #next-steps .support-grid article {
  border: 1px solid rgba(36, 60, 44, .16);
  background: #a9b6c4 !important;
  color: #243c2c;
}
body.support-page #next-steps .support-grid article:nth-child(2) {
  background: #244638 !important;
  color: #fff8e7;
}
body.support-page #next-steps .support-grid article:nth-child(2) p { color: #fff8e7 !important; }
body.support-page #next-steps .support-grid article:nth-child(2) .text-link,
body.support-page #next-steps .support-grid article:nth-child(2) .text-link span {
  color: #244638 !important;
  font-weight: 700;
}
body.support-page #next-steps .support-grid article:nth-child(3) { background: #e9d985 !important; }
body.support-page #next-steps .support-grid article:nth-child(4) { background: #fff6df !important; }
body.support-page #next-steps .support-grid article:not(:nth-child(2)) p { color: #38554a; }

/* Keep the home entry points compact on handheld screens without compromising tap size. */
@media (max-width: 600px) {
  #home-page .hero .button-row {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
  }
  #home-page .hero .button-row .button {
    width: auto;
    min-height: 44px;
    padding: 11px 16px;
    font-size: 12px;
  }
  #home-page .hero-visual .note-top {
    top: 14px;
    left: 14px;
    max-width: calc(100% - 28px);
  }
}