/* =====================================================================
   coursematter — public landing page (Views/Home/Index.cshtml)

   Scoped under .cmx so the template rules in assets/css/site.css
   (Poppins !important on body, header/footer element styles, resets)
   don't leak in, and nothing here leaks out to other pages.

   Design notes
   - One loud moment: the hero "subject shelf". Every course category is a
     book spine on a shelf (a pile of books on phones); picking one opens
     /learner/home with that category filtered. The books sliding onto the
     shelf is the only unprompted motion, apart from the partner logo strip.
   - The notch: the "m" in the wordmark ends in a diagonal cut. The large
     panels carry the same cut on their top-right corner.
   - Colour roles outside the shelf: violet = brand/action, gold =
     certificates, mint = completed, red = live. The shelf uses its own
     book-cloth palette. Deep indigo, not black, for dark surfaces.
   ===================================================================== */

.cmx {
    --ink: #14121f;
    --ink-2: #3d3a4d;
    --muted: #6c6980;
    --paper: #ffffff;
    --wash: #f3f2f8;
    --line: #e4e2ee;
    --night: #6a4bc8;
    --night-2: #5b3fc4;
    --violet: #6d4aff;
    --violet-ink: #4f30e0;
    --violet-soft: #ece8ff;
    --gold: #f2b233;
    --mint: #14a37f;
    --live: #ef4a5a;
    --r-lg: 28px;
    --r-md: 16px;
    --r-sm: 10px;
    --notch: 34px;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --serif: "Sora", "Inter", system-ui, sans-serif;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    overflow-x: clip;
    font-feature-settings: "ss01";
    background: radial-gradient(ellipse 45% 50% at 69% 37%, rgba(240, 215, 180, 0.9) 0%, rgba(245, 230, 210, 0.5) 45%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 35% 45% at 31% 75%, rgba(215, 195, 235, 0.85) 0%, rgba(230, 220, 242, 0.45) 45%, rgba(255, 255, 255, 0) 100%), #ffffff;
}

.cmx *, .cmx *::before, .cmx *::after { box-sizing: border-box; }
.cmx p { color: var(--ink-2); line-height: 1.6; margin: 0; font-weight: 400; }
.cmx h1, .cmx h2, .cmx h3, .cmx h4, .cmx h5 { font-family: var(--serif); color: var(--ink); margin: 0; }
.cmx a { color: inherit; }
.cmx img { max-width: 100%; }
.cmx ::selection { background: var(--violet); color: #fff; }

.cmx-wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.cmx-notch { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }

/* type scale (1.25 ratio off 17px) */
.cmx-h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; max-width: 16ch; }
.cmx-lede { font-size: 19px; max-width: 34em; margin-top: 18px !important; }
.cmx-section { padding: 120px 0; scroll-margin-top: 72px; }
.cmx-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.cmx-head .cmx-lede { margin: 0 !important; }
@media (max-width: 860px) { .cmx-head { grid-template-columns: 1fr; gap: 0; } .cmx-head .cmx-lede { margin-top: 18px !important; } }

/* ---------- buttons ---------- */
.cmx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; padding: 0 26px; border-radius: 999px;
    font: 600 16px/1 var(--sans); letter-spacing: .005em;
    border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.cmx-btn-primary { background: var(--violet); color: #fff !important; }
.cmx-btn-primary:hover { background: var(--violet-ink); }
.cmx-btn-ink { background: var(--ink); color: #fff !important; }
.cmx-btn-ink:hover { background: var(--night-2); }
.cmx-btn-ghost { background: transparent; border-color: var(--line); color: var(--ink) !important; }
.cmx-btn-ghost:hover { border-color: var(--ink); }
.cmx-btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }

.cmx a:focus-visible, .cmx button:focus-visible, .cmx input:focus-visible,
.cmx textarea:focus-visible, .cmx summary:focus-visible {
    outline: 2.5px solid var(--violet); outline-offset: 3px;
}

/* =====================================================================
   Top bar
   ===================================================================== */
.cmx-bar {
    position: sticky; top: 0; z-index: 1030;
    /*background: rgba(255,255,255,.9);*/
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}
.cmx-bar.is-scrolled { border-bottom-color: var(--line); }
.cmx-bar-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.cmx-logo { flex: 0 0 auto; }
.cmx-logo img { height: 40px; width: auto; display: block; }

/* site.css positions #co-course-search absolutely (with !important) for the old header — undo that here */
.cmx-bar #co-course-search { position: relative !important; left: auto; width: auto; margin: 0; text-align: left; flex: 1 1 360px; min-width: 200px; max-width: 400px; }
.cmx-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cmx-bar #co-course-search-input {
    width: 100%; height: 44px; padding: 0 16px 0 44px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--wash);
    font: 15px var(--sans); color: var(--ink);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.cmx-bar #co-course-search-input::placeholder { color: var(--muted); }
.cmx-bar #co-course-search-input:focus { outline: none; background: #fff; border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.cmx-bar #co-course-search-results {
    width: 100%; margin-top: 8px; padding: 6px; border-radius: 14px;
    border: 1px solid var(--line); box-shadow: 0 24px 48px -24px rgba(28,22,70,.35);
    max-height: 60vh; overflow-y: auto; font-family: var(--sans); background: #fff;
}
.cmx-bar #co-course-search-results > li { border-radius: 8px; min-height: 0; }
.cmx-bar #co-course-search-results .dropdown-item { border-radius: 8px; padding: 9px 12px; white-space: normal; }

.cmx-nav { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; margin-left: auto; }
.cmx-nav a.cmx-link { padding: 8px 12px; border-radius: 8px; font-size: 15.5px; font-weight: 500; color: var(--ink-2); }
.cmx-nav a.cmx-link:hover { color: var(--ink); background: var(--wash); }
.cmx-nav a.cmx-link.is-current { color: var(--ink); background: var(--wash); }
.cmx-nav .cmx-btn { margin-left: 12px; }

.cmx-burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center; font-size: 22px; color: var(--ink); }

@media (max-width: 1280px) { .cmx-nav a.cmx-link.cmx-hide-md { display: none; } }
@media (max-width: 860px) {
    .cmx-bar-inner { gap: 14px; }
    .cmx-bar #co-course-search { display: none; }
    .cmx-burger { display: inline-flex; }
    .cmx-nav {
        display: none; position: absolute; top: 72px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 2px;
        padding: 12px 16px 20px; background: #fff; border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 40px -28px rgba(28,22,70,.4);
    }
    .cmx-nav.is-open { display: flex; }
    .cmx-nav a.cmx-link, .cmx-nav a.cmx-link.cmx-hide-md { display: block; padding: 12px; font-size: 17px; }
    .cmx-nav .cmx-btn { margin: 8px 0 0; }
}

/* =====================================================================
   Hero: audience switch + the academy floor plan
   ===================================================================== */
.cmx-hero { position: relative; padding: 20px 0 88px; }
.cmx-hero::before { /* faint drafting grid behind the plan */
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(79,48,224,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(79,48,224,.06) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 50% 70% at 72% 50%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 50% 70% at 72% 50%, #000 30%, transparent 80%);
}
.cmx-hero > .cmx-wrap { position: relative; z-index: 1; }

/* audience switch */
.cmx-aud { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.cmx-aud button {
    height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    font: 600 15px var(--sans); color: var(--ink-2); transition: background-color .2s ease, color .2s ease;
}
.cmx-aud button:hover { color: var(--ink); }
.cmx-aud button[aria-selected="true"] { background: var(--ink); color: #fff; }
.cmx-aud button:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 2px; }

.cmx-hero-panel { display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); gap: 48px; align-items: center; margin-top: 0px; }
.cmx-hero-panel[hidden] { display: none; }
.cmx-hero h1, .cmx-hero .cmx-h1 {
    font-size: clamp(40px, 4.5vw, 64px); line-height: .98; font-weight: 700; letter-spacing: -0.04em; max-width: 12ch; text-wrap: balance;
}
.cmx-hero .cmx-lede { font-size: 19px; margin-top: 22px !important; max-width: 30em; }
.cmx-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.cmx-hero-note { margin-top: 26px !important; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted) !important; max-width: 30em; }
.cmx-hero-note b { color: var(--ink); font-weight: 600; }

.cmx-watch { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 8px 0 4px; background: none; border: 0; cursor: pointer; font: 600 16px var(--sans); color: var(--ink); }
.cmx-watch-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--violet-soft); display: grid; place-items: center; color: var(--violet-ink); font-size: 20px; transition: background-color .2s ease, color .2s ease; }
.cmx-watch:hover .cmx-watch-dot { background: var(--violet); color: #fff; }

.cmx-proof { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.cmx-avatars { display: flex; flex: 0 0 auto; }
.cmx-avatars img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin-left: -12px; }
.cmx-avatars img:first-child { margin-left: 0; }
.cmx-proof p { font-size: 15px; line-height: 1.4; }
.cmx-proof strong { color: var(--ink); font-weight: 600; }

/* ---- the floor plan ----
   The indigo behind the grid shows through the 4px gaps as walls. Each room opens a doorway in
   its bottom wall (::before paints over the wall in the room's floor colour) and draws the door
   leaf and its swing (::after). */
.cmx-plan { margin: 0; }
.cmx-plan-grid {
    display: grid; gap: 4px; padding: 4px; border-radius: 8px; background: #000;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "a b b d" "c c e f";
    box-shadow: 0 50px 90px -50px rgba(28,22,70,.55);
}
.cmx-room { --floor: var(--wash); --chip: var(--ink-2); --door: 28px;
    position: relative; padding: 18px 20px 22px; border-radius: 3px; background: var(--floor); min-width: 0; }
.cmx-room.area-a { grid-area: a; --door: 22px; } .cmx-room.area-b { grid-area: b; --door: 22px; }
.cmx-room.area-c { grid-area: c; --door: 22px; } .cmx-room.area-d { grid-area: d; --door: 22px; }
.cmx-room.area-e { grid-area: e; --door: 22px; } .cmx-room.area-f { grid-area: f; --door: 22px; }
.cmx-room::before { content: ""; position: absolute; bottom: -4px; left: var(--door); width: 38px; height: 4px; background: var(--floor); }
.cmx-room::after {
    content: ""; position: absolute; bottom: 0; left: var(--door); width: 38px; height: 38px;
    border-left: 2px solid var(--night); border-top: 1.5px dashed rgba(28,22,70,.35); border-right: 1.5px dashed rgba(28,22,70,.35);
    border-top-right-radius: 100%; pointer-events: none; opacity: .75;
}
.cmx-room h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.cmx-plaque { position: absolute; bottom: 9px; right: 14px; font-family: var(--serif); font-size: 17px; color: var(--chip); opacity: .8; }
.cmx-room ul { list-style: none; margin: 14px 0 34px; padding: 0; display: grid; gap: 8px 16px; }
.cmx-room.area-b ul, .cmx-room.area-c ul { grid-template-columns: 1fr 1fr; }
.cmx-room li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14.5px; line-height: 1.25; color: var(--ink); hyphens: auto; }
.cmx-room li .bi { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: #fff; color: var(--chip); box-shadow: 0 1px 0 rgba(28,22,70,.08); }

.cmx-room.is-violet { --floor: #efeaff; --chip: #4f30e0; }
.cmx-room.is-mint   { --floor: #e2f3eb; --chip: #0b7a5e; }
.cmx-room.is-gold   { --floor: #fff2d4; --chip: #8f6300; }
.cmx-room.is-coral  { --floor: #ffe5df; --chip: #b93a28; }
.cmx-room.is-sky    { --floor: #e2efff; --chip: #1c5fa8; }
.cmx-room.is-wash   { --floor: #f1f0f6; --chip: #3d3a4d; }

.cmx-plan figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ---- floor plan animation: "the academy gets built, then comes alive" ----
   Act 1, drafting (pure CSS, plays on first paint, no JS needed): the plan starts as a blueprint —
   blue sheet, white grid — and each room's outline is inked in with a dashed pen. Then the lights
   come on room by room: the room's colour floods out from its doorway (a circle clip growing from
   the door), the door leaf pops in, and the furniture — the tool list — drops into place. Last,
   the blueprint sheet fades away and the walls go black.
   Act 2, alive (Index.cshtml script, after the build): little visitors walk from door to door, and
   whichever room they step into lights up and shows what is happening in it ("Live now · 38
   watching", "+ ₹4,999 received"…). The whole plan tilts gently under the pointer like a model on
   a table.
   A panel shown after being display:none restarts its CSS animations, so switching audience
   re-drafts the plan. prefers-reduced-motion: the global rule at the end of this file flattens the
   build, and the script does not start Act 2. */
.cmx-room.area-a { --r: 0; } .cmx-room.area-b { --r: 1; } .cmx-room.area-d { --r: 2; }
.cmx-room.area-c { --r: 3; } .cmx-room.area-e { --r: 4; } .cmx-room.area-f { --r: 5; }

.cmx-plan-grid { position: relative; transition: transform .6s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; will-change: transform; }

/* the blueprint sheet: under the rooms, over the black walls, fades once every room is lit */
.cmx-plan-grid::before {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(28,59,143,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28,59,143,.12) 1px, transparent 1px),
        linear-gradient(rgba(28,59,143,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28,59,143,.05) 1px, transparent 1px);
    background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
    animation: cmxBpSheet .7s ease forwards; animation-delay: 2s;
}

.cmx-room { background: transparent; z-index: 1; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.cmx-room h3, .cmx-room ul { position: relative; z-index: 2; }
.cmx-plaque { z-index: 2; }

/* the floor: the room's colour, flooding out from the doorway */
.cmx-room-floor {
    position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--floor); pointer-events: none;
    clip-path: circle(160% at calc(var(--door) + 19px) 100%);
    animation: cmxFloorFlood .75s backwards cubic-bezier(.65,0,.35,1);
    animation-delay: calc(.8s + var(--r) * 110ms);
    transition: filter .5s ease;
}
/* the lamp: a warm pool of light when someone walks in */
.cmx-room-floor::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
    background: radial-gradient(120% 90% at calc(var(--door) + 19px) 100%, rgba(255,255,255,.75), transparent 60%);
}
.cmx-room.is-lamp .cmx-room-floor::after { opacity: 1; }

/* the pen: a dashed blue outline inked round the room, gone once the lights are on */
.cmx-room-ink {
    position: absolute; inset: 7px; z-index: 1; border: 1.5px dashed rgba(28,59,143,.55); border-radius: 2px; pointer-events: none;
    opacity: 0;
    animation: cmxInkDraw .7s cubic-bezier(.65,0,.35,1) both, cmxInkOff .35s ease forwards;
    animation-delay: calc(.1s + var(--r) * 110ms), calc(1.35s + var(--r) * 110ms);
}

/* the doorway gap and the door leaf arrive with the light */
.cmx-room::before { animation: cmxFadeIn .3s backwards; animation-delay: calc(.9s + var(--r) * 110ms); }
.cmx-room::after {
    z-index: 2; transform-origin: left bottom;
    animation: cmxDoorPop .6s backwards cubic-bezier(.34,1.56,.64,1);
    animation-delay: calc(1.25s + var(--r) * 110ms);
}

/* the furniture: title, then each tool dropped in with a little bounce */
.cmx-room h3 { animation: cmxTitleIn .5s backwards cubic-bezier(.2,.8,.2,1); animation-delay: calc(1.2s + var(--r) * 110ms); }
.cmx-room li { animation: cmxDrop .55s backwards cubic-bezier(.34,1.56,.64,1); animation-delay: calc(1.35s + var(--r) * 110ms + var(--n, 0) * 70ms); }
.cmx-plaque { animation: cmxPlaqueIn .6s backwards cubic-bezier(.2,.8,.2,1); animation-delay: calc(1.8s + var(--r) * 110ms); }

/* Act 2: a room someone is in */
.cmx-room.is-lamp, .cmx-room:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(28,22,70,.6); z-index: 3; }
.cmx-room li .bi { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.cmx-room:hover li .bi { transform: translateY(-2px) rotate(-6deg); }

/* what is happening in the room */
.cmx-room-toast {
    /* pops out over the room's top wall like a speech bubble, so it never covers the room title */
    position: absolute; top: -18px; right: 10px; z-index: 6; max-width: calc(100% - 20px);
    display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 13px; border-radius: 999px;
    background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 10px 24px -12px rgba(28,22,70,.45), 0 0 0 1px rgba(28,22,70,.06);
    animation: cmxToast 2.6s cubic-bezier(.2,.8,.2,1) forwards; pointer-events: none;
}
.cmx-room-toast i { width: 10px; height: 10px; border-radius: 50%; background: var(--chip); flex: 0 0 auto; box-shadow: 0 0 0 0 var(--chip); animation: cmxPing 1.2s ease-out infinite; }

/* the visitors */
.cmx-walker {
    position: absolute; left: 0; top: 0; z-index: 5; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none;
    transition: transform 1.7s cubic-bezier(.45,0,.25,1), opacity .4s ease;
}
.cmx-walker span {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    font: 700 10px/1 var(--sans); color: #fff; background: var(--w, #4f30e0);
    box-shadow: 0 0 0 2.5px #fff, 0 6px 14px -4px rgba(28,22,70,.55);
}
.cmx-walker.is-walking span { animation: cmxStep .34s ease-in-out infinite alternate; }

@keyframes cmxBpSheet  { to { opacity: 0; } }
@keyframes cmxInkDraw  { from { opacity: 1; clip-path: inset(0 100% 100% 0); } 50% { clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes cmxInkOff   { from { opacity: 1; } to { opacity: 0; } }
@keyframes cmxFloorFlood { from { clip-path: circle(0 at calc(var(--door) + 19px) 100%); } to { clip-path: circle(160% at calc(var(--door) + 19px) 100%); } }
@keyframes cmxFadeIn   { from { opacity: 0; } }
@keyframes cmxDoorPop  { from { opacity: 0; transform: scale(0) rotate(-35deg); } }
@keyframes cmxTitleIn  { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
@keyframes cmxDrop     { from { opacity: 0; transform: translateY(-16px) scale(.85) rotate(-4deg); } }
@keyframes cmxPlaqueIn { from { opacity: 0; letter-spacing: .3em; } }
@keyframes cmxToast    { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes cmxPing     { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--chip) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes cmxStep     { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-4px) rotate(5deg); } }

@media (max-width: 720px) { .cmx-walker { display: none; } }
.cmx-hero-panel.is-entering .cmx-hero-copy { animation: cmxRoomIn .45s both cubic-bezier(.2,.8,.2,1); }

@media (max-width: 1080px) {
    .cmx-hero-panel { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
    .cmx-hero { padding: 28px 0 64px; }
    .cmx-hero .cmx-lede { font-size: 18px; }
    .cmx-hero-ctas .cmx-btn { flex: 1 1 100%; }
    .cmx-aud { display: flex; }
    .cmx-aud button { flex: 1; }
    .cmx-hero-panel { margin-top: 28px; }
    .cmx-plan-grid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; }
    .cmx-room.area-b ul, .cmx-room.area-c ul { grid-template-columns: 1fr; }
}
@media (min-width: 721px) and (max-width: 1080px) {
    .cmx-plan-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "c d" "e f"; }
    .cmx-room.area-b ul, .cmx-room.area-c ul { grid-template-columns: 1fr; }
}

/* ---- "Teach any subject": course-cover tiles, creators tab only ----
   Lives inside #cmx-panel-creators, so the learners tab hides it with the rest of that panel. */
.cmx-hero-panel > .cmx-teach { grid-column: 1 / -1; }
.cmx-teach { margin-top: 64px; }
.cmx-teach-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 26px; }
.cmx-teach-head h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.cmx-teach-head p { font-size: 16.5px; max-width: 32em; color: var(--muted) !important; }

.cmx-covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.cmx-cover {
    --bg: #f1f0f6; --d: #3d3a4d; --m: #8a86a0; --l: #dcdae6; --acc: #6d4aff;
    --fg: var(--ink); --sub: var(--muted);
    display: flex; flex-direction: column; height: 100%;
    padding: 10px 10px 14px; border-radius: 18px; background: #fff;
    box-shadow: 0 0 0 1px var(--line); color: var(--fg) !important;
    transition: translate .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.cmx-cover svg {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 12px;
    background: var(--bg); fill: none; stroke: none; overflow: hidden;
}
/* colour classes used by the cover art in Index.cshtml */
.cmx-cover svg .w   { fill: #fff; }
.cmx-cover svg .wv  { fill: rgba(255,255,255,.55); }
.cmx-cover svg .d   { fill: var(--d); }
.cmx-cover svg .m   { fill: var(--m); }
.cmx-cover svg .l   { fill: var(--l); }
.cmx-cover svg .acc { fill: var(--acc); }
.cmx-cover svg .sh  { fill: rgba(20,18,31,.12); }
.cmx-cover svg [class^="s"]:not(.sh) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cmx-cover svg .sw    { stroke: #fff; stroke-width: 2.4; }
.cmx-cover svg .sd    { stroke: var(--d); stroke-width: 2.4; }
.cmx-cover svg .sd1   { stroke: var(--d); stroke-width: 1.8; }
.cmx-cover svg .sm    { stroke: var(--m); stroke-width: 2.6; }
.cmx-cover svg .sl    { stroke: var(--l); stroke-width: 1.8; }
.cmx-cover svg .sg    { stroke: var(--l); stroke-width: 1.2; }
.cmx-cover svg .sacc  { stroke: var(--acc); stroke-width: 2.8; }
.cmx-cover svg .sdash { stroke: #fff; stroke-width: 2; stroke-dasharray: 3 5; }
.cmx-cover svg .sdt3  { stroke: var(--d); stroke-width: 3.5; }
.cmx-cover svg .sdt4  { stroke: var(--d); stroke-width: 4.5; }
.cmx-cover svg .sdt7  { stroke: var(--d); stroke-width: 7; }
.cmx-cover svg .fl    { transform-box: view-box; transition: transform .45s cubic-bezier(.2,.8,.2,1); }

.cmx-cover-name { margin: 12px 4px 0; font-size: 15.5px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.cmx-cover small { margin: 4px 4px 0; font-size: 13px; color: var(--sub); }
.cmx-cover:hover, .cmx-cover:focus-visible { translate: 0 -5px; box-shadow: 0 0 0 1px var(--line), 0 22px 34px -22px rgba(28,22,70,.45); }
.cmx-cover:hover svg .fl, .cmx-cover:focus-visible svg .fl { transform: translateY(-5px); }

/* tile tones: background, deep, mid, light, accent */
.cmx-cover.is-violet { --bg: #ece8ff; --d: #3b22b8; --m: #7c5cff; --l: #d3c8ff; --acc: #ffb020; }
.cmx-cover.is-lilac  { --bg: #f3efff; --d: #4f30e0; --m: #a58bff; --l: #e0d7ff; --acc: #ff5e9a; }
.cmx-cover.is-gold   { --bg: #fff1cf; --d: #7a4f00; --m: #f2b233; --l: #ffe09a; --acc: #0f8f6f; }
.cmx-cover.is-sky    { --bg: #e2efff; --d: #174a86; --m: #4d97f0; --l: #c4defc; --acc: #ff7a66; }
.cmx-cover.is-coral  { --bg: #ffe5df; --d: #8f2a1c; --m: #ff7a66; --l: #ffc6ba; --acc: #f2b233; }
.cmx-cover.is-mint   { --bg: #e0f3ea; --d: #0b5e49; --m: #14a37f; --l: #bde8d5; --acc: #ff7a66; }
.cmx-cover.is-blush  { --bg: #ffe7ee; --d: #8c2447; --m: #f06a93; --l: #ffcfde; --acc: #14a37f; }
.cmx-cover.is-sage   { --bg: #e3f1e8; --d: #1f5a37; --m: #4caf76; --l: #c3e5cf; --acc: #ef4a5a; }
.cmx-cover.is-night  { --bg: #7a58d6; --d: #3f2a8f; --m: #b39cf0; --l: #9a80e6; --acc: #f2b233; }
.cmx-cover.is-ink    { --bg: #14121f; --d: #3a3650; --m: #6d4aff; --l: #c5b8ff; --acc: #f2b233; }

.cmx-cover.is-cta { background: linear-gradient(125deg, #5b3fc4 0%, #7a58d6 45%, #9370db 100%); box-shadow: none; --fg: #fff; --sub: rgba(255,255,255,.8); }
.cmx-cover-plus {
    display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px;
    border: 2px dashed rgba(255,255,255,.3); color: #fff; font-size: 30px;
    transition: border-color .2s ease, background-color .2s ease;
}
.cmx-cover.is-cta:hover .cmx-cover-plus { border-color: #fff; background: rgba(255,255,255,.06); }

/* switching back to the creators tab: covers settle in after the rooms */
.cmx-hero-panel.is-entering .cmx-covers li { animation: cmxRoomIn .45s both cubic-bezier(.2,.8,.2,1); animation-delay: calc(.25s + var(--i) * 30ms); }

@media (max-width: 1180px) { .cmx-covers { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .cmx-teach { margin-top: 48px; }
    .cmx-teach-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .cmx-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 520px) { .cmx-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   Subjects: the book shelf (one book per course category)
   ===================================================================== */
.cmx-inline-link { color: var(--violet-ink) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
/* ---- the shelf: one book per course category ---- */
.cmx-shelf { position: relative; }
.cmx-books {
    list-style: none; margin: 0; padding: 0 6px;
    display: flex; align-items: flex-end; gap: 5px;
    /* clip only the bottom, so books rise from behind the plank but can still lift and lean above it */
    clip-path: inset(-80px -60px 0 -60px);
}
.cmx-books li { flex: 0 1 calc(var(--w) * 1px); min-width: 0; display: flex; }
.cmx-book {
    --bg: var(--violet); --fg: #fff; --band: rgba(255,255,255,.34);
    position: relative; flex: 1; min-width: 0;
    height: calc(var(--h) * 1px);
    display: flex; flex-direction: column; align-items: center;
    padding: 36px 0 34px;
    border-radius: 5px 5px 2px 2px;
    color: var(--fg) !important; background-color: var(--bg);
    /* two gilt bands near the head and the foot of the spine */
    background-image:
        linear-gradient(to bottom, transparent 14px, var(--band) 14px 16px, transparent 16px 20px, var(--band) 20px 22px, transparent 22px),
        linear-gradient(to top,    transparent 14px, var(--band) 14px 16px, transparent 16px 20px, var(--band) 20px 22px, transparent 22px);
    box-shadow: inset 3px 0 0 rgba(255,255,255,.14), inset -7px 0 0 rgba(0,0,0,.09);
    transform-origin: bottom left;
    transition: translate .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.cmx-shelf.is-waiting .cmx-book { opacity: 0; }
.cmx-shelf.is-in .cmx-book { animation: cmxShelve .7s calc(var(--i) * 55ms) both cubic-bezier(.2,.8,.2,1); }
.cmx-book .bi { font-size: 22px; line-height: 1; }
.cmx-book-title {
    margin-top: 16px; flex: 1; min-height: 0;
    writing-mode: vertical-rl;
    font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmx-book small { margin-top: 12px; font-size: 12.5px; font-weight: 600; opacity: .8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmx-book:hover, .cmx-book:focus-visible { translate: 0 -16px; box-shadow: inset 3px 0 0 rgba(255,255,255,.14), inset -7px 0 0 rgba(0,0,0,.09), 0 22px 30px -18px rgba(28,22,70,.55); }
.cmx-book:focus-visible { outline: 3px solid var(--violet) !important; outline-offset: 3px; }
.cmx-book.is-leaning { rotate: 5deg; }
.cmx-books li:last-child { margin-left: 4px; }

/* book cloth */
.cmx-book.is-violet { --bg: #6d4aff; --fg: #fff;    --band: rgba(255,255,255,.34); }
.cmx-book.is-night  { --bg: #7a58d6; --fg: #fff;    --band: rgba(242,178,51,.7); }
.cmx-book.is-gold   { --bg: #f2b233; --fg: #14121f; --band: rgba(20,18,31,.22); }
.cmx-book.is-sky    { --bg: #93cdff; --fg: #14121f; --band: rgba(20,18,31,.2); }
.cmx-book.is-coral  { --bg: #ff7a66; --fg: #14121f; --band: rgba(20,18,31,.2); }
.cmx-book.is-lilac  { --bg: #dcd3ff; --fg: #14121f; --band: rgba(79,48,224,.35); }
.cmx-book.is-mint   { --bg: #0f8f6f; --fg: #fff;    --band: rgba(255,255,255,.34); }
.cmx-book.is-blush  { --bg: #ffc9d6; --fg: #14121f; --band: rgba(20,18,31,.18); }
.cmx-book.is-ink    { --bg: #14121f; --fg: #fff;    --band: rgba(255,255,255,.3); }
.cmx-book.is-sage   { --bg: #c7e5d1; --fg: #14121f; --band: rgba(20,18,31,.18); }

.cmx-plank {
    position: relative; height: 16px; border-radius: 3px;
    background: linear-gradient(to bottom, #9370db 0 3px, var(--night) 3px);
    box-shadow: 0 26px 36px -22px rgba(28,22,70,.6);
}


@media (max-width: 1080px) and (min-width: 821px) {
    .cmx-book { padding-top: 30px; }
    .cmx-book-title { font-size: 17px; }
    .cmx-book small { font-size: 12px; }
    .cmx-book small span { display: none; } /* just the number on narrow spines */
}

/* phones and small tablets: the shelf becomes a pile of books lying flat */
@media (max-width: 820px) {
    .cmx-books { flex-direction: column; align-items: stretch; gap: 3px; padding: 0; clip-path: none; }
    .cmx-books li { flex: none; width: max-content; min-width: calc(58% + (var(--w) - 80) * 1.2%); max-width: 96%; }
    .cmx-books li:nth-child(3n+1) { margin-left: 2%; }
    .cmx-books li:nth-child(3n+2) { margin-left: 0; }
    .cmx-books li:nth-child(3n)   { margin-left: 4%; }
    .cmx-books li:last-child { margin-left: 2%; }
    .cmx-book {
        height: 50px; flex-direction: row; justify-content: flex-start; gap: 12px;
        padding: 0 16px 0 18px; border-radius: 3px 5px 5px 3px;
        background-image:
            linear-gradient(to right, transparent 8px, var(--band) 8px 10px, transparent 10px 13px, var(--band) 13px 15px, transparent 15px);
        box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -5px 0 rgba(0,0,0,.08);
        }
    .cmx-shelf.is-in .cmx-book { animation-name: cmxPile; }
    .cmx-book .bi { font-size: 18px; margin-left: 6px; }
    .cmx-book-title { writing-mode: horizontal-tb; margin: 0; font-size: 15.5px; flex: 0 1 auto; }
    .cmx-book small { margin: 0 0 0 auto; padding-left: 12px; }
    .cmx-book small span { display: none; } /* just the number on phones */
    .cmx-book:hover, .cmx-book:focus-visible { translate: 10px 0; }
    .cmx-book.is-leaning { rotate: -1.5deg; }
}

/* =====================================================================
   Partners strip
   ===================================================================== */
.cmx-partners { padding: 72px 0 42px; background: var(--wash); }
.cmx-trust { max-width: 28ch; margin: 0 auto 28px !important; text-align: center; font-family: var(--serif); font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; }
.cmx-trust span { color: var(--violet); }
.cmx-partners-label { text-align: center; }
.cmx-partners-label { font-size: 15px; color: var(--muted); margin-bottom: 20px !important; }
.cmx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cmx-marquee-track { display: flex; width: max-content; animation: cmxMarquee 55s linear infinite; }
.cmx-marquee:hover .cmx-marquee-track { animation-play-state: paused; }
.cmx-partner { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-right: 44px; }
.cmx-partner img, .cmx-partner .cmx-partner-fallback { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: #fff; }
.cmx-partner-fallback { display: grid; place-items: center; color: var(--violet-ink); font-weight: 700; font-size: 19px; }
.cmx-partner span { font-size: 15px; font-weight: 600; color: var(--ink-2); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   Who it's for — three large panels, deliberately unequal in tone
   ===================================================================== */
.cmx-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cmx-door { position: relative; display: flex; flex-direction: column; padding: 36px 32px 32px; min-height: 440px; border-radius: var(--r-lg); background: var(--wash); }
.cmx-door h3 { font-size: 32px; font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.cmx-door p { margin-top: 14px !important; font-size: 16.5px; }
.cmx-door-glyph { display: block; font-size: 40px; line-height: 1; margin-bottom: 30px; color: var(--violet-ink); }
.cmx-door ul { list-style: none; padding: 0; margin: 22px 0 32px; }
.cmx-door li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 16px; color: var(--ink); border-top: 1px solid rgba(20,18,31,.08); }
.cmx-door li:first-child { border-top: 0; }
.cmx-door li .bi { color: var(--mint); font-size: 15px; }
.cmx-door .cmx-btn { margin-top: auto; align-self: flex-start; }

.cmx-door.is-violet { background: var(--violet); }
.cmx-door.is-violet h3, .cmx-door.is-violet li { color: #fff; }
.cmx-door.is-violet p { color: #e4ddff; }
.cmx-door.is-violet li { border-top-color: rgba(255,255,255,.18); }
.cmx-door.is-violet li .bi { color: #fff; }
.cmx-door.is-violet .cmx-btn { background: #fff; color: var(--violet-ink) !important; }
.cmx-door.is-violet .cmx-btn:hover { background: var(--violet-soft); }

.cmx-door.is-night { background: linear-gradient(125deg, #5b3fc4 0%, #7a58d6 45%, #9370db 100%); }
.cmx-door.is-night h3, .cmx-door.is-night li { color: #fff; }
.cmx-door.is-night p { color: rgba(255,255,255,.8); }
.cmx-door.is-night li { border-top-color: rgba(255,255,255,.12); }
.cmx-door.is-night li .bi { color: #86e6c9; }
.cmx-door.is-night .cmx-btn { background: #fff; color: var(--night) !important; }
.cmx-door.is-night .cmx-btn:hover { background: var(--violet-soft); }

@media (max-width: 960px) {
    .cmx-doors { grid-template-columns: 1fr; }
    .cmx-door { min-height: 0; }
}

/* =====================================================================
   What's inside a course — a board of real product moments
   ===================================================================== */
.cmx-inside { background: var(--wash); }
.cmx-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.cmx-tile { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: var(--r-md); background: #fff; overflow: hidden; }
.cmx-tile h3 { font-size: 23px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.cmx-tile p { font-size: 16px; margin-top: 8px !important; max-width: 32em; }
.cmx-t-live  { grid-column: span 7; grid-row: span 2; background: linear-gradient(125deg, #5b3fc4 0%, #7a58d6 45%, #9370db 100%); }
.cmx-t-live h3 { color: #fff; font-size: 30px; }
.cmx-t-live p { color: rgba(255,255,255,.8); }
.cmx-t-quiz  { grid-column: span 5; }
.cmx-t-board { grid-column: span 5; }
.cmx-t-video { grid-column: span 6; }
.cmx-t-any   { grid-column: span 6; }

.cmx-call { margin-top: auto; padding-top: 30px; display: grid; grid-template-columns: 2.2fr 1fr; gap: 10px; flex: 1 1 auto; min-height: 340px; }
.cmx-room-main { position: relative; border-radius: 14px; overflow: hidden; height: 100%; background: #5b3fc4; }
.cmx-room-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmx-room-side { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.cmx-room-side div { border-radius: 10px; overflow: hidden; background: #5b3fc4; }
.cmx-room-side img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmx-room-tools { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(63,42,143,.8); }
.cmx-room-tools span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 15px; background: rgba(255,255,255,.14); }
.cmx-room-tools span.end { background: var(--live); }
.cmx-room-hand { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; color: var(--ink); }

.cmx-quiz { margin-top: auto; padding-top: 20px; display: grid; gap: 8px; }
.cmx-quiz button { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); font-size: 15px; background: var(--wash); color: var(--ink-2); cursor: pointer; transition: background-color .15s ease; }
.cmx-quiz button:hover { background: #e8e6f2; }
.cmx-quiz button:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 2px; }
.cmx-quiz button .bi { opacity: 0; }
.cmx-quiz.is-answered button { cursor: default; }
.cmx-quiz.is-answered button.is-right { background: #ddf4ec; color: #0b6b52; font-weight: 600; }
.cmx-quiz.is-answered button.is-wrong { background: #fde5e7; color: #a3212f; }
.cmx-quiz.is-answered button.is-right .bi, .cmx-quiz.is-answered button.is-wrong .bi { opacity: 1; }
.cmx-quiz-note { font-size: 14px; color: var(--muted); min-height: 1.4em; margin-top: 4px !important; }

.cmx-sketch { margin-top: auto; padding-top: 14px; width: 100%; height: 120px; }
.cmx-sketch path, .cmx-sketch rect, .cmx-sketch circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.cmx-chapters { margin-top: auto; padding-top: 22px; display: grid; gap: 6px; }
.cmx-chapters div { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); }
.cmx-chapters span { flex: 0 0 44%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmx-chapters b { flex: 0 0 auto; width: 52px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmx-chapters i { flex: 1; height: 6px; border-radius: 6px; background: var(--wash); position: relative; overflow: hidden; }
.cmx-chapters i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--violet); border-radius: 6px; }

.cmx-devices { margin-top: auto; padding-top: 22px; display: flex; align-items: flex-end; gap: 14px; }
.cmx-devices span { display: block; border-radius: 10px; border: 2px solid var(--ink); background: linear-gradient(180deg, var(--violet-soft) 0 36%, #fff 36%); }
.cmx-devices .d1 { width: 168px; height: 104px; }
.cmx-devices .d2 { width: 78px; height: 104px; }
.cmx-devices .d3 { width: 44px; height: 80px; border-radius: 9px; }

@media (max-width: 960px) {
    .cmx-board { grid-template-columns: 1fr 1fr; }
    .cmx-t-live { grid-column: span 2; grid-row: auto; }
    .cmx-t-quiz, .cmx-t-board, .cmx-t-video, .cmx-t-any { grid-column: span 1; }
}
@media (max-width: 640px) {
    .cmx-call { min-height: 240px; }
    .cmx-room-hand { font-size: 12px; white-space: nowrap; }
    .cmx-section { padding: 80px 0; }
    .cmx-board { grid-template-columns: 1fr; }
    .cmx-t-live, .cmx-t-quiz, .cmx-t-board, .cmx-t-video, .cmx-t-any { grid-column: auto; }
    .cmx-tile { padding: 24px; }
}

/* =====================================================================
   Learners — one big voice, three smaller ones, then a wall of short ones
   ===================================================================== */
.cmx-quotes { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.cmx-quote-feature { display: flex; flex-direction: column; padding: 48px; border-radius: var(--r-lg); background: var(--violet-soft); }
.cmx-quote-feature blockquote { margin: 0; font-size: clamp(22px, 2.3vw, 29px); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); max-width: 30em; }
.cmx-quote-feature blockquote::before { content: "\201C"; display: block; font-family: var(--serif); font-size: 110px; line-height: .7; height: 46px; color: var(--violet); }
.cmx-who { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 32px; }
.cmx-who img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.cmx-who b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cmx-who small { display: block; font-size: 14.5px; color: var(--muted); }
.cmx-stars { margin-left: auto; color: var(--gold); font-size: 14px; letter-spacing: 2px; white-space: nowrap; }
.cmx-quote-list { display: grid; gap: 18px; }
.cmx-quote { display: flex; flex-direction: column; padding: 26px 28px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.cmx-quote p { font-size: 16px; }
.cmx-quote .cmx-who { padding-top: 18px; }
.cmx-quote .cmx-who img { width: 42px; height: 42px; }

.cmx-voices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cmx-voice { display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--wash); font-size: 15px; color: var(--ink-2); }
.cmx-voice img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cmx-voice b { color: var(--ink); font-weight: 600; }
@media (max-width: 960px) { .cmx-quotes { grid-template-columns: 1fr; } .cmx-quote-feature { padding: 34px 28px 28px; } }

/* =====================================================================
   Certificate
   ===================================================================== */
.cmx-certsec-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; }
.cmx-points { list-style: none; padding: 0; margin: 32px 0 36px; display: grid; gap: 18px; }
.cmx-points li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; font-size: 16.5px; color: var(--ink-2); line-height: 1.5; }
.cmx-points .bi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #fff5dc; color: #9a6c0a; font-size: 17px; }
.cmx-points b { color: var(--ink); font-weight: 600; display: block; }

.cmx-bigcert { position: relative; background: #fffdf7; border-radius: 8px; padding: 48px 52px 36px; box-shadow: 0 60px 100px -55px rgba(28,22,70,.55), 0 0 0 1px #efe3c2; transform: rotate(1.2deg); }
.cmx-bigcert::before { content: ""; position: absolute; inset: 12px; border: 1.5px solid #ecdcae; border-radius: 4px; pointer-events: none; }
.cmx-bigcert::after { content: ""; position: absolute; inset: 17px; border: 1px solid #f4e9cb; border-radius: 2px; pointer-events: none; }
.cmx-bigcert-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cmx-bigcert-top img { height: 20px; width: auto; }
.cmx-bigcert-top small { font-size: 13px; color: var(--muted); }
.cmx-bigcert h4 { margin-top: 38px; font-family: var(--serif); font-weight: 400; font-size: 22px; color: #8f6a14; }
.cmx-bigcert .name { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.8vw, 62px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.cmx-bigcert .course { margin-top: 14px !important; font-size: 16px; }
.cmx-bigcert .course b { color: var(--ink); font-weight: 600; }
.cmx-bigcert-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 40px; }
.cmx-sign { font-size: 13px; color: var(--muted); }
.cmx-sign svg { display: block; width: 140px; height: 44px; margin-bottom: 2px; }
.cmx-sign svg path { fill: none; stroke: var(--night); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmx-sign b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; border-top: 1px solid #e6dbbd; padding-top: 6px; }
.cmx-bigseal { flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 34px; background: radial-gradient(circle at 35% 30%, #ffd772, var(--gold) 58%, #cf8f0f); box-shadow: 0 0 0 6px #fff2cc, 0 0 0 7px #ecdcae; }
.cmx-verify { display: flex; align-items: center; gap: 8px; margin-top: 26px; padding-top: 16px; border-top: 1px dashed #e6dbbd; font-size: 13.5px; color: var(--muted); }
.cmx-verify .bi { color: var(--mint); font-size: 15px; }
@media (max-width: 960px) { .cmx-certsec-grid { grid-template-columns: 1fr; gap: 56px; } .cmx-bigcert { padding: 36px 28px 28px; transform: none; } }

/* =====================================================================
   Questions
   ===================================================================== */
.cmx-faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
.cmx-faq details { border-top: 1px solid var(--line); }
.cmx-faq details:last-child { border-bottom: 1px solid var(--line); }
.cmx-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cmx-faq summary::-webkit-details-marker { display: none; }
.cmx-faq summary .bi { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--wash); font-size: 16px; transition: transform .25s ease, background-color .2s ease, color .2s ease; }
.cmx-faq details[open] summary .bi { transform: rotate(45deg); background: var(--violet); color: #fff; }
.cmx-faq details p { padding: 0 56px 28px 0; font-size: 17px; max-width: 38em; }
@media (max-width: 960px) { .cmx-faq-grid { grid-template-columns: 1fr; gap: 32px; } .cmx-faq details p { padding-right: 0; } }

/* =====================================================================
   Contact
   ===================================================================== */
.cmx-contact { padding: 0 0 120px; scroll-margin-top: 72px; }
.cmx-contact-card { display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(125deg, #5b3fc4 0%, #7a58d6 45%, #9370db 100%); border-radius: var(--r-lg); overflow: hidden; }
.cmx-contact-info { padding: 60px 56px; }
.cmx-contact-info h2 { color: #fff; }
.cmx-contact-info p { color: rgba(255,255,255,.8); margin-top: 18px !important; max-width: 28em; }
.cmx-contact-lines { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 18px; }
.cmx-contact-lines li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; color: #fff; font-size: 16px; }
.cmx-contact-lines .bi { height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.09); color: #fff; }
.cmx-contact-lines a:hover { color: #fff; text-decoration: underline !important; }
.cmx-contact-lines small { display: block; font-size: 13px; color: rgba(255,255,255,.72); }
.cmx-contact-form { background: #fff; margin: 10px; border-radius: 20px; padding: 46px 44px; }
.cmx-contact-form h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.cmx-contact-form > p { font-size: 16px; margin-top: 6px !important; }
.cmx-field { display: block; margin-top: 20px; }
.cmx-field span { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
/* #contact-form ids are kept for existing scripts; the prefixed selectors beat site.css's old #contact-form rules */
.cmx #contact-form .cmx-field input, .cmx #contact-form .cmx-field textarea {
    display: block; height: auto; margin: 0; font-weight: 400; position: static; width: 100%; border: 1px solid var(--line); background: var(--wash); border-radius: 12px;
    padding: 14px 15px; font: 16px var(--sans); color: var(--ink);
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.cmx #contact-form .cmx-field textarea { min-height: 136px; resize: vertical; }
.cmx #contact-form .cmx-field input::placeholder, .cmx #contact-form .cmx-field textarea::placeholder { color: var(--muted); }
.cmx #contact-form .cmx-field input:focus, .cmx #contact-form .cmx-field textarea:focus { outline: none; background: #fff; border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.cmx #contact-form .cmx-btn { width: 100%; margin-top: 26px; height: 54px; padding: 0 26px; border-radius: 999px; font-size: 16px; color: #fff; background: var(--violet); opacity: 1; }
.cmx #contact-form .cmx-btn:hover { background: var(--violet-ink); }
@media (max-width: 960px) {
    .cmx-contact-card { grid-template-columns: 1fr; }
    .cmx-contact-info { padding: 44px 28px 32px; }
    .cmx-contact-form { padding: 32px 22px; }
}

/* =====================================================================
   Footer
   ===================================================================== */
.cmx-foot { padding: 64px 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.cmx-foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.cmx-foot-brand img { height: 24px; width: auto; }
.cmx-foot-brand p { margin-top: 16px !important; font-size: 15px; max-width: 26em; color: var(--muted); }
.cmx-foot h5 { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 16px; }
.cmx-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.cmx-foot ul a { font-size: 16px; color: var(--ink-2); }
.cmx-foot ul a:hover { color: var(--violet-ink); }
.cmx-foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding: 24px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
@media (max-width: 860px) { .cmx-foot-grid { grid-template-columns: 1fr 1fr; } .cmx-foot-brand { grid-column: 1 / -1; } }

/* =====================================================================
   Video modal
   ===================================================================== */
#videoModal .modal-content { background: #000; border: 0; border-radius: 16px; overflow: hidden; }
#videoModal iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 0; }

/* =====================================================================
   Keyframes
   ===================================================================== */
@keyframes cmxShelve { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes cmxRoomIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cmxPile   { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes cmxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .cmx *, .cmx *::before, .cmx *::after {
        animation-duration: .01ms !important; animation-delay: 0s !important;
        animation-iteration-count: 1 !important; transition-duration: .01ms !important;
    }
    .cmx-marquee-track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 16px; }
    .cmx-marquee-track .cmx-partner[aria-hidden="true"] { display: none; }
}

/* =====================================================================
   Contact form: frosted "Sending your message" overlay
   The whole page blurs behind translucent glass; the card in the middle
   shows a spinner, then turns into "Message sent" or the error.
   ===================================================================== */
html.cmx-no-scroll, html.cmx-no-scroll body { overflow: hidden !important; }

.cmx-form-error { margin-top: 14px !important; font-size: 14.5px; color: #b42336 !important; }

.cmx-sending {
    position: fixed; inset: 0; z-index: 2000;
    display: grid; place-items: center; padding: 24px;
    background: rgba(243, 242, 248, .45);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    opacity: 0; transition: opacity .25s ease;
}
.cmx-sending[hidden] { display: none; }
.cmx-sending.is-open { opacity: 1; }

.cmx-sending-card {
    width: min(380px, 100%); padding: 34px 30px 30px; text-align: center;
    border-radius: 24px; background: rgba(255, 255, 255, .88);
    box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 40px 80px -30px rgba(28,22,70,.45);
    transform: translateY(10px) scale(.98); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.cmx-sending.is-open .cmx-sending-card { transform: none; }

.cmx-sending-mark { position: relative; width: 76px; height: 76px; margin: 0 auto 18px; display: grid; place-items: center; }
.cmx-sending-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmx-sending-ring circle {
    fill: none; stroke: var(--violet); stroke-width: 4; stroke-linecap: round;
    stroke-dasharray: 120 176; transform-origin: 50% 50%;
    animation: cmxSpin 1s linear infinite;
    transition: stroke .3s ease, stroke-dasharray .4s ease;
}
.cmx-sending-mark::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--violet-soft); transition: background-color .3s ease; }
.cmx-sending-mark .bi { position: relative; font-size: 26px; line-height: 1; transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.cmx-sending-icon { color: var(--violet-ink); animation: cmxBob 1.2s ease-in-out infinite; }
.cmx-sending-done, .cmx-sending-fail { position: absolute !important; opacity: 0; transform: scale(.4); color: #fff; font-size: 30px !important; }

.cmx .cmx-sending-title { font-size: 20px; font-weight: 700; color: var(--ink) !important; letter-spacing: -0.01em; }
.cmx-sending-text { margin-top: 6px !important; font-size: 15px; color: var(--muted) !important; }
.cmx-sending-card .cmx-btn { margin-top: 22px; min-width: 120px; }

/* sent */
.cmx-sending[data-state="done"] .cmx-sending-ring circle { animation: none; stroke: var(--mint); stroke-dasharray: 176 0; }
.cmx-sending[data-state="done"] .cmx-sending-mark::before { background: var(--mint); }
.cmx-sending[data-state="done"] .cmx-sending-icon { opacity: 0; transform: translate(18px, -18px) scale(.5); animation: none; }
.cmx-sending[data-state="done"] .cmx-sending-done { opacity: 1; transform: none; }
/* failed */
.cmx-sending[data-state="fail"] .cmx-sending-ring circle { animation: none; stroke: var(--live); stroke-dasharray: 176 0; }
.cmx-sending[data-state="fail"] .cmx-sending-mark::before { background: var(--live); }
.cmx-sending[data-state="fail"] .cmx-sending-icon { opacity: 0; animation: none; }
.cmx-sending[data-state="fail"] .cmx-sending-fail { opacity: 1; transform: none; }

@keyframes cmxSpin { to { transform: rotate(360deg); } }
@keyframes cmxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
    .cmx-sending-ring circle { animation-duration: 2.5s !important; animation-iteration-count: infinite !important; }
    .cmx-sending-icon { animation: none !important; }
}

/* contact form: inline field errors */
.cmx .cmx-field-error { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13.5px; font-weight: 500; color: #b42336; }
.cmx .cmx-field-error::before { content: "\F332"; font-family: "bootstrap-icons"; font-size: 13px; } /* bi-exclamation-circle-fill */
.cmx .cmx-field-error[hidden] { display: none; }
.cmx .cmx-field.is-invalid input, .cmx .cmx-field.is-invalid textarea { border-color: #e0525f !important; background: #fff6f7 !important; }
.cmx .cmx-field.is-invalid input:focus, .cmx .cmx-field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgba(224, 82, 95, .16) !important; }