/* ADHD Direct landing - design tokens v2 (2026-06-12)
   Refactor brief:
   - Brand palette pulled from ADHD Direct's rainbow logo (purple A, coral D-stroke, sage H-stroke)
   - Stronger ink contrast vs the previous washed-out grey
   - Saturated trust accents for badges, ticks, "Best value" pills
   - Alternating section surfaces (cream / white / soft purple-tint) for rhythm
   - Calmer, but more confident */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Sora:wght@400;500;600;700&display=swap');

:root {
  /* === Brand palette === */
  --primary:        #4A3E6E;          /* deeper, more saturated purple - matches logo A */
  --primary-deep:   #2F2548;          /* for hover / dark elevation */
  --primary-tint:   #EFE8F1;          /* soft purple wash for alternating sections */

  --accent-coral:   #E07A8A;          /* from logo D horizontal stroke - badges, "Best value", warmth */
  --accent-sage:    #7BA86D;          /* from logo H stroke - ticks, "trust", success */
  --accent-yellow:  #EDD15C;          /* from logo H - subtle highlights only */
  --accent-orange:  #F09E47;          /* from logo D bowl - functional accents */
  --accent-blue:    #94BAD8;          /* from logo D inner - calm, "trust", info accents */

  /* === Surfaces === */
  --bg:             #FBF5ED;          /* warm cream - slightly warmer than v1 */
  --surface:        #FFFFFF;          /* white cards */
  --surface-alt:    #EFE8F1;          /* purple-tint band */

  /* === Ink === */
  --ink:            #2B2238;          /* MUCH stronger than v1 #656562 - primary body color */
  --ink-muted:      #5B4F6E;          /* captions, dt labels, secondary text */
  --ink-soft:       #8A7E9E;          /* tertiary - footnotes, meta */

  /* === Functional === */
  --divider:        rgba(74, 62, 110, 0.12);
  --dark-divider:   rgba(255, 255, 255, 0.10);
  --error:          #D63B4A;          /* for NHS long-wait emphasis */
  --warn:           #E0941A;

  /* === Type === */
  --font-body:      'Lato', system-ui, sans-serif;
  --font-display:   'Sora', system-ui, sans-serif;

  /* === Shape === */
  --radius-sm:      6px;
  --radius-md:      16px;             /* tightened from 20 for crisper feel */
  --radius-lg:      24px;
  --radius-btn:     999px;            /* full pill */
  --radius-pill:    999px;

  /* === Spacing === */
  --section-y:      96px;             /* tightened from 120 for pace */
  --section-y-sm:   56px;
  --container-max:  1200px;           /* slightly tightened from 1296 */

  /* === Motion === */
  --transition:     all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body {
  /* `overflow-x: clip` prevents horizontal scroll WITHOUT making the element a
     scroll container - which means iOS Safari's window.scrollY keeps working
     (unlike `overflow-x: hidden`, which silently breaks it). */
  overflow-x: clip;
  max-width: 100%;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);              /* iOS Safari paints overscroll / safe-area from html bg */
}
/* Defense-in-depth: anything trying to extend wider than its parent is reined in. */
img, video, iframe, table { max-width: 100%; }

body {
  font-family: var(--font-body);
  font-size: 22px;                    /* tuned 2026-06-16 (ADHD-friendly larger body) */
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  color: var(--primary);
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

/* Tuned 2026-06-16 via preview-mobile.html. H1 = H2 so every section heading
   matches the hero; sizes scale on tablet (<900px) and phone (<600px). */
h1, h2 { font-size: 75px; }
h3     { font-size: 28px; line-height: 1.2; }
h4     { font-size: 22px; line-height: 1.2; }
h5     { font-size: 18px; line-height: 1.3; }
h6     { font-size: 16px; line-height: 1.3; }

@media (max-width: 900px) {
  h1, h2 { font-size: 54px; }
}
@media (max-width: 600px) {
  h1, h2 { font-size: 41px; }
  h3     { font-size: 23px; }
}

p { margin: 0 0 1.25em; line-height: 1.6; color: var(--ink); }
p, li, dd { font-size: inherit; }

/* Card body - testimonials, pricing, symptom, comparison cards.
   Sits slightly smaller than the 22px main body so cards read as denser support.
   Drops a touch further on mobile so each card stays scannable. */
.testimonial-card,
.testimonial-card blockquote,
.symptom-card p,
.pricing-card li,
.comparison-card li,
.comparison-card p,
.featured-quote blockquote { font-size: 17px; }
@media (max-width: 600px) {
  .testimonial-card,
  .testimonial-card blockquote,
  .symptom-card p,
  .pricing-card li,
  .comparison-card li,
  .comparison-card p,
  .featured-quote blockquote { font-size: 16px; }
}

/* Small / meta - eyebrows, captions, badges, footer fine print. */
.eyebrow,
.wait-tag,
.best-badge,
.featured-quote__meta,
.testimonial-card__meta,
.hero__caption-text,
.hero__availability,
.g-trust-strip__text span,
[class*="__meta"],
[class*="__caption"] { font-size: 16px; }

a { color: inherit; text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-coral); }

img { max-width: 100%; display: block; height: auto; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-y) 0; }

/* Alternating section surfaces - visible-but-calming pastels pulled from the
   ADHD Direct rainbow logo. Saturation bumped from v1 so adjacent sections feel
   distinct (per Jamie 2026-06-12). Still within the ADHD-friendly pastel range:
   research shows soft colours aid concentration; saturated colours in large
   areas can increase agitation - these sit between those two zones. */
.section--white      { background: var(--surface); }                        /* #FFFFFF */
.section--tint       { background: #E8DDEB; }                               /* lavender purple */
.section--coral-tint { background: #F8DCDC; }                               /* warm rose */
.section--sage-tint  { background: #DEE9D0; }                               /* soft sage green */
.section--blue-tint  { background: #DCE6F1; }                               /* calm sky blue */
.section--yellow-tint{ background: #F3EAC4; }                               /* warm pale yellow */

@media (max-width: 768px) {
  body { font-size: 16px; }
  .section { padding: var(--section-y-sm) 0; }
  .container { padding: 0 20px; }
}

/* === Eyebrow / sub-title === */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 7px 16px 7px 26px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
}
.eyebrow::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--accent-coral);    /* coral dot - pulls eye */
  border-radius: 50%;
}
.eyebrow--light {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
.eyebrow--light::before { background: var(--accent-coral); }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 18px;                    /* tuned 2026-06-16 */
  font-weight: 600;
  padding: 16px 24px;
  border-radius: var(--radius-btn);
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--primary);
  cursor: pointer;
  transition: var(--transition);
  text-transform: capitalize;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: #fff;
  transform: translateY(-1px);
}
.btn--border {
  background: transparent;
  color: var(--primary);
}
.btn--border:hover {
  background: var(--primary);
  color: #fff;
}
.btn--light {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}
.btn--light:hover {
  background: var(--primary-tint);
  border-color: var(--primary-tint);
  color: var(--primary);
}
.btn--coral {
  background: var(--accent-coral);
  border-color: var(--accent-coral);
  color: #fff;
}
.btn--coral:hover {
  background: #C9596B;
  border-color: #C9596B;
}
.btn .btn__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  border-radius: 50%;
  font-size: 11px;
}
.btn--border .btn__icon,
.btn--light .btn__icon {
  background: var(--primary-tint);
  color: var(--primary);
}

/* === Card surface === */
.card-surface {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 28px;
  border: 1px solid var(--divider);    /* subtle definition vs flat */
}

/* === Round icon chip === */
.icon-chip {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-tint);
  border-radius: 50%;
  color: var(--primary);
  flex-shrink: 0;
}
.icon-chip--coral  { background: rgba(224, 122, 138, 0.15); color: var(--accent-coral); }
.icon-chip--sage   { background: rgba(123, 168, 109, 0.15); color: var(--accent-sage); }
.icon-chip--orange { background: rgba(240, 158, 71, 0.18);  color: #C97B1F; }
.icon-chip--blue   { background: rgba(148, 186, 216, 0.22); color: #4A7BA7; }
.icon-chip--yellow { background: rgba(237, 209, 92, 0.25);  color: #8F6F12; }
.icon-chip--dark   { background: var(--primary); color: #fff; }

/* === Trust tick (sage check, used in lists / pricing benefits) === */
.tick-sage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(123, 168, 109, 0.18);
  color: var(--accent-sage);
  border-radius: 50%;
  flex-shrink: 0;
  font-weight: 700;
}

/* === Wait time tag (used in comparison) === */
.wait-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}
.wait-tag--bad   { background: rgba(214, 59, 74, 0.10); color: var(--error); }
.wait-tag--ok    { background: var(--primary-tint); color: var(--primary); }
.wait-tag--good  { background: rgba(123, 168, 109, 0.18); color: var(--accent-sage); }

/* === Best value badge === */
.best-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-coral);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* === Mobile-specific tweaks === */
@media (max-width: 480px) {
  h1 { font-size: 32px; line-height: 1.1; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  .section { padding: 48px 0; }
  .card-surface { padding: 20px; }
  .btn { padding: 15px 22px; font-size: 16px; }
}