/* ==========================================================================
   kate-wand.com — Brand Kit V3 (ink + teal) site layer
   The kit: claude.ai/artifact/7dYTbTCBB4pzvRNMiZ1NuG (tokens.json, README)
   Source tokens: vault "KW Vocal Coach/Brand Assets/Brand Kit V3 2026-11/web/kate-wand-v3.css"

   Linked LAST in every page's <head> (scripts/apply-brand-v3.py), after the
   page's own inline <style>, so equal-specificity rules here win.

   1. Kit primitives and the two themes. Paper is the site's default ground
      (reading). Ink is declared on the bands that carry the brand: the nav,
      every hero, the closing CTA bands, the footer. [data-theme="ink"] and
      [data-theme="paper"] work anywhere for one-off sections.
   2. The bridge. Pages were written against their own tokens (--bg, --ink,
      --ink-2..5, --accent, --on-dark, --blue*, the legacy --color-* aliases).
      Each is re-pointed at a kit ROLE and re-declared on every theme scope,
      so the same page CSS reads correctly on Paper and on Ink.
   3. Components: nav (wordmark), hero bands (paint, grain), buttons (gold
      pill, hard shadow), links (teal), eyebrows, footer (lockup).
   4. Display type: Anton for the name, the heroes and section heads; the
      <em> inside a head is Kate's own line in Cormorant italic.

   Paint rules held here (kit README, "Colour" and "Texture"): text on paint
   is cream at 24px+ only, so every bloom sits off an edge or behind a photo,
   never behind running copy or the gold italic line. One bloom per screen.
   ========================================================================== */

/* ---------- 1. kit primitives (same in every theme) ---------- */
:root {
  --brand-ink: #16161D;
  --brand-cream: #FFF1E2;
  --brand-gold: #E9B341;
  --brand-gold-deep: #CB952A;
  --brand-gold-on-paper: #8F7028;
  --brand-teal: #1C8F8C;
  --brand-teal-light: #3FC2BC;
  --brand-teal-deep: #0E7C7A;

  --font-display: Anton, Impact, 'Arial Narrow', sans-serif;
  --font-sans: Inter, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', Garamond, Georgia, serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-0: 0; --radius-sm: 6px; --radius-md: 12px; --radius-pill: 999px;
  --focus-width: 2px;

  --kw-wordmark-dark: url('/assets/brand/kw-wordmark-for-dark.webp');
  --kw-wordmark-light: url('/assets/brand/kw-wordmark-for-light.webp');
  --kw-wash: url('/assets/brand/teal-paint-wash.webp');
  --kw-bloom: url('/assets/brand/teal-paint-bloom.webp');
  --kw-grain: url('/assets/brand/grain.svg');
}

/* Paper: the site default, and any [data-theme="paper"] section */
:root, [data-theme="paper"] {
  --name-kate: #16161D;
  --name-wand: #8F7028;
  --ground: #F6EFE4;
  --ground-raised: #FFFBF5;
  --ground-sunk: #EFE6D7;        /* site-only: the old --bg-deep, one step under paper */
  --line: #DDD3C4;
  --text: #16161D;
  --text-muted: #4A4852;
  --emphasis: #765A1A;
  --on-emphasis: #FFF1E2;        /* site-only: type on an emphasis fill (6.9:1) */
  --link: #0B5F5D;
  --action: #CB952A;
  --on-action: #16161D;
  --action-edge: #16161D;
  --paint: #1C8F8C;
  --paint-light: #3FC2BC;
  --paint-deep: #0E7C7A;
  --on-paint: #FFF1E2;
  --focus-ring: #0B5F5D;
  --shadow-type: none;
  --shadow-hard: 0 6px 0 rgba(22,22,29,0.20);
  --shadow-cutout: 10px 12px 0 rgba(22,22,29,0.18);
  --shadow-raised: 0 2px 0 rgba(22,22,29,0.08);
  color-scheme: light;
}
[data-theme="paper"] { color: var(--text); }

/* Ink: the brand bands. KEEP THIS LIST AND THE BRIDGE LIST BELOW IN STEP. */
[data-theme="ink"],
.kw-nav, .quiz-header, .kw-footer, .site-footer,
.kw-hero, .kw-hero-cta-bar, .kw-credibility-bar,
.kw-final-cta, section.final-cta, .final-cta-section, .kw-email-capture,
section.kw-article-hero, .kw-blog-hero,
.about-hero, .kw-review-hero, .onboard-hero, header.hero, .quiz-wrapper .lp-hero,
section.hero > .container > .hero-content:not(.hero-content--tail) {
  --name-kate: #FFF1E2;
  --name-wand: #E9B341;
  --ground: #16161D;
  --ground-raised: #20202A;
  --ground-sunk: #111117;
  --line: #2E2E3A;
  --text: #FFF1E2;
  --text-muted: #A9A6B0;
  --emphasis: #E9B341;
  --on-emphasis: #16161D;
  --link: #3FC2BC;
  --action: #CB952A;
  --on-action: #16161D;
  --action-edge: #FFF4E6;
  --paint: #1C8F8C;
  --paint-light: #3FC2BC;
  --paint-deep: #0E7C7A;
  --on-paint: #FFF1E2;
  --focus-ring: #3FC2BC;
  --shadow-type: 0 0.033em 0 rgba(0,0,0,0.45);
  --shadow-hard: 0 6px 0 rgba(0,0,0,0.45);
  --shadow-cutout: 10px 12px 0 rgba(0,0,0,0.45);
  --shadow-raised: 0 2px 0 rgba(0,0,0,0.35);
  color-scheme: dark;
  color: var(--text);
}

/* ---------- 2. the bridge: legacy page tokens -> kit roles ----------
   Declared on every scope that sets a theme, because a custom property that
   references another is resolved where it is DECLARED: declared once on
   :root, --bg would carry Paper into the ink bands. */
:root, [data-theme],
.kw-nav, .quiz-header, .kw-footer, .site-footer,
.kw-hero, .kw-hero-cta-bar, .kw-credibility-bar,
.kw-final-cta, section.final-cta, .final-cta-section, .kw-email-capture,
section.kw-article-hero, .kw-blog-hero,
.about-hero, .kw-review-hero, .onboard-hero, header.hero, .quiz-wrapper .lp-hero,
section.hero > .container > .hero-content:not(.hero-content--tail) {
  /* ground */
  --bg: var(--ground);
  --bg-deep: var(--ground-sunk);
  --paper: var(--ground);
  --surface-raised: var(--ground-raised);
  --surface-raised-2: color-mix(in srgb, var(--text) 4%, transparent);
  --surface-strong: color-mix(in srgb, var(--text) 7%, transparent);

  /* ink tiers: the kit has two text roles; the page's five map onto them,
     with tier 2 a touch softer than full text for long paragraphs */
  --ink: var(--text);
  --ink-2: color-mix(in srgb, var(--text) 88%, var(--ground));
  --ink-3: var(--text-muted);
  --ink-4: var(--text-muted);
  --ink-5: color-mix(in srgb, var(--text) 45%, var(--ground));

  /* type on photographs: never flips */
  --on-dark: var(--brand-cream);
  --on-dark-2: rgba(255,241,226,0.84);
  --on-dark-3: rgba(255,241,226,0.66);

  /* rules: hairlines only */
  --rule-faint: color-mix(in srgb, var(--line) 55%, var(--ground));
  --rule: var(--line);
  --rule-strong: color-mix(in srgb, var(--text) 24%, var(--ground));

  /* accent -> emphasis for type; buttons use --action directly (below) */
  --accent: var(--emphasis);
  --accent-warm: var(--action);
  --accent-hover: color-mix(in srgb, var(--emphasis) 80%, var(--text));
  --accent-ink: var(--on-emphasis);
  --accent-faint: color-mix(in srgb, var(--emphasis) 6%, transparent);
  --accent-line: color-mix(in srgb, var(--emphasis) 26%, transparent);
  --accent-glow: color-mix(in srgb, var(--emphasis) 30%, transparent);
  --star: var(--brand-gold-deep);
  --gold-on-dark: var(--brand-gold);

  /* the old "structural blue" was the ink itself */
  --blue: var(--brand-ink);
  --blue-deep: #0F0F15;
  --blue-lift: var(--text-muted);
  --blue-line: color-mix(in srgb, var(--text) 30%, transparent);

  /* depth: hard and offset, never blurred */
  --shadow-sm: var(--shadow-raised);
  --shadow-md: var(--shadow-raised);
  --shadow-lg: var(--shadow-hard);

  /* legacy --color-* aliases (the terracotta #C4846C retires here) */
  --color-bg: var(--ground);
  --color-bg-warm: var(--ground);
  --color-bg-dark: var(--ground);
  --color-bg-dark-warm: var(--ground);
  --color-surface: var(--ground-raised);
  --color-surface-hover: color-mix(in srgb, var(--text) 5%, var(--ground-raised));
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-text-light: var(--text);
  --color-text-light-muted: var(--text-muted);
  --color-accent: var(--emphasis);
  --color-accent-hover: color-mix(in srgb, var(--emphasis) 80%, var(--text));
  --color-accent-soft: var(--emphasis);
  --color-gold: var(--brand-gold-deep);
  --color-gold-bright: var(--brand-gold);
  --color-border: color-mix(in srgb, var(--line) 55%, var(--ground));
  --color-border-dark: var(--line);
  --color-divider: color-mix(in srgb, var(--emphasis) 26%, transparent);
}

/* ---------- 3. base ---------- */
body { background: var(--ground); color: var(--text); }

::selection { background: color-mix(in srgb, var(--brand-teal-light) 38%, transparent); color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .kw-btn:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* paper tooth: the kit's grain at grain-on-paper, multiplied */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: multiply;
  background-image: var(--kw-grain);
  background-size: 220px 220px;
}

/* ---------- 3a. nav: an ink bar with the wordmark ---------- */
.kw-nav,
.kw-nav.scrolled {
  background: rgba(22,22,29,0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
/* over the home page's photograph it starts clear and fills on scroll */
body:has(.kw-hero-bg) .kw-nav:not(.scrolled) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.kw-nav .kw-nav-logo, .kw-nav.scrolled .kw-nav-logo,
.kw-nav .kw-nav-brand, .kw-nav.scrolled .kw-nav-brand,
.quiz-header a {
  display: block;
  width: 136px;
  height: 30px;
  flex: none;
  background: var(--kw-wordmark-dark) left center / contain no-repeat;
  color: transparent !important;
  font-size: 0;
  line-height: 0;
  text-shadow: none !important;
  overflow: hidden;
}
.kw-nav .kw-nav-logo:hover, .kw-nav .kw-nav-brand:hover, .quiz-header a:hover {
  color: transparent !important;
  text-shadow: none !important;
  opacity: 0.88;
}
@media (max-width: 1024px) {
  .kw-nav .kw-nav-logo, .kw-nav.scrolled .kw-nav-logo,
  .kw-nav .kw-nav-brand, .kw-nav.scrolled .kw-nav-brand,
  .quiz-header a { width: 124px; height: 28px; }
}
/* the quiz's own header: same ink bar, the wordmark centred */
.quiz-header { background: var(--brand-ink); border-bottom: 1px solid var(--line); padding: 16px 24px; }
.quiz-header a { margin: 0 auto; background-position: center; }

.kw-nav .kw-nav-links a,
.kw-nav.scrolled .kw-nav-links a { color: rgba(255,241,226,0.80); }
.kw-nav .kw-nav-links a:hover,
.kw-nav.scrolled .kw-nav-links a:hover,
.kw-nav .kw-nav-links a:not(.kw-nav-cta):not(.kw-nav-assessment):hover { color: var(--brand-cream); }
.kw-nav-links a:not(.kw-nav-cta):not(.kw-nav-assessment)::after { background: var(--link); height: 2px; }

.kw-nav .kw-nav-cta,
.kw-nav.scrolled .kw-nav-cta {
  background: var(--action);
  color: var(--on-action) !important;
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 10px 20px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.45);
}
.kw-nav .kw-nav-cta:hover,
.kw-nav.scrolled .kw-nav-cta:hover {
  background: var(--brand-gold);
  color: var(--on-action) !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.45);
  transform: translateY(-1px);
}
.kw-nav .kw-nav-assessment,
.kw-nav.scrolled .kw-nav-assessment {
  color: var(--brand-cream) !important;
  background: transparent;
  border: 1.5px solid rgba(255,241,226,0.38);
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 8px 16px;
}
.kw-nav .kw-nav-assessment:hover,
.kw-nav.scrolled .kw-nav-assessment:hover {
  color: var(--brand-cream) !important;
  background: rgba(255,241,226,0.08);
  border-color: var(--brand-cream);
  box-shadow: none;
}
.kw-nav .kw-mobile-toggle span,
.kw-nav.scrolled .kw-mobile-toggle span { background: var(--brand-cream); }

@media (max-width: 1024px) {
  .kw-nav .kw-nav-links.open,
  .kw-nav.scrolled .kw-nav-links.open {
    background: var(--brand-ink);
    border-bottom: 1px solid var(--line);
  }
}

/* ---------- 3b. ink bands: ground, grain ---------- */
.kw-hero, .kw-hero-cta-bar, .kw-credibility-bar, .kw-final-cta, section.final-cta, .final-cta-section, .kw-email-capture,
section.kw-article-hero, .kw-blog-hero, .about-hero, .kw-review-hero, .onboard-hero, header.hero {
  background-color: var(--brand-ink);
}
.kw-hero:not(:has(.kw-hero-bg)), .kw-final-cta, section.final-cta, .final-cta-section, .kw-email-capture,
section.kw-article-hero, .kw-blog-hero, .kw-review-hero, .onboard-hero, header.hero {
  background-image: var(--kw-grain);
  background-size: 220px 220px;
  background-repeat: repeat;
  background-blend-mode: overlay;
}
/* the two bands under the home photo continue the hero: flat ink, no seam */
.kw-hero-cta-bar, .kw-credibility-bar { background-image: none; border-top: 0; border-bottom: 0; }
.kw-credibility-bar { border-top: 1px solid var(--line); }
.kw-email-capture { border-top: 1px solid var(--line); }
/* the 2026-05 blue "lit area" tint behind the quiz CTA retires: paper is paper */
.kw-quiz-cta-section { background: var(--ground); }

/* ---------- 3c. the paint ----------
   (a) A side wash off the right edge of a text band: ::before, sized to the
       band so it is never cut by the band's top or bottom, mostly off-page,
       hidden where the copy fills the width. */
.kw-hero:not(:has(.kw-hero-bg, .kw-hero-image)), .kw-final-cta, section.final-cta, .final-cta-section,
section.kw-article-hero, .kw-blog-hero, .kw-review-hero, .onboard-hero, header.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.kw-hero:not(:has(.kw-hero-bg, .kw-hero-image))::before, .kw-final-cta::before, section.final-cta::before, .final-cta-section::before,
section.kw-article-hero::before, .kw-blog-hero::before, .kw-review-hero::before,
.onboard-hero::before, header.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* pinned: these sections also carry .section-line, whose own ::before
     (a 200px hairline at left 50%) would otherwise merge in */
  left: auto;
  bottom: auto;
  width: auto;
  margin: 0;
  border: 0;
  right: 0;
  top: 50%;
  height: min(84%, 400px);
  aspect-ratio: 900 / 617;
  transform: translate(54%, -46%);
  background: var(--kw-bloom) center / contain no-repeat;
  opacity: 0.92;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .kw-hero:not(:has(.kw-hero-bg, .kw-hero-image))::before, .kw-final-cta::before, section.final-cta::before, .final-cta-section::before,
  section.kw-article-hero::before, .kw-blog-hero::before, .kw-review-hero::before,
  .onboard-hero::before, header.hero::before { display: none; }
}

/* Boxed heroes (the hero IS a centred container: Live Session, Worksheet,
   Review, the quiz landing): full-bleed ink by box-shadow. Flat ink, no
   bloom and no grain, which would stop at the box's edge. */
header.hero.container, .kw-review-hero, .quiz-wrapper .lp-hero {
  background: var(--brand-ink);
  background-image: none;
  box-shadow: 0 0 0 100vmax var(--brand-ink);
  clip-path: inset(0 -100vmax);
  overflow: visible;
}
header.hero.container::before, .kw-review-hero::before { display: none; }
/* the quiz landing: the bloom behind Kate's photo, inside the box */
.quiz-wrapper .lp-hero { position: relative; isolation: isolate; }
.quiz-wrapper .lp-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -7%;
  top: 7%;
  width: 50%;
  aspect-ratio: 900 / 617;
  background: var(--kw-bloom) center / contain no-repeat;
  opacity: 0.92;
  pointer-events: none;
}
.quiz-wrapper .lp-photo { border-radius: 0; box-shadow: var(--shadow-cutout); }
@media (max-width: 900px) { .quiz-wrapper .lp-hero::before { display: none; } }

/* (b) Home: one bloom behind the loud line, off the left edge, anchored to
       the h1 so it ends at the Anton line and the gold italic line below
       sits on ink. Under the type, over the photo. */
.kw-hero:has(.kw-hero-bg) h1, .about-hero h1 { position: relative; }
.kw-hero:has(.kw-hero-bg) h1::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: max(-15vw, -260px);
  bottom: 1.02em;
  width: min(620px, 48vw);
  aspect-ratio: 900 / 617;
  background: var(--kw-bloom) left bottom / contain no-repeat;
  opacity: 0.88;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .kw-hero:has(.kw-hero-bg) h1::before { left: -34vw; width: min(460px, 78vw); bottom: 1.0em; }
}
/* About: the eyebrow sits right above the headline, so the paint is a
   swatch behind the Anton lines only, never above them */
.about-hero h1::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -1.3em;
  top: -0.4em;
  height: calc(100% + 0.6em);
  aspect-ratio: 900 / 617;
  background: var(--kw-bloom) left center / contain no-repeat;
  opacity: 0.88;
  pointer-events: none;
}

/* (c) Coaching and Fundamentals: the paint behind Kate's photo, as on the
       banner, blooming out past its top-left corner. */
.kw-hero-image { isolation: isolate; }
.kw-hero-image::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -22%;
  top: -12%;
  width: 92%;
  aspect-ratio: 900 / 617;
  background: var(--kw-bloom) center / contain no-repeat;
  opacity: 0.92;
  pointer-events: none;
}
.kw-hero-image-accent { display: none; }
.kw-hero-image-wrapper { box-shadow: var(--shadow-cutout); }

/* (d) Voice Analysis: the headline on an ink band that runs on behind the
       top half of Kate's photo, so the "how it works" card lands on paper.
       Full-bleed by box-shadow, so the page markup is untouched. */
section.hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
section.hero > .container > .hero-content:not(.hero-content--tail) {
  box-shadow: 0 0 0 100vmax var(--brand-ink);
  clip-path: inset(-260px -100vmax -120px -100vmax);
  background: var(--brand-ink);
}
section.hero .hero-how { position: relative; }
section.hero .hero-how::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: -1px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: calc(min(960px, 100vw - 48px) * 0.30);
  background: var(--brand-ink);
}
section.hero .hero-how::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -18%;
  top: -16%;
  width: min(560px, 62%);
  aspect-ratio: 900 / 617;
  background: var(--kw-bloom) center / contain no-repeat;
  opacity: 0.92;
  pointer-events: none;
}
section.hero .hero-how-photo { border-radius: 0; box-shadow: var(--shadow-cutout); }
section.hero .hero-how-card { border-radius: var(--radius-md); box-shadow: var(--shadow-raised); }
@media (max-width: 700px) {
  section.hero .hero-how::after { left: -30%; top: -22%; width: 80%; }
}

/* the home photograph now falls into ink, not into paper */
.kw-hero-bg::after {
  background: linear-gradient(
    to bottom,
    rgba(22,22,29,0.62) 0%,
    rgba(22,22,29,0.22) 9%,
    rgba(22,22,29,0.04) 22%,
    rgba(22,22,29,0.06) 38%,
    rgba(22,22,29,0.38) 56%,
    rgba(22,22,29,0.88) 74%,
    #16161D 90%
  );
}
/* About: same fall into ink */
.about-hero-bg::after {
  background: linear-gradient(
    to bottom,
    rgba(22,22,29,0.55) 0%,
    rgba(22,22,29,0.10) 18%,
    rgba(22,22,29,0.28) 46%,
    rgba(22,22,29,0.86) 72%,
    #16161D 92%
  );
}
.about-hero-sub { color: var(--on-dark-2); }

/* ---------- 3d. buttons: the gold pill with the hard shadow ----------
   Page-specific button classes are folded in. :not(#kw-v3) lifts these to
   ID weight so a page's own `.x a.btn` rules cannot repaint them. */
.kw-btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 17px 32px;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
:is(.kw-btn.kw-btn-primary, .kw-btn.kw-btn-accent, .btn, .btn-primary,
    .kw-404-link, .about-cta-btn, .kw-cta-button, .kw-newsletter-submit, .kw-btn-submit,
    .kw-cta-link, .reserve-cta-btn, .kw-submit-btn, .kw-cta-btn-filled, .submit-btn,
    .download-btn, .kw-redirect-link, .kw-email-submit):not(#kw-v3) {
  background: var(--action);
  color: var(--on-action) !important;
  border: 2px solid var(--action-edge);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
  border-bottom-width: 2px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
:is(.kw-btn.kw-btn-primary, .kw-btn.kw-btn-accent, .btn, .btn-primary,
    .kw-404-link, .about-cta-btn, .kw-cta-button, .kw-newsletter-submit, .kw-btn-submit,
    .kw-cta-link, .reserve-cta-btn, .kw-submit-btn, .kw-cta-btn-filled, .submit-btn,
    .download-btn, .kw-redirect-link, .kw-email-submit):not(#kw-v3):hover {
  background: var(--brand-gold);
  color: var(--on-action) !important;
  border-color: var(--action-edge);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard);
}
:is(.kw-btn.kw-btn-primary, .kw-btn.kw-btn-accent, .btn, .btn-primary,
    .kw-404-link, .about-cta-btn, .kw-cta-button, .kw-newsletter-submit, .kw-btn-submit,
    .kw-cta-link, .reserve-cta-btn, .kw-submit-btn, .kw-cta-btn-filled, .submit-btn,
    .download-btn, .kw-redirect-link, .kw-email-submit):not(#kw-v3):active {
  transform: translateY(4px);
  box-shadow: var(--shadow-raised);
}
:is(.kw-btn.kw-btn-primary, .kw-btn.kw-btn-accent, .btn, .btn-primary, .kw-btn-submit,
    .kw-submit-btn, .submit-btn, .kw-email-submit):not(#kw-v3):disabled {
  background: var(--ground-sunk);
  color: var(--text-muted) !important;
  border-color: var(--line);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
/* secondary: the outline pill */
:is(.kw-btn.kw-btn-secondary, .kw-btn.kw-btn-ghost, .kw-404-link-secondary, .ghost-btn,
    .kw-cta-btn:not(.kw-cta-btn-filled), .video-btn, .start-other, .kw-btn-upload, .kw-upload-btn,
    .share-btn):not(#kw-v3) {
  background: transparent;
  color: var(--text) !important;
  border: 2px solid color-mix(in srgb, var(--text) 42%, transparent);
  border-radius: var(--radius-pill);
  box-shadow: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  text-decoration: none;
}
:is(.kw-btn.kw-btn-secondary, .kw-btn.kw-btn-ghost, .kw-404-link-secondary, .ghost-btn,
    .kw-cta-btn:not(.kw-cta-btn-filled), .video-btn, .start-other, .kw-btn-upload, .kw-upload-btn,
    .share-btn):not(#kw-v3):hover {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text) !important;
  border-color: var(--text);
  transform: translateY(-1px);
  box-shadow: none;
}

/* email capture: the kit's input radius */
.kw-email-input {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--ground-raised);
  color: var(--text);
}
.kw-email-input:focus { border-color: var(--focus-ring); }

/* ---------- 3e. links, cards, eyebrows ---------- */
/* text links are teal (kit: link) */
.kw-meet-link, .kw-article-body a:not([class]), .kw-hero-crosslink a, .kw-hero-start-here a,
.about-yt-link, .room-link, .kw-faq-answer-inner a:not([class]) {
  color: var(--link) !important;
  border-bottom-color: color-mix(in srgb, var(--link) 45%, transparent);
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
}
.kw-meet-link:hover, .kw-article-body a:not([class]):hover, .kw-hero-crosslink a:hover,
.kw-hero-start-here a:hover { color: var(--text) !important; }

/* cards: the kit's web card radius, a hairline, a hard lift */
.kw-service-card, .kw-testimonial-card, .kw-blog-card { border-radius: var(--radius-md); }
.kw-service-card:not(.kw-featured) { border-top: 3px solid var(--paint); }
.kw-service-card.kw-featured { border-top: 3px solid var(--action); }

.kw-heading-sm {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emphasis);
}
.kw-hero-eyebrow, .hero-eyebrow, .about-hero-eyebrow, .kw-article-category {
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--emphasis);
}

/* ---------- 3f. footer: the lockup on ink ---------- */
.kw-footer, .site-footer {
  position: relative;
  isolation: isolate;
  background: var(--kw-grain) 0 0 / 220px 220px repeat, var(--brand-ink);
  background-blend-mode: overlay, normal;
  border-top: 1px solid var(--line);
  padding: 56px 0 52px;
}
.kw-footer .kw-footer-logo,
.kw-footer .footer-logo, .site-footer .footer-logo {
  position: relative;
  display: block;
  flex: none;
  width: 196px;
  height: 44px;
  margin-bottom: 24px;
  background: var(--kw-wordmark-dark) left top / contain no-repeat;
  color: transparent !important;
  font-size: 0;
  line-height: 0;
  opacity: 1;
}
/* the VOCAL COACH sticker, tucked under KATE at -4 degrees */
.kw-footer .kw-footer-logo::after,
.kw-footer .footer-logo::after, .site-footer .footer-logo::after {
  content: 'Vocal coach';
  position: absolute;
  left: 2px;
  top: 41px;
  padding: 5px 10px 4px;
  font: 900 10px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-action);
  background: var(--action);
  border: 1.5px solid var(--action-edge);
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 rgba(0,0,0,0.45);
  transform: rotate(-4deg);
  transform-origin: left center;
}
:is(.kw-footer, .site-footer) :is(.kw-footer-links, .footer-links) a { color: var(--text-muted); }
:is(.kw-footer, .site-footer) :is(.kw-footer-links, .footer-links) a:hover { color: var(--brand-cream); }
:is(.kw-footer, .site-footer) :is(.kw-footer-copy, .footer-copy) { color: var(--text-muted); opacity: 1; }
:is(.kw-footer, .site-footer) :is(.kw-footer-copy, .footer-copy) a { color: var(--text-muted); }
:is(.kw-footer, .site-footer) :is(.kw-footer-copy, .footer-copy) a:hover { color: var(--link); }
@media (max-width: 1024px) {
  .kw-footer .kw-footer-logo, .kw-footer .footer-logo, .site-footer .footer-logo { margin: 0 auto 24px; }
}

/* ---------- 4. display type ----------
   Anton, uppercase, for the heroes and the section heads (kit display-xl /
   display-l). The <em> in a head is Kate's own line: Cormorant italic, never
   uppercase, in the emphasis colour (gold on ink, deep gold on paper).
   Titles of paper DOCUMENTS (legal pages, forms, thank-you pages) stay in
   Cormorant 500, the kit's serif-title. */
.kw-heading-xl,
.kw-hero h1, .about-hero h1, section.kw-article-hero h1, .kw-blog-hero h1, .kw-article-h1,
.kw-review-hero h1, .onboard-hero h1, header.hero h1, section.hero h1, .kw-404-title,
.kw-article-wrap .kw-article-hero h1, .quiz-wrapper .landing h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
  text-shadow: var(--shadow-type);
  text-wrap: balance;
}
.kw-heading-xl { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.95; }
.kw-hero-grid .kw-heading-xl { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
.about-hero h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); max-width: 860px; }
section.kw-article-hero h1, .kw-blog-hero h1, .kw-article-h1,
.kw-article-wrap .kw-article-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.0; }
.quiz-wrapper .landing h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 0.98; }
section.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
header.hero h1, .onboard-hero h1, .kw-review-hero h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.kw-404-title { font-size: clamp(2.6rem, 6vw, 4.4rem); }

/* section heads (display-l) */
.kw-heading-lg, .kw-problem-heading, .kw-how-heading, .section-heading,
.hero-how-title, .vsl-heading, .kw-email-capture-heading,
.about-approach-header h2, .about-journey-header h2, .about-languages-text h2,
.about-origin-text h2, .about-cta h2, .final-cta-inner h2, .video-band h2, .contents h2,
header.hero ~ section h2:not([class]):not(.form-card *, .success *), .quiz-wrapper .lp-section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.02;
  text-shadow: var(--shadow-type);
  text-wrap: balance;
}
.kw-heading-lg { font-size: clamp(2.05rem, 4.4vw, 3.5rem); }
.kw-problem-heading { font-size: clamp(2.1rem, 4.8vw, 3.6rem); }
.section-heading, .kw-how-heading, .about-approach-header h2, .about-journey-header h2,
.about-languages-text h2, .about-origin-text h2, .about-cta h2, .final-cta-inner h2,
.video-band h2, .contents h2, header.hero ~ section h2:not([class]):not(.form-card *, .success *), .quiz-wrapper .lp-section h2 {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
}
.hero-how-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

/* the <em> in any of them */
:is(.kw-heading-xl, .kw-hero h1, .about-hero h1, section.kw-article-hero h1, .kw-blog-hero h1,
    .kw-article-h1, .kw-review-hero h1, .onboard-hero h1, header.hero h1, section.hero h1, .kw-404-title,
    .kw-heading-lg, .kw-problem-heading, .kw-how-heading, .section-heading, .hero-how-title,
    .vsl-heading, .kw-email-capture-heading, .about-approach-header h2, .about-journey-header h2,
    .about-languages-text h2, .about-origin-text h2, .about-cta h2, .final-cta-inner h2,
    .video-band h2, .contents h2, header.hero ~ section h2:not([class]):not(.form-card *, .success *), .quiz-wrapper .lp-section h2,
    .kw-article-wrap .kw-article-hero h1, .quiz-wrapper .landing h1) em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1em;
  line-height: 0.9;
  color: var(--emphasis) !important;
  text-shadow: none;
}
.kw-hero:has(.kw-hero-bg) h1 em { display: inline-block; margin-top: 0.06em; }

/* paper document titles: the kit's serif-title (Cormorant 500, upright) */
.kw-form-title, .kw-thankyou-title, .kw-welcome-title, .kw-redirect-title, .kw-page-title,
.ty-wrap h1, .kw-thanks h1, .kw-heading-md, .kw-hero-cta-text p, .kw-service-name,
.kw-faq-question, .kw-blog-card-title { font-weight: 500; }

/* numbers that sell: Anton */
.kw-credibility-number {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
  text-shadow: var(--shadow-type);
}
.kw-credibility-number.kw-credibility-stars { color: var(--brand-gold); letter-spacing: 0.06em; }
.kw-credibility-label { color: var(--text-muted); font-weight: 700; letter-spacing: 0.16em; }

@media (prefers-reduced-motion: reduce) {
  .kw-btn, .kw-nav-cta { transition: none; }
}

/* About's credentials row speaks like the home page's: Anton numbers */
.about-credential-number {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
}
@media (max-width: 600px) {
  .about-credential-number { font-size: 1.2rem; line-height: 1.05; letter-spacing: 0.01em; }
}

/* an ink closing band runs straight into the ink footer, no paper seam */
:is(.kw-final-cta, section.final-cta, .final-cta-section, .kw-email-capture) + :is(.kw-footer, .site-footer) { margin-top: 0; }