/* ════════════════════════════════════════════════════════════════════════════
   PIANOMODE — LEARN PAGE (2026 EDITORIAL REDESIGN)
   ----------------------------------------------------------------------------
   Mobile-first. Built on the global design tokens (assets/design-system.css)
   with local short aliases to keep selectors readable. Editorial dark hero +
   cinematic piano cabinet + Duolingo-style zig-zag path + typographic
   Specialized Courses list + monthly/yearly pricing.
   ════════════════════════════════════════════════════════════════════════════ */

/* ───────── LOCAL TOKENS (self-contained — never depend on a cached
   design-system.css that might be stale for logged-out visitors) ───────── */
.pm-learn-v4 {
    --gold:         #D7BF81;
    --gold-bright:  #E8CF92;
    /* Was #B8932F — a mustard "dirty yellow" off the canonical palette. Use the
       design-system deep gold (#A0894A), readable on both the dark hero and the
       light paper sections; kills the ugly-yellow accents/badges on Learn. */
    --gold-deep:    var(--pm-gold-deep, #A0894A);
    --gold-soft:    rgba(215, 191, 129, 0.15);
    --gold-border:  rgba(215, 191, 129, 0.25);
    --gold-faint:   rgba(215, 191, 129, 0.08);

    --ink:          #0A0908;
    --ink-2:        #14110D;
    --ink-3:        #1F1A14;
    --ink-4:        #2A2622;

    --paper:        #FAF7F2;
    --paper-2:      #F3EEE5;
    --paper-3:      #E8E0D1;

    --text:         #18140F;
    --text-2:       #4A4236;
    --text-3:       #7D7567;
    --text-4:       #A89F8C;

    --line:         rgba(24, 20, 15, 0.10);
    --line-2:       rgba(24, 20, 15, 0.18);

    --beg:          #6FA37A;
    --ele:          #6F90C8;
    --int:          #C68F4E;
    --adv:          #A668B5;
    --exp:          #D85950;

    --serif:        'Fraunces', 'Times New Roman', Georgia, serif;
    --sans:         'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout:   cubic-bezier(0.65, 0, 0.35, 1);

    /* Force light scheme on the cream editorial body so OS-level
       "auto dark mode" (Edge / Brave / iOS Safari) never tries to
       invert the page. Dark sections explicitly opt back into
       color-scheme:dark on themselves. */
    color-scheme: light;
    background: #FAF7F2;
    color: #18140F;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}
.pm-learn-v4 *,
.pm-learn-v4 *::before,
.pm-learn-v4 *::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
.pm-learn-v4 a { color: inherit; text-decoration: none; }
.pm-learn-v4 button { font: inherit; border: 0; background: 0; cursor: pointer; color: inherit; }

/* ───────── SECTION HEADER (eyebrow + serif title + sub) ───────── */
.pm-learn-v4 .pm-sec-header {
    text-align: center;
    margin: 0 auto 36px;
    max-width: 720px;
}
.pm-learn-v4 .pm-sec-header.pm-sec-header-left { text-align: left; margin-left: 0; }
/* (Removed) .pm-badge, the pill above every heading. Owner, 2026-09-21:
   "enleve TOUS les badge pillule sur les titre ... il faut que les titres se
   suffisent a eux memes". Seven of them said in small caps what the heading
   said underneath in 60px, and the eighth carried the level, which now reads
   as a sentence instead (see the modules section).

   The dot survives, because it is the only thing on the page that carries the
   level's colour, and it is now inline in that sentence. */
.pm-learn-v4 .pm-sec-header__dot {
    display: inline-block;
    width: 8px; height: 8px;
    margin-inline-end: 4px;
    border-radius: 50%;
    background: var(--gold);
    vertical-align: 0.06em;
}
.pm-learn-v4 .pm-sec-header h2 {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(30px, 6vw, 60px); line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-variation-settings: "opsz" 96;
    margin: 0 0 14px;
}
.pm-learn-v4 .pm-sec-header h2 span {
    /* Baseline (legacy / no-feature browsers): plain inline italic with the
       solid gold-deep colour. This is the safe failure mode — the previous
       attempt to paint a gradient on an inline-block + padded element in
       browsers without background-clip:text support filled the whole padded
       rectangle solid gold and turned "topics" / "journey" into a brick.
       Margin-inline-end keeps the next-line content from butting against
       the italic slope on these legacy paths. */
    display: inline;
    font-style: italic;
    color: var(--gold-deep);
    margin-inline-end: 0.14em;
}
/* Modern path — once we know background-clip:text actually works, we can
   safely widen the box (inline-block + padding-inline-end) so the italic
   slope of y/s/n/e/S sits INSIDE the gradient-filled region. Without this
   widening, the rightmost ~0.10-0.18em of every italic glyph rendered as
   transparent (the glyph shape extended past the box, so background-clip
   had nothing to fill there). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .pm-learn-v4 .pm-sec-header h2 span {
        display: inline-block;
        padding-inline-end: 0.22em;
        margin-inline-end: 0;
        background: linear-gradient(135deg, var(--gold-deep), var(--gold));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        /* Critical: keep the inline-block on the same baseline as its sibling
           text. Without this, "Modules &" and "Lessons" can drift apart by 1px
           when the inline-block box gets a different content-edge alignment. */
        vertical-align: baseline;
        /* THE DESCENDER, PAINTED. background-clip:text fills the glyphs only
           where the BACKGROUND BOX reaches, and that box is the inline-block's
           line box: 1.06 of a 60px Fraunces italic, which stops above the tail
           of a g, a y, a p. The tail was not clipped by an ancestor, it was
           never painted, which is why it read as a cut letter in "begin" and in
           every other italic word on this page carrying a descender. Padding
           extends the background box below the baseline without moving the
           text, because the element is baseline-aligned. */
        padding-block: 0.02em 0.22em;
    }
}
.pm-learn-v4 .pm-sec-header h2 {
    overflow: visible;
    /* Room for the span's own descender padding above, so the padded box never
       lands on whatever follows the heading. */
    padding-bottom: 0.22em;
    /* Reserve a sliver of right padding so the italic span's overhang has
       room before any inherited overflow:hidden on a wider ancestor would
       crop it. 0.18em ≈ the worst-case slope on Fraunces 96 opsz italic. */
    padding-inline-end: 0.18em;
    line-height: 1.06;
}
.pm-learn-v4 .pm-sec-header p {
    font-family: var(--serif);
    font-size: clamp(15px, 2.4vw, 18px); font-weight: 300; line-height: 1.5;
    color: var(--text-2);
    max-width: 580px; margin: 0 auto;
}
.pm-learn-v4 .pm-sec-header.pm-sec-header-left p { margin-left: 0; }

/* ───────── BUTTONS ───────── */
.pm-learn-v4 .pm-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; border-radius: 100px;
    font-family: var(--sans);
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s, color .25s, border-color .25s;
    cursor: pointer; white-space: nowrap;
}
.pm-learn-v4 .pm-btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 6px 24px rgba(215,191,129,0.25); }
.pm-learn-v4 .pm-btn-gold:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(215,191,129,0.40); }
.pm-learn-v4 .pm-btn-dark { background: var(--ink); color: var(--paper); }
.pm-learn-v4 .pm-btn-dark:hover { background: var(--ink-3); transform: translateY(-2px); }
.pm-learn-v4 .pm-btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.pm-learn-v4 .pm-btn-outline:hover { border-color: var(--ink); }
.pm-learn-v4 .pm-btn-ghost { background: transparent; color: #F5EFE3; border: 1px solid rgba(245,239,227,0.25); }
.pm-learn-v4 .pm-btn-ghost:hover { background: rgba(245,239,227,0.06); border-color: var(--gold); color: var(--gold); }
.pm-learn-v4 .pm-btn[disabled],
.pm-learn-v4 .pm-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════════════
   1.  LOGGED-IN TOPBAR — restyled with editorial tokens
   ----------------------------------------------------------------------------
   Background matches the top of the cinematic piano section beneath so the
   topbar visually continues into the dark scene with no seam.
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-topbar {
    /* Sticky bar at the top of the Learn page body. Full-bleed so it
       never leaves a cream side-band when Blocksy's content wrapper
       constrains the page below 100vw. */
    position: sticky; top: 0; z-index: 50;
    background: #1a1411;
    border: 0;
    color: #F5EFE3;
    color-scheme: dark;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}
.pm-learn-v4 .pm-topbar-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 10px clamp(14px, 4vw, 28px);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap;
}
.pm-learn-v4 .pm-tb-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pm-learn-v4 .pm-tb-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(215, 191, 129, 0.18);
    font-family: var(--sans); font-weight: 600;
    font-size: 11px; letter-spacing: 0.04em;
    color: rgba(245, 239, 227, 0.86);
    transition: background .2s, border-color .2s;
}
.pm-learn-v4 .pm-tb-item:hover { background: rgba(215, 191, 129, 0.08); border-color: rgba(215, 191, 129, 0.35); }
.pm-learn-v4 .pm-tb-icon { color: var(--gold); flex-shrink: 0; }
.pm-learn-v4 .pm-tb-val { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--gold); font-weight: 500; }
.pm-learn-v4 .pm-tb-label { color: rgba(245, 239, 227, 0.5); }
.pm-learn-v4 .pm-tb-notes { padding: 6px 10px; gap: 3px; }
.pm-learn-v4 .pm-tb-note-icon { font-size: 14px; color: var(--gold); transition: opacity .2s; }
.pm-learn-v4 .pm-tb-note-icon.empty { opacity: 0.22; }
.pm-learn-v4 .pm-tb-ring {
    position: relative; width: 28px; height: 28px; border-radius: 50%;
    background:
        conic-gradient(var(--gold) calc(var(--pct, 0) * 1%), rgba(245, 239, 227, 0.12) 0);
    display: grid; place-items: center;
}
.pm-learn-v4 .pm-tb-ring::before {
    content: ""; position: absolute; inset: 3px; border-radius: 50%;
    background: rgba(10, 9, 8, 0.92);
}
.pm-learn-v4 .pm-tb-ring span {
    position: relative; font-family: var(--mono); font-size: 10px; font-weight: 600;
    color: var(--gold);
}

/* ════════════════════════════════════════════════════════════════════════════
   2.  INTRO HERO (BEGIN NOW) — editorial redesign
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-intro-hero {
    /* Lives inside the dark .pm-piano-sec scene now. The container shares
       the floating-notes background with the keyboard below, but its
       inner surface is a softly-lit gold-tinted card so the welcome
       content reads cleanly on top of the cinematic dark. */
    position: relative; isolation: isolate;
    max-width: 1120px;
    width: calc(100% - clamp(20px, 4vw, 48px));
    margin: 0 auto clamp(28px, 5vw, 56px);
    padding: clamp(26px, 4.5vw, 48px) clamp(22px, 4vw, 48px);
    background:
        radial-gradient(ellipse at 12% -10%, rgba(215, 191, 129, 0.18), transparent 55%),
        radial-gradient(ellipse at 90% 110%, rgba(184, 147, 47, 0.10), transparent 60%),
        linear-gradient(140deg, #FFFFFF 0%, var(--paper) 55%, var(--paper-2) 100%);
    border: 1px solid var(--gold-border);
    border-radius: clamp(18px, 3vw, 24px);
    color: var(--text);
    overflow: hidden;
    box-shadow:
        0 20px 48px -24px rgba(43, 31, 14, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: padding .4s var(--ease-out), max-height .4s var(--ease-out), border-radius .4s;
    z-index: 2;
}
.pm-learn-v4 .pm-intro-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 18% 110%, rgba(198, 143, 78, 0.18), transparent 45%),
        radial-gradient(circle at 88% 18%, rgba(215, 191, 129, 0.14), transparent 50%);
    z-index: 0;
}
.pm-learn-v4 .pm-intro-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120' viewBox='0 0 200 120'><g fill='none' stroke='%23D7BF81' stroke-opacity='0.10' stroke-width='0.5'><line x1='0' y1='30' x2='200' y2='30'/><line x1='0' y1='50' x2='200' y2='50'/><line x1='0' y1='70' x2='200' y2='70'/><line x1='0' y1='90' x2='200' y2='90'/></g></svg>");
    background-size: 200px 120px;
    opacity: 0.5;
    mask-image: linear-gradient(180deg, transparent, black 40%, black 80%, transparent);
}
.pm-learn-v4 .pm-intro-hero-inner {
    position: relative; z-index: 1;
    max-width: 880px;
}
.pm-learn-v4 .pm-intro-hero-eyebrow {
    display: inline-block;
    padding: 7px 14px;
    background: rgba(215, 191, 129, 0.10);
    border: 1px solid rgba(215, 191, 129, 0.30);
    border-radius: 100px;
    color: var(--gold);
    font-family: var(--sans);
    font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 18px;
    align-self: flex-start;
}
.pm-learn-v4 .pm-intro-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.pm-learn-v4 .pm-intro-hero h1 {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(34px, 6vw, 72px);
    line-height: 1.32; letter-spacing: -0.025em;
    color: var(--ink);
    font-variation-settings: "opsz" 96;
    margin: 0 0 18px;
    /* Reserve a column on the right for the absolute-positioned Hide
       toggle so the title never underflows it. The reservation lives
       on the h1 (not the inner) so siblings — features grid, rows —
       can use the full width of the card. */
    padding-right: clamp(0px, 12vw, 140px);
    overflow: visible;
    padding-bottom: 0.30em;
}
.pm-learn-v4 .pm-intro-hero h1 em {
    /* Legacy / no-feature browsers: solid gold italic, no gradient. */
    display: inline;
    font-style: italic;
    color: var(--gold);
    line-height: 1.32;
    padding-bottom: 0.06em;
}
/* Modern path: same gradient text-fill as before, but inline-block + a
   small padding-inline-end so the italic slope of "journey" / "topics"
   sits inside the gradient-painted box. Without the extra width the
   rightmost ~0.10em of every italic glyph rendered as transparent
   (background-clip:text had nothing to clip on the slope). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .pm-learn-v4 .pm-intro-hero h1 em {
        display: inline-block;
        padding-inline-end: 0.18em;
        background: linear-gradient(135deg, var(--gold-bright) 10%, var(--gold) 55%, var(--gold-deep) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        vertical-align: baseline;
    }
}
.pm-learn-v4 .pm-intro-hero-lead {
    font-family: var(--serif);
    font-size: clamp(15px, 2vw, 19px); font-weight: 300; line-height: 1.55;
    color: var(--text-2);
    max-width: 680px;
    margin: 0 0 32px;
}
.pm-learn-v4 .pm-intro-hero-lead em { font-style: italic; color: var(--gold); }
.pm-learn-v4 .pm-intro-hero-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 0 0 32px;
}
.pm-learn-v4 .pm-intro-feat {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 18px;
    background: var(--gold-faint);
    border: 1px solid rgba(215, 191, 129, 0.14);
    border-radius: 14px;
    transition: background .25s, border-color .25s, transform .25s;
}
.pm-learn-v4 .pm-intro-feat:hover {
    background: rgba(215, 191, 129, 0.08);
    border-color: rgba(215, 191, 129, 0.36);
    transform: translateY(-2px);
}
.pm-learn-v4 .pm-intro-feat-num {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1;
    color: var(--gold);
    font-variation-settings: "opsz" 96;
}
.pm-learn-v4 .pm-intro-feat-lbl {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
    color: var(--text-2);
    line-height: 1.35;
}
/* "Note." disclaimer + "Find my level" placement row are siblings of
   the SAME width, stacked vertically with a small gap. Both stretch to
   the full inner-content width (no toggle reservation here — that lives
   on the h1 only). The block-level + width:100% combination guarantees
   identical horizontal extent regardless of intrinsic content sizing
   (a <p> vs an <a> with display:flex would otherwise shrink-to-fit). */
.pm-learn-v4 .pm-intro-hero-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 32px 0 22px; /* 32px top pushes the two rectangles down a notch */
    width: 100%;
}
.pm-learn-v4 .pm-intro-hero-rows > * {
    display: block;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}
.pm-learn-v4 .pm-intro-hero-rows > a.pm-intro-placement {
    /* Anchor needs flex for its inner layout but the outer dimensions
       must match the disclaimer paragraph. */
    display: flex;
}

.pm-learn-v4 .pm-intro-hero-disclaimer {
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-2);
    background: var(--gold-faint);
    border: 1px solid rgba(215, 191, 129, 0.18);
    border-radius: 14px;
    padding: 12px 16px;
    margin: 0;
}
.pm-learn-v4 .pm-intro-hero-disclaimer strong {
    color: var(--gold);
    font-weight: 700;
    margin-right: 4px;
}

/* Footnote variant — used at the BOTTOM of the intro hero, after the CTAs.
   No border, no background card, soft text; it reads as a legal footnote
   rather than a competing CTA so the eye stays on Begin tour / Find my
   level / Don't show again above. */
.pm-learn-v4 .pm-intro-hero-disclaimer--footnote {
    margin: 28px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.55;
    border-top: 1px solid rgba(215, 191, 129, 0.10);
    padding-top: 18px;
}
.pm-learn-v4 .pm-intro-hero-disclaimer--footnote strong {
    color: var(--text-2);
    font-weight: 600;
}

/* Placement-test row. Whole row is an <a>, no logo, full width.
   The --featured modifier ramps up the visual weight: a glow halo, brighter
   gold accent, an "RECOMMENDED" eyebrow and stronger copy. The default
   variant (without --featured) keeps the original subdued look for any
   place we still want a quieter call-out. */
.pm-learn-v4 .pm-intro-placement {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    background: var(--gold-faint);
    border: 1px solid rgba(215, 191, 129, 0.18);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    overflow: hidden;
}
.pm-learn-v4 .pm-intro-placement:hover {
    background: rgba(215, 191, 129, 0.10);
    border-color: rgba(215, 191, 129, 0.35);
}

/* Featured variant — used inside the intro hero so the assessment CTA
   reads as the recommended next step, not as a footnote. */
.pm-learn-v4 .pm-intro-placement--featured {
    margin: 28px 0 24px;
    padding: 22px 24px;
    background: linear-gradient(135deg, rgba(215, 191, 129, 0.16) 0%, rgba(215, 191, 129, 0.06) 60%, rgba(245, 239, 227, 0.04) 100%);
    border: 1px solid rgba(215, 191, 129, 0.42);
    border-radius: 18px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(215, 191, 129, 0.06) inset;
}
.pm-learn-v4 .pm-intro-placement--featured:hover {
    background: linear-gradient(135deg, rgba(215, 191, 129, 0.24) 0%, rgba(215, 191, 129, 0.10) 60%, rgba(245, 239, 227, 0.06) 100%);
    border-color: rgba(215, 191, 129, 0.62);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(215, 191, 129, 0.10) inset;
}
.pm-learn-v4 .pm-intro-placement-glow {
    position: absolute;
    inset: -40% -10% auto auto;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(215, 191, 129, 0.32), rgba(215, 191, 129, 0) 70%);
    pointer-events: none;
    opacity: 0.7;
    transition: opacity .35s ease;
}
.pm-learn-v4 .pm-intro-placement--featured:hover .pm-intro-placement-glow { opacity: 1; }

.pm-learn-v4 .pm-intro-placement-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
    color: var(--text-2);
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}
.pm-learn-v4 .pm-intro-placement-text strong {
    color: var(--ink);
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0.005em;
    /* Italic safety on the gold-deep gradient — same pattern as section
       header h2 spans, so the closing italic glyph isn't optically clipped. */
    padding-inline-end: 0.10em;
}
.pm-learn-v4 .pm-intro-placement-eyebrow {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(215, 191, 129, 0.16);
    border: 1px solid rgba(215, 191, 129, 0.40);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.pm-learn-v4 .pm-intro-placement-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px; border-radius: 100px;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
    flex-shrink: 0;
    position: relative; z-index: 1;
    transition: background .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 8px 22px rgba(215, 191, 129, 0.32);
}
.pm-learn-v4 .pm-intro-placement:hover .pm-intro-placement-btn {
    background: var(--gold-bright);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(215, 191, 129, 0.50);
}
@media (max-width: 600px) {
    .pm-learn-v4 .pm-intro-placement {
        flex-direction: column; align-items: stretch;
    }
    .pm-learn-v4 .pm-intro-placement-btn {
        width: 100%; justify-content: center;
    }
}

.pm-learn-v4 .pm-intro-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pm-learn-v4 .pm-intro-hero-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    border-radius: 100px;
    cursor: pointer; text-decoration: none;
    border: 0;
    transition: transform .22s var(--ease-out), box-shadow .22s, background .25s, color .25s, border-color .25s;
}
.pm-learn-v4 .pm-intro-hero-btn-primary {
    background: var(--gold);
    color: var(--ink);
    box-shadow: 0 8px 28px rgba(215, 191, 129, 0.32);
}
.pm-learn-v4 .pm-intro-hero-btn-primary:hover {
    transform: translateY(-2px);
    background: var(--gold-bright);
    box-shadow: 0 14px 36px rgba(215, 191, 129, 0.45);
}
.pm-learn-v4 .pm-intro-hero-btn-secondary {
    background: transparent;
    color: var(--text-2);
    border: 1px solid rgba(215, 191, 129, 0.30);
}
.pm-learn-v4 .pm-intro-hero-btn-secondary:hover {
    color: var(--gold); border-color: var(--gold);
    background: rgba(215, 191, 129, 0.06);
}
.pm-learn-v4 .pm-intro-hero-collapse-toggle {
    /* Always pinned to the top-right corner of the card, even on mobile.
       The inner padding-right reserves the space so the title never
       underflows the toggle. */
    position: absolute;
    top: 14px; right: 14px;
    z-index: 3;
    margin: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 100px;
    background: rgba(215, 191, 129, 0.10);
    border: 1px solid rgba(215, 191, 129, 0.30);
    color: var(--gold);
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.10em; text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.pm-learn-v4 .pm-intro-hero-collapse-toggle:hover { background: rgba(215, 191, 129, 0.20); }
@media (max-width: 480px) {
    .pm-learn-v4 .pm-intro-hero-collapse-toggle {
        font-size: 10px;
        padding: 6px 10px;
    }
}
.pm-learn-v4 .pm-intro-hero-collapse-toggle:hover { background: rgba(215, 191, 129, 0.20); }
.pm-learn-v4 .pm-intro-hero-collapse-toggle svg { transition: transform .25s; }

/* ─────────── COLLAPSED-STATE BAR ───────────
   Single horizontal band: eyebrow + intro phrase on the left, real gold
   CTA on the right. When the panel is collapsed (.is-collapsed), the
   inner full-content block is hidden and this bar takes its place.
   When expanded, the bar is hidden and the inner is shown.
   The whole pm-intro-hero outer card keeps its rounded border, padding
   and background in both states for visual stability. */
.pm-learn-v4 .pm-intro-hero-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}
.pm-learn-v4 .pm-intro-hero-bar__text {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1; min-width: 0;
}
.pm-learn-v4 .pm-intro-hero-bar__eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}
.pm-learn-v4 .pm-intro-hero-bar__lead {
    margin: 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.45;
    color: var(--text-2);
}
.pm-learn-v4 .pm-intro-hero-cta-open {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px;
    border-radius: 100px;
    border: 0;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(215, 191, 129, 0.32);
    transition: background .22s, transform .22s, box-shadow .22s;
}
.pm-learn-v4 .pm-intro-hero-cta-open:hover {
    background: var(--gold-bright);
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(215, 191, 129, 0.50);
}
.pm-learn-v4 .pm-intro-hero-cta-open:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}
@media (max-width: 600px) {
    .pm-learn-v4 .pm-intro-hero-bar { flex-direction: column; align-items: stretch; gap: 14px; }
    .pm-learn-v4 .pm-intro-hero-cta-open { width: 100%; justify-content: center; }
}

/* Collapsed state — show the bar instead of the full inner block. The
   outer card stays the same height and rounding so the surrounding layout
   doesn't jump on toggle. */
.pm-learn-v4 .pm-intro-hero.is-collapsed {
    padding: 22px clamp(20px, 4vw, 36px);
}
.pm-learn-v4 .pm-intro-hero.is-collapsed .pm-intro-hero-inner { display: none; }
.pm-learn-v4 .pm-intro-hero.is-collapsed .pm-intro-hero-bar { display: flex; }
.pm-learn-v4 .pm-intro-hero.is-collapsed .pm-intro-hero-collapse-toggle { display: none; }

/* Hide entirely when finished or after one lesson done */
.pm-learn-v4 .pm-intro-hero.is-finished { display: none; }

/* Wider tap targets on the new gold open CTA when the layout collapses to
   a column (small viewports) — the placement card pattern below. */
@media (max-width: 480px) {
    .pm-learn-v4 .pm-intro-hero.is-collapsed { padding: 18px 18px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   3.  ASSESSMENT CTA — restyled with editorial tokens
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-assess-cta {
    /* Gold-contrast bg, harmonised with the dark piano section that
       comes right after. The PianoMode logo sits at the left, no ASCII
       keyboard anymore. */
    max-width: 1200px;
    margin: clamp(18px, 3vw, 36px) auto;
    padding: clamp(20px, 4vw, 36px) clamp(20px, 4vw, 48px);
    background: #14110D;
    background:
        radial-gradient(ellipse at 8% 50%, rgba(215, 191, 129, 0.18), transparent 55%),
        linear-gradient(135deg, #14110D 0%, #1F1A14 100%);
    color: #F5EFE3;
    color-scheme: dark;
    border: 1px solid rgba(215, 191, 129, 0.32);
    border-radius: 24px;
    overflow: hidden; position: relative;
}
.pm-learn-v4 .pm-assess-cta::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
}
.pm-learn-v4 .pm-assess-cta-inner {
    display: flex; align-items: center; gap: clamp(16px, 3vw, 32px);
    flex-wrap: wrap; justify-content: space-between;
}
.pm-learn-v4 .pm-assess-cta-mark {
    flex-shrink: 0;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(215, 191, 129, 0.10);
    border: 1px solid rgba(215, 191, 129, 0.30);
    display: grid; place-items: center;
    overflow: hidden;
}
.pm-learn-v4 .pm-assess-cta-mark img {
    width: 44px; height: 44px;
    object-fit: contain;
    display: block;
}
.pm-learn-v4 .pm-assess-cta-text { flex: 1; min-width: 240px; }
.pm-learn-v4 .pm-assess-cta-text h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(20px, 3vw, 28px); line-height: 1.1; letter-spacing: -0.015em;
    color: #F5EFE3; margin: 0 0 6px;
}
.pm-learn-v4 .pm-assess-cta-text p {
    font-family: var(--serif); font-size: 15px; font-weight: 300;
    color: rgba(245, 239, 227, 0.72); line-height: 1.5; margin: 0;
}
.pm-learn-v4 .pm-assess-cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; border-radius: 100px;
    background: var(--gold); color: var(--ink);
    font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
    text-decoration: none;
    transition: transform .22s, box-shadow .22s, background .22s;
    flex-shrink: 0;
    box-shadow: 0 8px 22px rgba(215, 191, 129, 0.32);
}
.pm-learn-v4 .pm-assess-cta-btn:hover {
    background: var(--gold-bright);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(215, 191, 129, 0.45);
}

/* ════════════════════════════════════════════════════════════════════════════
   4.  CINEMATIC PIANO STAGE
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-piano-sec {
    /* Full-bleed: break out of Blocksy's constrained content wrapper so
       the cinematic dark scene always spans the entire viewport, both
       logged-in and logged-out. Without this trick the parent wrapper
       caps the section width and leaves a cream band on the right.
       Hardcoded hex fallback + color-scheme:dark keep it dark even when
       the browser tries to force a light scheme. */
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    background: var(--paper);
    background:
        radial-gradient(ellipse at 50% -6%, var(--gold-soft), transparent 52%),
        linear-gradient(180deg, #FFFFFF 0%, var(--paper) 44%, var(--paper-2) 100%);
    color: var(--text);
    padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 8vw, 96px);
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
}
.pm-learn-v4 .pm-piano-sec .pm-sec-header h2 { color: var(--ink); }
.pm-learn-v4 .pm-piano-sec .pm-sec-header p { color: var(--text-2); }

/* ambient room */
.pm-learn-v4 .pm-stage-room { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pm-learn-v4 .pm-stage-beam {
    position: absolute; top: -10%; width: 200px; height: 140%;
    background: linear-gradient(180deg, transparent, rgba(215, 191, 129, 0.06), transparent);
    filter: blur(40px);
    transform: rotate(8deg);
}
.pm-learn-v4 .pm-stage-beam.b1 { left: 10%; }
.pm-learn-v4 .pm-stage-beam.b2 { left: 70%; transform: rotate(-8deg); }
.pm-learn-v4 .pm-stage-bg-note {
    position: absolute; font-family: var(--serif); font-style: italic;
    color: rgba(215, 191, 129, 0.18); font-size: 28px;
    animation: pmBgNoteDrift 18s linear infinite;
}
@keyframes pmBgNoteDrift {
    0%   { transform: translate(0, 30px) rotate(-6deg); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(var(--dx, 40px), -260px) rotate(6deg); opacity: 0; }
}
.pm-learn-v4 .pm-piano-glow {
    position: absolute; left: 50%; top: 55%;
    width: 700px; height: 360px;
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 0;
    filter: blur(90px); opacity: 0;
    background: radial-gradient(ellipse, var(--kc-aura, var(--gold)), transparent 65%);
    transition: background .6s var(--ease-out), opacity .6s;
}
.pm-learn-v4 .pm-piano-glow.on { opacity: 0.55; }

.pm-learn-v4 .pm-piano-stage {
    position: relative; z-index: 2;
    max-width: 1120px;
    margin: 18px auto 0;
    padding: 0 clamp(12px, 3vw, 32px);
}
.pm-learn-v4 .pm-stage-hint {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase;
    color: var(--gold); font-weight: 600;
    padding: 6px 12px; border-radius: 100px;
    background: rgba(215, 191, 129, 0.08);
    border: 1px solid rgba(215, 191, 129, 0.25);
    margin: 0 auto 22px;
}
.pm-learn-v4 .pm-stage-hint__dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
    box-shadow: 0 0 0 0 var(--gold);
    animation: pmHintPulse 1.6s ease-out infinite;
}
@keyframes pmHintPulse {
    0%   { box-shadow: 0 0 0 0 rgba(215, 191, 129, 0.6); }
    100% { box-shadow: 0 0 0 12px rgba(215, 191, 129, 0); }
}

/* piano cabinet */
.pm-learn-v4 .pm-piano-cabinet {
    position: relative;
    background: linear-gradient(180deg, #2a1f17 0%, #1a120c 60%, #0c0805 100%);
    border-radius: 16px 16px 22px 22px;
    padding: 14px 10px 22px;
    /* Beige-gold light frame so the dark concert piano reads as a framed
       object on the cream stage, with a warm grounded shadow instead of a
       heavy black blob. */
    border: 1px solid rgba(215, 191, 129, 0.40);
    box-shadow:
        0 54px 96px -46px rgba(43, 31, 14, 0.55),
        0 26px 52px -24px rgba(43, 31, 14, 0.40),
        inset 0 1px 0 rgba(215, 191, 129, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}
.pm-learn-v4 .pm-piano-cabinet::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(215, 191, 129, 0.4) 50%, transparent 95%);
}
.pm-learn-v4 .pm-piano-felt {
    height: 6px; margin: 0 2px 6px;
    background: linear-gradient(180deg, #7a1c1c 0%, #4a1010 60%, #2a0808 100%);
    border-radius: 1px;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 80, 80, 0.15);
}
.pm-learn-v4 .pm-keyboard-rim {
    background: linear-gradient(180deg, #050403 0%, #0a0806 100%);
    padding: 4px 4px 8px;
    border-radius: 4px 4px 14px 14px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5);
}
.pm-learn-v4 .pm-piano-keyboard {
    position: relative;
    display: flex; gap: 2px;
    height: 240px;
}

/* white key. Explicit z-index keeps it above any decorative overlay
   (particles, beams) so taps always reach the key. */
.pm-learn-v4 .pm-pkey-white {
    flex: 1; min-width: 0;
    position: relative; cursor: pointer;
    z-index: 2;
    background: linear-gradient(180deg, #FEFCF6 0%, #F5F0DD 70%, #E0D7BC 100%);
    border-radius: 0 0 6px 6px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: space-between;
    padding: 10px 4px 16px;
    text-align: center;
    transition: transform .12s var(--ease-out), box-shadow .18s var(--ease-out), background .2s;
    box-shadow:
        inset 0 -2px 0 rgba(180, 168, 130, 0.18),
        inset 1px 0 0 rgba(0, 0, 0, 0.04),
        inset -1px 0 0 rgba(0, 0, 0, 0.04),
        0 6px 14px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
    border: 0;
}
.pm-learn-v4 .pm-pkey-white::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
    pointer-events: none;
}
.pm-learn-v4 .pm-pkey-white:hover {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8F3E0 70%, #E5DBBF 100%);
    transform: translateY(2px);
    box-shadow:
        inset 0 -1px 0 rgba(180, 168, 130, 0.20),
        0 4px 10px rgba(0, 0, 0, 0.45),
        0 0 32px var(--kc, var(--gold));
}
.pm-learn-v4 .pm-pkey-white.active {
    background: linear-gradient(180deg, #FFFFFF 0%, #FDF8E5 70%, #F0E5BE 100%);
    transform: translateY(6px);
    box-shadow:
        inset 0 0 0 2px var(--kc, var(--gold)),
        inset 0 0 24px color-mix(in srgb, var(--kc, var(--gold)) 25%, transparent),
        0 0 60px var(--kc, var(--gold));
}
.pm-learn-v4 .pm-pkey-white.active::after {
    content: ""; position: absolute; inset: -8px -4px;
    border-radius: 0 0 12px 12px;
    background: radial-gradient(ellipse at top, var(--kc, var(--gold)), transparent 70%);
    filter: blur(20px); opacity: 0.5; z-index: -1;
    pointer-events: none;
}
.pm-learn-v4 .pm-pkey-surface {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    width: 100%; height: 100%; gap: 6px;
    position: relative; z-index: 1;
}
.pm-learn-v4 .pm-pkey-top-area { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pm-learn-v4 .pm-pkey-note {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(28px, 7vw, 56px); line-height: 0.95;
    color: rgba(60, 50, 35, 0.4);
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 96;
    transition: color .25s, transform .3s var(--ease-out);
}
.pm-learn-v4 .pm-pkey-white:hover .pm-pkey-note { color: rgba(60, 50, 35, 0.7); }
.pm-learn-v4 .pm-pkey-white.active .pm-pkey-note { color: var(--kc, var(--gold)); transform: scale(1.08); }
.pm-learn-v4 .pm-pkey-bottom-area { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.pm-learn-v4 .pm-pkey-title {
    font-family: var(--sans); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--ink); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.pm-learn-v4 .pm-pkey-white.active .pm-pkey-title { color: var(--kc, var(--gold)); }
.pm-learn-v4 .pm-pkey-sub {
    font-family: var(--mono); font-size: 8px; letter-spacing: 0.10em;
    color: var(--text-3); white-space: nowrap;
}
.pm-learn-v4 .pm-pkey-prog {
    display: flex; align-items: center; gap: 5px;
    width: 80%;
}
.pm-learn-v4 .pm-pkey-pbar {
    flex: 1; height: 3px; border-radius: 100px;
    background: rgba(0, 0, 0, 0.10);
    overflow: hidden;
}
.pm-learn-v4 .pm-pkey-pfill {
    height: 100%;
    background: linear-gradient(90deg, var(--kc, var(--gold)), color-mix(in srgb, var(--kc, var(--gold)) 60%, white));
    border-radius: 100px;
    transition: width .6s;
}
.pm-learn-v4 .pm-pkey-pnum {
    font-family: var(--mono); font-size: 8px; letter-spacing: 0.05em;
    color: var(--text-3); flex-shrink: 0;
}
.pm-learn-v4 .pm-pkey-soon {
    font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-4);
}
.pm-learn-v4 .pm-pkey-front { display: none; }

/* black keys, purely decorative. pointer-events:none + z-index above
   the decorative layer so they sit visually on top but never intercept
   a tap. */
.pm-learn-v4 .pm-pkey-black {
    position: absolute; top: 0;
    width: 11.5%; height: 62%;
    z-index: 3;
    pointer-events: none !important;
    background: linear-gradient(180deg, #2c2520 0%, #161108 50%, #050403 100%);
    border-radius: 0 0 4px 4px;
    box-shadow:
        inset 0 -4px 0 #000,
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset -2px 0 4px rgba(0, 0, 0, 0.6),
        inset 2px 0 4px rgba(0, 0, 0, 0.6),
        0 6px 10px rgba(0, 0, 0, 0.7);
}
.pm-learn-v4 .pm-pkey-black::before {
    content: ""; position: absolute; top: 6px; left: 5px; right: 5px; height: 30%;
    background: linear-gradient(180deg, rgba(215, 191, 129, 0.08), transparent);
    border-radius: 0 0 3px 3px;
}
.pm-learn-v4 .pm-pkey-black::after {
    content: ""; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(215, 191, 129, 0.3);
}
.pm-learn-v4 .pm-pkey-black.bk-1 { left: calc(20% - 5.75%); }
.pm-learn-v4 .pm-pkey-black.bk-2 { left: calc(40% - 5.75%); }
.pm-learn-v4 .pm-pkey-black.bk-3 { left: calc(80% - 5.75%); }

/* string vibration line */
.pm-learn-v4 .pm-piano-strings {
    display: flex; justify-content: space-around;
    height: 14px; padding: 4px 8px;
    margin-top: 4px;
    opacity: 0.5;
}
.pm-learn-v4 .pm-piano-strings span {
    width: 1px; background: rgba(215, 191, 129, 0.4);
    transition: transform .3s var(--ease-out);
}
.pm-learn-v4 .pm-piano-strings.vibrate span {
    animation: pmStringVib 0.8s ease-out;
}
@keyframes pmStringVib {
    0%, 100% { transform: scaleY(1); }
    20%      { transform: scaleY(0.4); background: var(--kc, var(--gold)); }
    60%      { transform: scaleY(1.4); }
}

/* particles + xp pop. The layer must never intercept clicks on the
   keys beneath it. */
.pm-learn-v4 .pm-piano-particles {
    position: absolute; inset: 0;
    pointer-events: none !important;
    overflow: visible;
    z-index: 4;
}
.pm-learn-v4 .pm-particle {
    position: absolute;
    pointer-events: none !important;
    font-family: var(--serif); font-style: italic; font-weight: 500;
    color: var(--gold); font-size: 18px;
    text-shadow: 0 0 12px var(--kc, var(--gold));
    animation: pmParticleBurst 1s var(--ease-out) forwards;
}
@keyframes pmParticleBurst {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }
    20%  { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(1.2) rotate(20deg); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.6) rotate(60deg); }
}
.pm-learn-v4 .pm-xp-pop {
    position: absolute; top: 30%; left: 50%; transform: translate(-50%, 0);
    font-family: var(--mono); font-size: 13px; font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 16px var(--kc, var(--gold));
    letter-spacing: 0.05em;
    animation: pmXpPop 1s var(--ease-out) forwards;
    pointer-events: none; z-index: 10; white-space: nowrap;
}
@keyframes pmXpPop {
    0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.7); }
    20%  { opacity: 1; transform: translate(-50%, -8px) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -50px) scale(0.9); }
}

/* PIANO LEVEL CALLOUT (under the cabinet) */

/* ════════════════════════════════════════════════════════════════════════════
   5.  WHAT YOU WILL LEARN — compact inline strip below the keyboard
   ----------------------------------------------------------------------------
   Lives inside the dark piano section. A single sticky toggle reveals a
   compact 4-up grid summarising what the learner unlocks at the active
   level. Never modal, never tall.
   ════════════════════════════════════════════════════════════════════════════ */



/* ════════════════════════════════════════════════════════════════════════════
   6.  LEVEL DETAIL CARD
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   7.  REASSURANCE GRID
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-reassurance {
    /* Match the Level Detail card width (1120px content + clamp gutter)
       so the reassurance grid sits perfectly aligned beneath it. */
    max-width: 1120px;
    margin: clamp(36px, 6vw, 72px) auto;
    padding: 0 clamp(20px, 4vw, 32px);
    width: calc(100% - clamp(20px, 4vw, 64px));
}
/* FOUR PROMISES, NOT FOUR BOXES.
   It was a bordered table of white cells that repainted its background on
   hover, which is the one thing the owner asked it not to do ("surtout pas
   changer couleur lors du hover souris"): a table row lighting up under the
   pointer says "click me" about something that is not clickable.

   So: no cell borders, no fills, no hover repaint. Each promise is a mark, a
   line and a sentence, separated by air and by one hairline rule that only
   appears between columns. The only thing that moves on hover is the mark,
   and only because the pointer is a reason to look, not to act. */
.pm-learn-v4 .pm-reassurance-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 30px 0;
    background: none; border: 0; border-radius: 0; overflow: visible;
}
.pm-learn-v4 .pm-reassure-item {
    padding: 0;
    background: none;
    display: flex; flex-direction: column; gap: 9px;
    position: relative;
}
/* The rule sits on the item, between COLUMNS only: a border on the grid would
   also draw around the whole block, and in the stacked layout a vertical rule
   down the left of items two to four would mean nothing at all. It is off at
   the base width and switched on with the columns. */
.pm-learn-v4 .pm-reassure-item + .pm-reassure-item::before {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
    width: 1px; background: var(--line);
    opacity: 0.85;
    display: none;
}
.pm-learn-v4 .pm-reassure-item svg {
    color: var(--gold-deep);
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}
.pm-learn-v4 .pm-reassure-item:hover svg { transform: translateY(-2px); }
.pm-learn-v4 .pm-reassure-item h4 {
    font-family: var(--serif); font-size: 19px; font-weight: 500;
    color: var(--ink); letter-spacing: -0.012em; line-height: 1.24; margin: 0;
}
.pm-learn-v4 .pm-reassure-item p {
    font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin: 0;
    max-width: 30ch;
}
@media (prefers-reduced-motion: reduce) {
    .pm-learn-v4 .pm-reassure-item svg { transition: none; }
    .pm-learn-v4 .pm-reassure-item:hover svg { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   8.  MODULES (Duolingo zig-zag path)
   ════════════════════════════════════════════════════════════════════════════ */
/* SAME CONTAINER AS THE REST OF THE PAGE — ON THE SECTION, WHICH IS THE PART
 * THAT ACTUALLY CAPS IT.
 *
 * The list was widened to 1120px first and nothing moved on the page, because
 * `max-width` caps a box, it does not stretch one: the list can only fill the
 * room its parent has, and this section was holding it at 880px. Measured at a
 * 1440px viewport the list still came out 768px wide — 880 minus the section's
 * own 64px of padding, minus another 48px the list subtracted from itself.
 * A widened child inside a narrow parent is a no-op that reads like a fix.
 *
 * So the container moves up to the section, in the exact expression its nearest
 * neighbour already uses (the level panel inside the piano cabinet),
 * and the list simply fills it. One edge for both, at every viewport. */
.pm-learn-v4 .pm-modules-sec {
    max-width: 1120px;
    width: calc(100% - clamp(20px, 4vw, 64px));
    margin: clamp(48px, 8vw, 96px) auto;
    padding: 0;
    position: relative;
}
.pm-learn-v4 .pm-modules-list {
    position: relative;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: clamp(20px, 4vw, 36px) 0;
}
.pm-learn-v4 .pm-modules-list::before {
    content: ""; position: absolute; left: 50%; top: 30px; bottom: 30px; width: 2px;
    background: repeating-linear-gradient(180deg, var(--line) 0, var(--line) 6px, transparent 6px, transparent 12px);
    transform: translateX(-50%);
    z-index: 0;
}

/* Show only the first 5 modules by default. The rest fade out under
   a soft paper gradient with a "Show all" CTA pinned at the bottom.
   Click the toggle to reveal everything. */
.pm-learn-v4 .pm-mod-hidden { display: none; }
.pm-learn-v4 .pm-modules-list.pm-modules-collapsed .pm-mod-wrapper:nth-of-type(5)::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -28px; height: 200px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, var(--paper) 70%);
    z-index: 4;
}
.pm-learn-v4 .pm-modules-list:not(.pm-modules-collapsed) .pm-mod-hidden {
    display: block;
    animation: pmFadeUp .35s var(--ease-out) both;
}
.pm-learn-v4 .pm-modules-fade {
    position: relative; height: 12px;
}
.pm-learn-v4 .pm-modules-list:not(.pm-modules-collapsed) .pm-modules-fade { display: none; }

.pm-learn-v4 .pm-modules-show-all {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 18px auto 0;
    padding: 12px 22px; border-radius: 100px;
    background: var(--ink); color: var(--gold);
    font-family: var(--sans);
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
    cursor: pointer;
    border: 0;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transition: transform .2s, box-shadow .2s;
    position: relative; z-index: 5;
}
.pm-learn-v4 .pm-modules-show-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}
.pm-learn-v4 .pm-modules-show-all svg { transition: transform .3s; }
.pm-learn-v4 .pm-modules-list:not(.pm-modules-collapsed) .pm-modules-show-all svg { transform: rotate(180deg); }
.pm-learn-v4 .pm-modules-list.pm-modules-collapsed .pm-modules-show-all-collapse,
.pm-learn-v4 .pm-modules-list:not(.pm-modules-collapsed) .pm-modules-show-all-label { display: none; }

/* Center the "Show all" button below the list. */
.pm-learn-v4 .pm-modules-list .pm-modules-show-all {
    display: flex;
    margin-left: auto; margin-right: auto;
    width: max-content;
}
.pm-learn-v4 .pm-mod-wrapper {
    position: relative; z-index: 1;
    margin-bottom: 14px;
}
/* EVERY MODULE ROW READS THE SAME WAY. The zigzag is gone.
 *
 * Every second module used to be mirrored: `flex-direction: row-reverse`, the
 * number badge jumping to the right edge, and the whole text block switching to
 * `text-align: right`. It looked deliberate in a mockup and reads as breakage in
 * use, which is how it was reported — "les bords qui sont pas OK". Two concrete
 * costs, beyond taste:
 *
 *   - CONSECUTIVE CARDS NO LONGER LINED UP. With the badge on the other side,
 *     the info block's left edge lands somewhere else on every other row, so the
 *     column of card borders zig-zags down the page. Nothing is broken in a way
 *     a rule can name; it simply looks wrong, and it looked wrong to the person
 *     who owns the design.
 *   - RIGHT-ALIGNED BODY COPY. These descriptions run six lines. Ragged-left
 *     text costs the reader on every return sweep, because the start of the next
 *     line is never where the eye expects it. That is a real price for a
 *     decoration.
 *
 * It had also already cost a bug: the rule at ~1600 exists only to drag the
 * lessons panel back inside the card on mirrored rows. And it was undone twice
 * below 600px — once at 600, again at 480 — which is what a feature looks like
 * when nobody is sure it works.
 *
 * One direction, one alignment, one column of borders. */
.pm-learn-v4 .pm-mod-wrapper .pm-mod-row { flex-direction: row; }
.pm-learn-v4 .pm-mod-wrapper .pm-mod-row .pm-mod-info { text-align: left; }
.pm-learn-v4 .pm-mod-wrapper .pm-mod-row .pm-mod-meta { justify-content: flex-start; }
.pm-learn-v4 .pm-mod-row {
    display: flex; align-items: center; gap: clamp(14px, 3vw, 24px);
    padding: 0;
    background: transparent; border: 0;
    text-decoration: none; color: inherit;
}
.pm-learn-v4 .pm-mod-num {
    /* WIDTH, HEIGHT AND FLEX-BASIS ALL THREE, ALWAYS.
     * `flex: 0 0 64px` sets flex-basis, and flex-basis means WIDTH in a row and
     * HEIGHT in a column. This badge lives in a row on desktop and a column
     * under 600px, so a rule that gives only one of the two dimensions produces
     * a circle at one breakpoint and an oval at the next — which is what mobile
     * and tablet were showing (44 wide by 56 tall). The ≤600 block already
     * carried a comment warning about this; the ≤480 block below it then set
     * height and flex-basis without width and reintroduced it.
     * Stating all three costs one declaration and makes the shape independent of
     * the flex direction, so the next breakpoint cannot get it wrong. */
    flex: 0 0 64px; width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mc, var(--gold));
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 24px; color: var(--mc, var(--gold));
    box-shadow: 0 6px 0 color-mix(in srgb, var(--mc, var(--gold)) 25%, transparent), 0 12px 22px rgba(0, 0, 0, 0.07);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
    position: relative;
}
.pm-learn-v4 .pm-mod-num.check {
    background: var(--mc, var(--gold)); color: var(--pm-text-on-gold, #1b1505); border-color: var(--mc, var(--gold));
}
.pm-learn-v4 .pm-mod-row:hover .pm-mod-num {
    transform: translateY(-3px);
    box-shadow: 0 10px 0 color-mix(in srgb, var(--mc, var(--gold)) 30%, transparent), 0 16px 30px rgba(0, 0, 0, 0.10);
}
.pm-learn-v4 .pm-mod-row-gated .pm-mod-num {
    background: var(--paper-2); color: var(--text-4);
    border-color: var(--line-2);
    box-shadow: 0 4px 0 var(--line);
}
.pm-learn-v4 .pm-mod-info {
    flex: 1; min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px 22px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pm-learn-v4 .pm-mod-info-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.pm-learn-v4 .pm-mod-info-head h3 { margin: 0; }
.pm-learn-v4 .pm-mod-actions {
    /* Two pill buttons (Explore module + Show lessons). Both must read as
       the same shape so the row looks intentional, not "primary CTA + a
       slightly-different secondary toggle". align-items:stretch + a shared
       height variable keeps them lockstep on desktop, and the @media
       (max-width:600px) block at the bottom of this file collapses them
       into a vertical stack. */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.pm-learn-v4 .pm-mod-open-btn,
.pm-learn-v4 .pm-mod-show-lessons {
    /* Identical geometry so the two pills line up perfectly. Anything
       below this baseline is a per-button colour / hover override. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border-radius: 100px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    transition: transform .2s, box-shadow .2s, filter .2s, background .2s, color .2s, border-color .2s;
}
/* The level colour is KEPT — the owner asked for the five levels to stay
   distinguishable. What changes is HOW the button wears it.
   It used to be `background: var(--mc)` flat: a solid Material fill (#FF9800,
   #4CAF50, #2196F3) with black text, which is a Material button sitting on a
   PianoMode page, not a PianoMode button in a level's colour. Removing --mc
   from it was the wrong correction — it threw away the level's identity to fix
   a finish problem.
   The level colour now sits on the brand's own material instead of replacing
   it: a gradient built from --mc pulled toward the gold at the top and
   deepened at the bottom, an ink label, a hairline in the pure level colour,
   and the inner light along the top edge that every primary pill on this site
   already has. An Intermediate module still reads amber and a Beginner one
   still reads green — both read as PianoMode first.
   color-mix has shipped in every evergreen browser since 2023; the flat --mc
   fill is declared first so anything older still gets a correct coloured
   button rather than no background at all. */
.pm-learn-v4 .pm-mod-open-btn {
    background: var(--mc, var(--gold));
    background:
        linear-gradient(
            160deg,
            color-mix(in srgb, var(--mc, var(--gold)) 58%, var(--gold)) 0%,
            color-mix(in srgb, var(--mc, var(--gold)) 90%, #2A2118) 100%
        );
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--mc, var(--gold)) 72%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 2px 6px color-mix(in srgb, var(--mc, var(--gold)) 22%, transparent);
}
.pm-learn-v4 .pm-mod-open-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        0 8px 18px color-mix(in srgb, var(--mc, var(--gold)) 40%, transparent);
}
.pm-learn-v4 .pm-mod-row-gated .pm-mod-open-btn { display: none; }
/* NO LIFT ON HOVER — that lift is what ate the top border.
 *
 * The card carried `transform: translateY(-2px)` on hover. Two pixels is too
 * small to read as motion and exactly large enough to break the top edge: the
 * card's 1px border lands on a half-pixel row, the browser antialiases it
 * against whatever is behind, and the coloured top edge reads as GONE while the
 * three other sides stay put. Reported as "la bordure supérieure qui disparaît
 * au hover".
 *
 * Same conclusion as the module cards on the level page: colour and depth say
 * "interactive" without costing a pixel of layout, and a card that does not move
 * cannot lose an edge, clip, or collide with its neighbour. */
.pm-learn-v4 .pm-mod-row:hover .pm-mod-info {
    border-color: var(--mc, var(--gold));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
}
.pm-learn-v4 .pm-mod-info h3 {
    font-family: var(--serif); font-weight: 500;
    font-size: 21px; line-height: 1.15; letter-spacing: -0.01em;
    color: var(--ink); margin: 0 0 6px;
}
.pm-learn-v4 .pm-mod-info p {
    font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin: 0 0 10px;
    /* The CARD grows with the page; the PARAGRAPH does not. At the new 1120px
       container a description would run past 140 characters a line, and anything
       much beyond 75 costs the reader on every return sweep. Title, meta,
       progress bar and buttons all take the extra width; only the prose is held
       to a measure. */
    max-width: 74ch;
}
.pm-learn-v4 .pm-mod-meta {
    display: inline-flex; gap: 14px; align-items: center;
    flex-wrap: wrap;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
    color: var(--text-3);
}
.pm-learn-v4 .pm-mod-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pm-learn-v4 .pm-mod-bar {
    margin-top: 10px; height: 4px;
    background: var(--paper-2); border-radius: 100px; overflow: hidden;
}
.pm-learn-v4 .pm-mod-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mc, var(--gold)), color-mix(in srgb, var(--mc, var(--gold)) 60%, white));
    border-radius: 100px;
    transition: width .6s;
}
.pm-learn-v4 .pm-mod-coming-soon-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 100px;
    background: var(--gold-soft); border: 1px solid var(--gold-border);
    color: var(--gold-deep); margin-left: 6px;
}
.pm-learn-v4 .pm-mod-arrow {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--text-3); transition: color .2s, transform .2s;
}
.pm-learn-v4 .pm-mod-row:hover .pm-mod-arrow { color: var(--mc, var(--gold)); transform: translateX(4px); }

/* show lessons toggle — shares geometry with .pm-mod-open-btn (height,
   padding, border-radius, transition). Only the visual identity (colours,
   border) is set here so the two pills sit on the same baseline with the
   same intrinsic height. */
.pm-learn-v4 .pm-mod-show-lessons {
    /* The button always renders on the white .pm-mod-info card, so its
       contrast must come from explicit (not token-driven) colors. Tokens
       like --paper-2 / --text-2 flip with prefers-color-scheme and would
       paint dark text on a still-white card in dark mode. We fix the
       palette here to gold-soft / gold-deep which read on white in either
       mode. */
    background: rgba(215, 191, 129, 0.12);
    border: 1px solid rgba(215, 191, 129, 0.32);
    color: #6b563d;
    cursor: pointer;
}
.pm-learn-v4 .pm-mod-show-lessons:hover {
    background: rgba(215, 191, 129, 0.22);
    color: #5a472f;
    border-color: rgba(215, 191, 129, 0.55);
    transform: translateY(-1px);
}
.pm-learn-v4 .pm-mod-show-lessons:focus-visible {
    outline: 2px solid #D7BF81;
    outline-offset: 2px;
}
.pm-learn-v4 .pm-mod-show-arrow { transition: transform .3s; }
.pm-learn-v4 .pm-mod-show-lessons.open .pm-mod-show-arrow,
.pm-learn-v4 .pm-mod-show-lessons[aria-expanded="true"] .pm-mod-show-arrow { transform: rotate(180deg); }

/* Lessons panel now lives INSIDE the white .pm-mod-info card so the card
   itself grows when expanded. No zigzag-side offset, the panel always
   spans the full inner width of the card. */
.pm-learn-v4 .pm-mod-info .pm-mod-lessons-panel {
    margin: 14px 0 0;
    overflow: hidden;
    transition: max-height .45s var(--ease-out), margin .3s, padding .3s;
    max-height: 4000px;
}
.pm-learn-v4 .pm-mod-info .pm-mod-lessons-panel.pm-collapsed { max-height: 0; margin-top: 0; }
/* Was scoped to the mirrored rows, whose zigzag pushed the panel outside the
   card. The zigzag is gone (see the note at .pm-mod-row above), so the margin is
   simply the margin. */
.pm-learn-v4 .pm-mod-info .pm-mod-lessons-panel {
    margin: 14px 0 0;
}

/* Lesson cards always render in a single column inside the info card,
   so the title never gets clipped on either side. On wider screens we
   still show 2 columns but each card uses min-width:0 to wrap. */
.pm-learn-v4 .pm-mod-info .pm-lessons-grid {
    grid-template-columns: 1fr;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}
@media (min-width: 760px) {
    .pm-learn-v4 .pm-mod-info .pm-lessons-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.pm-learn-v4 .pm-mod-info .pm-lcard {
    min-width: 0;
}
.pm-learn-v4 .pm-mod-info .pm-lcard-body { min-width: 0; }
/* Allow lesson titles to wrap to two lines without truncation. */
.pm-learn-v4 .pm-lcard-body h4 { white-space: normal; line-height: 1.35; }
.pm-learn-v4 .pm-lessons-grid {
    display: grid; grid-template-columns: 1fr; gap: 8px;
    padding-top: 12px; border-top: 1px dashed var(--line);
}

.pm-learn-v4 .pm-lcard {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    text-align: left; text-decoration: none; color: inherit;
    transition: border-color .2s, background .2s, transform .2s;
}
/* Lesson cards sit in a tight list: a 1px lift is invisible as motion and
   visible as a seam against the card above. Colour carries the state instead. */
.pm-learn-v4 .pm-lcard:hover { border-color: var(--lc, var(--gold)); background: var(--paper); }
.pm-learn-v4 .pm-lcard-num {
    /* flex-shrink:0 so a long lesson title never squishes the badge into an
       oval — .pm-lcard is a flex row. */
    flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    background: #fff; border: 1.5px solid var(--lc, var(--gold)); color: var(--lc, var(--gold));
    flex-shrink: 0;
}
.pm-learn-v4 .pm-lcard-done .pm-lcard-num { background: var(--lc, var(--gold)); color: var(--pm-text-on-gold, #1b1505); }
.pm-learn-v4 .pm-lcard-locked { opacity: 0.6; }
.pm-learn-v4 .pm-lcard-locked .pm-lcard-num { background: var(--paper-2); border-color: var(--line-2); color: var(--text-4); }
.pm-learn-v4 .pm-lcard-body { flex: 1; min-width: 0; }
.pm-learn-v4 .pm-lcard-body h4 {
    font-family: var(--sans); font-weight: 600; font-size: 13px;
    color: var(--ink);
    /* Always wrap to 2 lines max so long titles never truncate to "..." */
    white-space: normal;
    line-height: 1.35;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pm-learn-v4 .pm-lcard-meta {
    display: flex; gap: 12px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
    color: var(--text-3); margin-top: 3px;
}
.pm-learn-v4 .pm-lcard-meta span { display: inline-flex; align-items: center; gap: 3px; }
.pm-learn-v4 .pm-lcard-quiz { color: var(--gold-deep); font-weight: 600; }
.pm-learn-v4 .pm-lcard-arrow { color: var(--text-3); flex-shrink: 0; }

.pm-learn-v4 .pm-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-3);
    background: var(--paper-2);
    border: 1px dashed var(--line-2);
    border-radius: 18px;
}
.pm-learn-v4 .pm-empty-state svg { color: var(--gold-deep); margin: 0 auto 16px; }
.pm-learn-v4 .pm-empty-state p { font-family: var(--serif); font-size: 16px; font-weight: 300; margin: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   9.  SPECIALIZED COURSES (editorial typographic list)
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-bonus-modules-wrap {
    /* Full-bleed warm-cream band for Specialized Courses. A deeper paper
       tone than the body keeps the band distinct (contrast preserved)
       while sitting in the light editorial scheme. */
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    background: var(--paper-2);
    background:
        radial-gradient(ellipse at 50% 0%, var(--gold-soft), transparent 50%),
        linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
    color: var(--text);
    padding: clamp(60px, 10vw, 120px) 0;
    overflow: hidden;
}
.pm-learn-v4 .pm-bonus-modules-sec {
    max-width: 1280px; margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.pm-learn-v4 .pm-bonus-modules-sec .pm-sec-header h2 { color: var(--ink); }
.pm-learn-v4 .pm-bonus-modules-sec .pm-sec-header p { color: var(--text-2); }

/* "Change level" pill — sits below the SC subtitle and scrolls back
   to the keyboard so the visitor can switch the active level. */
.pm-learn-v4 .pm-bonus-change-level {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 16px auto 0;
    padding: 10px 18px; border-radius: 100px;
    background: rgba(215, 191, 129, 0.10);
    color: var(--gold);
    border: 1px solid rgba(215, 191, 129, 0.32);
    font-family: var(--sans);
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}
.pm-learn-v4 .pm-bonus-change-level:hover {
    background: rgba(215, 191, 129, 0.20);
    border-color: var(--gold);
    transform: translateY(-1px);
}
.pm-learn-v4 .pm-bonus-modules-sec .pm-sec-header p strong {
    font-weight: 600; color: var(--gold);
}

.pm-learn-v4 .pm-bonus-cat { margin-bottom: clamp(28px, 5vw, 48px); }

/* Category-level collapse. Each category already caps itself at two courses;
   this caps the number of CATEGORIES, because nine of them at two rows each is
   a very long scroll for a section that is explicitly optional.
   display:none, not removal: the whole catalogue stays in the DOM for crawlers,
   exactly like the modules list above. */
.pm-learn-v4 .pm-bonus-cats { position: relative; }
.pm-learn-v4 .pm-bonus-cats-collapsed .pm-bonus-cat-out { display: none; }
.pm-learn-v4 .pm-bonus-cats-show-all {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    margin: 8px auto 0;
    padding: 12px 26px; border-radius: 100px;
    background: rgba(215, 191, 129, 0.10);
    /* The label was --gold (#D7BF81) on a 10%-gold wash over cream: about 1.9:1,
       unreadable in light mode and barely better in dark. --ink is the token
       built for text in both schemes (#0A0908 on cream, #F5EFE3 on charcoal);
       the gold stays where it belongs, on the border and the wash. */
    color: var(--ink);
    border: 1px solid rgba(215, 191, 129, 0.32);
    font-family: var(--sans);
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em;
    cursor: pointer;
    transition: background .2s, transform .2s;
    width: max-content;
    position: relative;
}
.pm-learn-v4 .pm-bonus-cats-show-all:hover {
    background: rgba(215, 191, 129, 0.20);
    transform: translateY(-1px);
}
.pm-learn-v4 .pm-bonus-cats-show-all svg { transition: transform .25s; }
.pm-learn-v4 .pm-bonus-cats:not(.pm-bonus-cats-collapsed) .pm-bonus-cats-show-all svg { transform: rotate(180deg); }
.pm-learn-v4 .pm-bonus-cats.pm-bonus-cats-collapsed .pm-bonus-cats-show-all-collapse,
.pm-learn-v4 .pm-bonus-cats:not(.pm-bonus-cats-collapsed) .pm-bonus-cats-show-all-label { display: none; }

/* SC categories: show max 2 courses by default; the rest fade behind
   a "Show all N courses" pill that mirrors the modules show-all
   pattern. Available on both /learn/ and the level taxonomy pages. */
.pm-learn-v4 .pm-bonus-cat.pm-bonus-cat-collapsed .pm-bonus-row:nth-of-type(n+3) {
    display: none;
}
.pm-learn-v4 .pm-bonus-cat-show-all {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    margin: 14px auto 0;
    padding: 10px 22px; border-radius: 100px;
    background: rgba(215, 191, 129, 0.10);
    color: var(--ink);
    border: 1px solid rgba(215, 191, 129, 0.32);
    font-family: var(--sans);
    font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
    cursor: pointer;
    transition: background .2s, transform .2s;
    width: max-content;
}
.pm-learn-v4 .pm-bonus-cat-show-all:hover {
    background: rgba(215, 191, 129, 0.20);
    transform: translateY(-1px);
}
.pm-learn-v4 .pm-bonus-cat-show-all svg { transition: transform .25s; }
.pm-learn-v4 .pm-bonus-cat:not(.pm-bonus-cat-collapsed) .pm-bonus-cat-show-all svg { transform: rotate(180deg); }
.pm-learn-v4 .pm-bonus-cat.pm-bonus-cat-collapsed .pm-bonus-cat-show-all-collapse,
.pm-learn-v4 .pm-bonus-cat:not(.pm-bonus-cat-collapsed) .pm-bonus-cat-show-all-label { display: none; }

/* Category head: number, italic name, hairline, count. No icons. */
.pm-learn-v4 .pm-bonus-cat-head {
    display: flex; align-items: baseline; gap: 14px;
    padding: 10px 4px 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}
.pm-learn-v4 .pm-bonus-cat-num {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(22px, 3vw, 30px); line-height: 1;
    color: var(--gold);
    font-variation-settings: "opsz" 96;
    flex-shrink: 0;
}
.pm-learn-v4 .pm-bonus-cat-name {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(20px, 3vw, 28px); line-height: 1.1;
    color: var(--ink);
    margin: 0;
    padding: 0 0.10em 0.04em 0;
}
.pm-learn-v4 .pm-bonus-cat-rule {
    flex: 1; height: 1px;
    background: var(--line);
    align-self: center;
}
.pm-learn-v4 .pm-bonus-cat-count {
    font-family: var(--sans); font-weight: 600;
    font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0;
}

/* Course list inside a category. Each row is a button that toggles
   its own description. Compact by default. */
.pm-learn-v4 .pm-bonus-list {
    display: flex; flex-direction: column;
}
.pm-learn-v4 .pm-bonus-row {
    position: relative;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
/* Not dimmed. A locked row is the one a visitor reads most carefully, since it
   is the one they are being asked to pay for; 0.55 opacity made its name and
   lesson count the hardest text on the page. The lock is carried by the tag on
   the right and by the unlock row inside, not by hiding the content. */
.pm-learn-v4 .pm-bonus-row.pm-bonus-row-locked .pm-bonus-row-num,
.pm-learn-v4 .pm-bonus-row.pm-bonus-row-locked .pm-bonus-row-bar { opacity: 0.5; }
.pm-learn-v4 .pm-bonus-row::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 0; background: var(--bc, var(--gold));
    transition: width .35s var(--ease-out);
    z-index: 0;
}
.pm-learn-v4 .pm-bonus-row[aria-expanded="true"]::before,
.pm-learn-v4 .pm-bonus-row:hover::before { width: 3px; }

.pm-learn-v4 .pm-bonus-row-head {
    width: 100%;
    display: grid;
    grid-template-columns: 32px 6px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px 14px;
    background: transparent; border: 0; cursor: pointer;
    text-align: left; color: inherit;
    transition: background .25s, padding-left .25s;
    position: relative; z-index: 1;
}
.pm-learn-v4 .pm-bonus-row-head:hover { background: var(--gold-faint); padding-left: 18px; }
.pm-learn-v4 .pm-bonus-row-num {
    font-family: var(--sans); font-weight: 500;
    font-size: 11px; letter-spacing: 0.10em;
    color: var(--text-3);
}
.pm-learn-v4 .pm-bonus-row-bar {
    width: 4px; height: 28px; border-radius: 2px;
    background: var(--bc, var(--gold));
    opacity: 0.45;
    transform: scaleY(0.7);
    transition: opacity .3s, transform .3s, height .3s;
}
.pm-learn-v4 .pm-bonus-row-head:hover .pm-bonus-row-bar,
.pm-learn-v4 .pm-bonus-row[aria-expanded="true"] .pm-bonus-row-bar {
    opacity: 1; transform: scaleY(1); height: 36px;
}
.pm-learn-v4 .pm-bonus-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-learn-v4 .pm-bonus-row-name {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(15px, 2vw, 19px); line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--ink);
    transition: color .3s;
}
.pm-learn-v4 .pm-bonus-row-head:hover .pm-bonus-row-name { color: var(--bc, var(--gold)); }
.pm-learn-v4 .pm-bonus-row-meta {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-family: var(--sans); font-weight: 500;
    font-size: 11px; letter-spacing: 0.04em;
    color: var(--text-3);
}
.pm-learn-v4 .pm-bonus-row-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--text-4);
}
.pm-learn-v4 .pm-bonus-row-tag {
    font-family: var(--sans); font-weight: 600;
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px;
    white-space: nowrap;
}
/* OPEN IS NOT A BUTTON, AND IT IS NOT FREE. A filled green pill on the right
   of a row reads as both (owner, 2026-09-21: "on dirait que c'est free"). It is
   a state, so it is typed like one: the word in gold, nothing behind it. */
.pm-learn-v4 .pm-bonus-row-tag.tag-open      { background: none; border: 0; padding: 4px 2px; color: var(--gold-deep); }
.pm-learn-v4 .pm-bonus-row-tag.tag-paid      { background: rgba(215, 191, 129, 0.16); border: 1px solid rgba(215, 191, 129, 0.42); color: var(--gold-deep); }
.pm-learn-v4 .pm-bonus-row-tag.tag-account   { background: rgba(24, 20, 15, 0.05); border: 1px solid var(--line-2); color: var(--text-2); }
.pm-learn-v4 .pm-bonus-row-tag.tag-blocked   { background: rgba(24, 20, 15, 0.04); border: 1px solid var(--line); color: var(--text-3); }
.pm-learn-v4 .pm-bonus-row-chev {
    color: var(--text-3);
    transition: transform .3s, color .3s;
}
.pm-learn-v4 .pm-bonus-row[aria-expanded="true"] .pm-bonus-row-chev { transform: rotate(180deg); color: var(--gold); }

/* Expandable description. Compact, with CTA + progress bar. */
.pm-learn-v4 .pm-bonus-row-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .4s var(--ease-out), padding .3s;
    padding: 0 18px 18px 56px;
    position: relative; z-index: 1;
}
.pm-learn-v4 .pm-bonus-row-body > .pm-bonus-row-inner { min-height: 0; overflow: hidden; }
.pm-learn-v4 .pm-bonus-row-body.pm-collapsed {
    grid-template-rows: 0fr;
    padding-top: 0; padding-bottom: 0;
}
.pm-learn-v4 .pm-bonus-row-desc {
    font-family: var(--serif); font-weight: 300;
    font-size: 14.5px; line-height: 1.55;
    color: var(--text-2);
    margin: 0 0 12px;
    max-width: 720px;
}
.pm-learn-v4 .pm-bonus-row-bar2 {
    height: 3px; border-radius: 100px;
    background: var(--line-2);
    margin-bottom: 12px;
    overflow: hidden;
}
.pm-learn-v4 .pm-bonus-row-bar2-fill {
    height: 100%; border-radius: 100px;
    transition: width .6s var(--ease-out);
}
.pm-learn-v4 .pm-bonus-row-actions {
    /* Two controls now (the way in, and what is inside), so the row wraps
       instead of squeezing them on a narrow card. */
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
}
.pm-learn-v4 .pm-bonus-row-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 100px;
    background: var(--gold); color: var(--ink);
    font-family: var(--sans);
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.pm-learn-v4 .pm-bonus-row-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 8px 18px rgba(215, 191, 129, 0.30);
}
/* A LOCKED COURSE: READABLE, NOT OPENABLE.
   The row used to be dimmed to 0.55 as a whole, which made the course name and
   its lesson count hard to read for someone deciding whether the membership is
   worth it: the exact person the row is talking to. The dimming is gone; only
   the way in is held back, and the row says what would open it. */
.pm-learn-v4 .pm-bonus-row-lock {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    padding: 9px 14px 9px 12px;
    border-radius: 100px;
    background: rgba(215, 191, 129, 0.10);
    border: 1px solid rgba(215, 191, 129, 0.34);
}
.pm-learn-v4 .pm-bonus-row-lock__ico {
    display: inline-flex; color: var(--gold-deep); opacity: 0.85;
}
.pm-learn-v4 .pm-bonus-row-lock__txt {
    font-family: var(--sans); font-weight: 500;
    font-size: 12.5px; letter-spacing: 0.01em;
    color: var(--text-2);
}
.pm-learn-v4 .pm-bonus-row-lock__cta {
    font-family: var(--sans); font-weight: 700;
    font-size: 12.5px; letter-spacing: 0.01em;
    color: var(--gold-deep);
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(215, 191, 129, 0.45);
}
.pm-learn-v4 .pm-bonus-row-lock__cta:hover { text-decoration-color: var(--gold-deep); }

/* ════════════════════════════════════════════════════════════════════════════
   10. SAVED LESSONS — kept, restyled
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-saved-sec {
    max-width: 1080px;
    margin: clamp(48px, 8vw, 96px) auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.pm-learn-v4 .pm-saved-grid {
    display: grid; grid-template-columns: 1fr; gap: 12px;
}

/* ════════════════════════════════════════════════════════════════════════════
   11. PRICING BLOCK
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-pricing-sec {
    max-width: 1080px;
    margin: clamp(48px, 8vw, 96px) auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.pm-learn-v4 .pm-pricing-toggle {
    display: inline-flex; margin: clamp(18px, 3vw, 28px) auto 0;
    padding: 4px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 100px;
}
.pm-learn-v4 .pm-pricing-toggle button {
    padding: 10px 20px;
    border-radius: 100px;
    font-family: var(--sans);
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--text-2);
    transition: background .25s, color .25s;
}
.pm-learn-v4 .pm-pricing-toggle button.active {
    background: var(--ink); color: var(--gold);
}
.pm-learn-v4 .pm-pricing-grid {
    display: grid; grid-template-columns: 1fr; gap: 14px;
    max-width: 880px; margin: 36px auto 0;
}
.pm-learn-v4 .pm-price-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(28px, 5vw, 40px) clamp(24px, 4vw, 36px);
    display: flex; flex-direction: column; gap: 16px;
    transition: transform .25s, box-shadow .25s;
}
/* Cards do not move on hover anywhere on this page. See the note on
   .pm-mod-row:hover: a lift of a few pixels is not read as motion and does put
   the card's own border on a half-pixel row, where it antialiases away. */
.pm-learn-v4 .pm-price-card:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10); }
.pm-learn-v4 .pm-price-card.featured {
    background: var(--ink); color: #F5EFE3; border: none;
    box-shadow: 0 30px 60px -20px rgba(10, 9, 8, 0.3);
}
.pm-learn-v4 .pm-price-card__ribbon {
    position: absolute; top: -12px; right: 24px;
    background: var(--gold); color: var(--ink);
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.20em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 100px;
}
.pm-learn-v4 .pm-price-card__name {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--text-3); font-weight: 600;
}
.pm-learn-v4 .pm-price-card.featured .pm-price-card__name { color: var(--gold); }
.pm-learn-v4 .pm-price-card__price {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.pm-learn-v4 .pm-price-card__amount {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(48px, 7vw, 64px); line-height: 1.34; letter-spacing: -0.025em;
    color: var(--ink);
    font-variation-settings: "opsz" 96;
    overflow: visible;
    padding-right: 0.20em;
    padding-bottom: 0.34em;
}
.pm-learn-v4 .pm-price-card.featured .pm-price-card__amount { color: #F5EFE3; }
.pm-learn-v4 .pm-price-card__amount em {
    /* Inline italic with solid-gold fallback. The optional gradient
       gets layered over via background-clip:text on the featured card
       only (see below), where the dark surface absorbs any glitch.
       Italic Fraunces digits (3,5,7,9) and the "$" glyph have deeper
       descenders than upright counterparts — line-height 1.34 +
       padding-bottom 0.10em on the em itself prevents tail-clipping.
       padding-right gives the italic 9 / .99 tail room so the closing
       glyph isn't optically cropped against the /year tag. */
    display: inline-block;
    font-style: italic;
    color: var(--gold-deep);
    line-height: 1.34;
    padding-bottom: 0.10em;
    padding-inline-end: 0.10em;
    overflow: visible;
    vertical-align: baseline;
}
.pm-learn-v4 .pm-price-card__price {
    /* Make sure the price row never crops descenders if a parent ever
       inherits an overflow:hidden from a future redesign. */
    overflow: visible;
}
.pm-learn-v4 .pm-price-card.featured .pm-price-card__amount em {
    color: var(--gold);
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pm-learn-v4 .pm-price-card__per {
    font-family: var(--mono); font-size: 12px; color: var(--text-3); letter-spacing: 0.10em;
}
.pm-learn-v4 .pm-price-card.featured .pm-price-card__per { color: rgba(245, 239, 227, 0.5); }
.pm-learn-v4 .pm-price-card__hook {
    font-family: var(--serif);
    font-size: 16.5px; font-weight: 400; line-height: 1.4;
    color: var(--text-2); margin: -4px 0 0;
}
.pm-learn-v4 .pm-price-card.featured .pm-price-card__hook { color: rgba(245, 239, 227, 0.78); }
.pm-learn-v4 .pm-price-card__list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; padding: 0; list-style: none; }
.pm-learn-v4 .pm-price-card__list-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; color: var(--text-2); line-height: 1.5;
}
.pm-learn-v4 .pm-price-card.featured .pm-price-card__list-item { color: rgba(245, 239, 227, 0.82); }
.pm-learn-v4 .pm-price-card__check {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--gold-soft); color: var(--gold-deep);
    margin-top: 2px;
}
.pm-learn-v4 .pm-price-card.featured .pm-price-card__check {
    background: rgba(215, 191, 129, 0.18); color: var(--gold);
}
.pm-learn-v4 .pm-price-card__save {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 600;
    padding: 5px 11px; border-radius: 100px;
    background: var(--gold-soft);
    align-self: flex-start;
}
.pm-learn-v4 .pm-price-card.featured .pm-price-card__save {
    background: rgba(215, 191, 129, 0.18); color: var(--gold);
}
.pm-learn-v4 .pm-price-card .pm-btn { width: 100%; justify-content: center; margin-top: auto; }
.pm-learn-v4 .pm-price-foot {
    text-align: center; margin-top: 24px;
    font-family: var(--serif); font-size: 14px; font-weight: 300; color: var(--text-3);
}
.pm-learn-v4 .pm-price-foot em { color: var(--gold-deep); font-style: normal; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════════
   12. RESOURCES (Explore)
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-resources-sec {
    max-width: 1280px;
    margin: clamp(48px, 8vw, 96px) auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.pm-learn-v4 .pm-cats-grid {
    display: grid; grid-template-columns: 1fr; gap: 16px;
    margin-bottom: clamp(28px, 5vw, 48px);
}
.pm-learn-v4 .pm-cat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 26px;
    display: flex; flex-direction: column; gap: 10px;
    text-decoration: none; color: inherit;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    position: relative;
    min-height: 160px;
}
.pm-learn-v4 .pm-cat-card:hover {
    border-color: var(--gold-border);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}
.pm-learn-v4 .pm-cat-eyebrow {
    font-family: var(--sans); font-weight: 600;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-deep);
}
.pm-learn-v4 .pm-cat-card h3 {
    font-family: var(--serif); font-size: 22px; font-weight: 500;
    color: var(--ink); letter-spacing: -0.01em; line-height: 1.2;
    margin: 4px 0 0;
}
.pm-learn-v4 .pm-cat-link {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sans); font-weight: 600;
    font-size: 12px; letter-spacing: 0.06em;
    color: var(--gold-deep);
    transition: gap .25s, color .25s;
}
.pm-learn-v4 .pm-cat-card:hover .pm-cat-link { gap: 12px; color: var(--ink); }
.pm-learn-v4 .pm-cat-link svg { transition: transform .25s; }
.pm-learn-v4 .pm-cat-card:hover .pm-cat-link svg { transform: translateX(2px); }

/* Articles showcase */
.pm-learn-v4 .pm-articles-showcase { margin-top: clamp(28px, 5vw, 48px); }
.pm-learn-v4 .pm-articles-showcase-title {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(20px, 3vw, 28px); color: var(--ink);
    margin: 0 0 18px;
}
.pm-learn-v4 .pm-articles-cards {
    display: grid; grid-template-columns: 1fr; gap: 16px;
}
.pm-learn-v4 .pm-art-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: border-color .25s, transform .25s;
}
.pm-learn-v4 .pm-art-card:hover { border-color: var(--gold-border); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); }
.pm-learn-v4 .pm-art-img {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    background: var(--paper-2);
}
.pm-learn-v4 .pm-art-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-learn-v4 .pm-art-placeholder { width: 100%; height: 100%; display: grid; place-items: center; }
.pm-learn-v4 .pm-art-cat {
    position: absolute; left: 12px; top: 12px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px;
    background: rgba(10, 9, 8, 0.78); color: var(--gold);
    backdrop-filter: blur(8px);
}
.pm-learn-v4 .pm-art-body { padding: 16px 18px; }
.pm-learn-v4 .pm-art-body h4 {
    font-family: var(--serif); font-weight: 500;
    font-size: 18px; line-height: 1.25; letter-spacing: -0.01em;
    color: var(--ink); margin: 0 0 6px;
}
.pm-learn-v4 .pm-art-date { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* ════════════════════════════════════════════════════════════════════════════
   13. FAQ
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-faq-sec {
    max-width: 880px;
    margin: clamp(48px, 8vw, 96px) auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.pm-learn-v4 .pm-faq-list { max-width: 820px; margin: 0 auto; }
.pm-learn-v4 .pm-faq-item {
    border-bottom: 1px solid var(--line);
}
.pm-learn-v4 .pm-faq-item:first-child { border-top: 1px solid var(--line); }
.pm-learn-v4 .pm-faq-question {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 22px 0;
    font-family: var(--serif); font-size: clamp(17px, 2.4vw, 22px); font-weight: 500;
    color: var(--ink); letter-spacing: -0.01em; text-align: left;
    cursor: pointer; gap: 16px;
    background: transparent; border: 0;
    transition: color .2s;
}
.pm-learn-v4 .pm-faq-question:hover { color: var(--gold-deep); }
.pm-learn-v4 .pm-faq-chevron {
    flex-shrink: 0; width: 32px; height: 32px;
    border: 1px solid var(--line); border-radius: 50%;
    padding: 7px;
    color: var(--gold-deep);
    transition: transform .3s var(--ease-out), background .3s, color .3s, border-color .3s;
}
.pm-learn-v4 .pm-faq-question[aria-expanded="true"] .pm-faq-chevron {
    background: var(--ink); color: var(--gold); border-color: var(--ink);
    transform: rotate(180deg);
}
.pm-learn-v4 .pm-faq-answer {
    overflow: hidden;
    transition: max-height .45s var(--ease-out), padding .3s;
    max-height: 600px;
}
.pm-learn-v4 .pm-faq-answer.pm-collapsed { max-height: 0; }
.pm-learn-v4 .pm-faq-answer p {
    font-family: var(--serif); font-size: 16px; font-weight: 300; line-height: 1.55;
    color: var(--text-2); max-width: 680px;
    padding: 0 0 22px;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   14. LOCKED GATE
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-locked-gate {
    max-width: 720px;
    margin: clamp(36px, 6vw, 72px) auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.pm-learn-v4 .pm-locked-inner {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(36px, 6vw, 64px) clamp(24px, 4vw, 48px);
    text-align: center;
    position: relative; overflow: hidden;
}
.pm-learn-v4 .pm-locked-inner::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.pm-learn-v4 .pm-locked-icon { margin: 0 auto 24px; }
.pm-learn-v4 .pm-locked-inner h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(22px, 4vw, 32px); line-height: 1.1; letter-spacing: -0.015em;
    color: var(--ink); margin: 0 0 12px;
}
.pm-learn-v4 .pm-locked-inner p {
    font-family: var(--serif); font-size: 16px; font-weight: 300; line-height: 1.55;
    color: var(--text-2); max-width: 480px; margin: 0 auto 28px;
}
.pm-learn-v4 .pm-locked-btns {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.pm-learn-v4 .pm-locked-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; border-radius: 100px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    cursor: pointer; text-decoration: none;
    border: 0;
    transition: transform .22s, background .22s, color .22s, border-color .22s;
}
.pm-learn-v4 .pm-locked-btn-primary {
    background: var(--ink); color: var(--gold);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.pm-learn-v4 .pm-locked-btn-primary:hover { background: var(--ink-3); transform: translateY(-2px); }
.pm-learn-v4 .pm-locked-btn-secondary {
    background: transparent; color: var(--ink);
    border: 1px solid var(--line-2);
}
.pm-learn-v4 .pm-locked-btn-secondary:hover { border-color: var(--ink); }

/* INTRO HERO DISCLAIMER — primary rule lives higher up alongside the
   pm-intro-hero-rows block so the disclaimer + placement row stay
   exactly the same width. */

/* ════════════════════════════════════════════════════════════════════════════
   GUIDED TOUR — full-screen overlay with spotlight + step card
   ----------------------------------------------------------------------------
   Driven entirely by learn-page.js. Hidden by default, revealed when the
   learner clicks "Begin guided tour" in the intro hero. Six steps:
   1) placement test, 2) keyboard, 3) Specialized Courses, 4) Explore,
   5) Pricing, 6) final welcome modal with disclaimer.
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-tour {
    position: fixed; inset: 0;
    z-index: 9000;
    color: #F5EFE3;
    display: block;
}
.pm-learn-v4 .pm-tour[hidden] { display: none; }
.pm-learn-v4 .pm-tour-bg {
    position: fixed; inset: 0;
    background: rgba(8, 6, 4, 0.20);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1;
    pointer-events: auto;
    transition: opacity .25s var(--ease-out);
}
/* Spotlight: a transparent rectangle pinned over the target. The huge
   box-shadow darkens everything outside it, so the target reads as a
   spotlit area without needing a clip-path. position: fixed with viewport
   coords means scroll just re-anchors via JS, no offset math required. */
.pm-learn-v4 .pm-tour-spotlight {
    position: fixed;
    z-index: 9001;
    border-radius: 18px;
    border: 2px solid var(--gold);
    box-shadow:
        0 0 0 9999px rgba(8, 6, 4, 0.78),
        0 0 0 4px rgba(215, 191, 129, 0.32),
        0 24px 64px -8px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition: top .25s var(--ease-out), left .25s var(--ease-out),
                width .25s var(--ease-out), height .25s var(--ease-out);
}
.pm-learn-v4 .pm-tour-card {
    position: fixed;
    z-index: 9002;
    width: min(420px, calc(100vw - 32px));
    background: var(--paper);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 24px 18px;
    box-shadow: 0 30px 80px -16px rgba(0, 0, 0, 0.55);
    transition: top .25s var(--ease-out), left .25s var(--ease-out);
    pointer-events: auto;
}
.pm-learn-v4 .pm-tour-step {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
    color: var(--gold-deep);
    background: var(--gold-soft);
    border: 1px solid var(--gold-border);
    border-radius: 100px;
    padding: 4px 12px;
    margin-bottom: 12px;
}
.pm-learn-v4 .pm-tour-step span { color: var(--text-3); margin-left: 2px; }
.pm-learn-v4 .pm-tour-title {
    font-family: var(--serif); font-weight: 400;
    font-size: 22px; line-height: 1.2; letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 10px;
    overflow: visible;
    padding-bottom: 0.04em;
}
.pm-learn-v4 .pm-tour-title em {
    display: inline;
    font-style: italic;
    color: var(--gold-deep);
}
.pm-learn-v4 .pm-tour-text {
    font-family: var(--serif); font-weight: 300;
    font-size: 14.5px; line-height: 1.55;
    color: var(--text-2);
    margin: 0 0 16px;
}
.pm-learn-v4 .pm-tour-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.pm-learn-v4 .pm-tour-skip {
    background: transparent; border: 0;
    color: var(--text-3);
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 6px 10px;
    transition: color .2s;
}
.pm-learn-v4 .pm-tour-skip:hover { color: var(--ink); }
.pm-learn-v4 .pm-tour-arrows { display: flex; gap: 8px; }
.pm-learn-v4 .pm-tour-prev,
.pm-learn-v4 .pm-tour-next {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 100px;
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.pm-learn-v4 .pm-tour-prev {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--line-2);
    width: 36px; padding: 9px;
    justify-content: center;
}
.pm-learn-v4 .pm-tour-prev:hover { border-color: var(--ink); color: var(--ink); }
.pm-learn-v4 .pm-tour-prev[disabled] { opacity: 0.35; cursor: not-allowed; }
.pm-learn-v4 .pm-tour-next {
    background: var(--ink); color: var(--gold);
    border: 0;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.pm-learn-v4 .pm-tour-next:hover { transform: translateY(-1px); }

/* Final welcome modal (step 6). Replaces the spotlight + card. */
.pm-learn-v4 .pm-tour-final {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--paper);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.55);
}
.pm-learn-v4 .pm-tour-final[hidden] { display: none; }
.pm-learn-v4 .pm-tour-final-inner { padding: clamp(28px, 5vw, 40px); }
.pm-learn-v4 .pm-tour-final-eyebrow {
    display: inline-block;
    font-family: var(--sans); font-weight: 600;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold-deep);
    background: var(--gold-soft);
    border: 1px solid var(--gold-border);
    padding: 5px 12px; border-radius: 100px;
    margin-bottom: 16px;
}
.pm-learn-v4 .pm-tour-final h3 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(24px, 4vw, 36px); line-height: 1.1; letter-spacing: -0.02em;
    color: var(--ink); margin: 0 0 14px;
    overflow: visible;
    padding-bottom: 0.06em;
}
.pm-learn-v4 .pm-tour-final h3 em {
    display: inline;
    font-style: italic;
    color: var(--gold-deep);
    background: linear-gradient(135deg, var(--gold-deep), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pm-learn-v4 .pm-tour-final-lead {
    font-family: var(--serif); font-weight: 300;
    font-size: 15px; line-height: 1.55; color: var(--text-2);
    margin: 0 0 22px;
}
.pm-learn-v4 .pm-tour-final-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    margin: 0 0 22px;
}
@media (min-width: 600px) { .pm-learn-v4 .pm-tour-final-grid { grid-template-columns: repeat(4, 1fr); } }
.pm-learn-v4 .pm-tour-final-cell {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 14px 14px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.pm-learn-v4 .pm-tour-final-num {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(24px, 3vw, 30px);
    color: var(--gold-deep);
    line-height: 1;
}
.pm-learn-v4 .pm-tour-final-lbl {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-3);
}
.pm-learn-v4 .pm-tour-final-disclaimer {
    font-family: var(--sans); font-size: 12.5px; line-height: 1.55;
    color: var(--text-2);
    background: var(--paper-2);
    border-left: 3px solid var(--gold-deep);
    padding: 12px 14px;
    border-radius: 8px;
    margin: 0 0 22px;
}
.pm-learn-v4 .pm-tour-final-disclaimer strong { color: var(--ink); margin-right: 4px; }
.pm-learn-v4 .pm-tour-final-cta { display: flex; justify-content: flex-end; }
.pm-learn-v4 .pm-tour-final-start {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 100px;
    background: var(--gold); color: var(--ink);
    border: 0;
    font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(215, 191, 129, 0.32);
    transition: transform .2s, box-shadow .2s;
}
.pm-learn-v4 .pm-tour-final-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(215, 191, 129, 0.45);
}

/* ════════════════════════════════════════════════════════════════════════════
   LOCK TOAST — surfaced when a visitor clicks a locked module / lesson.
   Replaces the page-reload that the gated <a> would otherwise trigger.
   ════════════════════════════════════════════════════════════════════════════ */
.pm-lock-toast {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translate(-50%, 24px);
    z-index: 9500;
    display: flex; align-items: center; gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 12px 16px;
    background: #14110D;
    color: #F5EFE3;
    border: 1px solid rgba(215, 191, 129, 0.32);
    border-radius: 14px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.45);
    font-family: var(--sans);
    font-size: 13px; line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transition: transform .25s var(--ease-out), opacity .25s;
}
.pm-lock-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.pm-lock-toast svg { color: var(--gold); flex-shrink: 0; }
.pm-lock-toast strong { color: var(--gold); font-weight: 700; margin-right: 4px; }
.pm-lock-toast-cta {
    display: inline-flex; align-items: center;
    padding: 8px 14px; border-radius: 100px;
    background: var(--gold); color: #14110D;
    font-weight: 600; font-size: 12px; letter-spacing: 0.05em;
    text-decoration: none;
    transition: background .2s;
    flex-shrink: 0;
}
.pm-lock-toast-cta:hover { background: var(--gold-bright); }

/* ════════════════════════════════════════════════════════════════════════════
   ANIMATIONS / UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes pmFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pm-learn-v4 .pm-fade-in { animation: pmFadeUp .5s var(--ease-out) both; }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — mobile-first additions
   ════════════════════════════════════════════════════════════════════════════ */

/* ── ≥640 — small tablets ── */
@media (min-width: 640px) {
    .pm-learn-v4 .pm-piano-keyboard { height: 300px; }
    .pm-learn-v4 .pm-pkey-white { padding: 14px 6px 22px; }
    .pm-learn-v4 .pm-pkey-title { font-size: 10px; }
    .pm-learn-v4 .pm-pkey-sub { font-size: 9px; }
    .pm-learn-v4 .pm-reassurance-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
    .pm-learn-v4 .pm-reassure-item { padding: 0 clamp(14px, 2vw, 28px); }
    .pm-learn-v4 .pm-reassure-item + .pm-reassure-item::before { display: block; }
    /* Item 3 opens the second row, so its left rule would hang in the air. */
    .pm-learn-v4 .pm-reassure-item:nth-child(3)::before { display: none; }
    .pm-learn-v4 .pm-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .pm-learn-v4 .pm-articles-cards { grid-template-columns: repeat(2, 1fr); }
    .pm-learn-v4 .pm-saved-grid { grid-template-columns: repeat(2, 1fr); }
    .pm-learn-v4 .pm-pricing-grid { grid-template-columns: 1fr 1fr; }
    .pm-learn-v4 .pm-bonus-card { grid-template-columns: 48px 1fr auto auto; gap: 18px; padding: 22px 16px; }
}

/* ── ≥980 — desktop entry ── */
@media (min-width: 980px) {
    .pm-learn-v4 .pm-cats-grid { grid-template-columns: repeat(3, 1fr); }
    .pm-learn-v4 .pm-articles-cards { grid-template-columns: repeat(3, 1fr); }
    .pm-learn-v4 .pm-saved-grid { grid-template-columns: repeat(3, 1fr); }
    .pm-learn-v4 .pm-reassurance-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
    /* One row now, so every item but the first carries its rule. */
    .pm-learn-v4 .pm-reassure-item:nth-child(3)::before { display: block; }
    .pm-learn-v4 .pm-mod-num { flex: 0 0 76px; width: 76px; height: 76px; font-size: 28px; }
    /* Round 24 — REMOVED dead margin rules that pushed .pm-mod-show-lessons
       and .pm-mod-lessons-panel 92px to the right. They came from a previous
       layout where the toggle sat OUTSIDE .pm-mod-info, next to the big
       circular .pm-mod-num. The current layout (button is INSIDE
       .pm-mod-info next to .pm-mod-open-btn in a flex .pm-mod-actions row)
       does not need any horizontal offset; the dead rules were causing the
       desktop alignment the user reported. */
    .pm-learn-v4 .pm-lessons-grid { grid-template-columns: 1fr 1fr; }

    /* WYL becomes a centered modal card on desktop */
}

/* ── ≥1024 — full desktop ── */
@media (min-width: 1024px) {
    .pm-learn-v4 .pm-piano-sec { padding-top: 120px; padding-bottom: 96px; }
    .pm-learn-v4 .pm-piano-keyboard { height: 360px; }
    .pm-learn-v4 .pm-piano-cabinet { padding: 18px 14px 28px; border-radius: 18px 18px 26px 26px; }
    .pm-learn-v4 .pm-pkey-white { padding: 18px 8px 28px; }
    .pm-learn-v4 .pm-pkey-note { font-size: 72px; }
    .pm-learn-v4 .pm-pkey-title { font-size: 11px; letter-spacing: 0.12em; }
    .pm-learn-v4 .pm-pkey-sub { font-size: 10px; }
    .pm-learn-v4 .pm-bonus-card { grid-template-columns: 60px 1fr auto auto; gap: 28px; padding: 26px 20px; }
    .pm-learn-v4 .pm-bonus-card-body h4 { font-size: 30px; letter-spacing: -0.02em; }
    .pm-learn-v4 .pm-bonus-card-icon { font-size: 13px; }
    .pm-learn-v4 .pm-bonus-arrow { width: 44px; height: 44px; }
    .pm-learn-v4 .pm-bonus-card:hover { padding-left: 28px; }
}

/* ── PIANO KEY name offsets (everywhere) ──
   Black keys cover the inner half of the white keys. The note glyphs
   need to shift away from the covered side: Do/Fa nudge LEFT, Mi/Sol
   nudge RIGHT, Re stays centered. Margin (not transform) so the
   .active scale(1.08) animation still composes cleanly. */
.pm-learn-v4 .pm-pkey-white[data-level="beginner"] .pm-pkey-note,
.pm-learn-v4 .pm-pkey-white[data-level="advanced"] .pm-pkey-note {
    margin-right: 14px;
}
.pm-learn-v4 .pm-pkey-white[data-level="intermediate"] .pm-pkey-note,
.pm-learn-v4 .pm-pkey-white[data-level="expert"] .pm-pkey-note {
    margin-left: 14px;
}

/* Lessons grid + lesson cards must never overflow on narrow viewports,
   regardless of whether the panel sits inside .pm-mod-info or below
   the row (LiteSpeed may still be serving an older markup variant). */
.pm-learn-v4 .pm-mod-lessons-panel,
.pm-learn-v4 .pm-mod-info .pm-mod-lessons-panel {
    max-width: 100%;
    overflow: hidden;
}
.pm-learn-v4 .pm-lessons-grid {
    width: 100%;
    overflow: hidden;
}
.pm-learn-v4 .pm-lcard,
.pm-learn-v4 .pm-lcard-body { min-width: 0; max-width: 100%; }

/* ─────────────────── MOBILE MODULES & LESSONS ───────────────────
   The default (≥601px) layout is a zigzag: a big circular number on
   one side and the white .pm-mod-info card on the other, with the
   number badge and the lessons-panel taking up roughly half the row
   each. On mobile that flex-row pattern collapses every text node into
   a column ~150px wide — lesson titles get clipped to "Modal Improvis…"
   and the action pills wrap to two side-by-side buttons that no longer
   align with the card padding.

   We rebuild the layout for ≤600px:
   - Wrapper goes column, killing the zigzag (flex-direction reset).
   - Number badge becomes a smaller chip pinned to the top-left of the
     info card so the title can use the FULL row width.
   - Info card padding tightens (16px 14px) so the lesson cards inside
     have room to breathe and the title can render across 2-3 lines.
   - .pm-mod-actions stacks vertically, left-aligned, with each button
     left-aligned (NOT full-width — the user explicitly asked for them
     vertically aligned to the left). Max-width:fit-content keeps them
     compact and readable instead of stretched.
   - Lesson cards inside the panel get a slimmer left padding so the
     number bubble + title + meta line up cleanly. */
@media (max-width: 600px) {
    /* Stacked on narrow screens. The two rules that used to un-mirror the even
       rows here are gone with the zigzag itself. */
    .pm-learn-v4 .pm-mod-wrapper .pm-mod-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .pm-learn-v4 .pm-mod-num {
        /* Lock flex-basis WITH width/height: the base rule sets flex:0 0 64px,
           and in a flex row flex-basis wins over width — so setting only
           width:44px left the badge 64px wide × 44px tall (an oval). All three
           at 44px keeps it a perfect circle at any flex direction. */
        flex: 0 0 44px; width: 44px; height: 44px;
        align-self: flex-start;
        font-size: 18px;
    }
    .pm-learn-v4 .pm-mod-info {
        padding: 16px 14px;
    }
    .pm-learn-v4 .pm-mod-info h3 {
        font-size: 18px; line-height: 1.18;
    }
    .pm-learn-v4 .pm-mod-info p {
        font-size: 13px;
    }
    .pm-learn-v4 .pm-mod-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .pm-learn-v4 .pm-mod-open-btn,
    .pm-learn-v4 .pm-mod-show-lessons {
        width: auto;
        max-width: 100%;
    }
    .pm-learn-v4 .pm-mod-info .pm-lessons-grid {
        gap: 6px;
    }
    .pm-learn-v4 .pm-lcard {
        padding: 10px 12px;
        gap: 10px;
    }
    .pm-learn-v4 .pm-lcard-num {
        width: 26px; height: 26px;
        font-size: 10px;
    }
    .pm-learn-v4 .pm-lcard-body h4 {
        /* On mobile the card is full width minus 26px badge minus paddings,
           leaving ~85% of viewport for the title. Three lines is plenty. */
        -webkit-line-clamp: 3;
        font-size: 13px;
        line-height: 1.32;
    }
    .pm-learn-v4 .pm-lcard-meta {
        font-size: 9.5px; gap: 8px;
        flex-wrap: wrap;
    }
    /* The right-side chevron in each lesson card eats ~16-22px of horizontal
       space on viewports that are already cramped. The card itself is fully
       clickable (it's an <a>), so the arrow is purely decorative on mobile —
       hiding it gives the title ~12% more width and stops the truncation
       the user reported in the latest screenshot. */
    .pm-learn-v4 .pm-lcard-arrow {
        display: none;
    }
    /* Absolute belt + braces: kill any leftover Round-23-pre rule that
       expected the lessons grid to be 2 columns. We force single-column
       inside the info card AND outside it so neither rendering path
       (server-static vs AJAX) leaves a 2-col grid on a phone. */
    .pm-learn-v4 .pm-lessons-grid,
    .pm-learn-v4 .pm-mod-info .pm-lessons-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Module overview must NOT touch the next "Modules & Lessons" heading. */
.pm-learn-v4 .pm-modules-sec { margin-top: clamp(40px, 6vw, 96px); }

/* ── MOBILE keyboard ── */
@media (max-width: 720px) {
    /* Level title rotated 90° vertically to fit on the narrow key. */
    .pm-learn-v4 .pm-pkey-title {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 9px !important;
        letter-spacing: 0.10em;
        white-space: nowrap;
        margin-top: 6px;
        line-height: 1;
    }
    .pm-learn-v4 .pm-pkey-sub { display: none; }
    /* Smaller note glyphs so they sit cleanly between the black keys. */
    .pm-learn-v4 .pm-pkey-note {
        font-size: 30px !important;
        line-height: 1;
    }
    .pm-learn-v4 .pm-pkey-bottom-area { gap: 4px; }
    .pm-learn-v4 .pm-pkey-prog { width: 90%; }
    .pm-learn-v4 .pm-pkey-pnum { display: none; }
}

/* Module hidden -5 must apply on EVERY viewport (the legacy CSS
   already hides them, but a few cached tags lingered). Force it. */
.pm-learn-v4 .pm-modules-list.pm-modules-collapsed .pm-mod-wrapper.pm-mod-hidden {
    display: none !important;
}

/* ── ≤480 — phone optimizations ── */
@media (max-width: 480px) {
    .pm-learn-v4 .pm-piano-keyboard { height: 220px; }
    .pm-learn-v4 .pm-pkey-sub { display: none; }
    .pm-learn-v4 .pm-pkey-prog { display: none; }
    /* width included: without it this inherited 44px from the ≤600 block while
       flex-basis set the height to 56px, and the circle became an oval. */
    .pm-learn-v4 .pm-mod-num { flex: 0 0 56px; width: 56px; height: 56px; font-size: 22px; border-width: 2px; }
    .pm-learn-v4 .pm-modules-list::before { display: none; }
    /* Round 24 — REMOVED dead !important margin rules that pushed
       .pm-mod-show-lessons and .pm-mod-lessons-panel 70px to the right.
       Same reasoning as the ≥980 block: they target a structure that no
       longer exists (button outside .pm-mod-info). Their !important kept
       the desktop alignment crooked even after the @media (max-width:600)
       block tried to stack the actions vertically. */
    .pm-learn-v4 .pm-bonus-card { grid-template-columns: 28px 1fr auto auto; gap: 10px; padding: 14px 10px; }
    .pm-learn-v4 .pm-bonus-card-body h4 { font-size: 17px; }
    .pm-learn-v4 .pm-bonus-card-body { padding-left: 10px; }
    .pm-learn-v4 .pm-bonus-card-meta { font-size: 9px; gap: 6px; }
    .pm-learn-v4 .pm-bonus-arrow,
    .pm-learn-v4 .pm-bonus-lock-icon { width: 32px; height: 32px; }
    .pm-learn-v4 .pm-tb-group { gap: 8px; }
    .pm-learn-v4 .pm-tb-item { padding: 6px 10px; font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LIGHT-SCENE GOLD CONTRAST
   ----------------------------------------------------------------------------
   The piano stage and the Specialized Courses band are now light, so their
   gold text uses the deeper gold to stay legible on cream, matching the rest
   of the light page. (--gold-deep lifts back to a bright gold under
   data-theme=dark, so these stay bright there too.)
   ════════════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-intro-hero-eyebrow,
.pm-learn-v4 .pm-intro-hero-lead em,
.pm-learn-v4 .pm-intro-feat-num,
.pm-learn-v4 .pm-intro-hero-disclaimer strong,
.pm-learn-v4 .pm-intro-placement-eyebrow,
.pm-learn-v4 .pm-intro-hero-collapse-toggle,
.pm-learn-v4 .pm-intro-hero-bar__eyebrow,
.pm-learn-v4 .pm-stage-hint,
.pm-learn-v4 .pm-bonus-change-level,
.pm-learn-v4 .pm-bonus-modules-sec .pm-sec-header p strong,
.pm-learn-v4 .pm-bonus-cat-show-all,
.pm-learn-v4 .pm-bonus-cat-num,
.pm-learn-v4 .pm-bonus-row[aria-expanded="true"] .pm-bonus-row-chev {
    color: var(--gold-deep);
}
.pm-learn-v4 .pm-intro-hero-btn-secondary:hover {
    color: var(--gold-deep); border-color: var(--gold-deep);
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK THEME  (html[data-theme="dark"])
   ----------------------------------------------------------------------------
   The Learn page ships light by default (cream editorial scheme). When the
   site theme is dark, the whole page flips to the charcoal and gold palette
   shared with Listen and Play: a near-black page, gold-tinted charcoal cards,
   light ink text. The local presentational tokens carry most of the work; the
   few overloaded spots (gold buttons, the real white piano keys) are re-pinned
   so they keep the right contrast.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .pm-learn-v4 {
    --paper:    #141414;
    --paper-2:  #1A1A1A;
    --paper-3:  #201E19;

    --ink:      #F5EFE3;
    --text:     #ECE6DA;
    --text-2:   rgba(245, 239, 227, 0.74);
    --text-3:   rgba(245, 239, 227, 0.52);
    --text-4:   rgba(245, 239, 227, 0.40);

    --line:     rgba(215, 191, 129, 0.14);
    --line-2:   rgba(215, 191, 129, 0.24);

    /* Deep gold reads as a near-brown on cream, but on charcoal it needs to
       lift to a legible gold for links, labels and badge text. */
    --gold-deep: #CBAE6B;

    color-scheme: dark;
    background: #101010;
    color: var(--text);
}

/* The concert piano keeps real white keys in both themes, so re-pin the
   label inks back to dark on the keyboard only. */
html[data-theme="dark"] .pm-learn-v4 .pm-piano-keyboard {
    --ink:    #18140F;
    --text-3: #7D7567;
    --text-4: #A89F8C;
}

/* Full-bleed scenes flip from cream back to charcoal. The piano stage sits a
   step lighter than the page so it reads as a raised panel against the modules
   section that follows. */
html[data-theme="dark"] .pm-learn-v4 .pm-piano-sec {
    background:
        radial-gradient(ellipse at 50% -6%, rgba(215, 191, 129, 0.12), transparent 52%),
        linear-gradient(180deg, #201E19 0%, #1B1A17 58%, #181715 100%);
}
html[data-theme="dark"] .pm-learn-v4 .pm-intro-hero {
    /* Harmonise the first component with the shared dark card template
       (gold-tinted charcoal on #201E19) instead of the old muddier brown
       (#2A2620->#1E1B16). It keeps a slightly richer top-left gold glow so it
       still reads as the hero, but sits in the same palette as every other
       card below it. */
    background:
        radial-gradient(ellipse at 12% -10%, rgba(215, 191, 129, 0.14), transparent 55%),
        linear-gradient(165deg, rgba(215, 191, 129, 0.10) 0%, rgba(215, 191, 129, 0.03) 42%, transparent 70%),
        #201E19;
    box-shadow:
        0 20px 48px -24px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(215, 191, 129, 0.08);
}

/* Concert piano: the deep black shadow reads better than the warm cream one. */
html[data-theme="dark"] .pm-learn-v4 .pm-piano-cabinet {
    box-shadow:
        0 60px 110px -48px rgba(0, 0, 0, 0.9),
        0 28px 56px -22px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(215, 191, 129, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

/* Cards: gold-tinted charcoal (the shared site card template). */
html[data-theme="dark"] .pm-learn-v4 .pm-reassure-item,
html[data-theme="dark"] .pm-learn-v4 .pm-mod-info,
html[data-theme="dark"] .pm-learn-v4 .pm-lcard,
html[data-theme="dark"] .pm-learn-v4 .pm-price-card,
html[data-theme="dark"] .pm-learn-v4 .pm-cat-card,
html[data-theme="dark"] .pm-learn-v4 .pm-art-card,
html[data-theme="dark"] .pm-learn-v4 .pm-locked-inner {
    background:
        linear-gradient(165deg, rgba(215, 191, 129, 0.09) 0%, rgba(215, 191, 129, 0.02) 42%, transparent 70%),
        #201E19;
    border-color: var(--line);
}
html[data-theme="dark"] .pm-learn-v4 .pm-lcard:hover { background: #262420; }

/* Number discs: charcoal, with the gold numerals carrying the contrast. */
html[data-theme="dark"] .pm-learn-v4 .pm-mod-num,
html[data-theme="dark"] .pm-learn-v4 .pm-lcard-num {
    background: #1C1A16;
}

/* Gold CTAs keep dark ink text once --ink has flipped light. */
html[data-theme="dark"] .pm-learn-v4 .pm-btn-gold,
html[data-theme="dark"] .pm-learn-v4 .pm-intro-placement-btn,
html[data-theme="dark"] .pm-learn-v4 .pm-intro-hero-btn-primary,
html[data-theme="dark"] .pm-learn-v4 .pm-intro-hero-cta-open,
html[data-theme="dark"] .pm-learn-v4 .pm-assess-cta-btn,
html[data-theme="dark"] .pm-learn-v4 .pm-bonus-row-cta,
html[data-theme="dark"] .pm-learn-v4 .pm-price-card__ribbon,
html[data-theme="dark"] .pm-learn-v4 .pm-tour-final-start {
    color: #1b1505;
}

/* Inky primary buttons become gold fills, the natural dark-mode primary. */
html[data-theme="dark"] .pm-learn-v4 .pm-btn-dark,
html[data-theme="dark"] .pm-learn-v4 .pm-modules-show-all,
html[data-theme="dark"] .pm-learn-v4 .pm-pricing-toggle button.active,
html[data-theme="dark"] .pm-learn-v4 .pm-locked-btn-primary,
html[data-theme="dark"] .pm-learn-v4 .pm-tour-next {
    background: var(--gold);
    color: #1b1505;
}
html[data-theme="dark"] .pm-learn-v4 .pm-btn-dark:hover,
html[data-theme="dark"] .pm-learn-v4 .pm-modules-show-all:hover,
html[data-theme="dark"] .pm-learn-v4 .pm-locked-btn-primary:hover,
html[data-theme="dark"] .pm-learn-v4 .pm-tour-next:hover {
    background: var(--gold-bright);
    color: #1b1505;
}

/* Expanded FAQ chevron: gold disc with a dark glyph. */
html[data-theme="dark"] .pm-learn-v4 .pm-faq-question[aria-expanded="true"] .pm-faq-chevron {
    background: var(--gold); color: #1b1505; border-color: var(--gold);
}

/* The featured pricing card was an ink slab; on a dark page it becomes a
   gold-edged charcoal so it still reads as the premium pick. */
html[data-theme="dark"] .pm-learn-v4 .pm-price-card.featured {
    background:
        linear-gradient(165deg, rgba(215, 191, 129, 0.16) 0%, rgba(215, 191, 129, 0.05) 50%, transparent 80%),
        #1C1A15;
    color: var(--ink);
    border: 1px solid var(--gold-border);
    box-shadow: 0 30px 64px -28px rgba(0, 0, 0, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLLAPSED PANELS — SKIP THE LAYOUT, NOT JUST THE PIXELS
   2026-07-31

   Search Console reports this site's ONLY remaining Core Web Vitals problem as
   INP above 200 ms on mobile (31 URLs; LCP is clean, no "poor" URL). INP is the
   delay between a tap and the next paint, so anything that makes the browser
   re-lay-out a large subtree on interaction shows up directly in that number.

   Every collapsed panel on this page is hidden with `max-height: 0` +
   `overflow: hidden`. That clips the pixels but the browser still lays out and
   paints the whole subtree — on /learn/ that is roughly sixty lesson cards
   sitting inside the five visible modules, plus the specialized-course bodies
   and the FAQ answers, all measured on every reflow for nothing.

   `content-visibility: auto` tells the browser to skip layout AND paint of the
   subtree until it is actually relevant, and to render it the moment it is.
   It is safe here precisely because these three elements are ALREADY
   `overflow: hidden`: the paint containment it implies cannot clip anything the
   existing rule was not clipping. Browsers without support ignore the line.

   NOT applied to `.pm-mod-wrapper`, deliberately: the fade under module five
   (`:nth-of-type(5)::after`) is positioned `bottom: -28px` and overflows its
   wrapper on purpose, so paint containment there WOULD clip it. The nine
   modules beyond the fifth are already `display: none` and cost nothing.
   ═══════════════════════════════════════════════════════════════════════════ */

.pm-learn-v4 .pm-mod-info .pm-mod-lessons-panel.pm-collapsed,
.pm-learn-v4 .pm-bonus-row-body.pm-collapsed,
.pm-learn-v4 .pm-faq-answer.pm-collapsed {
    content-visibility: auto;
}


/* Module blocks: skip the layout of the ones nobody is looking at.
   2026-07-31 — same INP campaign as the collapsed-panel rule above.

   Two moments pay for laying out all fourteen module blocks at once: the first
   paint, and every level switch, since tapping a piano key replaces the whole
   list with a single innerHTML assignment. `content-visibility: auto` limits
   the browser's layout and paint work to the blocks near the viewport, so both
   moments cost what is on screen rather than what is in the document.

   `contain-intrinsic-size: auto 320px` gives an off-screen block a placeholder
   height so the scrollbar does not jump, and `auto` makes the browser remember
   each block's real height once it has rendered it a first time.

   The fifth block is EXCLUDED on purpose: it carries the "show all" fade in a
   ::after positioned `bottom: -28px`, which overflows its wrapper by design.
   content-visibility implies paint containment, which would clip it. */
.pm-learn-v4 .pm-mod-wrapper:not(:nth-of-type(5)) {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}

/* =====================================================================
   PRE-LAUNCH PRICING — plans visible, figures withheld
   ---------------------------------------------------------------------
   The cards are deliberately left in place and at full size: they are
   what still communicates the offer. Only the number is withheld, and it
   is withheld in the markup (a $--.-- placeholder), not merely blurred —
   a blurred real price is still a real price in view-source.
   ===================================================================== */

.pm-price-veiled {
    filter: blur(7px);
    -webkit-filter: blur(7px);
    opacity: .55;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* The site-wide page transition fades a cover layer over the outgoing
   page. Any filtered layer underneath can freeze as a blurred ghost
   rectangle in WebKit/Blink, so drop the blur for the duration of the
   fade — the same guard the lock overlays already use. */
html.pm-pt-out .pm-price-veiled {
    filter: none !important;
    -webkit-filter: none !important;
}

.pm-pricing-sec--prelaunch .pm-pricing-grid {
    position: relative;
}

/* Cards keep their layout; they simply recede behind the layer. */
.pm-pricing-sec--prelaunch .pm-price-card {
    opacity: .38;
    pointer-events: none;
}

.pm-prelaunch-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pm-prelaunch-card {
    width: min(560px, 100%);
    text-align: center;
    padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 34px);
    border-radius: 20px;
    border: 1px solid rgba(215, 191, 129, .34);
    background: linear-gradient(180deg, rgba(24, 21, 16, .97), rgba(13, 12, 10, .99));
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.pm-prelaunch-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(215, 191, 129, .34);
    background: rgba(215, 191, 129, .10);
    color: var(--pm-gold, #D7BF81);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pm-prelaunch-title {
    margin: 0 0 10px;
    font-family: var(--pm-serif, "Fraunces", Georgia, serif);
    font-weight: 300;
    font-size: clamp(22px, 3.4vw, 32px);
    line-height: 1.22;
    color: #F5EFE3;
}
.pm-prelaunch-title em {
    font-style: italic;
    color: var(--pm-gold, #D7BF81);
}

.pm-prelaunch-lead {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(245, 239, 227, .74);
}
.pm-prelaunch-lead strong { color: #F5EFE3; font-weight: 700; }

.pm-prelaunch-form {
    display: flex;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto;
}

.pm-prelaunch-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(215, 191, 129, .26);
    background: rgba(255, 255, 255, .04);
    color: #F5EFE3;
    font-family: inherit;
    font-size: 14px;
}
.pm-prelaunch-input::placeholder { color: rgba(245, 239, 227, .38); }
.pm-prelaunch-input:focus {
    outline: none;
    border-color: var(--pm-gold, #D7BF81);
    box-shadow: 0 0 0 3px rgba(215, 191, 129, .16);
}

.pm-prelaunch-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 20px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #E6D4A8, #D7BF81);
    color: #16130C;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .18s ease, transform .12s ease;
}
.pm-prelaunch-submit:hover { filter: brightness(1.06); }
.pm-prelaunch-submit:active { transform: translateY(1px); }
.pm-prelaunch-submit:disabled { opacity: .6; cursor: default; }

.pm-prelaunch-status {
    min-height: 18px;
    margin-top: 10px;
    font-size: 13px;
    color: rgba(245, 239, 227, .7);
}
.pm-prelaunch-status.is-ok    { color: #8FD8A4; }
.pm-prelaunch-status.is-error { color: #E8A0A0; }

.pm-prelaunch-fine {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(245, 239, 227, .42);
}

@media (max-width: 560px) {
    .pm-prelaunch-form { flex-direction: column; }
    .pm-prelaunch-submit { justify-content: center; }
}

html[data-theme="light"] .pm-prelaunch-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 247, 242, .99));
    border-color: rgba(184, 134, 11, .28);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .18);
}
html[data-theme="light"] .pm-prelaunch-title { color: #1a1a1a; }
html[data-theme="light"] .pm-prelaunch-lead  { color: rgba(26, 26, 26, .7); }
html[data-theme="light"] .pm-prelaunch-lead strong { color: #1a1a1a; }
html[data-theme="light"] .pm-prelaunch-input { background: rgba(0, 0, 0, .03); color: #1a1a1a; }
html[data-theme="light"] .pm-prelaunch-fine  { color: rgba(26, 26, 26, .45); }

/* ── LIGHT-THEME ANSWERS, GENERATED FROM check-heading-themes ──────────────
   Every selector below declared a colour for the dark theme and had no
   light counterpart anywhere in this file, so the light theme kept the
   dark value — which is how a title ends up the colour of the band behind
   it. Reported four times and fixed three times one heading at a time;
   this is the whole set at once, and the check now fails if a new one
   appears. Gold accents map to --pm-gold-on-paper (6.03:1 on white),
   cream and white to the ink, greys to a readable mid-tone. */
html[data-theme="light"] .pm-learn-v4 .pm-sec-header h2 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-sec-header h2 span { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-learn-v4 .pm-intro-hero-eyebrow { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-learn-v4 .pm-intro-hero h1 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-intro-hero h1 em { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-learn-v4 .pm-intro-placement-eyebrow { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-learn-v4 .pm-intro-hero-bar__eyebrow { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-learn-v4 .pm-assess-cta-text h2 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-piano-sec .pm-sec-header h2 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-pkey-title { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-pkey-white.active .pm-pkey-title { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-learn-v4 .pm-pkey-sub { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-reassure-item h4 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-mod-info h3 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-lcard-body h4 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-bonus-modules-sec .pm-sec-header h2 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-bonus-row-desc { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-cat-eyebrow { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-learn-v4 .pm-cat-card h3 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-articles-showcase-title { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-art-body h4 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-locked-inner h2 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-tour-title { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-tour-title em { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-learn-v4 .pm-tour-final-eyebrow { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-learn-v4 .pm-tour-final h3 { color: #221E16; }
html[data-theme="light"] .pm-learn-v4 .pm-tour-final h3 em { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-prelaunch-eyebrow { color: var(--pm-gold-on-paper, #7A5F1C); }
html[data-theme="light"] .pm-prelaunch-title em { color: var(--pm-gold-on-paper, #7A5F1C); }

/* Le mot d'accent tombe ici sur un panneau clair, mesure a 1.46:1 avec le
   degrade dore par defaut. Meme geste, memes glyphes, gradient de la
   famille papier : voir --pm-grad-gold-on-paper dans design-system.css. */
html[data-theme="light"] .pm-learn-v4 .pm-sec-header h2 span {
    /* background-IMAGE, pas le raccourci `background` : le raccourci
       reinitialise background-clip a border-box, donc le degrade repeint la
       BOITE au lieu des glyphes et le titre devient un rectangle dore avec
       du texte transparent dedans. Ecrit une premiere fois avec le
       raccourci, vu parce que la sonde a cesse de compter ces titres. */
    background-image: var(--pm-grad-gold-on-paper);
}

/* ═══════════════════════════════════════════════════════════════════════
   THE LEVEL PANEL, INSIDE THE CABINET
   ═══════════════════════════════════════════════════════════════════════
   One block replacing three that each re-announced the level. It lives in
   the cabinet's dark wood, so it is typed for that ground: cream ink, a
   gold hairline, and the level's own colour used once, on the note and on
   the progress fill, where it carries information rather than decoration.

   It never touches .pm-keyboard-rim: the keys are measured by
   learn-page.js (getBoundingClientRect on .pm-pkey-white, for the particle
   burst), so anything that changed their box would move the particles.
   ═══════════════════════════════════════════════════════════════════════ */
.pm-learn-v4 .pm-level {
    margin: 18px 6px 2px;
    padding: 20px 20px 18px;
    border-radius: 14px;
    /* A lighter plate ON the wood rather than a card floating off it. */
    background: linear-gradient(180deg, rgba(255, 250, 238, 0.055), rgba(255, 250, 238, 0.022));
    border: 1px solid rgba(215, 191, 129, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 250, 238, 0.07);
    color: rgba(247, 243, 232, 0.92);
}

/* ── identity: said once ─────────────────────────────────────────────── */
.pm-learn-v4 .pm-level__head {
    display: flex; align-items: center; gap: 16px;
}
.pm-learn-v4 .pm-level__note {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border-radius: 13px;
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-size: 30px; font-weight: 300; font-style: italic;
    line-height: 1;
    /* The glyph sits on the level's colour at low alpha, so the colour is
       readable as an identity without shouting. */
    color: var(--kc, #D7BF81);
    background: color-mix(in srgb, var(--kc, #D7BF81) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--kc, #D7BF81) 34%, transparent);
    /* Descender room: Fraunces italic hangs well below the baseline and a
       grid cell clips at the box. */
    padding-bottom: 4px;
}
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    .pm-learn-v4 .pm-level__note {
        background: rgba(215, 191, 129, 0.14);
        border-color: rgba(215, 191, 129, 0.34);
    }
}
.pm-learn-v4 .pm-level__idn { min-width: 0; }
.pm-learn-v4 .pm-level__name {
    margin: 0 0 3px;
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 300;
    letter-spacing: -0.015em;
    line-height: 1.16;
    color: #FBF7EC;
}
.pm-learn-v4 .pm-level__meta {
    margin: 0;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-family: var(--sans, 'Montserrat', system-ui, sans-serif);
    font-size: 13px; font-weight: 500; line-height: 1.5;
    color: rgba(247, 243, 232, 0.62);
}
.pm-learn-v4 .pm-level__sep {
    width: 3px; height: 3px; border-radius: 50%;
    background: currentColor; opacity: 0.5;
}

/* ── how far you are ─────────────────────────────────────────────────── */
.pm-learn-v4 .pm-level__progress { margin-top: 18px; }
.pm-learn-v4 .pm-level__bar {
    height: 5px; border-radius: 99px; overflow: hidden;
    background: rgba(255, 250, 238, 0.10);
}
.pm-learn-v4 .pm-level__fill {
    display: block; height: 100%; border-radius: 99px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--kc, #D7BF81) 70%, #F0E2BC),
        var(--kc, #D7BF81));
    transition: width 640ms cubic-bezier(.22, 1, .36, 1);
}
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    .pm-learn-v4 .pm-level__fill { background: var(--kc, #D7BF81); }
}
.pm-learn-v4 .pm-level__figures {
    margin: 9px 0 0;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
    font-family: var(--sans, 'Montserrat', system-ui, sans-serif);
    font-size: 12.5px; letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: rgba(247, 243, 232, 0.58);
}
.pm-learn-v4 .pm-level__figures strong { color: #FBF7EC; font-weight: 600; }
.pm-learn-v4 .pm-level__pct { color: var(--kc, #D7BF81); font-weight: 600; }

/* ── what you will be able to play ───────────────────────────────────── */
.pm-learn-v4 .pm-level__skills { margin-top: 20px; }
.pm-learn-v4 .pm-level__skills-h {
    margin: 0 0 10px;
    font-family: var(--sans, 'Montserrat', system-ui, sans-serif);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(215, 191, 129, 0.72);
}
.pm-learn-v4 .pm-level__cats {
    display: grid; gap: 1px;
    border-radius: 10px; overflow: hidden;
    background: rgba(215, 191, 129, 0.14);   /* shows through as hairlines */
}
.pm-learn-v4 .pm-skillcat { background: rgba(12, 8, 5, 0.34); }
.pm-learn-v4 .pm-skillcat__sum {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    cursor: pointer; list-style: none;
    font-family: var(--sans, 'Montserrat', system-ui, sans-serif);
    font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
    color: rgba(247, 243, 232, 0.90);
    transition: background 180ms ease;
}
.pm-learn-v4 .pm-skillcat__sum::-webkit-details-marker { display: none; }
.pm-learn-v4 .pm-skillcat__sum:hover { background: rgba(255, 250, 238, 0.04); }
.pm-learn-v4 .pm-skillcat__sum:focus-visible {
    outline: 2px solid var(--kc, #D7BF81); outline-offset: -2px;
}
.pm-learn-v4 .pm-skillcat__name { flex: 1 1 auto; min-width: 0; }
.pm-learn-v4 .pm-skillcat__n {
    flex: 0 0 auto;
    min-width: 20px; padding: 2px 7px;
    border-radius: 99px;
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    text-align: center;
    color: rgba(215, 191, 129, 0.92);
    background: rgba(215, 191, 129, 0.12);
}
.pm-learn-v4 .pm-skillcat__chev {
    flex: 0 0 auto; opacity: 0.55;
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.pm-learn-v4 .pm-skillcat[open] .pm-skillcat__chev { transform: rotate(180deg); }
.pm-learn-v4 .pm-skillcat__list {
    margin: 0; padding: 0 14px 14px;
    list-style: none;
    display: grid; gap: 10px;
}
.pm-learn-v4 .pm-skillcat__list li {
    display: grid; gap: 2px;
    padding-left: 14px;
    position: relative;
}
.pm-learn-v4 .pm-skillcat__list li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--kc, #D7BF81); opacity: 0.55;
}
.pm-learn-v4 .pm-skillcat__skill {
    font-family: var(--sans, 'Montserrat', system-ui, sans-serif);
    font-size: 12.5px; font-weight: 600;
    color: rgba(247, 243, 232, 0.88);
}
.pm-learn-v4 .pm-skillcat__desc {
    font-family: var(--sans, 'Montserrat', system-ui, sans-serif);
    font-size: 12px; line-height: 1.5;
    color: rgba(247, 243, 232, 0.52);
}

/* ── one way in ──────────────────────────────────────────────────────── */
.pm-learn-v4 .pm-level__foot {
    margin-top: 20px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px;
}
.pm-learn-v4 .pm-level__cta {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 24px;
    border-radius: 99px;
    text-decoration: none;
    font-family: var(--sans, 'Montserrat', system-ui, sans-serif);
    font-size: 14px; font-weight: 700; letter-spacing: 0.015em;
    color: #14100A;
    background: linear-gradient(135deg, #EFE0BC, #D7BF81);
    box-shadow: 0 12px 26px -12px rgba(215, 191, 129, 0.75);
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1),
                box-shadow 220ms ease;
}
.pm-learn-v4 .pm-level__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(215, 191, 129, 0.85);
}
.pm-learn-v4 .pm-level__cta svg { transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
.pm-learn-v4 .pm-level__cta:hover svg { transform: translateX(3px); }
.pm-learn-v4 .pm-level__assess { color: inherit; }
.pm-learn-v4 .pm-level__assess a {
    color: rgba(215, 191, 129, 0.95);
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(215, 191, 129, 0.4);
}
.pm-learn-v4 .pm-level__assess a:hover { text-decoration-color: rgba(215, 191, 129, 0.9); }

@media (prefers-reduced-motion: reduce) {
    .pm-learn-v4 .pm-level__fill,
    .pm-learn-v4 .pm-level__cta,
    .pm-learn-v4 .pm-level__cta svg,
    .pm-learn-v4 .pm-skillcat__chev { transition: none; }
    .pm-learn-v4 .pm-level__cta:hover { transform: none; }
}

@media (max-width: 640px) {
    .pm-learn-v4 .pm-level { margin: 16px 2px 0; padding: 16px 14px 14px; }
    .pm-learn-v4 .pm-level__note { width: 44px; height: 44px; font-size: 25px; border-radius: 11px; }
    .pm-learn-v4 .pm-level__head { gap: 12px; }
    .pm-learn-v4 .pm-level__foot { gap: 10px; }
    .pm-learn-v4 .pm-level__cta { width: 100%; justify-content: center; }
}

/* ── Specialized course: its lessons, in place ────────────────────────────
   A row sold a course by its name, its lesson COUNT and its minutes, and gave
   no way to see what those lessons are. The toggle sits beside the way in, so
   "what is in it" and "how do I get it" are one decision, and the list opens
   under both. Compact on purpose: this section is optional and collapsed, and
   nine categories of it must not turn into a wall. */
.pm-learn-v4 .pm-sc-lessons-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--line-2); border-radius: 100px;
    background: none; cursor: pointer;
    font-family: var(--sans); font-weight: 600;
    font-size: 12.5px; letter-spacing: 0.01em;
    color: var(--text-2);
    transition: border-color 200ms ease, color 200ms ease;
}
.pm-learn-v4 .pm-sc-lessons-toggle:hover { border-color: var(--gold-border); color: var(--ink); }
.pm-learn-v4 .pm-sc-lessons-toggle:focus-visible {
    outline: 2px solid var(--gold-deep); outline-offset: 2px;
}
.pm-learn-v4 .pm-sc-lessons-toggle__chev {
    opacity: 0.6;
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.pm-learn-v4 .pm-sc-lessons-toggle.open .pm-sc-lessons-toggle__chev { transform: rotate(180deg); }

.pm-learn-v4 .pm-sc-lessons {
    margin: 14px 0 0; padding: 0;
    list-style: none;
    counter-reset: pmscl;
    display: grid; gap: 1px;
    border-radius: 10px; overflow: hidden;
    background: var(--line);
}
.pm-learn-v4 .pm-sc-lessons.pm-collapsed { display: none; }
.pm-learn-v4 .pm-sc-lesson {
    counter-increment: pmscl;
    display: flex; align-items: baseline; gap: 10px;
    padding: 9px 14px;
    background: var(--paper, #FAF7F2);
    font-family: var(--sans); font-size: 12.5px; line-height: 1.45;
    color: var(--text-1, inherit);
}
.pm-learn-v4 .pm-sc-lesson::before {
    content: counter(pmscl, decimal-leading-zero);
    flex: 0 0 auto;
    font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--gold-deep); opacity: 0.7;
}
.pm-learn-v4 .pm-sc-lesson__name { flex: 1 1 auto; min-width: 0; }
.pm-learn-v4 .pm-sc-lesson__min {
    flex: 0 0 auto;
    font-size: 11.5px; font-variant-numeric: tabular-nums;
    color: var(--text-3); white-space: nowrap;
}
.pm-learn-v4 .pm-sc-lesson--more {
    font-style: italic; color: var(--text-3);
}
.pm-learn-v4 .pm-sc-lesson--more::before { content: ""; }

@media (max-width: 560px) {
    .pm-learn-v4 .pm-sc-lessons-toggle { width: 100%; justify-content: center; }
    .pm-learn-v4 .pm-bonus-row-lock { width: 100%; justify-content: center; }
    .pm-learn-v4 .pm-sc-lesson { padding: 9px 11px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .pm-learn-v4 .pm-sc-lessons-toggle,
    .pm-learn-v4 .pm-sc-lessons-toggle__chev { transition: none; }
}

/* ── the call to action, and the one thing that makes it easy to take ───── */
.pm-learn-v4 .pm-level__go { display: flex; }
/* One line, one baseline. The free note and the assessment link used to be two
   separate blocks, one under the button and one beside it, so they sat at two
   different heights beside the same call to action. */
.pm-learn-v4 .pm-level__note-line {
    margin: 0;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
    font-family: var(--sans, 'Montserrat', system-ui, sans-serif);
    font-size: 12.5px; line-height: 1.5;
    color: rgba(247, 243, 232, 0.55);
}
.pm-learn-v4 .pm-level__free { color: rgba(247, 243, 232, 0.72); }
/* 0% at the top of a funnel reads as a score, and a bad one. It is a start. */
.pm-learn-v4 .pm-level__pct.is-zero {
    font-size: 0; letter-spacing: 0; color: transparent;
}
.pm-learn-v4 .pm-level__pct.is-zero::after {
    content: "not started";
    font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 600;
    color: rgba(247, 243, 232, 0.42);
}
@media (max-width: 640px) {
    .pm-learn-v4 .pm-level__go { width: 100%; }
    .pm-learn-v4 .pm-level__note-line { justify-content: center; text-align: center; }
}