@charset "UTF-8";

/* ==========================================================================
   TROPIC NOIR — prototype theme (Phase 1)
   Loaded after style.css from index.html, contact.html, de/contact.html,
   events.html, de/events.html, and blog.html ONLY. Shared rules are scoped to
   :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic);
   homepage sections stay body.home-page, the contact section (23) is
   body.contact-page, the events section (24) is body.events-page, and the
   blog section (27) is body.blog-page, and the beginner guide section (28)
   is body.guide-page, so no other page is affected. See
   System/homepage-revamp-strategy.md for the full palette spec.

   Tokens: petrol #0A1030 / #131A4A, surface #1B2258, coral #8B5CF7,
   brass #9FA8FF, champagne #EAEAFB, sage #A0A8CC, ink #10143A.
   Rules: CTA system is three-tiered — tier 1 sunset-gradient fill
   (coral to amber) with INK text (never white-on-coral), tier 2 soft
   coral tint that fills on hover, tier 3 hairline marks. The trial
   form submit is ink-on-champagne. Shape: "Planted" soft rectangles
   (10px / 8px), each with a weighted inset base edge that presses
   deeper on hover; the brass offset ring survives on keyboard focus
   only. No glow shadows, no conic rotating borders, no pills on
   buttons, solid surfaces (no glass).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN REMAP
   -------------------------------------------------------------------------- */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) {
  --bg-main: #0A1030;
  --bg-secondary: #131A4A;
  --bg-elevated: #0A1030;
  --bg-dark: #060A22;
  --text-main: #F0F0FA;
  --text-muted: #A0A8CC;
  --text-dark: #10143A;
  --text-inverse: #EAEAFB;
  /* used as light-on-dark text across home rules */
    --accent-start: #8B5CF7;
  --accent-end: #5B7CFF;
  --accent-gold: #9FA8FF;
  --accent-purple: #131A4A;
  --accent-navy: #1B2258;
  --accent-navy-soft: #1B2258;
  --accent-navy-deep: #060A22;
  --accent-bronze: #9FA8FF;
  --accent-bronze-soft: #C7CDFF;
  /* light role: soft brass text on dark */
    --accent-bronze-muted: #8890E8;
  --accent-bronze-glow: rgba(159, 168, 255, 0.28);
  --title-cream: #EAEAFB;
  --grad: linear-gradient(90deg, #8B5CF7, #5B7CFF);
  --brand-grad: linear-gradient(135deg, #EAEAFB 0%, #8B5CF7 55%, #9FA8FF 100%);
  --glass-bg: #1B2258;
  --glass-border: rgba(159, 168, 255, 0.2);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --shadow-soft: 0 14px 35px rgba(2, 10, 8, 0.45);
  --shadow-warm: 0 18px 40px rgba(139, 92, 247, 0.1);
  --cta-grad: linear-gradient(118deg, #7D8CFF 0%, #A48BFB 55%, #C99AF5 100%);
  --cta-ink: #10143A;
  --cta-radius: 14px;
  --cta-radius-sm: 12px;
  --cta-base-rest: rgba(16, 35, 31, 0.22);
  --cta-base-hover: rgba(16, 35, 31, 0.42);
  --cta-base-soft: rgba(159, 168, 255, 0.32);
  --cta-soft-bg: rgba(125, 140, 255, 0.13);
  --cta-soft-border: rgba(164, 139, 251, 0.5);
  --cta-soft-text: #F0F0FA;
  --cta-submit-bg: #10143A;
  --cta-submit-bg-hover: #232B66;
  --cta-submit-text: #EAEAFB;
  --cta-form-accent: #7C5CE8;
  --font-heading: 'Playfair Display', serif;
  color: var(--text-main);
  background: var(--bg-main);
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic)::selection,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) *::selection {
    background: rgba(139, 92, 247, 0.35);
    color: #F0F0FA;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) main {
    background: var(--bg-main);
}

/* --------------------------------------------------------------------------
   2. PAGE LOADER
   -------------------------------------------------------------------------- */
body.home-page .page-loader {
    background: linear-gradient(135deg, #060A22 0%, #0A1030 52%, #131A4A 100%);
    color: var(--text-main);
}

/* Signature intro: the Marco y Valeria mark sits on solid black, so the whole
   backdrop goes black to keep it seamless */
body.home-page .page-loader--signature {
    background: #000;
}

body.home-page .page-loader__mark {
    color: #EAEAFB;
}

body.home-page .page-loader__ax {
    color: #EAEAFB;
}

body.home-page .page-loader__mark span:last-child {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #9FA8FF;
    color: #9FA8FF;
}

body.home-page .page-loader__line {
    background: linear-gradient(90deg, transparent, #9FA8FF, #8B5CF7, transparent);
}

/* --------------------------------------------------------------------------
   3. HEADER & NAV
   -------------------------------------------------------------------------- */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .main-header {
    background: rgba(6, 26, 23, 0.92);
    border-bottom: 1px solid rgba(159, 168, 255, 0.16);
    box-shadow: 0 10px 26px rgba(2, 10, 8, 0.35);
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .main-header.scrolled {
    background: rgba(6, 26, 23, 0.88);
    box-shadow: 0 14px 36px rgba(2, 10, 8, 0.45);
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .main-header::after,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .main-footer::before {
    background: linear-gradient(90deg, transparent, rgba(159, 168, 255, 0.65), rgba(139, 92, 247, 0.45), transparent);
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .logo-title {
    color: #EAEAFB;
}

/* Logo "DANCE" + any gradient text -> solid brass */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #9FA8FF;
    color: #9FA8FF;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links a:not(.btn-header-cta):not(.btn-header-secondary),
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropbtn {
    color: rgba(240, 240, 250, 0.75);
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links a:not(.btn-header-cta):not(.btn-header-secondary):hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropbtn:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropdown:hover .dropbtn,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links a:not(.btn-header-cta):not(.btn-header-secondary).active,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropbtn.active,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .lang-switch .active {
    color: #F0F0FA;
    text-shadow: none;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links a:not(.btn-header-cta):not(.btn-header-secondary)::after,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropbtn::after,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropdown-content a span::after {
    background: rgba(159, 168, 255, 0.55);
    box-shadow: none;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links a:not(.btn-header-cta):not(.btn-header-secondary).active::after,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropbtn.active::after,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropdown-content a.active span::after {
    background: linear-gradient(90deg, transparent, #9FA8FF, #8B5CF7, transparent);
    box-shadow: none;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropdown-content {
    background: rgba(12, 42, 36, 0.97);
    border-color: rgba(159, 168, 255, 0.18);
    box-shadow: 0 18px 42px rgba(2, 10, 8, 0.5);
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropdown-content a {
    color: rgba(240, 240, 250, 0.72);
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .dropdown-content a:hover {
    background: rgba(139, 92, 247, 0.1);
    color: #F0F0FA;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .lang-switch .active {
    border-bottom-color: #9FA8FF;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .lang-switch .divider {
    color: rgba(240, 240, 250, 0.3);
}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
body.home-page .home-hero,
body.home-page .home-hero__panel {
    background: var(--bg-main);
}

body.home-page .hero-overlay,
body.home-page .home-hero__shade {
    background: linear-gradient(180deg, rgba(6, 26, 23, 0) 40%, rgba(6, 26, 23, 0.55) 78%, rgba(6, 26, 23, 0.92) 100%);
}

body.home-page .home-hero__title,
body.home-page .home-hero__brand,
body.home-page .home-hero__brand-name,
body.home-page .home-hero__brand-a,
body.home-page .home-hero__brand-cent,
body.home-page .home-hero__brand-dance {
    color: #EAEAFB;
    -webkit-text-fill-color: #EAEAFB;
}

body.home-page .home-hero__brand-x {
    color: #8B5CF7;
    -webkit-text-fill-color: #8B5CF7;
}

/* Hero CTAs — match the higher-specificity panel rules from style.css */
body.home-page .home-hero__actions .btn-hero-primary,
body.home-page .home-hero__panel-actions .btn-hero-primary {
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    border-color: transparent;
    border-radius: var(--cta-radius);
    color: var(--cta-ink);
    box-shadow: inset 0 -2px 0 var(--cta-base-rest);
    transition: background-position 0.3s ease, box-shadow 0.25s ease, outline-color 0.25s ease, color 0.25s ease;
}

body.home-page .home-hero__actions .btn-hero-primary:hover,
body.home-page .home-hero__actions .btn-hero-primary:focus-visible,
body.home-page .home-hero__panel-actions .btn-hero-primary:hover,
body.home-page .home-hero__panel-actions .btn-hero-primary:focus-visible {
    background-position: 100% 50%;
    color: var(--cta-ink);
    box-shadow: inset 0 -2px 0 var(--cta-base-hover);
}

/* The hero secondary keeps step with the planted shape */
body.home-page .btn-hero-secondary,
body.home-page .home-hero__actions .btn-hero-secondary,
body.home-page .home-hero__panel-actions .btn-hero-secondary {
    border-radius: var(--cta-radius);
}

body.home-page .home-hero__actions .btn-hero-secondary,
body.home-page .home-hero__panel-actions .btn-hero-secondary {
    background: transparent;
    border: 1px solid rgba(159, 168, 255, 0.45);
    color: #F0F0FA;
    box-shadow: none;
}

body.home-page .home-hero__actions .btn-hero-secondary:hover,
body.home-page .home-hero__actions .btn-hero-secondary:focus-visible,
body.home-page .home-hero__panel-actions .btn-hero-secondary:hover,
body.home-page .home-hero__panel-actions .btn-hero-secondary:focus-visible {
    background: rgba(159, 168, 255, 0.1);
    border-color: #9FA8FF;
    color: #F0F0FA;
}

body.home-page .home-hero__intro {
    color: #A0A8CC;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* H1 value proposition: roman lead line, italic reassurance line
   (the roman/italic pairing device from the title system) */
body.home-page .home-hero__headline {
  color: #EAEAFB;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.004em;
  text-transform: none;
}

body.home-page .home-hero__headline-lead,
body.home-page .home-hero__headline-soft {
    display: block;
}

body.home-page .home-hero__headline-soft {
    color: #F0F0FA;
    font-style: italic;
    font-weight: 500;
    font-size: 0.86em;
}

/* Assurance line directly under the primary CTA: no boxes — one editorial
   line with thin brass hairline separators. Legibility over video comes
   from a soft shadow, not a pill. */
body.home-page .home-hero__actions .home-hero__assurance {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0;
    margin: 0.55rem 0 0;
    padding: 0 0 0 0.2rem;
    list-style: none;
}

body.home-page .home-hero__actions .home-hero__assurance li {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #F0F0FA;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.035em;
    line-height: 1.25;
    text-align: left;
    text-shadow:
        0 1px 14px rgba(4, 19, 16, 0.9),
        0 0 3px rgba(4, 19, 16, 0.65);
}

body.home-page .home-hero__actions .home-hero__assurance li + li::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.85em;
    margin: 0 0.62rem;
    background: rgba(159, 168, 255, 0.55);
}


body.home-page .home-hero__choice {
    background: #1B2258;
    border: 1px solid rgba(159, 168, 255, 0.14);
    color: #F0F0FA;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.home-page .home-hero__choice:hover {
    border-color: rgba(159, 168, 255, 0.4);
    background: #1E2A6E;
}

/* Active choice: one consistent coral ring (style.css would otherwise mix
   its brass border-color into the other three sides) */
body.home-page .home-hero__choice.active,
body.home-page .home-hero__choice.is-active,
body.home-page .home-hero__choice[aria-pressed="true"] {
    border: 1px solid rgba(139, 92, 247, 0.6);
    background: #1E2A6E;
}

/* --------------------------------------------------------------------------
   6. SECTION SURFACES & TITLES
   -------------------------------------------------------------------------- */
body.home-page .guides-section {
    background: linear-gradient(180deg, #131A4A 0%, #0A1030 100%);
}

body.home-page .guides-section::before {
    background:
        linear-gradient(90deg, transparent 0%, rgba(159, 168, 255, 0.08) 18%, transparent 38%),
        linear-gradient(135deg, transparent 0%, rgba(139, 92, 247, 0.06) 52%, transparent 78%);
}

body.home-page .guides-section::after,
:is(body.home-page, body.schedule-page) .schedule-section::after,
body.home-page .reviews-section::after {
    background: linear-gradient(90deg, transparent, rgba(159, 168, 255, 0.55), rgba(139, 92, 247, 0.4), transparent);
}

:is(body.home-page, body.schedule-page) .schedule-section {
    background: #0A1030;
}

body.home-page .gallery-values-section,
body.home-page .stay-section {
    background: #131A4A;
}

/* Matches the higher-specificity shorthand in style.css */
body.home-page .gallery-values-section.stay-section {
    background:
        radial-gradient(circle at 18% 12%, rgba(159, 168, 255, 0.1), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(139, 92, 247, 0.06), transparent 24%),
        linear-gradient(135deg, #131A4A 0%, #0A241F 48%, #0A1030 100%);
}

body.home-page .gallery-values-section.stay-section::before {
    background:
        linear-gradient(90deg, rgba(159, 168, 255, 0.08), transparent 26%, rgba(159, 168, 255, 0.05) 74%, transparent),
        repeating-linear-gradient(90deg, rgba(234, 234, 251, 0.03) 0 1px, transparent 1px 6rem);
}

body.home-page .stay-visual {
    color: #F0F0FA;
}

body.home-page .stay-visual .section-title-modern,
body.home-page .stay-copy .section-title-modern {
    color: #EAEAFB;
}

:is(body.home-page, body.schedule-page) .schedule-grid-header {
    background: linear-gradient(90deg, rgba(159, 168, 255, 0.12), rgba(16, 50, 43, 0.45));
    border-color: rgba(159, 168, 255, 0.22);
    box-shadow: none;
}

/* (schedule title ::before is unified into the accent-mark motif — section 14) */

body.home-page .reviews-section {
    background: #0A1030;
}

body.home-page .trial-section {
    background: #0A1030;
}

body.home-page .home-faq-section {
    background: transparent;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .section-title-modern,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .section-title-left,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .schedule-header h2,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .stay-section h2,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .stay-visual__header h3 {
    color: #EAEAFB;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .section-subtitle {
    color: #A0A8CC;
}

/* --------------------------------------------------------------------------
   7. BEGINNER GATEWAY
   -------------------------------------------------------------------------- */


body.home-page .guides-confidence {
    background: #131A4A;
    border: 1px solid rgba(159, 168, 255, 0.15);
}

body.home-page .guides-confidence p {
    color: #F0F0FA;
}

/* --------------------------------------------------------------------------
   8. SCHEDULE
   -------------------------------------------------------------------------- */
body.home-page .day-column {
    background: transparent;
    border-left: 1px solid rgba(159, 168, 255, 0.14);
}

body.home-page .day-title,
:is(body.home-page, body.schedule-page) .col-header {
    color: #EAEAFB;
}

:is(body.home-page, body.schedule-page) .class-card,
body.home-page .compact-card,
body.home-page .compact-option {
    background: #1B2258;
    border: 1px solid rgba(159, 168, 255, 0.14);
    color: #F0F0FA;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Hover keeps the uniform hairline (no width-jumping borders); the solid
   inset rail from section 19 carries the coral accent instead */
:is(body.home-page, body.schedule-page) .class-card:hover,
body.home-page .compact-option:hover {
    border-color: rgba(159, 168, 255, 0.45);
    background: #1E2A6E;
}

body.home-page .class-name,
body.home-page .compact-name {
    color: #F0F0FA;
}

body.home-page .class-experience,
body.home-page .compact-status {
    color: #A0A8CC;
}

body.home-page .time,
:is(body.home-page, body.schedule-page) .time-slot,
body.home-page .compact-time {
    color: #EAEAFB;
    font-family: 'Teko', sans-serif;
    font-size: 1.15em;
    letter-spacing: 0.04em;
}

:is(body.home-page, body.schedule-page) .badge-full {
    background: rgba(157, 180, 171, 0.14);
    border: 1px solid rgba(157, 180, 171, 0.3);
    color: #A0A8CC;
}

:is(body.home-page, body.schedule-page) .tag-styling {
    background: rgba(159, 168, 255, 0.14);
    border: 1px solid rgba(159, 168, 255, 0.3);
    color: #9FA8FF;
}

:is(body.home-page, body.schedule-page) .schedule-meta {
    color: #A0A8CC;
}

/* --------------------------------------------------------------------------
   9. ABOUT / GALLERY / STAY
   -------------------------------------------------------------------------- */
body.home-page .atelier-copy,
body.home-page .stay-copy,
body.home-page .stay-lede {
    color: #F0F0FA;
}

body.home-page .atelier-photo__caption,
body.home-page .atelier-gallery-meta {
    color: #A0A8CC;
}

/* Atelier cream matboard panels -> petrol surfaces (the trial form stays
   the page's only light island) */
body.home-page .stay-visual__header.atelier-copy,
body.home-page .atelier-copy,
body.home-page .stay-copy {
    background: rgba(16, 50, 43, 0.92);
    border: 1px solid rgba(159, 168, 255, 0.16);
    color: #F0F0FA;
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.home-page .atelier-photo {
    background: #1B2258;
    border: 1px solid rgba(159, 168, 255, 0.15);
}

body.home-page .atelier-gallery-link {
    background: rgba(159, 168, 255, 0.1);
    border: 1px solid rgba(159, 168, 255, 0.4);
    color: #9FA8FF;
}

body.home-page .atelier-gallery-link:hover {
    background: rgba(159, 168, 255, 0.18);
    color: #EAEAFB;
}

body.home-page .stay-eyebrow,
body.home-page .trial-expectation__eyebrow,
body.home-page .trial-step__eyebrow,
body.home-page .cta-premium-kicker {
    color: #9FA8FF;
}

/* stay-link renders as a button (hardcoded old gradient in style.css);
   tier 2 here — mid-funnel, the community section stays calm */
body.home-page .stay-link {
    background: var(--cta-soft-bg);
    border: 1px solid var(--cta-soft-border);
    border-radius: var(--cta-radius-sm);
    color: var(--cta-soft-text);
    box-shadow: inset 0 -2px 0 var(--cta-base-soft);
    text-shadow: none;
    outline: 1px solid transparent;
    outline-offset: 3px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, outline-color 0.25s ease;
}

body.home-page .stay-link:hover,
body.home-page .stay-link:focus-visible {
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    border-color: transparent;
    color: var(--cta-ink);
    box-shadow: inset 0 -2px 0 var(--cta-base-hover);
}

body.home-page .atelier-gallery-link,
body.home-page .atelier-gallery-link__text {
    color: #9FA8FF;
}

/* --------------------------------------------------------------------------
   10. REVIEWS
   -------------------------------------------------------------------------- */
:is(body.home-page, body.schedule-page) .review-card {
  position: relative;
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Floor-tape corner ticks: brass at rest, coral when the card is engaged */
:is(body.home-page, body.schedule-page) .review-card::before,
:is(body.home-page, body.schedule-page) .review-card::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    transition: border-color 0.3s ease;
}

:is(body.home-page, body.schedule-page) .review-card::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

:is(body.home-page, body.schedule-page) .review-card::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}


:is(body.home-page, body.schedule-page) .review-card:hover::before,
:is(body.home-page, body.schedule-page) .review-card:hover::after,
:is(body.home-page, body.schedule-page) .review-card:focus-within::before,
:is(body.home-page, body.schedule-page) .review-card:focus-within::after {
    border-color: #8B5CF7;
}

:is(body.home-page, body.schedule-page) .review-stars {
    color: #9FA8FF;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #9FA8FF;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
}

:is(body.home-page, body.schedule-page) .reviewer-name {
    color: #EAEAFB;
}

:is(body.home-page, body.schedule-page) .review-text {
    color: rgba(240, 240, 250, 0.88);
    font-size: 0.88rem;
    line-height: 1.55;
}

:is(body.home-page, body.schedule-page) .review-date {
    color: #A0A8CC;
}

:is(body.home-page, body.schedule-page, body.registration-page) .reviews-proof__score,
:is(body.home-page, body.schedule-page, body.registration-page) .reviews-proof__rating-figure {
    color: #EAEAFB;
}

:is(body.home-page, body.schedule-page, body.registration-page) .reviews-proof__starfield {
    color: #9FA8FF;
}

:is(body.home-page, body.schedule-page, body.registration-page) .reviews-proof__copy,
:is(body.home-page, body.schedule-page, body.registration-page) .reviews-proof__source-line {
    color: #A0A8CC;
}

/* --------------------------------------------------------------------------
   11. TRIAL FORM — the champagne conversion island
   -------------------------------------------------------------------------- */
/* Booking process rides on the dark canvas: solid petrol pills, brass
   step numerals, readable champagne labels */
body.home-page .trial-process__item {
  color: #EAEAFB;
}


body.home-page .trial-process__track {
    background: rgba(159, 168, 255, 0.16);
}

body.home-page .trial-process__track::after {
    background: linear-gradient(90deg, #8B5CF7, #9FA8FF);
}

/* One island, not five stacked panels: the form wrapper carries the
   champagne surface; the steps sit transparently inside it */
body.home-page .form-wrapper {
    background: #E8E9F8;
    border: 1px solid rgba(36, 20, 7, 0.16);
    box-shadow: 0 24px 60px rgba(2, 10, 8, 0.5);
}

body.home-page .trial-step {
    background: transparent;
    border: none;
    color: #10143A;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.home-page .trial-step--contact {
    border-top: 1px solid rgba(36, 20, 7, 0.14);
    box-shadow: none;
}

/* The class picker well: one light surface with ink text */
body.home-page .trial-step--choice {
    --trial-grid-surface: #FBF7EC;
    --trial-card-surface: #FBFBFE;
    --trial-card-surface-hover: color-mix(in srgb, var(--trial-card-surface) 92%, var(--accent-gold));
    --trial-card-ink: #12122E;
    --trial-card-muted: #6E6F8E;
    --trial-divider: rgba(36, 20, 7, 0.11);
    --trial-card-border-hover: color-mix(in srgb, var(--accent-gold) 46%, transparent);
    --trial-card-shadow: 0 9px 24px rgba(36, 20, 7, 0.09);
    --trial-card-shadow-hover: 0 14px 30px rgba(36, 20, 7, 0.14);
}

body.home-page .trial-step--choice .class-selection-grid {
    background: var(--trial-grid-surface);
    border: 1px solid #D4D6F0;
    color: var(--trial-card-ink);
    box-shadow: none;
}

body.home-page .trial-step--choice .day-column {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* A single divider establishes each desktop day. Removing the surrounding
   day boxes stops the class cards from looking framed twice. */
@media (min-width: 900px) {
    body.home-page .trial-step--choice .day-column {
        padding-inline: 0.82rem;
    }

    body.home-page .trial-step--choice .trial-time-rail + .day-column,
    body.home-page .trial-step--choice .day-column + .day-column {
        border-left: 1px solid var(--trial-divider);
    }
}

body.home-page .trial-step--choice .day-title {
    color: #16163A;
    border-bottom-color: rgba(36, 20, 7, 0.14);
}

body.home-page .trial-step--choice .trial-time-rail__title {
    color: #6E6F8E;
    border-bottom-color: rgba(36, 20, 7, 0.14);
}

body.home-page .trial-step__title,
body.home-page .trial-step__header {
    color: #16163A;
}

body.home-page .trial-step__note,
body.home-page .trial-submit-note,
body.home-page .trial-consent {
    color: #6E6F8E;
}

body.home-page .trial-step .class-card,
body.home-page .trial-step .compact-option {
    background: transparent;
    border: 0;
    color: var(--trial-card-ink);
    box-shadow: none;
}

/* The label is only the interaction target. The inner card is the one and
   only visible surface, with depth replacing the old nested outlines. */
body.home-page .trial-step .compact-card {
    overflow: hidden;
    background: var(--trial-card-surface);
    border: 1px solid transparent;
    border-radius: 18px;
    color: var(--trial-card-ink);
    box-shadow: var(--trial-card-shadow);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.home-page .trial-step .compact-card::before,
body.home-page .trial-step .compact-card::after {
    content: none;
}

/* Match the main timetable's floor-tape hover cue without moving the card. */
body.home-page .trial-step .compact-option input:not(:checked) + .compact-card::before {
    content: '';
    position: absolute;
    inset: 0.5rem auto auto 0.5rem;
    z-index: 2;
    width: 0.85rem;
    height: 0.85rem;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: none;
    opacity: 1;
    transform: none;
    pointer-events: none;
    transition: border-color 0.3s ease;
}

body.home-page .trial-step .compact-option:not(.compact-option--disabled):hover,
body.home-page .trial-step .compact-option:focus-within {
    background: transparent;
    border-color: transparent;
}

body.home-page .trial-step .compact-option:not(.compact-option--disabled):hover .compact-card {
    border-color: var(--trial-card-border-hover);
    background: var(--trial-card-surface-hover);
    box-shadow: var(--trial-card-shadow-hover);
}

body.home-page .trial-step .compact-option:focus-within .compact-card {
    border-color: var(--trial-card-border-hover);
    background: var(--trial-card-surface-hover);
    box-shadow: var(--trial-card-shadow-hover);
    outline: none;
}

body.home-page .trial-step .compact-option:not(.compact-option--disabled):hover input:not(:checked) + .compact-card::before,
body.home-page .trial-step .compact-option:focus-within input:not(:checked) + .compact-card::before {
    border-top-color: var(--accent-start);
    border-left-color: var(--accent-start);
}

body.home-page .trial-step .compact-option input:focus-visible + .compact-card {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

body.home-page .trial-step--choice .compact-card__selection-canvas {
    display: none;
}

/* Selection is clear without an extra icon: the card inverts and retains
   the quiet brand watermark. */
body.home-page .trial-step .compact-option input:checked + .compact-card,
body.home-page .trial-step .compact-option:not(.compact-option--disabled):hover input:checked + .compact-card,
body.home-page .trial-step .compact-option:focus-within input:checked + .compact-card {
    background: linear-gradient(135deg, #1B2258 0%, #1E2A6E 100%);
    border-color: transparent;
    color: #F0F0FA;
    box-shadow: 0 14px 28px rgba(2, 10, 8, 0.26);
}

/* Reuse the trial-section couple mark as a quiet watermark. Its source WebP
   has an alpha channel, so the selected card keeps one clean surface. */
body.home-page .trial-step .compact-option input:checked + .compact-card::before {
    content: '';
    position: absolute;
    inset: 50% 2.15rem auto auto;
    z-index: 0;
    width: 3rem;
    height: 4.35rem;
    border-radius: 0;
    background: none;
    filter: grayscale(1) sepia(1) hue-rotate(-8deg) saturate(1.5) brightness(1.35) contrast(0.9);
    opacity: 0.14;
    pointer-events: none;
    transform: translateY(-50%);
}

@media (max-width: 899px) {
    body.home-page .trial-step .compact-option input:checked + .compact-card::before {
        inset-inline-end: 2.35rem;
        width: 2.15rem;
        height: 3.1rem;
        opacity: 0.12;
    }
}

body.home-page .trial-step .class-card:hover,
body.home-page .trial-step .compact-option:hover {
    border-color: transparent;
    background: transparent;
}

body.home-page .trial-step .class-card.selected,
body.home-page .trial-step .class-card[aria-checked="true"],
body.home-page .trial-step .compact-option.selected {
    border: 1px solid var(--cta-form-accent);
    background: #FFF1E9;
    box-shadow: none;
}

body.home-page .trial-step .class-name,
body.home-page .trial-step .compact-name {
    color: #12122E;
}

body.home-page .trial-step .class-experience,
body.home-page .trial-step .compact-status,
body.home-page .trial-step .compact-time {
    color: #6E6F8E;
}

body.home-page .trial-step .time,
body.home-page .trial-step .time-slot {
    color: #12122E;
}

body.home-page .trial-form label {
    color: #16163A;
}

body.home-page .trial-form input,
body.home-page .trial-form select,
body.home-page .trial-form textarea {
    background: #FBFBFE;
    border: 1px solid #B9C0F0;
    color: #12122E;
}

body.home-page .trial-form input::placeholder,
body.home-page .trial-form textarea::placeholder {
    color: #8E93B8;
}

body.home-page .trial-form input:focus,
body.home-page .trial-form select:focus,
body.home-page .trial-form textarea:focus {
    border-color: var(--cta-form-accent);
    outline: 2px solid var(--cta-form-accent);
    outline-offset: 1px;
    box-shadow: none;
}

body.home-page .trial-time-rail__title {
    color: #6E6F8E;
}

body.home-page .trial-time-rail__list {
    color: #6E6F8E;
}

/* --------------------------------------------------------------------------
   12. FAQ + generic glass surfaces
   -------------------------------------------------------------------------- */
/* Glass panels/cards -> solid petrol surfaces (no blur) wherever they
   weren't already restyled by a section rule above */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .glass-panel,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .glass-card {
    background: #131A4A;
    border: 1px solid rgba(159, 168, 255, 0.15);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--shadow-soft);
}

body.home-page .home-faq-section details {
    background: #131A4A;
    border: 1px solid rgba(159, 168, 255, 0.15);
}

/* Beats the cream card rule of the old inverted-FAQ design */
body.home-page .home-faq-section .glass-panel {
    background: rgba(16, 50, 43, 0.85);
    border-color: rgba(159, 168, 255, 0.18);
    box-shadow: none;
}

body.home-page .home-faq-section details[open] {
    border-left: 3px solid #9FA8FF;
}

body.home-page .home-faq-section summary {
    color: #EAEAFB;
}

body.home-page .home-faq-section summary:hover {
    color: #8B5CF7;
}

body.home-page .home-faq-section p {
    color: #A0A8CC;
}

body.home-page .home-faq-section h2 {
    color: #EAEAFB;
}

/* --------------------------------------------------------------------------
   13. MOTIF & TEXTURE — accent mark, dancing underline, grain, vignette
   -------------------------------------------------------------------------- */

/* The .reveal slab is replaced by GSAP choreography on the homepage.
   Content stays fully visible without JavaScript or with reduced motion. */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Title signature: no glyphs, no marks — the emotive word of each title
   carries the palette as an italic gradient keyword. Kill every legacy
   ::before ornament above titles. */
.title-accent {
    display: inline-block;
    padding-inline-end: 0.14em;
    margin-inline-end: -0.14em;
    /* Tight title line-heights shrink this box below the glyph extents, and
       background-clip: text only paints inside the box — pad the bottom so
       italic descenders keep their gradient. */
    padding-bottom: 0.22em;
    margin-bottom: -0.22em;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .section-title-modern::before,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .schedule-section .section-title-modern::before,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .reviews-section .section-title-modern::before,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .home-faq-section .section-title-modern::before,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .stay-visual .section-title-modern::before,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .stay-copy .section-title-modern::before {
    content: none;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .section-title-modern .title-accent {
    font-style: italic;
    background: linear-gradient(100deg, #8B5CF7 0%, #5B7CFF 46%, #9FA8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8B5CF7;
}

/* The Dancing Underline: a brass rule with a coral tip under every section
   title. GSAP draws it in three steps and a tap; the CSS variable defaults
   to 1 so it renders complete without JavaScript or with reduced motion. */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .section-title-modern::after {
    content: '';
    display: block;
    width: 5.25rem;
    height: 2px;
    margin: 1.05rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold) 72%, var(--accent-start) 100%);
    transform: scaleX(var(--title-underline-scale, 1));
    transform-origin: left center;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .section-title-left::after {
    margin-left: 0;
    margin-right: auto;
}

/* Film grain + vignette: de-flattens the dark canvas. Static (no motion),
   pointer-transparent, above content (11000) and below the loader (20000). */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic)::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 11990;
    background: radial-gradient(120% 95% at 50% 42%, transparent 62%, rgba(3, 16, 13, 0.4) 100%);
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic)::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 11991;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.045;
    mix-blend-mode: soft-light;
}

/* FAQ soft open: the + rotates to x when an item is open. The transition is
   motion-gated; without it the icon still flips instantly. */
body.home-page .home-faq-section summary span {
    display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
    body.home-page .home-faq-section summary span {
        transition: transform 0.3s ease;
    }
}

body.home-page .home-faq-section details[open] summary span {
    transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .main-footer {
    background: #060A22;
    color: #A0A8CC;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-heading {
    color: #EAEAFB;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .main-footer a {
    color: #A0A8CC;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .main-footer a:hover {
    color: #8B5CF7;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-socials a {
    color: #9FA8FF;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-bottom {
    color: rgba(157, 180, 171, 0.7);
    border-top: 1px solid rgba(159, 168, 255, 0.12);
}

/* --------------------------------------------------------------------------
   15. PHASE 2 CONVERSION — offramp, badges, founders, avatars, FAQ, footer
   -------------------------------------------------------------------------- */

/* Hero stage CTAs: present but not shouting (was 0.88rem, then 1rem) */
body.home-page .home-hero__actions .btn-hero {
    min-width: 11rem;
    padding: 0.9rem 1.5rem;
    font-size: 0.95rem;
}

/* About: the second heading reads as a subhead, not a competing H2 */
body.home-page .section-title-modern--sub {
    font-size: 2rem !important;
    margin-bottom: 1.6rem;
}

/* Schedule offramp: closes the CTA gap between the grid and the form */
:is(body.home-page, body.schedule-page) .schedule-offramp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.6rem;
    margin-top: 3rem;
    padding: 1.4rem 1.8rem;
    background: #131A4A;
    border: 1px solid rgba(159, 168, 255, 0.18);
    border-radius: 16px;
}

:is(body.home-page, body.schedule-page) .schedule-offramp__copy {
    margin: 0;
    color: #F0F0FA;
    font-size: 1.02rem;
}

:is(body.home-page, body.schedule-page) .schedule-offramp__cta,
body.home-page .home-faq-section__cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--cta-radius);
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--cta-ink);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: inset 0 -2px 0 var(--cta-base-rest);
    outline: 1px solid transparent;
    outline-offset: 3px;
    transition: background-position 0.3s ease, box-shadow 0.25s ease, outline-color 0.25s ease;
}

:is(body.home-page, body.schedule-page) .schedule-offramp__cta:hover,
:is(body.home-page, body.schedule-page) .schedule-offramp__cta:focus-visible,
body.home-page .home-faq-section__cta-link:hover,
body.home-page .home-faq-section__cta-link:focus-visible {
    background-position: 100% 50%;
    color: var(--cta-ink);
    box-shadow: inset 0 -2px 0 var(--cta-base-hover);
}

/* "Start here" badge: brass so it guides without outranking coral CTAs */
:is(body.home-page, body.schedule-page) .tag-recommended {
    background: #9FA8FF;
    border: 1px solid transparent;
    color: #10143A;
}

/* The recommended card keeps the uniform hairline; its solid coral rail
   comes from the flat rail system in section 19 */
:is(body.home-page, body.schedule-page) .class-card--recommended {
    border-color: rgba(139, 92, 247, 0.4);
}

/* Trial form: the beginner option carries a small brass flag without adding
   a second outline around the card. */
body.home-page .trial-step .compact-option--recommended .compact-card {
    border-color: transparent;
}

body.home-page .trial-step .compact-status--recommended {
    display: inline-block;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    background: #9FA8FF;
    color: #10143A;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Mobile trial picker: collapse the nested boxes (day column, option label,
   card, time pill) into one cream panel per day with flat divided rows */
@media (max-width: 899px) {
    body.home-page .trial-step--choice .day-column {
        border: none;
        background: transparent;
    }

    body.home-page .trial-step--choice .day-title {
        border-bottom: none;
    }

    body.home-page .trial-step--choice .compact-class-list {
        gap: 0.48rem;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.home-page .trial-step .compact-option {
        background: transparent;
        border: none;
    }

    body.home-page .trial-step .compact-card {
        background: var(--trial-card-surface);
        border: 1px solid transparent;
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(36, 20, 7, 0.08);
    }

    body.home-page .trial-step--choice .compact-option + .compact-option .compact-card {
        border-top-color: transparent;
    }

    /* The beginner row swaps its coral border for a soft tint */
    body.home-page .trial-step .compact-option--recommended .compact-card {
        border-color: transparent;
        background: rgba(124, 92, 232, 0.06);
    }

    body.home-page .trial-step--choice .compact-option input:checked + .compact-card .compact-time,
    body.home-page .trial-step--choice .compact-option:not(.compact-option--disabled):hover input:checked + .compact-card .compact-time,
    body.home-page .trial-step--choice .compact-option:focus-within input:checked + .compact-card .compact-time {
        color: rgba(240, 240, 250, 0.88);
    }
}

/* Founders strip: faces + credential right after the "10 couples" fact */
body.home-page .founders-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.6rem 0 1.8rem;
    padding: 1rem 1.2rem;
    background: rgba(4, 19, 16, 0.55);
    border: 1px solid rgba(159, 168, 255, 0.22);
    border-radius: 16px;
}

body.home-page .founders-strip__photo {
    flex: 0 0 auto;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 18%;
    border: 1px solid rgba(159, 168, 255, 0.45);
}

body.home-page .founders-strip__copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

body.home-page .founders-strip__names {
    color: #EAEAFB;
    font-size: 1.02rem;
}

body.home-page .founders-strip__role {
    color: #A0A8CC;
    font-size: 0.86rem;
    line-height: 1.45;
}

body.home-page .founders-strip__link {
    width: fit-content;
    color: #8B5CF7;
    font-size: 0.86rem;
    font-weight: 600;
}

body.home-page .founders-strip__link:hover,
body.home-page .founders-strip__link:focus-visible {
    color: #9B7CF8;
    text-decoration: underline;
}

/* Reviews: initial-avatars + linked, quantified rating */
:is(body.home-page, body.schedule-page) .review-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
}

:is(body.home-page, body.schedule-page) .review-header .google-badge {
    margin-left: auto;
}

:is(body.home-page, body.schedule-page) .review-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(159, 168, 255, 0.24);
    border: 1px solid rgba(159, 168, 255, 0.6);
    color: #F7EEDC;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

:is(body.home-page, body.schedule-page, body.registration-page) a.reviews-proof__source-line {
    color: #A0A8CC;
    text-decoration: underline;
    text-decoration-color: rgba(159, 168, 255, 0.5);
    text-underline-offset: 3px;
}

:is(body.home-page, body.schedule-page, body.registration-page) a.reviews-proof__source-line:hover,
:is(body.home-page, body.schedule-page, body.registration-page) a.reviews-proof__source-line:focus-visible {
    color: #EAEAFB;
    text-decoration-color: #9FA8FF;
}

/* FAQ: structural classes replacing the old inline styles */
body.home-page .home-faq-section {
    max-width: 800px;
    margin: 4rem auto 6rem;
    /* Bottom padding keeps the trial CTA off the card border style.css draws
       around this section on the homepage. */
    padding: 0 1.25rem 2rem;
}

body.home-page .home-faq-section__title {
    text-align: center;
    margin-bottom: 3rem;
}

body.home-page .faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

:is(body.home-page, body.tropic) .faq-item {
    border-radius: 12px;
    overflow: hidden;
}

:is(body.home-page, body.tropic) .faq-item__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    color: var(--text-main);
    font-weight: 600;
    font-size: 1.1rem;
    list-style: none;
}

:is(body.home-page, body.tropic) .faq-item__summary::-webkit-details-marker {
    display: none;
}

:is(body.home-page, body.tropic) .faq-item__icon {
    color: var(--accent-start);
    font-size: 1.5rem;
    line-height: 1;
}

:is(body.home-page, body.tropic) .faq-item__body {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-muted);
    line-height: 1.6;
}

body.home-page .faq-item__body a {
    color: var(--accent-start);
}

body.home-page .home-faq-section__cta {
    margin-top: 2.2rem;
    text-align: center;
}

body.home-page .home-faq-section__cta-copy {
    margin: 0 0 0.9rem;
    color: #A0A8CC;
}

/* Footer: visible WhatsApp line */
body.home-page .footer-contact {
    margin: 0.7rem 0 1rem;
    font-size: 0.95rem;
}

body.home-page .footer-contact a {
    color: #9FA8FF;
}

body.home-page .footer-contact a:hover,
body.home-page .footer-contact a:focus-visible {
    color: #8B5CF7;
}

/* --------------------------------------------------------------------------
   16. BEGINNER GATEWAY — compact editorial scale
   The starter section previously shouted (5rem title, 23rem photo cards,
   cream badges from the old light theme). Everything steps down one size
   and adopts the petrol/brass/coral language.
   -------------------------------------------------------------------------- */
body.home-page .guides-section--starter {
    padding: clamp(2.2rem, 3.6vw, 3.2rem) 0 clamp(2.4rem, 3.8vw, 3.4rem);
}

/* Every other section title on the page is centered (schedule, reviews,
   about, FAQ); this one inherited style.css's left-aligned two-column
   .guides-section rule from before the fork redesign, when a side visual
   sat next to the text. The fork is single-column now, so re-center to match. */
body.home-page .guides-section--starter .guides-section__story {
    margin: 0 auto;
    text-align: center;
}

body.home-page .guides-section--starter .section-title-modern {
    margin: 0 auto;
    font-size: clamp(1.9rem, 2.9vw, 2.8rem) !important;
    text-align: center;
    line-height: 1.14;
}

/* Roman/italic title device: the second line answers softly */
body.home-page .guides-section--starter .section-title-modern span:last-child {
    font-size: 0.82em;
    font-style: italic;
    font-weight: 500;
    color: #F0F0FA;
    margin-top: 0.3em;
}

body.home-page .guides-section--starter .section-subtitle {
    max-width: 560px;
    margin: 0.5rem auto 0;
    font-size: 0.98rem;
    text-align: center;
}

/* Sept 8 start countdown: revealed by script.js under the starter
   subtitle. :not([hidden]) keeps the [hidden] attribute authoritative —
   a bare display: flex would override the UA's [hidden] rule. */
body.home-page .starter-countdown:not([hidden]) {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0.9rem auto 0;
}

body.home-page .starter-countdown__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.1rem;
}

body.home-page .starter-countdown__cell + .starter-countdown__cell {
    border-left: 1px solid rgba(159, 168, 255, 0.28);
}

body.home-page .starter-countdown strong {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.1;
    color: #9FA8FF;
    font-variant-numeric: tabular-nums;
}

body.home-page .starter-countdown small {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(240, 240, 250, 0.72);
}

@media (max-width: 700px) {
    body.home-page .starter-countdown strong {
        font-size: 1.25rem;
    }

    body.home-page .starter-countdown__cell {
        padding: 0 0.85rem;
    }
}

/* Beginner season reminder under the trial CTA booking process: reuses the
   starter-countdown component, left-aligned to match the CTA copy column. */
body.home-page .trial-season-note {
    margin-top: 1.6rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(159, 168, 255, 0.22);
}

body.home-page .trial-season-note__copy {
    max-width: 46ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(240, 240, 250, 0.78);
}

body.home-page .trial-season-note__copy strong {
    color: #9FA8FF;
    font-weight: 600;
}

body.home-page .trial-season-note .starter-countdown:not([hidden]) {
    margin: 1rem 0 0;
}

body.home-page .trial-season-note .starter-countdown__cell:first-child {
    padding-left: 0;
}

/* Inline form errors on the champagne island */
body.home-page .trial-form .form-error {
    margin: 0.5rem 0 0;
    color: #B3261E;
    font-size: 0.88rem;
    font-weight: 500;
}

body.home-page .trial-form input.input-error {
    border-color: #B3261E;
}

/* --------------------------------------------------------------------------
   17. FOCUS PASS — collage recomposition, warm photo grade, compressed trial header,
   events strip, location strip, footer map card, trust microline
   -------------------------------------------------------------------------- */

/* Header: the DE language link steps one tick lighter so the second
   language stays findable without outranking the nav */
body.home-page .lang-switch a {
    color: rgba(240, 240, 250, 0.6);
}

body.home-page .lang-switch a:hover,
body.home-page .lang-switch a:focus-visible {
    color: #F0F0FA;
}

/* Header login — resolved to the compact icon variant to the right of
   EN/DE (the text and button mockup variants were removed). Wrapper
   visibility lives in style.css; only the palette is styled here. */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .header-login__link--icon {
    color: rgba(240, 240, 250, 0.7);
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .header-login__link--icon:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .header-login__link--icon:focus-visible {
    color: #F0F0FA;
}

/* About collage: four photos instead of six. The grid tightens, the
   gallery link anchors to the collage's bottom edge, and the stage
   loses roughly two rows of height. */
body.home-page .atelier-stage {
    grid-template-rows: repeat(9, minmax(2.3rem, auto)) auto auto;
    min-height: clamp(40rem, 44vw, 48rem);
}

body.home-page .atelier-photo--hero {
    grid-column: 1 / 6;
    grid-row: 1 / 5;
}

body.home-page .atelier-photo--class {
    grid-column: 6 / 9;
    grid-row: 2 / 7;
}

body.home-page .atelier-photo--event {
    grid-column: 9 / 13;
    grid-row: 5 / 8;
}

body.home-page .atelier-photo--social {
    grid-column: 6 / 12;
    grid-row: 8 / 11;
}

/* Fifth photo: a wide panorama that fills the dead space in the left
   column between the hero shot and the floating copy card. Desktop only —
   the tablet and phone compositions are complete without it. */
body.home-page .atelier-photo--community {
    grid-column: 1 / 6;
    grid-row: 5 / 8;
    align-self: center;
}

@media (max-width: 1020px) {
    body.home-page .atelier-photo--community {
        display: none;
    }
}

body.home-page .atelier-gallery-meta {
    justify-content: flex-end;
    align-self: auto;
    margin: 0.85rem 0 0;
}

@media (max-width: 1020px) {
    body.home-page .atelier-stage {
        grid-template-rows: repeat(9, minmax(2.5rem, auto)) auto;
        min-height: clamp(46rem, 92vw, 57rem);
    }

    body.home-page .atelier-photo--hero {
        grid-column: 1 / 5;
        grid-row: 1 / 4;
    }

    body.home-page .atelier-photo--class {
        grid-column: 6 / 9;
        grid-row: 4 / 7;
    }

    body.home-page .atelier-photo--event {
        grid-column: 1 / 6;
        grid-row: 4 / 7;
    }

    body.home-page .atelier-photo--social {
        grid-column: 3 / 9;
        grid-row: 7 / 9;
    }

    body.home-page .atelier-gallery-meta {
        justify-content: flex-end;
        align-self: auto;
    }
}

/* Warm cinematic grade — full colour at rest, identical on hover
   (owner decision 2026-07-17: photos stay natural, no reveal effect) */
body.home-page .atelier-photo {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

body.home-page .atelier-photo::after {
    background:
        linear-gradient(165deg, rgba(234, 234, 251, 0.22), transparent 42%),
        linear-gradient(180deg, transparent 55%, rgba(4, 19, 16, 0.5));
    mix-blend-mode: soft-light;
    opacity: 1;
}

body.home-page .atelier-photo:hover {
    border-color: rgba(159, 168, 255, 0.55);
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

body.home-page .atelier-photo:hover::after {
    opacity: 0.25;
}

/* Trial header: roughly 30% shorter — the visitor has read this promise
   five times by now, so the header states it once and steps aside */
body.home-page .cta-premium-wrapper {
    margin: 0 auto 1.3rem;
    padding: 0 0 1.2rem;
    gap: clamp(0.8rem, 2.2vw, 1.3rem);
}

body.home-page .cta-premium-title {
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}

body.home-page .cta-premium-note {
    margin: 0.5rem 0 0.9rem;
}

/* The couple mark joins the Tropic Noir palette: brass instead of the
   old purple/red brand colours */
body.home-page .cta-premium-mark {
    width: clamp(3.2rem, 5vw, 4.2rem);
    filter: grayscale(1) sepia(1) hue-rotate(-8deg) saturate(1.5) brightness(1.35) contrast(0.9);
    opacity: 0.95;
}

/* Trust microline at the moment of commitment */
body.home-page .trial-submit-proof {
    margin: 0.55rem 0 0;
    text-align: center;
    font-size: 0.88rem;
    color: #6E6F8E;
}

body.home-page .trial-submit-proof__stars {
    color: #6F7AE0;
    letter-spacing: 0.12em;
    margin-right: 0.45rem;
}

body.home-page .trial-submit-proof a {
    color: #6E6F8E;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(184, 135, 43, 0.55);
    text-underline-offset: 3px;
}

body.home-page .trial-submit-proof a:hover,
body.home-page .trial-submit-proof a:focus-visible {
    color: #10143A;
    text-decoration-color: #6F7AE0;
}

/* Upcoming events strip: the scene beyond the weekly schedule */
body.home-page .events-strip {
    padding: clamp(3rem, 5.5vw, 4.5rem) 0;
    background: var(--bg-secondary);
}

body.home-page .events-strip__header {
    max-width: 720px;
    margin: 0 auto clamp(1.8rem, 3vw, 2.6rem);
    text-align: center;
}

body.home-page .events-strip__subtitle {
    margin: 0.9rem auto 0;
}

body.home-page .events-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    max-width: 62rem;
    margin: 0 auto;
}

body.home-page .events-strip__card {
    display: flex;
    gap: 1.15rem;
    padding: 1.15rem;
    border-radius: 18px;
}

/* Without this, the card falls back to style.css's unscoped .glass-card:hover
   (near-white background + translateY), washing out the champagne title */
body.home-page .events-strip__card:hover,
body.home-page .events-strip__card:focus-within {
    background: linear-gradient(155deg, #1A2360 0%, #0D2B24 100%);
    border-color: rgba(159, 168, 255, 0.4);
    box-shadow: 0 16px 32px rgba(2, 10, 8, 0.4);
}

body.home-page .events-strip__image {
    flex: 0 0 auto;
    width: clamp(6.5rem, 9vw, 8rem);
    height: auto;
    aspect-ratio: 4 / 5;
    align-self: center;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(159, 168, 255, 0.25);
}

/* The Milano poster carries its title along the top edge; bias the cover
   crop upward so "Milano Sensual Congress" stays visible. */
body.home-page .events-strip__image--top {
    object-position: 50% 35%;
}

body.home-page .events-strip__copy {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

body.home-page .events-strip__date {
    color: #9FA8FF;
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.home-page .events-strip__title {
    margin: 0;
    color: #EAEAFB;
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    line-height: 1.15;
}

body.home-page .events-strip__note {
    margin: 0;
    color: #A0A8CC;
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Artist names inside the note link to their Instagram profiles — quiet
   inline links so the card's coral CTA keeps the visual priority */
body.home-page .events-strip__note a {
    color: #EAEAFB;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(159, 168, 255, 0.55);
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

body.home-page .events-strip__note a:hover,
body.home-page .events-strip__note a:focus-visible {
    color: #9FA8FF;
    text-decoration-color: #9FA8FF;
}

body.home-page .events-strip__link {
    margin-top: auto;
    width: fit-content;
    color: #8B5CF7;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.25s ease;
}

body.home-page .events-strip__link:hover,
body.home-page .events-strip__link:focus-visible {
    color: #9B7CF8;
    text-decoration: underline;
}

body.home-page .events-strip__meta {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.4rem, 2.4vw, 2rem);
}

body.home-page .events-strip__all {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.3rem;
    border-radius: var(--cta-radius-sm);
    border: 1px solid rgba(159, 168, 255, 0.45);
    background: rgba(159, 168, 255, 0.08);
    color: #9FA8FF;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

body.home-page .events-strip__all:hover,
body.home-page .events-strip__all:focus-visible {
    background: rgba(159, 168, 255, 0.16);
    color: #EAEAFB;
}

@media (max-width: 700px) {
    body.home-page .events-strip__card {
        flex-direction: column;
    }

    body.home-page .events-strip__image {
        width: 100%;
        aspect-ratio: 16 / 9;
        align-self: stretch;
    }
}

/* Location section: answers the "where is the studio and how do I get
   there" objection right before the FAQ */
body.home-page .location-strip {
    padding: 0 0 clamp(2.8rem, 4.5vw, 4rem);
}

body.home-page .location-strip__title {
    text-align: center;
    margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

body.home-page .location-strip__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    background: rgba(16, 50, 43, 0.9);
    border: 1px solid rgba(159, 168, 255, 0.22);
    border-radius: 16px;
}

body.home-page .location-strip__item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

body.home-page .location-strip__pin {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: #9FA8FF;
}

body.home-page .location-strip__copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    min-width: 0;
}

body.home-page .location-strip__copy strong {
    color: #EAEAFB;
}

body.home-page .location-strip__detail {
    color: #A0A8CC;
    font-size: 0.9rem;
}

body.home-page .location-strip__actions {
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    body.home-page .location-strip__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.8rem;
    }

    body.home-page .location-strip__actions {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(159, 168, 255, 0.14);
        padding-top: 1.4rem;
    }
}

body.home-page .location-strip__link {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.2rem;
    border-radius: var(--cta-radius-sm);
    border: 1px solid rgba(159, 168, 255, 0.45);
    background: rgba(159, 168, 255, 0.08);
    color: #9FA8FF;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

body.home-page .location-strip__link:hover,
body.home-page .location-strip__link:focus-visible {
    background: rgba(159, 168, 255, 0.16);
    color: #EAEAFB;
}

/* Footer: the heavy map iframe becomes a light petrol card that links
   out to Google Maps */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-map-full {
    margin-bottom: 2rem;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-map-full__heading {
    margin-bottom: 1rem;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-map-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.6rem 1.2rem;
    text-align: center;
    border: 1px solid rgba(159, 168, 255, 0.18);
    border-radius: 16px;
    background: radial-gradient(circle at 50% 0%, rgba(159, 168, 255, 0.07), transparent 55%), #131A4A;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-map-card__pin {
    display: inline-flex;
    color: #9FA8FF;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-map-card__address {
    color: #EAEAFB;
    font-weight: 600;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-map-card__hint {
    color: #A0A8CC;
    font-size: 0.88rem;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-map-card:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .footer-map-card:focus-visible {
    border-color: rgba(159, 168, 255, 0.45);
}

/* Student Stories grid: equal rhythm between rows and columns. Overflow
   stays with style.css: hidden clips the marquee loop on desktop and the
   mobile row scrolls horizontally. */
:is(body.home-page, body.schedule-page) .reviews-grid {
    gap: clamp(0.65rem, 1.6vw, 1rem);
}

/* Student Stories presence: these surface rules must sit AFTER the generic
   glass-card reset in section 12, or that reset wins the cascade tie */
:is(body.home-page, body.schedule-page) .review-card {
    background: linear-gradient(155deg, #13392F 0%, #0D2B24 100%);
    border: 1px solid rgba(159, 168, 255, 0.22);
    box-shadow: 0 16px 32px rgba(2, 10, 8, 0.35);
}

:is(body.home-page, body.schedule-page) .review-card:hover,
:is(body.home-page, body.schedule-page) .review-card:focus-within {
    background: linear-gradient(155deg, #17453A 0%, #1B2258 100%);
    border-color: rgba(139, 92, 247, 0.55);
    box-shadow: 0 20px 40px rgba(2, 10, 8, 0.45);
}

/* Phone swipe progress + closer card, in the brand metals */
:is(body.home-page, body.schedule-page) .reviews-progress__thumb {
    background: linear-gradient(90deg, #9FA8FF, #8B5CF7);
}

:is(body.home-page, body.schedule-page) .review-card--cta {
    border-color: rgba(159, 168, 255, 0.45);
}

:is(body.home-page, body.schedule-page) .review-cta__score {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: #9FA8FF;
}

:is(body.home-page, body.schedule-page) .review-cta__label {
    color: rgba(234, 234, 251, 0.88);
    font-size: 0.9rem;
}

:is(body.home-page, body.schedule-page) .review-cta__hint {
    color: #8B5CF7;
    font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   18. PROOF & PERSISTENCE — stat band, hero hierarchy, mobile trial bar
   -------------------------------------------------------------------------- */

/* Stat band under the hero: four verifiable facts, brass numerals.
   The "200+" claim finally moves from the meta description onto the page. */
body.home-page .home-assurance-strip {
    padding: 0.78rem 0;
    background: linear-gradient(90deg, #0A1030 0%, #0B2A24 50%, #0A1030 100%);
    border-top: 1px solid rgba(159, 168, 255, 0.12);
    border-bottom: 1px solid rgba(159, 168, 255, 0.14);
}

body.home-page .home-assurance-strip__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.home-page .home-assurance-strip__list li {
    display: inline-flex;
    align-items: center;
    color: #EAEAFB;
    font-size: clamp(0.76rem, 0.9vw, 0.88rem);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

body.home-page .home-assurance-strip__list li::before {
    content: '\2713';
    margin-right: 0.42rem;
    color: #9FA8FF;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
}

body.home-page .home-assurance-strip__list li + li {
    margin-left: 1.15rem;
    padding-left: 1.15rem;
    border-left: 1px solid rgba(159, 168, 255, 0.28);
}

body.home-page .stat-band {
    padding: clamp(1.1rem, 2vw, 1.6rem) 0;
    background: #131A4A;
    border-top: 1px solid rgba(159, 168, 255, 0.14);
    border-bottom: 1px solid rgba(159, 168, 255, 0.14);
}

body.home-page .stat-band__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

body.home-page .stat-band__item {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;
    margin: 0;
    min-width: 0;
}

body.home-page .stat-band__item + .stat-band__item {
    border-left: 1px solid rgba(159, 168, 255, 0.16);
}

body.home-page .stat-band__value {
    color: #9FA8FF;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}

body.home-page .stat-band__label {
    color: #A0A8CC;
    font-size: 0.85rem;
    line-height: 1.3;
}

body.home-page .stat-band__label a {
    color: #A0A8CC;
    text-decoration: underline;
    text-decoration-color: rgba(159, 168, 255, 0.5);
    text-underline-offset: 3px;
}

body.home-page .stat-band__label a:hover,
body.home-page .stat-band__label a:focus-visible {
    color: #EAEAFB;
    text-decoration-color: #9FA8FF;
}

@media (max-width: 900px) {
    body.home-page .home-assurance-strip__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem 1rem;
    }

    body.home-page .home-assurance-strip__list li + li {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    /* Phone: a tight 2x2 ribbon — smaller numerals, hairline row gap, so the
       band reads in one glance instead of eating half a screen. */
    body.home-page .stat-band {
        padding: 0.7rem 0;
    }

    body.home-page .stat-band__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem 0;
    }

    body.home-page .stat-band__item {
        align-items: center;
        justify-content: flex-start;
        gap: 0.45rem;
        padding-left: 0.7rem;
    }

    body.home-page .stat-band__value {
        font-size: 1.3rem;
    }

    body.home-page .stat-band__label {
        font-size: 0.76rem;
        line-height: 1.2;
    }

    body.home-page .stat-band__item + .stat-band__item {
        border-left: none;
    }

    body.home-page .stat-band__item:nth-child(even) {
        border-left: 1px solid rgba(159, 168, 255, 0.16);
    }
}

/* Hero hierarchy: the value proposition outranks the decorative brand
   lockup — the visitor already saw the brand in the header */
body.home-page .home-hero__brand {
    font-size: clamp(1.4rem, 2vw, 1.9rem);
}

body.home-page .home-hero__headline {
    margin: 0.4rem 0 0.7rem;
    font-size: clamp(1.65rem, 2.4vw, 2.4rem);
    line-height: 1.18;
}

/* Mobile sticky trial bar: the primary CTA stays reachable after the
   hero scrolls away. Desktop keeps the persistent header CTA instead. */
body.home-page .mobile-cta-bar {
    display: none;
}

@media (max-width: 767px) {
    body.home-page .mobile-cta-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        padding: 0.55rem 0.8rem calc(0.55rem + env(safe-area-inset-bottom));
        background: rgba(4, 19, 16, 0.94);
        border-top: 1px solid rgba(159, 168, 255, 0.25);
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.home-page .mobile-cta-bar--hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    body.home-page .mobile-cta-bar__link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        border-radius: var(--cta-radius);
        background: var(--cta-grad);
        background-size: 160% 100%;
        background-position: 0% 50%;
        color: var(--cta-ink);
        font-family: 'Outfit', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        box-shadow: inset 0 -2px 0 var(--cta-base-rest);
        transition: background-position 0.3s ease, box-shadow 0.25s ease;
    }

    body.home-page .mobile-cta-bar__link:hover,
    body.home-page .mobile-cta-bar__link:focus-visible {
        background-position: 100% 50%;
        color: var(--cta-ink);
        box-shadow: inset 0 -2px 0 var(--cta-base-hover);
    }

    body.home-page .mobile-cta-bar__hint {
        font-weight: 500;
        white-space: pre;
    }

}

/* --------------------------------------------------------------------------
   19. FLOOR-TAPE TICKS — the site's signature mark, extended to the
   schedule and the hero selector. Dancers tape their spot on the floor;
   here a corner tick marks YOUR class. Cards rest clean (hairline only);
   the tick appears on the card that matters: recommended, hovered, or
   active. Replaces the old fading-gradient rails entirely. No fades, no
   glow, no movement — opacity and colour only.
   -------------------------------------------------------------------------- */

/* Schedule cards: top-left tape tick (scoped to .schedule-section so this
   outranks the old style.css rail rules, including the mobile variant) */
:is(body.home-page, body.schedule-page) .schedule-section .class-card::before {
    content: '';
    position: absolute;
    inset: 0.5rem auto auto 0.5rem;
    width: 0.85rem;
    height: 0.85rem;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: none;
    opacity: 1;
    pointer-events: none;
    transition: border-color 0.3s ease;
}

:is(body.home-page, body.schedule-page) .schedule-section .class-card:hover::before {
    border-top-color: #8B5CF7;
    border-left-color: #8B5CF7;
}

/* The recommended card wears its tape permanently */
:is(body.home-page, body.schedule-page) .schedule-section .class-card--recommended::before {
    border-top-color: #8B5CF7;
    border-left-color: #8B5CF7;
}

/* Arrow chip: the old light theme drew a cream circle with a brass arrow —
   brass on cream is unreadable, and the cream blob clashes with the dark
   card. The chip goes dark with a brass tint so the brass arrow shows. */
:is(body.home-page, body.schedule-page) .schedule-section .class-card::after {
    border-color: rgba(159, 168, 255, 0.35);
    background-color: rgba(159, 168, 255, 0.1);
}

:is(body.home-page, body.schedule-page) .schedule-section .class-card:hover::after {
    border-color: rgba(159, 168, 255, 0.6);
    background-color: rgba(159, 168, 255, 0.2);
}

/* Hero selector: the old sheen sweep and coral wash become a pair of
   tape ticks that frame the active (or hovered) choice */
body.home-page .home-hero__choice::before,
body.home-page .home-hero__choice::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 0.65rem;
    height: 0.65rem;
    border: 0 solid #8B5CF7;
    border-radius: 0;
    background: none;
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

body.home-page .home-hero__choice::before {
    inset: 0.3rem auto auto 0.3rem;
    border-top-width: 2px;
    border-left-width: 2px;
}

body.home-page .home-hero__choice::after {
    inset: auto 0.3rem 0.3rem auto;
    border-right-width: 2px;
    border-bottom-width: 2px;
}

body.home-page .home-hero__choice:hover::before,
body.home-page .home-hero__choice:focus-visible::before,
body.home-page .home-hero__choice.active::before,
body.home-page .home-hero__choice.is-active::before,
body.home-page .home-hero__choice[aria-pressed="true"]::before,
body.home-page .home-hero__choice:hover::after,
body.home-page .home-hero__choice:focus-visible::after,
body.home-page .home-hero__choice.active::after,
body.home-page .home-hero__choice.is-active::after,
body.home-page .home-hero__choice[aria-pressed="true"]::after {
    opacity: 1;
    transform: none;
}

/* The old glowing label rail retires; the ticks carry the mark now */
body.home-page .home-hero__choice-copy::before {
    display: none;
}

/* --------------------------------------------------------------------------
   20. FLAGSHIP EVENT — flagship event act styling (poster stage,
   organizes itself, so its card outranks its neighbours: a brass
   organizer chip, a warmer ring, and permanent tape ticks
   (brass at rest, coral when engaged — same grammar as everywhere else).
   -------------------------------------------------------------------------- */


body.home-page .events-strip__card--flagship {
    position: relative;
    border-color: rgba(159, 168, 255, 0.42);
}

body.home-page .events-strip__card--flagship::before,
body.home-page .events-strip__card--flagship::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    transition: border-color 0.3s ease;
}

body.home-page .events-strip__card--flagship::before {
    inset: 0.55rem auto auto 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.75);
    border-left: 2px solid rgba(159, 168, 255, 0.75);
}

body.home-page .events-strip__card--flagship::after {
    inset: auto 0.55rem 0.55rem auto;
    border-right: 2px solid rgba(159, 168, 255, 0.75);
    border-bottom: 2px solid rgba(159, 168, 255, 0.75);
}

body.home-page .events-strip__card--flagship:hover::before,
body.home-page .events-strip__card--flagship:hover::after,
body.home-page .events-strip__card--flagship:focus-within::before,
body.home-page .events-strip__card--flagship:focus-within::after {
    border-color: #8B5CF7;
}

/* --------------------------------------------------------------------------
   20. TRIAL HEADER REFINED — typography, not buttons
   The H2 spans previously inherited the CTA button skins from section 4
   (.cta-outline = brass hairline pill, .cta-filled = solid coral fill),
   so the headline wore two boxes. They are words, not controls: roman
   champagne lead, italic coral accent with the brass-to-coral underline.
   The booking steps drop their pill boxes for one quiet count-in line —
   brass numerals joined by hairline segments, like a dance count.
   -------------------------------------------------------------------------- */
body.home-page .cta-premium-title .cta-outline,
body.home-page .cta-premium-title .cta-outline:hover,
body.home-page .cta-premium-title .cta-outline:focus-visible {
    background: transparent;
    border: none;
    color: #EAEAFB;
}

body.home-page .cta-premium-title .cta-filled,
body.home-page .cta-premium-title .cta-filled:hover,
body.home-page .cta-premium-title .cta-filled:focus-visible {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding-inline-end: 0.14em;
    margin-inline-end: -0.14em;
    background: linear-gradient(100deg, var(--accent-start) 0%, var(--accent-end) 46%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: var(--accent-start);
    font-style: italic;
}

body.home-page .cta-premium-title .cta-filled::after {
    content: '';
    position: absolute;
    left: 0.04em;
    right: 0.12em;
    bottom: 0.02em;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #9FA8FF, #8B5CF7 65%, transparent);
}

/* Count-in steps: no pills, no full-width track — short hairline
   connectors between brass numerals carry the sequence */
body.home-page .trial-process__canvas,
body.home-page .trial-process__track {
    display: none;
}

body.home-page .trial-process {
    min-height: 0;
}

body.home-page .trial-process__list {
    justify-content: flex-start;
    gap: 1.05rem;
}

body.home-page .trial-process__item {
    min-height: 0;
    padding: 0.2rem 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    gap: 0.5rem;
}

/* Steps stack vertically under the eyebrow — a small brass arrow marks
   the descent from one step to the next */
body.home-page .trial-process__item + .trial-process__item::before {
    content: "\2193";
    position: absolute;
    left: 0.95rem;
    top: -0.86rem;
    width: auto;
    height: auto;
    margin: 0;
    transform: translateX(-50%);
    background: none;
    box-shadow: none;
    font-size: 0.85rem;
    line-height: 1;
    color: rgba(159, 168, 255, 0.7);
}

body.home-page .trial-process__step {
    width: 1.9rem;
    min-width: 1.9rem;
    min-height: 1.9rem;
    background: rgba(159, 168, 255, 0.08);
    border: 1px solid rgba(159, 168, 255, 0.55);
    color: #9FA8FF;
    box-shadow: none;
}

body.home-page .trial-process__item strong {
    color: #EAEAFB;
    font-size: clamp(0.9rem, 1.2vw, 1.02rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.35;
    white-space: normal;
}

@media (max-width: 899px) {
    body.home-page .trial-process__item {
        width: auto;
        padding: 0.2rem 0;
        background: transparent;
        border: none;
    }

    body.home-page .trial-process__list {
        gap: 0.9rem;
    }

    body.home-page .trial-process__item strong {
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
   21. KEYBOARD FOCUS — hover now presses the planted base edge instead of
   drawing the brass ring, so the ring returns here for :focus-visible only
   (keyboard users need an indicator that does not depend on colour depth).
   -------------------------------------------------------------------------- */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-hero-primary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .home-hero__actions .btn-hero-primary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .home-hero__panel-actions .btn-hero-primary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-confidence .btn-primary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-first-step__actions .btn-primary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-header-cta:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .stay-link:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .starter-fork__trial:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .schedule-offramp__cta:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .home-faq-section__cta-link:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .mobile-cta-bar__link:focus-visible {
    outline: 1px solid #9FA8FF;
    outline-offset: 3px;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-submit:focus-visible {
    outline: 1px solid var(--cta-form-accent);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   22. CONVERSION PASS — "not sure" escape hatch in the class picker and the
   price-transparency note under the submit button. Both remove hesitation at
   the moment of commitment: the first removes wrong-level anxiety, the second
   removes the "what is the catch" suspicion around a free offer.
   -------------------------------------------------------------------------- */
body.home-page .trial-step .compact-option--unsure {
    display: block;
    margin-top: 0.9rem;
}

body.home-page .trial-step .compact-option--unsure .compact-card {
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-color: rgba(124, 92, 232, 0.4);
}

body.home-page .trial-step .compact-option--unsure .compact-name {
    flex: 0 1 auto;
}

body.home-page .trial-step .compact-status--unsure {
    display: inline-block;
    flex: 0 0 auto;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    background: #9FA8FF;
    color: #10143A;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.home-page .trial-submit-pricing {
    max-width: 32rem;
    margin: 0.55rem auto 0;
    color: #6E6F8E;
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 899px) {
    body.home-page .trial-step .compact-option--unsure .compact-card {
        flex-direction: column;
        gap: 0.45rem;
        border: 1px solid rgba(124, 92, 232, 0.4);
        border-radius: 0.5rem;
        background: #FBFBFE;
        padding: 0.85rem 1rem;
    }

    body.home-page .trial-step--choice .compact-option--unsure .compact-status {
        order: 0;
        margin-left: 0;
    }
}

/* Mobile timetable readability: the old light-theme mobile rule in style.css
   (@media max-width 899px) paints .hidden-desktop .class-card with a cream
   gradient using !important, which beats the tropic dark card surface and
   leaves cream text on a cream card. Re-assert the tropic surface with the
   same weight; the time column moves from low-contrast bronze to brass. */
@media (max-width: 899px) {
    :is(body.home-page, body.schedule-page) .hidden-desktop .class-card {
        background: #1B2258 !important;
        border-color: rgba(159, 168, 255, 0.14);
        box-shadow: none;
    }

    :is(body.home-page, body.schedule-page) .hidden-desktop .class-card:hover {
        background: #1E2A6E !important;
        border-color: rgba(159, 168, 255, 0.45);
    }

    :is(body.home-page, body.schedule-page) .hidden-desktop .mobile-time {
        color: #9FA8FF;
        border-right-color: rgba(159, 168, 255, 0.26);
    }
}

/* Mobile photo mosaic: on phones the four stacked atelier photos ran the
   "Belong" section past two viewports. They become one magazine mosaic —
   the studio community shot (--event) leads full width, the other three
   sit under it as square tiles, so all four photos share one glance with
   no swiping. Static grid, no scroll capture, so no pointer gating is
   needed. */
@media (max-width: 700px) {
    body.home-page .atelier-fallback--story {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
        margin-top: 1.1rem;
        min-height: 0;
    }

    /* The desktop collage assigns explicit grid-column/row spans per photo
       (§ about collage, ~lines 1787/1820) — reset them so the mosaic flows */
    body.home-page .atelier-fallback--story .atelier-photo {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 1 / 1;
        margin: 0;
        clip-path: none;
    }

    /* On phones the lead slot goes to --event (owner pick 2026-08-05);
       --hero falls back to a square tile via the reset above. order: -1
       lifts it over the earlier DOM siblings. */
    body.home-page .atelier-fallback--story .atelier-photo--event {
        order: -1;
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }

    /* Captions are unreadable on ~108px tiles; the photos carry the story */
    body.home-page .atelier-fallback--story .atelier-photo__caption {
        display: none;
    }

    /* The stage min-height (§ about collage, ≤1020px clamp) was sized for
       the stacked photos and would leave a void under the short mosaic */
    body.home-page .atelier-stage {
        min-height: 0;
    }

    /* Compact the header panel and copy block so the header, all four
       photos, and the gallery link share one phone viewport */
    body.home-page .stay-visual__header.atelier-copy {
        padding: 1.1rem 1.2rem 0.9rem;
    }

    body.home-page .stay-visual__header .section-title-modern {
        font-size: clamp(1.7rem, 7vw, 2.1rem);
        line-height: 1.12;
    }

    body.home-page .stay-visual__header .section-title-left {
        text-align: center;
    }

    body.home-page .stay-visual__header .section-title-left::after {
        margin-left: auto;
        margin-right: auto;
    }

    body.home-page .stay-copy {
        padding: 1.3rem 1.2rem 1.4rem;
    }

    body.home-page .stay-visual__header .atelier-gallery-meta {
        justify-content: center;
        margin-top: 0.75rem;
    }
}

/* Mobile hero CTAs: below 900px the panel already stacks headline and the
   video picker, so both the full-width .home-hero__panel-actions button
   pair and the pill-grid assurance badges are dropped in favour of the
   compact stage-overlay actions and the plain-text assurance line desktop
   already uses over the video — one less block stacked in the panel. */
body.home-page .home-hero__assurance--panel {
    display: none;
}

body.home-page .home-hero__launch-note {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.55rem;
    max-width: 50rem;
    margin: 0 0 0.18rem;
    padding: 0.62rem 0.78rem;
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 var(--cta-radius-sm) var(--cta-radius-sm) 0;
    background: linear-gradient(90deg, rgba(4, 19, 16, 0.96), rgba(4, 19, 16, 0.82));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    color: rgba(240, 240, 250, 0.94);
    font-size: clamp(0.82rem, 1vw, 0.94rem);
    line-height: 1.3;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.home-page .home-hero__launch-note strong {
    color: var(--accent-gold);
    font-weight: 800;
}

body.home-page .home-hero__launch-separator {
    color: rgba(159, 168, 255, 0.72);
    font-weight: 800;
}

body.home-page .home-hero__launch-note-line2 {
    flex: 0 0 100%;
    color: rgba(240, 240, 250, 0.82);
}

body.home-page .home-hero__launch-note code {
    padding: 0.1rem 0.38rem;
    border: 1px solid rgba(245, 244, 252, 0.22);
    border-radius: 5px;
    background: var(--accent-gold);
    color: var(--text-dark);
    font-family: 'Inter', sans-serif;
    font-size: 0.94em;
    font-weight: 700;
    letter-spacing: 0.01em;
}

@media (max-width: 899px) {
    body.home-page .home-hero__panel-actions {
        display: none;
    }

    body.home-page .home-hero__actions {
        display: flex;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        max-width: none;
        gap: 0.4rem;
    }

    body.home-page .home-hero__actions .btn-hero {
        flex: 1 1 0;
        min-width: 0;
        min-height: 2.3rem;
        padding: 0.5rem 0.4rem;
        font-size: 0.62rem;
        white-space: nowrap;
    }

    body.home-page .home-hero__actions .btn-hero-content {
        gap: 0.2rem;
    }

    body.home-page .home-hero__actions .home-hero__assurance li {
        font-size: 0.68rem;
    }

    body.home-page .home-hero__launch-note {
        gap: 0.08rem 0.36rem;
        padding: 0.48rem 0.58rem;
        font-size: 0.68rem;
        line-height: 1.25;
    }
}

/* Pricing summary: keep the complete value proposition while reducing the
   vertical footprint between the events and trial sections. */
body.home-page .pricing-strip {
    padding: clamp(1.6rem, 2.8vw, 2.1rem) 0;
}

body.home-page .pricing-strip__inner {
    gap: clamp(1.25rem, 2.5vw, 2rem);
    padding: clamp(1.4rem, 2.4vw, 1.9rem);
}

body.home-page .pricing-strip__title-row {
    margin-bottom: 0.55rem;
}

body.home-page .pricing-strip__lead {
    margin-bottom: 0.9rem;
    line-height: 1.5;
}

body.home-page .pricing-strip__figure {
    padding: 1.15rem clamp(1rem, 3.5vw, 1.35rem);
}

body.home-page .pricing-strip__equivalent {
    margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   23. STARTER FORK — the beginner gateway as a self-selection fork of two
   editorial warm snapshots. Each path opens with a photo in the warm
   cinematic grade (§17 recipe) wearing floor-tape
   corner ticks; the first-person voice line overlaps the photo's bottom
   edge like a magazine caption; course, eyebrow, and CTAs follow. Colour
   blooms on hover — attention is rewarded, nothing moves. A brass hairline
   with an "or" chip splits the paths.
   -------------------------------------------------------------------------- */
body.home-page .starter-fork {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: clamp(1.2rem, 2.6vw, 2.2rem);
    margin-top: clamp(1rem, 2vw, 1.6rem);
}

/* The warm snapshot — a small thumbnail beside the copy rather than a
   full-width banner on top of it */
body.home-page .starter-fork__photo {
    position: relative;
    grid-area: photo;
    align-self: start;
    width: 100%;
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(159, 168, 255, 0.2);
}

body.home-page .starter-fork__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
    transition: filter 0.45s ease;
}

body.home-page .starter-fork__photo--foundation img {
    object-position: center 22%;
}

/* Champagne lift + petrol floor, same soft-light wash as the About collage */
body.home-page .starter-fork__photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(165deg, rgba(234, 234, 251, 0.22), transparent 42%),
        linear-gradient(180deg, transparent 55%, rgba(4, 19, 16, 0.5));
    mix-blend-mode: soft-light;
}

/* Floor-tape ticks: brass L-marks on opposite corners of the snapshot */
body.home-page .starter-fork__photo::after {
    content: '';
    position: absolute;
    inset: 0.65rem;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(#9FA8FF, #9FA8FF) top left / 1rem 2px,
        linear-gradient(#9FA8FF, #9FA8FF) top left / 2px 1rem,
        linear-gradient(#9FA8FF, #9FA8FF) bottom right / 1rem 2px,
        linear-gradient(#9FA8FF, #9FA8FF) bottom right / 2px 1rem;
    background-repeat: no-repeat;
    opacity: 0.8;
}

/* Colour is the reward for attention (hover or keyboard focus anywhere
   in the path); paint-only, nothing moves */
body.home-page .starter-fork .starter-fork__path:hover .starter-fork__photo img,
body.home-page .starter-fork .starter-fork__path:focus-within .starter-fork__photo img {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

/* The .guide-card class remains only so the shared gateway entrance
   choreography in script.js picks the paths up; its card skin from
   style.css (cream glass, blur, padding, hover sheen) is neutralised. */
body.home-page .starter-fork .starter-fork__path {
    display: grid;
    grid-template-columns: clamp(120px, 16vw, 180px) minmax(0, 1fr);
    grid-template-areas:
        "photo voice"
        "photo body";
    column-gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
    padding: clamp(0.2rem, 0.8vw, 0.6rem) 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
}

body.home-page .starter-fork .starter-fork__path:hover {
    background: none;
    border-color: transparent;
    box-shadow: none;
}

body.home-page .starter-fork .starter-fork__path::before {
    content: none;
}

/* The voice line: a caption strip that sits beside the thumbnail, not
   overlapping it — the card now runs horizontal, not stacked */
body.home-page .starter-fork__voice {
    position: relative;
    z-index: 3;
    grid-area: voice;
    justify-self: start;
    display: inline-block;
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.9rem 0.5rem 0.8rem;
    background: #08211C;
    border-left: 2px solid #9FA8FF;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.35;
    color: #EAEAFB;
}

body.home-page .starter-fork__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-area: body;
    padding: 0;
}

body.home-page .starter-fork__course {
    margin: 0 0 0.55rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.45rem, 2.1vw, 1.85rem);
    line-height: 1.15;
    color: #F0F0FA;
}

body.home-page .starter-fork__when {
    margin: 0 0 clamp(0.9rem, 1.6vw, 1.2rem);
    font-size: clamp(0.74rem, 0.95vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #9FA8FF;
}

body.home-page .starter-fork__promise {
    margin: 0 0 clamp(1.3rem, 2.4vw, 1.9rem);
    max-width: 26rem;
    font-size: clamp(0.92rem, 1.05vw, 0.98rem);
    line-height: 1.65;
    color: #A0A8CC;
}

body.home-page .starter-fork__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(0.9rem, 1.8vw, 1.4rem);
    margin-top: auto;
}

/* Same tier-2 recipe as the old card trial links: soft tint at rest,
   the gradient arrives on engagement (the form CTA stays the loud one) */
body.home-page .starter-fork__trial {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.55rem 1.25rem;
    border-radius: var(--cta-radius-sm);
    background: var(--cta-soft-bg);
    border: 1px solid var(--cta-soft-border);
    color: var(--cta-soft-text);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--cta-base-soft);
    outline: 1px solid transparent;
    outline-offset: 3px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, outline-color 0.25s ease;
}

body.home-page .starter-fork__trial:hover,
body.home-page .starter-fork__trial:focus-visible {
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    border-color: transparent;
    color: var(--cta-ink);
    box-shadow: inset 0 -2px 0 var(--cta-base-hover);
}

body.home-page .starter-fork__more {
    font-size: 0.88rem;
    font-weight: 600;
    color: #A0A8CC;
    text-decoration: underline;
    text-decoration-color: rgba(159, 168, 255, 0.4);
    text-underline-offset: 4px;
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

body.home-page .starter-fork__more:hover,
body.home-page .starter-fork__more:focus-visible {
    color: #9B7CF8;
    text-decoration-color: currentColor;
}

/* The fork's hinge: a brass hairline with the "or" chip riding it */
body.home-page .starter-fork__divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
}

body.home-page .starter-fork__divider::before {
    content: '';
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 50%;
    width: 1px;
    background: rgba(159, 168, 255, 0.35);
}

body.home-page .starter-fork__divider span {
    position: relative;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(159, 168, 255, 0.5);
    border-radius: 999px;
    background: #0A241F;
    color: #9FA8FF;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Phone compaction: each path becomes a thumbnail row — small warm-graded
   square beside the voice line, course, and eyebrow; the promise line is
   cut (the quote and eyebrow already carry it). The !importants out-rank
   style.css's max-767 "icon copy" .guide-card grid (documented lesson). */
@media (max-width: 768px) {
    body.home-page .starter-fork {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    body.home-page .starter-fork .starter-fork__path {
        grid-template-columns: 6.5rem minmax(0, 1fr) !important;
        grid-template-areas:
            "photo voice"
            "photo body" !important;
        column-gap: 0.9rem !important;
        padding: 0.2rem 0 !important;
    }

    body.home-page .starter-fork__photo {
        aspect-ratio: 1 / 1;
        border-radius: 12px;
    }

    /* Smaller tape ticks for the thumbnail scale */
    body.home-page .starter-fork__photo::after {
        inset: 0.4rem;
        background:
            linear-gradient(#9FA8FF, #9FA8FF) top left / 0.7rem 2px,
            linear-gradient(#9FA8FF, #9FA8FF) top left / 2px 0.7rem,
            linear-gradient(#9FA8FF, #9FA8FF) bottom right / 0.7rem 2px,
            linear-gradient(#9FA8FF, #9FA8FF) bottom right / 2px 0.7rem;
        background-repeat: no-repeat;
    }

    /* The caption strip sits beside the thumb — no overlap in a row */
    body.home-page .starter-fork__voice {
        margin: 0 0 0.45rem;
        padding: 0.4rem 0.7rem 0.4rem 0.65rem;
        font-size: 1rem;
    }

    body.home-page .starter-fork__promise {
        display: none;
    }

    body.home-page .starter-fork__when {
        margin-bottom: 0;
    }

    body.home-page .starter-fork__actions {
        margin-top: 0.85rem;
        gap: 0.8rem;
    }

    body.home-page .starter-fork__divider {
        width: auto;
        min-height: 1.6rem;
    }

    body.home-page .starter-fork__divider::before {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
    }
}

/* --------------------------------------------------------------------------
   23. CONTACT PAGE — the question-flow hero, the studio details card, and
   the contact form adopt the Tropic Noir language: petrol surfaces, brass
   hairlines, the italic gradient keyword, and the champagne conversion
   island (mirroring the trial form in section 11). Scoped to
   body.contact-page; loaded by contact.html and de/contact.html only.
   -------------------------------------------------------------------------- */

/* The idle language link keeps a raw plum tone in style.css */
:is(body.contact-page, body.events-page) .lang-switch a {
    color: rgba(240, 240, 250, 0.75);
}

:is(body.contact-page, body.events-page) .lang-switch a:hover,
:is(body.contact-page, body.events-page) .lang-switch a:focus-visible {
    color: #F0F0FA;
}

/* Question-flow hero: petrol canvas with faint coral/brass ambience */
body.contact-page .contact-question-flow {
    background:
        radial-gradient(ellipse at 72% 38%, rgba(139, 92, 247, 0.09) 0%, transparent 42%),
        radial-gradient(ellipse at 24% 76%, rgba(159, 168, 255, 0.09) 0%, transparent 38%),
        linear-gradient(135deg, #131A4A 0%, #0A1030 62%);
    color: var(--text-main);
}

body.contact-page .contact-question-flow::before {
    background:
        linear-gradient(90deg, transparent 0%, rgba(159, 168, 255, 0.06) 24%, transparent 44%),
        linear-gradient(135deg, transparent 0%, rgba(139, 92, 247, 0.05) 58%, transparent 82%);
}

body.contact-page .contact-quick-actions::after {
  background: linear-gradient(90deg, transparent, rgba(159, 168, 255, 0.65), rgba(139, 92, 247, 0.45), transparent);
}

body.contact-page .contact-question-flow__title {
    color: #EAEAFB;
}

/* The rotating word is the title's emotive accent: italic serif, coral
   through brass glyphs (glyph colors flow from the remapped tokens) */
body.contact-page .contact-question-flow__word-slot {
    font-family: var(--font-heading);
    font-style: italic;
}

body.contact-page .contact-question-flow__word {
    text-shadow: none;
}

/* The slot clips at its padding edge (overflow: hidden), so the underline
   drops below the italic descenders via bottom padding, not a negative
   offset (which would be clipped away) */
body.contact-page .contact-question-flow__word-slot {
    padding-bottom: 0.22em;
}

body.contact-page .contact-question-flow__word-slot::before {
    bottom: 0.02em;
    background: linear-gradient(90deg, rgba(159, 168, 255, 0.75), rgba(139, 92, 247, 0.5), transparent);
}

body.contact-page .contact-question-flow__canvas {
    opacity: 0;
}

/* Details/form band: solid petrol with one faint brass streak */
body.contact-page .contact-section--modern {
    background: #0A1030;
}

body.contact-page .contact-section--modern::before {
    background: linear-gradient(90deg, transparent 0%, rgba(159, 168, 255, 0.05) 34%, transparent 56%);
}

/* Section headings: serif like every Tropic Noir title, with the dancing
   underline; the accent word carries the coral-to-brass gradient */
body.contact-page .contact-info-card--modern h2,
body.contact-page .contact-form--modern h2 {
    font-family: var(--font-heading);
    font-weight: 700;
}

body.contact-page .contact-info-card--modern h2 {
    color: #EAEAFB;
}

body.contact-page .contact-info-card--modern h2::after,
body.contact-page .contact-form--modern h2::after {
    content: '';
    display: block;
    width: 5.25rem;
    height: 2px;
    margin: 1.05rem 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold) 72%, var(--accent-start) 100%);
}

body.contact-page .contact-info-card--modern h2 .title-accent {
    font-style: italic;
    background: linear-gradient(100deg, #8B5CF7 0%, #5B7CFF 46%, #9FA8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8B5CF7;
}

/* Studio details card: solid petrol surface, brass hairline, sage copy */
body.contact-page .contact-info-card--modern {
    background: linear-gradient(135deg, #1B2258 0%, #131A4A 100%);
    border: 1px solid rgba(159, 168, 255, 0.2);
    color: #F0F0FA;
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.contact-page .contact-info-card--modern .section-kicker {
    color: #C7CDFF;
}

body.contact-page .contact-item--modern {
    background: rgba(4, 19, 16, 0.45);
    border: 1px solid rgba(159, 168, 255, 0.16);
    box-shadow: none;
}

body.contact-page .contact-item--modern p {
    color: #A0A8CC;
}

body.contact-page .contact-address-note {
    color: rgba(157, 180, 171, 0.85);
}

body.contact-page .contact-item--modern a:hover,
body.contact-page .contact-item--modern a:focus-visible {
    color: #A48BFB;
}

/* Icon chips: the tier-2 soft coral recipe, no glow */
body.contact-page .contact-icon {
    background: var(--cta-soft-bg);
    border: 1px solid var(--cta-soft-border);
    color: #A48BFB;
    box-shadow: none;
}

body.contact-page .contact-embedded-map {
    background: rgba(4, 19, 16, 0.45);
    border: 1px solid rgba(159, 168, 255, 0.2);
    box-shadow: none;
}

/* The contact form is the page's champagne conversion island */
body.contact-page .contact-form--modern {
    background: #E8E9F8;
    border: 1px solid rgba(36, 20, 7, 0.16);
    color: #10143A;
    box-shadow: 0 24px 60px rgba(2, 10, 8, 0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.contact-page .contact-form--modern h2 {
    color: #16163A;
}

/* On champagne the accent word goes deep rust (AA against the island) */
body.contact-page .contact-form--modern h2 .title-accent {
    font-style: italic;
    color: #5B3DC8;
}

body.contact-page .contact-form--modern .section-kicker {
    color: #4B2F9E;
}

body.contact-page .contact-form--modern .form-label {
    color: #16163A;
}

body.contact-page .contact-form--modern .form-input,
body.contact-page .contact-form--modern .form-textarea {
    background: #FBFBFE;
    border: 1px solid #B9C0F0;
    color: #12122E;
    border-radius: var(--cta-radius-sm);
    box-shadow: none;
}

body.contact-page .contact-form--modern .form-input::placeholder,
body.contact-page .contact-form--modern .form-textarea::placeholder {
    color: #8E93B8;
}

body.contact-page .contact-form--modern .form-input:focus,
body.contact-page .contact-form--modern .form-textarea:focus {
    background: #FBFBFE;
    border-color: var(--cta-form-accent);
    outline: 2px solid var(--cta-form-accent);
    outline-offset: 1px;
    box-shadow: none;
}

/* Submit: ink on champagne, planted (no pill), like the trial submit */
body.contact-page .contact-submit {
    background: var(--cta-submit-bg);
    border: 1px solid transparent;
    border-radius: var(--cta-radius);
    color: var(--cta-submit-text);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
    text-shadow: none;
    outline: 1px solid transparent;
    outline-offset: 3px;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, outline-color 0.25s ease;
}

body.contact-page .contact-submit::before,
body.contact-page .contact-submit::after {
    content: none;
    animation: none;
}

body.contact-page .contact-submit:hover,
body.contact-page .contact-submit:focus-visible {
    background: var(--cta-submit-bg-hover);
    border-color: transparent;
    color: var(--cta-submit-text);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.55);
}

body.contact-page .contact-submit:focus-visible {
    outline: 1px solid var(--cta-form-accent);
}

body.contact-page .contact-form__privacy {
    color: #6E6F8E;
}

body.contact-page .contact-form__privacy a {
    color: #4B2F9E;
}

body.contact-page .contact-form__privacy a:hover,
body.contact-page .contact-form__privacy a:focus-visible {
    color: #10143A;
}

/* Footer copy: sage over the section-14 petrol footer (beats the old
   cream-tinted rules of the same specificity in style.css) */
:is(body.contact-page, body.events-page) .main-footer .footer-address,
:is(body.contact-page, body.events-page) .main-footer .footer-links a,
:is(body.contact-page, body.events-page) .main-footer .footer-bottom {
    color: #A0A8CC;
}

:is(body.contact-page, body.events-page) .main-footer .footer-links a:hover {
    color: #8B5CF7;
}

:is(body.contact-page, body.events-page) .main-footer .footer-logo .logo-subtitle {
    color: #9FA8FF;
}

.footer-credit {
    margin-top: 0.5rem;
}

.main-footer .footer-bottom .footer-credit a {
    color: #9FA8FF;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.main-footer .footer-bottom .footer-credit a:hover,
.main-footer .footer-bottom .footer-credit a:focus-visible {
    color: #8B5CF7;
}

/* Burger-band header: on nav-declutter pages the burger menu runs up to
   1023px (desktop row starts at 1024), so this whole mobile skin must too —
   at 899px the 900-1023 window fell back to the legacy violet overlay. */
@media (max-width: 1023px) {
    :is(body.contact-page, body.events-page, body.tropic) .main-header {
        background: rgba(6, 26, 23, 0.96) !important;
        border-bottom-color: rgba(159, 168, 255, 0.16);
        box-shadow: 0 10px 26px rgba(2, 10, 8, 0.35);
    }

    :is(body.home-page, body.contact-page, body.events-page, body.tropic) .logo-title {
        color: #EAEAFB !important;
    }

    :is(body.home-page, body.contact-page, body.events-page, body.tropic) .logo-subtitle {
        color: #9FA8FF !important;
    }

    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .mobile-menu-btn {
        color: #EAEAFB !important;
        background: rgba(12, 42, 36, 0.85) !important;
        border: 1px solid rgba(159, 168, 255, 0.3) !important;
        border-radius: 14px;
        box-shadow: none;
        transition: border-color 0.35s ease, background-color 0.35s ease;
    }

    /* While the menu is open the frame warms from brass to the coral of the
       X inside it. */
    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .mobile-menu-btn.active {
        border-color: rgba(139, 92, 247, 0.55) !important;
        background: rgba(20, 30, 26, 0.9) !important;
    }

    :is(body.home-page, body.contact-page, body.events-page, body.tropic) .lang-switch,
    :is(body.home-page, body.contact-page, body.events-page, body.tropic) .lang-switch a,
    :is(body.home-page, body.contact-page, body.events-page, body.tropic) .lang-switch span {
        color: #F0F0FA !important;
    }

    :is(body.home-page, body.contact-page, body.events-page, body.tropic) .lang-switch .divider {
        color: rgba(240, 240, 250, 0.3) !important;
    }

    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active {
        background: linear-gradient(180deg, rgba(6, 26, 23, 0.99), rgba(12, 42, 36, 0.99));
        border-top: 1px solid rgba(159, 168, 255, 0.16);
    }

    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active > a,
    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active .dropbtn,
    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active .dropdown-content a {
        color: #F0F0FA !important;
    }

    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active .btn-header-cta {
        color: var(--text-inverse) !important;
    }

    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active .btn-header-cta:hover,
    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active .btn-header-cta:focus-visible {
        color: var(--cta-ink) !important;
    }

    /* The portal is an important destination, not another content page.
       Give it a distinct mobile treatment and a short clarifying label while
       leaving the compact desktop login icon unchanged. */
    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active > a.nav-portal-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: min(15rem, calc(100vw - 4rem));
        min-height: 3.45rem;
        margin: 0.35rem 0 0.45rem;
        padding: 0.55rem 1.25rem 0.48rem;
        border: 1px solid var(--accent-gold);
        border-radius: 999px;
        background: var(--bg-elevated);
        color: var(--accent-gold) !important;
        box-shadow: inset 0 0 0 1px var(--glass-border);
        font-weight: 800;
        letter-spacing: 0.12em;
        line-height: 1.05;
    }

    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active > a.nav-portal-item::after {
        content: 'Student portal';
        position: static;
        width: auto;
        height: auto;
        margin-top: 0.2rem;
        transform: none;
        background: none;
        color: var(--text-muted);
        font-family: 'Inter', sans-serif;
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        line-height: 1;
        box-shadow: none;
        text-transform: uppercase;
    }

    html[lang='de'] :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active > a.nav-portal-item::after {
        content: 'Schülerportal';
    }

    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active > a.nav-portal-item:hover,
    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active > a.nav-portal-item:focus-visible {
        border-color: var(--accent-start);
        background: var(--glass-bg);
        color: var(--accent-start) !important;
        box-shadow: inset 0 0 0 1px var(--glass-border), var(--shadow-soft);
    }

    :is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .nav-links.active .dropdown-content {
        background: rgba(12, 42, 36, 0.9);
        box-shadow: none;
    }
}

/* --------------------------------------------------------------------------
   24. EVENTS PAGE — "The Season": a cinematic hero over the Compás WebGL
   stage, a season rail of date tiles, two editorial event acts (local
   bootcamp, Milano group trip), a proof mosaic, and a closing bridge back
   to the free trial. Scoped to body.events-page; loaded by events.html
   and de/events.html only. Fresh block names (events-hero-stage,
   season-rail, event-act, event-nights, events-bridge) so nothing
   collides with the homepage events-strip rules in section 20.
   -------------------------------------------------------------------------- */

/* Hero stage: a still, warm petrol room — coral and brass ambience only,
   no animated scene (ambient WebGL heroes were rejected by the owner);
   the motion on this page is the content itself moving in */
body.events-page .events-hero-stage {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(32rem, 74vh);
    padding: calc(var(--header-height) + 2.4rem) 1.25rem 2.8rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 72% 26%, rgba(139, 92, 247, 0.14) 0%, transparent 46%),
        radial-gradient(ellipse at 20% 80%, rgba(159, 168, 255, 0.13) 0%, transparent 44%),
        radial-gradient(ellipse at 50% 110%, rgba(159, 168, 255, 0.08) 0%, transparent 52%),
        linear-gradient(160deg, #131A4A 0%, #0A1030 58%);
}

body.events-page .events-hero-stage__inner {
    position: relative;
    z-index: 1;
    max-width: 62rem;
    margin: 0 auto;
    text-align: center;
}

body.events-page .events-hero-stage__kicker {
    display: block;
    margin-bottom: 0.8rem;
    color: #9FA8FF;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.events-page .events-hero-stage__title {
    margin: 0 auto;
    max-width: 17ch;
    color: #EAEAFB;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5.6vw, 4.4rem);
    font-weight: 700;
    line-height: 1.08;
}

body.events-page .events-hero-stage__title .title-accent {
    font-style: italic;
    background: linear-gradient(100deg, #8B5CF7 0%, #5B7CFF 46%, #9FA8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8B5CF7;
}

body.events-page .events-hero-stage__lede {
    max-width: 40rem;
    margin: 1.1rem auto 0;
    color: #A0A8CC;
    font-size: 1.04rem;
    line-height: 1.6;
}

body.events-page .events-hero-stage__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.7rem;
}

/* Countdown to the event start — content is filled by script.js; the block
   ships hidden so no-JS visitors never see frozen zeros. */
body.events-page .events-hero-stage__countdown {
    margin-top: 1.5rem;
}

body.events-page .events-hero-stage__countdown-label {
    display: block;
    margin-bottom: 0.7rem;
    color: #9FA8FF;
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.events-page .events-hero-stage__countdown-units {
    display: flex;
    justify-content: center;
    gap: 1.9rem;
}

body.events-page .events-hero-stage__countdown-unit {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.4rem;
}

body.events-page .events-hero-stage__countdown-unit + .events-hero-stage__countdown-unit::before {
    content: '·';
    position: absolute;
    left: -1.15rem;
    top: 0.35rem;
    color: rgba(159, 168, 255, 0.55);
    font-weight: 800;
}

body.events-page .events-hero-stage__countdown-value {
    color: #EAEAFB;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

body.events-page .events-hero-stage__countdown-cap {
    margin-top: 0.15rem;
    color: #A0A8CC;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Event acts: editorial split — poster in a taped frame, copy beside it */
body.events-page .event-act {
    padding: 5.5rem 0;
}

body.events-page .event-act--local {
    background: linear-gradient(180deg, #0A1030 0%, #131A4A 100%);
}

body.events-page .event-act--milano {
    background: linear-gradient(180deg, #131A4A 0%, #0A1030 100%);
}

body.events-page .event-act__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

body.events-page .event-act--milano .event-act__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

body.events-page .event-act--milano .event-act__media {
    order: 2;
}

body.events-page .event-act__media {
    position: relative;
    margin: 0;
    padding: 0.9rem;
    background: #1B2258;
    border: 1px solid rgba(159, 168, 255, 0.24);
    border-radius: 18px;
}

body.events-page .event-act__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Permanent brass tape on the poster frame, coral when engaged */
body.events-page .event-act__media::before,
body.events-page .event-act__media::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    transition: border-color 0.3s ease;
}

body.events-page .event-act__media::before {
    inset: 0.45rem auto auto 0.45rem;
    border-top: 2px solid rgba(159, 168, 255, 0.75);
    border-left: 2px solid rgba(159, 168, 255, 0.75);
}

body.events-page .event-act__media::after {
    inset: auto 0.45rem 0.45rem auto;
    border-right: 2px solid rgba(159, 168, 255, 0.75);
    border-bottom: 2px solid rgba(159, 168, 255, 0.75);
}

body.events-page .event-act:hover .event-act__media::before,
body.events-page .event-act:hover .event-act__media::after {
    border-color: #8B5CF7;
}

body.events-page .event-act__flag {
    width: fit-content;
    margin-bottom: 1rem;
    padding: 0.24rem 0.7rem;
    border-radius: 999px;
    background: #9FA8FF;
    color: #10143A;
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.events-page .event-act__kicker {
    display: block;
    margin-bottom: 0.85rem;
    color: #9FA8FF;
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.events-page .event-act__date {
    display: block;
    margin-bottom: 0.4rem;
    color: #8B5CF7;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.events-page .event-act .section-title-modern {
  margin-bottom: 1.3rem;
  text-align: left;
}

body.events-page .event-act__copy {
    color: #A0A8CC;
    font-size: 1.03rem;
    line-height: 1.75;
    margin-bottom: 1.1rem;
}

body.events-page .event-act__facts {
    display: grid;
    gap: 0;
    margin: 1.8rem 0 2.1rem;
}

body.events-page .event-act__fact {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.3rem 1.2rem;
    padding: 0.72rem 0;
    border-top: 1px solid rgba(159, 168, 255, 0.18);
}

body.events-page .event-act__fact:last-child {
    border-bottom: 1px solid rgba(159, 168, 255, 0.18);
}

body.events-page .event-act__fact dt {
    color: #A0A8CC;
    font-size: 0.92rem;
}

body.events-page .event-act__fact dd {
    margin: 0;
    color: #EAEAFB;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
}

body.events-page .event-act__copy a,
body.events-page .split-masthead__dek a,
body.events-page .event-act__fact dd a {
    color: #EAEAFB;
    text-decoration: underline;
    text-decoration-color: rgba(159, 168, 255, 0.55);
    text-underline-offset: 3px;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

body.events-page .event-act__copy a:hover,
body.events-page .event-act__copy a:focus-visible,
body.events-page .split-masthead__dek a:hover,
body.events-page .split-masthead__dek a:focus-visible,
body.events-page .event-act__fact dd a:hover,
body.events-page .event-act__fact dd a:focus-visible {
    color: #9FA8FF;
    text-decoration-color: #9FA8FF;
}

body.events-page .event-act__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* Proof mosaic: three real photographs, static grid (no rail, no sway) */
body.events-page .event-nights {
    background: #131A4A;
    padding: 5.5rem 0;
    text-align: center;
}

body.events-page .event-nights .section-subtitle {
    max-width: 44rem;
    margin: 1.2rem auto 0;
}

body.events-page .event-nights__mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 3rem;
}

body.events-page .event-nights__photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(159, 168, 255, 0.18);
    border-radius: 14px;
    background: #1B2258;
}

body.events-page .event-nights__photo img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Closing bridge: one calm band that hands non-ready visitors to the
   free weekly trial instead of losing them */
body.events-page .events-bridge {
    background: #0A1030;
    padding: 5.5rem 0 6.5rem;
    text-align: center;
}

body.events-page .events-bridge .section-subtitle {
    max-width: 38rem;
    margin: 1.2rem auto 0;
}

body.events-page .events-bridge__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.2rem;
}

/* Brass hairline separators between the acts (same grammar as the
   homepage assurance hairlines) */
body.events-page .event-act,
body.events-page .event-nights,
body.events-page .events-bridge {
    position: relative;
}

body.events-page .event-act::before,
body.events-page .event-nights::before,
body.events-page .events-bridge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(72rem, calc(100% - 2.5rem));
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(159, 168, 255, 0.4), rgba(139, 92, 247, 0.3), transparent);
}

/* Responsive: acts stack, mosaic becomes hero-photo + two squares */
@media (max-width: 900px) {
    body.events-page .event-act__grid,
    body.events-page .event-act--milano .event-act__grid {
        grid-template-columns: 1fr;
    }

    body.events-page .event-act--milano .event-act__media {
        order: 0;
    }

    body.events-page .event-act__media {
        max-width: 30rem;
        margin: 0 auto;
    }

    body.events-page .event-act .section-title-modern {
        text-align: left;
    }

    /* Phones: kicker, date, and title lead each act; the poster follows,
       then the copy. Content children join the act grid so the heading
       trio can be ordered ahead of the image without duplicate markup. */
    body.events-page .event-act .event-act__content {
        display: contents;
    }

    body.events-page .event-act__grid,
    body.events-page .event-act--milano .event-act__grid {
        row-gap: 0;
    }

    body.events-page .event-act .event-act__kicker,
    body.events-page .event-act .event-act__date,
    body.events-page .event-act .section-title-modern {
        order: -1;
    }

    body.events-page .event-act .event-act__media {
        margin: 0.3rem auto 1.7rem;
    }
}

@media (max-width: 700px) {
    body.events-page .events-hero-stage {
        min-height: min(28rem, 68vh);
        padding: calc(var(--header-height) + 1.8rem) 1.25rem 2.2rem;
    }

    body.events-page .event-nights__mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.events-page .event-nights__photo--lead {
        grid-column: 1 / -1;
    }

    body.events-page .event-nights__photo--lead img {
        aspect-ratio: 16 / 9;
    }

    body.events-page .event-nights__photo:not(.event-nights__photo--lead) img {
        aspect-ratio: 1 / 1;
    }
}

/* Left-aligned act titles keep the dancing underline anchored left */
body.events-page .event-act .section-title-modern::after {
    margin-left: 0;
    margin-right: auto;
}

/* Season header: centered like the schedule/reviews titles */
body.events-page .event-nights .section-subtitle,
body.events-page .events-bridge .section-subtitle {
    text-align: center;
}

/* Section titles match the homepage serif recipe (style.css scopes it to
   body.home-page only, so events re-declares it) */
body.events-page .section-title-modern {
    color: var(--text-main);
    font-family: 'Cormorant Garamond', serif;
    font-style: normal;
    font-size: clamp(2.4rem, 4.6vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.95;
    text-shadow: none;
}

body.events-page .event-act .section-title-modern {
    font-size: clamp(2rem, 3.6vw, 2.9rem);
}

/* --------------------------------------------------------------------------
   25. BOOTCAMP DETAIL — "The Masterclass Bill": the Dominican Bachata
   Bootcamp page. The body carries BOTH classes (events-page bootcamp-page):
   events-page turns on all shared chrome, the §24 hero/act/bridge recipes,
   and the Compás hero scene; bootcamp-page scopes what is unique here —
   the stat band, the artist acts, the champagne register island (the
   preserved Stripe form), the level band, and the FAQ skin. Loaded by
   dominican-bootcamp.html and de/dominican-bootcamp.html only.
   -------------------------------------------------------------------------- */

/* Stat band: the flyer's numbers as a quiet Teko strip under the hero */
body.bootcamp-page .bootcamp-stats {
    position: relative;
    background: #0A1030;
    padding: 3.2rem 0 3rem;
}

body.bootcamp-page .bootcamp-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(72rem, calc(100% - 2.5rem));
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(159, 168, 255, 0.4), rgba(139, 92, 247, 0.3), transparent);
}

body.bootcamp-page .bootcamp-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
}

body.bootcamp-page .bootcamp-stats__number {
    display: block;
    color: #EAEAFB;
    font-family: 'Teko', sans-serif;
    font-size: clamp(2.4rem, 4.5vw, 3.4rem);
    font-weight: 500;
    line-height: 0.9;
}

body.bootcamp-page .bootcamp-stats__label {
    display: block;
    margin-top: 0.35rem;
    color: #A0A8CC;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Artist acts: the portrait demo video sits in a taped phone frame */
body.bootcamp-page .event-act__media--phone {
    max-width: 19rem;
    justify-self: center;
}

body.bootcamp-page .bootcamp-video {
    position: relative;
}

body.bootcamp-page .bootcamp-video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 10px;
    background: #060A22;
}

body.bootcamp-page .event-act__artist-role {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.24rem 0.7rem;
    border-radius: 999px;
    background: rgba(159, 168, 255, 0.14);
    border: 1px solid rgba(159, 168, 255, 0.4);
    color: #9FA8FF;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Lineup: the flyer, then a switch between the two instructor panels.
   Without JS both panels stay in normal flow (visible, stacked) — the
   nav buttons and dots are revealed only once enhanceEventsPage() adds
   .is-enhanced, matching this page's progressive-enhancement rule. */
body.bootcamp-page .bootcamp-lineup {
    position: relative;
    padding: 5.5rem 0;
    background: linear-gradient(180deg, #0A1030 0%, #131A4A 100%);
}

body.bootcamp-page .bootcamp-lineup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(72rem, calc(100% - 2.5rem));
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(159, 168, 255, 0.4), rgba(139, 92, 247, 0.3), transparent);
}

body.bootcamp-page .bootcamp-lineup__intro {
    max-width: 44rem;
    margin: 0 auto 3rem;
    text-align: center;
}

body.bootcamp-page .bootcamp-lineup__intro .section-subtitle {
    margin-top: 1.1rem;
}

/* Bootcamp hero: the flyer sits beside the title from 900px, mirroring the
   split-masthead first sections on the other pages; below that it stacks
   under the CTAs as a centered card. */
body.bootcamp-page .events-hero-stage__media {
    max-width: 17rem;
    margin: 2.4rem auto 0;
    padding: 0.6rem;
    background: #1B2258;
    border: 1px solid rgba(159, 168, 255, 0.24);
    border-radius: 16px;
}

body.bootcamp-page .events-hero-stage__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

@media (min-width: 900px) {
    body.bootcamp-page .events-hero-stage__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
        align-items: center;
        column-gap: 3.2rem;
        max-width: 70rem;
        text-align: left;
    }

    body.bootcamp-page .events-hero-stage__lede {
        margin-left: 0;
        margin-right: 0;
    }

    body.bootcamp-page .events-hero-stage__actions {
        justify-content: flex-start;
    }

    body.bootcamp-page .events-hero-stage__countdown-units {
        justify-content: flex-start;
    }

    /* width: 100% makes the figure fill its grid track, so max-width is what
       actually caps the flyer. Without it the figure shrink-wraps and the
       rendered size falls back to the img `sizes` value — CSS then has no say.
       The cap keeps the img just under the 400px `sizes` slot so DPR-2 screens
       stay on the 800w file (75KB) rather than 1200w (117KB) for this LCP
       image (sizes_truth_checker enforces the rendered/slot agreement). */
    body.bootcamp-page .events-hero-stage__media {
        width: 100%;
        max-width: 26.3rem;
        margin: 0 0 0 auto;
    }
}

body.bootcamp-page .bootcamp-lineup__switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

body.bootcamp-page .bootcamp-lineup__panels {
    flex: 1;
    min-width: 0;
}

body.bootcamp-page .bootcamp-lineup__panel {
    transition: opacity 0.35s ease;
}

body.bootcamp-page .bootcamp-lineup__panel[hidden] {
    display: none;
}

body.bootcamp-page .bootcamp-lineup__panel.is-fading {
    opacity: 0;
}

body.bootcamp-page .bootcamp-lineup__panel + .bootcamp-lineup__panel {
    margin-top: 0;
}

/* Sarah's panel mirrors the media to the right, matching the old
   alternating Act I / Act II rhythm */
body.bootcamp-page .bootcamp-lineup__panel[data-artist-panel="sarah"] .event-act__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

body.bootcamp-page .bootcamp-lineup__panel[data-artist-panel="sarah"] .event-act__media {
    order: 2;
}

body.bootcamp-page .bootcamp-lineup__panel:hover .event-act__media::before,
body.bootcamp-page .bootcamp-lineup__panel:hover .event-act__media::after {
    border-color: #8B5CF7;
}

body.bootcamp-page .bootcamp-lineup__nav {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(159, 168, 255, 0.4);
    background: rgba(16, 50, 43, 0.6);
    color: #EAEAFB;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

body.bootcamp-page .bootcamp-lineup__nav:hover,
body.bootcamp-page .bootcamp-lineup__nav:focus-visible {
    border-color: #8B5CF7;
    background: rgba(139, 92, 247, 0.14);
    color: #8B5CF7;
}

body.bootcamp-page .bootcamp-lineup.is-enhanced .bootcamp-lineup__nav {
    display: inline-flex;
}

body.bootcamp-page .bootcamp-lineup__dots {
    display: none;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2rem;
}

body.bootcamp-page .bootcamp-lineup.is-enhanced .bootcamp-lineup__dots {
    display: flex;
}

body.bootcamp-page .bootcamp-lineup__dot {
    padding: 0.45rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(159, 168, 255, 0.4);
    background: transparent;
    color: #A0A8CC;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

body.bootcamp-page .bootcamp-lineup__dot[aria-selected="true"] {
    background: #8B5CF7;
    border-color: #8B5CF7;
    color: #10143A;
}

body.bootcamp-page .bootcamp-lineup__dot:hover {
    border-color: #8B5CF7;
}

@media (prefers-reduced-motion: reduce) {
    body.bootcamp-page .bootcamp-lineup__panel {
        transition: none;
    }
}

/* Register island: the single light block on the petrol page. The form
   markup (ids, names, checkboxes, submit) is preserved verbatim from the
   old page; only the skin changes. */
body.bootcamp-page .bootcamp-register {
    position: relative;
    padding: 5.5rem 0;
    background: linear-gradient(180deg, #131A4A 0%, #0A1030 100%);
}

body.bootcamp-page .bootcamp-register::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(72rem, calc(100% - 2.5rem));
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(159, 168, 255, 0.4), rgba(139, 92, 247, 0.3), transparent);
}

body.bootcamp-page .bootcamp-register__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

body.bootcamp-page .bootcamp-register__brief .section-title-modern {
    text-align: left;
}

body.bootcamp-page .bootcamp-register__brief .section-title-modern::after {
    margin-left: 0;
    margin-right: auto;
}

body.bootcamp-page .bootcamp-register__copy {
    color: #A0A8CC;
    font-size: 1.02rem;
    line-height: 1.75;
    margin: 1.1rem 0 0;
}

/* The champagne card */
body.bootcamp-page .bootcamp-register__island {
    background: #E8E9F8;
    border: 1px solid rgba(16, 35, 31, 0.14);
    border-radius: 18px;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    box-shadow: var(--shadow-soft);
}

body.bootcamp-page .bootcamp-register__island h3 {
    margin: 0 0 1.4rem;
    color: #10143A;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
}

body.bootcamp-page .bootcamp-register__island .event-input-group {
    margin-bottom: 1rem;
}

body.bootcamp-page .bootcamp-register__island .event-input-label {
    display: block;
    margin-bottom: 0.35rem;
    color: #6E6F8E;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.bootcamp-page .bootcamp-register__island .event-input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: #FBFBFE;
    border: 1px solid #C2C7EE;
    border-radius: 10px;
    color: #12122E;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.bootcamp-page .bootcamp-register__island .event-input::placeholder {
    color: #8F94BC;
}

body.bootcamp-page .bootcamp-register__island .event-input:focus {
    outline: none;
    border-color: #8B5CF7;
    box-shadow: 0 0 0 2px rgba(139, 92, 247, 0.25);
}

/* Checkboxes: the global recipe is dark-theme; re-ink it for champagne */
body.bootcamp-page .bootcamp-register__island .checkmark {
    background-color: #FBFBFE;
    border: 1px solid #9AA0D6;
}

body.bootcamp-page .bootcamp-register__island .checkbox-container:hover input ~ .checkmark {
    background-color: #F7F0DF;
}

body.bootcamp-page .bootcamp-register__island .checkbox-container input:checked ~ .checkmark {
    background-color: #8B5CF7;
    border-color: #8B5CF7;
}

body.bootcamp-page .bootcamp-register__island .checkbox-text {
    color: #6E6F8E;
    font-size: 0.88rem;
}

body.bootcamp-page .bootcamp-register__island .checkbox-text a {
    color: #4B2F9E;
    text-decoration: underline;
}

body.bootcamp-page .bootcamp-register__island .checkbox-text a:hover,
body.bootcamp-page .bootcamp-register__island .checkbox-text a:focus-visible {
    color: #10143A;
}

/* The submit keeps its ids/classes; on the island it wears the ink-on-
   champagne recipe (a tier-3 outline would be light-on-light here) */
body.bootcamp-page .bootcamp-register__island .btn-hero-secondary {
    background: #10143A;
    border: 1px solid transparent;
    border-radius: var(--cta-radius);
    color: #EAEAFB;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

body.bootcamp-page .bootcamp-register__island .btn-hero-secondary:hover,
body.bootcamp-page .bootcamp-register__island .btn-hero-secondary:focus-visible {
    background: #1B3A33;
    border-color: transparent;
    color: #EAEAFB;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.55);
}

body.bootcamp-page .bootcamp-register__note {
    margin-top: 1rem;
    color: #6E6F8E;
    font-size: 0.8rem;
    text-align: center;
}

/* Level band: one honest line with two chips */
body.bootcamp-page .bootcamp-level {
    background: #0A1030;
    padding: 4rem 0;
    text-align: center;
}

body.bootcamp-page .bootcamp-level__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1.4rem;
}

body.bootcamp-page .bootcamp-level__chip {
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(159, 168, 255, 0.45);
    color: #F0F0FA;
    font-size: 0.9rem;
}

/* FAQ skin: solid petrol panels, brass hairline, coral + that rotates */
body.bootcamp-page .bootcamp-faq {
    max-width: 50rem;
    margin: 0 auto;
    padding: 5rem 1.25rem 5.5rem;
}

body.bootcamp-page .bootcamp-faq .section-title-modern {
    text-align: center;
    margin-bottom: 2.6rem;
}

body.bootcamp-page .bootcamp-faq__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

body.bootcamp-page .bootcamp-faq__item {
    background: #1B2258;
    border: 1px solid rgba(159, 168, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

body.bootcamp-page .bootcamp-faq__item[open],
body.bootcamp-page .bootcamp-faq__item:hover {
    border-color: rgba(139, 92, 247, 0.5);
}

body.bootcamp-page .bootcamp-faq__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    cursor: pointer;
    list-style: none;
    color: #EAEAFB;
    font-weight: 600;
    font-size: 1.05rem;
}

body.bootcamp-page .bootcamp-faq__summary::-webkit-details-marker {
    display: none;
}

body.bootcamp-page .bootcamp-faq__icon {
    color: #8B5CF7;
    font-size: 1.5rem;
    line-height: 1;
    display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
    body.bootcamp-page .bootcamp-faq__icon {
        transition: transform 0.3s ease;
    }
}

body.bootcamp-page .bootcamp-faq__item[open] .bootcamp-faq__icon {
    transform: rotate(45deg);
}

body.bootcamp-page .bootcamp-faq__body {
    padding: 0 1.5rem 1.5rem;
    color: #A0A8CC;
    line-height: 1.65;
}

body.bootcamp-page .bootcamp-faq__body a {
    color: #9FA8FF;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.bootcamp-page .bootcamp-faq__body a:hover,
body.bootcamp-page .bootcamp-faq__body a:focus-visible {
    color: #8B5CF7;
}

/* Responsive */
@media (max-width: 900px) {
    body.bootcamp-page .bootcamp-register__grid {
        grid-template-columns: 1fr;
    }

    body.bootcamp-page .bootcamp-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem 1rem;
    }
}

@media (max-width: 700px) {
    body.bootcamp-page .bootcamp-lineup__switcher {
        gap: 0.5rem;
    }

    body.bootcamp-page .bootcamp-lineup__nav {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* Form spacing that used to live in the old inline styles */
body.bootcamp-page .bootcamp-register__consent {
    margin-top: 1.2rem;
}

body.bootcamp-page .bootcamp-register__consent-second {
    margin-top: 0.5rem;
}

body.bootcamp-page .bootcamp-register__submit {
    width: 100%;
    justify-content: center;
    margin-top: 1.2rem;
}

/* --------------------------------------------------------------------------
   26. EVENTS PAGE — subheader rail: a compact bar pinned under the main
   nav that lists the two event acts so visitors can jump straight to the
   Dominican intensive or the international congress. Scoped to
   body.events-page; scroll-spy state is toggled by script.js via the
   events-subheader__item--active modifier.
   -------------------------------------------------------------------------- */

body.events-page .event-act {
    scroll-margin-top: calc(var(--header-height) + 3.5rem);
}

body.events-page .events-subheader {
    position: sticky;
    top: var(--header-height);
    z-index: 800;
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: rgba(6, 26, 23, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(159, 168, 255, 0.18);
}

body.events-page .events-subheader__item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    background: rgba(16, 50, 43, 0.6);
    border: 1px solid rgba(159, 168, 255, 0.2);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

body.events-page .events-subheader__item:hover,
body.events-page .events-subheader__item:focus-visible {
    border-color: rgba(139, 92, 247, 0.55);
    background: rgba(20, 64, 54, 0.8);
}

body.events-page .events-subheader__dates {
    color: #9FA8FF;
    font-family: 'Teko', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

body.events-page .events-subheader__name {
    color: #F0F0FA;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.events-page .events-subheader__item--active {
    border-color: #8B5CF7;
    background: rgba(139, 92, 247, 0.14);
}

body.events-page .events-subheader__item--active .events-subheader__dates {
    color: #8B5CF7;
}

@media (max-width: 899px) {
    body.events-page .events-subheader {
        top: var(--header-height-mobile);
    }

    body.events-page .event-act {
        scroll-margin-top: calc(var(--header-height-mobile) + 3.5rem);
    }
}

@media (max-width: 700px) {
    body.events-page .events-subheader {
        gap: 0.4rem;
        padding: 0.45rem 0.6rem;
    }

    body.events-page .events-subheader__item {
        padding: 0.35rem 0.6rem;
    }

    body.events-page .events-subheader__name {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   27. BLOG PAGE — editorial journal (body.blog-page)
   Split masthead with the featured story, a sticky filter shelf, and a
   magazine grid with a period-12 editorial rhythm. The rhythm only runs
   while the grid is unfiltered; JS adds .is-filtered and every card falls
   back to a uniform vertical tile so nth-child never breaks on a reduced
   set. Card numerals use a CSS counter, which skips display:none cards and
   therefore renumbers per filter for free.
   -------------------------------------------------------------------------- */

/* ---- Masthead ---- */
body.blog-page .blog-masthead {
    /* Clears the fixed header so the ghost word and the featured panel are
       never tucked underneath it on short viewports. */
    padding: calc(var(--header-height) + clamp(1.6rem, 3.5vw, 3.2rem)) 0 clamp(2rem, 4vw, 3rem);
}

body.blog-page .blog-masthead__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: center;
}

body.blog-page .blog-masthead__copy {
    position: relative;
}

body.blog-page .blog-masthead__ghost {
    position: absolute;
    top: -0.52em;
    left: -0.04em;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(6rem, 13vw, 10.5rem);
    line-height: 1;
    color: rgba(234, 234, 251, 0.05);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

body.blog-page .blog-masthead__kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

body.blog-page .blog-masthead__kicker::before {
    content: '';
    width: 2.4rem;
    height: 2px;
    border-radius: 999px;
    background: var(--accent-gold);
}

body.blog-page .blog-masthead__title {
    position: relative;
    margin: 0 0 1.2rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(3rem, 6.5vw, 5.2rem);
    font-weight: 700;
    line-height: 1.04;
    text-transform: none;
    color: var(--title-cream);
}

body.blog-page .blog-masthead__title .title-accent {
    font-style: italic;
    background: linear-gradient(100deg, var(--accent-start) 0%, var(--accent-end) 46%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-start);
}

/* Dancing underline, left-anchored (same recipe as .section-title-modern) */
body.blog-page .blog-masthead__title::after {
    content: '';
    display: block;
    width: 5.25rem;
    height: 2px;
    margin: 1.05rem 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold) 72%, var(--accent-start) 100%);
    transform: scaleX(var(--title-underline-scale, 1));
    transform-origin: left center;
}

body.blog-page .blog-masthead__dek {
    margin: 0 0 1.6rem;
    max-width: 34ch;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-muted);
}

/* Category ledger (rendered by JS from assets/data/blog-posts.json) */
body.blog-page .blog-masthead__ledger {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.blog-page .blog-masthead__ledger-btn {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.2rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.blog-page .blog-masthead__ledger-count {
    font-family: 'Teko', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    color: var(--accent-gold);
}

body.blog-page .blog-masthead__ledger-btn:hover,
body.blog-page .blog-masthead__ledger-btn:focus-visible {
    color: var(--text-main);
}

body.blog-page .blog-masthead__ledger-btn:focus-visible {
    outline: 1px solid var(--accent-gold);
    outline-offset: 3px;
}

/* ---- Featured story panel ---- */
body.blog-page .blog-masthead__feature {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

/* Floor-tape corner ticks: brass at rest, coral when the panel is engaged */
body.blog-page .blog-masthead__feature::before,
body.blog-page .blog-masthead__feature::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.blog-page .blog-masthead__feature::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.blog-page .blog-masthead__feature::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.blog-page .blog-masthead__feature:hover,
body.blog-page .blog-masthead__feature:focus-within {
    border-color: rgba(159, 168, 255, 0.45);
}

body.blog-page .blog-masthead__feature:hover::before,
body.blog-page .blog-masthead__feature:hover::after,
body.blog-page .blog-masthead__feature:focus-within::before,
body.blog-page .blog-masthead__feature:focus-within::after {
    border-color: var(--accent-start);
}

body.blog-page .blog-masthead__feature-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

body.blog-page .blog-masthead__feature-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

body.blog-page .blog-masthead__feature:hover .blog-masthead__feature-image,
body.blog-page .blog-masthead__feature:focus-within .blog-masthead__feature-image {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

body.blog-page .blog-masthead__feature-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 1.3rem 1.4rem 1.4rem;
}

body.blog-page .blog-masthead__feature-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

body.blog-page .blog-masthead__feature-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    line-height: 1.22;
    color: var(--title-cream);
}

body.blog-page .blog-masthead__feature-excerpt {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Tier 2 CTA: soft coral tint that fills with the sunset gradient on hover */
body.blog-page .blog-masthead__feature-link {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.3rem;
    background-color: var(--cta-soft-bg);
    background-image: none;
    border: 1px solid var(--cta-soft-border);
    border-radius: var(--cta-radius-sm);
    box-shadow: inset 0 -2px 0 var(--cta-base-soft);
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--cta-soft-text);
}

body.blog-page .blog-masthead__feature-link:hover {
    background-image: var(--cta-grad);
    border-color: transparent;
    box-shadow: inset 0 -2px 0 var(--cta-base-hover);
    color: var(--cta-ink);
}

body.blog-page .blog-masthead__feature-link:focus-visible {
    outline: 1px solid var(--accent-gold);
    outline-offset: 3px;
}

/* ---- Sticky filter shelf ---- */
body.blog-page .blog-filter-shelf {
    position: sticky;
    top: var(--header-height);
    z-index: 800;
    padding: 0.65rem 0;
    background: rgba(6, 26, 23, 0.92);
    border-bottom: 1px solid rgba(159, 168, 255, 0.16);
}

body.blog-page .blog-filter-shelf.is-stuck {
    background: rgba(4, 19, 16, 0.96);
    border-bottom-color: rgba(159, 168, 255, 0.32);
}

body.blog-page .blog-filters {
    margin-bottom: 0;
    gap: 0.55rem;
}

body.blog-page .filter-btn {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.5rem 1.05rem;
    background: transparent;
    border: 1px solid rgba(159, 168, 255, 0.3);
    border-radius: var(--cta-radius-sm);
    box-shadow: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.blog-page .filter-btn:hover {
    background: rgba(159, 168, 255, 0.1);
    border-color: var(--accent-gold);
    color: var(--text-main);
    box-shadow: none;
}

body.blog-page .filter-btn.active {
    background: var(--cta-soft-bg);
    border-color: var(--cta-soft-border);
    color: var(--title-cream);
    box-shadow: inset 0 -2px 0 var(--cta-base-soft);
}

body.blog-page .filter-btn:focus-visible {
    outline: 1px solid var(--accent-gold);
    outline-offset: 3px;
}

body.blog-page .filter-btn__count {
    font-family: 'Teko', sans-serif;
    font-size: 1.05em;
    font-weight: 500;
    line-height: 1;
    color: var(--accent-gold);
}

/* ---- Grid section shell ---- */
body.blog-page .blog-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(2.2rem, 4vw, 3.2rem) 20px 4rem;
}

body.blog-page .blog-grid-heading {
    margin: 0 0 clamp(1.8rem, 3vw, 2.6rem);
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-size: clamp(2.2rem, 4.2vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.05;
    text-align: left;
    text-shadow: none;
    color: var(--title-cream);
}

/* ---- Magazine grid ---- */
body.blog-page .blog-grid-modern {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 1.8rem 1.4rem;
    max-width: none;
    padding: 0;
    counter-reset: post;
}

body.blog-page .modern-card {
    grid-column: span 4;
    counter-increment: post;
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Floor-tape corner ticks */
body.blog-page .modern-card::before,
body.blog-page .modern-card::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.blog-page .modern-card::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.4);
    border-left: 2px solid rgba(159, 168, 255, 0.4);
}

body.blog-page .modern-card::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.4);
    border-bottom: 2px solid rgba(159, 168, 255, 0.4);
}

/* Hover is a color event, never a movement: no lift, no image zoom */
body.blog-page .modern-card:hover {
    transform: none;
    background: var(--glass-bg);
    border-color: rgba(159, 168, 255, 0.45);
    box-shadow: var(--shadow-soft);
}

body.blog-page .modern-card:hover::before,
body.blog-page .modern-card:hover::after,
body.blog-page .modern-card:focus-within::before,
body.blog-page .modern-card:focus-within::after {
    border-color: var(--accent-start);
}

body.blog-page .modern-card:hover .card-image {
    transform: none;
}

body.blog-page .card-image {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

body.blog-page .modern-card:hover .card-image,
body.blog-page .modern-card:focus-within .card-image {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

/* Editorial index numeral; CSS counters skip hidden cards, so the numbers
   re-run 01, 02, ... inside every filtered view. */
body.blog-page .card-image-wrap::after {
    content: counter(post, decimal-leading-zero);
    position: absolute;
    right: 0.7rem;
    bottom: 0.15rem;
    font-family: 'Teko', sans-serif;
    font-size: clamp(2.4rem, 3.2vw, 3.1rem);
    font-weight: 500;
    line-height: 1;
    color: rgba(234, 234, 251, 0.55);
    text-shadow: 0 2px 12px rgba(4, 19, 16, 0.65);
    pointer-events: none;
}

body.blog-page .card-category {
    background: rgba(6, 26, 23, 0.78);
    backdrop-filter: none;
    border: 1px solid rgba(159, 168, 255, 0.35);
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.12em;
    color: var(--accent-gold);
}

body.blog-page .card-date {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.blog-page .card-title {
    color: var(--title-cream);
}

body.blog-page .card-desc {
    color: var(--text-muted);
}

body.blog-page .card-link {
    gap: 0.5rem;
    color: var(--accent-gold);
    text-decoration: underline;
    text-decoration-color: rgba(159, 168, 255, 0.4);
    text-underline-offset: 3px;
}

body.blog-page .card-link:hover,
body.blog-page .card-link:focus-visible {
    gap: 0.5rem;
    color: var(--accent-start);
    text-decoration-color: var(--accent-start);
}

body.blog-page .card-link:focus-visible {
    outline: 1px solid var(--accent-gold);
    outline-offset: 3px;
}

/* ---- Editorial rhythm (period 12, unfiltered view only) ----
   Row plan per cycle: [spotlight-left 8 + two compacts 4] then three
   standard tiles, then the mirror [two compacts 4 + spotlight-right 8]
   and three standard tiles again. 24 cards = exactly two cycles. */

/* Spotlights: wide horizontal editors' picks */
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+1) {
    grid-column: 1 / span 8;
    grid-row: span 2;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+7) {
    grid-column: 5 / span 8;
    grid-row: span 2;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+1),
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+7) {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+1) .card-image-wrap,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+7) .card-image-wrap {
    height: 100%;
    min-height: 320px;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+1) .card-body,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+7) .card-body {
    justify-content: center;
    padding: 1.8rem 1.9rem;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+1) .card-title,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+7) .card-title {
    font-size: clamp(1.45rem, 2vw, 1.85rem);
}

/* Mirrored spotlight: image on the right */
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+7) .card-image-wrap {
    grid-column: 2;
    grid-row: 1;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+7) .card-body {
    grid-column: 1;
    grid-row: 1;
}

/* Compact stack next to each spotlight: thumb-and-title rows */
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+2),
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+3) {
    grid-column: 9 / span 4;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+8),
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+9) {
    grid-column: 1 / span 4;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+2),
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+3),
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+8),
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+9) {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: stretch;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+2) .card-image-wrap,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+3) .card-image-wrap,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+8) .card-image-wrap,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+9) .card-image-wrap {
    height: 100%;
    min-height: 128px;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+2) .card-body,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+3) .card-body,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+8) .card-body,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+9) .card-body {
    justify-content: center;
    padding: 0.95rem 1.1rem;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+2) .card-desc,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+3) .card-desc,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+8) .card-desc,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+2) .card-category,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+3) .card-category,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+8) .card-category,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+9) .card-desc,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+9) .card-category {
    display: none;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+2) .card-title,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+3) .card-title,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+8) .card-title,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+9) .card-title {
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+2) .card-image-wrap::after,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+3) .card-image-wrap::after,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+8) .card-image-wrap::after,
body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+9) .card-image-wrap::after {
    font-size: 1.6rem;
    right: 0.45rem;
    bottom: 0.1rem;
}

/* Filtered view: the uniform fallback grid (JS toggles .is-filtered) */
body.blog-page .blog-grid-modern.is-filtered .modern-card {
    grid-column: span 4;
    grid-row: auto;
}

/* ---- Motion (color and filter transitions only, gated) ---- */
@media (prefers-reduced-motion: no-preference) {
    body.blog-page .modern-card,
    body.blog-page .blog-masthead__feature {
        transition: border-color 0.3s ease;
    }

    body.blog-page .modern-card::before,
    body.blog-page .modern-card::after,
    body.blog-page .blog-masthead__feature::before,
    body.blog-page .blog-masthead__feature::after {
        transition: border-color 0.3s ease;
    }

    body.blog-page .card-image,
    body.blog-page .blog-masthead__feature-image {
        transition: filter 0.45s ease;
    }

    body.blog-page .card-link {
        transition: color 0.25s ease, text-decoration-color 0.25s ease;
    }

    body.blog-page .filter-btn {
        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }

    body.blog-page .blog-masthead__feature-link {
        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }

    body.blog-page .blog-masthead__ledger-btn {
        transition: color 0.25s ease;
    }

    body.blog-page .blog-filter-shelf {
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
    body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+1),
    body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+7) {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+2),
    body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+3),
    body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+8),
    body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+9) {
        grid-column: span 6;
    }

    body.blog-page .modern-card {
        grid-column: span 6;
    }

    body.blog-page .blog-grid-modern.is-filtered .modern-card {
        grid-column: span 6;
    }

    body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+1) .card-image-wrap,
    body.blog-page .blog-grid-modern:not(.is-filtered) .modern-card:nth-child(12n+7) .card-image-wrap {
        min-height: 260px;
    }
}

@media (max-width: 900px) {
    body.blog-page .blog-masthead {
        padding-top: calc(var(--header-height-mobile) + clamp(1.6rem, 3.5vw, 3.2rem));
    }

    body.blog-page .blog-masthead__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    body.blog-page .blog-masthead__ghost {
        display: none;
    }
}

@media (max-width: 700px) {
    /* Featured story: a touch smaller on phones — still the lead item,
       just less viewport-hungry than the desktop panel. */
    body.blog-page .blog-masthead__feature-media {
        aspect-ratio: 16 / 10;
    }

    body.blog-page .blog-masthead__feature-body {
        gap: 0.45rem;
        padding: 1rem 1.1rem 1.1rem;
    }

    body.blog-page .blog-masthead__feature-title {
        font-size: 1.18rem;
    }

    body.blog-page .blog-masthead__feature-excerpt {
        font-size: 0.88rem;
        line-height: 1.5;
    }

    body.blog-page .blog-masthead__feature-link {
        padding: 0.55rem 1.1rem;
        font-size: 0.84rem;
    }

    body.blog-page .blog-filter-shelf {
        top: var(--header-height-mobile);
    }

    body.blog-page .blog-filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.2rem;
    }

    body.blog-page .filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    body.blog-page .blog-grid-modern {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    /* Every post is a compact thumb-and-title row on phones, so the
       archive scrolls fast. The !important flags flatten the desktop
       nth-child spotlight/compact placements, which otherwise outrank
       any mobile selector. */
    body.blog-page .modern-card {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr) !important;
        align-items: stretch;
    }

    body.blog-page .modern-card .card-image-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
        height: 100% !important;
        min-height: 112px !important;
    }

    body.blog-page .modern-card .card-body {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-content: center;
        padding: 0.8rem 0.95rem !important;
    }

    body.blog-page .modern-card .card-desc,
    body.blog-page .modern-card .card-category {
        display: none !important;
    }

    body.blog-page .modern-card .card-title {
        font-size: 1rem !important;
        line-height: 1.3;
        margin-bottom: 0.35rem;
    }

    body.blog-page .modern-card .card-date {
        font-size: 0.68rem;
        margin-bottom: 0.3rem;
    }

    body.blog-page .modern-card .card-link {
        font-size: 0.8rem;
    }

    body.blog-page .card-image-wrap::after {
        font-size: 1.5rem !important;
        right: 0.45rem !important;
        bottom: 0.1rem !important;
    }
}

/* --------------------------------------------------------------------------
   28. BEGINNER GUIDE — field manual (body.guide-page)
   "Lesson One": a split editorial masthead, a sticky count-in rail that
   tracks four numbered chapters, and one layout personality per chapter
   (duo cards, ranked shoe podium, mirrored roles panel, studio-rules
   checklist) closing on a conversion offramp. All motion is entrance
   choreography and color events; no particles, no glow, no drawn lines.
   -------------------------------------------------------------------------- */

/* ---- Masthead ---- */
body.guide-page .guide-masthead {
    padding: clamp(1.6rem, 3.5vw, 3.2rem) 0 clamp(2rem, 4vw, 3rem);
}

body.guide-page .guide-masthead__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: center;
}

body.guide-page .guide-masthead__copy {
    position: relative;
}

body.guide-page .guide-masthead__ghost {
    position: absolute;
    top: -0.5em;
    left: -0.04em;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(5.5rem, 12vw, 9.5rem);
    line-height: 1;
    color: rgba(234, 234, 251, 0.05);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

body.guide-page .guide-masthead__kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

body.guide-page .guide-masthead__kicker::before {
    content: '';
    width: 2.4rem;
    height: 2px;
    border-radius: 999px;
    background: var(--accent-gold);
}

body.guide-page .guide-masthead__title {
    position: relative;
    margin: 0 0 1.2rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.9rem, 6vw, 4.9rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: none;
    color: var(--title-cream);
}

body.guide-page .guide-masthead__title .title-accent {
    font-style: italic;
    background: linear-gradient(100deg, var(--accent-start) 0%, var(--accent-end) 46%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-start);
}

body.guide-page .guide-masthead__title::after {
    content: '';
    display: block;
    width: 5.25rem;
    height: 2px;
    margin: 1.05rem 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold) 72%, var(--accent-start) 100%);
    transform: scaleX(var(--title-underline-scale, 1));
    transform-origin: left center;
}

body.guide-page .guide-masthead__dek {
    margin: 0 0 1.4rem;
    max-width: 38ch;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-muted);
}

body.guide-page .guide-masthead__assurance {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--title-cream);
}

body.guide-page .guide-masthead__assurance li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

body.guide-page .guide-masthead__assurance li + li::before {
    content: '\00B7';
    color: var(--accent-gold);
    font-size: 1.2em;
    line-height: 1;
}

body.guide-page .guide-masthead__figure {
    margin: 0;
}

body.guide-page .guide-masthead__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
}

body.guide-page .guide-masthead__media::before,
body.guide-page .guide-masthead__media::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.guide-page .guide-masthead__media::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.guide-page .guide-masthead__media::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.guide-page .guide-masthead__media:hover::before,
body.guide-page .guide-masthead__media:hover::after {
    border-color: var(--accent-start);
}

body.guide-page .guide-masthead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

body.guide-page .guide-masthead__media:hover img {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

/* ---- Shell: count-in rail + chapters ---- */
body.guide-page .guide-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(1.8rem, 3.5vw, 3.4rem);
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(1.6rem, 3vw, 2.6rem) 20px 4rem;
}

body.guide-page .guide-rail {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

body.guide-page .guide-rail__link {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.55rem 0.9rem;
    border-left: 2px solid rgba(159, 168, 255, 0.25);
    text-decoration: none;
}

body.guide-page .guide-rail__num {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    color: var(--accent-gold);
}

body.guide-page .guide-rail__label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.guide-page .guide-rail__link:hover {
    border-left-color: var(--accent-gold);
}

body.guide-page .guide-rail__link:hover .guide-rail__label {
    color: var(--text-main);
}

body.guide-page .guide-rail__link.is-active {
    border-left-color: var(--accent-start);
    background: rgba(139, 92, 247, 0.08);
}

body.guide-page .guide-rail__link.is-active .guide-rail__num {
    color: var(--accent-start);
}

body.guide-page .guide-rail__link.is-active .guide-rail__label {
    color: var(--title-cream);
}

body.guide-page .guide-rail__link:focus-visible {
    outline: 1px solid var(--accent-gold);
    outline-offset: 3px;
}

/* ---- Chapters ---- */
body.guide-page .guide-chapter {
    margin-bottom: clamp(3.5rem, 7vw, 6rem);
    scroll-margin-top: calc(var(--header-height) + 40px);
}

body.guide-page .guide-chapter__header {
    margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
}

body.guide-page .guide-chapter__num {
    display: block;
    font-family: 'Teko', sans-serif;
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1;
    color: var(--accent-gold);
}

body.guide-page .guide-chapter__title {
    position: relative;
    margin: 0.2rem 0 0.9rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: none;
    color: var(--title-cream);
}

body.guide-page .guide-chapter__title::after {
    content: '';
    display: block;
    width: 5.25rem;
    height: 2px;
    margin: 0.85rem 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold) 72%, var(--accent-start) 100%);
    transform: scaleX(var(--title-underline-scale, 1));
    transform-origin: left center;
}

body.guide-page .guide-chapter__lede {
    margin: 0;
    max-width: 62ch;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-muted);
}

body.guide-page .guide-chapter--roles .guide-chapter__lede {
    max-width: none;
    white-space: nowrap;
}

body.guide-page .guide-chapter__lede a {
    color: var(--accent-gold);
    text-decoration: underline;
    text-decoration-color: rgba(159, 168, 255, 0.4);
    text-underline-offset: 3px;
}

body.guide-page .guide-chapter__lede a:hover {
    color: var(--accent-start);
    text-decoration-color: var(--accent-start);
}

/* ---- Chapter 01: duo cards ---- */
body.guide-page .guide-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
}

body.guide-page .guide-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.6rem 1.7rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

body.guide-page .guide-card::before,
body.guide-page .guide-card::after,
body.guide-page .guide-step::before,
body.guide-page .guide-step::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.guide-page .guide-card::before,
body.guide-page .guide-step::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.4);
    border-left: 2px solid rgba(159, 168, 255, 0.4);
}

body.guide-page .guide-card::after,
body.guide-page .guide-step::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.4);
    border-bottom: 2px solid rgba(159, 168, 255, 0.4);
}

body.guide-page .guide-card:hover {
    border-color: rgba(159, 168, 255, 0.45);
}

body.guide-page .guide-card:hover::before,
body.guide-page .guide-card:hover::after {
    border-color: var(--accent-start);
}

body.guide-page .guide-card__title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    color: var(--title-cream);
}

body.guide-page .guide-card__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}

body.guide-page .guide-card__text strong {
    color: var(--title-cream);
    font-weight: 600;
}

body.guide-page .guide-card__link {
    margin-top: 0.3rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-gold);
    text-decoration: underline;
    text-decoration-color: rgba(159, 168, 255, 0.4);
    text-underline-offset: 3px;
}

body.guide-page .guide-card__link:hover,
body.guide-page .guide-card__link:focus-visible {
    color: var(--accent-start);
    text-decoration-color: var(--accent-start);
}

body.guide-page .guide-card__link:focus-visible {
    outline: 1px solid var(--accent-gold);
    outline-offset: 3px;
}

/* ---- Chapter 02: shoe podium (ranked, not clones) ---- */
body.guide-page .guide-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
    align-items: end;
}

body.guide-page .guide-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 1.4rem 1.5rem 1.6rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

body.guide-page .guide-step--no {
    min-height: 220px;
    background: var(--bg-secondary);
    border-color: rgba(157, 180, 171, 0.3);
}

body.guide-page .guide-step--no::before,
body.guide-page .guide-step--no::after {
    border-color: rgba(157, 180, 171, 0.4);
}

body.guide-page .guide-step--yes {
    min-height: 260px;
    border-color: rgba(159, 168, 255, 0.4);
}

body.guide-page .guide-step--pro {
    min-height: 300px;
    border-color: rgba(139, 92, 247, 0.45);
}

body.guide-page .guide-step--pro::before,
body.guide-page .guide-step--pro::after {
    border-color: var(--accent-start);
}

body.guide-page .guide-step__status {
    display: inline-flex;
    padding: 0.25rem 0.6rem;
    background: rgba(6, 26, 23, 0.78);
    border: 1px solid rgba(157, 180, 171, 0.45);
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.guide-page .guide-step--yes .guide-step__status {
    border-color: rgba(159, 168, 255, 0.45);
    color: var(--accent-gold);
}

body.guide-page .guide-step--pro .guide-step__status {
    border-color: rgba(139, 92, 247, 0.5);
    color: var(--accent-start);
}

body.guide-page .guide-step__title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--title-cream);
}

body.guide-page .guide-step--no .guide-step__title {
    color: var(--text-muted);
}

body.guide-page .guide-step__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
}

body.guide-page .guide-step__text strong {
    color: var(--title-cream);
    font-weight: 600;
}

body.guide-page .guide-step__rank {
    position: absolute;
    right: 0.75rem;
    bottom: 0.3rem;
    font-family: 'Teko', sans-serif;
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1;
    color: rgba(234, 234, 251, 0.35);
    pointer-events: none;
}

/* ---- Chapter 03: roles mirror ---- */
body.guide-page .guide-mirror {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

body.guide-page .guide-mirror::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(159, 168, 255, 0.5), transparent);
    pointer-events: none;
}

body.guide-page .guide-mirror__half {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1.8rem 1.9rem;
}

body.guide-page .guide-mirror__half:hover {
    background: rgba(139, 92, 247, 0.05);
}

body.guide-page .guide-mirror__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(159, 168, 255, 0.45);
    border-radius: 8px;
    color: var(--accent-gold);
}

body.guide-page .guide-mirror__half:hover .guide-mirror__icon {
    border-color: var(--accent-start);
    color: var(--accent-start);
}

body.guide-page .guide-mirror__role {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--title-cream);
}

body.guide-page .guide-mirror__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---- Chapter 04: studio rules checklist ---- */
body.guide-page .guide-rules {
    position: relative;
    padding: 1.7rem 1.9rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

body.guide-page .guide-rules::before,
body.guide-page .guide-rules::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
}

body.guide-page .guide-rules::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.4);
    border-left: 2px solid rgba(159, 168, 255, 0.4);
}

body.guide-page .guide-rules::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.4);
    border-bottom: 2px solid rgba(159, 168, 255, 0.4);
}

body.guide-page .guide-rules__lede {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
}

body.guide-page .guide-rules__list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.guide-page .guide-rules__list li {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-main);
}

body.guide-page .guide-rules__list li::before {
    content: '\2713';
    flex: 0 0 auto;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--accent-gold);
}

body.guide-page li.guide-rules__rule--key::before {
    color: var(--accent-start);
}

body.guide-page .guide-rules__rule--key strong {
    color: var(--title-cream);
    font-weight: 600;
}

/* ---- Offramp ---- */
body.guide-page .guide-offramp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.6rem;
    padding: 1.4rem 1.8rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(159, 168, 255, 0.18);
    border-radius: 16px;
}

body.guide-page .guide-offramp__copy {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-main);
}

body.guide-page .guide-offramp__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.7rem;
    background-image: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    border: none;
    border-radius: var(--cta-radius);
    box-shadow: inset 0 -2px 0 var(--cta-base-rest);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: var(--cta-ink);
}

body.guide-page .guide-offramp__cta:hover {
    background-position: 100% 50%;
    box-shadow: inset 0 -2px 0 var(--cta-base-hover);
    color: var(--cta-ink);
}

body.guide-page .guide-offramp__cta:focus-visible {
    outline: 1px solid var(--accent-gold);
    outline-offset: 3px;
}

body.guide-page .guide-offramp__link {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-gold);
    text-decoration: underline;
    text-decoration-color: rgba(159, 168, 255, 0.4);
    text-underline-offset: 3px;
}

body.guide-page .guide-offramp__link:hover,
body.guide-page .guide-offramp__link:focus-visible {
    color: var(--accent-start);
    text-decoration-color: var(--accent-start);
}

body.guide-page .guide-offramp__link:focus-visible {
    outline: 1px solid var(--accent-gold);
    outline-offset: 3px;
}

/* ---- Motion (color and filter events only, gated) ---- */
@media (prefers-reduced-motion: no-preference) {
    body.guide-page .guide-rail__link,
    body.guide-page .guide-rail__num,
    body.guide-page .guide-rail__label {
        transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    }

    body.guide-page .guide-card,
    body.guide-page .guide-step,
    body.guide-page .guide-rules {
        transition: border-color 0.3s ease;
    }

    body.guide-page .guide-card::before,
    body.guide-page .guide-card::after,
    body.guide-page .guide-step::before,
    body.guide-page .guide-step::after,
    body.guide-page .guide-masthead__media::before,
    body.guide-page .guide-masthead__media::after {
        transition: border-color 0.3s ease;
    }

    body.guide-page .guide-masthead__media img {
        transition: filter 0.45s ease;
    }

    body.guide-page .guide-mirror__half {
        transition: background-color 0.3s ease;
    }

    body.guide-page .guide-mirror__icon {
        transition: border-color 0.3s ease, color 0.3s ease;
    }

    body.guide-page .guide-card__link,
    body.guide-page .guide-offramp__link,
    body.guide-page .guide-chapter__lede a {
        transition: color 0.25s ease, text-decoration-color 0.25s ease;
    }

    body.guide-page .guide-offramp__cta {
        transition: background-position 0.3s ease, box-shadow 0.25s ease;
    }
}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
    body.guide-page .guide-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
    }

    /* Rail becomes a sticky horizontal chapter shelf (blog shelf grammar) */
    body.guide-page .guide-rail {
        position: sticky;
        top: var(--header-height);
        z-index: 800;
        flex-direction: row;
        gap: 0.3rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -20px;
        padding: 0.55rem 20px;
        background: rgba(6, 26, 23, 0.92);
        border-bottom: 1px solid rgba(159, 168, 255, 0.16);
    }

    body.guide-page .guide-rail.is-stuck {
        background: rgba(4, 19, 16, 0.96);
        border-bottom-color: rgba(159, 168, 255, 0.32);
    }

    body.guide-page .guide-rail__link {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.4rem 0.8rem;
        border-left: none;
        border-bottom: 2px solid rgba(159, 168, 255, 0.25);
    }

    body.guide-page .guide-rail__link:hover {
        border-bottom-color: var(--accent-gold);
    }

    body.guide-page .guide-rail__link.is-active {
        border-bottom-color: var(--accent-start);
    }
}

@media (max-width: 900px) {
    body.guide-page .guide-masthead__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    body.guide-page .guide-masthead__ghost {
        display: none;
    }

    body.guide-page .guide-podium {
        align-items: stretch;
    }

    body.guide-page .guide-step--no,
    body.guide-page .guide-step--yes,
    body.guide-page .guide-step--pro {
        min-height: 0;
    }

    body.guide-page .guide-chapter--roles .guide-chapter__lede {
        white-space: normal;
    }
}

@media (max-width: 700px) {
    body.guide-page .guide-rail {
        top: var(--header-height-mobile);
    }

    body.guide-page .guide-masthead__media {
        aspect-ratio: 16 / 10;
    }

    body.guide-page .guide-duo,
    body.guide-page .guide-podium {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    body.guide-page .guide-mirror {
        grid-template-columns: 1fr;
    }

    body.guide-page .guide-mirror::before {
        display: none;
    }

    body.guide-page .guide-mirror__half + .guide-mirror__half {
        border-top: 1px solid rgba(159, 168, 255, 0.25);
    }

    body.guide-page .guide-chapter__num {
        font-size: 2rem;
    }

    body.guide-page .guide-offramp {
        flex-direction: column;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   COURSE PAGES (body.course-page) — "The Course Dossier"
   Exemplar: bachata-sensual-foundation.html. The other single-course pages
   (beginner 1/2, improver, inter-adv, lady-styling) replicate the markup
   with copy swaps and reuse this block unchanged. body carries
   "tropic course-page": the tropic class turns on the shared chrome
   (tokens, header/footer, grain, title motif); everything below is the
   page-specific design. See System/site-revamp-plan.md section 1.
   -------------------------------------------------------------------------- */

/* ---- Section rhythm: alternating petrol bands ---- */
body.course-page .course-masthead {
    /* Clears the fixed header so the kicker is never hidden behind it. */
    padding: calc(var(--header-height) + clamp(1.4rem, 3vw, 2.6rem)) 0 clamp(2.2rem, 4vw, 3.4rem);
    background: var(--bg-main);
}

body.course-page .course-syllabus,
body.course-page .course-night,
body.course-page .course-faq {
    padding: clamp(2.6rem, 5vw, 4.6rem) 0;
    background: var(--bg-secondary);
}

body.course-page .course-fork,
body.course-page .course-path {
    padding: clamp(2.6rem, 5vw, 4.6rem) 0;
    background: var(--bg-main);
}

body.course-page .course-teachers {
    padding: clamp(2.6rem, 5vw, 4.6rem) 0;
    background: var(--bg-main);
}

body.course-page .course-register {
    padding: clamp(2.6rem, 5vw, 4.6rem) 0;
    background: var(--bg-main);
}

/* ---- Shared title recipe (serif, centered, dancing underline via chrome) ---- */
body.course-page .section-title-modern {
    margin: 0 auto 1rem;
    max-width: 24ch;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.12;
    text-align: center;
    text-transform: none;
    color: var(--title-cream);
}

body.course-page .section-subtitle {
    margin: 0 auto 2rem;
    max-width: 52ch;
    text-align: center;
    font-size: clamp(0.98rem, 1.3vw, 1.08rem);
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---- Masthead: the call sheet ---- */
body.course-page .course-masthead__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: center;
}

body.course-page .course-masthead__kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

body.course-page .course-masthead__kicker::before {
    content: '';
    width: 2.4rem;
    height: 2px;
    border-radius: 999px;
    background: var(--accent-gold);
}

body.course-page .course-masthead__title {
    margin: 0 0 1.1rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 5.4vw, 4.2rem);
    font-weight: 700;
    line-height: 1.06;
    text-transform: none;
    color: var(--title-cream);
}

body.course-page .course-masthead__title .title-accent {
    font-style: italic;
    background: linear-gradient(100deg, var(--accent-start) 0%, var(--accent-end) 46%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-start);
}

body.course-page .course-masthead__title::after {
    content: '';
    display: block;
    width: 5.25rem;
    height: 2px;
    margin: 1.05rem 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold) 72%, var(--accent-start) 100%);
}

body.course-page .course-masthead__dek {
    margin: 0 0 1.6rem;
    max-width: 46ch;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.65;
    color: var(--text-muted);
}

body.course-page .course-masthead__dek a {
    color: var(--accent-start);
    text-decoration: none;
}

body.course-page .course-masthead__dek a:hover,
body.course-page .course-masthead__dek a:focus-visible {
    color: #9B7CF8;
    text-decoration: underline;
}

/* The call sheet: a two-column brass ledger */
body.course-page .course-callsheet {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.6rem;
    margin: 0 0 1.8rem;
    padding: 1.2rem 1.4rem;
    background: rgba(4, 19, 16, 0.55);
    border: 1px solid rgba(159, 168, 255, 0.22);
    border-radius: 16px;
}

body.course-page .course-callsheet__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

body.course-page .course-callsheet__item dt {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

body.course-page .course-callsheet__item dd {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.45;
    color: var(--text-main);
}

body.course-page .course-masthead__note {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* ---- CTA pair (tier-1 gradient / tier-2 soft) ---- */
body.course-page .course-masthead__actions,
body.course-page .course-register__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

body.course-page .course-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    border-radius: var(--cta-radius);
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--cta-ink);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-position 0.35s ease, box-shadow 0.3s ease;
}

body.course-page .course-cta-primary:hover,
body.course-page .course-cta-primary:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 10px 26px rgba(139, 92, 247, 0.22);
    color: var(--cta-ink);
}

body.course-page .course-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    border-radius: var(--cta-radius);
    background: var(--cta-soft-bg);
    border: 1px solid var(--cta-soft-border);
    color: var(--cta-soft-text);
    font-family: 'Outfit', sans-serif;
    font-size: 0.96rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body.course-page .course-cta-secondary:hover,
body.course-page .course-cta-secondary:focus-visible {
    background: rgba(125, 140, 255, 0.22);
    border-color: rgba(164, 139, 251, 0.75);
    color: #FFF4E8;
}

/* ---- Masthead figure: warm grade in a taped frame ---- */
body.course-page .course-masthead__figure {
    margin: 0;
}

body.course-page .course-masthead__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
}

body.course-page .course-masthead__media::before,
body.course-page .course-masthead__media::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.course-page .course-masthead__media::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.course-page .course-masthead__media::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.course-page .course-masthead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

@media (prefers-reduced-motion: no-preference) {
    body.course-page .course-masthead__media img {
        transition: filter 0.5s ease;
    }
}

body.course-page .course-masthead__figure:hover .course-masthead__media img,
body.course-page .course-masthead__figure:focus-within .course-masthead__media img {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

body.course-page .course-masthead__media:hover::before,
body.course-page .course-masthead__media:hover::after {
    border-color: var(--accent-start);
}

body.course-page .course-masthead__caption {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: right;
}

/* ---- Syllabus grid ---- */
/* Syllabus ledger: a compact index of techniques - hairline rows, no cards
   (owner feedback 2026-07-17: the boxed grid read too heavy). */
body.course-page .course-syllabus__grid {
    margin: 0 auto 1.8rem;
    padding: 0;
    max-width: 50rem;
    list-style: none;
}

body.course-page .course-syllabus__item {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: baseline;
    padding: 0.85rem 0.35rem;
    border-top: 1px solid rgba(159, 168, 255, 0.16);
    transition: background-color 0.3s ease;
}

body.course-page .course-syllabus__item:last-child {
    border-bottom: 1px solid rgba(159, 168, 255, 0.16);
}

body.course-page .course-syllabus__item:hover {
    background: rgba(159, 168, 255, 0.05);
}

body.course-page .course-syllabus__num {
    font-family: 'Teko', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--accent-gold);
}

body.course-page .course-syllabus__name {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--title-cream);
}

body.course-page .course-syllabus__desc {
    margin: 0.15rem 0 0;
    grid-column: 2;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-muted);
}

@media (min-width: 720px) {
    body.course-page .course-syllabus__item {
        grid-template-columns: 2.4rem minmax(11rem, 15rem) minmax(0, 1fr);
    }

    body.course-page .course-syllabus__desc {
        grid-column: 3;
        margin-top: 0;
    }
}

body.course-page .course-syllabus__rotation {
    margin: 0 auto;
    max-width: 52ch;
    text-align: center;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--text-muted);
}

body.course-page .course-syllabus__rotation strong,
body.course-page .course-syllabus__subtitle strong {
    color: var(--title-cream);
    font-weight: 600;
}

/* ---- From zero: the Beginner 0 promise (bachata-beginner-0 only) ----
   Replaces the technique ledger on that page: three editorial moments
   instead of a lesson plan (owner request 2026-07-28). */
body.course-page .course-zero {
    padding: clamp(2.6rem, 5vw, 4.6rem) 0;
    background: var(--bg-secondary);
}

body.course-page .course-zero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.1rem, 2.2vw, 1.6rem);
    margin: 0 auto 2.2rem;
    padding: 0;
    max-width: 62rem;
    list-style: none;
}

body.course-page .course-zero__moment {
    position: relative;
    padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.2rem, 2vw, 1.6rem) clamp(1.5rem, 2.6vw, 2rem);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.course-page .course-zero__moment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-start), var(--accent-gold) 60%, transparent);
    opacity: 0.75;
}

body.course-page .course-zero__moment:hover {
    border-color: rgba(159, 168, 255, 0.45);
    box-shadow: var(--shadow-soft);
}

body.course-page .course-zero__num {
    display: block;
    margin: 0 0 0.55rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 2rem;
    line-height: 1;
    color: var(--accent-gold);
}

body.course-page .course-zero__name {
    margin: 0 0 0.5rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--title-cream);
}

body.course-page .course-zero__desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-muted);
}

body.course-page .course-zero__subtitle strong {
    color: var(--title-cream);
    font-weight: 600;
}

body.course-page .course-zero__guide {
    margin: 0 auto;
    max-width: 52ch;
    text-align: center;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--text-muted);
}

body.course-page .course-zero__guide a {
    color: var(--accent-start);
    text-decoration: none;
    font-weight: 600;
}

body.course-page .course-zero__guide a:hover,
body.course-page .course-zero__guide a:focus-visible {
    color: #9B7CF8;
    text-decoration: underline;
}

@media (min-width: 720px) {
    body.course-page .course-zero__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- One night in the room: the count-in ---- */
body.course-page .course-night__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.4rem;
    margin: 0 auto;
    padding: 0;
    max-width: 62rem;
    list-style: none;
}

body.course-page .course-night__step {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

body.course-page .course-night__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    min-height: 1.9rem;
    border-radius: 50%;
    background: rgba(159, 168, 255, 0.08);
    border: 1px solid rgba(159, 168, 255, 0.55);
    font-family: 'Teko', sans-serif;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--accent-gold);
}

body.course-page .course-night__step {
    position: relative;
}

body.course-page .course-night__step + .course-night__step::before {
    content: '';
    position: absolute;
    top: 0.95rem;
    left: -1.4rem;
    width: 1.4rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(159, 168, 255, 0.65), rgba(159, 168, 255, 0.18));
}

body.course-page .course-night__body strong {
    display: block;
    margin-bottom: 0.3rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--title-cream);
}

body.course-page .course-night__body p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---- Level fork ---- */
body.course-page .course-fork__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 2.6rem);
    align-items: stretch;
    margin: 0 auto 1.6rem;
    max-width: 56rem;
}

body.course-page .course-fork__voice {
    margin: 0 0 0.7rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    line-height: 1.4;
    color: var(--title-cream);
}

body.course-page .course-fork__answer {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--text-muted);
}

body.course-page .course-fork__answer strong {
    color: var(--title-cream);
    font-weight: 600;
}

body.course-page .course-fork__answer a,
body.course-page .course-fork__unsure a {
    color: var(--accent-start);
    text-decoration: none;
    font-weight: 600;
}

body.course-page .course-fork__answer a:hover,
body.course-page .course-fork__answer a:focus-visible,
body.course-page .course-fork__unsure a:hover,
body.course-page .course-fork__unsure a:focus-visible {
    color: #9B7CF8;
    text-decoration: underline;
}

body.course-page .course-fork__path--here {
    padding-left: 1.1rem;
    border-left: 2px solid var(--accent-start);
}

body.course-page .course-fork__divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
}

body.course-page .course-fork__divider::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(159, 168, 255, 0.35);
}

body.course-page .course-fork__divider span {
    position: relative;
    padding: 0.2rem 0.55rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(159, 168, 255, 0.45);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

body.course-page .course-fork__unsure {
    margin: 0 auto;
    max-width: 52ch;
    text-align: center;
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---- Teachers strip (founders recipe, scoped for course pages) ---- */
body.course-page .founders-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
    max-width: 34rem;
    padding: 1rem 1.2rem;
    background: rgba(4, 19, 16, 0.55);
    border: 1px solid rgba(159, 168, 255, 0.22);
    border-radius: 16px;
}

body.course-page .founders-strip__photo {
    flex: 0 0 auto;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 18%;
    border: 1px solid rgba(159, 168, 255, 0.45);
}

body.course-page .founders-strip__copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

body.course-page .founders-strip__names {
    color: var(--title-cream);
    font-size: 1.02rem;
}

body.course-page .founders-strip__role {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

body.course-page .founders-strip__link {
    width: fit-content;
    color: var(--accent-start);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
}

body.course-page .founders-strip__link:hover,
body.course-page .founders-strip__link:focus-visible {
    color: #9B7CF8;
    text-decoration: underline;
}

/* ---- Pathway ladder ---- */
body.course-page .course-path__ladder {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.4rem;
    margin: 0 auto;
    padding: 0;
    max-width: 62rem;
    list-style: none;
}

body.course-page .course-path__rung {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.1rem 1.1rem;
    background: transparent;
    border: 1px solid rgba(159, 168, 255, 0.18);
    border-radius: 14px;
}

body.course-page .course-path__rung + .course-path__rung::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -1.4rem;
    width: 1.4rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(159, 168, 255, 0.65), rgba(159, 168, 255, 0.18));
}

body.course-page .course-path__rung--current {
    background: var(--glass-bg);
    border-color: rgba(139, 92, 247, 0.55);
}

body.course-page .course-path__name {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--title-cream);
    text-decoration: none;
}

body.course-page a.course-path__name:hover,
body.course-page a.course-path__name:focus-visible {
    color: var(--accent-start);
    text-decoration: underline;
}

body.course-page .course-path__rung--current .course-path__name {
    color: var(--accent-start);
}

body.course-page .course-path__when {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* ---- Conversion island (champagne) ---- */
body.course-page .course-register__panel {
    margin: 0 auto;
    max-width: 44rem;
    padding: clamp(1.8rem, 4vw, 2.8rem);
    background: #E8E9F8;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    text-align: center;
}

body.course-page .course-register__title {
    margin: 0 0 0.8rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    text-transform: none;
    color: #10143A;
}

body.course-page .course-register__title .title-accent {
    font-style: italic;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #7C5CE8;
    color: #7C5CE8;
}

body.course-page .course-register__lede {
    margin: 0 auto 1.5rem;
    max-width: 44ch;
    font-size: 1rem;
    line-height: 1.65;
    color: #3E4670;
}

body.course-page .course-register__actions {
    justify-content: center;
    margin-bottom: 1.4rem;
}

body.course-page .course-register__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    border-radius: var(--cta-radius);
    background: var(--cta-submit-bg);
    color: var(--cta-submit-text);
    font-family: 'Outfit', sans-serif;
    font-size: 0.96rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

body.course-page .course-register__submit:hover,
body.course-page .course-register__submit:focus-visible {
    background: var(--cta-submit-bg-hover);
    color: var(--cta-submit-text);
}

body.course-page .course-register__pricing {
    margin: 0 auto 0.5rem;
    max-width: 52ch;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #3E4670;
}

body.course-page .course-register__trust {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #10143A;
}

/* ---- Course FAQ (petrol details skin) ---- */
body.course-page .course-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0 auto;
    max-width: 46rem;
}

body.course-page .course-faq__item {
    background: var(--glass-bg);
    border: 1px solid rgba(159, 168, 255, 0.18);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

body.course-page .course-faq__item[open] {
    border-color: rgba(159, 168, 255, 0.4);
    border-left: 3px solid var(--accent-gold);
}

body.course-page .course-faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    cursor: pointer;
    list-style: none;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--title-cream);
    transition: color 0.3s ease;
}

body.course-page .course-faq__summary::-webkit-details-marker {
    display: none;
}

body.course-page .course-faq__summary:hover {
    color: var(--accent-start);
}

body.course-page .course-faq__icon {
    flex: 0 0 auto;
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--accent-start);
}

@media (prefers-reduced-motion: no-preference) {
    body.course-page .course-faq__icon {
        transition: transform 0.3s ease;
    }
}

body.course-page .course-faq__item[open] .course-faq__icon {
    transform: rotate(45deg);
}

body.course-page .course-faq__body {
    padding: 0 1.2rem 1.1rem;
}

body.course-page .course-faq__body p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-muted);
}

body.course-page .course-faq__body a {
    color: var(--accent-start);
    text-decoration: none;
    font-weight: 600;
}

body.course-page .course-faq__body a:hover,
body.course-page .course-faq__body a:focus-visible {
    color: #9B7CF8;
    text-decoration: underline;
}

/* ---- Mobile sticky trial bar (home recipe, course scope) ---- */
body.course-page .mobile-cta-bar {
    display: none;
}

/* ---- Focus visibility ---- */
body.course-page .course-cta-primary:focus-visible,
body.course-page .course-cta-secondary:focus-visible,
body.course-page .course-register__submit:focus-visible,
body.course-page .course-faq__summary:focus-visible {
    outline: 2px solid var(--accent-start);
    outline-offset: 3px;
}

/* ---- Responsive ---- */
@media (max-width: 899px) {
    body.course-page .course-masthead {
        padding-top: calc(var(--header-height-mobile) + 1.4rem);
    }

    body.course-page .course-masthead__grid {
        grid-template-columns: 1fr;
    }

    body.course-page .course-masthead__figure {
        order: -1;
        max-width: 26rem;
    }

    body.course-page .course-masthead__media {
        aspect-ratio: 16 / 10;
    }

    body.course-page .course-night__steps,
    body.course-page .course-path__ladder {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        max-width: 30rem;
    }

    body.course-page .course-night__step + .course-night__step::before,
    body.course-page .course-path__rung + .course-path__rung::before {
        content: none;
    }

    body.course-page .mobile-cta-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        padding: 0.55rem 0.8rem calc(0.55rem + env(safe-area-inset-bottom));
        background: rgba(4, 19, 16, 0.94);
        border-top: 1px solid rgba(159, 168, 255, 0.25);
    }

    body.course-page .mobile-cta-bar__link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        border-radius: var(--cta-radius);
        background: var(--cta-grad);
        background-size: 160% 100%;
        background-position: 0% 50%;
        color: var(--cta-ink);
        font-family: 'Outfit', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
    }

    body.course-page .mobile-cta-bar__hint {
        font-weight: 500;
        opacity: 0.85;
        margin-left: 0.25rem;
    }

    body.course-page main {
        padding-bottom: 4.2rem;
    }
}

@media (max-width: 640px) {
    body.course-page .course-callsheet {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    body.course-page .course-fork__grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    body.course-page .course-fork__divider {
        width: 100%;
        height: 2.2rem;
    }

    body.course-page .course-fork__divider::before {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
    }

    body.course-page .founders-strip {
        flex-direction: row;
        max-width: 100%;
    }
}

/* ---- Combo reel slot + studio haze ----
   The haze canvas sits between the warm-graded photo and the brass corner
   ticks (z-index 3); the video, once footage exists, replaces the img
   at z-index 2 inside the same taped frame. */
body.course-page .course-masthead__haze {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}


/* ---- Connector rails: drawable by JS, fully drawn without it ---- */
body.course-page .course-night__step + .course-night__step::before,
body.course-page .course-path__rung + .course-path__rung::before {
    transform: scaleX(var(--rail-draw, 1));
    transform-origin: left center;
}

/* ---- Pathway: Lady Styling's parallel track spans the ladder ---- */
body.course-page .course-path__rung--parallel {
    grid-column: 1 / -1;
    border-style: dashed;
}

body.course-page .course-path__rung--parallel + .course-path__rung::before {
    content: none;
}

/* --------------------------------------------------------------------------
   SCHEDULE PAGE (body.schedule-page) — "La settimana"
   The timetable skin itself is shared with the homepage: every
   "body.home-page .schedule-*, .class-card, ..." rule above was widened to
   :is(body.home-page, body.schedule-page). This block carries only what is
   unique to schedule.html: the compact split hero, the fact chips, the
   Dance Journey timeline (ported here from the page's deleted inline
   <style>, re-inked petrol/brass, hover movement removed), the private
   band, and the FAQ skin. See System/site-revamp-plan.md section 3.
   -------------------------------------------------------------------------- */

body.schedule-page .schedule-hero-modern {
    padding: calc(var(--header-height) + clamp(1.6rem, 3.2vw, 2.4rem)) 20px clamp(1.1rem, 2.2vw, 1.6rem);
}

body.schedule-page .hero-grid {
    gap: clamp(1.6rem, 3.5vw, 3rem);
}

body.schedule-page .schedule-hero-modern .hero-grid {
    position: relative;
}

body.schedule-page .schedule-hero__ghost {
    position: absolute;
    top: -0.38em;
    left: -0.04em;
    z-index: 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(5rem, 11vw, 8.5rem);
    line-height: 1;
    color: var(--title-cream);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

body.schedule-page .schedule-hero-modern .hero-content-left,
body.schedule-page .schedule-hero-modern .hero-content-right {
    position: relative;
    z-index: 1;
}

@media (max-width: 899px) {
    body.schedule-page .schedule-hero__ghost {
        display: none;
    }
}

@media (min-width: 900px) {
    body.schedule-page .hero-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

body.schedule-page .page-title {
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--title-cream);
}

body.schedule-page .hero-badge-text {
    color: var(--accent-bronze);
    letter-spacing: 0.16em;
}

body.schedule-page .hero-badge-line {
    background: var(--accent-bronze);
}

body.schedule-page .hero-desc-border {
    color: var(--text-muted);
}

/* Fact chips under the dek */
body.schedule-page .schedule-fact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1.2rem 0 1.75rem;
    padding: 0;
    list-style: none;
}

body.schedule-page .schedule-fact-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(159, 168, 255, 0.35);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--text-main);
    background: rgba(159, 168, 255, 0.07);
}

body.schedule-page .schedule-fact-chips li::before {
    content: '✓';
    color: var(--accent-bronze);
    font-size: 0.8rem;
}

/* Framed hero photo: warm grade in a taped frame */
body.schedule-page .framed-hero-inner {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
}

body.schedule-page .framed-hero-inner::before,
body.schedule-page .framed-hero-inner::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.schedule-page .framed-hero-inner::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.schedule-page .framed-hero-inner::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.schedule-page .framed-hero-inner img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

@media (prefers-reduced-motion: no-preference) {
    body.schedule-page .framed-hero-inner img {
        transition: filter 0.5s ease;
    }
}

body.schedule-page .framed-hero-inner:hover img,
body.schedule-page .framed-hero-inner:focus-within img {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

/* Keep the full timetable readable while reducing the amount of vertical
   space it occupies on the dedicated schedule page. */
body.schedule-page .schedule-section {
    padding: clamp(4.25rem, 8vw, 6rem) 0 1.75rem;
}

body.schedule-page .schedule-header {
    margin-bottom: 2.75rem;
}

body.schedule-page .schedule-header .section-title-modern {
    font-size: clamp(2.35rem, 4.3vw, 3rem);
}

body.schedule-page .schedule-meta {
    font-size: 0.8rem;
}

body.schedule-page .schedule-offramp {
    margin-top: 2rem;
    padding: 1rem 1.4rem;
}

body.schedule-page .schedule-offramp__copy {
    font-size: 0.95rem;
}

body.schedule-page .schedule-offramp__cta {
    padding: 0.7rem 1.3rem;
}

/* Keep every desktop timetable slot on the same baseline. The final Thursday
   class carries an extra approval note; without a shared row height it makes
   the neighbouring Improver card look disproportionately tall. */
@media (min-width: 900px) {
    body.schedule-page .schedule-grid-header {
        gap: 1rem;
        margin-bottom: 1.25rem;
        padding: 0 0.75rem;
    }

    body.schedule-page .schedule-grid-header .col-header {
        font-size: 1.05rem;
    }

    body.schedule-page .schedule-section .hidden-mobile .schedule-row {
        grid-auto-rows: 8.25rem;
        gap: 1rem;
        margin-bottom: 0.625rem;
        align-items: stretch;
    }

    body.schedule-page .schedule-section .hidden-mobile .class-card {
        height: 100%;
        min-height: 0;
        padding: 0.7rem 2.5rem 0.7rem 0.9rem;
    }

    body.schedule-page .schedule-section .hidden-mobile .class-name {
        font-size: 1.125rem;
        overflow-wrap: normal;
        word-break: normal;
    }

    body.schedule-page .schedule-section .hidden-mobile .class-experience {
        font-size: 0.75rem;
    }

    body.schedule-page .schedule-section .hidden-mobile .class-card--approval .class-name {
        font-size: 1rem;
        line-height: 1.1;
    }

    body.schedule-page .schedule-section .hidden-mobile .class-card--approval .class-experience {
        font-size: 0.75rem;
        line-height: 1.25;
    }

    body.schedule-page .schedule-section .hidden-mobile .class-card--approval .class-note {
        margin: 0.18rem 0 0;
        color: var(--accent-start);
        font-size: 0.68rem;
        line-height: 1.2;
    }
}

/* ---- Dance Journey timeline (structure ported, palette re-inked) ---- */

body.schedule-page .journey-section {
    padding: 3.5rem 20px;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

body.schedule-page .section-header {
    text-align: center;
    margin-bottom: 40px;
}

body.schedule-page .timeline {
    position: relative;
    padding: 20px 0;
}

body.schedule-page .timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom,
            transparent,
            rgba(159, 168, 255, 0.55),
            rgba(159, 168, 255, 0.55),
            transparent);
    transform: translateX(-50%);
}

body.schedule-page .timeline-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}

body.schedule-page .timeline-item:nth-child(odd) {
    justify-content: flex-start;
}

body.schedule-page .timeline-item:nth-child(even) {
    justify-content: flex-end;
}

body.schedule-page .timeline-content {
    width: 45%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 16px;
    position: relative;
    transition: border-color 0.3s ease;
}

body.schedule-page .timeline-content:hover {
    border-color: rgba(159, 168, 255, 0.55);
}

body.schedule-page .timeline-item:nth-child(odd) .timeline-content {
    margin-right: 50px;
    text-align: right;
}

body.schedule-page .timeline-item:nth-child(even) .timeline-content {
    margin-left: 50px;
    text-align: left;
}

body.schedule-page .timeline-dot {
    position: absolute;
    left: 50%;
    width: 14px;
    height: 14px;
    background: var(--accent-bronze);
    border: 2px solid var(--bg-main);
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

body.schedule-page .timeline-item:last-child .timeline-dot {
    background: var(--accent-start);
}

body.schedule-page .timeline-item:last-child .timeline-content {
    border-color: rgba(139, 92, 247, 0.4);
}

body.schedule-page .timeline-scanner {
    position: sticky;
    top: 50vh;
    left: 50%;
    width: 14px;
    height: 14px;
    background: var(--accent-start);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(139, 92, 247, 0.45);
    z-index: 5;
    margin-bottom: -14px;
    pointer-events: none;
}

body.schedule-page .journey-num {
    display: block;
    font-family: 'Teko', sans-serif;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--accent-bronze);
    margin-bottom: 0.35rem;
}

body.schedule-page .journey-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--title-cream);
    margin-bottom: 0.5rem;
}

body.schedule-page .journey-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

body.schedule-page .role-split {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    text-align: left;
}

body.schedule-page .role-col {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid rgba(159, 168, 255, 0.16);
    padding: 1rem;
    border-radius: 10px;
}

body.schedule-page .role-title {
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.schedule-page .role-title.leader {
    color: var(--title-cream);
}

body.schedule-page .role-title.follow {
    color: var(--accent-bronze);
}

body.schedule-page .role-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

body.schedule-page .role-list li {
    margin-bottom: 0.25rem;
    padding-left: 1rem;
    position: relative;
}

body.schedule-page .role-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-start);
}

@media (max-width: 768px) {
    body.schedule-page .timeline::before {
        left: 20px;
    }

    body.schedule-page .timeline-item {
        justify-content: flex-start !important;
        padding-left: 50px;
    }

    body.schedule-page .timeline-dot {
        left: 20px;
    }

    body.schedule-page .timeline-content {
        width: 100%;
        text-align: left !important;
        margin: 0 !important;
    }

    body.schedule-page .role-split {
        flex-direction: column;
        gap: 1rem;
    }

    body.schedule-page .timeline-scanner {
        left: 0;
        margin-left: 13px;
        transform: none;
    }
}

/* ---- Private classes band ---- */

body.schedule-page .private-classes-section {
    padding: 3.25rem 20px;
    background: var(--bg-secondary);
    border-top: 1px solid rgba(159, 168, 255, 0.16);
    border-bottom: 1px solid rgba(159, 168, 255, 0.16);
}

body.schedule-page .private-classes-grid {
    gap: 1.5rem;
}

/* Italic display glyphs can overhang their inline paint box. Give the
   gradient accent a small transparent end allowance so the final letter is
   fully painted without changing the title's visual spacing. */
body.schedule-page .private-classes-grid .section-title-modern .title-accent {
    display: inline-block;
    padding-inline-end: 0.14em;
    margin-inline-end: -0.14em;
}

@media (min-width: 900px) {
    body.schedule-page .private-classes-grid {
        gap: 3rem;
    }

    body.schedule-page .private-classes-grid .hero-content-right {
        height: 320px;
    }
}

/* Mobile: the shared .hero-content-right sizing (80% width, square-ish
   photo) is tuned for the full-viewport top hero. This band is meant to
   read as compact, so cap it to a short, full-width strip instead. */
@media (max-width: 899px) {
    body.schedule-page .private-classes-section {
        padding: 2.5rem 20px;
    }

    body.schedule-page .private-classes-grid .hero-content-right {
        max-width: 100%;
        margin: 0;
    }
}

/* Framed photo: same gold-tick/warm-grade treatment as the top hero photo,
   without the oversized scale transform that context needs. */
body.schedule-page .private-classes-photo {
    position: relative;
    height: 100%;
    min-height: 260px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
}

@media (max-width: 899px) {
    body.schedule-page .private-classes-photo {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 7;
    }
}

body.schedule-page .private-classes-photo::before,
body.schedule-page .private-classes-photo::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.schedule-page .private-classes-photo::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.schedule-page .private-classes-photo::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.schedule-page .private-classes-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

@media (prefers-reduced-motion: no-preference) {
    body.schedule-page .private-classes-photo img {
        transition: filter 0.5s ease;
    }
}

body.schedule-page .private-classes-photo:hover img,
body.schedule-page .private-classes-photo:focus-within img {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

/* ---- FAQ skin (5 questions, native details) ---- */

:is(body.schedule-page, body.faq-page, body.service-page) .sched-faq {
    border-radius: 12px;
    overflow: hidden;
}

:is(body.schedule-page, body.faq-page, body.service-page) .sched-faq[open] {
    border-left: 3px solid var(--accent-bronze);
}

:is(body.schedule-page, body.faq-page, body.service-page) .sched-faq__summary {
    padding: 1.5rem;
    cursor: pointer;
    color: var(--title-cream);
    font-weight: 600;
    font-size: 1.1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

:is(body.schedule-page, body.faq-page, body.service-page) .sched-faq__summary::-webkit-details-marker {
    display: none;
}

:is(body.schedule-page, body.faq-page, body.service-page) .sched-faq__icon {
    color: var(--accent-start);
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

:is(body.schedule-page, body.faq-page, body.service-page) .sched-faq[open] .sched-faq__icon {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
    :is(body.schedule-page, body.faq-page, body.service-page) .sched-faq__icon {
        transition: transform 0.25s ease;
    }
}

:is(body.schedule-page, body.faq-page, body.service-page) .sched-faq__body {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-muted);
    line-height: 1.6;
}

:is(body.schedule-page, body.faq-page, body.service-page) .sched-faq__body a {
    color: var(--accent-start);
}

/* --------------------------------------------------------------------------
   GALLERY PAGE (body.gallery-page) — "Nights at the studio"
   Slim masthead, magazine mosaic on a 12-column grid. Photos wear the house
   the warm cinematic grade at rest and on hover (no reveal effect);
   captions are small brass eyebrows pinned to the tile, always visible (the
   old hover-reveal slid them 20px — movement on hover is banned). The old
   inline <style> on the page was deleted; this block replaces it.
   See System/site-revamp-plan.md section 4.
   -------------------------------------------------------------------------- */

body.gallery-page .gallery-hero {
    padding: calc(var(--header-height) + 2.4rem) 20px 2.4rem;
    text-align: center;
}

body.gallery-page .gallery-hero .container {
    position: relative;
}

/* Watermark word behind the masthead, same device as the schedule and
   split mastheads — centred here because this hero is centre-aligned. */
body.gallery-page .gallery-hero__ghost {
    position: absolute;
    top: -0.38em;
    left: 50%;
    z-index: 0;
    transform: translateX(-50%);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(5rem, 11vw, 8.5rem);
    line-height: 1;
    color: var(--title-cream);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

body.gallery-page .gallery-hero .hero-badge,
body.gallery-page .gallery-hero .page-title,
body.gallery-page .gallery-hero .hero-desc-border {
    position: relative;
    z-index: 1;
}

@media (max-width: 899px) {
    body.gallery-page .gallery-hero__ghost {
        display: none;
    }
}

body.gallery-page .page-title {
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: none;
    color: var(--title-cream);
}

body.gallery-page .hero-badge-text {
    color: var(--accent-bronze);
    letter-spacing: 0.16em;
}

body.gallery-page .hero-badge-line {
    background: var(--accent-bronze);
}

body.gallery-page .hero-desc-border {
    border: none;
    padding: 0;
    color: var(--text-muted);
}

body.gallery-page .gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 20px 3.5rem;
}

body.gallery-page .gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 150px;
    grid-auto-flow: dense;
    gap: 1rem;
}

body.gallery-page .gallery-item {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
    grid-column: span 4;
    grid-row: span 2;
}

body.gallery-page .gallery-item--tall {
    grid-row: span 3;
}

body.gallery-page .gallery-item--wide {
    grid-column: span 8;
}

/* Neutralize the legacy unscoped gallery rules in style.css (±3deg tilt,
   staggered margins, hover scale, 4/3 aspect) — movement on hover is banned
   and the tilt fights the 12-column compositions below. Scoped to this page
   only; wedding-dance and room-rental still rely on the legacy block. */
body.gallery-page .gallery-item,
body.gallery-page .gallery-item:nth-child(odd),
body.gallery-page .gallery-item:nth-child(even) {
    transform: none;
    margin: 0;
    aspect-ratio: auto;
}

body.gallery-page .gallery-item:hover {
    transform: none;
    z-index: auto;
    box-shadow: var(--shadow-soft);
}

/* Floor-tape corner ticks */
body.gallery-page .gallery-item::before,
body.gallery-page .gallery-item::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.gallery-page .gallery-item::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.gallery-page .gallery-item::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.gallery-page .gallery-item:hover::before,
body.gallery-page .gallery-item:hover::after,
body.gallery-page .gallery-item:focus-within::before,
body.gallery-page .gallery-item:focus-within::after {
    border-color: var(--accent-start);
}

body.gallery-page .gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

@media (prefers-reduced-motion: no-preference) {
    body.gallery-page .gallery-img {
        transition: filter 0.5s ease;
    }
}

body.gallery-page .gallery-item:hover .gallery-img,
body.gallery-page .gallery-item:focus-within .gallery-img {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
    opacity: 1;
}

body.gallery-page .gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.9rem;
    background: rgba(4, 19, 16, 0.78);
    color: var(--accent-bronze-soft);
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 1;
    transform: none;
}

/* ---- Closing bridge ---- */

body.gallery-page .gallery-bridge {
    padding: 1rem 20px 4.5rem;
    text-align: center;
}

body.gallery-page .gallery-bridge__lede {
    color: var(--text-muted);
    max-width: 520px;
    margin: 0.8rem auto 1.8rem;
}

body.gallery-page .gallery-bridge__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

body.gallery-page .gallery-bridge__trial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    border-radius: var(--cta-radius);
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--cta-ink);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-position 0.35s ease, box-shadow 0.3s ease;
}

body.gallery-page .gallery-bridge__trial:hover,
body.gallery-page .gallery-bridge__trial:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 10px 26px rgba(139, 92, 247, 0.22);
    color: var(--cta-ink);
}

body.gallery-page .gallery-bridge__insta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    border-radius: var(--cta-radius);
    background: transparent;
    border: 1px solid rgba(159, 168, 255, 0.45);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-size: 0.96rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body.gallery-page .gallery-bridge__insta:hover,
body.gallery-page .gallery-bridge__insta:focus-visible {
    background: rgba(159, 168, 255, 0.1);
    border-color: rgba(159, 168, 255, 0.7);
    color: var(--title-cream);
}

@media (max-width: 900px) {
    body.gallery-page .gallery-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 130px;
    }

    body.gallery-page .gallery-item {
        grid-column: span 3;
    }

    body.gallery-page .gallery-item--wide {
        grid-column: span 6;
    }
}

@media (max-width: 560px) {
    body.gallery-page .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        grid-auto-flow: row;
    }

    body.gallery-page .gallery-item,
    body.gallery-page .gallery-item--tall,
    body.gallery-page .gallery-item--wide {
        grid-column: auto;
        grid-row: auto;
    }

    body.gallery-page .gallery-img {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    body.gallery-page .gallery-item--tall .gallery-img {
        aspect-ratio: 4 / 5;
    }
}

/* ---- Editorial chapters ---- */

body.gallery-page .gallery-chapter {
    padding-top: 1.6rem;
}

body.gallery-page .gallery-chapter:first-of-type {
    padding-top: 2.5rem;
}

body.gallery-page .gallery-chapter__head {
    max-width: 46ch;
    margin-bottom: 1.6rem;
    text-align: left;
}

body.gallery-page .gallery-chapter__head .section-title-modern {
    text-align: left;
    margin-bottom: 0.55rem;
}

body.gallery-page .gallery-chapter__lede {
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0;
}

/* Art-directed, hole-free compositions per chapter. Explicit grid areas
   (row-start / col-start / row-end / col-end) on the 12-column desktop grid
   and the 6-column tablet grid; below 560px the single-column rules above
   take over and chapters simply stack in reading order. */
@media (min-width: 901px) {
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(1) { grid-area: 1 / 1 / 3 / 9; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(2) { grid-area: 1 / 9 / 4 / 13; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(3) { grid-area: 3 / 1 / 6 / 5; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(4) { grid-area: 3 / 5 / 6 / 9; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(5) { grid-area: 4 / 9 / 6 / 13; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(6) { grid-area: 6 / 1 / 8 / 5; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(7) { grid-area: 6 / 5 / 8 / 13; }

    body.gallery-page .gallery-chapter--social .gallery-grid > :nth-child(1) { grid-area: 1 / 1 / 4 / 13; }
    body.gallery-page .gallery-chapter--social .gallery-grid > :nth-child(2) { grid-area: 4 / 1 / 6 / 7; }
    body.gallery-page .gallery-chapter--social .gallery-grid > :nth-child(3) { grid-area: 4 / 7 / 6 / 13; }

    body.gallery-page .gallery-chapter--stage .gallery-grid > :nth-child(1) { grid-area: 1 / 1 / 4 / 9; }
    body.gallery-page .gallery-chapter--stage .gallery-grid > :nth-child(2) { grid-area: 1 / 9 / 4 / 13; }
    body.gallery-page .gallery-chapter--stage .gallery-grid > :nth-child(3) { grid-area: 4 / 1 / 6 / 7; }
    body.gallery-page .gallery-chapter--stage .gallery-grid > :nth-child(4) { grid-area: 4 / 7 / 6 / 13; }
}

@media (min-width: 561px) and (max-width: 900px) {
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(1) { grid-area: 1 / 1 / 3 / 7; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(2) { grid-area: 3 / 1 / 6 / 4; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(3) { grid-area: 3 / 4 / 6 / 7; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(4) { grid-area: 6 / 1 / 10 / 4; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(5) { grid-area: 6 / 4 / 8 / 7; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(6) { grid-area: 8 / 4 / 10 / 7; }
    body.gallery-page .gallery-chapter--classes .gallery-grid > :nth-child(7) { grid-area: 10 / 1 / 12 / 7; }

    body.gallery-page .gallery-chapter--social .gallery-grid > :nth-child(1) { grid-area: 1 / 1 / 3 / 7; }
    body.gallery-page .gallery-chapter--social .gallery-grid > :nth-child(2) { grid-area: 3 / 1 / 5 / 4; }
    body.gallery-page .gallery-chapter--social .gallery-grid > :nth-child(3) { grid-area: 3 / 4 / 5 / 7; }

    body.gallery-page .gallery-chapter--stage .gallery-grid > :nth-child(1) { grid-area: 1 / 1 / 3 / 7; }
    body.gallery-page .gallery-chapter--stage .gallery-grid > :nth-child(2) { grid-area: 3 / 1 / 7 / 4; }
    body.gallery-page .gallery-chapter--stage .gallery-grid > :nth-child(3) { grid-area: 3 / 4 / 5 / 7; }
    body.gallery-page .gallery-chapter--stage .gallery-grid > :nth-child(4) { grid-area: 5 / 4 / 7 / 7; }
}

/* ---- Click affordance (colour and cursor only — no movement) ---- */

body.gallery-page .gallery-item__link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

body.gallery-page .gallery-item__link:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: -4px;
    border-radius: 14px;
}

body.gallery-page .gallery-item:hover .gallery-caption,
body.gallery-page .gallery-item:focus-within .gallery-caption {
    color: var(--accent-gold);
}

/* ---- Chapter entrance (hooks the existing enhanceTropicSubpageEntrances
   observer in script.js; JS and reduced-motion gated, static fallback) ---- */

@media (prefers-reduced-motion: no-preference) {
    body.gallery-page .tropic-reveal {
        opacity: 0;
        transform: translateY(16px);
    }

    body.gallery-page .tropic-reveal--in {
        opacity: 1;
        transform: none;
        transition: opacity 0.55s ease, transform 0.55s ease;
    }
}

/* ---- Lightbox (native <dialog>, opacity-only fades) ---- */

body.gallery-page .gallery-lightbox {
    /* The site-wide margin reset kills the UA margin:auto that centres a
       modal dialog, so restore it explicitly. */
    margin: auto;
    max-width: min(94vw, 1240px);
    border: none;
    padding: 0;
    background: transparent;
    overflow: visible;
}

body.gallery-page .gallery-lightbox::backdrop {
    background: rgba(4, 19, 16, 0.92);
}

body.gallery-page .gallery-lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

body.gallery-page .gallery-lightbox__img {
    max-width: min(92vw, 1200px);
    max-height: 76vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

body.gallery-page .gallery-lightbox__meta {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

body.gallery-page .gallery-lightbox__caption {
    color: var(--accent-bronze-soft);
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.gallery-page .gallery-lightbox__count {
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

body.gallery-page .gallery-lightbox__btn {
    position: fixed;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(4, 19, 16, 0.6);
    border: 1px solid var(--glass-border);
    color: var(--title-cream);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body.gallery-page .gallery-lightbox__btn:hover,
body.gallery-page .gallery-lightbox__btn:focus-visible {
    background: rgba(159, 168, 255, 0.12);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

body.gallery-page .gallery-lightbox__btn:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

body.gallery-page .gallery-lightbox__btn--close {
    top: 1rem;
    right: 1rem;
}

body.gallery-page .gallery-lightbox__btn--prev,
body.gallery-page .gallery-lightbox__btn--next {
    top: 50%;
    margin-top: -24px;
}

body.gallery-page .gallery-lightbox__btn--prev {
    left: 1rem;
}

body.gallery-page .gallery-lightbox__btn--next {
    right: 1rem;
}

@media (max-width: 560px) {
    body.gallery-page .gallery-lightbox__btn {
        width: 44px;
        height: 44px;
    }

    body.gallery-page .gallery-lightbox__btn--prev,
    body.gallery-page .gallery-lightbox__btn--next {
        top: auto;
        bottom: 1.1rem;
        margin-top: 0;
    }

    body.gallery-page .gallery-lightbox__img {
        max-height: 66vh;
    }
}

body.gallery-lightbox-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    body.gallery-page .gallery-lightbox[open] {
        opacity: 1;
        transition: opacity 0.25s ease;
    }

    body.gallery-page .gallery-lightbox[open]::backdrop {
        opacity: 1;
        transition: opacity 0.25s ease;
    }

    @starting-style {
        body.gallery-page .gallery-lightbox[open] {
            opacity: 0;
        }

        body.gallery-page .gallery-lightbox[open]::backdrop {
            opacity: 0;
        }
    }
}

/* --------------------------------------------------------------------------
   FAQ PAGE (body.faq-page) — the single FAQ home
   Slim image masthead with anchor chips, three question groups under brass
   kickers, native <details> reusing the .sched-faq skin (selectors above are
   shared via :is(body.schedule-page, body.faq-page)), and a closing re-ask.
   See System/site-revamp-plan.md section 5.
   -------------------------------------------------------------------------- */

body.faq-page .faq-hero {
    padding: calc(var(--header-height) + 2.4rem) 20px 2.6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

body.faq-page .faq-hero .hero-bg-img {
    filter: saturate(1.18) contrast(1.09) brightness(0.8) sepia(0.16);
    opacity: 0.55;
}

body.faq-page .faq-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(6, 26, 23, 0.5) 0%, rgba(6, 26, 23, 0.75) 65%, var(--bg-main) 100%);
}

body.faq-page .page-title {
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: none;
    color: var(--title-cream);
}

body.faq-page .hero-badge-text {
    color: var(--accent-bronze);
    letter-spacing: 0.16em;
}

body.faq-page .hero-badge-line {
    background: var(--accent-bronze);
}

body.faq-page .hero-desc-border {
    border: none;
    padding: 0;
    color: var(--text-main);
}

body.faq-page .faq-anchor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
    margin-top: 1.3rem;
}

body.faq-page .faq-anchor-chips a {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(159, 168, 255, 0.4);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-main);
    background: rgba(4, 19, 16, 0.55);
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body.faq-page .faq-anchor-chips a:hover,
body.faq-page .faq-anchor-chips a:focus-visible {
    background: rgba(159, 168, 255, 0.14);
    border-color: rgba(159, 168, 255, 0.7);
    color: var(--title-cream);
}

body.faq-page .faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 20px 4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

body.faq-page .faq-group-kicker {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-bronze);
    margin: 1.6rem 0 0.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(159, 168, 255, 0.25);
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

body.faq-page .faq-group-kicker:first-of-type {
    margin-top: 0;
}

body.faq-page .sched-faq__body a {
    color: var(--accent-start);
}

body.faq-page .faq-reask {
    margin-top: 2.2rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(159, 168, 255, 0.25);
    text-align: center;
}

body.faq-page .faq-reask__copy {
    color: var(--text-muted);
    margin-bottom: 1.1rem;
}

body.faq-page .faq-reask__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    border-radius: var(--cta-radius);
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--cta-ink);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-position 0.35s ease, box-shadow 0.3s ease;
}

body.faq-page .faq-reask__cta:hover,
body.faq-page .faq-reask__cta:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 10px 26px rgba(139, 92, 247, 0.22);
    color: var(--cta-ink);
}

/* --------------------------------------------------------------------------
   ABOUT PAGE (body.about-page) — "The people behind the studio"
   Faces first: slim masthead, founders split with the warm-graded taped
   portrait, then the globe + brass stat band ("Taught around the world"),
   a visit-the-studio strip, and a closing trial bridge (the organizer
   acts section was removed 2026-08-07).
   The page's two inline <style> blocks were deleted; the load-bearing
   layout rules were ported here and re-inked. The globe keeps its lazy
   loader; its scene colors were re-inked in the page script itself.
   See System/site-revamp-plan.md section 2.
   -------------------------------------------------------------------------- */

body.about-page .about-hero {
    padding: calc(var(--header-height) + 2.4rem) 20px 1rem;
    text-align: center;
    position: relative;
}

body.about-page .about-hero__content {
    max-width: 760px;
    margin: 0 auto;
}

body.about-page .page-title {
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: none;
    color: var(--title-cream);
}

body.about-page .hero-badge-text {
    color: var(--accent-bronze);
    letter-spacing: 0.16em;
}

body.about-page .hero-badge-line {
    background: var(--accent-bronze);
}

body.about-page .hero-desc-border {
    border: none;
    padding: 0;
    color: var(--text-muted);
}

/* ---- Founders ---- */

body.about-page .founders-section {
    padding: 0.5rem 0 4rem;
}

body.about-page .founders-outline {
    font-size: clamp(3rem, 10vw, 7rem);
    font-family: var(--font-heading);
    margin-bottom: -2.5rem;
    position: relative;
    z-index: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(159, 168, 255, 0.35);
    opacity: 0.5;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.about-page .founders-name {
    position: relative;
    z-index: 10;
    font-size: clamp(2.2rem, 6vw, 3.5rem);
    margin-top: 0;
    color: var(--title-cream);
    font-family: var(--font-heading);
    font-weight: 500;
}

body.about-page .founders-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 992px) {
    body.about-page .founders-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

body.about-page .founders-image-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
    max-width: 480px;
    margin: 0 auto;
}

body.about-page .founders-image-wrapper::before,
body.about-page .founders-image-wrapper::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.about-page .founders-image-wrapper::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.about-page .founders-image-wrapper::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.about-page .founders-image {
    width: 100%;
    height: auto;
    display: block;
}

body.about-page .founders-content h3 {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--title-cream);
    margin-bottom: 0.8rem;
}

body.about-page .founders-content p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

/* ---- Globe: taught around the world ---- */

body.about-page .about-globe {
    padding: 2rem 20px 3rem;
}

body.about-page .about-globe .section-title-modern {
    text-align: center;
    margin-bottom: 2rem;
}

body.about-page .globe-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.4rem;
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
}

body.about-page .globe-legend {
    flex: 1;
    min-width: 300px;
    text-align: left;
}

body.about-page .about-globe__mission-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--title-cream);
    margin-bottom: 1rem;
}

body.about-page .mission-text {
    color: var(--text-muted);
    line-height: 1.7;
}


body.about-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.2rem;
}

body.about-page .stat-card {
    background: var(--glass-bg);
    padding: 1rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(159, 168, 255, 0.22);
    text-align: center;
    backdrop-filter: none;
}

body.about-page .stat-number {
    font-family: 'Teko', sans-serif;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1;
    color: var(--accent-bronze);
    background: none;
    -webkit-text-fill-color: currentcolor;
    margin-bottom: 0.25rem;
    display: block;
}

body.about-page .stat-label {
    color: var(--text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

body.about-page .mission-cta {
    display: block;
    margin-top: 1.2rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.3s ease;
}

body.about-page .mission-cta span {
    display: inline-block;
    color: var(--accent-bronze);
    font-weight: 600;
    margin-left: 0.3rem;
    white-space: nowrap;
}

body.about-page .mission-cta:hover {
    color: var(--title-cream);
}

body.about-page .mission-cta:hover span {
    color: #8B5CF7;
}

body.about-page #globe-viz {
    flex: 2;
    min-width: 300px;
    height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
}

body.about-page #globe-viz:active {
    cursor: grabbing;
}


@media (max-width: 640px) {
    body.about-page .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
    }
}

/* ---- Teachers ---- */

body.about-page .teachers-section {
    padding: 1rem 20px 3.5rem;
}

body.about-page .teachers-section .section-title-modern {
    text-align: center;
    margin-bottom: 2.4rem;
}

body.about-page .teachers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
    max-width: 640px;
    margin: 0 auto;
}

@media (max-width: 560px) {
    body.about-page .teachers-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }
}

body.about-page .teacher-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.6rem 1.4rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    text-align: center;
}

body.about-page .teacher-portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 190px);
    aspect-ratio: 4 / 5;
    margin-bottom: 0.9rem;
    border-radius: 12px;
    background:
        linear-gradient(160deg, rgba(159, 168, 255, 0.16), rgba(159, 168, 255, 0) 55%),
        #131A4A;
    border: 1px solid rgba(159, 168, 255, 0.22);
}

body.about-page .teacher-portrait span {
    font-family: var(--font-heading);
    font-size: 3.4rem;
    color: var(--accent-bronze-soft);
}

body.about-page .teacher-name {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.45rem;
    color: var(--title-cream);
    margin: 0;
}

body.about-page .teacher-role {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---- Closing bridge ---- */

body.about-page .about-bridge {
    padding: 2rem 20px 4.5rem;
    text-align: center;
}

body.about-page .about-bridge__copy {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--title-cream);
    margin-bottom: 1.2rem;
}

body.about-page .about-bridge__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    border-radius: var(--cta-radius);
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--cta-ink);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-position 0.35s ease, box-shadow 0.3s ease;
}

body.about-page .about-bridge__cta:hover,
body.about-page .about-bridge__cta:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 10px 26px rgba(139, 92, 247, 0.22);
    color: var(--cta-ink);
}

/* --------------------------------------------------------------------------
   CART PAGE (body.cart-page) — the Stripe hand-off step
   One solid petrol card on the canvas. All mechanics untouched: the
   #stripe-payment-btn id, #cart-details/#cart-error branches, and the
   registration redirect flow live in the page script. noindex verified.
   See System/site-revamp-plan.md section 6.
   -------------------------------------------------------------------------- */

body.cart-page .cart-section {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

body.cart-page .cart-content {
    max-width: 600px;
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: none;
    padding: 3rem;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
}

body.cart-page .cart-logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    letter-spacing: -0.02em;
    color: var(--title-cream);
    margin-bottom: 1.5rem;
    display: inline-block;
}

body.cart-page .cart-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--title-cream);
    background: none;
    -webkit-text-fill-color: currentcolor;
}

body.cart-page .cart-message {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 2.2rem;
    line-height: 1.6;
}

body.cart-page .cart-message--error {
    color: #A78BFA;
}

body.cart-page .payment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--cta-ink);
    padding: 0.95rem 2rem;
    border-radius: var(--cta-radius);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-position 0.35s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

body.cart-page .payment-btn:hover,
body.cart-page .payment-btn:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 10px 26px rgba(139, 92, 247, 0.22);
    transform: none;
    color: var(--cta-ink);
}

body.cart-page .cart-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    border-radius: var(--cta-radius);
    border: 1px solid rgba(159, 168, 255, 0.45);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body.cart-page .cart-back-link:hover,
body.cart-page .cart-back-link:focus-visible {
    background: rgba(159, 168, 255, 0.1);
    border-color: rgba(159, 168, 255, 0.7);
    color: var(--title-cream);
}


/* --------------------------------------------------------------------------
   SPLIT MASTHEAD — shared compact hero component (reg-masthead family).
   Used by events.html/de/events.html (body.events-page) and the three
   service pages under body.service-page: room-rental.html,
   corporate-events.html, private-lessons.html (+ DE counterparts). Same
   recipe as body.registration-page .reg-masthead, renamed since it now
   spans two page-type ancestor classes. schedule.html keeps its own
   lighter retune inside the SCHEDULE PAGE section.
   Static component: no GSAP entrance choreography, no data-* JS hooks —
   renders fully visible immediately, matching the shipped reg-masthead.
   -------------------------------------------------------------------------- */
:is(body.events-page, body.service-page) .split-masthead {
    padding: calc(var(--header-height) + clamp(1.6rem, 3.2vw, 2.4rem)) 0 clamp(1.1rem, 2.2vw, 1.6rem);
    text-align: left;
}

:is(body.events-page, body.service-page) .split-masthead__split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.6rem, 3.5vw, 3rem);
    align-items: stretch;
}

:is(body.events-page, body.service-page) .split-masthead__ghost {
    position: absolute;
    top: -0.38em;
    left: -0.04em;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(5rem, 11vw, 8.5rem);
    line-height: 1;
    color: rgba(234, 234, 251, 0.06);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

:is(body.events-page, body.service-page) .split-masthead__copy {
    position: relative;
}

:is(body.events-page, body.service-page) .split-masthead__media {
    margin: 0;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

:is(body.events-page, body.service-page) .split-masthead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

/* Events masthead: the media card carries the official congress flyer, so it
   sizes to the poster (shown whole, no crop, no photo grade) instead of
   stretching to the copy column. */
body.events-page .split-masthead__media img {
    height: auto;
    object-fit: contain;
    object-position: center;
    filter: none;
}

body.events-page .split-masthead__media {
    display: grid;
    grid-template-rows: minmax(0, auto) auto;
    align-self: start;
}


/* Clips the photo when it carries an inline art-direction zoom, so the
   scaled image never bleeds under the caption strip. */
body.events-page .split-masthead__frame {
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

body.events-page .split-masthead__caption {
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--glass-border);
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    text-align: right;
}

@media (max-width: 899px) {
    :is(body.events-page, body.service-page) .split-masthead__split {
        grid-template-columns: 1fr;
    }

    :is(body.events-page, body.service-page) .split-masthead__ghost {
        display: none;
    }

    :is(body.events-page, body.service-page) .split-masthead__media {
        aspect-ratio: 16 / 9;
    }

    /* The 16:9 mobile crop is for photos; the events flyer keeps its ratio. */
    body.events-page .split-masthead__media {
        aspect-ratio: auto;
    }
}

:is(body.events-page, body.service-page) .split-masthead__kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

:is(body.events-page, body.service-page) .split-masthead__kicker::before {
    content: '';
    width: 2.4rem;
    height: 2px;
    border-radius: 999px;
    background: var(--accent-gold);
}

:is(body.events-page, body.service-page) .split-masthead__title {
    margin: 0 0 1.2rem;
    max-width: 16ch;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 700;
    line-height: 1.06;
    text-transform: none;
    color: var(--title-cream);
}

:is(body.events-page, body.service-page) .split-masthead__title .title-accent {
    font-style: italic;
    background: linear-gradient(100deg, var(--accent-start) 0%, var(--accent-end) 46%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-start);
}

:is(body.events-page, body.service-page) .split-masthead__dek {
    margin: 0 0 1.4rem;
    max-width: 56ch;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-muted);
}

:is(body.events-page, body.service-page) .split-masthead__dek strong {
    color: var(--text-main);
}

:is(body.events-page, body.service-page) .split-masthead__facts {
    margin: 0 0 1.4rem;
    max-width: 52ch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}

:is(body.events-page, body.service-page) .split-masthead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.4rem;
}

/* --------------------------------------------------------------------------
   SERVICE PAGES (body.service-page + modifiers .private-page, .wedding-page,
   .corporate-page, .rental-page) — one shared recipe per
   System/site-revamp-plan.md section 7: re-inked image masthead, floor-tape
   benefit cards with brass numerals, a count-in process, a student quote,
   an inquiry band, and the shared .sched-faq skin (selector group above).
   -------------------------------------------------------------------------- */

body.service-page .hero-bg-img {
    filter: saturate(1.18) contrast(1.09) brightness(0.8) sepia(0.16);
}

body.service-page .hero-overlay {
    background: linear-gradient(180deg, rgba(6, 26, 23, 0.5) 0%, rgba(6, 26, 23, 0.72) 65%, var(--bg-main) 100%);
}

body.service-page .hero-badge-text {
    color: var(--accent-bronze);
    letter-spacing: 0.16em;
}

body.service-page .hero-badge-line {
    background: var(--accent-bronze);
}

body.service-page .service-hero__title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.6rem, 5.5vw, 4.6rem);
    line-height: 1.08;
    text-transform: none;
    color: var(--title-cream);
}

body.service-page .service-hero__title .title-accent {
    font-style: italic;
    background: linear-gradient(100deg, #8B5CF7 0%, #5B7CFF 46%, #9FA8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8B5CF7;
}


/* ---- Private coaching advantage: one connected editorial journey ---- */

body.private-page .private-advantage {
    position: relative;
    overflow: clip;
    padding: clamp(4rem, 8vw, 7rem) 20px;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    background: var(--bg-secondary);
}

body.private-page .private-advantage__layout {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(3rem, 7vw, 5.5rem);
    max-width: 1120px;
}

body.private-page .private-advantage__intro {
    max-width: 34rem;
}

body.private-page .private-advantage__kicker,
body.private-page .private-advantage__outcome {
    margin: 0;
    color: var(--accent-bronze);
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

body.private-page .private-advantage__kicker {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

body.private-page .private-advantage__kicker::before {
    content: '';
    width: 2.8rem;
    height: 1px;
    flex: 0 0 auto;
    background: var(--accent-gold);
}

body.private-page .private-advantage__title {
    margin: 0;
    color: var(--title-cream);
    font-family: var(--font-heading);
    font-size: clamp(2.65rem, 7vw, 5.3rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.035em;
}

body.private-page .private-advantage__title em {
    display: inline-block;
    padding-right: 0.08em;
    color: var(--accent-start);
    font-weight: 600;
}

body.private-page .private-advantage__lead {
    max-width: 31rem;
    margin: 1.5rem 0 0;
    color: var(--text-muted);
    font-size: clamp(1rem, 2vw, 1.16rem);
    line-height: 1.7;
}

body.private-page .private-advantage__rhythm {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.3rem;
    margin: 2rem 0 0;
    padding: 1.05rem 0 0;
    border-top: 1px solid var(--glass-border);
    color: var(--accent-bronze-soft);
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.private-page .private-advantage__rhythm span {
    display: inline-flex;
    align-items: center;
    gap: 1.3rem;
}

body.private-page .private-advantage__rhythm span:not(:last-child)::after {
    content: '→';
    color: var(--accent-start);
}

body.private-page .private-advantage__journey {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.private-page .private-advantage__journey::before {
    content: '';
    position: absolute;
    top: 1.9rem;
    bottom: 1.9rem;
    left: 1.9rem;
    width: 1px;
    background: var(--glass-border);
}

body.private-page .private-advantage__step {
    position: relative;
    display: grid;
    grid-template-columns: 3.8rem minmax(0, 1fr);
    gap: clamp(1.15rem, 4vw, 2.2rem);
    padding: 0 0 clamp(2.4rem, 7vw, 3.8rem);
}

body.private-page .private-advantage__step:last-child {
    padding-bottom: 0;
}

body.private-page .private-advantage__number {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    align-self: start;
    width: 3.8rem;
    aspect-ratio: 1;
    border: 1px solid var(--accent-bronze-muted);
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--accent-bronze-soft);
    font-family: 'Teko', sans-serif;
    font-size: 1.65rem;
    line-height: 1;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body.private-page .private-advantage__content {
    padding: 0.15rem 0 clamp(2rem, 5vw, 3rem);
    border-bottom: 1px solid var(--glass-border);
}

body.private-page .private-advantage__step:last-child .private-advantage__content {
    padding-bottom: 0;
    border-bottom: 0;
}

body.private-page .private-advantage__content h3 {
    margin: 0.4rem 0 0.8rem;
    color: var(--title-cream);
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.45rem);
    font-weight: 600;
    line-height: 1.05;
}

body.private-page .private-advantage__content > p:last-child {
    max-width: 42rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.68;
}


body.private-page .private-advantage__step:hover .private-advantage__number,
body.private-page .private-advantage__step:focus-within .private-advantage__number {
    border-color: var(--accent-start);
    background: var(--bg-elevated);
    color: var(--accent-start);
}

@media (min-width: 960px) {
    body.private-page .private-advantage__layout {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: start;
    }

    body.private-page .private-advantage__intro {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
    }

    body.private-page .private-advantage__step {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    body.private-page .private-advantage__journey::before {
        left: 2.25rem;
    }

    body.private-page .private-advantage__number {
        width: 4.5rem;
        font-size: 1.9rem;
    }
}

@media (max-width: 430px) {
    body.private-page .private-advantage__rhythm {
        display: grid;
        gap: 0.55rem;
    }

    body.private-page .private-advantage__rhythm span {
        justify-content: space-between;
    }

    body.private-page .private-advantage__rhythm span:last-child {
        justify-content: flex-start;
    }
}

/* ---- Benefit / format cards ---- */


body.service-page .service-num {
    display: block;
    font-family: 'Teko', sans-serif;
    font-size: 2.1rem;
    line-height: 1;
    color: var(--accent-bronze);
    margin-bottom: 1rem;
}


body.service-page .section-subtitle {
    color: var(--text-muted);
}

/* ---- Count-in process ---- */

body.service-page .service-steps {
    padding: 3rem 20px;
}

body.service-page .service-steps .section-title-modern {
    text-align: center;
    margin-bottom: 2.2rem;
    overflow: visible;
}

body.service-page .service-steps .section-title-modern .title-accent {
    display: inline-block;
    padding-right: 0.14em;
    vertical-align: bottom;
}

body.service-page .service-steps__student-note {
    max-width: 52rem;
    margin: -0.7rem auto 1.7rem;
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.6;
    text-align: center;
}

body.service-page .service-steps__student-note a {
    color: var(--accent-bronze-soft);
    font-weight: 700;
    text-decoration-color: var(--accent-start);
    text-underline-offset: 0.2em;
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

body.service-page .service-steps__student-note a:hover,
body.service-page .service-steps__student-note a:focus-visible {
    color: var(--accent-start);
    text-decoration-color: var(--accent-bronze-soft);
}

body.service-page .service-steps__student-note a:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

/* The steps read as one phrase, not three detached cards: a brass rail
   runs from marker to marker and each arrowhead hands the eye to the
   next step, the way a lead hands a follow into the next move. */
body.service-page .service-steps__list {
    --flow-gap: 1.5rem;
    --flow-marker: 3rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--flow-gap);
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

body.service-page .service-steps__item {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

body.service-page .service-steps__marker {
    display: flex;
    align-items: center;
    margin-bottom: 1.15rem;
}

body.service-page .service-steps__item .service-num {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--flow-marker);
    height: var(--flow-marker);
    margin: 0;
    border: 1px solid var(--accent-bronze-muted);
    border-radius: 50%;
    background: var(--glass-bg);
    font-size: 1.55rem;
    line-height: 1;
}

/* The last marker is filled: the phrase has arrived somewhere. */
body.service-page .service-steps__item:last-child .service-num {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent-bronze-soft), var(--accent-gold));
    color: var(--glass-bg);
}

body.service-page .service-steps__link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    margin-left: 0.85rem;
    margin-right: calc(var(--flow-gap) * -1);
}

body.service-page .service-steps__line {
    flex: 1 1 auto;
    min-width: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(136, 144, 232, 0.14), rgba(159, 168, 255, 0.62));
    transform-origin: left center;
}

body.service-page .service-steps__arrow {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: -2px;
    border-top: 1px solid rgba(159, 168, 255, 0.72);
    border-right: 1px solid rgba(159, 168, 255, 0.72);
    transform: rotate(45deg);
}

/* Armed by script.js only while the section is still below the fold, so
   the resting state stays fully visible without JavaScript. */
body.service-page .service-steps__list[data-flow-armed] .service-steps__marker,
body.service-page .service-steps__list[data-flow-armed] .service-steps__body {
    opacity: 0;
    transform: translateY(14px);
}

body.service-page .service-steps__list[data-flow-armed] .service-steps__line {
    transform: scaleX(0);
}

body.service-page .service-steps__list[data-flow-armed] .service-steps__arrow {
    opacity: 0;
}

@media (max-width: 768px) {
    /* Stacked: the rail turns vertical and the arrowheads point down. */
    body.service-page .service-steps__list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.service-page .service-steps__item {
        display: grid;
        grid-template-columns: var(--flow-marker) 1fr;
        column-gap: 1.05rem;
    }

    body.service-page .service-steps__item:not(:last-child) {
        padding-bottom: 1.7rem;
    }

    body.service-page .service-steps__marker {
        flex-direction: column;
        align-self: stretch;
        margin-bottom: 0;
    }

    body.service-page .service-steps__link {
        flex-direction: column;
        width: 100%;
        margin: 0.7rem 0 0;
    }

    body.service-page .service-steps__line {
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, rgba(136, 144, 232, 0.14), rgba(159, 168, 255, 0.62));
        transform-origin: top center;
    }

    body.service-page .service-steps__arrow {
        margin: -2px 0 0;
        transform: rotate(135deg);
    }

    body.service-page .service-steps__list[data-flow-armed] .service-steps__line {
        transform: scaleY(0);
    }
}

body.service-page .service-steps__item strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--title-cream);
    margin-bottom: 0.4rem;
}

body.service-page .service-steps__item p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

body.service-page .service-steps__item p a {
    color: var(--accent-start);
    font-weight: 600;
    text-decoration-color: var(--accent-bronze-muted);
    text-underline-offset: 0.18em;
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

body.service-page .service-steps__item p a:hover,
body.service-page .service-steps__item p a:focus-visible {
    color: var(--accent-bronze-soft);
    text-decoration-color: var(--accent-start);
}

body.service-page .service-steps__item p a:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

/* ---- Student quote ---- */

body.service-page .service-quote {
    padding: 2.5rem 20px;
    text-align: center;
}

body.service-page .service-quote__text {
    max-width: 720px;
    margin: 0 auto 0.8rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.25rem, 2.6vw, 1.7rem);
    line-height: 1.45;
    color: var(--title-cream);
    border: 0;
    padding: 0;
}

body.service-page .service-quote__attribution {
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* ---- Inquiry band ---- */

body.service-page .service-inquiry {
    padding: 3rem 20px;
    text-align: center;
    background: var(--bg-secondary);
    border-top: 1px solid rgba(159, 168, 255, 0.16);
    border-bottom: 1px solid rgba(159, 168, 255, 0.16);
}

body.service-page .service-inquiry__title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--title-cream);
    margin-bottom: 0.6rem;
}

body.service-page .service-inquiry__copy {
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto 1.5rem;
}

body.service-page .service-inquiry__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    border-radius: var(--cta-radius);
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--cta-ink);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-position 0.35s ease, box-shadow 0.3s ease;
}

body.service-page .service-inquiry__cta:hover,
body.service-page .service-inquiry__cta:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 10px 26px rgba(139, 92, 247, 0.22);
    color: var(--cta-ink);
}

body.service-page .service-faq {
    padding-top: 3rem;
    padding-bottom: 4.5rem;
}

/* ---- Pricing / package card (wedding, rental) ---- */

body.service-page .service-price-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--glass-bg);
    border: 1px solid rgba(159, 168, 255, 0.3);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
}

body.service-page .service-price-card::before,
body.service-page .service-price-card::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
}

body.service-page .service-price-card::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.service-page .service-price-card::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.service-page .service-price-card__price {
    font-family: 'Teko', sans-serif;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--accent-bronze);
    display: block;
    margin-bottom: 0.3rem;
}

body.service-page .service-price-card__label {
    color: var(--title-cream);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    display: block;
    margin-bottom: 1.1rem;
}

body.service-page .service-price-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
}

body.service-page .service-price-card__list li {
    color: var(--text-main);
    padding: 0.45rem 0 0.45rem 1.6rem;
    position: relative;
    border-bottom: 1px solid rgba(159, 168, 255, 0.14);
}

body.service-page .service-price-card__list li:last-child {
    border-bottom: none;
}

body.service-page .service-price-card__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-bronze);
}

body.service-page .service-price-card__note {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0.6rem 0 0;
}

body.service-page .service-badge-callout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: rgba(159, 168, 255, 0.12);
    border: 1px solid rgba(159, 168, 255, 0.4);
    color: var(--accent-bronze-soft);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ---- Wedding page extras ---- */

body.wedding-page .wedding-package {
    padding: 3rem 20px;
}

body.wedding-page .wedding-package .section-title-modern {
    text-align: center;
    margin-bottom: 2rem;
}

body.wedding-page .value-title {
    color: var(--title-cream);
}

body.wedding-page .value-number {
    font-family: 'Teko', sans-serif;
    color: var(--accent-bronze);
}

body.wedding-page .value-desc {
    color: var(--text-muted);
}

body.wedding-page .gallery-col .gallery-item {
    transform: none !important;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    overflow: hidden;
}

body.wedding-page .gallery-col .gallery-item img {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16) !important;
    width: 100%;
    height: auto;
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    body.wedding-page .gallery-col .gallery-item img {
        transition: filter 0.5s ease;
    }
}

body.wedding-page .gallery-col .gallery-item:hover img,
body.wedding-page .gallery-col .gallery-item:focus-within img {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16) !important;
}

/* ---- Corporate page: bento layout ported from the deleted inline block ---- */

body.corporate-page .section-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 20px 3rem;
}

body.corporate-page .bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

@media (min-width: 800px) {
    body.corporate-page .bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    body.corporate-page .bento-span-2 {
        grid-column: span 2;
    }
}

body.corporate-page .bento-card {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    box-shadow: var(--shadow-soft);
}

body.corporate-page .bento-card::before,
body.corporate-page .bento-card::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.corporate-page .bento-card::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.corporate-page .bento-card::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.corporate-page .bento-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.18) contrast(1.09) brightness(0.6) sepia(0.16);
}

body.corporate-page .bento-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.6rem;
    width: 100%;
}

body.corporate-page .bento-card h2 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--title-cream);
    margin: 0 0 0.3rem;
}

body.corporate-page .bento-card p {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 0.6rem;
}

body.corporate-page .bento-span-2 p,
body.corporate-page .bento-span-2 ul {
    color: var(--text-main) !important;
}

body.corporate-page .bento-card ul li {
    padding: 0.15rem 0;
}

body.corporate-page .bento-card .service-num {
    margin-bottom: 0.4rem;
}

body.corporate-page .service-inquiry__copy a {
    color: var(--accent-start);
}

/* ---- Rental page: layout ported from the deleted inline blocks + island ---- */

body.rental-page .rental-main-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: start;
}

@media (max-width: 900px) {
    body.rental-page .rental-main-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

}

body.rental-page .gallery-item-wrapper img {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

@media (prefers-reduced-motion: no-preference) {
    body.rental-page .gallery-item-wrapper img {
        transition: filter 0.5s ease !important;
    }
}

body.rental-page .gallery-item-wrapper:hover img,
body.rental-page .gallery-item-wrapper:focus-within img {
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

/* Champagne inquiry island: the one light block on the page */
body.rental-page .rental-inquiry-box {
    background: #E8E9F8;
    border: 1px solid rgba(124, 92, 232, 0.25);
    border-radius: 18px;
    padding: 2.5rem;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

body.rental-page .rental-inquiry-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--grad);
}

@media (max-width: 600px) {
    body.rental-page .rental-inquiry-box {
        padding: 1.5rem;
    }
}

body.rental-page .rental-inquiry-box .section-title-modern {
    color: #16163A;
}

body.rental-page .rental-inquiry-box p {
    color: #16163A !important;
}

body.rental-page .rental-inquiry-box a {
    color: #5F3DC4 !important;
}

body.rental-page .rental-inquiry-box .form-input-modern,
body.rental-page .rental-inquiry-box .form-textarea-modern,
body.rental-page .rental-inquiry-box select.form-input-modern {
    background: #FBFBFE;
    border: 1px solid #B9C0F0;
    /* style.css forces "color: white !important" on these inputs (old dark
       theme); the champagne island needs ink text, so the !important stays */
    color: #12122E !important;
}

body.rental-page .rental-inquiry-box .form-input-modern::placeholder,
body.rental-page .rental-inquiry-box .form-textarea-modern::placeholder {
    color: #8E93B8;
}

body.rental-page .rental-inquiry-box .form-input-modern:focus,
body.rental-page .rental-inquiry-box .form-textarea-modern:focus {
    outline: 2px solid #7C5CE8;
    outline-offset: 1px;
    border-color: #7C5CE8;
}

body.rental-page .rental-inquiry-box label {
    color: #5A4B38 !important;
}

body.rental-page .rental-inquiry-box p strong {
    color: #5F3DC4;
}

/* Floated state: style.css paints a dark chip (#0f0816) behind floated labels
   to mask the input border on dark pages — on the champagne island the chip
   must be champagne. */
body.rental-page .rental-inquiry-box .form-input-modern:focus ~ label,
body.rental-page .rental-inquiry-box .form-input-modern:not(:placeholder-shown) ~ label,
body.rental-page .rental-inquiry-box .form-textarea-modern:focus ~ label,
body.rental-page .rental-inquiry-box .form-textarea-modern:not(:placeholder-shown) ~ label {
    background: #E8E9F8;
    color: #5F3DC4 !important;
}

body.rental-page .rental-inquiry-box select.form-input-modern option {
    color: #12122E;
    background: #FBFBFE;
}

body.rental-page .rental-inquiry-box select.form-input-modern {
    color-scheme: light;
    -webkit-text-fill-color: #12122E;
    cursor: pointer;
}

body.rental-page .rental-inquiry-box .floating-label select.form-input-modern ~ label {
    top: -0.7rem;
    left: 0.75rem;
    z-index: 1;
    padding: 0 0.25rem;
    background: #E8E9F8;
    color: #5F3DC4 !important;
    font-size: 0.75rem;
    font-weight: 700;
}

body.rental-page .rental-inquiry-box button[type="submit"],
body.rental-page .rental-inquiry-box .btn-hero-primary {
    background: var(--cta-submit-bg);
    color: var(--cta-submit-text);
    border: none;
}

body.rental-page .rental-inquiry-box button[type="submit"]:hover,
body.rental-page .rental-inquiry-box .btn-hero-primary:hover {
    background: var(--cta-submit-bg-hover);
    color: var(--cta-submit-text);
}

/* Spec sheet: the room's numbers as a tech-rider ledger */
body.rental-page .rental-specsheet-section {
    padding: 1rem 0 1.5rem;
}

body.rental-page .rental-specsheet-section .section-title-modern,
body.rental-page .rental-stages-section .section-title-modern {
    text-align: center;
    margin-bottom: 2.5rem;
}

body.rental-page .rental-specsheet {
    max-width: 720px;
    margin: 0 auto;
}

body.rental-page .rental-specsheet__row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem 1.2rem;
    align-items: baseline;
    padding: 1rem 0;
    border-top: 1px solid rgba(159, 168, 255, 0.2);
}

body.rental-page .rental-specsheet__row:last-child {
    border-bottom: 1px solid rgba(159, 168, 255, 0.2);
}

body.rental-page .rental-specsheet__no {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    color: #9FA8FF;
}

body.rental-page .rental-specsheet dt {
    color: var(--title-cream);
    font-weight: 600;
}

body.rental-page .rental-specsheet dd {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    text-align: right;
}

@media (max-width: 640px) {
    body.rental-page .rental-specsheet__row {
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }

    body.rental-page .rental-specsheet dd {
        grid-column: 2;
        text-align: left;
    }
}

/* One space, many stages: three editorial scenario columns */
body.rental-page .rental-stages-section {
    padding-bottom: 4rem;
}

body.rental-page .rental-stages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.2rem;
}

/* Separator bars between the three stage columns only — the first column
   keeps a clean left edge. */
body.rental-page .rental-stage + .rental-stage {
    border-left: 2px solid rgba(159, 168, 255, 0.45);
    padding-left: 1.3rem;
}

body.rental-page .rental-stage__overline {
    display: block;
    font-family: 'Teko', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9FA8FF;
}

body.rental-page .rental-stage__title {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.45rem;
    color: var(--title-cream);
    margin: 0.35rem 0 0.6rem;
}

body.rental-page .rental-stage__copy {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 0.9rem;
}

body.rental-page .rental-stage__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.55rem;
    row-gap: 0.3rem;
    font-size: 0.88rem;
    color: var(--text-main);
}

body.rental-page .rental-stage__list li+li::before {
    content: '·';
    color: #9FA8FF;
    margin-right: 0.55rem;
}

body.rental-page .rental-stages__coda {
    max-width: 62ch;
    margin: 2.6rem auto 0;
    text-align: center;
    color: var(--text-muted);
    line-height: 1.7;
}

body.rental-page .rental-stages__coda a {
    color: var(--accent-start);
}

@media (max-width: 900px) {
    body.rental-page .rental-stages {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.8rem;
    }

    /* Stacked single column: side bars would read as stray rules, drop them. */
    body.rental-page .rental-stage + .rental-stage {
        border-left: 0;
        padding-left: 0;
    }
}

body.rental-page .rental-rates {
    padding: 1rem 20px 3rem;
}

body.rental-page .rental-rates .section-title-modern {
    text-align: center;
    margin-bottom: 2rem;
}

body.rental-page .service-price-card__note a {
    color: var(--accent-start);
}

/* --------------------------------------------------------------------------
   UTILITY PAGES (body.utility-page: .thankyou-page, .error-page)
   Centered petrol cards; the pages' inline <style> blocks were deleted.
   See System/site-revamp-plan.md section 11.
   -------------------------------------------------------------------------- */

body.thankyou-page .thank-you-section,
body.error-page .error-section {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: calc(var(--header-height) + 2rem) 20px 4rem;
}

body.thankyou-page .thank-you-content,
body.error-page .error-content {
    max-width: 640px;
    width: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 3rem 2.4rem;
    box-shadow: var(--shadow-soft);
    position: relative;
}

body.thankyou-page .thank-you-content::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    border: 2px solid var(--accent-bronze);
    color: var(--accent-bronze);
    font-size: 1.6rem;
}

body.thankyou-page .thank-you-title,
body.error-page .error-subtitle {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 2.2rem;
    color: var(--title-cream);
    margin-bottom: 1rem;
}

body.thankyou-page .thank-you-message,
body.error-page .error-message {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Trial thank-you: guide mini cards */
body.thankyou-page .guides-preview-section {
    margin-top: 2.5rem;
    width: 100%;
    max-width: 980px;
}

body.thankyou-page .guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
}

body.thankyou-page .guide-card-mini {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: left;
    text-decoration: none;
    transition: border-color 0.3s ease;
}

body.thankyou-page .guide-card-mini::before,
body.thankyou-page .guide-card-mini::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
}

body.thankyou-page .guide-card-mini::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.thankyou-page .guide-card-mini::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.thankyou-page .guide-card-mini:hover {
    border-color: rgba(159, 168, 255, 0.55);
}

body.thankyou-page .guide-card-mini:hover::before,
body.thankyou-page .guide-card-mini:hover::after {
    border-color: var(--accent-start);
}

body.thankyou-page .guide-icon-mini--num {
    font-family: 'Teko', sans-serif;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--accent-bronze);
}

body.thankyou-page .guide-name-mini {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--title-cream);
}

body.thankyou-page .guide-desc {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

body.thankyou-page .guide-read-more {
    color: var(--accent-start);
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.4rem;
}

/* 404 */
body.error-page .error-title {
    font-family: 'Teko', sans-serif;
    font-size: clamp(5rem, 16vw, 8rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--accent-bronze);
    margin-bottom: 0.4rem;
}

body.error-page .error-exits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    margin-top: 1.8rem;
}

body.error-page .btn-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    border-radius: var(--cta-radius);
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--cta-ink);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    text-decoration: none;
    transition: background-position 0.35s ease, box-shadow 0.3s ease;
    border: none;
}

body.error-page .btn-home:hover,
body.error-page .btn-home:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 10px 26px rgba(139, 92, 247, 0.22);
    color: var(--cta-ink);
    transform: none;
}

body.error-page .error-exit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    border-radius: var(--cta-radius);
    border: 1px solid rgba(159, 168, 255, 0.45);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body.error-page .error-exit-link:hover,
body.error-page .error-exit-link:focus-visible {
    background: rgba(159, 168, 255, 0.1);
    border-color: rgba(159, 168, 255, 0.7);
    color: var(--title-cream);
}

/* --------------------------------------------------------------------------
   LEGAL PAGES (body.legal-page) — typography-only reskin
   Serif champagne headings, sage body, coral links, 760px column.
   See System/site-revamp-plan.md section 11.
   -------------------------------------------------------------------------- */

body.legal-page .legal-content {
    max-width: 760px;
    margin: 0 auto;
    padding: calc(var(--header-height) + 2.5rem) 20px 4rem;
}

body.legal-page .legal-kicker {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-bronze);
    margin-bottom: 0.6rem;
}

body.legal-page .legal-content h1 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    color: var(--title-cream);
    margin-bottom: 1.4rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(159, 168, 255, 0.25);
}

body.legal-page .legal-content h2 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.45rem;
    color: var(--title-cream);
    margin: 2.2rem 0 0.7rem;
}


body.legal-page .legal-content p,
body.legal-page .legal-content li {
    color: var(--text-muted);
    line-height: 1.75;
}

body.legal-page .legal-content li::marker {
    color: var(--accent-bronze);
}

body.legal-page .legal-content a {
    color: var(--accent-start) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(159, 168, 255, 0.45);
}

body.legal-page .legal-content a:hover,
body.legal-page .legal-content a:focus-visible {
    color: var(--accent-end) !important;
}

body.legal-page .legal-content strong {
    color: var(--text-main);
}

/* --------------------------------------------------------------------------
   MILANO CONGRESS PAGE (body.congress-page, on top of events-page chrome)
   Layout ported from the page's deleted inline <style>, re-inked: taped
   flyer poster, brass call-sheet detail ledger, quiet more-events card.
   See System/site-revamp-plan.md section 9.
   -------------------------------------------------------------------------- */

body.congress-page .event-hero {
    padding: calc(var(--header-height) + 2.4rem) 20px 2.6rem;
    text-align: center;
}

body.congress-page .page-title {
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: none;
    color: var(--title-cream);
}

body.congress-page .hero-desc-border {
    border: none;
    padding: 0;
    color: var(--text-muted);
}

body.congress-page .event-container {
    max-width: 1000px;
    margin: 0 auto 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 900px) {
    body.congress-page .event-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

body.congress-page .event-image-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--glass-border);
}

body.congress-page .event-image-wrapper::before,
body.congress-page .event-image-wrapper::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    pointer-events: none;
    z-index: 3;
}

body.congress-page .event-image-wrapper::before {
    top: 0.55rem;
    left: 0.55rem;
    border-top: 2px solid rgba(159, 168, 255, 0.55);
    border-left: 2px solid rgba(159, 168, 255, 0.55);
}

body.congress-page .event-image-wrapper::after {
    right: 0.55rem;
    bottom: 0.55rem;
    border-right: 2px solid rgba(159, 168, 255, 0.55);
    border-bottom: 2px solid rgba(159, 168, 255, 0.55);
}

body.congress-page .event-image {
    width: 100%;
    height: auto;
    display: block;
}

body.congress-page .event-content {
    text-align: left;
}

body.congress-page .event-tagline {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-bronze);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    display: block;
}

body.congress-page .event-tagline--featured {
    max-width: 1000px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    padding: 0 0.5rem;
    text-align: center;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    line-height: 1.45;
}

body.congress-page .event-tagline__cta {
    color: var(--accent-start);
    white-space: nowrap;
}

body.congress-page .event-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--title-cream);
    background: none;
    -webkit-text-fill-color: currentcolor;
}

body.congress-page .event-description {
    color: var(--text-main);
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

body.congress-page .event-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
}

body.congress-page .detail-item {
    background: var(--glass-bg);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid rgba(159, 168, 255, 0.2);
}

body.congress-page .detail-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

body.congress-page .detail-value {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    color: var(--title-cream);
    font-size: 1.35rem;
}

body.congress-page .cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

body.congress-page .other-events-section {
    padding: 4rem 0;
    border-top: 1px solid rgba(159, 168, 255, 0.2);
    margin-top: 4rem;
}

body.congress-page .other-events-section h3 {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--title-cream);
}

body.congress-page .other-event-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
    color: var(--text-main);
}

body.congress-page .other-event-card:hover,
body.congress-page .other-event-card:focus-visible {
    background: #1A2360;
    border-color: rgba(159, 168, 255, 0.55);
    transform: none;
}

body.congress-page .other-event-info h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--title-cream);
    margin-bottom: 0.4rem;
}

body.congress-page .other-event-info p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   ETIQUETTE PAGE (body.etiquette-page) — floor-tape rule cards
   Layout ported from the deleted inline <style>; emoji icons became brass
   Teko numerals (01–05 per group); hover slide removed (movement ban).
   See System/site-revamp-plan.md section 8.
   -------------------------------------------------------------------------- */

body.etiquette-page .etiquette-hero {
    padding: calc(var(--header-height) + 2.4rem) 20px 2.6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

body.etiquette-page .etiquette-hero .hero-bg-img {
    filter: saturate(1.18) contrast(1.09) brightness(0.8) sepia(0.16);
    opacity: 0.55;
}

body.etiquette-page .etiquette-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(6, 26, 23, 0.5) 0%, rgba(6, 26, 23, 0.75) 65%, var(--bg-main) 100%);
}

body.etiquette-page .page-title {
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: none;
    color: var(--title-cream);
}

body.etiquette-page .hero-badge-text {
    color: var(--accent-bronze);
    letter-spacing: 0.16em;
}

body.etiquette-page .hero-badge-line {
    background: var(--accent-bronze);
}

body.etiquette-page .hero-desc-border {
    border: none;
    padding: 0;
    color: var(--text-main);
}

body.etiquette-page .hero-desc-border a {
    color: var(--accent-start);
}

body.etiquette-page .etiquette-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 20px;
}

body.etiquette-page .guide-section {
    margin-bottom: 3rem;
}

body.etiquette-page .guide-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.75rem;
    color: var(--title-cream);
    margin-bottom: 1rem;
    border-left: 3px solid var(--accent-bronze);
    padding-left: 1rem;
}

body.etiquette-page .guide-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

body.etiquette-page .guide-card {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    transition: border-color 0.3s ease;
    display: flex;
    align-items: flex-start;
    text-align: left;
}

body.etiquette-page .guide-card:hover {
    transform: none;
    border-color: rgba(159, 168, 255, 0.55);
    background: var(--glass-bg);
}

body.etiquette-page .guide-icon--num {
    font-family: 'Teko', sans-serif;
    font-size: 1.7rem;
    margin-right: 1.5rem;
    color: var(--accent-bronze);
    line-height: 1;
    margin-top: 0.25rem;
    min-width: 40px;
}

body.etiquette-page .guide-content {
    flex: 1;
}

body.etiquette-page .guide-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--title-cream);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

body.etiquette-page .guide-card p {
    color: var(--text-muted);
    line-height: 1.5;
    font-size: 0.95rem;
    margin: 0;
}

body.etiquette-page .etiquette-bridge {
    padding: 1rem 20px 4.5rem;
    text-align: center;
}

body.etiquette-page .etiquette-bridge__copy {
    color: var(--text-muted);
    margin-bottom: 1.2rem;
}

body.etiquette-page .etiquette-bridge__copy a {
    color: var(--accent-start);
}

body.etiquette-page .etiquette-bridge__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    border-radius: var(--cta-radius);
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--cta-ink);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    text-decoration: none;
    transition: background-position 0.35s ease, box-shadow 0.3s ease;
}

body.etiquette-page .etiquette-bridge__cta:hover,
body.etiquette-page .etiquette-bridge__cta:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 10px 26px rgba(139, 92, 247, 0.22);
    color: var(--cta-ink);
}

/* --------------------------------------------------------------------------
   GUIDE-LITE PAGES (body.guide-lite-page: guide-bachata-sensual,
   guide-social-dancing) — mini-editorials on the old course template DOM,
   re-inked: warm-graded masthead, serif chapters with brass count-in numerals,
   reassurance/highlight panel, funnel bridge into the Foundation course.
   See System/site-revamp-plan.md section 8.
   -------------------------------------------------------------------------- */

body.guide-lite-page .course-hero .hero-bg-img {
    filter: saturate(1.18) contrast(1.09) brightness(0.8) sepia(0.16);
}

body.guide-lite-page .course-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(6, 26, 23, 0.5) 0%, rgba(6, 26, 23, 0.75) 65%, var(--bg-main) 100%);
}

body.guide-lite-page .page-title {
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: none;
    color: var(--title-cream);
}

body.guide-lite-page .hero-desc-border {
    border: none;
    padding: 0;
    color: var(--text-main);
}

body.guide-lite-page .course-content-section h2,
body.guide-lite-page .course-info-title {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--title-cream);
}

body.guide-lite-page .guide-chapter-num {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    color: var(--accent-bronze);
    margin-right: 0.7rem;
    vertical-align: baseline;
}

body.guide-lite-page .course-content-section p,
body.guide-lite-page .course-content-section li {
    color: var(--text-muted);
}

body.guide-lite-page .course-content-section a {
    color: var(--accent-start);
}

body.guide-lite-page .course-content-section strong {
    color: var(--text-main);
}

body.guide-lite-page .guide-highlight-box {
    background: var(--glass-bg);
    border: 1px solid rgba(159, 168, 255, 0.3);
    border-left: 3px solid var(--accent-bronze);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}

body.guide-lite-page .guide-highlight-box li::marker {
    color: var(--accent-bronze);
}

body.guide-lite-page .guide-funnel {
    text-align: center;
    margin-top: 4rem;
    padding: 2rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(159, 168, 255, 0.25);
    border-radius: 16px;
}

body.guide-lite-page .guide-funnel__title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--title-cream);
    margin-bottom: 0.6rem;
}

body.guide-lite-page .guide-funnel__copy {
    color: var(--text-muted);
    margin-bottom: 1.4rem;
}

body.guide-lite-page .guide-funnel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

body.guide-lite-page .guide-funnel__trial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    border-radius: var(--cta-radius);
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--cta-ink);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    text-decoration: none;
    transition: background-position 0.35s ease, box-shadow 0.3s ease;
}

body.guide-lite-page .guide-funnel__trial:hover,
body.guide-lite-page .guide-funnel__trial:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 10px 26px rgba(139, 92, 247, 0.22);
    color: var(--cta-ink);
}

body.guide-lite-page .guide-funnel__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    border-radius: var(--cta-radius);
    border: 1px solid rgba(159, 168, 255, 0.45);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body.guide-lite-page .guide-funnel__link:hover,
body.guide-lite-page .guide-funnel__link:focus-visible {
    background: rgba(159, 168, 255, 0.1);
    border-color: rgba(159, 168, 255, 0.7);
    color: var(--title-cream);
}

body.guide-lite-page .guide-crossband {
    padding: 1.5rem 20px 4.5rem;
    text-align: center;
}

body.guide-lite-page .guide-crossband__copy {
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 1.3rem;
}

body.guide-lite-page .guide-crossband__copy a {
    color: var(--accent-start);
}

/* --------------------------------------------------------------------------
   EDUCATION PAGE (body.education-page) — the knowledge hub, "The Count"
   Bachata is danced 1-2-3-4 with the accent on the tap; the four sections
   are the four counts. Chapter numerals, a sticky brass section nav, a
   count rail, an era ledger, a rhythm map, and a term grid. The page is
   the internal-linking hub of the topical cluster. Static layout is fully
   readable without JavaScript; script.js only adds motion.
   -------------------------------------------------------------------------- */

body.education-page .education-hero {
    padding: calc(var(--header-height) + clamp(3rem, 8vw, 5.2rem)) 20px clamp(2.6rem, 6vw, 4.2rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

body.education-page .education-hero .hero-bg-img {
    filter: saturate(1.18) contrast(1.09) brightness(0.8) sepia(0.16);
    opacity: 0.55;
}

body.education-page .education-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(6, 26, 23, 0.5) 0%, rgba(6, 26, 23, 0.75) 65%, var(--bg-main) 100%);
}

body.education-page .edu-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

body.education-page .hero-content-z {
    z-index: 3;
}

body.education-page .page-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.6rem, 6vw, 4rem);
    text-transform: none;
    color: var(--title-cream);
}

body.education-page .hero-badge {
    justify-content: center;
    margin-bottom: 1.1rem;
}

body.education-page .hero-badge-text {
    color: var(--accent-bronze);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
}

body.education-page .hero-badge-line {
    background: var(--accent-bronze);
}

body.education-page .edu-hero__desc {
    color: var(--text-muted);
    max-width: 46ch;
    margin: 0.9rem auto 0;
    font-size: clamp(1rem, 2.2vw, 1.15rem);
}

body.education-page .edu-hero__counts {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: clamp(1.3rem, 4vw, 2.2rem);
    margin: clamp(1.4rem, 3.5vw, 2.2rem) 0 0;
}

body.education-page .edu-hero__count {
    font-family: 'Teko', sans-serif;
    font-size: 1.35rem;
    line-height: 1;
    color: rgba(159, 168, 255, 0.62);
}

body.education-page .edu-hero__count--tap {
    color: var(--accent-start);
    font-size: 1.6rem;
}

/* --- Sticky section nav ------------------------------------------------- */

body.education-page .edu-nav {
    position: sticky;
    top: var(--header-height);
    z-index: 40;
    background: rgba(6, 26, 23, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(159, 168, 255, 0.14);
    border-bottom: 1px solid rgba(159, 168, 255, 0.14);
}

body.education-page .edu-nav__inner {
    display: flex;
    gap: clamp(1.2rem, 4vw, 2.6rem);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.education-page .edu-nav__inner::-webkit-scrollbar {
    display: none;
}

body.education-page .edu-nav__link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.85rem 0 0.72rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

body.education-page .edu-nav__count {
    font-family: 'Teko', sans-serif;
    font-size: 1.05rem;
    line-height: 1;
    color: rgba(159, 168, 255, 0.7);
    transition: color 0.3s ease;
}

body.education-page .edu-nav__link:hover,
body.education-page .edu-nav__link:focus-visible {
    color: var(--title-cream);
    border-bottom-color: rgba(159, 168, 255, 0.45);
}

body.education-page .edu-nav__link.edu-nav__link--active {
    color: var(--title-cream);
    border-bottom-color: var(--accent-bronze);
}

body.education-page .edu-nav__link.edu-nav__link--active .edu-nav__count {
    color: var(--accent-start);
}

/* --- Content rhythm ------------------------------------------------------ */

body.education-page .edu-content {
    padding-top: clamp(1.6rem, 4vw, 2.8rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

body.education-page .edu-section {
    margin: 0 0 clamp(3.4rem, 8vw, 5.6rem);
}

body.education-page .edu-section:last-child {
    margin-bottom: 0;
}

body.education-page .edu-section__head {
    display: flex;
    align-items: baseline;
    gap: clamp(0.8rem, 2vw, 1.2rem);
    margin-bottom: clamp(1.3rem, 3vw, 2rem);
}

body.education-page .edu-section__head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(159, 168, 255, 0.18);
    transform: translateY(-0.4em);
}

body.education-page .edu-section__num {
    font-family: 'Teko', sans-serif;
    font-size: clamp(2.6rem, 6vw, 3.8rem);
    line-height: 0.9;
    color: rgba(159, 168, 255, 0.45);
}

body.education-page .edu-section__title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    color: var(--title-cream);
}

body.education-page .edu-section__subtitle {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.35rem;
    color: var(--text-main);
    margin: clamp(2.2rem, 5vw, 3rem) 0 0.7rem;
}

body.education-page .edu-section p {
    color: var(--text-muted);
    max-width: 72ch;
}

body.education-page .edu-section a {
    color: var(--accent-start);
}

body.education-page .edu-section strong {
    color: var(--text-main);
}

body.education-page .edu-section__lead {
    font-size: 1.02rem;
    margin-bottom: 1.4rem;
}

/* --- 01 History: era ledger ---------------------------------------------- */

body.education-page .edu-timeline {
    position: relative;
    margin-top: 0.4rem;
}

body.education-page .edu-timeline::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.9rem;
    left: calc(4.8rem + 0.8rem);
    width: 1px;
    background: linear-gradient(180deg, rgba(159, 168, 255, 0.55) 0%, rgba(139, 92, 247, 0.35) 100%);
}

body.education-page .edu-era {
    position: relative;
    display: grid;
    grid-template-columns: 4.8rem 1fr;
    column-gap: 1.7rem;
    padding-bottom: clamp(1.5rem, 3.4vw, 2.2rem);
}

body.education-page .edu-era:last-child {
    padding-bottom: 0.4rem;
}

body.education-page .edu-era::before {
    content: "";
    position: absolute;
    left: calc(4.8rem + 0.8rem - 3px);
    top: 0.42rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-bronze);
}

body.education-page .edu-era__year {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    text-align: right;
    color: var(--accent-bronze);
}

body.education-page .edu-era__label {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--text-main);
    margin-bottom: 0.4rem;
}

/* --- Callout -------------------------------------------------------------- */

body.education-page .edu-callout {
    background: var(--glass-bg);
    padding: clamp(1.2rem, 3vw, 1.6rem);
    border-radius: 12px;
    margin: 1.8rem 0 0;
    border: 1px solid rgba(159, 168, 255, 0.25);
    border-left: 3px solid var(--accent-bronze);
}

body.education-page .edu-callout__title {
    color: var(--text-main);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

body.education-page .edu-callout__text {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

body.education-page .edu-callout__text a {
    text-decoration: underline;
}

body.education-page .edu-callout__cta {
    color: var(--accent-start);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease;
}

body.education-page .edu-callout__cta:hover,
body.education-page .edu-callout__cta:focus-visible {
    color: var(--accent-bronze);
}

/* --- 02 Styles: roots-to-evolution grid ----------------------------------- */

body.education-page .edu-axis {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.9rem 0 1.3rem;
}

body.education-page .edu-axis__end {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-bronze);
}

body.education-page .edu-axis__end:last-child {
    color: var(--accent-start);
}

body.education-page .edu-axis__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(159, 168, 255, 0.6) 0%, rgba(139, 92, 247, 0.55) 100%);
}

body.education-page .edu-styles {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.4vw, 1.5rem);
}

@media (min-width: 1024px) {
    body.education-page .edu-styles {
        grid-template-columns: repeat(3, 1fr);
    }
}

body.education-page .edu-style-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: clamp(1.3rem, 3vw, 1.8rem);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.education-page .edu-style-card:hover {
    border-color: rgba(159, 168, 255, 0.4);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

body.education-page .edu-style-card__title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--title-cream);
    margin-bottom: 0.6rem;
}

body.education-page .edu-style-card__lede {
    font-size: 0.95rem;
    margin-bottom: 1.1rem;
}

body.education-page .edu-style-card__specs {
    margin: 0;
}

body.education-page .edu-style-card__spec {
    display: grid;
    grid-template-columns: 6.4rem 1fr;
    gap: 0.8rem;
    padding: 0.62rem 0;
    border-top: 1px solid rgba(159, 168, 255, 0.13);
}

body.education-page .edu-style-card__spec dt {
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent-bronze);
    padding-top: 0.15rem;
}

body.education-page .edu-style-card__spec dd {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
}

/* --- 03 Musicality: the rhythm map ---------------------------------------- */

body.education-page .edu-rhythm {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: clamp(1rem, 2.6vw, 1.7rem);
    margin-top: 1.7rem;
    overflow: hidden;
}

body.education-page .edu-rhythm__head,
body.education-page .edu-rhythm__row {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.55rem;
}

@media (min-width: 720px) {
    body.education-page .edu-rhythm__head,
    body.education-page .edu-rhythm__row {
        grid-template-columns: clamp(180px, 32%, 300px) 1fr;
        column-gap: clamp(0.9rem, 2.4vw, 1.6rem);
        align-items: center;
    }
}

body.education-page .edu-rhythm__corner {
    display: none;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

@media (min-width: 720px) {
    body.education-page .edu-rhythm__corner {
        display: block;
    }
}

body.education-page .edu-rhythm__counts {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.education-page .edu-rhythm__count {
    font-family: 'Teko', sans-serif;
    font-size: 1.1rem;
    line-height: 1;
    text-align: center;
    color: rgba(157, 180, 171, 0.7);
    transition: color 0.15s ease;
}

body.education-page .edu-rhythm__count--tap {
    color: var(--accent-start);
}

body.education-page .edu-rhythm__count.is-count-live {
    color: var(--title-cream);
}

body.education-page .edu-rhythm__head {
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(159, 168, 255, 0.16);
}

body.education-page .edu-rhythm__row {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(159, 168, 255, 0.09);
}

body.education-page .edu-rhythm__row:last-of-type {
    border-bottom: none;
    padding-bottom: 0.2rem;
}

body.education-page .edu-rhythm__name {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--text-main);
}

body.education-page .edu-rhythm__desc {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

body.education-page .edu-rhythm__cells {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.education-page .edu-rhythm__cell {
    height: 0.9rem;
    border-radius: 4px;
    background: rgba(159, 168, 255, 0.07);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

body.education-page .edu-rhythm__cell--hit {
    background: rgba(159, 168, 255, 0.42);
}

body.education-page .edu-rhythm__cell--accent {
    background: rgba(139, 92, 247, 0.55);
}

body.education-page .edu-rhythm__cell.is-count-live {
    background: rgba(159, 168, 255, 0.16);
}

body.education-page .edu-rhythm__cell--hit.is-count-live {
    background: var(--accent-bronze);
    box-shadow: 0 0 10px rgba(159, 168, 255, 0.45);
}

body.education-page .edu-rhythm__cell--accent.is-count-live {
    background: var(--accent-start);
    box-shadow: 0 0 12px rgba(139, 92, 247, 0.55);
}

body.education-page .edu-rhythm__playhead {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
    background: linear-gradient(180deg, rgba(139, 92, 247, 0) 0%, rgba(139, 92, 247, 0.8) 18%, rgba(139, 92, 247, 0.8) 82%, rgba(139, 92, 247, 0) 100%);
}

body.education-page .edu-rhythm--live .edu-rhythm__playhead {
    display: block;
}

body.education-page .edu-rhythm__caption {
    font-size: 0.85rem;
    margin-top: 0.9rem;
}

body.education-page .edu-songmap {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 1.3rem 0 0;
    padding: 0;
}

body.education-page .edu-songmap__part {
    font-family: 'Teko', sans-serif;
    font-size: 0.98rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: center;
    color: var(--title-cream);
    padding: 0.5rem 0.2rem;
    border-radius: 6px;
}

body.education-page .edu-songmap__part--intro,
body.education-page .edu-songmap__part--outro {
    flex: 0 0 9%;
    background: rgba(159, 168, 255, 0.1);
}

body.education-page .edu-songmap__part--intro {
    border-radius: 10px 6px 6px 10px;
}

body.education-page .edu-songmap__part--outro {
    border-radius: 6px 10px 10px 6px;
}

body.education-page .edu-songmap__part--derecho {
    flex: 1 1 22%;
    background: rgba(159, 168, 255, 0.18);
}

body.education-page .edu-songmap__part--majao {
    flex: 1 1 16%;
    background: rgba(159, 168, 255, 0.28);
}

body.education-page .edu-songmap__part--mambo {
    flex: 0 0 14%;
    background: rgba(139, 92, 247, 0.3);
}

@media (max-width: 640px) {
    body.education-page .edu-songmap {
        flex-wrap: wrap;
    }

    body.education-page .edu-songmap__part {
        flex: 1 1 30%;
        min-width: 88px;
        border-radius: 6px;
    }
}

/* --- 04 Glossary: term grid ------------------------------------------------ */

body.education-page .edu-glossary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.9rem;
    margin: 1.5rem 0 0;
}

body.education-page .edu-term {
    background: var(--glass-bg);
    border: 1px solid rgba(159, 168, 255, 0.16);
    border-radius: 12px;
    padding: 1.05rem 1.15rem;
    transition: border-color 0.3s ease;
}

body.education-page .edu-term:hover {
    border-color: rgba(159, 168, 255, 0.38);
}

body.education-page .edu-term__name {
    color: var(--accent-bronze);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

body.education-page .edu-term__def {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- Crosslinks ------------------------------------------------------------ */

body.education-page .edu-crosslink {
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(159, 168, 255, 0.18);
    font-size: 0.95rem;
}

/* --- Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body.education-page .edu-hero__canvas {
        display: none;
    }

    body.education-page .edu-rhythm__playhead {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   REGISTRATION PAGE (body.registration-page) — masthead
   Centered editorial masthead following the blog/guide masthead recipe.
   -------------------------------------------------------------------------- */
body.registration-page .reg-masthead {
    padding: calc(var(--header-height) + clamp(1.6rem, 3.2vw, 2.4rem)) 0 clamp(1.1rem, 2.2vw, 1.6rem);
    text-align: left;
}

body.registration-page .reg-masthead__split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.6rem, 3.5vw, 3rem);
    align-items: stretch;
}

body.registration-page .reg-masthead__ghost {
    position: absolute;
    top: -0.38em;
    left: -0.04em;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(5rem, 11vw, 8.5rem);
    line-height: 1;
    color: rgba(234, 234, 251, 0.06);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

body.registration-page .reg-masthead__copy {
    position: relative;
}

body.registration-page .reg-masthead__media {
    margin: 0;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

body.registration-page .reg-masthead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.18) contrast(1.09) brightness(1.02) sepia(0.16);
}

@media (max-width: 899px) {
    body.registration-page .reg-masthead__split {
        grid-template-columns: minmax(0, 1fr);
    }

    body.registration-page .reg-masthead__ghost {
        display: none;
    }

    body.registration-page .reg-masthead__media {
        aspect-ratio: 16 / 9;
    }
}

body.registration-page .reg-masthead__kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1.1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

body.registration-page .reg-masthead__kicker::before,
body.registration-page .reg-masthead__kicker::after {
    content: '';
    width: 2.4rem;
    height: 2px;
    border-radius: 999px;
    background: var(--accent-gold);
}

body.registration-page .reg-masthead__title {
    margin: 0 auto 1.2rem;
    max-width: 16ch;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 700;
    line-height: 1.06;
    text-transform: none;
    color: var(--title-cream);
}

body.registration-page .reg-masthead__title .title-accent {
    font-style: italic;
    background: linear-gradient(100deg, var(--accent-start) 0%, var(--accent-end) 46%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-start);
}

body.registration-page .reg-masthead__dek {
    margin: 0 auto 1.5rem;
    max-width: 56ch;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-muted);
}

body.registration-page .reg-masthead__dek strong {
    color: var(--text-main);
}

/* Same voice as the dek above it — the discount line is part of the
   pitch, not fine print. */
body.registration-page .reg-masthead__facts {
    margin: 0 0 0.4rem;
    max-width: 56ch;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-muted);
}

body.registration-page .reg-masthead__facts strong {
    color: var(--text-main);
}

body.registration-page .reg-desk {
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ---- Social proof: compact rating bar + review rail ---- */
body.registration-page .reg-proof {
    margin: 1.4rem 0 0;
}

/* The rating reuses the homepage reviews-proof rating figure (same classes,
   same glow), centered above the three-quote rail. */
body.registration-page .reg-proof__figure {
    margin: 0 0 0.9rem;
}

body.registration-page .reg-proof__rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

body.registration-page .reg-proof__quote {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
}

body.registration-page .reg-proof__quote p {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

body.registration-page .reg-proof__quote cite {
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-main);
}

@media (max-width: 600px) {
    body.registration-page .reg-proof__rail {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.4rem;
        scrollbar-width: thin;
    }

    body.registration-page .reg-proof__quote {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}

/* ---- Standalone pass price table ---- */
body.registration-page .reg-rates {
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

body.registration-page .reg-rates__title {
    text-align: center;
    margin-bottom: 1.4rem;
}

body.registration-page .rates-table-wrap {
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

body.registration-page .rates-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

body.registration-page .rates-table th:first-child {
    width: 58%;
}

body.registration-page .rates-table th:nth-child(2) {
    width: 42%;
}

body.registration-page .rates-table thead th {
    text-align: left;
    padding: 0.65rem 1.4rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-start);
    border-bottom: 1px solid var(--glass-border);
}

body.registration-page .rates-table tbody th,
body.registration-page .rates-table tbody td {
    text-align: left;
    padding: 0.55rem 1.4rem;
    border-bottom: 1px solid var(--glass-border);
    vertical-align: middle;
}

body.registration-page .rates-table tbody tr:last-child th,
body.registration-page .rates-table tbody tr:last-child td {
    border-bottom: none;
}

body.registration-page .rates-table__name {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
}

body.registration-page .rates-table__sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

body.registration-page .rates-table__badge {
    display: inline-block;
    margin-left: 0.55rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--accent-start);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

body.registration-page .rates-table__row--featured {
    background: rgba(139, 92, 247, 0.07);
    box-shadow: inset 3px 0 0 var(--accent-start);
}

body.registration-page .rates-table tbody td {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-main);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The block price is the decision number; the per-lesson rate rides
   underneath as a quiet reframing line, never a competing column. */
body.registration-page .rates-table__amount {
    display: block;
}

body.registration-page .rates-table__per {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-muted);
}

body.registration-page .reg-rates__cta {
    text-align: center;
    margin-top: 1.6rem;
}

body.registration-page .reg-rates__cta-note {
    margin: 0.8rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* ---- Compact pass chooser ---- */
body.registration-page .registration-form .form-section-title {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.8rem;
    border: none;
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-main);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.2;
}

body.registration-page .pricing-grid {
    gap: 0.55rem;
    margin-bottom: 1.25rem;
}

body.registration-page .pricing-card {
    min-height: 0;
    padding: 0.7rem 0.85rem;
    border-color: var(--glass-border);
    background: var(--glass-bg);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* (the form's "Most Popular" tag was removed 2026-08-07 — a coral-marked
   card inside a radio group read as pre-selected; the rates table above
   keeps the badge) */

body.registration-page .pricing-header {
    margin-bottom: 0.3rem;
}

body.registration-page .pricing-title {
    font-size: 0.98rem;
}

body.registration-page .pricing-card__sub {
    font-size: 0.7rem;
}

body.registration-page .pricing-card__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    gap: 0.1rem;
}

body.registration-page .pricing-price {
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

body.registration-page .pricing-card__per {
    display: block;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.registration-page .pricing-option input:checked~.pricing-card {
    border-color: var(--text-main);
    background: var(--glass-bg);
    box-shadow: inset 0 0 0 1px var(--text-main), var(--shadow-soft);
}

body.registration-page .pricing-option input:checked~.pricing-card::after {
    content: "✓";
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--text-main);
    color: var(--bg-main);
    font-size: 0.78rem;
    font-weight: 800;
}

@media (min-width: 1024px) {
    body.registration-page .pricing-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.registration-page .pricing-option--anchor {
        grid-column: 1 / -1;
    }

}

@media (max-width: 700px) {

    body.registration-page .rates-table thead th,
    body.registration-page .rates-table tbody th,
    body.registration-page .rates-table tbody td {
        padding: 0.5rem 0.9rem;
    }

    body.registration-page .rates-table__name {
        font-size: 0.92rem;
    }

    body.registration-page .rates-table tbody td {
        font-size: 0.95rem;
    }
}

/* --------------------------------------------------------------------------
   BACHATA PASSION OVERRIDES — two-day schedule grid
   -------------------------------------------------------------------------- */
body.home-page .schedule-grid-header--two-days,
body.home-page .schedule-row--two-days {
    grid-template-columns: 90px 1fr 1fr;
}

body.home-page .home-hero__choice {
    text-decoration: none;
}