/* ============================================================
   MixGenie rebuild: shared design system. FINAL: Variant A (2026-09-27).

   Max chose Variant A: his existing live tokens (sand, oxblood, teal and
   gold, Oswald capitals, flat corners, hard "sticker" shadows, dark ink
   footer, i.e. song-genie.com's flavor 26 palette) on the 2026-09-27
   redesign layout. The dark "Mix Room" theme and light Variants B
   ("Track Sheet") and C ("Daylight Console") were explored and dropped.

   THIS FILE IS NOW THE MASTER. Edit it directly. It was generated once
   from "(C) style-variants/tokens-a-songgenie-tokens.css" plus
   "(C) style-variants/components.css" (in this copy's root folder, kept
   as a record of how it was built). Those two files are no longer the
   source of truth, so do not edit them expecting this file to change.
   Dropped variants are archived in "(C) style-variants/archive - dropped
   variants B and C (2026-09-27)/" and nothing live references them.

   Contrast: every text/background pair these tokens produce passes WCAG
   AA, checked by script ((C) style-variants/contrast-check.py) and by a
   rendered text-node walk of all 16 built pages on 2026-09-27.
   Fonts: Oswald 600/700 and Jost 400/400 italic/500/600 only, loaded by
   the single link in layout.html. Keep the two in step.
   ============================================================ */

/* ============================================================
   MixGenie rebuild, VARIANT A: "Deco Diagonal, re-hung"
   The exact live tokens from the original rebuild's styles.css (flavor 26,
   song-genie.com's palette: sand, oxblood, teal, gold, Oswald condensed
   caps, flat 0 radius, hard "sticker" shadows, dark ink footer) applied to
   the 2026-09-27 redesign layout. It isolates "does Max like the new
   structure" from "does Max like the new colours".
   Only tokens live here. Components are in components.css.
   ============================================================ */
:root {
  --bg: #EFE4CB;  --bg-2: #E6D5B2;  --surface: #FBF4E3;  --surface-2: #F6EDD9;
  --card-bg: #FBF4E3;  --card-solid: #FBF4E3;
  --ink: #2A2016;  --heading: #2A2016;  --muted: #655537;
  --link: #175E54;  --link-hover: #9E3A2B;
  --accent: #9E3A2B;  --accent-2: #BE8F2C;  --accent-text: #9E3A2B;  --eyebrow-rule: #BE8F2C;
  --price: #2A2016;  --stars: #BE8F2C;
  --line: rgba(42, 32, 22, 0.16);  --line-strong: rgba(42, 32, 22, 0.32);
  --focus: #175E54;  --focus-ring: rgba(158, 58, 43, 0.18);
  --selection-bg: #9E3A2B;  --selection-fg: #FBF4E3;

  --font-display: 'Oswald', sans-serif;  --font-body: 'Jost', sans-serif;
  --font-h3: 'Oswald', sans-serif;  --font-eyebrow: 'Oswald', sans-serif;
  --font-button: 'Oswald', sans-serif;  --font-price: 'Oswald', sans-serif;  --font-quote: 'Oswald', sans-serif;
  --display-weight: 600;  --display-tracking: 0.01em;  --display-transform: uppercase;  --display-leading: 1.05;
  --h1-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.4rem);  --h2-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  --post-h1-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  --h3-tracking: 0.02em;  --h3-transform: uppercase;  --price-weight: 700;
  --btn-weight: 600;  --btn-size: 0.95rem;  --btn-tracking: 0.12em;  --btn-transform: uppercase;  --btn-border-width: 2px;

  --maxw: 1180px;  --radius: 0;
  --card-shadow: none;  --feature-shadow: 5px 5px 0 rgba(42, 32, 22, 0.18);
  --frame-pad: 8px;  --frame-bg: #FBF4E3;  --frame-shadow: 6px 6px 0 rgba(42, 32, 22, 0.18);

  --btn-primary-bg: #9E3A2B;  --btn-primary-fg: #FBF4E3;  --btn-primary-border: #9E3A2B;
  --btn-primary-shadow: 4px 4px 0 rgba(42, 32, 22, 0.18);  --btn-primary-hover: #83301F;
  --btn-ghost-fg: #175E54;  --btn-ghost-border: #175E54;  --btn-ghost-hover: rgba(23, 94, 84, 0.08);
  --btn-dark-bg: #175E54;  --btn-dark-fg: #F3E9D2;  --btn-dark-border: #175E54;  --btn-dark-hover: #124C44;

  --nav-bg: #EFE4CB;  --nav-border: 3px solid #2A2016;
  --logo-filter: brightness(0) opacity(0.86);
  --hero-bg: radial-gradient(60% 70% at 78% 40%, rgba(190, 143, 44, 0.20), transparent 70%), #EFE4CB;
  --hero-pattern: repeating-linear-gradient(90deg, rgba(42, 32, 22, 0.045) 0 1px, transparent 1px 56px);
  --intro-bg: radial-gradient(55% 90% at 50% 0%, rgba(190, 143, 44, 0.18), transparent 72%), #EFE4CB;
  --trust-bg: #E6D5B2;  --trust-logo-filter: grayscale(1) sepia(0.2);  --trust-logo-opacity: 0.9;
  --avatar-plate: #FBF4E3;
  --knob-face: radial-gradient(circle at 35% 30%, #FFFDF6, #E6D5B2 75%);  --knob-ring: #2A2016;
  --knob-shadow: 2px 2px 0 rgba(42, 32, 22, 0.2);  --knob-num: #2A2016;  --knob-pointer: #9E3A2B;
  --input-bg: #F6EDD9;  --input-border: rgba(42, 32, 22, 0.22);  --placeholder: #6F5F45;
  --option-checked: #F3E3C9;  --control-accent: #9E3A2B;  --formcard-top: 5px solid #9E3A2B;
  --badge-bg: #BE8F2C;  --badge-fg: #2A2016;
  --footer-bg: #2A2016;  --footer-border: 2px solid #BE8F2C;  --footer-ink: #C9B896;  --footer-heading: #BE8F2C;
  --footer-link-hover: #E3C47A;  --footer-line: rgba(201, 184, 150, 0.25);
  --footer-logo-filter: brightness(0) invert(0.86) sepia(0.35);

  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 6rem;
  /* Aliases so inline style="var(--x)" references in pages keep resolving. */
  --oxblood: #9E3A2B;  --teal: #175E54;  --gold: #BE8F2C;  --gold-bright: #BE8F2C;
  --card: #FBF4E3;  --shadow: 4px 4px 0 rgba(42, 32, 22, 0.18);  --font-sans: var(--font-body);
}

/* ============================================================
   COMPONENTS (shared by every colour variant)
   The layout and components from the 2026-09-27 redesign pass, with every
   colour, font and shadow pulled out into tokens. Each variant file is
   "its own :root block + this file", joined by build-variants.sh, so the
   three candidates differ ONLY in their tokens and can never drift apart
   structurally. Do not put a literal colour in here; add a token instead.
   ============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Form controls do not inherit fonts by default, so without this the
   hamburger and carousel arrows rendered in the browser's Arial. The
   original flavor 26 file had this line; the 2026-09-27 rewrite dropped it
   and the rendered font check caught it. */
button, input, select, textarea { font: inherit; }
img, video, iframe { max-width: 100%; }
img, video { display: block; height: auto; }
a { color: var(--link); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--selection-bg); color: var(--selection-fg); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
b, strong { font-weight: 600; color: var(--heading); }
small { font-size: 0.85em; }
s { text-decoration-color: var(--accent-2); text-decoration-thickness: 2px; }

h1, h2, h3, h4 { color: var(--heading); margin: 0 0 0.5em; text-wrap: balance; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  line-height: var(--display-leading);
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-family: var(--font-h3); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: var(--h3-tracking); text-transform: var(--h3-transform); }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-3); }
.section { padding: var(--sp-6) 0; position: relative; }
.section--tight { padding: var(--sp-5) 0; }
.section--light { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--light + .section--light { border-top: 0; }
.center { text-align: center; }
.measure { max-width: 680px; }
.measure.center { margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: var(--sp-2); }
.stack > * { margin-bottom: 0; }
.section-head { max-width: 720px; margin: 0 auto var(--sp-5); text-align: center; }
.section-head .lead { margin-bottom: 0; }
.grid { display: grid; gap: 28px; }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ---------- Type components ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 1rem;
}
.eyebrow::before { content: ''; flex: 0 0 28px; height: 2px; background: var(--eyebrow-rule); }
.center .eyebrow, .measure.center .eyebrow, .section-head .eyebrow, .eyebrow.center { justify-content: center; }
.center .eyebrow::after, .measure.center .eyebrow::after, .section-head .eyebrow::after {
  content: ''; flex: 0 0 28px; height: 2px; background: var(--eyebrow-rule);
}
.lead { font-size: 1.2rem; line-height: 1.6; color: var(--muted); }
.field-hint { color: var(--muted); }
.italic-accent { font-style: italic; color: var(--accent-text); }
.warn { border-left: 3px solid var(--accent-2); background: var(--surface); padding: 12px 16px; color: var(--ink); }
.form-note { font-size: 0.9rem; color: var(--muted); margin: 14px 0 0; }
.price { font-family: var(--font-price); font-weight: var(--price-weight); font-size: 2.4rem; line-height: 1.1; color: var(--price); margin: 0.2em 0 0.5em; }
.price small { font-family: var(--font-body); font-weight: 400; font-size: 0.95rem; color: var(--muted); letter-spacing: 0.02em; margin-left: 4px; }
.divider { position: relative; height: 1px; margin: var(--sp-5) auto; max-width: 520px; background: var(--line-strong); }
.divider::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: var(--accent); transform: translate(-50%, -50%) rotate(45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border: var(--btn-border-width) solid transparent; border-radius: var(--radius);
  font-family: var(--font-button); font-weight: var(--btn-weight); font-size: var(--btn-size);
  letter-spacing: var(--btn-tracking); text-transform: var(--btn-transform); text-decoration: none;
  line-height: 1.2; text-align: center; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.btn--lg { padding: 17px 28px; font-size: 0.92rem; }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-border); box-shadow: var(--btn-primary-shadow); }
.btn--primary:hover { color: var(--btn-primary-fg); background: var(--btn-primary-hover); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--btn-ghost-fg); border-color: var(--btn-ghost-border); }
.btn--ghost:hover { color: var(--btn-ghost-fg); border-color: var(--btn-ghost-fg); background: var(--btn-ghost-hover); }
.btn--dark { background: var(--btn-dark-bg); color: var(--btn-dark-fg); border-color: var(--btn-dark-border); }
.btn--dark:hover { color: var(--btn-dark-fg); background: var(--btn-dark-hover); }
.btn[disabled] { box-shadow: none; transform: none; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem;
  color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
}
.pill::after { content: '\2192'; transition: transform 0.18s ease; }
.pill:hover { color: var(--link-hover); border-bottom-color: var(--accent); }
.pill:hover::after { transform: translateX(3px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.center .hero__actions, .measure.center .hero__actions { justify-content: center; }
@media (max-width: 560px) { .hero__actions .btn { width: 100%; } }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: var(--nav-border); }
.nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; text-decoration: none; flex-shrink: 0; }
.nav__logo img { width: 188px; height: auto; filter: var(--logo-filter); }
.nav__logo .sign__band { display: flex; gap: 8px; padding-left: 58px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-text); }
.nav__logo .sign__band span + span::before { content: '\00B7'; margin-right: 8px; color: var(--muted); }
.nav__links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
/* :not(.btn) matters: .nav__links a outranks .btn--primary on specificity,
   so without it the mobile menu's primary button inherited link colours. */
.nav__links a:not(.btn) { color: var(--heading); text-decoration: none; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; position: relative; padding: 6px 0; }
.nav__links a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.nav__links a:not(.btn):hover { color: var(--accent-text); }
.nav__links a:not(.btn):hover::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; }
.nav__cta .btn { padding: 12px 20px; font-size: 0.82rem; }
.nav__toggle { display: none; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--heading); font-size: 1.3rem; line-height: 1; width: 46px; height: 42px; cursor: pointer; }
.nav__mobile-only { display: none; }
@media (max-width: 1100px) {
  .nav__inner { flex-wrap: wrap; }
  .nav nav { order: 3; flex-basis: 100%; }
  .nav__links { display: none; }
  .nav__links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 16px; border-top: 1px solid var(--line); margin-top: 12px; }
  .nav__links.is-open li { border-bottom: 1px solid var(--line); }
  .nav__links.is-open li:last-child { border-bottom: 0; }
  .nav__links.is-open a:not(.btn) { display: block; padding: 14px 4px; font-size: 1.05rem; }
  .nav__links.is-open a:not(.btn)::after { display: none; }
  .nav__links.is-open .nav__mobile-only { display: block; padding-top: 14px; }
  .nav__links.is-open .nav__mobile-only .btn { width: 100%; padding: 15px 20px; }
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav__cta { margin-left: auto; }
}
@media (max-width: 560px) {
  .nav__inner { padding: 12px 16px; gap: 12px; }
  .nav__logo img { width: 128px; }
  .nav__logo .sign__band { padding-left: 40px; font-size: 0.55rem; letter-spacing: 0.26em; }
  .nav__cta { display: none; }
  .nav__toggle { margin-left: auto; }
}

/* ---------- Homepage hero ---------- */
.hero { position: relative; overflow: hidden; padding: 88px 0 96px; background: var(--hero-bg); }
.hero::before { content: ''; position: absolute; inset: 0; background: var(--hero-pattern); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); pointer-events: none; }
.hero .wrap { position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
.hero__copy h1 { margin-bottom: 0.4em; }
.hero__copy .lead { max-width: 34em; }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 26px; font-size: 0.95rem; color: var(--muted); }
.hero__proof .stars { color: var(--stars); letter-spacing: 3px; }
.hero__proof a { color: var(--muted); }
.hero__proof a:hover { color: var(--heading); }
.hero__media { position: relative; }
@media (max-width: 960px) { .hero { padding: 56px 0 64px; } .hero__grid { grid-template-columns: 1fr; gap: 40px; } .hero__media { max-width: 620px; } }

/* Handwritten "Max" -> "MaxGenie" note above the hero video (2026-09-28).
   Sits in normal flow above .frame, not absolutely positioned outside it,
   so it can't be clipped by .hero's own overflow:hidden. Caveat is loaded
   for this alone, same weight (600) as the pre-redesign build used for the
   same kind of scrawled note. Oxblood, the brand's existing red. */
.hero__note { display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; margin: 0 12% 4px 0; color: var(--oxblood); }
.hero__note-words { font-family: 'Caveat', 'Bradley Hand', cursive; font-size: 34px; line-height: 1; white-space: nowrap; transform: rotate(-3deg); }
.hero__note-old { position: relative; display: inline-block; }
.hero__note-old::after { content: ''; position: absolute; left: -3px; right: -3px; top: 54%; border-top: 3px solid currentColor; transform: rotate(-4deg); opacity: 0; transition: opacity .25s ease; }
.hero__note-new { display: inline-block; margin-left: 6px; opacity: 0; transition: opacity .35s ease .1s; }
.hero__note.is-crossed .hero__note-old::after { opacity: 1; }
.hero__note.is-crossed .hero__note-new { opacity: 1; }
@media (max-width: 640px) {
  .hero__note { margin: 0 6% 4px 0; }
  .hero__note-words { font-size: 26px; }
}

/* ---------- Genies and Mitzi (2026-09-28) ----------
   Same animated characters and the same anchoring scheme as song-genie.com
   (see that site's styles.css, "Genies"), so both sites' drag-tool readouts
   mean the same thing:
     width / left   % of the host card's WIDTH
     bottom: 100%   pins the character's bottom edge to the card's TOP edge
     margin-bottom  negative % drops it back over the border line; margin %
                    also resolves against WIDTH, so nothing drifts when the
                    card's copy reflows and its height changes.
   height:auto is load-bearing: the <img> carries real width/height
   attributes, and without it a %-width genie keeps the attribute height and
   stretches. Decorative only: aria-hidden, pointer-events:none, and the host
   (.has-genie) must never clip. Place them yourself in a preview build:
   press G, drag to move, scroll to resize, C to copy the CSS. */
.has-genie { position: relative; overflow: visible; }
.genie { position: absolute; pointer-events: none; z-index: 3; height: auto; }
.genie .scrawl, .genie.scrawl { display: block; font-family: 'Caveat', 'Bradley Hand', cursive; font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--oxblood); transform: rotate(-4deg); }

/* At the mixing desk, on top of the "special sauce" card. */
.genie--mg-mixing { width: 42%; left: 56%; bottom: 100%; margin-bottom: -0.3%; }

/* Mitzi lying along the top edge of the Mixing and Mastering price card, tail
   dangling off its top-right corner like a cat on a shelf, clear of the copy.
   THIS COPY OF HER IS CROPPED (308x221, not song-genie.com's 426x221). The
   original's right 28% is empty transparent space in every one of its 160
   frames (drawing spans x 5-302, measured with ffmpeg bbox on the alpha
   channel). On a 390px phone that invisible strip pushed the page 60px wider
   than the screen, and mobile Chrome zoomed the whole layout out to fit it.
   Cropped, her box is the cat, so she can sit on the corner at any width. */
.genie--mg-mitzi { width: 61%; left: 40%; top: 0; bottom: auto; transform: translateY(-46%); }
.genie--mg-mitzi-label { width: auto; white-space: nowrap; left: 0; bottom: 100%; margin-bottom: 8%; }

/* Peeking over the top of the "Quick Service" card (moved off the contact
   form 2026-09-28, Max's call). */
.genie--mg-pointing { width: 40%; left: 58%; bottom: 100%; margin-bottom: -0.4%; }

/* ROOM FOR THEM. A character anchored to a card's top edge grows UPWARD into
   whatever sits above the card. Side by side that's empty section padding;
   once .split stacks (900px and under) it's the buttons or links of the
   column above, only 36px away, and on a 390px phone both genies landed on
   one. The pointing genie's room sits on .mini-features, the .split child
   that holds its card, since the % needs a grid item to resolve against.
   The margin is a % because on a grid item a % margin resolves against the
   grid area's WIDTH, which is the card's width once stacked, and the genie's
   height is also a fixed fraction of that width. So the room matches the
   genie at every size instead of being right at one:
     mixing   42% wide x (300/380) = 33.2% of card width tall -> 33%
     pointing 40% wide x (180/380) = 18.9% of card width tall -> 19%
   plus the grid's own 36px gap left over as clearance.
   The pricing grid gets a flat 32px at every width instead, because Mitzi's
   host is one card in a row of three and pushing only her card down would
   misalign the row; this moves the whole row, which on desktop just reads
   as a little more air under the intro. PADDING, not margin: a margin-top
   here collapses into the .section-head's bigger margin-bottom above it and
   silently does nothing (tried first, measured, no change on a phone). */
.genie-room-above { padding-top: 32px; }

/* ---------- MaxGenie waving from behind step 3 (2026-09-28) ----------
   The animation has its hiding line baked in at x=41 of its 200px width, and
   his furthest reach (the wave) is x=179, so he needs 0.69 x his own width of
   clear space to the right of the card. The page margin only gives that on
   wide screens (at 1280 there's ~74px, he needs ~104), so instead of hiding
   him on laptops and phones the layout MAKES room:
     3 across (961px+)  the steps row gives up 0.72W on its right, so the
                        three cards are a little narrower and he fills the end
     2 across (721-960) step 3 is alone on its row; he uses the empty cell
     stacked (720-)     step 3 alone is narrowed so he can stand beside it
   He is bottom-aligned to the card, standing on the same "floor". */
.steps--wave { --wave-w: 150px; }
.genie--mg-wave { width: var(--wave-w); left: calc(100% - var(--wave-w) * 0.205); top: auto; bottom: 0; }
@media (min-width: 961px) { .steps--wave { padding-right: calc(var(--wave-w) * 0.72); } }
@media (max-width: 720px) {
  .steps--wave { --wave-w: 130px; }
  .steps--wave > .has-genie { margin-right: calc(var(--wave-w) * 0.72); }
}
@media (max-width: 900px) {
  .split > .genie-room--mg-mixing { margin-top: 33%; }
  .split > .genie-room--mg-pointing { margin-top: 19%; }
}

/* Every inner page opens on the same soft intro wash. */
main > section:first-child:not(.hero) { background: var(--intro-bg); border-top: 0; }

/* ---------- Framed media ---------- */
.frame { position: relative; padding: var(--frame-pad); border: 1px solid var(--line-strong); background: var(--frame-bg); box-shadow: var(--frame-shadow); }
.frame::before, .frame::after { content: ''; position: absolute; width: 26px; height: 26px; border: 3px solid var(--accent); pointer-events: none; }
.frame::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
.frame::after { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }
.frame img, .frame video { width: 100%; height: auto; }
.frame--video video { aspect-ratio: 1280 / 704; object-fit: cover; background: var(--surface-2); }
/* Portrait version for the About page's Liam boomerang (640x1162).
   Capped at 400px wide and centred in its column (Max, 28 Sep: "a little
   bit smaller"). Full column width made him ~516x937 on desktop, taller
   than the copy beside him. On a phone the column is narrower than 400px,
   so nothing changes there. */
.frame--video-portrait { max-width: 400px; margin-left: auto; margin-right: auto; }
.frame--video-portrait video { display: block; aspect-ratio: 640 / 1162; object-fit: cover; background: var(--surface-2); }

/* ---------- Cards ---------- */
.card { position: relative; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--card-shadow); }
.card::before { content: ''; position: absolute; top: -1px; left: 32px; width: 44px; height: 3px; background: var(--accent); }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: 0.6em; }
.card ul, .band ul { list-style: none; padding: 0; }
.card li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.card li::before { content: ''; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.card--feature { border-color: var(--line-strong); box-shadow: var(--feature-shadow); }
.card__cta { margin-top: auto; padding-top: 18px; }
.card--flex { display: flex; flex-direction: column; }
.band { position: relative; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 22px 28px; }
.band > :last-child { margin-bottom: 0; }

/* ---------- Trust strip ---------- */
.trust { padding: 44px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--trust-bg); }
.trust__label { text-align: center; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0 0 24px; }
.trust__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 56px; }
.trust__logos img { height: 44px; width: auto; filter: var(--trust-logo-filter); opacity: var(--trust-logo-opacity); transition: opacity 0.2s ease; }
.trust__logos img:hover { opacity: 1; }
@media (max-width: 560px) { .trust__logos { gap: 22px 34px; } .trust__logos img { height: 32px; } }

/* ---------- Platform proof figures ---------- */
.proof-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 0 0 var(--sp-4); }
.proof { display: block; flex: 0 1 300px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; color: var(--ink); transition: border-color 0.2s ease; box-shadow: var(--card-shadow); }
.proof:hover { border-color: var(--accent); color: var(--ink); }
.proof__score { font-family: var(--font-price); font-weight: var(--price-weight); font-size: 2.3rem; line-height: 1; color: var(--price); }
.proof__outof { font-family: var(--font-body); font-weight: 400; font-size: 0.95rem; color: var(--muted); }
.proof__stars { display: block; color: var(--stars); letter-spacing: 3px; margin: 8px 0 2px; }
.proof__meta { display: block; color: var(--muted); font-size: 0.95rem; }
.proof__meta b { color: var(--heading); }
.proof--lead { border-color: var(--line-strong); }
@media (max-width: 560px) { .proof { flex-basis: 100%; } }

/* ---------- Carousels (reviews, past clients) ---------- */
.reviews { margin: 0 0 var(--sp-5); }
.reviews__track, .clients__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 360px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.reviews__track:focus-visible, .clients__track:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.review { scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.review__stars { color: var(--stars); letter-spacing: 3px; margin-bottom: 12px; }
.review blockquote { margin: 0 0 16px; flex: 1; }
.review blockquote p { margin: 0; font-size: 1rem; line-height: 1.65; }
.review figcaption { font-size: 0.9rem; color: var(--muted); }
.review figcaption b { color: var(--heading); }
.reviews__nav { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.reviews__btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--heading); font-size: 1.1rem; cursor: pointer; }
.reviews__btn:hover { background: var(--btn-primary-hover); color: var(--btn-primary-fg); border-color: var(--btn-primary-hover); }
@media (max-width: 560px) { .reviews__track, .clients__track { grid-auto-columns: 84%; } }

/* ---------- Named testimonials ---------- */
.case { display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: start; }
.case img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: var(--avatar-plate); border: 2px solid var(--accent); padding: 2px; }
.case__meta { font-weight: 600; margin: 0 0 8px; color: var(--accent-text); }
.case p:last-child { margin-bottom: 0; }
.pullquote { max-width: 760px; margin: 0 auto; text-align: center; }
.pullquote p:first-child { font-family: var(--font-quote); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); line-height: 1.35; color: var(--heading); }
.pullquote p:first-child::before { content: '\201C'; color: var(--accent); }
.pullquote p:first-child::after { content: '\201D'; color: var(--accent); }

/* ---------- Steps, drawn as rotary knobs ---------- */
.step { display: flex; flex-direction: column; }
.step__num {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: 20px;
  background: var(--knob-face); border: 2px solid var(--knob-ring);
  box-shadow: 0 0 0 5px var(--card-solid), 0 0 0 6px var(--line-strong), var(--knob-shadow);
  font-family: var(--font-price); font-weight: var(--price-weight); font-size: 1.45rem; color: var(--knob-num);
}
.step__num::after { content: ''; position: absolute; top: 6px; left: 50%; width: 2px; height: 9px; margin-left: -1px; background: var(--knob-pointer); transform: rotate(0deg); transform-origin: 50% 24px; }
.step:nth-child(2) .step__num::after { transform: rotate(60deg); }
.step:nth-child(3) .step__num::after { transform: rotate(120deg); }
.step:nth-child(4) .step__num::after { transform: rotate(165deg); }
.step:nth-child(5) .step__num::after { transform: rotate(210deg); }
.step:nth-child(6) .step__num::after { transform: rotate(260deg); }
.step__num span { position: relative; z-index: 1; }
.step__sub { color: var(--accent-text); font-weight: 600; font-size: 0.95rem; margin: -0.3rem 0 12px; }

/* ---------- Galleries ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.tile { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile__cap { display: block; padding: 14px 16px; }
.tile__cap b { display: block; color: var(--heading); }
.tile__cap span { display: block; font-size: 0.9rem; color: var(--muted); }
.credit-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
@media (max-width: 720px) { .credit-photos { grid-template-columns: repeat(2, 1fr); } }
.clients { margin-top: var(--sp-4); }
.clients__track { grid-auto-columns: minmax(260px, 320px); }
.client { scroll-snap-align: start; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.client img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.client figcaption { padding: 12px 16px 14px; font-weight: 600; color: var(--heading); }
.client figcaption span { display: block; font-weight: 400; font-size: 0.9rem; color: var(--muted); }

/* ---------- Embeds ---------- */
.embed { max-width: 760px; margin: 0 auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.embed iframe { display: block; width: 100%; border: 0; }
/* No box at all, for Max's own B'n'A Player (Max, 28 Sep: "make that square
   transparent"). The player page on listen.mixgenie.co already sets
   background:transparent and draws its own device, so the only square was
   this container's cream fill, border and rounded corners. */
.embed--bare { max-width: 840px; background: transparent; border: 0; border-radius: 0; }
/* THE SHADOW EDGE (Max, 28 Sep: "I can see the edge of the shadow"). The
   player's .deck casts box-shadow 0 16px 44px rgba(0,0,0,.5), but its page
   only pads 10px at the sides and 16px top and bottom, so the iframe clipped
   the shadow mid-fade into a visible hard line. Two fixes, both from this
   side since the player page is cross-origin:
   1. 840px wide, not 760. The player's .wrap stops growing at 720px, so on
      desktop the device keeps its size and gets 60px of room each side,
      enough for the 44px blur to finish.
   2. A mask that fades the frame's outer 12px (sides) and 14px (top and
      bottom) to transparent, for narrower screens where the device fills
      the frame and the shadow still can't finish. Those strips sit inside
      the player's own padding, so they only ever hold shadow, never the
      device or its captions. */
.embed--bare iframe {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent), linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent), linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-composite: intersect;
}
.embed--video { aspect-ratio: 16 / 9; }
.embed--video iframe { height: 100%; }
.embed-note { text-align: center; color: var(--muted); font-size: 0.95rem; margin-top: var(--sp-2); }

/* ---------- Forms ---------- */
.formcard { position: relative; background: var(--card-solid); border: 1px solid var(--line-strong); border-top: var(--formcard-top); border-radius: var(--radius); padding: 34px; box-shadow: var(--frame-shadow); }
.formcard h3 { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); font-size: 1.6rem; color: var(--heading); margin-bottom: 18px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 12px 14px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
/* Form plumbing (2026-09-29, ported from song-genie.com). .hp is the bot trap:
   made invisible rather than display:none, because some bots skip fields
   that are display:none. .form-status is read out by screen readers via
   aria-live. The consent box uses .field's label style overridden, since a
   checkbox label reads as a sentence, not a caps field name. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }   /* invisible in place, not parked 9999px off-screen: same effect on bots, and verify-site's off-screen check stays meaningful */
.form-status { margin: 12px 0 0; font-size: 0.95rem; min-height: 1.2em; }
.form-status--ok { color: var(--teal); font-weight: 600; }
.form-status--err { color: var(--oxblood); font-weight: 600; }
.field--consent .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; font-weight: 400; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.field--consent input[type=checkbox] { width: auto; flex: none; margin-top: 3px; accent-color: var(--oxblood); }
.cf-turnstile[data-sitekey=""] { display: none; }   /* no key set (previews): nothing to render */
/* Cookie banner (consent.js). Reject sits beside Accept in the same style, as
   the ICO expects; the footer "Cookie settings" link reopens it. */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 720px; margin: 0 auto; background: var(--card-solid); color: var(--ink); border: 1px solid var(--line-strong); border-top: 3px solid var(--oxblood); box-shadow: 0 10px 30px rgba(42, 32, 22, 0.25); padding: 18px 20px; }
.cookie-banner__text { margin: 0 0 12px; font-size: 0.95rem; }
.cookie-banner__choose { display: grid; gap: 6px; margin: 0 0 12px; font-size: 0.92rem; }
.cookie-banner__choose[hidden] { display: none; }   /* display:grid above would otherwise override the hidden attribute */
.cookie-banner__choose label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.cookie-banner__choose input { accent-color: var(--oxblood); }
.cookie-banner__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner__buttons .btn { flex: 1 1 140px; }
.footer__bottom [data-cookie-settings] { margin-left: 10px; color: inherit; }
@media (max-width: 560px) { .formcard { padding: 24px 20px; } }

.option-group { display: grid; gap: 10px; margin: 0 0 14px; }
.option { display: flex; gap: 14px; align-items: flex-start; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 14px 16px; }
label.option { cursor: pointer; transition: border-color 0.18s ease; }
label.option:hover { border-color: var(--line-strong); }
label.option:has(input:checked) { border-color: var(--accent); background: var(--option-checked); }
.option input { margin-top: 5px; accent-color: var(--control-accent); flex-shrink: 0; }
.option > span { flex: 1; min-width: 0; }
.option small { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.option .cost { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; width: 100%; }
.option .cost > b, .option .cost > span + b { color: var(--price); white-space: nowrap; font-weight: 600; }

.tier, .rung { display: flex; flex-direction: column; }
.tier .btn, .rung .btn { margin-top: auto; }
.tier ul, .rung ul { margin-bottom: 24px; }
.tier--pop { border-color: var(--line-strong); box-shadow: var(--feature-shadow); }
.tier__badge { position: absolute; top: -13px; right: 24px; background: var(--badge-bg); color: var(--badge-fg); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius); white-space: nowrap; }
.stems { display: block; background: var(--input-bg); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 9px 12px; margin: 0 0 var(--sp-2); font-weight: 500; }
.stems b { color: var(--price); }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line-strong); padding-top: var(--sp-3); margin-top: var(--sp-3); }
.total .price { margin: 0; }
.unsure { display: none; background: var(--input-bg); border-left: 3px solid var(--accent); padding: 14px 16px; margin-top: 10px; }
.unsure.is-open { display: block; }
.rung__step { display: inline-block; align-self: flex-start; background: transparent; color: var(--accent-text); border: 1px solid var(--line-strong); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius); margin-bottom: var(--sp-2); }
@media (hover: hover) { .tier { transition: transform 0.18s ease, border-color 0.18s ease; } .tier:hover { transform: translateY(-3px); border-color: var(--line-strong); } }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font-weight: 600; font-size: 1.1rem; color: var(--heading); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform 0.2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent-text); }
.faq-item__answer { padding: 0 4px 22px; color: var(--muted); max-width: 70ch; }
.faq-item__answer p:last-child { margin-bottom: 0; }

/* ---------- Blog ---------- */
.post__head { max-width: 760px; margin: 0 auto var(--sp-4); }
.post__head.center { text-align: center; }
.post__meta { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 10px; }
.postlist { display: grid; gap: 20px; max-width: 820px; margin: 0 auto; }
.postcard { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; transition: border-color 0.2s ease, transform 0.2s ease; box-shadow: var(--card-shadow); }
.postcard:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-2px); }
.postcard h2 { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem); margin-bottom: 0.4em; }
.postcard p:last-child { color: var(--muted); margin: 0; }
.prose { max-width: 68ch; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; }
.prose h2 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); margin: 1.8em 0 0.6em; }
.prose h3 { margin: 1.6em 0 0.5em; }
.prose li { margin-bottom: 0.7em; }
.prose li::marker { color: var(--accent-text); }
.prose img { border-radius: var(--radius); }
.prose blockquote { border-left: 3px solid var(--accent); margin: 1.5em 0; padding: 0.2em 0 0.2em 1.2em; color: var(--muted); }
.post__head + .frame { max-width: 68ch; margin-left: auto; margin-right: auto; }
.page-blog-post .post__head h1 { font-size: var(--post-h1-size); }

/* ---------- Footer ---------- */
.footer { background: var(--footer-bg); border-top: var(--footer-border); padding: var(--sp-5) 0 var(--sp-3); color: var(--footer-ink); font-size: 0.97rem; }
.footer h4 { color: var(--footer-heading); }
.footer .nav__logo img { filter: var(--footer-logo-filter); }
.footer .nav__logo .sign__band { color: var(--footer-heading); }
.footer .nav__logo .sign__band span + span::before { color: var(--footer-ink); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__logo { margin-bottom: 18px; }
.footer__blurb { max-width: 34ch; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; }
.footer a { color: var(--footer-ink); text-decoration: none; }
.footer a:hover { color: var(--footer-link-hover); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--footer-line); font-size: 0.9rem; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Page helpers ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--top { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.mini-features { display: grid; gap: 14px; }
.mini-features .card { padding: 22px 24px; }
.mini-features .card::before { left: 24px; }
.mini-features h3 { font-size: 1.05rem; margin-bottom: 4px; }

@media (max-width: 720px) {
  body { font-size: 1.02rem; }
  .section { padding: var(--sp-5) 0; }
  .section--tight { padding: var(--sp-4) 0; }
  .section-head { margin-bottom: var(--sp-4); }
  .card { padding: 26px 22px; }
  .card::before { left: 22px; }
  .lead { font-size: 1.1rem; }
  .price { font-size: 2.1rem; }
  .prose { font-size: 1.04rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Call-booking blocks hide themselves until build.js HIGHLEVEL_BOOKING_URL has a
   real link (added 2026-09-29), so no page ever shows a dead "Pick a time". */
[data-booking-url=""] { display: none; }