/* iHeal Infinity brand palette, sampled from the supplied logo.
   Keep this stylesheet after styles.css. These tokens can be reused in WordPress. */
:root {
  --brand-teal: #006b87;
  --brand-teal-dark: #00546b;
  --brand-purple: #68297a;
  --brand-purple-dark: #512060;
  --brand-teal-soft: #edf7fa;
  --brand-purple-soft: #f5eef8;
  --brand-gradient: linear-gradient(110deg, var(--brand-teal), var(--brand-purple));
  --ink: #233845;
  --muted: #5d6877;
  --line: #dce6e9;
  --paper: #ffffff;
  --bg: #fbfcfd;
  --purple: var(--brand-purple);
  --purple-dark: var(--brand-purple-dark);
  --soft: var(--brand-purple-soft);
  --serif: 'Quicksand', 'Trebuchet MS', sans-serif;
  --sans: 'Nunito Sans', 'Trebuchet MS', system-ui, sans-serif;
}

/* Rounded geometric headings echo the lettering in the supplied logo. */
h1, h2, .service-card h3, .session-copy h3,
.interpretation-grid .panel h3, .angel-message h3, .crystal-card h3,
.match-result h3, .result-copy h3, .profile-complete h3,
.horizontal-card h3, .reading-card strong, .demo-slide h3,
.demo-wordmark, .testimonial-card h3, .number-result strong,
.breathing-circle span {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.025em;
}
.page-hero h1, .home-hero h1, .landing-heading h1 { font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.page-hero-home h1 { font-size: clamp(2.3rem, 3.4vw, 3.35rem); }
.demo-wordmark { font-weight: 700; }
.section-heading h2, .panel h2, .newsletter-inner h2,
.demo-section h2, .testimonials-section h2, .crystal-feature h2,
.intro-banner-copy h2 { font-weight: 600; }
.btn, .profile-button, .site-header .nav-link { font-weight: 600; }

/* Preserve the subtle Indian lattice in the two brand colors. */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, rgb(0 107 135 / .10) 1px, transparent 1.6px),
    repeating-linear-gradient(45deg, transparent 0 47px, rgb(0 107 135 / .045) 47px 48px, transparent 48px 96px),
    repeating-linear-gradient(-45deg, transparent 0 47px, rgb(104 41 122 / .045) 47px 48px, transparent 48px 96px);
}
.announcement { background: var(--brand-gradient); color: #fff; }
.announcement span:last-child { color: #fff; }
.site-header { background: #fff; padding-top: 10px; padding-bottom: 10px; }
.site-header .brand-logo,
.full-footer .brand-logo {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 156px;
  aspect-ratio: 2.18;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
}
/* Show the transparent PNG at its natural proportions, framing its transparent margin. */
.brand-logo img {
  position: absolute;
  width: 106.85%;
  max-width: none;
  height: auto;
  left: -3.1%;
  top: -20.3%;
}
.full-footer .brand-logo { width: 178px; background: #fff; }
.logo-mark, .logo-dot { color: var(--brand-teal); }
.topbar { background: rgb(251 252 253 / .85); }
.topbar .breadcrumb, .today-date { color: var(--muted); }
.site-header .profile-button {
  background: var(--brand-teal-soft);
  border-color: #bedee6;
  color: var(--brand-teal-dark);
}
.profile-button span { color: var(--brand-purple); }
.nav-link, .preview-tag { color: var(--muted); }
.nav-link.active { background: var(--brand-teal-soft); color: var(--brand-teal-dark); }
.nav-link:hover { background: var(--brand-purple-soft); color: var(--brand-purple); }

/* Actions use solid colors for reliable contrast, with a clear hover state. */
.btn { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }
.btn:hover { background: var(--brand-purple-dark); border-color: var(--brand-purple-dark); }
.btn.dark, .btn.mint, .hero-primary, .banner-button {
  background: var(--brand-teal);
  border-color: var(--brand-teal);
  color: #fff;
}
.btn.dark:hover, .btn.mint:hover, .hero-primary:hover, .banner-button:hover {
  background: var(--brand-teal-dark);
  border-color: var(--brand-teal-dark);
}
.btn.secondary { background: #fff; border-color: #cbdde3; color: var(--brand-teal-dark); }
.btn.secondary:hover { background: var(--brand-teal-soft); border-color: var(--brand-teal); }
.hero-secondary, .btn.hero-outline { background: transparent; color: #fff; border-color: #bcdce3; }
.hero-secondary:hover, .btn.hero-outline:hover { background: rgb(255 255 255 / .14); border-color: #fff; }
.text-button { color: var(--brand-purple); }
.text-button:hover { color: var(--brand-purple-dark); text-decoration: underline; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
.form-field input:focus-visible { outline-color: var(--brand-teal); }
.page-hero :focus-visible, .full-footer :focus-visible { outline-color: #b7edf4; }

/* Original teal and purple artwork; a light scrim supports the white copy. */
.page-hero, .intro-banner { background: var(--brand-teal); }
.page-hero-image { filter: none; }
.page-hero:after {
  background: linear-gradient(90deg, rgb(0 44 58 / .38), rgb(0 44 58 / .18) 50%, transparent 73%);
}
.page-hero .eyebrow, .home-hero .eyebrow, .intro-banner-copy .eyebrow { color: #b5ecf1; }
.page-hero p, .home-hero p, .intro-banner-copy p { color: #edf2f7; }
.page-hero .hero-primary { border-color: #5fb0c2; }
.page-hero h1, .intro-banner h2 { color: #fff; }
.hero-caption { color: #e4d9ed; }
.landing-heading .eyebrow, .eyebrow { color: var(--brand-teal-dark); }
.landing-heading p { color: var(--muted); }
.heading-flourish { color: var(--brand-purple); }
.heading-flourish:before, .heading-flourish:after { background: #c5b0d1; }
.section-heading h2, .journey-band h2 { color: var(--ink); }

/* Forms and content surfaces. */
.panel, .service-card, .session-card, .crystal-card, .testimonial-card { border-color: var(--line); }
.landing-chart .birth-panel {
  border-color: var(--line);
  border-top-color: var(--brand-teal);
  box-shadow: 0 7px 26px rgb(0 80 103 / .035);
}
.form-field label { color: var(--ink); }
.form-field input, .form-field select, .landing-chart .form-field input, .newsletter-fields input {
  border-color: #ccdce2;
  background: #fff;
}
.unknown-time input, .audio-choice input, .newsletter-consent input, .goal-choice input { accent-color: var(--brand-teal); }
.chart-caption, .demo-kind, .testimonials-note, .newsletter-preview { color: var(--muted); }
.profile-summary, .birth-note { background: var(--brand-teal-soft); }
.birth-note { color: var(--brand-teal-dark); }
.avatar { background: var(--brand-purple-soft); color: var(--brand-purple); }
.service-card { box-shadow: 0 3px 15px rgb(0 80 103 / .025); }
.service-card:hover { border-color: var(--brand-teal); }
.service-card .icon-box, .icon-box { background: var(--brand-teal-soft); color: var(--brand-teal); }
.service-card:nth-child(even) .icon-box { background: var(--brand-purple-soft); color: var(--brand-purple); }
.card-symbol { background: var(--brand-purple-soft); border-color: #d9c7e2; color: var(--brand-purple); }
.round-symbol { background: var(--brand-teal-soft); border-color: #c2e1e8; color: var(--brand-teal); }
.daily-card { background: linear-gradient(125deg, #075368, #49245e); }
.daily-card p, .daily-card .eyebrow, .daily-card .accent-symbol { color: #e2edf3; }
.light-link { border-bottom-color: #aacfd9; }
.sample-label { color: #e2d7ec; }
.crystal-feature { background: var(--brand-purple-dark); }
.crystal-feature img { object-position: 85% center; }
.crystal-feature:after { background: linear-gradient(0deg, rgb(46 19 62 / .94), rgb(0 107 135 / .06) 78%); }
.crystal-feature-copy .eyebrow { color: #d4eff3; }
.birth-teaser, .journey-band { background: linear-gradient(110deg, #eaf7fa, #f1e8f6); }
.journey-band p { color: var(--muted); }
.reading-card { background: var(--brand-purple-soft); border-color: #c6a8d4; box-shadow: 0 5px 18px rgb(104 41 122 / .06); }
.reading-card:before { border-color: #dcc9e5; }
.reading-card.revealed { background: var(--brand-teal-soft); border-color: #92c5d3; color: var(--brand-teal-dark); }
.reading-card.revealed:before { border-color: #bfdce4; }
.session-visual, .session-visual.rose { background: var(--brand-purple-soft); color: var(--brand-purple); }
.session-visual.blue, .session-visual.gold { background: var(--brand-teal-soft); color: var(--brand-teal); }
.member-notice p, .tag { color: var(--muted); }
.crystal-match { background: var(--brand-teal-soft); border-color: #bfdee6; }
.crystal-match p { color: var(--muted); }
.breathing-circle { background: var(--brand-teal-soft); border-color: #a1cad6; color: var(--brand-teal-dark); }
.recording-placeholder, .toast { background: #263b4f; }
.recording-placeholder, .recording-placeholder p { color: #e7ddef; }

/* Introduction, community, newsletter and footer continue the same palette. */
.demo-section { background: linear-gradient(125deg, #f0f9fb, #f7f0fa); border-color: var(--line); }
.demo-section>.eyebrow, .testimonials-section .eyebrow, .newsletter-inner .eyebrow { color: var(--brand-teal-dark); }
.demo-poster { background: var(--brand-teal); box-shadow: 0 12px 28px rgb(0 77 99 / .09); }
.demo-poster>img { filter: none; }
.demo-overlay { background: rgb(3 35 48 / .2); }
.demo-play { color: var(--brand-teal); }
.demo-subtitle, .demo-caption { color: #fff; }
.testimonials-section { background: linear-gradient(120deg, #eaf7fa, #f4edf8); }
.quote-symbol { color: var(--brand-purple); }
.testimonial-avatar { background: var(--brand-teal-soft); color: var(--brand-teal); }
.testimonial-card { box-shadow: 0 6px 18px rgb(0 77 99 / .025); }
.newsletter-section { background: linear-gradient(110deg, #eaf7fa, #f2eaf7); border-color: #d1e3e9; }
.newsletter-inner>div>p, .newsletter-inner form .newsletter-consent { color: var(--muted); }
#newsletter-status { color: var(--brand-teal-dark); }
.full-footer { background: linear-gradient(115deg, #103d4c, #382044); color: #e0e9ed; }
.footer-about>p, .footer-top nav a, .footer-start p, .footer-policy { color: #e0e9ed; }
.footer-indian-note, .footer-all-services { color: #b7e6ed; }
.footer-start .btn.secondary { background: #eff9fb; border-color: #d8edf2; color: var(--brand-teal-dark); }
.footer-start .btn.secondary:hover { background: #fff; }
.footer-bottom { color: #c9d6df; border-top-color: rgb(255 255 255 / .2); }

@media (max-width: 700px) {
  body {
    background-image:
      radial-gradient(circle, rgb(0 107 135 / .08) .8px, transparent 1.4px),
      repeating-linear-gradient(45deg, transparent 0 36px, rgb(0 107 135 / .04) 36px 37px, transparent 37px 74px),
      repeating-linear-gradient(-45deg, transparent 0 36px, rgb(104 41 122 / .04) 36px 37px, transparent 37px 74px);
  }
  .page-hero-home h1 { font-size: 2.3rem; }
  .site-header { gap: 12px; }
  .site-header .brand-logo { width: 126px; }
  .page-hero:after {
    background: linear-gradient(100deg, rgb(0 44 58 / .73), rgb(45 16 59 / .52));
  }
  .intro-banner:after { background: linear-gradient(90deg, rgb(4 46 59 / .92), rgb(74 22 89 / .50)); }
}
@media print { body { background: #fff; } }