/* =========================================================================
   WhatHypno - theme.css (deployed to public/assets/css/theme.css, loaded
   AFTER main.css; overrides the engine's design tokens only).

   Palette source: Rick's official WHAT palette sheet, 28 Sep 2026.
   WhatHypno is "mineral teal / sea glass / pale mineral":
     primary #147B86, accent (sea glass) #CBE1DF, pale #F2F7F6,
     filled-button teal #116D77 (the sheet's "search" colour),
     shared deep ink #172B36.
   This replaces the 22 Sep clear cyan / mist board (#007E99, #B6E8EF,
   #F0F8F9) and the family ivory #FAF8F4, which the new sheet drops.

   How the anchors are used. The engine's token names are frozen (--green
   is "the primary", --brass is "the accent"). main.css uses --green for
   every filled button AND about fifty small-text roles, some on tinted
   bands, so --green carries the filled-button teal #116D77, which passes
   AA everywhere it lands. The exact primary #147B86 is --brand-primary and
   goes where it is a graphic or large text: the hero accent word, rules,
   the header's current-page underline, the profile-photo ring and the
   focus ring. Every other tint and neutral is a mix of the sheet's own
   colours, named beside it.

   Contrast, computed 28 Sep 2026 (WCAG 2.x):
     ink on pale 13.5:1, on white 14.6:1, on the tint band 12.1:1;
     #116D77 on pale 5.6:1, on white 6.0:1, on the tint band 5.0:1;
     white on #116D77 6.0:1; #147B86 on pale 4.6:1;
     ink-mute on pale 5.3:1, on the tint band 4.75:1;
     on the deep ink: white 14.6:1, sea glass 10.7:1, soft 9.6:1, mute 6.0:1.
   Sea glass itself is never used for text on a light surface.

   The header is LIGHT (pale ground, ink navigation) because Rick's lockup is
   deep ink "what" with a teal "hypno", used exactly as supplied. The footer
   is light too (the WHAT master footer, .site-footer-light in main.css,
   Rick 29 Sep 2026) and carries the same lockup.

   Typography: Figtree variable for both roles (every what___ brand).
   ========================================================================= */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-italic-var.woff2') format('woff2');
}

:root {
  /* Neutrals: the shared deep ink, the brand's pale, and shades mixed
     between them */
  --ink: #172B36;                    /* shared deep ink, exact */
  --ink-soft: #43545C;               /* ink 80% + pale */
  --ink-mute: #596870;               /* ink 70% + pale: 5.3:1 on pale, 4.75:1 on the tint band */
  --paper: #F2F7F6;                  /* pale mineral, exact */
  --paper-2: #F7F4EF;                /* tint bands: warm ivory (Rick, 13 Oct 2026: a second colour so the site is not all green); ink 13.4:1, muted ink 5.3:1 */
  --accent-warm: #FFC895;            /* Rick's second colour, 13 Oct 2026: buttons, eyebrows and numbers on the dark band; ink text on it 9.7:1 */
  --surface: #FFFFFF;
  --filter-card: #FFFFFF;
  --line: #CBE1DF;                   /* sea glass, exact */
  --line-strong: #B9CFCE;            /* sea glass 90% + ink */

  /* Brand anchors */
  --brand-primary: #147B86;          /* mineral teal, exact (graphics, large text) */
  --green: #116D77;                  /* filled-button teal, exact; also teal text */
  --green-deep: #172B36;             /* deep ink: dark bands, hovers */
  --green-wash: #E6F0EF;             /* pale 70% + sea glass */
  --brass: #CBE1DF;                  /* sea glass, exact (decorative on light) */
  --brass-on-dark: var(--accent-warm); /* Rick, 13 Oct 2026: apricot on the dark band (was #81CBC5); 9.7:1 on deep ink */
  --sea-glass-on-dark: #81CBC5;      /* the speech-bubble outlines on the dark band stay sea glass; 9.2:1 on deep ink */
  --brass-deep: #116D77;             /* teal for pills, labels and glyphs */
  --brass-soft: #DEECEA;             /* pale 50% + sea glass */
  /* The profile's Approaches tags (22 Oct 2026): the warm ivory tint with an apricot keyline, because --brass-soft is the same sea glass as the Areas tags' wash. */
  --profile-tag-alt-bg: var(--paper-2);
  --profile-tag-alt-border: var(--accent-warm);

  /* Verified and done states in the family green, exactly the joining
     ticks' pair (--tick-green on --tick-green-wash, values and contrast in
     main.css): Rick's decision 9, 29 Sep 2026, the same on every WHAT
     brand, so a checked mark means one thing on every WHAT site and stays
     apart from the brand teal. */
  --verified: var(--tick-green);
  --verified-wash: var(--tick-green-wash);
  --tone-verified-ink: var(--tick-green);
  /* The Featured disclosure over results takes the brand's own notice
     colours, never the verified green: it describes a paid placement. */
  --results-notice-wash: var(--green-wash);
  --results-notice-rule: var(--notice-border);
  --tone-verified-border: #80A28C;
  --tone-success-ink: #2A513A;
  --tone-success-border: #80A28C;
  --tone-neutral-border: #94C2C4;    /* sea glass 70% + primary */
  --tone-warn-ink: #116D77;          /* accent labels on the sea-glass tint */

  /* Text on the deep ink ground */
  --on-green: #FFFFFF;
  --on-green-soft: #C0D6D5;          /* sea glass 94% + ink: 9.6:1 on ink */
  --on-green-mute: #95AAAC;          /* sea glass 70% + ink: 6.0:1 on ink */
  --on-green-hairline: rgb(242 247 246 / 0.16);
  --on-green-hairline-strong: rgb(242 247 246 / 0.2);
  --off-white: #FFFFFF;

  /* Light header */
  --header-bg: #FFFFFF;
  --header-ink: var(--ink);
  --header-ink-soft: var(--ink-soft);
  --header-accent: var(--brand-primary);
  --header-cta-bg: var(--green);
  --header-cta-ink: #FFFFFF;

  --font-serif: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Details */
  --focus: #147B86;                  /* the primary, in place of the engine's blue */
  --photo-ring: var(--brand-primary); /* profile-photo ring (main.css token), not MLD's steel blue */
  --link-underline: rgb(17 109 119 / 0.5);
  --btn-secondary-border: rgb(17 109 119 / 0.5);
  --search-keyline: #4B9AA1;         /* sea glass 30% + primary: the search field's only edge, 3.3:1 on white, 3.0:1 on pale */
  --filter-ink: #596870;
  --cta-ring: rgb(20 123 134 / 0.3);
  --cta-ring-soft: rgb(20 123 134 / 0.16);
  --cta-outline: rgb(242 247 246 / 0.5);
  --cta-outline-wash: rgb(242 247 246 / 0.1);
  --notice-border: #94C2C4;
  --shadow-1: 0 1px 2px rgb(23 43 54 / 0.07), 0 1px 8px rgb(23 43 54 / 0.05);
  --shadow-2: 0 2px 8px rgb(23 43 54 / 0.09), 0 12px 32px rgb(23 43 54 / 0.08);
}

/* The light header needs an ink hairline, not the on-dark one. */
.site-header { border-bottom-color: var(--line); }
.site-header.is-scrolled { box-shadow: 0 2px 10px rgb(23 43 54 / 0.12); }
.header-cta:hover { background: var(--ink); color: #FFFFFF; }
/* main.css turns a hovered or current header link off-white, which assumes a
   dark header; on this light header it would vanish. */
.nav-item > a:hover,
.nav-sub-toggle:hover,
.nav-item.is-active > a,
.nav-item.is-active > .nav-sub-toggle,
.header-login:hover,
.header-login[aria-current="page"] { color: var(--ink); }
.site-header-utility { border-left-color: var(--line); }
.header-login { white-space: nowrap; }

/* The cookie bar's button: apricot with ink text (9.7:1) on the deep ink.
   The dark bands' primary button is the brand colour with white text since
   31 Oct 2026 (Rick; main.css, WHAT POLISH). */
.cookie-bar .btn-primary { background: var(--accent-warm); border-color: var(--accent-warm); color: var(--ink); }
.cookie-bar .btn-primary:hover { background: #FFDEBF; border-color: #FFDEBF; color: var(--ink); }
.cta-band .btn-secondary,
.section-green .btn-secondary { color: var(--accent-warm); border-color: var(--accent-warm); }
.cta-band .btn-secondary:hover,
.section-green .btn-secondary:hover { background: rgb(255 200 149 / 0.12); color: #FFDEBF; border-color: #FFDEBF; }
/* Numbers in their speech bubbles on the dark band: apricot figures in
   sea-glass outlines (Rick's screenshot, 13 Oct 2026). */
.section-green .bubble-frame { --bubble-line: var(--sea-glass-on-dark); --bubble-ink: var(--accent-warm); }

/* Engine components whose greens are authored as literals in main.css. */
.notice-bar { background: var(--green-deep); }
.cookie-bar { background: var(--green-deep); }
.sample-cta { background: var(--green-deep); }

/* Routing cards and founding chips carry a teal top rule; sea glass alone
   is too pale to read as a rule on white. */
.editorial-item { border-top-color: #94C2C4; }
.founding-invite-facts li { border-top-color: var(--brand-primary); }

/* Homepage details, the same treatments MLD's theme gives its homepage.
   (The hero's highlighted word moved to main.css on 29 Sep 2026, so every
   WHAT brand has it.) */
.page-home .trust-strip-title-center { text-align: center; }
.page-home .trust-strip .text-center { margin-inline: auto; }

/* The header lockup's size is the WHAT master's (.wordmark-lockup-what in
   main.css, sized by height, 30 Sep 2026), the same on every WHAT brand. */

/* =========================================================================
   Visual review round 1 (23 Sep 2026, independent reviewer at 1920, 1280
   and 375). Brand-scoped fixes only.
   ========================================================================= */
/* The engine's wavy flourish ran through headings and body text in the dark
   panels (pre-launch notice, CTA band on a phone). WhatHypno leaves it out. */
:root { --flourish-image: none; }
/* The shared "shell" band is a stone beige authored for MLD; here it takes
   the pale teal wash, distinct from the page and from white. */
.section-shell { background: var(--green-wash); }
/* main.css paints MLD's #F7F6F0 behind the for-therapists hero. */
.page-for-therapists .hero { background: var(--paper); }
/* Numbered strips that open with a pill label get the full band spacing, so
   the gaps between sections are even (MLD's theme does the same on its home). */
.trust-strip:has(.trust-strip-pill) { padding-block: var(--space-8); }
.trust-strip:has(.trust-strip-pill) .trust-strip-pill,
.trust-strip:has(.trust-strip-pill) .trust-strip-title { text-align: center; }
/* A centred line that is also measure-capped must centre as a block. */
p.text-center { margin-inline: auto; }
/* No orphaned last words in short display lines. */
.search-box label, .cta-band h2, .page-header h1 { text-wrap: balance; }
/* One offer card: centre the whole step on the join page, at the step bar's
   width so their edges line up (WhatCounsellor's review, 28 Sep 2026). */
.join-fieldset:has(.join-two-boxes > :only-child) { max-width: var(--container-narrow); margin-inline: auto; }
.join-two-boxes:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
/* The badge specimen sat small in a large dark box. */
.proof-visual-badge { padding: var(--space-6) var(--space-5); }
.proof-visual-badge svg { width: min(340px, 100%); }

/* Visual review round 2 (minor items). */
/* The homepage question list reads as a list, not a stack of headings. */
.page-home .card-link-list .guide-link { font-size: 1.15rem; }
/* Long button labels fit one line on a phone. */
@media (max-width: 480px) {
  .cta-band .btn { padding-inline: 1rem; font-size: 0.95rem; }
}
.cta-band h2 { text-wrap: pretty; }

/* =========================================================================
   Brought across from WhatCounsellor's live review (28 Sep 2026, commit
   8d7a6ab), design only.
   ========================================================================= */
/* Tier box labels ("Three places per area"): only MLD's theme styled them,
   so elsewhere they read as stray body text. A small label: founding in
   sea glass with ink (10.7:1), standard in the teal wash with teal (5.2:1). */
.tier-box-flag {
  display: inline-block;
  background: var(--green-wash);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-stamp);
  margin: 0 0 var(--space-3);
}
.tier-box-founding .tier-box-flag { background: #E7C5AE; color: var(--ink); } /* Rick, 15 Oct 2026 */

/* The engine colours these small glyphs in the accent, which here is the
   pale sea glass (1.3:1 on pale). Use the teal (5.6:1). */
.index-num,
.welcome-step-num,
.checklist li::before,
.faq-item summary::after,
.filter-sheet summary::after,
.guide-link::after,
.error-code { color: var(--brass-deep); }

/* /pricing: the window notice spans the cards beneath it, the cards share
   one height, and when they sit side by side their tick lists line up
   whatever the heading text wraps to (subgrid rows shared by both cards). */
.pricing-tiers .notice { max-width: none; }
.pricing-tiers .join-two-boxes { align-items: stretch; }
@media (min-width: 800px) {
  .pricing-tiers .join-two-boxes { grid-template-rows: auto 1fr; }
  .pricing-tiers .join-two-boxes > .tier-box { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}

/* Phones. A for-therapists hero built on the two-column hero grid holds its
   single column to the page width (WhatCounsellor's grew to its sample
   card's width). Button labels keep to one line with a little less side
   padding. */
@media (max-width: 959px) {
  .page-for-therapists .hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .btn { padding-inline: 1.1rem; }
}

/* Legal pages: the effective-date line (and the rule beneath it) was held
   narrower than the clauses under it, so the rule stopped short. */
.prose > .prose-meta { max-width: none; }

/* Band colours Rick set, 13 Oct 2026 (home, /find-a-hypnotherapist and
   /check). */
.section.home-registered,
.section.home-check,
.section.home-join { background: #FFFFFF; }
.section.home-reasons { background: #F7F4EF; }
.section.check-ask { background: #FFFFFF; }

/* Practitioners, pricing, verification standard, About and contact bands
   (Rick, 13 Oct 2026). #F2F7F6 is the page's pale mineral, #F7F4EF the warm
   ivory, #E3E9E9 a deeper mineral grey. */
.page-for-therapists .hero,
.section.practitioners-fit,
.section.practitioners-founding,
.section.pricing-tiers,
.section.verification-routes,
.section.verification-current,
.section.about-story,
.page-contact .section { background: #F7F4EF; }
.section.practitioners-badge,
.section.practitioners-includes,
.section.practitioners-check,
.section.pricing-includes,
.section.verification-meaning { background: #F2F7F6; }
.section.about-stand { background: #E3E9E9; }
.section.practitioners-questions,
.section.practitioners-join,
.section.pricing-payment,
.section.pricing-join { background: #FFFFFF; }
.section.verification-concerns,
.section.verification-closing,
.section.about-free,
.section.about-find { background: #FFFFFF; }
.practitioners-fit .preview-frame { background: #FFFFFF; }

/* Profile page background warm ivory, not pale mineral (Rick, 14 Oct 2026).
   The section menu band takes the pale mineral instead, so the two
   neighbouring bands never share a colour (Rick's 25 Aug 2026 rule). */
body.page-profile { --paper: #F7F4EF; background: #F7F4EF; }
body.page-profile .profile-nav { background: #F1EDE5; }

/* Join pages warm ivory too (Rick, 14 Oct 2026). Only the page itself: --paper
   stays pale mineral, so the light footer (which reads it) still differs from
   the page above it. The plan cards are white (.choice-card) and the summary
   row above the button, which took the tint band colour (the same #F7F4EF),
   steps one shade deeper, so nothing on the page shares the page's colour. */
body.page-join { background: #F7F4EF; }
body.page-join .join-selection-summary-what { background: #F1EDE5; }

/* Application steps 1 to 7 warm ivory too (Rick, 15 Oct 2026), the same way
   as the join pages: the page and its section only, --paper (and so the
   footer) stays pale mineral; the step cards stay on --surface. */
body.page-onboarding,
body.page-onboarding .section { background: #F7F4EF; }