/* ==========================================================================
   Dannyokec consultancy platform — Netflix-inspired dark UI, brand blue accent
   ========================================================================== */

/* ---------- themes ----------
   Dark is the house style and the default. Light reuses the palette from the
   original registry site — cool paper, ink navy, the same electric blue — so the
   two modes read as one brand rather than a theme bolted on.

   --text-strong is the "headline white" of dark mode. Only text sitting on a page
   surface uses it; copy over a photo scrim or a blue button stays literally white
   in both themes, because its background does not change.                        */

:root {
    color-scheme: dark;

    --bg: #0b0b0e;
    --bg-raise: #141419;
    --bg-card: #1b1b22;
    --line: #2a2a33;
    --text: #f2f3f7;
    --text-strong: #ffffff;
    --text-dim: #9a9caa;
    --blue: #1d63ff;
    --blue-bright: #4d84ff;
    --danger: #e0455c;
    --ok: #2fbf71;

    /* Surfaces that sit over photography stay dark in both themes. */
    --scrim: rgba(6, 6, 9, 0.55);
    --nav-bg: linear-gradient(to bottom, rgba(11,11,14,0.92), rgba(11,11,14,0));
    --ghost-bg: rgba(255,255,255,0.14);
    --ghost-bg-hover: rgba(255,255,255,0.24);
    --text-faint: #55576a;   /* de-emphasised: struck-out dates, locked labels */
    --text-muted: rgba(242, 243, 247, 0.85);   /* body text, slightly pulled back */
    --text-unlit: rgba(242, 243, 247, 0.16);   /* manifesto words before they light up */
    --outline: rgba(154, 156, 170, 0.16);      /* giant decorative numerals */
    --nav-bg-scrolled: rgba(11, 11, 14, 0.96);
    --band-bg: linear-gradient(180deg, rgba(20,20,25,0.7), rgba(11,11,14,0.9));
    --card-text-bg: linear-gradient(145deg, #171720, #101016);
    --grain-opacity: 0.5;    /* unchanged from before the themes existed */

    --font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --font-body: "Instrument Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --pad-x: clamp(1.1rem, 4.5vw, 4rem);
}

[data-theme="light"] {
    color-scheme: light;

    /* Warm carton rather than pure white, and the grain stays on — the texture is
       what gives the dark theme its paper feel, and paper is the point here too.
       Every value below is contrast-checked against the ground it sits on. */
    --bg: #f1ede4;            /* carton */
    --bg-raise: #e9e4d8;      /* pressed-in surfaces */
    --bg-card: #faf8f2;       /* a lighter sheet laid on the carton */
    --line: #dcd5c7;
    --text: #14202e;          /* 14.1:1 on carton */
    --text-strong: #0a121c;
    --text-dim: #454e5e;      /* 7.2:1 — was 5.1:1 and read as washed out */
    --text-faint: #6a7183;    /* only for genuinely de-emphasised labels */
    --text-muted: rgba(20, 32, 46, 0.86);      /* 10.8:1 on carton */
    --text-unlit: rgba(20, 32, 46, 0.22);      /* the unlit state, ink not paper */
    --outline: rgba(20, 32, 46, 0.20);         /* the outline has to darken on carton */
    /* These three carried hardcoded dark backgrounds, so on paper they became
       dark bands with ink text printed on them — unreadable. */
    --nav-bg-scrolled: rgba(241, 237, 228, 0.97);
    --band-bg: linear-gradient(180deg, #e9e4d8, #e3ddce);
    --card-text-bg: linear-gradient(145deg, #fdfcf8, #f4f1e9);
    --blue: #1d63ff;
    /* #4d84ff is 2.6:1 on carton; this keeps the electric feel and clears AA. */
    --blue-bright: #1550db;
    --danger: #b32439;
    --ok: #147a4c;

    /* The dark theme can fade the nav to transparent over a hero because its text
       is light and the imagery behind is dark. On paper the same gradient puts
       ink-navy links straight onto a dark photograph, so light mode gets a solid
       frosted bar with a hairline instead. */
    --nav-bg: rgba(250, 251, 254, 0.9);
    --ghost-bg: rgba(12,27,51,0.07);
    --ghost-bg-hover: rgba(12,27,51,0.13);
    /* Keep the grain: on carton it reads as paper tooth, which is exactly the
       texture that makes the dark theme feel like paper in the first place. */
    --grain-opacity: 0.55;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.03rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.mono { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.01em; }

/* ---------- nav ---------- */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0.8rem var(--pad-x);
    background: var(--nav-bg);
    transition: background 0.25s ease;
}

.nav.scrolled { background: var(--nav-bg-scrolled); box-shadow: 0 1px 0 var(--line); }

.nav-brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.16em;
    color: var(--blue-bright);
    text-decoration: none;
}

.nav-links { display: flex; gap: 1.4rem; margin-inline: auto; }

.nav-links a {
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-dim);
    transition: color 0.15s ease;
}

.nav-links a:hover, .nav-links a.active { color: var(--text); }

/* the drawer-only CTA and the hamburger stay hidden on desktop.
   .nav-links scope out-specifies the later `.btn { display: inline-block }`. */
.nav-links .nav-drawer-cta { display: none; }

/* The signed-in "My account" link. The bar CTA says it on desktop, so the inline
   copy only earns its place inside the drawer. */
.nav-drawer-only { display: none; }
.nav-toggle { display: none; }
.nav-scrim { display: none; }

/* ---------- buttons ---------- */

.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-body);
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-bright); transform: translateY(-1px); }

.btn-ghost { background: var(--ghost-bg); color: var(--text); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: var(--ghost-bg-hover); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }

.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; }

/* ---------- flash ---------- */

.flash {
    position: relative;
    z-index: 60;
    margin: 5.2rem var(--pad-x) -3.6rem;
    padding: 0.85rem 1.2rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.95rem;
}

.flash-success { background: rgba(47, 191, 113, 0.14); border: 1px solid rgba(47,191,113,0.5); color: #7fe3ae; }
.flash-error { background: rgba(224, 69, 92, 0.13); border: 1px solid rgba(224,69,92,0.5); color: #ff9aa9; }

/* ---------- hero ---------- */

.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center right;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(11,11,14,0.95) 8%, rgba(11,11,14,0.55) 45%, rgba(11,11,14,0.1) 75%),
        linear-gradient(to top, var(--bg) 2%, rgba(11,11,14,0) 38%);
}

.hero-content {
    position: relative;
    padding: 8rem var(--pad-x) 5.5rem;
    max-width: 44rem;
}

.hero-eyebrow { color: var(--blue-bright); text-transform: uppercase; margin-bottom: 1rem; }

.hero h1 {
    font-size: clamp(2.4rem, 5.4vw, 4.4rem);
    font-weight: 800;
    margin-bottom: 1.1rem;
}

.hero-sub { color: var(--text-dim); font-size: 1.08rem; max-width: 36rem; margin-bottom: 1.8rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; color: var(--text-dim); }
.hero-meta .mono { color: var(--blue-bright); }

/* ---------- cinematic scroll hero ---------- */

.cinehero {
    position: relative;
    height: 100vh;
    height: 100dvh; /* avoids mobile browser-chrome resize jumps */
    width: 100%;
    overflow: hidden;
    background: #000;
}

.cinehero-stage { position: absolute; inset: 0; }

.cinehero-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    will-change: opacity, transform;
}

.cinehero-layer.is-active { opacity: 1; }

/* While the hero is pinned and scrubbed, layers are stacked vertically and slid
   by scroll rather than cross-faded: the outgoing frame rises out of view as the
   incoming one climbs into its place. Every layer is opaque here; position does
   the work and the stage clips whatever sits off-frame. */
.cinehero.is-scrubbed .cinehero-stage { overflow: hidden; }
.cinehero.is-scrubbed .cinehero-layer { opacity: 1; }

.cinehero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

/* Cinematic grade: darken left for text, deepen bottom */
.cinehero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(6,6,9,0.96) 0%, rgba(6,6,9,0.72) 34%, rgba(6,6,9,0.12) 66%, rgba(6,6,9,0.35) 100%),
        linear-gradient(to top, var(--bg) 1%, rgba(6,6,9,0) 42%);
}

.cinehero-ui {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 7rem var(--pad-x) clamp(2rem, 5vh, 3.4rem);
    max-width: 1320px;
    margin-inline: auto;
}

.cinehero-eyebrow { color: var(--blue-bright); text-transform: uppercase; margin-bottom: auto; }

/* Slides are stacked; JS toggles .is-active */
.cinehero-slides { position: relative; min-height: clamp(260px, 42vh, 400px); }

.cinehero-slide {
    position: absolute;
    inset: auto auto 0 0;
    max-width: 42rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cinehero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.cinehero-no { display: block; color: var(--text-dim); margin-bottom: 1.2rem; letter-spacing: 0.2em; }

.cinehero-kicker { display: block; color: var(--blue-bright); text-transform: uppercase; margin-bottom: 1rem; }

.cinehero-title {
    font-size: clamp(2.6rem, 6.6vw, 5.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.012em;
    color: #fff;
    margin-bottom: 1.35rem;
    max-width: 14ch; /* deliberate line breaks; no wall-to-wall setting */
}

.cinehero-typed { color: #fff; }

.cinehero-caret {
    display: inline-block;
    width: 0.62ch;
    height: 0.86em;
    margin-left: 0.06em;
    background: var(--blue-bright);
    transform: translateY(0.08em);
    animation: caret-blink 1.05s steps(1) infinite;
}

/* Solid (no blink) while actively typing */
.cinehero-title.is-typing .cinehero-caret { animation: none; opacity: 1; }

@keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .cinehero-caret { animation: none; }
}

.cinehero-line { color: rgba(242,243,247,0.82); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.55; max-width: 30rem; margin-bottom: 1.5rem; }

.cinehero-explore { color: var(--text-strong); text-decoration: none; font-weight: 600; font-size: 0.95rem; border-bottom: 2px solid var(--blue); padding-bottom: 2px; transition: color 0.15s ease, border-color 0.15s ease; }
.cinehero-explore:hover { color: var(--blue-bright); border-color: var(--blue-bright); }

.cinehero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1.8rem;
    flex-wrap: wrap;
}

.cinehero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.cinehero-progress { display: flex; gap: 0.5rem; }

/* ---------- "coming next" dome ---------- */

.cinehero-next { position: relative; width: 156px; flex: none; transition: opacity 0.4s ease; }

.cinehero-arc { display: block; width: 156px; height: 88px; overflow: visible; }

.cinehero-arc-track,
.cinehero-arc-fill { fill: none; stroke-width: 2.5; stroke-linecap: round; }

.cinehero-arc-track { stroke: var(--line); }

.cinehero-arc-fill {
    /* pathLength=1 normalises the arc, so dashoffset is literally "how far round". */
    stroke: var(--text-strong);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.cinehero-next-inner {
    position: absolute;
    inset: auto 0 4px 0;
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    text-align: center;
    padding-inline: 0.6rem;
}

.cinehero-next-label { color: var(--text-dim); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; }

.cinehero-next-name {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.2;
    text-wrap: balance;
}

/* Nothing comes after the last discipline. */
.cinehero-next.is-last { opacity: 0.28; }

@media (prefers-reduced-motion: reduce) {
    .cinehero-next { transition: none; }
}

.cinehero-tick {
    width: 42px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.22);
    overflow: hidden;
    transition: background 0.3s ease;
}

.cinehero-tick.is-active { background: var(--blue); }

.cinehero-cue {
    position: absolute;
    left: var(--pad-x);
    top: 6.4rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.cinehero-cue-line { display: inline-block; width: 46px; height: 1px; background: currentColor; animation: cue-pulse 2.4s ease-in-out infinite; transform-origin: left; }

@keyframes cue-pulse { 0%, 100% { transform: scaleX(0.35); opacity: 0.5; } 50% { transform: scaleX(1); opacity: 1; } }

/* reduced motion / no-JS fallback: static first chapter, natural page flow */
.no-cinescroll .cinehero { height: 100vh; }
.no-cinescroll .cinehero-cue { display: none; }

@media (max-width: 720px) {
    .cinehero-title { font-size: clamp(2.2rem, 10.5vw, 3.2rem); line-height: 1.12; }
    .cinehero-video { object-position: 72% center; }
    .cinehero-scrim { background:
        linear-gradient(to right, rgba(6,6,9,0.9) 0%, rgba(6,6,9,0.55) 60%, rgba(6,6,9,0.35) 100%),
        linear-gradient(to top, var(--bg) 4%, rgba(6,6,9,0.15) 55%); }
    .cinehero-foot { align-items: flex-start; flex-direction: column; gap: 1.2rem; }
    /* tighten the stack so it fits a short phone viewport */
    .cinehero-ui { padding-top: 4.8rem; padding-bottom: 1.6rem; }
    .cinehero-slides { min-height: clamp(220px, 40vh, 320px); }
    .cinehero-no { margin-bottom: 0.6rem; }
    .cinehero-kicker { margin-bottom: 0.5rem; }
    .cinehero-line { font-size: 1rem; margin-bottom: 1.1rem; }
    .cinehero-actions { width: 100%; flex-direction: column; }
    .cinehero-actions .btn { width: 100%; text-align: center; }
    .cinehero-cue { display: none; } /* the "Scroll" cue collided with the top on phones */
}

/* phone nav: swap the long CTA label for a compact one so it always fits */
.nav-cta-mini { display: none; }
@media (max-width: 560px) {
    .nav { gap: 0.8rem; padding-inline: 1rem; }
    .nav-brand { font-size: 1.05rem; letter-spacing: 0.1em; }
    .nav-cta { padding: 0.5rem 1rem; font-size: 0.85rem; white-space: nowrap; }
    .nav-cta-full { display: none; }
    .nav-cta-mini { display: inline; }
}

/* ---------- scroll reveals (rows/sections) ---------- */
/* Only hide when JS is present; no-JS users see everything. */

.js [data-reveal] { opacity: 0; transform: translateY(28px); will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }
    .cinehero-cue-line { animation: none; }
}

/* ---------- rows (netflix) ---------- */

/* minmax(0,1fr) stops the grid column from expanding to its cards' total
   width, so each row-track scrolls horizontally instead of widening the page. */
.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.8rem; padding: 3rem 0 4.5rem; }

.row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* The "see all" link is nowrap, so on a 320px screen it has to be allowed a
       line of its own rather than pushing the page sideways. */
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    padding: 0 var(--pad-x);
    margin-bottom: 0.9rem;
}

.row-head h2 { font-size: 1.35rem; font-weight: 700; }

.row-head a { color: var(--text-dim); font-size: 0.88rem; text-decoration: none; white-space: nowrap; }
.row-head a:hover { color: var(--blue-bright); }

.row-track {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.4rem var(--pad-x) 0.9rem;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.card {
    position: relative;
    flex: 0 0 clamp(240px, 26vw, 340px);
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    scroll-snap-align: start;
    background: var(--bg-card);
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.card:hover {
    transform: scale(1.05);
    z-index: 5;
    box-shadow: 0 18px 40px -18px rgba(0,0,0,0.9);
}

.card img { width: 100%; height: 100%; object-fit: cover; }

.card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.9rem 1rem;
    background: linear-gradient(to top, rgba(5,5,8,0.92) 0%, rgba(5,5,8,0.25) 55%, rgba(5,5,8,0) 80%);
}

.card-kicker { color: var(--blue-bright); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; }

.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: var(--text-strong); }

.card-sub { color: var(--text-dim); font-size: 0.82rem; margin-top: 0.2rem; }

.card-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    background: var(--card-text-bg);
    border: 1px solid var(--line);
}

.card-play {
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(11,11,14,0.65);
    border: 2px solid rgba(255,255,255,0.85);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.1rem;
    pointer-events: none;
}

/* ---------- generic page shell ---------- */

.page {
    padding: 7.5rem var(--pad-x) 4.5rem;
    max-width: 1200px;
    margin-inline: auto;
}

.page-narrow { max-width: 780px; }

.page-eyebrow { color: var(--blue-bright); text-transform: uppercase; margin-bottom: 0.8rem; }

.page h1 { font-size: clamp(1.95rem, 1.1rem + 3.4vw, 3.2rem); font-weight: 800; margin-bottom: 1rem; }

.page-lede { color: var(--text-dim); font-size: 1.12rem; max-width: 44rem; margin-bottom: 2.4rem; }

/* ---------- grids ---------- */

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); margin-top: 1.6rem; }

.grid .card { flex: none; width: 100%; }

/* ---------- brands / companies ---------- */

.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.brand-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.4rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand-accent, var(--blue));
    border-radius: 14px;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.brand-card:hover {
    transform: translateY(-3px);
    background: #20202a;
    border-color: var(--line);
    border-left-color: var(--brand-accent, var(--blue));
}

.brand-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.3rem; }

.brand-card-logo {
    width: 46px; height: 46px;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    padding: 5px;
}

.brand-status {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-dim);
    white-space: nowrap;
}

.brand-status-active { color: #7fe3ae; border-color: rgba(47,191,113,0.5); }
.brand-status-launching { color: #8ab4ff; border-color: rgba(29,99,255,0.5); }
.brand-status-building { color: var(--text-dim); }

.brand-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--text-strong); }
.brand-card-tagline { color: var(--brand-accent, var(--blue-bright)); font-size: 0.92rem; font-weight: 500; }
.brand-card-summary { color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; flex: 1; }

.brand-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.8rem; margin-top: 0.7rem; padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    color: var(--text-dim);
}

.brand-rc { color: var(--brand-accent, var(--blue-bright)); }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.45rem; color: var(--text-dim); margin-bottom: 1.6rem; }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--blue-bright); }

/* brand detail */
.brand-head { display: flex; align-items: center; gap: 1.3rem; margin-bottom: 1.8rem; flex-wrap: wrap; }

.brand-head-logo {
    width: 84px; height: 84px;
    object-fit: contain;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    flex-shrink: 0;
}

.brand-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 0.35rem; }
.brand-head-tagline { color: var(--brand-accent, var(--blue-bright)); font-size: 1.15rem; font-weight: 500; }

.brand-facts {
    display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 2.4rem;
}

.brand-facts dt { color: var(--text-dim); margin-bottom: 0.2rem; }
.brand-facts dd { font-weight: 600; font-size: 0.98rem; }

.brand-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
}

.brand-aside { display: grid; gap: 1rem; position: sticky; top: 5.5rem; }
.brand-aside .admin-card { margin-bottom: 0; }
.brand-aside .btn { text-align: center; }

.brand-list { list-style: none; display: grid; gap: 0.6rem; }

.brand-list li {
    position: relative;
    padding-left: 1.1rem;
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.5;
}

.brand-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.55em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--brand-accent, var(--blue));
}

@media (max-width: 860px) {
    .brand-body { grid-template-columns: 1fr; }
    .brand-aside { position: static; }
}

/* ---------- article ---------- */

.article-hero { border-radius: 14px; overflow: hidden; margin-bottom: 2rem; max-height: 420px; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; color: var(--text-dim); font-size: 0.88rem; margin-bottom: 2rem; }
.article-meta .mono { color: var(--blue-bright); }

.prose { max-width: 46rem; }
.prose h2 { font-size: 1.5rem; margin: 2.2rem 0 0.8rem; }
.prose h3 { font-size: 1.2rem; margin: 1.8rem 0 0.6rem; }
.prose p { margin-bottom: 1.1rem; }
.prose ul, .prose ol { margin: 0 0 1.1rem 1.4rem; }
.prose li { margin-bottom: 0.35rem; }
.prose strong { color: var(--text-strong); }
.prose blockquote { border-left: 3px solid var(--blue); padding-left: 1.1rem; color: var(--text-dim); margin-bottom: 1.1rem; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-card); padding: 0.12em 0.4em; border-radius: 5px; }
.prose pre { background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; overflow-x: auto; margin-bottom: 1.2rem; }
.prose pre code { background: none; padding: 0; }

.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    margin-bottom: 2rem;
}

.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- forms ---------- */

.form { display: grid; gap: 1.1rem; max-width: 40rem; }

.form-grid-2 { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }

.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }

.field .hint { color: var(--text-dim); font-size: 0.82rem; margin-top: 0.3rem; }

.field input, .field textarea, .field select {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.98rem;
}

.field input:focus, .field textarea:focus, .field select:focus {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
    border-color: var(--blue);
}

.field textarea { min-height: 150px; resize: vertical; }

.field-error { color: #ff9aa9; font-size: 0.84rem; margin-top: 0.3rem; }

/* ---------- booking ---------- */

.fee-box {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: linear-gradient(140deg, rgba(29,99,255,0.16), rgba(29,99,255,0.04));
    border: 1px solid rgba(29,99,255,0.45);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    margin-bottom: 2rem;
    max-width: 40rem;
}

.fee-amount { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--text-strong); white-space: nowrap; }

.fee-box p { color: var(--text-dim); font-size: 0.92rem; }

.status-timeline { display: grid; gap: 0.6rem; margin: 1.8rem 0; max-width: 40rem; }

.status-step {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    padding: 0.85rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-dim);
}

.status-step.done { border-color: rgba(47,191,113,0.5); color: var(--text); }
.status-step.bad { border-color: rgba(224,69,92,0.55); color: var(--text); }

.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.status-step.done .status-dot { background: var(--ok); }
.status-step.bad .status-dot { background: var(--danger); }

.booking-summary {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.4rem;
    display: grid;
    gap: 0.7rem;
    max-width: 40rem;
    margin-bottom: 1.6rem;
}

.booking-summary div { display: flex; justify-content: space-between; gap: 1.5rem; font-size: 0.95rem; }
.booking-summary dt { color: var(--text-dim); }
.booking-summary dd { text-align: right; }

/* ---------- pagination ---------- */

.pager { display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.5rem; }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--line); padding: 3rem var(--pad-x) 2rem; margin-top: 2rem; }

.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin-inline: auto;
}

.footer-logo { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.16em; color: var(--blue-bright); display: block; margin-bottom: 0.7rem; }

.footer-brand p { color: var(--text-dim); font-size: 0.9rem; max-width: 26rem; }

.footer-col { display: grid; gap: 0.45rem; align-content: start; }

.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 0.3rem; }

.footer-col a, .footer-col span { color: var(--text-dim); text-decoration: none; font-size: 0.92rem; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--text); }

.footer-registry {
    text-align: center;
    color: var(--text-dim);
    max-width: 1200px;
    margin-inline: auto;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    line-height: 1.75;
}

.footer-registry strong { color: var(--text); font-weight: 500; white-space: nowrap; }

.footer-legal { text-align: center; color: var(--text-dim); margin-top: 0.7rem; }

/* ---------- publisher admin ---------- */

.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.admin-side {
    background: var(--bg-raise);
    border-right: 1px solid var(--line);
    padding: 1.4rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: sticky;
    top: 0;
    height: 100vh;
}

.admin-side .nav-brand { margin-bottom: 1.4rem; padding-left: 0.6rem; font-size: 1rem; }

.admin-side a {
    text-decoration: none;
    color: var(--text-dim);
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    font-size: 0.94rem;
    font-weight: 500;
}

.admin-side a:hover { color: var(--text); background: var(--bg-card); }
.admin-side a.active { color: #fff; background: var(--blue); }

.admin-side form { margin-top: auto; }

.admin-main { padding: 2rem clamp(1.2rem, 3vw, 2.6rem); }

.admin-main h1 { font-size: 1.7rem; margin-bottom: 1.4rem; }

.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.admin-head h1 { margin-bottom: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 1rem; margin-bottom: 2rem; }

.stat {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
}

.stat .num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; }
.stat .lbl { color: var(--text-dim); font-size: 0.85rem; }
.stat.warn { border-color: rgba(29,99,255,0.6); }

.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }

.table th {
    text-align: left;
    color: var(--text-dim);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--line);
}

.table td { padding: 0.75rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }

.table a { color: var(--blue-bright); text-decoration: none; }
.table a:hover { text-decoration: underline; }

.pill {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    background: var(--bg-raise);
    border: 1px solid var(--line);
    color: var(--text-dim);
    white-space: nowrap;
}

.pill-paid { color: #8ab4ff; border-color: rgba(29,99,255,0.6); }
.pill-accepted { color: #7fe3ae; border-color: rgba(47,191,113,0.55); }
.pill-declined, .pill-refunded, .pill-payment_failed { color: #ff9aa9; border-color: rgba(224,69,92,0.55); }
.pill-published { color: #7fe3ae; border-color: rgba(47,191,113,0.55); }

/* Those three are tuned for a dark ground and drop to ~1.5:1 on the carton.
   Darkened here so a client reading a booking status in light mode can see it. */
[data-theme="light"] .pill-paid { color: #1546b8; }
[data-theme="light"] .pill-accepted,
[data-theme="light"] .pill-published { color: #12653a; }
[data-theme="light"] .pill-declined,
[data-theme="light"] .pill-refunded,
[data-theme="light"] .pill-payment_failed { color: #a01b32; }

.admin-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.4rem; }

.admin-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem; margin-bottom: 1.4rem; }
.admin-card h3 { margin-bottom: 0.8rem; font-size: 1.05rem; }

/* ---------- auth ---------- */

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }

.auth-card {
    width: min(100%, 400px);
    background: var(--bg-raise);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 2.2rem;
}

.auth-card h1 { font-size: 1.5rem; margin-bottom: 1.4rem; }

/* ---------- responsive ---------- */

/* ---------- mobile + tablet drawer nav ---------- */
/* 1000px, not 900: between 901 and 1000 the inline nav and the Book CTA do not
   both fit, and the CTA was rendering clipped off the right edge. */
@media (max-width: 1000px) {
    /* hamburger button */
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 0 9px;
        background: none;
        border: 1px solid var(--line);
        border-radius: 10px;
        cursor: pointer;
        z-index: 130;
    }
    .nav-toggle-bar { height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* the top-bar Book button gives way to the drawer on mobile */
    .nav-cta { display: none; }

    /* slide-in drawer */
    .nav-links {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(82vw, 340px);
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        padding: 4.25rem 1.5rem 1.5rem;
        background: var(--bg-raise);
        border-left: 1px solid var(--line);
        box-shadow: -24px 0 60px -30px rgba(0,0,0,0.9);
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 120;
        overflow-y: auto;
    }
    .nav-links.is-open { transform: translateX(0); }

    .nav-links a {
        font-size: 1.02rem;
        font-family: var(--font-display);
        font-weight: 600;
        color: var(--text);
        padding: 0.75rem 0.4rem;
        border-bottom: 1px solid var(--line);
    }
    .nav-links a.active { color: var(--blue-bright); }

    .nav-links .nav-drawer-only { display: block; }

    .nav-links .nav-drawer-cta {
        display: block;
        margin-top: 1rem;
        text-align: center;
        font-family: var(--font-body);
        border-bottom: 0;

        /* Restore the button's own text colour. `.nav-links a` above is (0,1,1)
           and out-specifies `.btn-primary` (0,1,0), so the drawer was painting
           this button with var(--text). In dark mode that is near-white and
           looked correct by accident; in light mode it became ink-navy on blue
           at 3.36:1, which fails AA. This selector is (0,2,0), so it wins. */
        color: #fff;
    }

    /* dim + lock the page behind the open drawer */
    /* Scrim must sit BELOW .nav (z-index 100) so the drawer, which lives
       inside .nav's stacking context, paints and receives taps above it. */
    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(6,6,9,0.6);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 90;
    }
    .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
    body.nav-open { overflow: hidden; }
}

@media (max-width: 1000px) {
    .nav-links-legacy-hidden { display: none; }
    .nav { justify-content: space-between; }
}

@media (max-width: 900px) {
    .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-shell { grid-template-columns: 1fr; }
    .admin-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .admin-side form { margin-top: 0; }
    .hero { min-height: 78vh; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .card, .btn { transition: none; }
}

/* ==========================================================================
   CINEMATIC LAYER — ambient atmosphere, editorial chapters, showcase
   ========================================================================== */

/* ---------- atmosphere: grain + ambient glow ---------- */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--grain-opacity, 0.5);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 2; }

/* ---------- big button ---------- */

.btn-lg { padding: 1rem 2.1rem; font-size: 1.05rem; }

/* ---------- manifesto ---------- */

.manifesto {
    position: relative;
    padding: clamp(6rem, 16vh, 11rem) var(--pad-x);
    overflow: hidden;
}

.manifesto::before {
    content: "";
    position: absolute;
    top: -30%; left: 50%;
    width: 60rem; height: 60rem;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(29,99,255,0.09) 0%, transparent 62%);
    pointer-events: none;
}

.manifesto-inner { max-width: 62rem; margin-inline: auto; position: relative; }

.manifesto-kicker { color: var(--blue-bright); text-transform: uppercase; display: block; margin-bottom: 1.6rem; }

.manifesto-text {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4.2vw, 3.3rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.015em;
    color: var(--text);
}

/* word-by-word reveal: JS wraps words in .mword */
.manifesto-text .mword { color: var(--text-unlit); transition: color 0.4s ease; }
.manifesto-text .mword.is-lit { color: var(--text); }

.manifesto-sign {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 2.6rem;
    color: var(--text-dim);
}

.manifesto-rule { flex: 0 0 clamp(3rem, 10vw, 8rem); height: 1px; background: var(--line); }

/* ---------- stat band ---------- */

.statband {
    border-block: 1px solid var(--line);
    background: var(--band-bg);
}

.statband-inner {
    max-width: 1280px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 var(--pad-x);
}

.statband-item {
    padding: clamp(1.8rem, 4vw, 3rem) 1.2rem;
    display: grid;
    gap: 0.4rem;
    justify-items: start;
    border-left: 1px solid var(--line);
}

.statband-item:first-child { border-left: 0; }

.statband-num {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.statband-num-sm { font-size: clamp(1.05rem, 2.2vw, 1.6rem); letter-spacing: 0.06em; color: var(--blue-bright); align-self: center; }

.statband-lbl { color: var(--text-dim); letter-spacing: 0.14em; }

/* ---------- discipline chapters ---------- */

.chapters { padding: clamp(4rem, 10vh, 8rem) var(--pad-x); max-width: 1320px; margin-inline: auto; }

.chapters-head { margin-bottom: clamp(3rem, 8vh, 5rem); max-width: 46rem; }

.chapters-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.2vw, 4.2rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.chapters-title em { font-style: normal; color: var(--blue-bright); }

.chapter {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(3rem, 8vh, 5.5rem) 0;
}

.chapter + .chapter { border-top: 1px solid var(--line); }

.chapter-flip .chapter-media { order: 2; }
.chapter-flip .chapter-copy { order: 1; }

.chapter-index {
    position: absolute;
    top: 1.2rem;
    right: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(6rem, 16vw, 13rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--outline);
    pointer-events: none;
    user-select: none;
}

.chapter-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}

.chapter-media img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    will-change: transform;
}

.chapter-media::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
    border-radius: 18px;
    pointer-events: none;
}

.chapter-no { display: block; color: var(--blue-bright); letter-spacing: 0.2em; margin-bottom: 0.9rem; }

.chapter-copy h3 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 1rem;
}

.chapter-lede { color: var(--text-dim); font-size: 1.08rem; margin-bottom: 1.4rem; max-width: 34rem; }

.chapter-proof { list-style: none; display: grid; gap: 0.65rem; margin-bottom: 1.6rem; }

.chapter-proof li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-muted);
    font-size: 0.97rem;
}

.chapter-proof li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.52em;
    width: 14px; height: 2px;
    background: var(--blue);
}

/* ---------- companies band + marquee ---------- */

.companies-band { padding: clamp(4rem, 10vh, 7rem) 0; border-top: 1px solid var(--line); }

.companies-band .chapters-head { padding: 0 var(--pad-x); max-width: 1320px; margin-inline: auto; margin-bottom: 2.4rem; }

.marquee {
    overflow: hidden;
    border-block: 1px solid var(--line);
    padding: 1.1rem 0;
    margin-bottom: 2.2rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
    display: flex;
    gap: 3.4rem;
    width: max-content;
    will-change: transform;
    animation: marquee-slide 36s linear infinite;
}

.marquee-item { display: flex; align-items: center; gap: 0.7rem; color: var(--text-dim); letter-spacing: 0.14em; }

.marquee-item img { height: 26px; width: 26px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }

@keyframes marquee-slide { to { transform: translateX(-50%); } }

.companies-row { padding-inline: var(--pad-x); }

.companies-cta { text-align: center; margin-top: 2rem; }

/* ---------- closing CTA ---------- */

.endcta {
    position: relative;
    padding: clamp(6rem, 18vh, 12rem) var(--pad-x);
    text-align: center;
    overflow: hidden;
    border-top: 1px solid var(--line);
}

.endcta::before {
    content: "";
    position: absolute;
    bottom: -45%; left: 50%;
    width: 70rem; height: 44rem;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at bottom, rgba(29,99,255,0.16) 0%, transparent 60%);
    pointer-events: none;
}

.endcta-inner { position: relative; }

.endcta-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6.4vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 1rem 0 2.2rem;
}

.endcta-title em { font-style: normal; color: var(--blue-bright); }

.endcta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ---------- group hero (/my-brands) ---------- */

.ghero {
    position: relative;
    min-height: 88vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 7rem var(--pad-x) 4rem;
    overflow: hidden;
}

.ghero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 50% 8%, rgba(29,99,255,0.16), transparent 65%),
        radial-gradient(ellipse 40% 32% at 82% 78%, rgba(29,99,255,0.07), transparent 60%);
    pointer-events: none;
}

.ghero-inner { position: relative; max-width: 56rem; }

.ghero-title {
    font-family: var(--font-display);
    font-size: clamp(4.4rem, 17vw, 13rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin: 1.2rem 0 1.6rem;
    color: var(--text-strong);
}

.ghero-dot { color: var(--blue-bright); }

.ghero-sub { color: var(--text-dim); font-size: clamp(1.02rem, 1.6vw, 1.2rem); max-width: 40rem; margin-inline: auto; }

.ghero-sub strong { color: var(--text); }

.ghero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: 2.4rem;
    color: var(--blue-bright);
    letter-spacing: 0.16em;
}

.ghero-meta-rule { width: 34px; height: 1px; background: var(--line); }

.ghero-cue { top: auto; bottom: 2.2rem; left: 50%; transform: translateX(-50%); }

/* ---------- flagship showcase ---------- */

.showcase { position: relative; border-top: 1px solid var(--line); }

.showcase-track {
    display: flex;
    flex-direction: column; /* mobile / no-JS: vertical stack */
}

.showpanel {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(3.5rem, 9vh, 6rem) var(--pad-x);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.showpanel-index {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(14rem, 42vh, 30rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--brand-accent, #1d63ff) 22%, transparent);
    pointer-events: none;
    user-select: none;
}

.showpanel-body { position: relative; max-width: 34rem; text-align: center; display: grid; justify-items: center; gap: 0.7rem; }

.showpanel-logo { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 0 44px -8px color-mix(in srgb, var(--brand-accent, #1d63ff) 55%, transparent); }

.showpanel-sector { color: var(--brand-accent, var(--blue-bright)); letter-spacing: 0.2em; }

.showpanel-name {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-strong);
}

.showpanel-tagline { color: var(--brand-accent, var(--blue-bright)); font-weight: 600; font-size: 1.08rem; }

.showpanel-summary { color: var(--text-dim); font-size: 0.98rem; }

.showpanel-foot { display: flex; align-items: center; gap: 1.4rem; margin-top: 0.8rem; flex-wrap: wrap; justify-content: center; }

.showpanel-rc { color: var(--text-dim); border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem 0.55rem; }

/* desktop + motion: JS flips this to a pinned horizontal ride */
.showcase.is-horizontal .showcase-pin { overflow: hidden; }

.showcase.is-horizontal .showcase-track { flex-direction: row; height: 100vh; }

.showcase.is-horizontal .showpanel {
    flex: 0 0 100vw;
    height: 100vh;
    border-bottom: 0;
    border-right: 1px solid var(--line);
}

.registry-section .brand-grid { margin-top: 2.4rem; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .statband-inner { grid-template-columns: repeat(2, 1fr); }
    .statband-item:nth-child(3) { border-left: 0; }
    .statband-item { border-top: 1px solid var(--line); }
    .statband-item:nth-child(-n+2) { border-top: 0; }

    .chapter { grid-template-columns: 1fr; padding: 2.6rem 0; }
    .chapter-flip .chapter-media { order: 0; }
    .chapter-flip .chapter-copy { order: 1; }
    .chapter-index { font-size: 6rem; top: 0.6rem; }

    .ghero { min-height: 74vh; }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .chapter-media img { height: 100%; }
}

/* ---------- content sections (blog/videos by practice) ---------- */

.section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.section-card {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.section-card:hover { transform: translateY(-3px); border-color: var(--blue); }

.section-card-media { flex: 0 0 118px; }

.section-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }

.section-card-body { display: grid; gap: 0.25rem; align-content: center; padding: 1.1rem 1.1rem 1.1rem 0; }

.section-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--text-strong); line-height: 1.25; }

.section-card-sub { color: var(--text-dim); font-size: 0.88rem; }

.section-card-meta { color: var(--blue-bright); margin-top: 0.35rem; }

/* ---------- lesson list (courses / playlists / series) ---------- */

.lesson-list { list-style: none; display: grid; gap: 0.7rem; margin-top: 1.6rem; border-top: 2px solid var(--ink, var(--line)); padding-top: 1.2rem; }

.lesson {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    transition: border-color 0.18s ease;
}

.lesson:hover { border-color: var(--blue); }

.lesson-index { color: var(--blue-bright); letter-spacing: 0.15em; padding-top: 0.2rem; }

.lesson-body { display: grid; gap: 0.25rem; }

.lesson-note { color: var(--text-dim); }

.lesson-title { color: var(--text-strong); font-weight: 600; text-decoration: none; font-size: 1.02rem; cursor: pointer; }

.lesson-title:hover { color: var(--blue-bright); }

.lesson-kind { color: var(--text-dim); }

/* ---------- publisher editor (write + live preview) ---------- */

.editor { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-card); }

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg-raise);
}

.editor-toolbar button {
    background: none;
    border: 1px solid transparent;
    color: var(--text-dim);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: var(--font-body);
}

.editor-toolbar button:hover { color: var(--text); border-color: var(--line); background: var(--bg-card); }

.editor-toolbar-spacer { flex: 1; }

.editor-count { color: var(--text-dim); }

.editor-panes { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; }

.editor-panes textarea {
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg-card);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.92rem;
    line-height: 1.7;
    padding: 1.1rem 1.2rem;
    resize: vertical;
    min-height: 460px;
    width: 100%;
}

.editor-panes textarea:focus { outline: none; }

.editor-preview { padding: 1.1rem 1.2rem; overflow-y: auto; max-height: 640px; }

@media (max-width: 1000px) {
    .editor-panes { grid-template-columns: 1fr; }
    .editor-panes textarea { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* SERP preview */
.serp-preview {
    background: var(--bg-raise);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    display: grid;
    gap: 0.15rem;
    margin-top: 0.6rem;
}

.serp-title { color: #8ab4f8; font-size: 1.05rem; font-weight: 500; }
.serp-url { color: #7fb383; font-size: 0.8rem; }
.serp-desc { color: var(--text-dim); font-size: 0.87rem; line-height: 1.45; }

/* ---------- expertise closing pitch paths ---------- */

.endcta-pitch {
    color: var(--text-dim);
    font-size: 1.08rem;
    max-width: 40rem;
    margin: -0.8rem auto 2.4rem;
    line-height: 1.65;
}

.pitch-paths {
    display: grid;
    /* auto-fit rather than a hard 3: 3 columns on desktop, 2 on a tablet, 1 on a
       phone, without a breakpoint that a 768px iPad falls on the wrong side of. */
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 1rem;
    max-width: 56rem;
    margin-inline: auto;
    text-align: left;
}

.pitch-path {
    display: grid;
    gap: 0.3rem;
    align-content: start;
    padding: 1.3rem 1.4rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.pitch-path:hover { transform: translateY(-3px); border-color: var(--blue); }

.pitch-path-primary { background: var(--blue); border-color: var(--blue); }
.pitch-path-primary:hover { background: var(--blue-bright); }
.pitch-path-primary .pitch-path-kicker { color: rgba(255,255,255,0.85); }
.pitch-path-primary .pitch-path-sub { color: rgba(255,255,255,0.75); }

.pitch-path-kicker { color: var(--blue-bright); letter-spacing: 0.14em; }
.pitch-path-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text-strong); }
.pitch-path-sub { color: var(--text-dim); font-size: 0.88rem; }

/* ---------- publisher login: portrait background, side panel ---------- */

.login-split {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center right;
    display: flex;
    align-items: stretch;
}

.login-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(6,6,9,0.94) 0%, rgba(6,6,9,0.82) 30%, rgba(6,6,9,0.25) 62%, rgba(6,6,9,0.35) 100%),
        linear-gradient(to top, rgba(6,6,9,0.55) 0%, rgba(6,6,9,0) 40%);
}

.login-panel {
    position: relative;
    z-index: 2;
    width: min(100%, 430px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.9rem;
    padding: 3rem clamp(1.6rem, 4vw, 3.4rem);
    background: rgba(15, 15, 20, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid rgba(255,255,255,0.07);
}

.login-panel .nav-brand { margin-bottom: 2.2rem; }

.login-kicker { color: var(--blue-bright); letter-spacing: 0.22em; }

.login-panel h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.08;
    color: #fff;
}

.login-sub { color: var(--text-dim); font-size: 0.98rem; margin-bottom: 1.2rem; }

.login-panel .form { max-width: none; }

.login-foot { color: var(--text-dim); margin-top: 2.4rem; letter-spacing: 0.14em; }

@media (max-width: 640px) {
    .login-split { background-position: 70% top; }
    .login-panel { width: 100%; border-right: 0; justify-content: flex-end; }
    .login-scrim { background: linear-gradient(to top, rgba(6,6,9,0.96) 34%, rgba(6,6,9,0.35) 75%, rgba(6,6,9,0.25) 100%); }
}

/* ==========================================================================
   Tablet + touch layer
   --------------------------------------------------------------------------
   The breakpoints above grew up around the phone/desktop split, which left the
   768–900px band (iPad portrait, iPad Air, most Android tablets) rendered as an
   oversized phone. This block treats that band as its own tier and adapts the
   interaction model for fingers rather than a mouse.
   ========================================================================== */

/* --- Tablet: the booking CTA earns its place in the bar again -------------- */
@media (min-width: 700px) and (max-width: 1000px) {
    /* There is room for the real CTA next to the hamburger at this width, so
       show it and drop the drawer copy — never both at once. */
    /* .nav-links is fixed (it is the drawer) at this width, so the bar is just
       brand | cta | toggle — push the CTA over to sit beside the hamburger
       instead of floating in the middle of the bar. */
    .nav-cta { display: inline-flex; align-items: center; margin-left: auto; }
    .nav-cta-full { display: inline; }
    .nav-cta-mini { display: none; }
    .nav-links .nav-drawer-cta { display: none; }
}

/* --- Tablet: use the width instead of stretching phone layouts ------------- */
@media (min-width: 641px) and (max-width: 900px) {
    /* A 700px-wide column of body copy is a wall of text; hold a sane measure. */
    .page-lede { font-size: 1.16rem; }

    /* Two-up cards rather than one giant stack down the middle. */
    .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The footer reads better as 3 columns than 2 at this width. */
    .footer-inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
    .footer-brand { grid-column: 1 / -1; }

    /* Three pitch paths in a two-column grid orphan the last one. That last one
       is the paid CTA, so give it the full width rather than half a row. */
    .pitch-path-primary { grid-column: 1 / -1; }
}

/* --- Phones: stack paired form fields -------------------------------------- */
@media (max-width: 640px) {
    .form-grid-2 { grid-template-columns: 1fr; }
}

/* --- Cards outside a scroll row size to their content ---------------------- */
/* .card carries aspect-ratio 16/9 for the horizontal rows. In a stacked grid a
   text-only card then renders ~110px of dead space above its own words. */
.grid .card-text,
.section-grid .card-text {
    /* Out of the horizontal rows these are text boxes, not 16:9 media. The floor
       keeps a row of them visually even; it was previously inline on each card,
       which meant phones could not opt out of 220px of mostly empty box. */
    aspect-ratio: auto;
    min-height: 220px;
}

@media (max-width: 640px) {
    .grid .card-text,
    .section-grid .card-text {
        min-height: 0;
        padding-block: 1.15rem;
    }
}

/* --- Touch: targets a finger can actually hit ------------------------------ */
/* WCAG 2.5.5 and the Apple/Material guidance all land near 44px. Scoped to
   coarse pointers so the desktop layout keeps its tighter rhythm. */
@media (pointer: coarse) {
    /* .btn already clears 44px from its own padding and line-height, so it is
       left alone here — setting `display` on it would out-rank the rule that
       hides .nav-cta behind the drawer and put two Book buttons on a phone. */
    .btn-sm { padding-block: 0.62rem; }

    .nav-toggle { width: 46px; height: 46px; }

    .nav-links a { padding-block: 0.6rem; }   /* ~46px tall: still clears the 44px floor */

    /* Footer and row links sit in dense lists — space them into their own rows. */
    .footer-col a,
    .footer-col span { padding-block: 0.4rem; }

    .row-head a,
    .pager a { padding: 0.6rem 0.9rem; }

    /* Inputs below 16px make iOS Safari zoom the whole page on focus. */
    .field input,
    .field textarea,
    .field select { font-size: 1rem; }
}

/* --- Touch: horizontal card rows get momentum + edge padding --------------- */
@media (pointer: coarse) {
    .row-track {
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: var(--pad-x);
    }
}

/* --- Touch: the last few targets a finger misses -------------------------- */
@media (pointer: coarse) {
    /* Sized with min-height rather than padding so the bar does not grow: the
       46px hamburger already sets the nav's height. */
    .nav-brand {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .cinehero-explore {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Contact rows are standalone links, not prose, so they get real targets. */
    .booking-summary a {
        display: inline-block;
        padding-block: 0.55rem;
    }
}

/* ==========================================================================
   Slot picker (booking form)
   ========================================================================== */

.slots { border: 0; display: grid; gap: 1.1rem; }

.slots legend {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.slots-hint { margin-bottom: 0.2rem; }
.slots-error { margin-bottom: 0.4rem; }

.slot-day { display: grid; gap: 0.5rem; }

.slot-day-label { color: var(--text-dim); text-transform: uppercase; }

.slot-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.slot-chip { position: relative; display: inline-flex; cursor: pointer; }

/* The radio stays in the accessibility tree and keeps keyboard behaviour; only
   its default rendering is hidden. */
.slot-chip input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.slot-chip-face {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.slot-chip:hover .slot-chip-face { border-color: var(--blue); color: var(--text); }

.slot-chip input:checked + .slot-chip-face {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.slot-chip input:focus-visible + .slot-chip-face { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

.slots-empty {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--danger);
    border-radius: 14px;
    padding: 1.6rem 1.7rem;
}

.slots-empty h2 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.slots-empty p { color: var(--text-dim); font-size: 0.95rem; }
.slots-empty a { color: var(--blue-bright); }

/* ==========================================================================
   Availability board (publisher)
   ========================================================================== */

.admin-lede { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 1.6rem; max-width: 46rem; }

.avail-day {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}

.avail-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.avail-day-head h3 { font-size: 1.02rem; }
.avail-day-meta { color: var(--text-dim); margin-top: 0.2rem; }
.avail-tag-full { color: #ff9aa9; }

.avail-day-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.avail-slots { display: grid; gap: 0.5rem; }

.avail-slot {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.8rem;
    background: var(--bg-raise);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 10px;
}

.avail-slot form { display: flex; gap: 0.4rem; align-items: center; margin-left: auto; flex-wrap: wrap; }

.avail-slot-time { color: var(--text); min-width: 11rem; }
.avail-slot-state { color: var(--text-dim); font-size: 0.88rem; }
.avail-slot-open { color: var(--ok); }

.avail-slot-who { color: var(--text); text-decoration: none; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.avail-slot-who:hover { color: var(--blue-bright); }

.avail-open { border-left-color: var(--ok); }
.avail-booked { border-left-color: var(--blue); }
.avail-blocked { border-left-color: var(--danger); }
.avail-full, .avail-past { opacity: 0.55; }

.avail-reason {
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    width: 11rem;
}

@media (max-width: 640px) {
    .avail-slot { align-items: stretch; flex-direction: column; }
    .avail-slot form { margin-left: 0; }
    .avail-reason { width: 100%; }
    .avail-slot-time { min-width: 0; }
}

/* ==========================================================================
   Booking calendar
   ========================================================================== */

.cal {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem 1.1rem 0.9rem;
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.cal-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }

.cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-raise);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cal-nav:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-bright); }
.cal-nav:disabled { opacity: 0.3; cursor: default; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }

.cal-dow {
    text-align: center;
    color: var(--text-dim);
    padding-bottom: 0.4rem;
    font-size: 0.66rem;
}

.cal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    aspect-ratio: 1;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--font-body);
    color: var(--text-dim);
}

.cal-num { font-size: 0.92rem; line-height: 1; }

.cal-cell-empty { visibility: hidden; }

/* No slots left: visible for orientation, but plainly not for sale. */
.cal-cell-off { color: var(--text-faint); }
.cal-cell-off .cal-num { text-decoration: line-through; text-decoration-thickness: 1px; }

.cal-cell-open {
    background: var(--bg-raise);
    border-color: var(--line);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.cal-cell-open:hover { border-color: var(--blue); transform: translateY(-1px); }
.cal-cell-open:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* Count of free slots that day. */
.cal-dot {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    line-height: 1;
    color: var(--ok);
    letter-spacing: 0;
}

.cal-cell-open[aria-pressed="true"] {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.cal-cell-open[aria-pressed="true"] .cal-dot { color: rgba(255,255,255,0.8); }

.cal-legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    color: var(--text-dim);
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.cal-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-key-open { background: var(--bg-raise); border: 1px solid var(--blue); }
.cal-key-off { background: none; border: 1px solid var(--text-faint); margin-left: 0.7rem; }

.cal-panels { margin-top: 1rem; }

.cal-prompt { color: var(--text-dim); font-size: 0.9rem; }

.cal-panel { display: grid; gap: 0.55rem; }

/* An author `display` beats the UA rule for [hidden], so without this the JS sets
   the attribute and every day's slots stay on screen anyway. */
.cal-panel[hidden],
.cal-month[hidden] { display: none; }

.cal-panel-head { color: var(--blue-bright); text-transform: uppercase; }

@media (max-width: 420px) {
    .cal { padding: 0.8rem 0.7rem; }
    .cal-grid { gap: 3px; }
    .cal-num { font-size: 0.84rem; }
}

/* ==========================================================================
   Client accounts + paid courses
   ========================================================================== */

/* The auth pages share the booking split, so sign-in, register and booking all
   feel like one flow rather than three designs. */
.auth-action {
    max-width: 34rem;
    /* The auth forms are short. Centre them in the column so the page reads as
       deliberate rather than top-anchored with a well of empty space beneath. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}
.auth-action .form,
.auth-page .form { max-width: 26rem; }





.auth-alt { color: var(--text-dim); font-size: 0.93rem; margin-top: 1.4rem; }
.auth-alt a { color: var(--blue-bright); }

.checkline { display: flex; align-items: center; gap: 0.55rem; color: var(--text-dim); font-size: 0.92rem; }
.checkline input { width: 18px; height: 18px; accent-color: var(--blue); }

/* A .checkline is usually a <label>, and inside a .field it loses to
   `.field label { display: block }` — (0,1,1) against (0,1,0). Flattened to a
   block, its own align-items and gap stop applying and the box ends up jammed
   against the words. Scoping to .field makes this (0,2,0) and it wins. */
.field .checkline { display: flex; }

/* --- lesson shell: player + curriculum sidebar ------------------------------ */

.lesson-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2.4rem;
    align-items: start;
}

/* Explicit placement so the sidebar spans both rows: it has to be tall enough
   for `position: sticky` to have anywhere to travel. */
.lesson-main { grid-column: 1; grid-row: 1; min-width: 0; }

.lesson-aside {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 5.5rem;
    min-width: 0;
}

.lesson-curriculum {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-card);
    overflow: hidden;
}

/* Above the breakpoint this is a plain sidebar, so the disclosure control is
   hidden and `open` keeps the list permanently visible. */
.lesson-curriculum-summary {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.1rem;
    cursor: pointer;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    list-style: none;
}

.lesson-curriculum-summary::-webkit-details-marker { display: none; }
.lesson-curriculum-count { font-size: 0.78rem; color: var(--text-dim); }

.lesson-curriculum-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lesson-row + .lesson-row { border-top: 1px solid rgba(42, 42, 51, 0.6); }

.lesson-row-link {
    display: flex;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background-color 140ms ease;
}

a.lesson-row-link:hover,
a.lesson-row-link:focus-visible { background: rgba(255, 255, 255, 0.05); }

.lesson-row-num {
    flex: 0 0 auto;
    min-width: 1.6rem;
    font-size: 0.78rem;
    color: var(--text-faint);
    padding-top: 0.15rem;
}

.lesson-row-body { min-width: 0; display: block; }

.lesson-row-title {
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
}

.lesson-row-meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.lesson-row-badge { font-weight: 600; }
.lesson-row-lock { color: var(--text-faint); }

.lesson-row.is-current > .lesson-row-link {
    background: rgba(29, 99, 255, 0.13);
    box-shadow: inset 2px 0 0 var(--blue-bright);
}

.lesson-row.is-current .lesson-row-title { font-weight: 600; color: var(--text-strong); }
.lesson-row.is-current .lesson-row-num { color: var(--blue-bright); }

/* Row zero: the trailer. Set apart from the numbered lessons below it. */
.lesson-row-intro { border-bottom: 1px solid var(--line); }
.lesson-row-intro + .lesson-row { border-top: 0; }
.lesson-row-intro .lesson-row-num { color: var(--blue-bright); }

.lesson-row.is-locked .lesson-row-link { cursor: not-allowed; }
.lesson-row.is-locked .lesson-row-title { color: var(--text-faint); }

.lesson-curriculum-foot {
    border-top: 1px solid var(--line);
    padding: 0.95rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: flex-start;
}

.lesson-curriculum-foot p { margin: 0; font-size: 0.75rem; color: var(--text-dim); }

/* Shown instead of the trailer when a course has no preview video set. */
.course-firstup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.3rem 1.4rem;
    margin-bottom: 1.6rem;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--bg-raise);
}

.course-firstup-note {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* publisher: files on a lesson row */
.item-files { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

.item-file-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; }

.item-file-remove {
    background: none;
    border: 0;
    color: var(--danger);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 0.1rem;
}

.item-files-add > summary { cursor: pointer; font-size: 0.75rem; color: var(--blue-bright); }
.item-files-add form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.5rem; }
.item-files-add input[type="text"] { min-width: 16rem; }
.item-files-add .hint { font-size: 0.7rem; margin-top: 0.3rem; }

/* --- error pages ------------------------------------------------------------ */

.errorpage { padding-top: 8.5rem; }

.errorpage-code {
    font-size: clamp(4rem, 14vw, 7rem);
    line-height: 1;
    color: var(--outline);
    margin: 0 0 0.4rem;
    letter-spacing: -0.02em;
}

.errorpage-detail {
    margin: 1.4rem 0 0;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: 10px;
    background: var(--bg-raise);
}

.errorpage-detail p { margin: 0; font-size: 0.92rem; line-height: 1.6; }

.errorpage-actions {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.errorpage-links {
    margin-top: 2.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
}

.errorpage-links p { margin: 0 0 0.7rem; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.errorpage-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.errorpage-links a { color: var(--blue-bright); text-decoration: none; font-size: 0.92rem; }
.errorpage-links a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .errorpage { padding-top: 7rem; }
    .errorpage-actions .btn { width: 100%; }
}

/* --- legal pages ------------------------------------------------------------ */

.legal-summary {
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: 10px;
    background: var(--bg-raise);
    padding: 1.1rem 1.3rem;
    margin: 1.8rem 0 2.4rem;
}

.legal-summary p { margin: 0; font-size: 0.94rem; line-height: 1.65; }

.legal .prose h2 {
    margin-top: 2.4rem;
    font-size: 1.28rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.legal .prose h3 { margin-top: 1.5rem; font-size: 1.02rem; color: var(--text-strong); }
.legal .prose ul { margin: 0.7rem 0 1rem; padding-left: 1.2rem; }
.legal .prose li { margin-bottom: 0.45rem; }

.legal-foot {
    margin-top: 2.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    font-size: 0.84rem;
    color: var(--text-dim);
}

/* --- google sign-in --------------------------------------------------------- */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.3rem 0 1rem;
    color: var(--text-dim);   /* --text-faint measures 4.18:1 on the light page, under AA */
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
}

/* --- payment method choice -------------------------------------------------- */

.pay-choice { display: grid; gap: 0.55rem; }

.pay-choice-label {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.pay-option {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 140ms ease;
}

/* These two rules exist to win a specificity fight, not to restyle anything.
   .pay-option is a <label> inside .field, so `.field label { display: block }`
   (0,1,1) out-specifies `.pay-option` (0,1,0) and stacked the radio above the
   price instead of beside it. `.field input { width: 100% }` then stretched the
   radio to the full width of the card, and a native radio in a box that wide
   draws its control centred — which is why the dot floated above the text.
   Scoping to .pay-choice makes these (0,2,0) and (0,2,1). */
.pay-choice .pay-option { display: flex; }

.pay-choice .pay-option input {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}

.pay-option:hover { border-color: var(--blue-bright); }
.pay-option:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.pay-option input { margin-top: 0.25rem; flex: 0 0 auto; accent-color: var(--blue); }

.pay-option-body { display: block; min-width: 0; }
.pay-option-title { display: block; font-weight: 600; font-size: 1rem; }
.pay-option-note { display: block; margin-top: 0.15rem; font-size: 0.82rem; color: var(--text-dim); }

/* One currency open to this visitor: shown as a stated price, not a choice. */
.pay-single {
    display: block;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card);
}


/* --- terms consent ---------------------------------------------------------- */

.terms-consent { margin-top: 0.4rem; }

.terms-consent .checkline {
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.terms-consent .checkline input { margin-top: 0.15rem; flex: 0 0 auto; }
.terms-consent a { color: var(--blue-bright); }

.auth-consent {
    margin: 0.8rem 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-dim);
}

.auth-consent a { color: var(--blue-bright); }

/* --- dashboard menu drawer (mobile) ----------------------------------------- */

/* Desktop keeps the rail; the toggle is mobile-only. */
.dash-menu-toggle,
.dash-scrim { display: none; }

@media (max-width: 900px) {
    .dash-with-menu .dash-menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        align-self: flex-start;
        margin-bottom: 1.2rem;

        /* Sticks under the fixed 72px nav once scrolled past, so the menu is
           always one tap away — otherwise it scrolls off and there is no way
           back to the dashboard sections without returning to the top.
           Below the scrim (89) on purpose: while the drawer is open, tapping
           where the button was hits the scrim and closes it. */
        position: sticky;
        top: 5.1rem;
        z-index: 88;
        padding: 0.6rem 0.9rem;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--bg-card);
        color: var(--text);
        font: inherit;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* Three bars, drawn rather than shipped as an icon font. */
    .dash-menu-bars,
    .dash-menu-bars::before,
    .dash-menu-bars::after {
        display: block;
        width: 16px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
    }

    .dash-menu-bars { position: relative; }
    .dash-menu-bars::before,
    .dash-menu-bars::after { content: ""; position: absolute; left: 0; }
    .dash-menu-bars::before { top: -5px; }
    .dash-menu-bars::after { top: 5px; }

    /* The rail becomes a drawer from the LEFT, mirroring the site menu on the
       right. Two hamburgers, two sides, no ambiguity about which is which. */
    .dash-with-menu .dash-side {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(78vw, 300px);
        margin: 0;
        padding: 5.5rem 1.4rem 2rem;
        background: var(--bg-raise);
        border-right: 1px solid var(--line);
        border-bottom: 0;
        box-shadow: 24px 0 60px -30px rgba(0, 0, 0, 0.9);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        overflow-y: auto;
        /* Below the site nav (z-index 100) so its bar and right-hand drawer stay
           reachable while this one is open. */
        z-index: 90;
    }

    .dash-with-menu .dash-side.is-open { transform: translateX(0); }

    /* Undo the horizontal scroller — in a drawer the sections stack. */
    .dash-with-menu .dash-nav {
        flex-direction: column;
        gap: 0.25rem;
        overflow: visible;
    }

    .dash-with-menu .dash-id { border-bottom: 1px solid var(--line); padding-bottom: 1.2rem; }
    .dash-with-menu .dash-side-foot { display: flex; }

    /* :not([hidden]) matters. `hidden` is only `display: none` from the UA
       stylesheet, so an unqualified `display: block` here out-ranks it and the
       scrim sits over the whole page permanently, eating every tap — including
       the one on the hamburger that would have dismissed it. */
    .dash-with-menu .dash-scrim:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(6, 6, 9, 0.55);
        z-index: 89;
    }

    body.dash-menu-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-with-menu .dash-side { transition: none; }
}

/* --- newsletter ------------------------------------------------------------- */

.newsletter {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-raise);
    padding: 1.6rem 1.7rem;
    margin: 2.6rem 0 0;
}

/* .footer-inner is a 4-column grid (2 on mobile). The newsletter has a single
   child, so inheriting that grid squeezed it into one column — half the screen
   on a phone. It only wants the max-width and centring, not the columns. */
.footer-inner-newsletter { display: block; padding-bottom: 0; }
.footer-inner-newsletter .newsletter { margin-top: 0; margin-bottom: 2.4rem; }

.newsletter-title { margin: 0 0 0.4rem; font-size: 1.25rem; }
.newsletter-note { margin: 0; color: var(--text-dim); font-size: 0.92rem; max-width: 46rem; }

.newsletter-form {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.newsletter-form input[type="email"] {
    flex: 1 1 18rem;
    min-width: 0;
    padding: 0.75rem 0.9rem;
}

.newsletter-ok {
    margin: 0.9rem 0 0;
    font-size: 0.82rem;
    color: var(--ok);
}

/* Off-screen rather than display:none — some bots skip hidden fields. */
.newsletter-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 560px) {
    .newsletter { padding: 1.3rem 1.2rem; }
    .newsletter-form .btn { width: 100%; }
}

/* --- single video page ------------------------------------------------------ */

.video-tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 1.3rem; }
.video-description { margin-bottom: 1.6rem; }

.video-gate-note {
    margin: 0 0 0.9rem;
    font-size: 0.87rem;
    color: var(--text-dim);
}

.video-gate-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }

.lesson-file.is-gated { opacity: 0.82; }
.lesson-file.is-gated:hover { opacity: 1; }

.card-files {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--blue-bright);
}

/* --- video tag tower -------------------------------------------------------- */

.tag-search {
    display: flex;
    gap: 0.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--line);
}

.tag-search input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
    padding: 0.5rem 0.7rem;
}

.tag-tower {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-content: flex-start;
    /* Sits in the sticky rail, so it scrolls on its own rather than pushing
       the sign-post links at the bottom off screen. */
    max-height: calc(100vh - 26rem);
    min-height: 6rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tag-tower-head {
    flex: 0 0 100%;
    margin: 0 0 0.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.tag-tower-empty { flex: 0 0 100%; margin: 0; font-size: 0.82rem; color: var(--text-dim); }

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.62rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-card);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.2;
    text-decoration: none;
    color: var(--text-muted);
    transition: border-color 130ms ease, color 130ms ease, background-color 130ms ease;
}

.tag-chip:hover,
.tag-chip:focus-visible { border-color: var(--blue-bright); color: var(--text-strong); }

.tag-chip.is-active {
    background: rgba(29, 99, 255, 0.16);
    border-color: var(--blue-bright);
    color: var(--text-strong);
}

.tag-chip-count { color: var(--text-faint); font-size: 0.68rem; }
.tag-chip.is-active .tag-chip-count { color: var(--blue-bright); }

.video-filter-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-raise);
}

.video-filter-state p { margin: 0; font-size: 0.82rem; color: var(--text-dim); }

/* Matches the dashboard rail's own breakpoint: the rail goes full width, so the
   tower has room to simply wrap. */
@media (max-width: 900px) {
    .tag-tower { max-height: none; min-height: 0; overflow: visible; }
    .tag-search { padding-bottom: 0; border-bottom: 0; }
}

/* --- lesson attachments ----------------------------------------------------- */

.lesson-files {
    margin-top: 1.6rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-raise);
    padding: 1.2rem 1.35rem;
}

.lesson-files-title {
    margin: 0 0 0.8rem;
    font-size: 1rem;
}

.lesson-files-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.lesson-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 140ms ease;
}

.lesson-file:hover,
.lesson-file:focus-visible { border-color: var(--blue-bright); }

.lesson-file-name { font-size: 0.92rem; word-break: break-word; }
.lesson-file-meta { flex: 0 0 auto; font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.04em; }

@media (max-width: 480px) {
    .lesson-file { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}

/* --- below the player: about + next steps ---------------------------------- */

.lesson-more {
    grid-column: 1;
    grid-row: 2;
    margin-top: 3rem;
    display: grid;
    gap: 1.2rem;
}

.lesson-more-panel {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-raise);
    padding: 1.4rem 1.5rem;
}

.lesson-more-title {
    margin: 0 0 0.7rem;
    font-size: 1.15rem;
}

.lesson-more-lede { margin: 0; color: var(--text-muted); }
.lesson-more-prose { margin-top: 0.9rem; }

.lesson-cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.8rem;
}

.lesson-cta {
    display: block;
    padding: 0.95rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 140ms ease, transform 140ms ease;
}

.lesson-cta:hover,
.lesson-cta:focus-visible {
    border-color: var(--blue-bright);
    transform: translateY(-1px);
}

.lesson-cta-label { display: block; font-weight: 600; font-size: 0.95rem; }
.lesson-cta-note { display: block; margin-top: 0.25rem; font-size: 0.82rem; color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
    .lesson-cta { transition: none; }
    .lesson-cta:hover { transform: none; }
}

/* Below this width the sidebar drops under the player and collapses. */
@media (max-width: 960px) {
    .lesson-shell { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }

    /* Single column: the DOM order (player, lesson list, then the prose) is
       exactly the reading order we want, so drop the explicit placement. */
    .lesson-main,
    .lesson-aside,
    .lesson-more { grid-column: auto; grid-row: auto; }

    .lesson-aside { position: static; }

    .lesson-curriculum-summary { display: flex; }

    .lesson-curriculum-list { max-height: 55vh; }

    .lesson-more { margin-top: 2rem; }
}

/* --- unverified-email banner ------------------------------------------------ */

.verify-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin: 0 0 1.8rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(224, 69, 92, 0.45);
    border-left: 3px solid var(--danger);
    border-radius: 10px;
    background: rgba(224, 69, 92, 0.09);
}

.verify-banner-title { margin: 0; font-weight: 600; font-size: 0.98rem; }
.verify-banner-note { margin: 0.25rem 0 0; font-size: 0.87rem; color: var(--text-dim); max-width: 42rem; }

@media (max-width: 560px) {
    .verify-banner { flex-direction: column; align-items: stretch; }
    .verify-banner .btn { width: 100%; }
}

/* --- one-time code input --------------------------------------------------- */

.otp-input {
    font-size: 1.65rem;
    letter-spacing: 0.42em;
    text-indent: 0.42em;   /* offsets the trailing gap letter-spacing leaves */
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.otp-input::placeholder { color: var(--text-dim); opacity: 0.35; }

@media (max-width: 480px) {
    .otp-input { font-size: 1.35rem; letter-spacing: 0.3em; text-indent: 0.3em; }
}

/* --- course trailer (click-to-play YouTube facade) ------------------------- */

.course-trailer {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0 0 2.2rem;
    border: 2px solid var(--ink, var(--line));
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

.course-trailer iframe,
.course-trailer-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.course-trailer-play {
    display: block;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: #000;
}

/* hqdefault is 4:3 with letterbox bars — crop to the 16:9 frame. */
.course-trailer-play img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.82;
    transition: opacity 160ms ease, transform 300ms ease;
}

.course-trailer-play:hover img,
.course-trailer-play:focus-visible img { opacity: 1; transform: scale(1.02); }

.course-trailer-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: transform 160ms ease;
}

.course-trailer-play:hover .course-trailer-icon { transform: translate(-50%, -50%) scale(1.08); }

.course-trailer-label {
    position: absolute;
    left: 0.9rem;
    bottom: 0.8rem;
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.course-trailer-play:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .course-trailer-play img,
    .course-trailer-icon { transition: none; }
    .course-trailer-play:hover img { transform: none; }
}

@media (max-width: 640px) {
    .course-trailer { margin-bottom: 1.6rem; }
    .course-trailer-icon svg { width: 54px; height: 38px; }
    .course-trailer-label { font-size: 0.7rem; left: 0.7rem; bottom: 0.6rem; }
}

/* --- buy panel ------------------------------------------------------------ */

.course-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(29,99,255,0.16), rgba(29,99,255,0.04));
    border: 1px solid rgba(29,99,255,0.45);
    border-radius: 16px;
    padding: 1.5rem 1.6rem;
    margin-bottom: 2rem;
}

.course-buy-owned {
    background: rgba(47,191,113,0.08);
    border-color: rgba(47,191,113,0.45);
}

.course-buy-state { color: var(--ok); }
.course-buy-price p { color: var(--text-dim); font-size: 0.92rem; max-width: 26rem; margin-top: 0.3rem; }
.course-buy-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* --- locked lessons -------------------------------------------------------- */

.lesson-locked { opacity: 0.62; }
.lesson-title-locked { color: var(--text-dim); cursor: default; }
.lesson-kind-locked { color: var(--text-faint); }
.lesson-free { color: var(--ok); }

/* --- account area ---------------------------------------------------------- */

.account-block { margin-top: 2.6rem; }
.account-block .row-head { padding: 0; }

.account-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 0.7rem;
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.account-card:hover { transform: translateY(-2px); border-color: var(--blue); }

.account-card-title { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }
.account-card-meta { color: var(--text-dim); }

.account-empty { color: var(--text-dim); font-size: 0.95rem; }
.account-empty a { color: var(--blue-bright); }

.account-signout { margin-top: 3rem; }

@media (max-width: 640px) {
    .course-buy { flex-direction: column; align-items: stretch; }
    .course-buy .btn, .course-buy form { width: 100%; }
    .course-buy .btn { width: 100%; }
}

/* ==========================================================================
   Split screen — action on the left, use-case imagery on the right
   ========================================================================== */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    min-height: 100vh;
}

.split-action {
    padding: 7rem clamp(1.2rem, 3.5vw, 3.4rem) 4rem;
    max-width: 46rem;
    width: 100%;
    justify-self: end;
}

/* The image holds its own half while the form scrolls beside it. */
.split-media {
    position: sticky;
    top: 0;
    height: 100vh;
    background-size: cover;
    background-position: center;
    border-left: 1px solid var(--line);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.split-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,6,9,0.92) 0%, rgba(6,6,9,0.35) 45%, rgba(6,6,9,0.15) 100%);
}

.split-media-copy {
    position: relative;
    padding: 2.6rem clamp(1.4rem, 2.6vw, 2.8rem);
    max-width: 30rem;
}

.split-media-kicker { color: var(--blue-bright); letter-spacing: 0.2em; margin-bottom: 0.7rem; }

.split-media-copy h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.1vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 0.6rem;
}

.split-media-copy p { color: rgba(255,255,255,0.76); font-size: 0.96rem; line-height: 1.6; }

/* --- step indicator -------------------------------------------------------- */

.steps { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.6rem; flex-wrap: wrap; }

.step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--line);
    font-size: 0.66rem;
}

.step-on { color: var(--text); }
.step-on .step-num { background: var(--blue); border-color: var(--blue); color: #fff; }
.step-done .step-num { border-color: var(--ok); color: var(--ok); }
.step-sep { color: var(--text-dim); }   /* --text-faint lands at 4.18:1, under AA */

/* --- chosen-slot summary on step 2 ----------------------------------------- */

.chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.8rem;
}

.chosen-label { color: var(--text-dim); display: block; margin-bottom: 0.15rem; }
.chosen-value { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }
.chosen a { color: var(--blue-bright); font-size: 0.88rem; }

.split-foot { color: var(--text-dim); font-size: 0.86rem; margin-top: 1.2rem; }

/* --- tablet and phone: the image becomes a backdrop ------------------------- */
/* Not a banner stacked above the form — the image is pinned to the viewport and
   the whole action layer rides over it behind a mid-opacity wash. */

@media (max-width: 900px) {
    .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }

    .split-media {
        position: fixed;
        inset: 0;
        height: 100vh;
        width: 100%;
        margin: 0;
        border: 0;
        background-position: center;
        /* Above the page background, below everything that carries z-index 1. */
        z-index: 0;
    }

    /* Mid-opacity wash so the photograph still reads as a backdrop, with a little
       extra weight top and bottom where the heading and helper text sit directly
       on it rather than on a card. */
    .split-media::before {
        background:
            linear-gradient(to bottom,
                rgba(6, 6, 9, 0.74) 0%,
                rgba(6, 6, 9, 0.58) 38%,
                rgba(6, 6, 9, 0.58) 62%,
                rgba(6, 6, 9, 0.76) 100%);
    }

    /* The overlay headline would sit under the form and be unreadable. The same
       words already lead the action column as the h1. */
    .split-media-copy { display: none; }

    .split-action {
        position: relative;
        z-index: 1;
        padding: 6rem var(--pad-x) 3.5rem;
        justify-self: stretch;
        max-width: none;
    }

    /* The backdrop is fixed but lives inside <main>, which carries z-index 2 and
       therefore paints the whole subtree — backdrop included — above anything
       below it. The footer has to clear that layer, not just the backdrop's own
       z-index, or the image covers the footer entirely. */
    .footer {
        position: relative;
        z-index: 3;
        /* Opaque, or the backdrop keeps running behind the footer at full
           strength and the page never visually ends. */
        background: var(--bg);
    }

    .flash { position: relative; z-index: 1; }

    /* Cards need their own ground or the backdrop reads through them. */
    .split-action .cal,
    .split-action .chosen,
    .split-action .slots-empty { background: rgba(20, 20, 25, 0.92); }

    .split-action .slot-chip-face,
    .split-action .cal-cell-open { background: rgba(27, 27, 34, 0.94); }

    /* At this width the entire action column rides over the fixed photograph,
       which does not follow the theme. In light mode the text tokens flipped to
       ink-navy while the ground behind them stayed dark: the calendar landed at
       about 1.04:1, and the heading, lede and step labels — which sit directly
       on the photo with no card under them at all — went the same way.
       The palette therefore belongs on the column, not on the cards inside it.
       Scoped to the cards, everything between them stayed unreadable.
       .split-media is a sibling, so its dark tokens never reach here. */
    [data-theme="light"] .split-action {
        --text: #f2f3f7;
        --text-strong: #ffffff;
        --text-dim: #b3b6c4;
        --text-faint: #8b8e9c;
        --text-muted: rgba(242, 243, 247, 0.9);
        --blue-bright: #7ea6ff;
        --ok: #56d69a;
        --danger: #ff8fa0;
        --line: rgba(255, 255, 255, 0.22);
        --bg: #0b0b0e;
        --bg-card: rgba(27, 27, 34, 0.94);
        --bg-raise: rgba(20, 20, 25, 0.92);
        --ghost-bg: rgba(255, 255, 255, 0.16);
        --ghost-bg-hover: rgba(255, 255, 255, 0.26);

        /* Redefining the tokens is not enough on its own: `color` inherits as a
           computed value, so a child that declares no colour of its own (the
           calendar title, the month arrows) keeps the ink-navy it inherited from
           above this card. Re-declaring colour here makes the card the nearest
           ancestor that resolves it. */
        color: var(--text);
    }

    /* Over the backdrop the auth form should sit near the top, not be pushed
       down by a 100vh centring rule meant for the desktop column. */
    .auth-action { min-height: 0; display: block; }
}

/* ==========================================================================
   Theme toggle
   ========================================================================== */

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

.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-dim);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.theme-toggle:hover { border-color: var(--blue); color: var(--text); }

[data-theme="light"] .nav {
    border-bottom: 1px solid var(--line);
}

/* The blur cannot live on .nav while the drawer exists.
   backdrop-filter makes an element the containing block for its position:fixed
   descendants, and the mobile drawer is a fixed descendant of .nav — so this
   collapsed the drawer to the height of the nav bar and left it scrolling
   inside that strip. Dark mode never sets a filter here, which is the whole
   reason the bug only ever appeared in light mode.
   Above the drawer breakpoint .nav-links is an ordinary flex row and nothing
   inside .nav is fixed, so the glass is free there. */
@media (min-width: 861px) {
    [data-theme="light"] .nav {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

/* Over a dark media panel the toggle needs its own ground to stay visible. */
[data-theme="light"] .theme-toggle { background: var(--bg-card); }

/* ==========================================================================
   Media-backed sections stay dark in both themes
   --------------------------------------------------------------------------
   These sections sit on photography or video. Their background does not change
   with the theme, so their text must not either — in light mode the tokens would
   otherwise put ink-navy copy onto a dark photograph. Re-declaring the dark
   palette here means every descendant inherits it without touching a single
   component rule.
   ========================================================================== */

[data-theme="light"] .hero,
[data-theme="light"] .cinehero,
[data-theme="light"] .split-media,
[data-theme="light"] .login-split,
/* .card covers photo cards, whose image is the background. .card-text has no
   image at all — it is a paper card and must follow the theme. */
[data-theme="light"] .card:not(.card-text),
[data-theme="light"] .chapter-media {
    /* --bg matters as much as the text colours: these sections fade their bottom
       edge into var(--bg) to blend with the page. Left light, that gradient became
       a pale fog creeping up over the photograph. Pinned dark, the fade is
       invisible and the hero ends on a clean edge against the carton below. */
    --bg: #0b0b0e;
    --text: #f2f3f7;
    --text-strong: #ffffff;
    --text-dim: #b3b6c4;
    --text-faint: #8b8e9c;
    --blue-bright: #7ea6ff;
    --line: rgba(255, 255, 255, 0.22);
    --bg-card: rgba(20, 20, 25, 0.9);
    --bg-raise: rgba(20, 20, 25, 0.9);
    --ghost-bg: rgba(255, 255, 255, 0.16);
    --ghost-bg-hover: rgba(255, 255, 255, 0.26);
}
.theme-toggle:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

.theme-toggle-icon {
    position: absolute;
    font-size: 1rem;
    line-height: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Dark theme shows the sun (what you would switch TO); light shows the moon. */
.theme-toggle-sun { opacity: 1; transform: scale(1); }
.theme-toggle-moon { opacity: 0; transform: scale(0.6); }

[data-theme="light"] .theme-toggle-sun { opacity: 0; transform: scale(0.6); }
[data-theme="light"] .theme-toggle-moon { opacity: 1; transform: scale(1); }

/* The nav already uses margin-left:auto on .nav-cta in the tablet band; with the
   toggle present only the first auto margin should push, so reset the CTA's. */
@media (min-width: 700px) and (max-width: 1000px) {
    .nav-cta { margin-left: 0; }
}

@media (max-width: 699px) {
    /* Keep the bar to brand · theme · hamburger on a phone. */
    .theme-toggle { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle-icon { transition: none; }
}

/* ==========================================================================
   Client dashboard — left rail of sections, content pane on the right.
   Shares the site chrome (fixed nav, footer), so the top padding matches .page.
   ========================================================================== */

.dash {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: clamp(1.6rem, 3.5vw, 3.2rem);
    max-width: 1200px;
    margin-inline: auto;
    padding: 7.5rem var(--pad-x) 4.5rem;
}

/* --- left rail --- */

.dash-side {
    position: sticky;
    top: 6.4rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-width: 0;
}

.dash-main { min-width: 0; }

.dash-id {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--line);
}

.dash-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
}

.dash-avatar-initials {
    display: grid;
    place-items: center;
    background: var(--bg-card);
    color: var(--text-strong);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.dash-id-text { display: grid; gap: 0.1rem; min-width: 0; }

.dash-id-name {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-strong);
    font-size: 0.94rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-id-mail {
    color: var(--text-dim);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-nav { display: flex; flex-direction: column; gap: 0.15rem; }

.dash-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: 9px;
    color: var(--text-dim);
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease;
}

.dash-nav-link:hover { background: var(--bg-card); color: var(--text); }

.dash-nav-link.active {
    background: var(--blue);
    color: #fff;
    font-weight: 600;
}

.dash-nav-icon { font-size: 0.85rem; opacity: 0.85; width: 1rem; text-align: center; }
.dash-nav-label { flex: 1; }

.dash-nav-badge {
    font-size: 0.7rem;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: var(--bg-raise);
    color: var(--text-dim);
    border: 1px solid var(--line);
}

.dash-nav-link.active .dash-nav-badge {
    background: rgba(255, 255, 255, 0.22);
    border-color: transparent;
    color: #fff;
}

.dash-side-foot {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.dash-side-out { color: var(--text-dim); font-size: 0.84rem; text-decoration: none; }
.dash-side-out:hover { color: var(--blue-bright); }
.dash-side-foot form { margin-top: 0.35rem; }

/* --- content pane --- */

.dash-head { margin-bottom: 2rem; }
.dash-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin-bottom: 0.5rem; }
.dash-lede { color: var(--text-dim); max-width: 46rem; }

.dash-block { margin-top: 2.4rem; }
.dash-block:first-child { margin-top: 0; }

.dash-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dash-block-head h2 { font-size: 1.12rem; margin: 0; }
.dash-block-head a { color: var(--blue-bright); font-size: 0.86rem; text-decoration: none; }
.dash-block-head a:hover { text-decoration: underline; }

/* --- stat tiles --- */

.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem;
}

.dash-stat {
    display: grid;
    gap: 0.25rem;
    padding: 1.15rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.dash-stat:hover { transform: translateY(-2px); border-color: var(--blue); }
.dash-stat.is-live { border-color: rgba(29, 99, 255, 0.55); }

.dash-stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--text-strong);
}

.dash-stat-lbl { color: var(--text-dim); font-size: 0.82rem; }

/* --- next session callout --- */

.dash-next {
    display: grid;
    gap: 0.5rem;
    padding: 1.2rem 1.35rem;
    border: 1px solid rgba(29, 99, 255, 0.45);
    border-radius: 12px;
    background: linear-gradient(145deg, var(--bg-card), var(--bg-raise));
    text-decoration: none;
    transition: border-color 0.16s ease;
}

.dash-next:hover { border-color: var(--blue); }

.dash-next-when {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-strong);
}

.dash-next-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* --- course rows --- */

.dash-course {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.15rem 1.35rem;
    margin-bottom: 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.dash-course:hover { transform: translateY(-2px); border-color: var(--blue); }
.dash-course-body { display: grid; gap: 0.3rem; min-width: 0; }

.dash-course-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-strong);
    font-size: 1.02rem;
}

.dash-course-sum { color: var(--text-muted); font-size: 0.88rem; }
.dash-course-meta { color: var(--text-dim); font-size: 0.76rem; }
.dash-course-go { flex: 0 0 auto; color: var(--blue-bright); font-size: 0.8rem; }

/* --- empty state --- */

.dash-empty {
    padding: 2.6rem 1.6rem;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--text-dim);
}

.dash-empty-head {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-strong);
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.dash-empty .btn { margin-top: 1.2rem; }

/* --- profile facts --- */

.dash-facts {
    display: grid;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.dash-fact {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 1.35rem;
    border-bottom: 1px solid var(--line);
}

.dash-fact:last-child { border-bottom: 0; }
.dash-fact dt { color: var(--text-dim); font-size: 0.86rem; }
.dash-fact dd { color: var(--text); margin: 0; }

.account-card.is-past { opacity: 0.68; }
.account-card.is-past:hover { opacity: 1; }

/* --- the rail becomes a scrollable tab strip on narrow screens --- */

@media (max-width: 900px) {
    .dash {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
        padding-top: 6.4rem;
    }

    .dash-side {
        position: static;
        gap: 1rem;
        padding-bottom: 1.1rem;
        border-bottom: 1px solid var(--line);
    }

    .dash-id { border-bottom: 0; padding-bottom: 0; }

    .dash-nav {
        flex-direction: row;
        gap: 0.4rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .dash-nav::-webkit-scrollbar { display: none; }
    .dash-nav-link { flex: 0 0 auto; border: 1px solid var(--line); }
    .dash-nav-link.active { border-color: var(--blue); }
    .dash-nav-icon { display: none; }

    .dash-side-foot {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        padding-top: 0;
        border-top: 0;
    }

    .dash-side-foot form { margin-top: 0; margin-left: auto; }
    .dash-side-foot .dash-side-out { font-size: 0.8rem; }
    .dash-fact { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --- enrolment: course tags on the index, and the account row's side actions --- */

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.course-tag {
    flex: 0 0 auto;
    font-size: 0.68rem;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-raise);
    color: var(--text-dim);
    white-space: nowrap;
}

.course-tag-free { color: var(--blue-bright); border-color: rgba(29, 99, 255, 0.45); }
[data-theme="light"] .course-tag-free { color: #1546b8; }

.course-tag-owned { color: #7fe3ae; border-color: rgba(47, 191, 113, 0.5); }
[data-theme="light"] .course-tag-owned { color: #12653a; }

/* the account row is a div now, so the link and the remove form can sit side by side */
.dash-course-link {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    text-decoration: none;
}

.dash-course-side {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.dash-course-go { text-decoration: none; }

.dash-course-drop {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-dim);
    cursor: pointer;
}

.dash-course-drop:hover { color: var(--danger); text-decoration: underline; }

/* ==========================================================================
   Support threads — the client pane and the publisher inbox share this.
   ========================================================================== */

.pill-support-open { color: #ffc46b; border-color: rgba(255, 176, 59, 0.5); }
.pill-support-answered { color: #8ab4ff; border-color: rgba(29, 99, 255, 0.6); }
.pill-support-resolved { color: #7fe3ae; border-color: rgba(47, 191, 113, 0.55); }

[data-theme="light"] .pill-support-open { color: #8a5300; }
[data-theme="light"] .pill-support-answered { color: #1546b8; }
[data-theme="light"] .pill-support-resolved { color: #12653a; }

/* --- thread list --- */

.thread-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.thread-row:hover { transform: translateY(-2px); border-color: var(--blue); }
.thread-row-body { display: grid; gap: 0.25rem; min-width: 0; }

.thread-row-subject {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-strong);
    font-size: 0.98rem;
}

.thread-row-meta { color: var(--text-dim); font-size: 0.75rem; }

.thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}

.thread-back { color: var(--text-dim); text-decoration: none; font-size: 0.82rem; }
.thread-back:hover { color: var(--blue-bright); }

.thread-head-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--text-dim);
    font-size: 0.78rem;
}

/* --- transcript --- */

.thread { list-style: none; display: grid; gap: 0.9rem; margin: 0 0 2.4rem; padding: 0; }

.msg {
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-card);
}

/* Daniel's replies are the ones you scan for, so they carry the brand edge. */
.msg-staff {
    border-left: 3px solid var(--blue);
    background: linear-gradient(145deg, var(--bg-card), var(--bg-raise));
}

.msg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.msg-author {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-strong);
    font-size: 0.92rem;
}

.msg-when { color: var(--text-dim); font-size: 0.74rem; }

.msg-body {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    white-space: pre-line;      /* the author's line breaks, never their markup */
    overflow-wrap: anywhere;
}

/* --- attachments --- */

.msg-files { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; }

.msg-file {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-raise);
    text-decoration: none;
    transition: border-color 0.16s ease;
}

.msg-file:hover { border-color: var(--blue); }
.msg-file-icon { color: var(--blue-bright); font-size: 0.8rem; }

.msg-file-name {
    color: var(--text);
    font-size: 0.84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-file-size { color: var(--text-dim); font-size: 0.72rem; flex: 0 0 auto; }

.field-optional { color: var(--text-dim); font-weight: 400; font-size: 0.74rem; }

/* The file input is the one control the base .field rules do not cover. */
.field input[type="file"] {
    padding: 0.6rem;
    font-size: 0.86rem;
    color: var(--text-dim);
}

.field input[type="file"]::file-selector-button {
    margin-right: 0.8rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--bg-raise);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.84rem;
    cursor: pointer;
}

.field input[type="file"]::file-selector-button:hover { border-color: var(--blue); }

.field input:disabled {
    color: var(--text-dim);
    cursor: not-allowed;
    opacity: 0.75;
}

/* ==========================================================================
   Asset community — a store grid, and the moderated posts that hang off it.
   ========================================================================== */

.store-filter { display: flex; gap: 0.6rem; margin-bottom: 1rem; }

.store-search {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.store-search:focus { outline: none; border-color: var(--blue); }

.store-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.8rem;
}

.store-cat {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-dim);
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.store-cat:hover { color: var(--text); border-color: var(--blue); }
.store-cat.active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

/* --- the grid --- */

.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 1rem;
}

.store-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.store-card:hover { transform: translateY(-3px); border-color: var(--blue); }
.store-card.is-featured { border-color: rgba(29, 99, 255, 0.5); }

.store-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, var(--bg-raise), var(--bg));
    border-bottom: 1px solid var(--line);
}

.store-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.store-cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.9rem;
    font-weight: 500;
    color: var(--text-faint);
    letter-spacing: 0.06em;
}

.store-flag {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 0.64rem;
    letter-spacing: 0.04em;
}

.store-body { display: grid; gap: 0.32rem; padding: 0.95rem 1.05rem 1.1rem; }

.store-cat-tag {
    color: var(--blue-bright);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[data-theme="light"] .store-cat-tag { color: #1546b8; }

.store-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-strong);
    font-size: 1rem;
    line-height: 1.25;
}

.store-sum {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.store-meta { color: var(--text-dim); font-size: 0.7rem; margin-top: 0.15rem; }
.store-taken { color: #7fe3ae; }
[data-theme="light"] .store-taken { color: #12653a; }

/* --- an asset's file list --- */

.asset-file {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.2rem;
    margin-bottom: 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.asset-file:hover { transform: translateY(-2px); border-color: var(--blue); }

.asset-file-ext {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 9px;
    background: var(--bg-raise);
    border: 1px solid var(--line);
    color: var(--blue-bright);
    font-size: 0.62rem;
    letter-spacing: 0.03em;
}

[data-theme="light"] .asset-file-ext { color: #1546b8; }

.asset-file-body { flex: 1; display: grid; gap: 0.2rem; min-width: 0; }

.asset-file-name {
    color: var(--text-strong);
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-file-size { color: var(--text-dim); font-size: 0.74rem; }
.asset-file-go { flex: 0 0 auto; color: var(--blue-bright); font-size: 0.78rem; }

/* --- posts --- */

.channel-desc { color: var(--text-muted); font-size: 0.86rem; }

.post {
    padding: 1rem 1.2rem;
    margin-bottom: 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.post-staff { border-left: 3px solid var(--blue); }
.post-pending { border-style: dashed; opacity: 0.85; }

.post-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.post-author { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); font-size: 0.9rem; }
.post-when { color: var(--text-dim); font-size: 0.73rem; }

.post-body {
    color: var(--text-muted);
    font-size: 0.93rem;
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.post-form { margin-top: 1.4rem; }
.post-banned { border-left: 3px solid var(--danger); padding-left: 0.9rem; }

/* --- moderation queue --- */

.mod-post { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.mod-post:last-child { border-bottom: 0; }

.mod-post-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.mod-post-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

.mod-post-actions form { margin: 0; }

/* The ban control: reason above the button, never colliding on one line. */
.ban-form { display: grid; gap: 0.45rem; justify-items: start; }

.ban-reason {
    width: 100%;
    max-width: 220px;
    padding: 0.42rem 0.6rem;
    background: var(--bg-raise);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.82rem;
}

.ban-reason:focus { outline: none; border-color: var(--blue); }

/* ==========================================================================
   Signed-in nav CTA: a light travelling around the "My account" button.
   The point is to make the members' entrance the thing your eye lands on,
   including on a screen recording.
   ========================================================================== */

@property --nav-ring-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.nav-cta-account { position: relative; }

/*
 * The ring is a conic gradient clipped to a 2px band by an xor mask, so the
 * button face underneath stays flat blue — a plain z-index:-1 pseudo would
 * paint its arc across the label instead of around it.
 */
.nav-cta-account::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 11px;         /* .btn is 8px, plus the 3px it sits outside */
    padding: 2px;                /* ring thickness — the masked-in band */
    background: conic-gradient(
        from var(--nav-ring-angle),
        transparent 0deg,
        transparent 186deg,
        rgba(77, 132, 255, 0.55) 250deg,
        var(--blue-bright) 306deg,
        #ffffff 334deg,
        var(--blue-bright) 350deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: nav-ring-travel 2.9s linear infinite;
    pointer-events: none;        /* decorative: never eat a click on the button */
}

@keyframes nav-ring-travel {
    to { --nav-ring-angle: 360deg; }
}

/* Hovering already gives feedback, so the loop stands down and the ring holds. */
.nav-cta-account:hover::before {
    animation-play-state: paused;
    background: var(--blue-bright);
}

[data-theme="light"] .nav-cta-account::before {
    background: conic-gradient(
        from var(--nav-ring-angle),
        transparent 0deg,
        transparent 186deg,
        rgba(21, 70, 184, 0.45) 250deg,
        #1546b8 306deg,
        #ffffff 334deg,
        #1546b8 350deg,
        transparent 360deg
    );
}

[data-theme="light"] .nav-cta-account:hover::before { background: #1546b8; }

/* A loop in the chrome is exactly what reduced motion is asking us not to do.
   The ring stays — it still marks the button — it just stops moving. */
@media (prefers-reduced-motion: reduce) {
    .nav-cta-account::before {
        animation: none;
        background: var(--blue-bright);
    }

    [data-theme="light"] .nav-cta-account::before { background: #1546b8; }
}

/* ---------- currency switcher on a paid course ---------- */

.currency-switch { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }

.currency-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.currency-chip:hover { border-color: var(--blue); color: var(--text); }
.currency-chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- lesson player ---------- */

.lesson-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.6rem;
}

.lesson-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lesson-note-body { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 1.6rem; }

.lesson-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
}

.lesson-nav-index { color: var(--text-dim); font-size: 0.9rem; text-decoration: none; }
.lesson-nav-index:hover { color: var(--blue-bright); }