/* Design tokens. Change a value here and it changes everywhere. */

@font-face { font-family: "Amiko"; font-weight: 700; font-display: swap; src: url("../fonts/amiko-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Amiko"; font-weight: 600; font-display: swap; src: url("../fonts/amiko-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Mukta"; font-weight: 400; font-display: swap; src: url("../fonts/mukta-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Mukta"; font-weight: 500; font-display: swap; src: url("../fonts/mukta-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Mukta"; font-weight: 600; font-display: swap; src: url("../fonts/mukta-600-latin.woff2") format("woff2"); }

:root {
  /* Colour: warm studio neutrals plus one acoustic-panel brown. */
  --paper: #faf8f5;          /* main light ground */
  --paper-2: #f1ede7;        /* quiet bands, chips */
  --line: #e3ddd4;           /* hairlines on light */
  --line-strong: #cfc5b8;    /* hover borders on light */
  --card: #ffffff;           /* raised cards on light */
  --ink: #1f1d1b;            /* text on light */
  --ink-2: #57514a;          /* secondary text on light (7.4:1 on paper) */
  --night: #181614;          /* dark sections */
  --night-2: #24211e;        /* raised surfaces on dark */
  --night-line: #3a352f;     /* hairlines on dark */
  --on-night: #f4efe8;       /* text on dark */
  --on-night-2: #bdb3a7;     /* secondary text on dark (8.6:1 on night) */
  --brown: #955938;          /* primary action (5.6:1 with white text) */
  --brown-strong: #7c4729;   /* hover / pressed */
  --brown-on-night: #d79a72; /* accents on dark (7.3:1 on night) */
  --panel: #5b5446;          /* studio acoustic-panel taupe, darkened (7.5:1 with white text) */
  --panel-deep: #48423a;     /* shade behind text on textured panels (9.9:1 with white) */
  --panel-warm: #615140;     /* My work band: warmer panel tone (7.6:1 with white) */
  --panel-warm-deep: #4d4033;
  --panel-grey: #545650;     /* About band: greyer panel tone (7.4:1 with white) */
  --panel-grey-deep: #424440;
  --focus: #2f6fd6;
  --selected: #fbf3ee;       /* chosen option on light (choice cards, pay tabs) */
  --notice: #f6ecd9;         /* demo / status notices */
  --on-notice: #5a4313;      /* text on notices (8.4:1) */
  --success: #2f6b3a;        /* confirmations (6.6:1 on paper) */
  --error: #9a2f1d;          /* error text (7.2:1 on paper) */
  --error-line: #b4412c;     /* invalid field border */
  --placeholder: #6f675f;    /* input placeholders (5.3:1 on card) */

  /* Type */
  --font-display: "Amiko", "Mukta", system-ui, sans-serif;
  --font-body: "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;                                   /* 17px body */
  --step-1: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-3: clamp(1.875rem, 1.45rem + 2vw, 3.25rem);
  --step-hero: clamp(1.9rem, 1.2rem + 3.4vw, 4.25rem);

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --max: 72rem;

  /* Shape and depth */
  --radius: 14px;
  --radius-sm: 10px;
  --pill: 999px;
  --shadow: 0 1px 2px rgb(31 29 27 / 0.06), 0 8px 24px -12px rgb(31 29 27 / 0.18);
  --shadow-lift: 0 2px 4px rgb(31 29 27 / 0.06), 0 18px 36px -16px rgb(31 29 27 / 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 160ms;
  --slow: 700ms;

  --header-h: 3.75rem;
}

/* Base: resets, type, browser surfaces. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
figure, blockquote { margin: 0; }

/* Browser surfaces carry the palette too. */
::selection { background: var(--brown); color: #fff; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: #9cc0ff; }
html { scrollbar-color: #c9bfb2 var(--paper); accent-color: var(--brown); caret-color: var(--brown); }

.icon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--s-3); }

[hidden] { display: none !important; }

/* Components shared by every page. */

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(250 248 245 / 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast) linear;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: var(--s-4);
}
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem;
  letter-spacing: -0.02em; text-decoration: none; color: var(--ink); white-space: nowrap;
}
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark img { display: block; height: 32px; width: auto; }
.site-footer .wordmark img { height: 36px; }
@media (max-width: 599px) { .site-header .wordmark img { height: 26px; } }
.wordmark--light { color: var(--on-night); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }

.icon-button {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--pill);
  border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: none;
  transition: background-color var(--fast) linear;
}
.icon-button:hover { background: var(--paper-2); }
.icon-button .icon { width: 24px; height: 24px; }
.icon-button--light { color: var(--on-night); border: 1px solid var(--night-line); }
.icon-button--light:hover { background: var(--night-2); }
.icon-button:disabled { opacity: 0.35; cursor: default; background: transparent; }
.cart-count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--pill); background: var(--brown); color: #fff;
  font-size: 0.6875rem; font-weight: 600; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Mobile nav: a full-screen panel below the header. */
.site-nav__list {
  position: fixed; top: calc(var(--header-h) + 1px); left: 0; right: 0; bottom: 0; z-index: 49;
  height: calc(100vh - var(--header-h) - 1px);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper);
  padding: var(--s-4) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  visibility: hidden; opacity: 0;
  transition: opacity 220ms linear, visibility 0s linear 220ms;
}
@supports (height: 100dvh) { .site-nav__list { height: calc(100dvh - var(--header-h) - 1px); } }
.site-nav__list.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.site-nav__list > li:not(.site-nav__extra) > a {
  display: flex; align-items: center; min-height: 64px; padding: var(--s-2) 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.02em;
  text-decoration: none; border-bottom: 1px solid var(--line);
  transform: translateY(12px); opacity: 0;
  transition: transform 420ms var(--ease-out), opacity 300ms linear, color var(--fast) linear;
}
.site-nav__list.is-open > li:not(.site-nav__extra) > a { transform: none; opacity: 1; }
.site-nav__list.is-open > li:nth-child(2) > a { transition-delay: 40ms; }
.site-nav__list.is-open > li:nth-child(3) > a { transition-delay: 80ms; }
.site-nav__list.is-open > li:nth-child(4) > a { transition-delay: 120ms; }
.site-nav__list.is-open > li:nth-child(5) > a { transition-delay: 160ms; }
.site-nav__list.is-open > li:nth-child(6) > a { transition-delay: 200ms; }
.site-nav__list a[aria-current="page"] { color: var(--brown); }
.site-nav__account { margin-top: var(--s-6); }
.site-nav__list > li.site-nav__account:not(.site-nav__extra) > a {
  justify-content: center; min-height: 52px; border: 1.5px solid var(--line); border-radius: var(--pill);
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0;
}
.site-nav__extra { margin-top: auto; padding-top: var(--s-6); display: grid; gap: var(--s-1); }
.site-nav__extra a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--ink-2); text-decoration: none; font-size: 1rem; }
.site-nav__extra .icon { width: 1.1em; height: 1.1em; color: var(--brown); }
/* Lock scrolling on the root only: also setting overflow on <body> turns it
   into its own scroll box, which unsticks the sticky header. */
html.menu-open { overflow: hidden; }
/* No backdrop-filter while open: it would make the header the containing
   block for the fixed panel. */
.menu-open .site-header { border-bottom-color: var(--line); background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .site-nav__list > li:not(.site-nav__extra) > a { transform: none; opacity: 1; } }
.site-header__menu .icon--close { display: none; }
.site-header__menu[aria-expanded="true"] .icon--open { display: none; }
.site-header__menu[aria-expanded="true"] .icon--close { display: block; }

@media (min-width: 960px) {
  .site-header__menu { display: none; }
  .site-nav { margin-left: auto; }
  .site-nav__list {
    position: static; display: flex; flex-direction: row; align-items: center; gap: var(--s-1); padding: 0; border: 0; box-shadow: none; height: auto; overflow: visible;
    background: none; visibility: visible; opacity: 1; transform: none;
  }
  .site-nav__list > li:not(.site-nav__extra) > a, .site-nav__list > li.site-nav__account:not(.site-nav__extra) > a {
    display: block; min-height: 0; font-family: var(--font-body); font-weight: 400; letter-spacing: 0;
    font-size: 0.9688rem; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--pill);
    opacity: 1; transform: none; transition: background-color var(--fast) linear;
  }
  .site-nav__account { margin-top: 0; }
  .site-nav__extra { display: none; }
  .site-nav__list a:hover { background: var(--paper-2); }
  .site-header__actions { margin-left: var(--s-2); }
}

/* ---------- Buttons and links ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-5);
  border-radius: var(--pill); border: 1.5px solid transparent;
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--fast) linear, border-color var(--fast) linear, transform var(--fast) var(--ease-out);
}
.button:active { transform: translateY(1px); }
.button .icon { width: 1.15em; height: 1.15em; transition: transform var(--fast) var(--ease-out); }
.button:hover .icon { transform: translateX(3px); }
.button--primary { background: var(--brown); color: #fff; }
.button--primary:hover { background: var(--brown-strong); }
.button--ghost { color: #fff; border-color: rgb(255 255 255 / 0.8); background: rgb(0 0 0 / 0.12); }
.button--ghost:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; }
/* Secondary action on light: brown outline, partners a primary button. */
.button--brand-outline { border-color: var(--brown); color: var(--brown); background: transparent; }
.button--brand-outline:hover { background: var(--selected); border-color: var(--brown-strong); color: var(--brown-strong); }
.button--light { background: var(--paper); color: var(--ink); }
.button--light:hover { background: var(--card); }
.button--small { min-height: 44px; padding: 0 var(--s-4); font-size: 1rem; }

.text-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; color: var(--brown); text-decoration: none;
  min-height: 44px;
}
.text-link:hover { text-decoration: underline; }
.text-link .icon { width: 1.1em; height: 1.1em; transition: transform var(--fast) var(--ease-out); }
.text-link:hover .icon { transform: translateX(3px); }
.text-link--light { color: var(--brown-on-night); }

/* ---------- Sections ---------- */
.section { padding: var(--section-y) var(--gutter); }
.section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.section--dark { background: var(--night); color: var(--on-night); }
.section__head { margin-bottom: var(--s-6); }
.section__head p { margin-top: var(--s-3); color: var(--ink-2); max-width: 38rem; font-size: var(--step-1); line-height: 1.5; }
.section--dark .section__head p { color: var(--on-night-2); }

/* ---------- Chips ---------- */
.filters {
  display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1) var(--s-5); padding: 0 var(--gutter) var(--s-1); scroll-padding-inline: var(--gutter);
}
@media (min-width: 760px) { .filters { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } }
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4); border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink);
  font-weight: 500; cursor: pointer;
  transition: background-color var(--fast) linear, border-color var(--fast) linear, color var(--fast) linear;
}
.chip:hover { border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: #fff; }
.chip[aria-pressed="true"] span { color: rgb(255 255 255 / 0.82); }

/* ---------- Course card ---------- */
.course-grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .course-grid { grid-template-columns: repeat(3, 1fr); } }
.course-card { display: flex; }
.course-card.is-hidden { display: none; }
.course-card__link {
  display: flex; flex-direction: column; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
  transition: box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.course-card__link:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.course-card__cover { display: block; aspect-ratio: 16 / 9; background: var(--paper-2); }
.course-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.course-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); flex: 1; }
.course-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.25; }
.course-card__summary { color: var(--ink-2); font-size: 0.9688rem; line-height: 1.5; }
.course-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-1);
  color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums;
}
.course-card__meta > span { display: inline-flex; align-items: center; gap: 0.35em; }
.course-card__meta .icon { width: 1.05em; height: 1.05em; }
.course-card__price {
  margin-top: auto; padding-top: var(--s-3);
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; font-variant-numeric: tabular-nums;
}

/* ---------- Horizontal rails ---------- */
[data-rail] {
  display: grid; grid-auto-flow: column; gap: var(--s-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s-3);
  scrollbar-width: thin; scrollbar-color: var(--night-line) transparent;
}
[data-rail] > * { scroll-snap-align: start; }
/* Wide screens: rails start on the content column and run off the right edge,
   so a cut-off card reads as "more to swipe", not as a layout bug. */
@media (min-width: 1200px) {
  .section > [data-rail] {
    max-width: none;
    margin-left: calc((100% - var(--max)) / 2); margin-right: calc(var(--gutter) * -1);
    padding-left: 0; padding-right: var(--gutter); scroll-padding-inline: 0;
  }
}

/* ---------- Work card (video facade) ---------- */
.work-rail { grid-auto-columns: min(82vw, 22rem); }
.work-card__media {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--night-2);
}
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out), filter 300ms linear; filter: saturate(0.92); }
.work-card__media:hover img { transform: scale(1.03); filter: saturate(1.05); }
.work-card__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.work-card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.35), transparent 60%); color: #fff; cursor: pointer;
}
.work-card__play .icon {
  width: 56px; height: 56px; padding: 16px 14px 16px 18px; border-radius: 50%;
  background: rgb(24 22 20 / 0.62); border: 1px solid rgb(255 255 255 / 0.5);
  fill: #fff; stroke: none;
  transition: transform var(--fast) var(--ease-out), background-color var(--fast) linear;
}
.work-card__play:hover .icon { transform: scale(1.06); background: var(--brown); }
/* Phones: the player is already loaded under the thumbnail. The thumbnail lets taps through to
   it (so they count as taps on the player and play with sound) and fades once it plays. */
.work-card__media.is-live img, .work-card__media.is-live .work-card__play {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transition: opacity 200ms linear, visibility 0s linear 200ms;
}
.work-card__media.is-live .work-card__play { z-index: 2; }
.work-card__media.is-playing img, .work-card__media.is-playing .work-card__play { opacity: 0; visibility: hidden; }
.work-card__title { margin-top: var(--s-3); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.work-card__title span { font-family: var(--font-body); font-weight: 400; color: var(--on-night-2); }
.work-card__source { color: var(--on-night-2); font-size: 0.9375rem; line-height: 1.45; margin-top: 2px; }
.work-card__role { color: var(--brown-on-night); font-size: 0.9375rem; font-weight: 500; }

/* ---------- Testimonials ---------- */
.voice blockquote p { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.01em; }
.voice blockquote p::before { content: "\201C"; }
.voice blockquote p::after { content: "\201D"; }
.voice figcaption, .review figcaption { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.voice figcaption img, .review figcaption img { border-radius: 50%; object-fit: cover; flex: none; }
.voice figcaption strong, .review figcaption strong { display: block; font-weight: 600; line-height: 1.3; }
.voice figcaption span span, .review figcaption span span { display: block; font-size: 0.9375rem; color: var(--on-night-2); line-height: 1.35; }

.reviews__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.reviews__title { font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; color: var(--on-night-2); letter-spacing: 0; }
.reviews__rail { grid-auto-columns: min(84vw, 23rem); align-items: start; }
.review figure {
  display: flex; flex-direction: column;
  background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--radius);
  padding: var(--s-5);
}
.review blockquote p { color: var(--on-night); line-height: 1.6; }
.review--long blockquote p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review--long.is-open blockquote p { display: block; -webkit-line-clamp: unset; }
.review__more {
  align-self: flex-start; margin-top: var(--s-2); padding: var(--s-2) 0; min-height: 44px;
  border: 0; background: none; color: var(--brown-on-night); font-weight: 600; cursor: pointer;
}
.review__more:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.review figcaption { padding-top: var(--s-2); }

.rail-controls { display: none; gap: var(--s-2); }
@media (hover: hover) and (min-width: 700px) { .rail-controls { display: flex; } }

/* ---------- Sticky course bar (mobile) ---------- */
.sticky-cta {
  position: fixed; left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  background: var(--night); color: var(--on-night); border-radius: var(--pill);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.5);
  transform: translateY(0); opacity: 1;
  transition: transform 320ms var(--ease-out), opacity 200ms linear;
}
.sticky-cta.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
.sticky-cta p { font-size: 0.9688rem; color: var(--on-night-2); }
.sticky-cta strong { color: var(--on-night); font-weight: 600; }
@media (min-width: 960px) { .sticky-cta { display: none !important; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--on-night); padding: 0 var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom)); }
.site-footer > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); padding: var(--s-7) 0; border-top: 1px solid var(--night-line);
}
.site-footer__brand, .site-footer__grid > div:nth-child(3) { grid-column: 1 / -1; }
.site-footer__grid { grid-auto-flow: dense; }
@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr 1.4fr 1.2fr; }
  .site-footer__grid > div:nth-child(3) { grid-column: auto; }
}
/* Wide screens: the brand and newsletter get the widest column, like the other four-up footers. */
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.9fr 1fr 1.4fr 1.2fr; column-gap: var(--s-7); }
  .site-footer__brand { grid-column: auto; }
}
.site-footer__brand p { margin-top: var(--s-3); color: var(--on-night-2); max-width: 26rem; }
/* Newsletter: a pill email field, button and explicit consent on the dark footer. */
.site-footer .site-footer__form { margin-top: var(--s-4); max-width: 26rem; }
.site-footer .site-footer__form input {
  flex: 1 1 12rem; min-width: 0; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--pill);
  background: var(--night-2); border: 1px solid var(--night-line); color: var(--on-night);
}
.site-footer .site-footer__form input::placeholder { color: var(--on-night-2); }
.site-footer .site-footer__form input:hover { border-color: var(--on-night-2); }
.site-footer .site-footer__form .inline-form__msg { margin-top: var(--s-1); }
.site-footer .inline-form__msg.is-ok { color: var(--on-night); }
.site-footer .inline-form__msg.is-error { color: #f2a48f; }
.newsletter-consent { flex-basis: 100%; display: flex; align-items: flex-start; gap: .6rem; font-size: .8rem; line-height: 1.5; }
.inline-form .newsletter-consent input { flex: 0 0 auto; width: 1rem; height: 1rem; min-height: 1rem; margin-top: .2rem; padding: 0; accent-color: var(--brown); }
.site-footer .site-footer__form .newsletter-consent input { flex: 0 0 auto; width: 1rem; height: 1rem; min-height: 1rem; margin-top: .2rem; padding: 0; accent-color: var(--brown); }
.newsletter-consent a { text-decoration: underline; }
.newsletter-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.site-footer__heading { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; color: var(--on-night-2); margin-bottom: var(--s-3); letter-spacing: 0; }
.site-footer ul li a, .site-footer ul li > span { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; }
.site-footer__contact .icon { color: var(--brown-on-night); width: 1.1em; height: 1.1em; }
.site-footer__note { margin-top: var(--s-3); font-size: var(--step--1); color: var(--on-night-2); }
.site-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
  padding-top: var(--s-5); border-top: 1px solid var(--night-line);
  font-size: var(--step--1); color: var(--on-night-2);
}
.site-footer__legal { display: flex; gap: var(--s-4); }
/* Desktop: copyright, credit and legal links share one row with the credit centred.
   Side columns never shrink below their content, so a tight row shifts rather than overlaps. */
@media (min-width: 1024px) {
  .site-footer__base { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: var(--s-5); }
  .site-footer__credit { text-align: center; }
  .site-footer__legal { justify-self: end; }
}
.site-footer__credit a { color: var(--on-night); text-decoration: underline; text-decoration-color: var(--night-line); text-underline-offset: 3px; transition: color var(--fast) ease-out, text-decoration-color var(--fast) ease-out; }
.site-footer__credit a:hover { color: var(--brown-on-night); text-decoration-color: currentColor; }
.site-footer__legal a { min-height: 32px; display: inline-flex; align-items: center; }

/* ---------- Scale toy (footer instrument) ---------- */
.scale-toy {
  display: grid; gap: var(--s-5); padding: var(--s-8) 0 var(--s-7);
}
@media (min-width: 900px) { .scale-toy { grid-template-columns: 1fr 1.25fr; align-items: center; column-gap: var(--s-8); } }
.scale-toy h2 { font-size: var(--step-2); }
.scale-toy__text p { margin-top: var(--s-2); color: var(--on-night-2); max-width: 30rem; }
/* Six modes in an even two-column grid: Western mode first, thaat beside it. */
.scale-toy__modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-4); max-width: 30rem; }
.scale-toy__modes button { text-align: left; }
@media (max-width: 559px) {
  .scale-toy__modes button { padding: var(--s-1) var(--s-3); line-height: 1.2; }
  .scale-toy__modes button span { display: block; margin: 0; font-size: 0.8125rem; }
}
.scale-toy__modes button {
  min-height: 44px; padding: 0 var(--s-4); border-radius: var(--pill);
  border: 1px solid var(--night-line); background: transparent; color: var(--on-night); cursor: pointer; font-weight: 500;
}
.scale-toy__modes button span { color: var(--on-night-2); font-weight: 400; margin-left: 0.2em; }
.scale-toy__modes button[aria-checked="true"] { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
.scale-toy__modes button[aria-checked="true"] span { color: #5a5249; }
.scale-toy__keys { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.key {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px;
  height: clamp(9rem, 30vw, 12rem); padding-bottom: var(--s-3);
  border: 0; border-radius: 4px 4px 10px 10px; cursor: pointer;
  background: linear-gradient(#fbf8f4, #ece6de); color: var(--ink);
  box-shadow: inset 0 -6px 0 #d8d0c5, 0 2px 0 rgb(0 0 0 / 0.4);
  transition: transform 80ms linear, box-shadow 80ms linear, background-color 120ms linear;
  touch-action: manipulation;
}
.key.is-down, .key:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 #d8d0c5, 0 1px 0 rgb(0 0 0 / 0.4); background: linear-gradient(#f3e6da, #e4d2c2); }
.key__sargam { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.8125rem, 2.6vw, 1rem); }
.key__western { font-size: 0.75rem; color: var(--ink-2); }
/* Komal (flat) notes: underlined, as in Bhatkhande notation. */
.key.is-flat .key__sargam { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--brown); }
/* Tivra (sharp) Ma: a short stroke above, as in Bhatkhande notation. */
.key.is-sharp .key__sargam { position: relative; color: var(--brown); }
.key.is-sharp .key__sargam::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 0.55em; margin-left: -1px; background: currentColor; border-radius: 1px; }
/* Heading "Play a" with the Scale / Chord chip finishing the line. */
.scale-toy__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.scale-toy__switch { display: inline-flex; padding: 3px; border: 1px solid var(--night-line); border-radius: var(--pill); }
.scale-toy__switch button {
  min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: var(--pill);
  background: transparent; color: var(--on-night-2); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  transition: background-color var(--fast) linear, color var(--fast) linear;
}
.scale-toy__switch button[aria-checked="true"] { background: var(--on-night); color: var(--night); }
.scale-toy__switch button:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }

/* Chord pads: the progression in order, three to a row. */
.chord-pads { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-4); max-width: 30rem; }
.chord-pads button, .chord-run {
  min-height: 44px; padding: 0 var(--s-3); border-radius: var(--pill);
  border: 1px solid var(--night-line); background: transparent; color: var(--on-night);
  font-family: var(--font-display); font-weight: 600; cursor: pointer;
  transition: background-color var(--fast) linear, color var(--fast) linear, border-color var(--fast) linear;
}
@media (hover: hover) { .chord-pads button:hover, .chord-run:hover { border-color: var(--on-night-2); } }
.chord-pads button.is-on { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
.chord-run {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding: 0 var(--s-5);
  font-family: var(--font-body); color: var(--brown-on-night); border-color: var(--brown-on-night);
}
.chord-run .icon { width: 16px; height: 16px; fill: currentColor; }
.chord-run .icon--pause, .chord-run[aria-pressed="true"] .icon--play { display: none; }
.chord-run[aria-pressed="true"] .icon--pause { display: block; }

/* Two-octave piano (C4 to B5): white keys in a row, black keys laid over the
   gaps. Keys in the current chord show pressed, in brown, with their names. */
.piano__keys { position: relative; display: flex; height: clamp(8.5rem, 28vw, 12rem); }
.piano__key {
  position: relative; flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--s-3);
  background: linear-gradient(#fbf8f4, #ece6de); border-right: 1px solid #cfc5b8; border-radius: 0 0 6px 6px;
  box-shadow: inset 0 -6px 0 #d8d0c5; color: var(--night);
  transition: transform 90ms linear, box-shadow 90ms linear, background-color 120ms linear;
}
.piano__key:first-child { border-radius: 4px 0 6px 6px; }
.piano__key--black {
  position: absolute; top: 0; z-index: 1; padding-bottom: var(--s-2);
  width: calc(100% / var(--whites) * 0.62); height: 60%;
  left: calc(100% / var(--whites) * var(--at) - 100% / var(--whites) * 0.31);
  background: linear-gradient(#34302b, #141210); border: 0; border-radius: 0 0 4px 4px;
  box-shadow: inset 0 -5px 0 #000, 0 3px 4px rgb(0 0 0 / 0.45); color: #fff;
}
.piano__key[data-c]::before { content: attr(data-c); position: absolute; bottom: var(--s-3); font-size: 0.6875rem; color: #8a8178; }
.piano__key.is-on {
  background: linear-gradient(#ebc1a2, #d79a72); box-shadow: inset 0 -2px 0 #b9784f; transform: translateY(2px);
}
.piano__key--black.is-on { background: linear-gradient(#a8673f, #7c4729); box-shadow: inset 0 -2px 0 #4f2c18, 0 1px 2px rgb(0 0 0 / 0.45); }
.piano__key[data-c].is-on::before { content: none; }
.piano__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.625rem, 2.4vw, 0.875rem); line-height: 1; }
.piano__key--black .piano__name { font-size: clamp(0.5625rem, 2vw, 0.75rem); }
.piano__now { margin-top: var(--s-3); min-height: 1.6em; color: var(--on-night-2); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .piano__key { transition: none; } }
.scale-toy__link { grid-column: 1 / -1; }
.scale-toy__link a { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--brown-on-night); font-weight: 600; min-height: 44px; }
.scale-toy__link .icon { width: 1.1em; height: 1.1em; }

/* ---------- Acoustic-panel texture ---------- */
/* The fabric of the sound-absorbing panels in Nitin's studio (photo tile, see
   tools/panel-texture.py) laid over the panel colour. The tile is grey around
   mid-tone, so soft-light adds the weave without shifting the colour, and a
   deeper shade sits behind the text side so copy stays easy to read.
   Each page's band uses a different panel photo and tone (variants below). */
.panel-texture {
  --tex-bg: var(--panel); --tex-deep: var(--panel-deep); --tex-tile: url("../img/texture/panel.webp");
  position: relative; isolation: isolate; color: #fff;
  background-color: var(--tex-bg);
  background-image: linear-gradient(100deg, var(--tex-deep) 0%, color-mix(in srgb, var(--tex-deep) 60%, transparent) 45%, transparent 80%);
}
.panel-texture::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tex-tile) 0 0 / 320px repeat;
  mix-blend-mode: soft-light; opacity: 0.9;
}
/* My work: the chunkier weave, warmer. About: the softer linen, greyer. */
.panel-texture--weave { --tex-bg: var(--panel-warm); --tex-deep: var(--panel-warm-deep); --tex-tile: url("../img/texture/panel-weave.webp"); }
.panel-texture--linen { --tex-bg: var(--panel-grey); --tex-deep: var(--panel-grey-deep); --tex-tile: url("../img/texture/panel-linen.webp"); }
@media (max-width: 759px) {
  .panel-texture { background-image: linear-gradient(180deg, var(--tex-deep), color-mix(in srgb, var(--tex-deep) 55%, transparent)); }
  .panel-texture::before { background-size: 240px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
@media (min-width: 760px) { .section > .filters { margin-inline: auto; } }

/* Always available without loading a third-party chat widget. */
.whatsapp-widget { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 35; }
.whatsapp-float { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 5px 20px #0003; text-decoration: none; }
.whatsapp-float .icon { width: 33px; height: 33px; }
.whatsapp-float:hover { background: #075E54; color: #fff; }
.whatsapp-float:focus-visible { outline: 3px solid #128C7E; outline-offset: 4px; }
.whatsapp-float__label { position: absolute; top: 50%; transform: translateY(-50%); right: 70px; width: min(270px, calc(100vw - 100px)); padding: 10px 40px 10px 12px; border-radius: 8px; background: #075E54; color: #fff; font-size: 13px; font-weight: 400; line-height: 1.4; box-shadow: 0 3px 12px #0002; }
/* A small round close control; the invisible ::after keeps a 44px touch target. */
/* A small arrow on the message's right edge points at the WhatsApp button. */
.whatsapp-float__label::after { content: ""; position: absolute; top: 50%; right: -5px; width: 12px; height: 12px; border-radius: 2px; background: inherit; transform: translateY(-50%) rotate(45deg); }
/* The message appears after a little scrolling, not on arrival (main.js sets data-tip). */
.whatsapp-float__label { transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s; }
.js .whatsapp-widget:not([data-tip]) .whatsapp-float__label { opacity: 0; visibility: hidden; transform: translate(8px, -50%); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s 240ms; }
@media (prefers-reduced-motion: reduce) { .whatsapp-float__label, .js .whatsapp-widget:not([data-tip]) .whatsapp-float__label { transition: none; } }
.whatsapp-float__dismiss { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgb(255 255 255 / 0.75); cursor: pointer; transition: background-color var(--fast) ease-out, color var(--fast) ease-out; }
.whatsapp-float__dismiss::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.whatsapp-float__dismiss .icon { width: 14px; height: 14px; }
.whatsapp-float__dismiss:hover { background: rgb(255 255 255 / 0.16); color: #fff; }
.whatsapp-float__dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 2px; color: #fff; }
body:has(dialog[open]) .whatsapp-widget, body:has([aria-modal="true"]) .whatsapp-widget { visibility: hidden; }
/* Phones: the button joins its message after a little scrolling, so it never covers the hero's buttons. */
@media (max-width: 759px) {
  .whatsapp-widget { transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s; }
  .js .whatsapp-widget:not([data-tip]) { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s 240ms; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) { .whatsapp-widget, .js .whatsapp-widget:not([data-tip]) { transition: none; transform: none; } }
@media (max-width: 600px) {
  .whatsapp-widget { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .whatsapp-float { width: 52px; height: 52px; }
}

body:has([data-buy-bar]:not([hidden])) .whatsapp-widget { bottom: calc(86px + env(safe-area-inset-bottom)); }

html[data-signed-in="1"] [data-refund-promo]:not([data-ownership-known]) { visibility: hidden; }

/* Homepage sections. */

/* ---------- Hero ---------- */
/* Phones: photo on top, words on the dark band below, so the headline never
   sits on his face. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--night); color: #fff;
}
.hero__media { position: relative; display: block; aspect-ratio: 16 / 10; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero__media::after { display: none; }

.hero__content {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: var(--s-2) var(--gutter) var(--s-5);
}
.hero__title { font-size: var(--step-hero); line-height: 1.06; letter-spacing: -0.025em; max-width: 13ch; }
.hero__lede { margin-top: var(--s-3); font-size: var(--step-1); line-height: 1.45; color: rgb(255 255 255 / 0.9); max-width: 30rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.hero__actions .button { flex: 1 1 auto; padding-inline: var(--s-4); }
.hero__chip {
  position: absolute; top: var(--s-4); right: var(--gutter);
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-4); border-radius: var(--pill);
  background: rgb(16 14 13 / 0.55); border: 1px solid rgb(255 255 255 / 0.35); color: #fff;
  font-size: 0.875rem; cursor: pointer;
}

/* Wider screens: the photo sits in its own frame on the right at close to
   native resolution, instead of being stretched across the whole hero. */
@media (min-width: 760px) {
  .hero {
    min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    gap: var(--s-7); padding: var(--s-8) max(var(--gutter), calc((100vw - var(--max)) / 2));
  }
  .hero__media::after { display: none; }
  .hero__media { position: relative; inset: auto; order: 2; aspect-ratio: 1; max-width: 34rem; width: 100%; justify-self: end; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }
  .hero__media img { position: absolute; z-index: 0; object-position: 50% 30%; }
  .hero__content { order: 1; padding: 0; max-width: none; margin: 0; }
  .hero__actions .button { flex: none; }
  .hero__chip { top: auto; bottom: var(--s-4); right: var(--s-4); }
}

/* The page's one authored moment: the hero settles in on load. */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: hero-image 1400ms var(--ease-out) both; }
  .hero__title, .hero__lede, .hero__actions { animation: hero-rise 900ms var(--ease-out) both; }
  .hero__lede { animation-delay: 120ms; }
  .hero__actions { animation-delay: 220ms; }
}
@keyframes hero-image { from { opacity: 0.8; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* ---------- Clients and collaborators ---------- */
/* Two endless strips: brand logos in their own colours scrolling left, and collaborators' names scrolling right underneath. */
.clients {
  background: var(--paper-2); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 var(--s-4);
  padding: var(--s-3) max(var(--gutter), calc((100% - var(--max)) / 2));
}
.clients__lead--names { grid-column: 1; grid-row: 2; }
.name-marquee { grid-column: 2 / -1; grid-row: 2; }
.clients__lead { font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; color: var(--ink-2); letter-spacing: 0; white-space: nowrap; }
.logo-marquee, .name-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-track { display: flex; width: max-content; animation: logo-scroll 59.0279165s linear infinite; }
/* Names run the same loop backwards, so they travel left to right. */
.name-track { display: flex; width: max-content; animation: logo-scroll 95s linear infinite reverse; }
.name-track__set { display: flex; align-items: center; }
.name-track__set li {
  flex: none; display: inline-flex; align-items: center; height: 48px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.005em; color: var(--ink-2); white-space: nowrap;
}
.name-track__dot { width: 5px; height: 5px; margin: 0 var(--s-5); border-radius: 50%; background: var(--line-strong); }
.logo-track__set { display: flex; align-items: center; }
.logo-track__set li { flex: none; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
.logo-chip { display: grid; place-items: center; height: 76px; padding: 0 var(--s-6); margin: 0; border-radius: var(--radius-sm); }
.logo-chip img { display: block; height: var(--logo-h, 40px); width: calc(var(--logo-h, 40px) * var(--logo-ratio)); max-width: 180px; transition: transform 280ms var(--ease-out); }

@media (max-width: 759px) {
  .clients { grid-template-columns: 1fr; gap: 0 var(--s-3); padding-block: var(--s-4); height: auto; align-content: center; }
  .clients__lead { grid-column: 1; grid-row: 1; }
  .logo-marquee { grid-column: 1 / -1; margin-inline: calc(var(--gutter) * -1); }
  /* Each ribbon keeps its visible label on phones. */
  .clients__lead--names { position: static; grid-column: 1; grid-row: 3; width: auto; height: auto; clip: auto; overflow: visible; }
  .name-marquee { grid-column: 1 / -1; grid-row: 4; margin-inline: calc(var(--gutter) * -1); }
  .name-track__set li { height: 30px; font-size: 1rem; }
  .name-track__dot { margin: 0 var(--s-4); }
  .name-track { animation-duration: 80s; }
  /* Grouping (proximity + common region): each label sits 4px above its own ribbon,
     chips are only as tall as the tallest logo so no hidden padding pushes the logos
     away, and a hairline with wider space on both sides separates the two groups. */
  .logo-chip { height: 44px; padding: 0 var(--s-5); }
  .clients__lead { line-height: 1.2; margin-bottom: var(--s-1); }
  .clients__lead--names { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .logo-chip img { height: calc(var(--logo-h, 40px) * 0.82); width: calc(var(--logo-h, 40px) * 0.82 * var(--logo-ratio)); }
  .logo-track { animation-duration: 45.13875s; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track, .name-track { animation: none; width: auto; overflow-x: auto; }
  .logo-track__set[aria-hidden="true"], .name-track__set[aria-hidden="true"] { display: none; }
  .logo-marquee, .name-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Courses ---------- */
.courses { padding-top: var(--s-6); }
@media (max-width: 759px) {
  .courses .section__head { margin-bottom: var(--s-4); }
  .courses .section__head p { font-size: var(--step-0); margin-top: var(--s-2); }
}

/* ---------- Work ---------- */
.section__foot { margin-top: var(--s-4); }

/* ---------- About ---------- */
.about__text { display: grid; gap: var(--s-4); }
.about__text h2 { font-size: var(--step-3); }
.about__text p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; max-width: 36rem; }
.about__text .text-link { justify-self: start; }
@media (min-width: 860px) {
  .about__text { grid-template-columns: 1fr 1.1fr; column-gap: var(--s-8); align-items: start; }
  .about__text h2 { grid-row: 1 / span 3; }
}

/* ---------- Voices ---------- */
/* Phones: the three industry quotes swipe sideways instead of stacking. */
.voices__featured { margin-bottom: var(--s-6); grid-auto-columns: min(84vw, 22rem); align-items: start; }
.voice { padding-top: var(--s-4); border-top: 1px solid var(--night-line); }
/* Author first on phones, so a short quote ends in open space rather than
   leaving a hole under its name. */
@media (max-width: 859px) {
  .voice { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
  .voice figcaption { margin: 0 0 var(--s-3); }
  .voice blockquote p { font-size: var(--step-1); line-height: 1.35; }
}
@media (min-width: 860px) {
  .voices__featured[data-rail] { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); overflow: visible; margin: 0 auto var(--s-7); padding: 0; max-width: var(--max); }
}
.voices .section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }

/* ---------- Hire ---------- */
.hire {
  display: grid; gap: var(--s-5);
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2));
}
.hire > * { max-width: none; margin: 0; }
.hire__text { display: grid; gap: var(--s-3); }
.hire__text h2 { font-size: var(--step-3); }
.hire__text p { color: #fff; font-size: var(--step-1); line-height: 1.5; max-width: 34rem; }
.hire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.hire .text-link--light { color: #fff; }
@media (min-width: 860px) {
  .hire { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .hire__actions { justify-content: flex-end; }
}


/* Listing and homepage cards on phones: two-line summaries keep the list short. */
@media (max-width: 699px) {
  .course-card__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- Homepage "Popular courses" ---------- */
.popular__grid { display: grid; gap: var(--s-4); }
.popular__side { display: grid; gap: var(--s-3); }
.pop {
  position: relative; display: grid; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.pop:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.pop__cover { background: var(--paper-2); overflow: hidden; }
.pop__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.pop:hover .pop__cover img { transform: scale(1.03); }
.pop__body { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) var(--s-5) var(--s-5); }
.pop__title { font-size: var(--step-1); line-height: 1.25; }
.pop__title a { text-decoration: none; }
.pop__title a::after { content: ""; position: absolute; inset: 0; }
.pop:focus-within { outline: 2.5px solid var(--focus); outline-offset: 3px; }
.pop__title a:focus-visible { outline: none; }
.pop__hook { color: var(--ink-2); line-height: 1.5; }
.pop__meta { color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.pop__price { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-1); font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.pop__price .icon { width: 22px; height: 22px; color: var(--brown); transition: transform var(--fast) var(--ease-out); }
.pop:hover .pop__price .icon { transform: translateX(4px); }
.pop--lead .pop__cover { aspect-ratio: 16 / 9; }
.pop--lead .pop__title { font-size: var(--step-2); }
.pop--lead .pop__hook { font-size: var(--step-1); }
.popular__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }

/* Phones: lead card in full, the other two as compact rows. */
@media (max-width: 959px) {
  .popular__side .pop { grid-template-columns: 7.5rem 1fr; align-items: center; }
  .popular__side .pop__cover { aspect-ratio: 16 / 9; margin: var(--s-3) 0 var(--s-3) var(--s-3); border-radius: var(--radius-sm); align-self: start; }
  .popular__side .pop__body { padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); gap: 2px; }
  .popular__side .pop__title { font-size: 1.0625rem; }
  .popular__side .pop__hook { display: none; }
  .popular__side .pop__meta { font-size: 0.875rem; }
  .popular__side .pop__price { font-size: 1.125rem; margin-top: 2px; }
  .popular__actions .button { width: 100%; }
  .popular__actions { justify-content: center; }
}
/* Desktop: the lead course as one wide card (cover left, details right),
   the other two side by side below it. Covers keep their 16:9 shape. */
@media (min-width: 960px) {
  .popular__grid { gap: var(--s-5); }
  .pop--lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  .pop--lead .pop__cover { aspect-ratio: 16 / 9; height: 100%; }
  .pop--lead .pop__body { padding: var(--s-6) var(--s-6) var(--s-6) var(--s-5); gap: var(--s-3); }
  .pop--lead .pop__title { font-size: var(--step-2); }
  .popular__side { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .popular__side .pop { grid-template-columns: 12rem 1fr; align-items: center; }
  .popular__side .pop__cover { aspect-ratio: 16 / 9; margin: var(--s-4) 0 var(--s-4) var(--s-4); border-radius: var(--radius-sm); }
  .popular__side .pop__body { padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4); gap: var(--s-1); }
  .popular__side .pop__hook { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce) { .pop, .pop__cover img { transition: none; } }

/* ---------- Testimonials on phones: one featured voice + one deck ---------- */
.review--narrow-only { display: none; }
@media (max-width: 859px) {
  .voices .voice--wide-only { display: none; }
  .voices .review--narrow-only { display: block; }
  .voices .voices__featured[data-rail] { display: block; overflow: visible; margin: 0 0 var(--s-6); padding: 0; }
  .voices .voice--lead { flex-direction: column; border-top: 0; padding-top: 0; }
  .voices .voice--lead blockquote p { font-size: var(--step-2); line-height: 1.3; }
  .voices .voice--lead figcaption { margin: var(--s-4) 0 0; }
  .voices .reviews__head .reviews__title { display: none; }
  .voices .reviews__head { margin-bottom: var(--s-3); border-top: 1px solid var(--night-line); padding-top: var(--s-5); }
  .voices .reviews__rail { grid-auto-columns: 86%; scroll-snap-type: x mandatory; align-items: start; }
  .deck-controls:not([hidden]) { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
  .deck-controls__count { margin-right: auto; color: var(--on-night-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
  .deck-controls .icon { width: 18px; height: 18px; }
  .deck-controls .icon--play { display: none; fill: currentColor; }
  .deck-controls [aria-pressed="true"] .icon--pause { display: none; }
  .deck-controls [aria-pressed="true"] .icon--play { display: block; }
}
@media (min-width: 860px) { .deck-controls { display: none !important; } }

/* Phones: the hero fills the landing screen below the header. Clients follow
   on scroll. Small viewports account for the browser toolbars. */
@media (max-width: 759px) {
  .hero { min-height: calc(100vh - var(--header-h) - 1px); }
  @supports (height: 100svh) { .hero { min-height: calc(100svh - var(--header-h) - 1px); } }
  .hero { justify-content: space-between; }
  .hero__media { flex: none; align-self: center; width: calc(100% - var(--gutter) * 2); max-width: 34rem; margin-top: var(--s-4); aspect-ratio: 1; min-height: 0; border-radius: var(--radius); overflow: hidden; }
  @supports (height: 1svh) { .hero__media { max-width: min(34rem, 42svh); } }
  .hero__media img { object-fit: contain; object-position: center; }
  /* Title, description and buttons centred in the dark band below the photo. */
  .hero__content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-5); }
}

.js .logo-track:not([data-ready]) { animation-play-state: paused; }

/* Course page: phone = one column; desktop = content left, sticky buy panel right. */

.course {
  max-width: var(--max); margin: 0 auto; padding: 0 0 var(--section-y);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.course > *:not(.course__cover) { padding-inline: var(--gutter); }

.breadcrumb {
  display: none; align-items: center; gap: var(--s-1);
  font-size: 0.9375rem; color: var(--ink-2); padding-block: var(--s-4);
}
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb .icon { width: 1em; height: 1em; }
.breadcrumb span { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.course__cover { aspect-ratio: 16 / 9; background: var(--night); overflow: hidden; }
.course__cover img { width: 100%; height: 100%; object-fit: cover; }

.course__head { padding-top: var(--s-4); }
.course__head h1 { font-size: var(--step-3); }
.course__promise { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--step-1); line-height: 1.45; max-width: 40rem; }
.course__facts {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-3);
  color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums;
}
.course__facts li { display: inline-flex; align-items: center; gap: 0.4em; }
.course__facts .icon { width: 1.1em; height: 1.1em; }

/* Buy box */
.buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding-block: var(--s-4) var(--s-5); }
.buy__price { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.buy .button { flex: 1 1 11rem; max-width: 16rem; }
.buy__view { width: 100%; text-align: right; font-weight: 600; color: var(--brown); min-height: 32px; }
[data-add-to-cart].is-added { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
[data-add-to-cart].is-added .icon { display: none; }

/* Fit check */
.fit h2 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.fit ul {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  padding: var(--s-1) var(--s-4);
}
.fit li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-top: 1px solid var(--line); line-height: 1.45; }
.fit li:first-child { border-top: 0; }
.fit li .icon { width: 1.4em; height: 1.4em; margin-top: 0.05em; color: var(--brown); }
.fit li strong { display: block; font-weight: 600; }
.fit li span { color: var(--ink-2); }
.fit li strong { color: var(--ink); }

/* Tabs */
.tabs { margin-top: var(--s-6); }
.tabs__list {
  display: flex; gap: var(--s-2); border-bottom: 1px solid var(--line);
  position: sticky; top: var(--header-h); z-index: 5; background: var(--paper);
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.tabs__list [role="tab"] {
  min-height: 48px; padding: 0 var(--s-3); border: 0; background: none; cursor: pointer;
  font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs__list [role="tab"]:hover { color: var(--ink); }
.tabs__list [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brown); }
.tabs__panel { padding-top: var(--s-5); }
.tabs__panel + .tabs__panel { margin-top: var(--s-6); }
.tabs.is-ready .tabs__panel + .tabs__panel { margin-top: 0; }
.tabs.is-ready .tabs__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabs__heading { font-size: var(--step-2); margin-bottom: var(--s-3); }
.tabs__panel h3 { font-size: var(--step-1); margin: var(--s-6) 0 var(--s-3); }

.prose p { color: var(--ink-2); line-height: 1.65; max-width: 40rem; }
.prose p + p { margin-top: var(--s-3); }
.checklist { display: grid; gap: var(--s-3); max-width: 44rem; }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; line-height: 1.5; color: var(--ink-2); }
.checklist li strong { color: var(--ink); font-weight: 600; }
.checklist .icon {
  width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%;
  background: var(--brown); color: #fff; stroke-width: 2.5;
}
.course-note { margin-top: var(--s-5); font-size: 0.9375rem; color: var(--ink-2); }

/* Curriculum */
.curriculum__total { color: var(--ink-2); font-size: 0.9375rem; margin-bottom: var(--s-3); font-variant-numeric: tabular-nums; }
.curriculum-chapters { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.curriculum__chapter { border-bottom: 1px solid var(--line); }
.curriculum__group > summary { cursor: pointer; display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-4) 0; }
.curriculum__group > summary::before { content: '›'; flex-shrink: 0; transition: transform 150ms; }
.curriculum__group[open] > summary::before { transform: rotate(90deg); }
.curriculum__group > summary::-webkit-details-marker { display: none; }
.curriculum__group > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.curriculum__chapter-title { flex: 1; font-weight: 600; min-width: 0; }
.curriculum__empty { color: var(--ink-2); padding-bottom: var(--s-4); }
.curriculum { margin: 0; padding: 0; list-style: none; counter-reset: lesson; border-top: 1px solid var(--line); }
.curriculum__item {
  counter-increment: lesson; display: grid; grid-template-columns: 2.25rem 1fr auto; gap: var(--s-3); align-items: baseline;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line); line-height: 1.4;
}
.curriculum__item::before { content: counter(lesson); color: var(--ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.curriculum__item--deco .curriculum__title { font-weight: 600; }
.curriculum__len { color: var(--ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; }
.curriculum__len .icon { width: 1em; height: 1em; }

/* Reviews on light ground */
.reviews__intro { color: var(--ink-2); margin-bottom: var(--s-4); }
.course-reviews { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .course-reviews { grid-template-columns: 1fr 1fr; align-items: start; } }
.review--light figure { background: var(--card); border-color: var(--line); }
.review--light blockquote p { color: var(--ink); }
.review--light figcaption span span { color: var(--ink-2); }
.review--light .review__more { color: var(--brown); }

/* Teacher and related */
.teacher { margin-top: var(--section-y); padding-top: var(--s-6); border-top: 1px solid var(--line); display: grid; gap: var(--s-3); }
.teacher h2, .related h2 { font-size: var(--step-2); }
.teacher p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; max-width: 40rem; }
.page-workshop .teacher p { font-size: var(--step-0); }
.teacher .text-link { justify-self: start; }
.related { margin-top: var(--s-7); }
.related ul { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.mini-course {
  display: grid; grid-template-columns: 6.5rem 1fr auto; gap: var(--s-3); align-items: center;
  padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  text-decoration: none; transition: box-shadow 240ms var(--ease-out);
}
.mini-course:hover { box-shadow: var(--shadow); }
.mini-course img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.mini-course__body { display: grid; gap: 2px; line-height: 1.3; }
.mini-course__body strong { font-weight: 600; }
.mini-course__body span { color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.mini-course .icon { color: var(--ink-2); }

/* Sticky buy bar (phones) */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
  background: rgb(250 248 245 / 0.97); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -16px rgb(31 29 27 / 0.3);
  transition: transform 300ms var(--ease-out);
}
.buy-bar.is-away { transform: translateY(110%); }
.buy-bar p { display: grid; line-height: 1.2; min-width: 0; }
.buy-bar strong { font-family: var(--font-display); font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.buy-bar p span { font-size: 0.8125rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-course .site-footer { padding-bottom: calc(var(--s-5) + 4.5rem + env(safe-area-inset-bottom)); }

@media (min-width: 960px) {
  .course {
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr); column-gap: var(--s-7);
    padding-inline: var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter));
  }
  .course > *:not(.course__cover) { padding-inline: 0; }
  .breadcrumb { display: flex; grid-column: 1 / -1; }
  .course__cover { grid-column: 1; border-radius: var(--radius); }
  .course > :not(.breadcrumb):not(.buy) { grid-column: 1; }
  .buy {
    grid-column: 2; grid-row: 2 / span 6; align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-5));
    flex-direction: column; align-items: stretch; padding: var(--s-5);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .buy .button { max-width: none; flex: none; }
  .buy__view { text-align: center; }
  .tabs__list { margin-inline: 0; padding-inline: 0; }
  .buy-bar { display: none !important; }
  .page-course .site-footer { padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
}

.buy__help { width: 100%; font-size: 0.9375rem; color: var(--ink-2); }
.buy__help a { color: var(--brown); font-weight: 600; }
@media (min-width: 960px) {
  .course > .buy { padding: var(--s-5); gap: var(--s-3); }
  .course__head { padding-bottom: var(--s-5); }
  .buy__help { text-align: center; padding-top: var(--s-2); border-top: 1px solid var(--line); }
}
@media (max-width: 959px) { .buy__help { display: none; } }

/* Long "What you'll learn" lists show five items until expanded (needs JS). */
.js .checklist[data-collapsed] .checklist__more { display: none; }
.checklist__toggle { border: 0; background: none; padding: 0; margin-top: var(--s-3); font: inherit; font-weight: 600; cursor: pointer; }
html:not(.js) .checklist__toggle { display: none; }

/* --- Review fixes --- */
/* Fit card: heading inside the card, as in the approved comp. */
.fit { margin-inline: var(--gutter); padding: var(--s-4) var(--s-4) var(--s-1); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.course > .fit { padding-inline: var(--s-4); }
.fit h2 { margin-bottom: var(--s-1); }
.fit ul { border: 0; padding: 0; background: none; border-radius: 0; }

/* Overview: scannable first. Details and the long description open on request. */
.overview__first { margin-top: 0 !important; }
.js .checklist[data-collapsed] .checklist__detail { display: none; }
.js .prose[data-clamped] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.js .prose[data-clamped] p + p { display: none; }
.prose__toggle { border: 0; background: none; padding: 0; margin-top: var(--s-2); font: inherit; font-weight: 600; cursor: pointer; }
html:not(.js) .prose__toggle { display: none; }

/* Desktop buy panel carries the facts. */
.buy__facts { display: none; }
@media (min-width: 960px) {
  .course > .fit { margin-inline: 0; }
  .buy__facts { display: grid; gap: var(--s-2); color: var(--ink-2); font-size: 0.9375rem; padding: var(--s-1) 0 var(--s-2); font-variant-numeric: tabular-nums; }
  .buy__facts li { display: flex; align-items: center; gap: var(--s-2); }
  .buy__facts .icon { width: 1.1em; height: 1.1em; }
}

/* Opaque sticky bar. */
.buy-bar { background: var(--paper); }

/* The footer instrument links to Music Theory Simplified: not on its own page. */
.course-music-theory-simplified .scale-toy__link { display: none; }

/* Ambient motifs, inner pages, cart, checkout, login, quiz. */

/* ---------- Ambient music motifs (see js/ambient.js) ---------- */
[data-ambient] { position: relative; isolation: isolate; }
[data-ambient] > :not(.ambient) { position: relative; z-index: 1; }

.ambient {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: currentColor; opacity: 0.09;
  /* Full strength in the side margins, softer behind the content column so
     lines and notes don't compete with text. */
  --amb-mask: linear-gradient(to right, transparent, #000 7%, rgb(0 0 0 / 0.38) 20%, rgb(0 0 0 / 0.38) 80%, #000 93%, transparent);
  -webkit-mask-image: var(--amb-mask); mask-image: var(--amb-mask);
}
@media (max-width: 759px) { .ambient { --amb-mask: linear-gradient(to right, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.55)); } }
.ambient svg { display: block; overflow: visible; }
.ambient--staff { opacity: 0.08; }
.section--dark .ambient, .scale-toy .ambient, .page-hero--dark .ambient { opacity: 0.13; }
.ambient__drift { animation: ambient-drift var(--dur, 50s) linear infinite; animation-delay: var(--delay, 0s); animation-play-state: paused; }
.ambient__note { animation: ambient-note var(--dur, 90s) linear infinite; animation-delay: var(--delay, 0s); animation-play-state: paused; }
.ambient.is-playing .ambient__drift, .ambient.is-playing .ambient__note { animation-play-state: running; }
@keyframes ambient-drift { from { transform: translateX(0); } to { transform: translateX(var(--dist, -1200px)); } }
@keyframes ambient-note {
  0% { transform: translateX(0); opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { transform: translateX(var(--dist, -1400px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ambient { display: none; } }

/* ---------- Inner page hero ---------- */
.policy-content { max-width: calc(76ch + 2 * var(--gutter)); margin-inline: auto; line-height: 1.8; overflow-wrap: anywhere; }
.policy-content h2 { font-size: var(--step-1); margin: var(--s-5) 0 var(--s-2); }
.policy-content p, .policy-content ul { margin-block: var(--s-3); }
.policy-content ul { list-style: disc; padding-inline-start: 1.4em; }
.policy-content li + li { margin-top: var(--s-3); }
.policy-content a { color: var(--brown); text-decoration: underline; text-underline-offset: .2em; }
.policy-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); padding-bottom: var(--s-3); margin-bottom: var(--s-4); font-weight: 600; }
.page-hero { padding: var(--s-7) var(--gutter) var(--s-6); }
.page-hero > * { max-width: var(--max); margin-inline: auto; }
.page-hero h1 { font-size: var(--step-3); }
.page-hero p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; max-width: 40rem; }
.page-hero--dark { background: var(--night); color: var(--on-night); padding-block: var(--s-8) var(--s-7); }
.page-hero--dark p { color: var(--on-night-2); }

/* ---------- Courses catalog: sidebar filters ---------- */
.catalog-hero { padding-bottom: var(--s-4); }
.page-hero--dark.catalog-hero { padding-bottom: var(--s-7); }
.inline-link { color: var(--brown); font-weight: 600; text-underline-offset: 0.2em; }
.page-hero--dark .inline-link { color: var(--brown-on-night); }
.page-hero--dark + .catalog-layout { padding-top: var(--s-6); }
.catalog-layout {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--section-y);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
}
.catalog-bar {
  display: flex; align-items: center; gap: var(--s-3);
  position: sticky; top: var(--header-h); z-index: 6; background: var(--paper);
  margin-inline: calc(var(--gutter) * -1); padding: var(--s-2) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.catalog-bar__count { color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; margin-right: auto; }
.filter-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--card); font-weight: 600; cursor: pointer;
}
.filter-toggle .icon { width: 1.1em; height: 1.1em; }
.filter-toggle__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--brown); color: #fff;
  font-size: 0.75rem; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
.sort { position: relative; display: inline-flex; align-items: center; }
.sort select {
  appearance: none; min-height: 44px; padding: 0 2.25rem 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--card); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
}
.sort .icon { position: absolute; right: 0.75rem; width: 1em; height: 1em; pointer-events: none; color: var(--ink-2); }

.filters-panel__head { display: none; }
.filters-panel__body { display: grid; gap: var(--s-5); }
@media (min-width: 960px) {
  .filters-panel__body { gap: var(--s-4); }
  .filters-panel legend { margin-bottom: var(--s-1); }
}
.filters-panel fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.filters-panel legend { font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--s-2); padding: 0; }
.opt {
  display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-2);
  margin-inline: calc(var(--s-2) * -1); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-2);
}
.opt:hover { background: var(--paper-2); color: var(--ink); }
.opt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--brown); cursor: pointer; }
.opt input:checked + span { color: var(--ink); font-weight: 600; }
.opt__count { margin-left: auto; font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 400 !important; }
.filters-panel__reset { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; justify-self: start; min-height: 44px; }
.filters-panel__foot { display: none; }
.filters-scrim { position: fixed; inset: 0; z-index: 60; background: rgb(24 22 20 / 0.45); }
.course-grid--catalog { gap: var(--s-4); }
.catalog-empty { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-6) var(--s-5); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); }
.catalog-empty strong { color: var(--ink); }
.button--outline { border-color: var(--line); background: var(--card); color: var(--ink); }
.button--outline:hover { border-color: var(--line-strong); }

/* Phones: filters become a bottom sheet. */
@media (max-width: 959px) {
  .filters-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 86vh;
    display: flex; flex-direction: column;
    background: var(--paper); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 50px -20px rgb(0 0 0 / 0.45);
    transform: translateY(105%); visibility: hidden;
    transition: transform 320ms var(--ease-out), visibility 0s linear 320ms;
  }
  .filters-panel.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .filters-panel__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--gutter); border-bottom: 1px solid var(--line); }
  .filters-panel__head h2 { font-size: var(--step-1); }
  .filters-panel__body { overflow-y: auto; padding: var(--s-4) var(--gutter); overscroll-behavior: contain; }
  .filters-panel__foot { display: block; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .filters-panel__foot .button { width: 100%; }
  html.sheet-open { overflow: hidden; }
}

/* Desktop: filters in a sidebar on the left, in normal page flow. */
@media (min-width: 960px) {
  .catalog-layout { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--s-7); align-items: start; }
  /* Row 1: refund chips across both columns. Rows 2-3: sidebar beside the bar and results.
     Every item is placed explicitly; auto-placement put the full-width chips below the
     two-row sidebar and pushed the results under the filters. */
  .refund-filter { grid-column: 1 / -1; grid-row: 1; }
  .catalog-bar { grid-column: 2; grid-row: 2; position: static; margin: 0; padding: 0 0 var(--s-2); border: 0; }
  .filter-toggle { display: none; }
  .filters-panel { grid-column: 1; grid-row: 2 / span 2; padding-right: var(--s-2); }
  .catalog-results { grid-column: 2; grid-row: 3; }
  .filters-scrim { display: none !important; }
  .course-grid--catalog { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1240px) { .course-grid--catalog { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Quiz band ---------- */
.quiz-band > * { max-width: 46rem; }
.quiz-band__intro { display: grid; gap: var(--s-3); }
.quiz-band__intro h2 { font-size: var(--step-3); }
.quiz-band__intro p { font-size: var(--step-1); line-height: 1.5; color: #fff; }
.quiz-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-2); }
.quiz-band .text-link--light { color: #fff; }
.quiz { margin-top: var(--s-5); }
.quiz__card { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: var(--s-5); box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.5); }
.quiz__card:focus { outline: none; }
.quiz__progress { height: 4px; border-radius: var(--pill); background: var(--paper-2); overflow: hidden; }
.quiz__progress span { display: block; height: 100%; width: 33%; background: var(--brown); transition: width 300ms var(--ease-out); }
.quiz__step { margin-top: var(--s-3); font-size: 0.875rem; color: var(--ink-2); }
.quiz__q { border: 0; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.quiz__q legend { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.2; margin-bottom: var(--s-3); padding: 0; }
.choice { display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink-2); line-height: 1.4; transition: border-color var(--fast) linear, background-color var(--fast) linear;
}
.choice strong { color: var(--ink); font-weight: 600; }
.choice:hover span { border-color: var(--line-strong); }
.choice input:checked + span { border-color: var(--brown); background: var(--selected); }
.choice input:focus-visible + span { outline: 2.5px solid var(--focus); outline-offset: 2px; }
/* Tick-box answers (pick several): a small check square on the right. */
.quiz__hint { margin: calc(var(--s-2) * -1) 0 var(--s-1); color: var(--ink-2); font-size: 0.9375rem; }
.choice--check span { position: relative; padding-right: calc(var(--s-4) * 2 + 20px); }
.choice--check span::after {
  content: ""; position: absolute; top: 50%; right: var(--s-4); width: 20px; height: 20px; margin-top: -10px;
  border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--card) no-repeat center / 14px;
}
.choice--check input:checked + span::after {
  border-color: var(--brown); background-color: var(--brown);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (max-width: 559px) {
  .quiz__q[data-q="goal"] .choice span { padding-block: var(--s-2); font-size: 0.9375rem; }
}
.quiz__error { margin-top: var(--s-3); color: var(--error); font-weight: 600; font-size: 0.9375rem; }
.quiz__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); }
.quiz__nav .button--primary { margin-left: auto; }
.quiz__nav .text-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.quiz__result h3 { font-size: var(--step-2); margin-bottom: var(--s-2); }
.picks { border-top: 1px solid var(--line); }
.pick { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); position: relative; }
.pick img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.pick__body { display: grid; gap: var(--s-1); line-height: 1.35; }
.pick h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.25; margin: 0; }
.pick h4 a { text-decoration: none; }
.pick h4 a::after { content: ""; position: absolute; inset: 0; }
.pick:hover h4 a { text-decoration: underline; text-underline-offset: 0.2em; }
.pick__meta { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pick__why { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 520px) { .pick { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .catalog-bar__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sort { margin-left: auto; }
}
.ambient { max-width: none !important; margin: 0 !important; }

/* ---------- Portfolio ---------- */
.work-library { padding-top: var(--s-6); }
.work-grid { display: grid; gap: var(--s-6) var(--s-5); }
@media (min-width: 700px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-grid .work-card__title { color: var(--ink); }
.work-grid .work-card__title span, .work-grid .work-card__source { color: var(--ink-2); }
.work-grid .work-card__role { color: var(--brown); }
.work-card__media--still img { filter: saturate(0.9); }

/* ---------- About ---------- */
.refund-filter { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); border: 0; padding: 0; min-width: 0; }
.refund-filter legend { margin-bottom: var(--s-2); font-weight: 600; }
.refund-filter .chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.refund-filter .chip:has(input:checked) { border-color: var(--brown); background: var(--paper-2); }
.refund-filter .chip:focus-within { outline: 2px solid var(--brown); outline-offset: 2px; }
.about-hero__grid { display: grid; gap: var(--s-6); align-items: center; }
.about-hero h1 { font-size: var(--step-hero); line-height: 1.05; }
.about-hero p { font-size: var(--step-2); line-height: 1.35; color: var(--on-night); max-width: 30rem; }
.about-hero__photo { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }
.about-hero__photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
@media (min-width: 960px) {
  .about-hero__grid { grid-template-columns: 1.2fr 1fr; gap: var(--s-8); }
  .about-hero__photo { aspect-ratio: 1; max-width: 26rem; justify-self: end; width: 100%; }
}
.about-story__grid { display: grid; gap: var(--s-4); }
.about-story__grid h2 { font-size: var(--step-3); }
.about-story__text { display: grid; gap: var(--s-4); }
.about-story__text p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; max-width: 36rem; }
.about-story__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
@media (min-width: 860px) { .about-story__grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-8); align-items: start; } }
.credits { border-top: 1px solid var(--night-line); }
.credits li {
  display: grid; gap: 2px var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--night-line);
}
@media (min-width: 760px) { .credits li { grid-template-columns: 1fr auto; align-items: baseline; } }
.credit__work { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); }
.credit__work span { font-family: var(--font-body); font-weight: 400; color: var(--on-night-2); }
.credit__role { color: var(--brown-on-night); font-size: 0.9375rem; }
.voices__featured--light .voice { border-top-color: var(--line); }
.voices__featured--light .voice figcaption span span { color: var(--ink-2); }
.about-gear { padding-top: 0; }
.about-gear__card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-3); }
.about-gear__card h2 { font-size: var(--step-2); }
.about-gear__card p { color: var(--ink-2); }
.about-gear__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.about-gear__links a { color: var(--brown); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.about-gear__note { font-size: var(--step--1); }

/* ---------- Workshops + newsletter ---------- */
.notice-card {
  display: grid; gap: var(--s-4); padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow);
}
@media (min-width: 760px) { .notice-card { grid-template-columns: auto 1fr; gap: var(--s-5); padding: var(--s-7); } }
.notice-card__icon { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--brown); color: #fff; }
.notice-card__body { display: grid; gap: var(--s-3); }
.notice-card__body h2 { font-size: var(--step-2); }
.notice-card__body > p { color: var(--ink-2); }
.notice-card__alt { font-size: 0.9375rem; }
.notice-card__alt a { color: var(--brown); font-weight: 600; }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--s-2); max-width: 32rem; }
.inline-form input { flex: 1 1 14rem; }
.inline-form .button { flex: none; }
.inline-form__msg { width: 100%; font-size: 0.9375rem; font-weight: 500; }
.inline-form__msg.is-ok { color: var(--success); }
.inline-form__msg.is-error { color: var(--error); }
.workshop-voices { padding-top: 0; }
.workshop-voices .voices__featured { margin-bottom: var(--s-6); }

/* ---------- Form fields (checkout, login, email) ---------- */
input[type="email"], input[type="text"], input[type="password"], input:not([type]), select {
  width: 100%; min-height: 48px; padding: 0 var(--s-4); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font: inherit; font-size: 1rem;
  transition: border-color var(--fast) linear, box-shadow var(--fast) linear;
}
input::placeholder { color: var(--placeholder); }
input:hover, select:hover { border-color: var(--line-strong); }
input:focus-visible, select:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 1px; border-color: var(--line-strong); }
.field { display: grid; gap: var(--s-1); }
.field label { font-weight: 600; font-size: 0.9375rem; display: grid; gap: var(--s-1); }
.field__hint { font-size: 0.875rem; color: var(--ink-2); }
.field__error { display: none; font-size: 0.875rem; color: var(--error); font-weight: 500; }
.field.is-invalid input, .field.is-invalid select { border-color: var(--error-line); }
.field.is-invalid .field__error { display: block; }
.field.is-invalid .field__hint { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.select { position: relative; }
.select select { appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select .icon { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); width: 1em; height: 1em; pointer-events: none; color: var(--ink-2); }
.password { position: relative; }
.password input { padding-right: 4.5rem; }
.password__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 44px; padding: 0 var(--s-3); border: 0; background: none; color: var(--brown); font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); }

/* ---------- Shop: cart, checkout, order ---------- */
.shop { padding-top: var(--s-6); }
.shop__title { font-size: var(--step-3); margin-bottom: var(--s-5); }
.shop__grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .shop__grid { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); gap: var(--s-7); } .shop__grid .summary-card { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.line-items { display: grid; gap: var(--s-3); }
.line-item {
  display: grid; grid-template-columns: 6.5rem 1fr auto auto; gap: var(--s-3); align-items: center;
  padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.line-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.line-item__body { display: grid; gap: 2px; line-height: 1.3; min-width: 0; }
.line-item__body a { font-weight: 600; text-decoration: none; }
.line-item__body a:hover { text-decoration: underline; }
.line-item__body span { color: var(--ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.line-item__price { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.line-items--compact .line-item { grid-template-columns: 4.5rem 1fr auto; padding: var(--s-2) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
@media (max-width: 520px) {
  .line-item { grid-template-columns: 5rem 1fr auto; }
  .line-item__remove { grid-column: 3; grid-row: 1; align-self: start; }
  .line-item__price { grid-column: 2; }
}
.summary-card { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.summary-card h2 { font-size: var(--step-1); }
.summary-card__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.0625rem; }
.summary-card__row strong { font-family: var(--font-display); font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.summary-card .text-link { justify-self: start; }
.shop__more { margin-top: var(--s-8); }
.shop__more h2 { font-size: var(--step-2); margin-bottom: var(--s-4); }
.shop__more-list { display: grid; gap: var(--s-2); }
@media (min-width: 760px) { .shop__more-list { grid-template-columns: 1fr 1fr; } }
.empty-state { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-7) var(--s-5); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-state h2 { font-size: var(--step-2); }
.empty-state p { color: var(--ink-2); }
.empty-state__icon { width: 48px; height: 48px; color: var(--brown); }
.empty-state__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }

.demo-banner { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); border-radius: var(--radius-sm); background: var(--notice); color: var(--on-notice); font-size: 0.9375rem; line-height: 1.45; }
.demo-banner .icon { width: 1.3em; height: 1.3em; flex: none; margin-top: 1px; }
.checkout-form { display: grid; gap: var(--s-6); }
.form-block { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.form-block legend { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); margin-bottom: var(--s-3); padding: 0; }
.pay-tabs [role="tablist"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.pay-tabs [role="tab"] {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1); min-height: 64px; padding: var(--s-2);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-2); font-weight: 600; cursor: pointer;
}
.pay-tabs [role="tab"] .icon { width: 1.4em; height: 1.4em; }
.pay-tabs [role="tab"][aria-selected="true"] { border-color: var(--brown); color: var(--ink); background: var(--selected); }
.pay-panel { display: grid; gap: var(--s-4); }
.pay-panel__lead { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.form-error { color: var(--error); font-weight: 600; }
.checkout-form__pay { width: 100%; min-height: 56px; font-size: 1.125rem; }
.checkout-form__pay:disabled { opacity: 0.7; cursor: progress; }
.checkout-form__terms { font-size: 0.875rem; color: var(--ink-2); text-align: center; margin-top: calc(var(--s-4) * -1); }
.checkout-form__terms a { color: var(--ink); }
@media (max-width: 959px) { .shop__grid--checkout .summary-card { order: -1; } }

/* Order confirmation: one centred column; the receipt card keeps its own alignment. */
.order { text-align: center; }
.order > * { max-width: 40rem; }
.order__icon { display: block; width: 56px; height: 56px; color: var(--success); margin: 0 auto var(--s-3); }
.order__lede { color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; margin: calc(var(--s-3) * -1) 0 var(--s-5); }
.order .summary-card { text-align: left; }
.order__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.order .empty-state { justify-items: center; }
.order .empty-state__actions { justify-content: center; }

/* ---------- Login ---------- */
.auth { min-height: 70vh; display: grid; place-items: center; }
.auth__card { width: 100%; max-width: 26rem; padding: var(--s-6) var(--s-5); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: var(--s-4); }
.auth__card h1 { font-size: var(--step-2); }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--pill); background: var(--paper-2); }
.auth__tabs [role="tab"] { min-height: 44px; border: 0; border-radius: var(--pill); background: none; color: var(--ink-2); font-weight: 600; cursor: pointer; }
.auth__tabs [role="tab"][aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgb(31 29 27 / 0.1); }
.auth__form { display: grid; gap: var(--s-4); }
.auth__form .button { width: 100%; }
.auth__forgot { justify-self: end; font-size: 0.9375rem; color: var(--brown); font-weight: 600; margin-top: calc(var(--s-2) * -1); }
.auth__notice { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--radius-sm); background: var(--notice); color: var(--on-notice); }
.auth__notice p { font-size: 0.9375rem; }
.auth__notice .button { justify-self: start; margin-top: var(--s-1); }

/* Workshops on phones: featured quotes stack, quote first, no side-scroll. */
@media (max-width: 859px) {
  .workshop-voices .voices__featured[data-rail] { display: grid; grid-auto-flow: row; overflow: visible; margin-inline: 0; padding-inline: 0; gap: var(--s-5); }
  .workshop-voices .voice { flex-direction: column; }
  .workshop-voices .voice figcaption { margin: var(--s-3) 0 0; }
}

/* Footer: the motif lives only behind "Play a scale", fading out before the
   footer's divider so the two never cross. */
.scale-toy[data-ambient] .ambient {
  -webkit-mask-image: var(--amb-mask), linear-gradient(to bottom, #000 70%, transparent);
  -webkit-mask-composite: source-in; mask-image: var(--amb-mask), linear-gradient(to bottom, #000 70%, transparent);
  mask-composite: intersect; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
}

/* ---------- Region pricing ----------
   Every price is in the HTML in both currencies; <html data-region> picks one (store.js).
   Until the region is known on a first visit, prices hold their space but stay invisible. */
.only-in, .only-intl { display: none; }
html[data-region="IN"] .only-in,
html[data-region="INTL"] .only-intl { display: inline; }
html:not([data-region]) .price { visibility: hidden; }

/* ---------- Covers ---------- */
.cover-fallback {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9;
  background: var(--night-2); color: var(--brown-on-night);
  font-family: var(--font-display); font-size: 2rem; border-radius: inherit;
}
.course-card__cover { position: relative; }
.course-card__badge {
  position: absolute; top: var(--s-3); left: var(--s-3);
  padding: 2px var(--s-2); border-radius: var(--pill);
  background: var(--night); color: var(--on-night);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
}

/* ---------- Course page extras ---------- */
.plain-list { display: grid; gap: var(--s-2); padding-left: 1.1em; list-style: disc; color: var(--ink-2); }
.plain-list li::marker { color: var(--brown); }
.curriculum__free {
  margin-left: var(--s-2); padding: 0 var(--s-2); border-radius: var(--pill);
  background: var(--selected); color: var(--brown-strong); font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}
.buy__closed { width: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: var(--paper-2); color: var(--ink-2); font-weight: 600; }
.button.is-owned { background: var(--success); border-color: var(--success); }
.button:disabled { opacity: 0.6; cursor: not-allowed; }
.eyebrow { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brown); margin-bottom: var(--s-2); }
.workshop-about { display: grid; gap: var(--s-4); }
.workshop-about h2, .workshop-voices-mini h2 { font-size: var(--step-2); }
.workshop-about h3 { font-size: var(--step-1); margin-top: var(--s-3); }
.workshop-voices-mini { display: grid; gap: var(--s-4); }
/* Workshop page rhythm: About, Your Host and From past workshops are each set off by a
   divider centred in the same gap, with the same heading-to-text spacing and line height. */
.page-workshop .course__head { padding-bottom: 0; }
.page-workshop .workshop-about,
.page-workshop .teacher,
.page-workshop .workshop-voices-mini { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--line); gap: var(--s-4); }
.page-workshop .teacher p { line-height: 1.65; }
.page-workshop .teacher .text-link { margin-top: var(--s-1); }

/* ---------- Workshop cards ---------- */
.workshop-list { padding-top: var(--s-6); }
.ws-grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .ws-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ws-grid { grid-template-columns: repeat(3, 1fr); } }
.ws-card { display: flex; }
.ws-card__link {
  display: flex; flex-direction: column; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.ws-card__link:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.ws-card__cover { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--paper-2); }
.ws-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.ws-card__date {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  display: grid; justify-items: center; min-width: 3.5rem; padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-sm); background: var(--paper); color: var(--ink);
  font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1;
  box-shadow: var(--shadow);
}
.ws-card__date strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0; }
.ws-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); flex: 1; }
.ws-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.25; }
.ws-card__when { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--ink); font-weight: 500; font-size: 0.9375rem; }
.ws-card__when .icon { width: 1.1em; height: 1.1em; margin-top: 3px; flex: none; color: var(--brown); }
.ws-card__format { color: var(--ink-2); font-size: 0.9375rem; }
.ws-card__summary { color: var(--ink-2); font-size: 0.9688rem; line-height: 1.5; }
.ws-card__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); }
.ws-card__price { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
/* Early-bird style pricing: the regular price struck through, then a small offer tag. */
.price__was { margin-left: 0.15em; font-family: var(--font-body); font-weight: 400; font-size: 0.62em; color: var(--ink-2); text-decoration-thickness: 1.5px; }
.buy-bar .price__offer { display: none; }
.price__offer { display: inline-block; margin-left: 0.35em; padding: 0.2em 0.6em; border-radius: var(--pill); background: var(--selected); color: var(--brown-strong); font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; line-height: 1.3; vertical-align: middle; white-space: nowrap; }
.ws-card__status { color: var(--brown-strong); font-size: 0.9375rem; font-weight: 600; }

/* ---------- Checkout ---------- */
input[type="tel"] {
  width: 100%; min-height: 48px; padding: 0 var(--s-4); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font: inherit; font-size: 1rem;
}
input[type="tel"]:hover { border-color: var(--line-strong); }
input[type="tel"]:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 1px; }
.notice-line { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); border-radius: var(--radius-sm); background: var(--notice); color: var(--on-notice); font-weight: 500; }
.form-block__title { display: flex; align-items: center; gap: var(--s-3); font-size: var(--step-1); }
.step-dot {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--brown); color: #fff; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600;
}
.form-block__lead { color: var(--ink-2); }
.form-block__fields { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-4); min-width: 0; }
.form-block__fields:disabled { opacity: 0.55; }
.field__optional { font-weight: 400; color: var(--ink-2); }
.account-done { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-4); border-radius: var(--radius-sm); background: var(--paper-2); }
.account-done a { color: var(--brown); font-weight: 600; }
.account-auth { display: grid; gap: var(--s-4); }
.pay-method { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); line-height: 1.5; }
.pay-method .icon { width: 1.2em; height: 1.2em; margin-top: 3px; flex: none; color: var(--brown); }
.consent { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: var(--notice); color: var(--on-notice); line-height: 1.45; cursor: pointer; }
.consent input { width: 1.25rem; height: 1.25rem; margin-top: 2px; flex: none; accent-color: var(--brown); }

.totals { display: grid; gap: var(--s-2); margin: 0; padding-top: var(--s-2); }
.totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.totals dt { color: var(--ink-2); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals__total dt { color: var(--ink); font-size: 1.0625rem; }
.totals__total dd { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; }
.totals__note { font-size: 0.875rem; }
.coupon { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.coupon input { flex: 1 1 8rem; min-height: 44px; }
.coupon__msg { width: 100%; font-size: 0.875rem; font-weight: 500; }
.coupon__msg.is-ok { color: var(--success); }
.coupon__msg.is-error { color: var(--error); }
.line-item--unavailable { opacity: 0.75; }
.line-item__note { color: var(--error); font-weight: 500; }
.line-item--loading { color: var(--ink-2); grid-template-columns: 1fr !important; }
.line-items--compact .cover-fallback { font-size: 1rem; }

/* ---------- Login ---------- */
.auth__forgot { border: 0; background: none; padding: 0; cursor: pointer; }
.auth__signed-in { display: grid; gap: var(--s-3); justify-items: start; }
.auth__notice { display: grid; gap: var(--s-1); }
.site-footer__legal { flex-wrap: wrap; row-gap: 0; }

/* Courses page: when only a few cards match, the tall filter column shouldn't push them down */
@media (min-width: 960px) { .catalog-layout { grid-template-rows: auto auto 1fr; } }