/* ═══════════════════════════════════════════════════
   THE SEPARATION COMPANION · Learning platform
   Built on the TSC brand design system.
═══════════════════════════════════════════════════ */
@font-face{ font-family:'Garet'; src:url('assets/fonts/garet-book.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Garet'; src:url('assets/fonts/garet-heavy.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sweet Belly Script'; src:url('assets/fonts/sweetbelly-script-webfont.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --sage:#C0D2D1; --sage-dark:#9bbab8; --sage-light:#dceae9; --sage-pale:#d4e3e2; --sage-accent:#7a9e9c;
  --slate:#545454; --slate-mid:rgba(84,84,84,0.62); --slate-faint:rgba(84,84,84,0.35);
  --cream:#FFFEF9; --ink:#3f4a49; --rule:rgba(84,84,84,0.15); --shadow:rgba(60,90,88,0.18);
  --teal:#2b6c74; --teal-soft:#e5f0f0; --amber-ink:#8a6a34; --amber-bg:#f7efe0;
  --font-body:'Garet',sans-serif; --font-script:'Sweet Belly Script','Dancing Script',cursive;
  --max-w:1100px; --radius:6px; --transition:0.3s ease;
}
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:16px; }
body{ font-family:var(--font-body); color:var(--slate); background:var(--cream); line-height:1.7; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-body); font-weight:700; line-height:1.2; color:var(--slate); }
.script{ font-family:var(--font-script); font-weight:400; line-height:1; }
.container{ max-width:var(--max-w); margin:0 auto; padding:0 40px; }
.wide{ max-width:1240px; margin:0 auto; padding:0 40px; }
.section{ padding:56px 0; }
.section-sm{ padding:32px 0; }
.eyebrow{ font-size:0.68rem; font-weight:400; letter-spacing:0.22em; text-transform:uppercase; color:var(--slate-mid); display:block; margin-bottom:0.6rem; }
.rule{ width:48px; height:1.5px; background:var(--sage-accent); margin:16px 0 28px; }
.rule.centre{ margin-left:auto; margin-right:auto; }
.lead{ font-size:1.1rem; color:var(--slate-mid); line-height:1.8; max-width:640px; }
.text-centre{ text-align:center; }
.muted{ color:var(--slate-mid); }
.mt-sm{ margin-top:16px; } .mt-md{ margin-top:32px; } .mt-lg{ margin-top:56px; }
.bg-sage-pale{ background:var(--sage-pale); } .bg-sage-light{ background:var(--sage-light); } .bg-slate{ background:var(--slate); color:var(--cream); }
.hide{ display:none !important; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-size:0.75rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; padding:14px 32px; border-radius:40px; cursor:pointer; transition:all var(--transition); border:none; min-height:44px; white-space:nowrap; }
.btn-primary{ background:var(--slate); color:var(--cream); }
.btn-primary:hover{ background:#3a3a3a; transform:translateY(-1px); box-shadow:0 6px 20px var(--shadow); }
.btn-sage{ background:var(--sage); color:var(--slate); }
.btn-sage:hover{ background:var(--sage-dark); transform:translateY(-1px); box-shadow:0 6px 20px var(--shadow); }
.btn-outline{ background:transparent; color:var(--slate); border:1.5px solid var(--rule); }
.btn-outline:hover{ border-color:var(--slate); background:var(--slate); color:var(--cream); transform:translateY(-1px); }
.btn-sm{ padding:9px 18px; font-size:0.66rem; min-height:0; }
.btn-block{ width:100%; }
.btn:focus-visible{ outline:2px solid var(--slate); outline-offset:3px; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

/* Pills / badges */
.pill{ display:inline-block; font-size:0.7rem; letter-spacing:0.1em; padding:5px 14px; border-radius:20px; border:1px solid var(--rule); color:var(--slate-mid); }
.pill-sage{ background:var(--sage); color:var(--slate); border-color:transparent; }
.badge{ display:inline-block; background:var(--slate); color:var(--cream); font-size:0.58rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:3px 10px; border-radius:10px; }
.badge-sage{ background:var(--sage); color:var(--slate); }
.badge-free{ background:var(--sage-accent); color:var(--cream); }

/* Cards */
.card{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); padding:32px; transition:box-shadow var(--transition),transform var(--transition); }
.card.hoverable:hover{ box-shadow:0 8px 32px var(--shadow); transform:translateY(-2px); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* Notes */
.note{ border-radius:var(--radius); padding:12px 16px; font-size:0.88rem; margin:12px 0; }
.note.info{ border:1px solid var(--teal); background:var(--teal-soft); } .note.info b{ color:var(--teal); }
.note.warn{ border:1px solid var(--amber-ink); background:var(--amber-bg); } .note.warn b{ color:var(--amber-ink); }
.note.ok{ border-left:4px solid var(--sage-accent); background:var(--sage-light); }

/* ── NAV ── */
.nav{ position:sticky; top:0; z-index:100; background:rgba(255,254,249,0.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); }
.nav-inner{ max-width:1240px; margin:0 auto; padding:0 40px; height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav-logo{ display:flex; align-items:center; gap:10px; }
.nav-logo img{ width:48px; height:48px; object-fit:contain; }
.nav-logo .the{ font-size:0.55rem; font-weight:700; letter-spacing:0.26em; text-transform:uppercase; color:var(--slate); line-height:1.3; display:block; }
.nav-logo .co{ font-family:var(--font-script); font-size:1.5rem; color:var(--slate); line-height:1; display:block; }
.nav-logo .badge{ margin-left:4px; vertical-align:middle; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ font-size:0.72rem; font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate-mid); transition:color var(--transition); position:relative; }
.nav-links a:hover,.nav-links a.active{ color:var(--slate); }
.nav-avatar{ width:38px; height:38px; border-radius:50%; background:var(--sage); color:var(--ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; cursor:pointer; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:22px; height:1.5px; background:var(--slate); }
.nav-mobile{ display:none; flex-direction:column; background:var(--cream); border-top:1px solid var(--rule); padding:18px 40px 26px; gap:16px; }
.nav-mobile.open{ display:flex; }
.nav-mobile a{ font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-mid); }

/* ── FOOTER ── */
.footer{ background:var(--slate); color:rgba(255,254,249,0.75); padding:44px 0 26px; margin-top:auto; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px; margin-bottom:36px; }
.footer .co{ font-family:var(--font-script); font-size:2rem; color:var(--cream); line-height:1; }
.footer .the{ font-size:0.55rem; font-weight:700; letter-spacing:0.26em; text-transform:uppercase; color:rgba(255,254,249,0.5); }
.footer-tag{ font-size:0.8rem; color:rgba(255,254,249,0.6); max-width:260px; margin-top:12px; }
.footer h4{ font-size:0.64rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,254,249,0.45); margin-bottom:16px; }
.footer-links{ display:flex; flex-direction:column; gap:11px; }
.footer-links a{ font-size:0.82rem; color:rgba(255,254,249,0.65); }
.footer-links a:hover{ color:var(--cream); }
.footer-bottom{ border-top:1px solid rgba(255,254,249,0.1); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ font-size:0.7rem; color:rgba(255,254,249,0.35); max-width:520px; }

/* ── PAGE HERO ── */
.hero{ background:var(--sage-pale); padding:72px 0 60px; position:relative; overflow:hidden; }
.hero::before{ content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; border:1px solid var(--rule); }
.hero::after{ content:''; position:absolute; top:-150px; right:-150px; width:560px; height:560px; border-radius:50%; border:1px solid rgba(84,84,84,0.06); }
.hero .container,.hero .wide{ position:relative; z-index:2; }
.hero h1{ font-size:clamp(2rem,4vw,3rem); }
.hero .script-accent{ font-family:var(--font-script); font-size:clamp(3rem,6vw,4.4rem); color:var(--slate); display:block; line-height:1; margin-top:-4px; }

/* ── CATALOGUE / COURSE CARDS ── */
.course-card{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow var(--transition),transform var(--transition); }
.course-card:hover{ box-shadow:0 8px 32px var(--shadow); transform:translateY(-2px); }
.course-card .thumb{ height:132px; display:flex; align-items:flex-start; justify-content:space-between; padding:16px; }
.course-card .thumb .icon{ width:44px; height:44px; border-radius:50%; background:rgba(255,254,249,0.6); display:flex; align-items:center; justify-content:center; }
.course-card .thumb .icon svg{ width:22px; height:22px; }
.course-card .body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.course-card .kicker{ font-size:0.62rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--slate-faint); }
.course-card h3{ font-size:1.15rem; margin:6px 0 10px; }
.course-card p{ font-size:0.85rem; color:var(--slate-mid); line-height:1.6; margin-bottom:16px; flex:1; }
.course-card .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.course-card .price{ font-family:var(--font-script); font-size:1.9rem; color:var(--slate); line-height:1; }
.course-meta{ display:flex; gap:16px; font-size:0.72rem; color:var(--slate-mid); margin-bottom:14px; }
.course-meta span{ display:inline-flex; align-items:center; gap:5px; }

/* progress bar */
.bar{ height:8px; border-radius:20px; background:var(--sage-pale); overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--sage-accent); border-radius:20px; transition:width var(--transition); }
.bar.thin{ height:5px; }

/* ── AUTH ── */
.auth-wrap{ min-height:calc(100vh - 74px); display:grid; grid-template-columns:1fr 1fr; }
.auth-aside{ background:var(--sage-pale); padding:64px 56px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.auth-aside::after{ content:''; position:absolute; bottom:-120px; left:-80px; width:360px; height:360px; border-radius:50%; border:1px solid var(--rule); }
.auth-aside .q{ font-size:1.3rem; line-height:1.6; color:var(--slate); max-width:420px; position:relative; z-index:2; }
.auth-aside .q .script{ font-size:2.2rem; color:var(--slate); display:block; margin-top:10px; }
.auth-main{ display:flex; align-items:center; justify-content:center; padding:48px 40px; }
.auth-card{ width:100%; max-width:400px; }
.form-group{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.form-group label{ font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-mid); }
.form-group input,.form-group textarea,.form-group select{ font-family:var(--font-body); font-size:0.92rem; color:var(--slate); background:var(--cream); border:1.5px solid var(--rule); border-radius:var(--radius); padding:13px 16px; outline:none; width:100%; transition:border-color var(--transition),box-shadow var(--transition); }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{ border-color:var(--sage-accent); box-shadow:0 0 0 3px rgba(122,158,156,0.18); }
.form-error{ color:var(--amber-ink); font-size:0.8rem; margin-top:2px; }

/* ── DASHBOARD ── */
.dash-head{ background:var(--sage-pale); padding:44px 0 40px; position:relative; overflow:hidden; }
.dash-head::after{ content:''; position:absolute; top:-120px; right:-120px; width:420px; height:420px; border-radius:50%; border:1px solid var(--rule); }
.stat{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); padding:20px 24px; }
.stat .n{ font-family:var(--font-script); font-size:2.6rem; color:var(--slate); line-height:1; }
.stat .l{ font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-mid); margin-top:4px; }
.enrolled-row{ display:flex; align-items:center; gap:22px; background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); padding:22px 26px; transition:box-shadow var(--transition); }
.enrolled-row:hover{ box-shadow:0 6px 24px var(--shadow); }
.enrolled-row .er-icon{ width:52px; height:52px; border-radius:12px; background:var(--sage); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.enrolled-row .er-icon svg{ width:26px; height:26px; }
.enrolled-row .er-main{ flex:1; min-width:0; }
.enrolled-row h4{ font-size:1.02rem; margin-bottom:6px; }
.enrolled-row .er-meta{ font-size:0.76rem; color:var(--slate-mid); margin-bottom:8px; }

/* ── LEARN / LESSON APP SHELL ── */
.learn{ display:grid; grid-template-columns:320px 1fr; min-height:calc(100vh - 74px); }
.learn-side{ border-right:1px solid var(--rule); background:var(--cream); position:sticky; top:74px; height:calc(100vh - 74px); overflow-y:auto; }
.learn-side{ scrollbar-width:thin; scrollbar-color:var(--sage) transparent; }
.learn-side::-webkit-scrollbar{ width:8px; }
.learn-side::-webkit-scrollbar-track{ background:transparent; }
.learn-side::-webkit-scrollbar-thumb{ background:var(--sage); border-radius:4px; border:2px solid var(--cream); }
.learn-side .lrow{ align-items:flex-start; }
.learn-side .lrow .dot{ margin-top:1px; }
.learn-side .lrow .dur{ margin-top:2px; white-space:nowrap; }
.ls-head{ padding:24px 24px 18px; border-bottom:1px solid var(--rule); }
.ls-head .kicker{ font-size:0.6rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--slate-faint); display:block; }
.ls-head h3{ font-size:1.05rem; margin:6px 0 12px; line-height:1.3; }
.mod-group{ padding:8px 0; border-bottom:1px solid var(--rule); }
/* ── collapsible parts in the sidebar ── */
.mod-title{ padding:12px 24px 6px; font-size:0.62rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-faint); }
button.mod-title{ display:flex; align-items:center; gap:9px; width:100%; padding:13px 22px; background:none;
  border:none; border-top:1px solid var(--rule); font-family:inherit; text-align:left; cursor:pointer;
  color:var(--slate-mid); transition:background var(--transition); }
button.mod-title:hover{ background:var(--sage-light); color:var(--slate); }
.mod-group:first-of-type > button.mod-title{ border-top:none; }
button.mod-title .mt-chev{ flex-shrink:0; display:flex; transition:transform 0.22s ease; color:var(--sage-accent); }
button.mod-title .mt-label{ flex:1; min-width:0; line-height:1.4; }
button.mod-title .mt-count{ flex-shrink:0; font-size:0.6rem; letter-spacing:0.08em; color:var(--slate-faint);
  background:var(--sage-light); border-radius:20px; padding:3px 8px; }
.mod-group.open > button.mod-title .mt-chev{ transform:rotate(90deg); }
.mod-group.open > button.mod-title{ color:var(--slate); }
.mod-group.shut .mod-rows{ display:none; }
.mod-group.open .mod-rows{ padding-bottom:8px; }
.mod-group.open > button.mod-title .mt-count{ background:var(--sage); }
.lrow{ display:flex; align-items:center; gap:12px; padding:11px 24px; font-size:0.85rem; color:var(--slate); cursor:pointer; transition:background var(--transition); }
.lrow:hover{ background:var(--sage-light); }
.lrow .dot{ width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.64rem; font-weight:700; border:1.5px solid var(--slate-faint); color:var(--slate-mid); background:var(--cream); }
.lrow.done .dot{ background:var(--sage-accent); color:var(--cream); border-color:var(--sage-accent); }
.lrow.active{ background:var(--sage-light); }
.lrow.active .dot{ background:var(--slate); color:var(--cream); border-color:var(--slate); }
.lrow.active{ font-weight:700; }
.lrow .lt{ flex:1; line-height:1.35; }
.lrow .dur{ font-size:0.68rem; color:var(--slate-faint); }
.lrow.locked{ color:var(--slate-faint); cursor:not-allowed; }
.lrow.locked:hover{ background:transparent; }

.learn-main{ padding:0; }
.lesson{ max-width:760px; margin:0 auto; padding:48px 48px 80px; }
.lesson .crumb{ font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-faint); margin-bottom:10px; }
.lesson h1{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:8px; }
.lesson .l-meta{ font-size:0.78rem; color:var(--slate-mid); margin-bottom:24px; }
.lesson-body{ font-size:1rem; }
.lesson-body h2{ font-size:1.25rem; margin:28px 0 10px; }
.lesson-body h3{ font-size:1.02rem; color:var(--sage-accent); margin:22px 0 6px; }
.lesson-body p{ margin-bottom:14px; }
.lesson-body ul{ margin:6px 0 16px; }
.lesson-body ul li{ position:relative; padding-left:22px; margin-bottom:8px; }
.lesson-body ul li::before{ content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--sage-accent); }
ul.lesson-body{ margin:6px 0 16px; }
ul.lesson-body > li{ position:relative; padding-left:22px; margin-bottom:8px; }
ul.lesson-body > li::before{ content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--sage-accent); }
.lesson-body ol{ margin:6px 0 16px; padding-left:20px; } .lesson-body ol li{ margin-bottom:8px; padding-left:6px; }
/* inline icon sizing */
.l-meta{ display:inline-flex; align-items:center; gap:6px; }
.l-meta svg{ width:14px; height:14px; }
.course-meta svg{ width:14px; height:14px; flex-shrink:0; }
.crumb svg{ width:12px; height:12px; }
.btn svg{ width:15px; height:15px; }
.lesson-body strong{ color:var(--ink); }
.callout{ border-left:4px solid var(--sage-accent); background:var(--sage-light); padding:12px 16px; border-radius:6px; margin:16px 0; font-size:0.92rem; }
.callout.warn{ border-left-color:var(--amber-ink); background:var(--amber-bg); }
.callout.info{ border-left-color:var(--teal); background:var(--teal-soft); }
.callout .h{ font-weight:700; color:var(--ink); }
.lesson-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; padding-top:24px; border-top:1px solid var(--rule); }

/* ── QUIZ / ASSESSMENT ── */
.quiz{ max-width:680px; margin:0 auto; }
.qcard{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); padding:32px; }
.qprogress{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.qopt{ display:flex; align-items:center; gap:13px; border:1.5px solid var(--rule); border-radius:var(--radius); padding:14px 18px; margin-top:12px; font-size:0.92rem; cursor:pointer; transition:border-color var(--transition),background var(--transition); }
.qopt:hover{ border-color:var(--sage-accent); }
.qopt.sel{ border-color:var(--slate); background:var(--sage-light); }
.qopt.correct{ border-color:var(--sage-accent); background:var(--sage-light); }
.qopt.wrong{ border-color:var(--amber-ink); background:var(--amber-bg); }
.qopt .mk{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--slate-faint); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.7rem; }
.qopt.sel .mk{ border-color:var(--slate); background:var(--slate); color:var(--cream); }
.qopt.correct .mk{ border-color:var(--sage-accent); background:var(--sage-accent); color:var(--cream); }
.qopt.wrong .mk{ border-color:var(--amber-ink); background:var(--amber-bg); }
.result-ring{ width:150px; height:150px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 20px; border:8px solid var(--sage); }
.result-ring.pass{ border-color:var(--sage-accent); }
.result-ring.fail{ border-color:var(--amber-ink); }
.result-ring .pct{ font-family:var(--font-script); font-size:2.6rem; color:var(--slate); line-height:1; }

/* ── CERTIFICATE ── */
.cert{ background:var(--cream); border:2px solid var(--sage); border-radius:10px; padding:56px 60px; text-align:center; position:relative; max-width:820px; margin:0 auto; box-shadow:0 12px 48px var(--shadow); }
.cert::before{ content:''; position:absolute; inset:14px; border:1px solid var(--rule); border-radius:6px; pointer-events:none; }
.cert .c-logo{ width:70px; height:70px; object-fit:contain; margin:0 auto 14px; }
.cert .c-ey{ font-size:0.7rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--slate-mid); }
.cert .c-title{ font-family:var(--font-script); font-size:3rem; color:var(--slate); line-height:1; margin:6px 0 20px; }
.cert .c-name{ font-size:1.9rem; font-weight:700; color:var(--ink); margin:8px 0; }
.cert .c-rule{ width:60px; height:1.5px; background:var(--sage-accent); margin:16px auto; }
.cert .c-course{ font-size:1.1rem; color:var(--slate); }
.cert .c-foot{ display:flex; justify-content:space-between; margin-top:40px; font-size:0.72rem; color:var(--slate-mid); }

/* ── CHECKOUT ── */
.checkout-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; }
.summary{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); padding:28px; position:sticky; top:96px; }
.summary .li{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--rule); font-size:0.88rem; }
.summary .tot{ display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; font-weight:700; }
.summary .tot .amt{ font-family:var(--font-script); font-size:2.2rem; }

/* ── ADMIN ── */
.admin-tabs{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.admin-tab{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; padding:9px 18px; border-radius:20px; border:1px solid var(--rule); color:var(--slate-mid); cursor:pointer; }
.admin-tab.active{ background:var(--slate); color:var(--cream); border-color:var(--slate); }
.tbl{ width:100%; border-collapse:collapse; background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.tbl th{ background:var(--sage-pale); text-align:left; padding:13px 16px; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate-mid); font-weight:700; }
.tbl td{ padding:13px 16px; font-size:0.86rem; border-top:1px solid var(--rule); }
.tbl tr:hover td{ background:var(--sage-light); }

/* ── TOAST ── */
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--slate); color:var(--cream); padding:13px 24px; border-radius:40px; font-size:0.82rem; box-shadow:0 8px 30px var(--shadow); opacity:0; pointer-events:none; transition:all var(--transition); z-index:300; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.page{ min-height:calc(100vh - 74px); display:flex; flex-direction:column; }
.grow{ flex:1; }

/* ── RESPONSIVE ── */
@media (max-width:1000px){
  .learn{ grid-template-columns:1fr; }
  .learn-side{ position:static; height:auto; border-right:none; border-bottom:1px solid var(--rule); }
  .learn-side.collapsed .mod-group{ display:none; }
  .checkout-grid{ grid-template-columns:1fr; } .summary{ position:static; }
}
@media (max-width:900px){
  .container,.wide{ padding:0 24px; }
  .nav-inner{ padding:0 24px; }
  .nav-links{ display:none; } .nav-toggle{ display:flex; }
  .grid-3,.grid-4{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .auth-wrap{ grid-template-columns:1fr; } .auth-aside{ display:none; }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .section{ padding:40px 0; } .hero{ padding:52px 0 44px; }
  .lesson{ padding:32px 22px 60px; } .cert{ padding:36px 24px; } .cert .c-name{ font-size:1.4rem; }
  .lesson-nav{ flex-direction:column; } .lesson-nav .btn{ width:100%; }
}
@media print{
  .nav,.footer,.lesson-nav,.no-print{ display:none !important; }
  .cert{ border:none; box-shadow:none; }
}

/* ── ROUTE CHOOSER (two ways to learn) ── */
.route-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.route{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column; }
.route.featured{ border-color:var(--sage-accent); box-shadow:0 8px 32px var(--shadow); }
.route .r-icon{ width:52px; height:52px; border-radius:12px; background:var(--sage); display:flex; align-items:center; justify-content:center; color:var(--sage-accent); margin-bottom:16px; }
.route .r-icon svg{ width:26px; height:26px; }
.route .r-kicker{ font-size:0.62rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--slate-faint); }
.route h3{ font-size:1.25rem; margin:6px 0 8px; }
.route .r-price{ font-family:var(--font-script); font-size:2.2rem; color:var(--slate); line-height:1; margin:12px 0 2px; }
.route .r-blurb{ font-size:0.9rem; color:var(--slate-mid); }
.route .r-action{ margin-top:auto; padding-top:20px; }

/* ── SPLIT LAYOUT ── */
.split{ display:grid; grid-template-columns:1.6fr 1fr; gap:44px; align-items:start; }
.sticky-card{ position:sticky; top:96px; }

/* ── FAQ ── */
.faq details{ border-bottom:1px solid var(--rule); padding:16px 0; }
.faq summary{ cursor:pointer; font-weight:700; font-size:0.95rem; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; color:var(--slate); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--sage-accent); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after{ content:'\2212'; }
.faq details p{ margin-top:10px; font-size:0.9rem; color:var(--slate-mid); }

/* ── NUMBERED STEPS ── */
.step-n{ font-family:var(--font-script); font-size:2.4rem; color:var(--sage-accent); line-height:1; }

@media (max-width:900px){ .split{ grid-template-columns:1fr; } .sticky-card{ position:static; } }
@media (max-width:800px){ .route-grid{ grid-template-columns:1fr; } }

/* ── FIX: .nav-links a was overriding .btn colours, so the
       "Create account" button rendered slate text on a slate pill. ── */
.nav-links a.btn-primary{ color:var(--cream); text-transform:uppercase; }
.nav-links a.btn-primary:hover{ color:var(--cream); }
.nav-links a.btn-sage{ color:var(--slate); }
.nav-links a.btn-outline:hover{ color:var(--cream); }
@media (max-width:640px){ .nav-logo .badge{ display:none; } }

/* ══════════════ THE FREE PREVIEW ══════════════ */
.pv-player{ display:grid; grid-template-columns:320px 1fr; border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; background:var(--cream); box-shadow:0 12px 48px var(--shadow); }
.pv-side{ border-right:1px solid var(--rule); background:var(--cream); max-height:760px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--sage) transparent; }
.pv-side::-webkit-scrollbar{ width:8px; }
.pv-side::-webkit-scrollbar-track{ background:transparent; }
.pv-side::-webkit-scrollbar-thumb{ background:var(--sage); border-radius:4px; border:2px solid var(--cream); }
.pv-side .lrow{ align-items:flex-start; padding:12px 22px; gap:11px; }
.pv-side .lrow .dot{ margin-top:1px; }
.pv-side .lrow .dur{ margin-top:2px; white-space:nowrap; }
.pv-main{ min-width:0; }
.pv-player .lrow.locked{ color:var(--slate-faint); cursor:default; }
.pv-player .lrow.locked .dot{ border-color:var(--rule); }
.pv-player .lrow.locked .dot svg{ width:11px; height:11px; stroke:var(--slate-faint); }
.pv-player .lrow.active{ cursor:default; }
.pv-player .lesson{ max-width:none; }
.pv-locked{ padding:56px 32px; text-align:center; }
.pv-lock-icon{ width:56px; height:56px; border-radius:50%; background:var(--sage-light); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.pv-lock-icon svg{ width:24px; height:24px; stroke:var(--sage-accent); }

.pv-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--rule); font-size:0.9rem; color:var(--slate-mid); }
.pv-row .pv-mark{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--rule); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.pv-row .pv-mark svg{ width:11px; height:11px; stroke:var(--slate-faint); }
.pv-row .pv-t{ flex:1; line-height:1.35; }
.pv-row .pv-tag{ font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-faint); white-space:nowrap; }
.pv-row.free{ color:var(--slate); font-weight:700; }
.pv-row.free .pv-mark{ background:var(--sage-accent); border-color:var(--sage-accent); }
.pv-row.free .pv-mark svg{ stroke:var(--cream); }
.pv-row.free .pv-tag{ color:var(--sage-accent); }

.pv-feature{ display:flex; gap:16px; align-items:flex-start; }
.pv-feature .f-icon{ width:44px; height:44px; border-radius:10px; background:var(--sage); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--sage-accent); }
.pv-feature .f-icon svg{ width:22px; height:22px; }
.pv-feature h3{ font-size:1rem; margin-bottom:5px; }
.pv-feature p{ font-size:0.86rem; color:var(--slate-mid); line-height:1.6; }

.pv-quote{ border-left:4px solid var(--sage-accent); background:var(--sage-light); padding:20px 24px; border-radius:6px; }
.pv-quote .q{ font-size:1.02rem; line-height:1.75; color:var(--slate); }

@media (max-width:900px){
  .pv-player{ grid-template-columns:1fr; }
  .pv-side{ border-right:none; border-bottom:1px solid var(--rule); max-height:320px; }
  .pv-player .lesson{ padding:28px 22px 32px !important; }
}

/* ── FIX: grid children default to min-width:auto, so a long unbreakable
       child (a nowrap button, a long word) pushed the page wider than the
       viewport on small phones. ── */
.split > *, .route-grid > *, .checkout-grid > *, .pv-player > *,
.grid-2 > *, .grid-3 > *, .grid-4 > *{ min-width:0; }
.route, .card, .pv-main{ overflow-wrap:break-word; }
@media (max-width:640px){
  .btn-block{ white-space:normal; line-height:1.4; padding-top:13px; padding-bottom:13px; }
  .route{ padding:26px 22px; }
}

/* ══════════════ CATALOGUE CARDS ══════════════ */
.cc{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; position:relative; transition:box-shadow var(--transition),transform var(--transition); }
.cc:hover{ box-shadow:0 8px 32px var(--shadow); transform:translateY(-2px); }
.cc.featured{ border-color:var(--sage-accent); box-shadow:0 8px 32px var(--shadow); padding-top:34px; }
.cc-flag{ position:absolute; top:-11px; left:28px; background:var(--sage-accent); color:var(--cream); font-size:0.58rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:4px 12px; border-radius:12px; }
.cc-icon{ width:48px; height:48px; border-radius:11px; background:var(--sage); display:flex; align-items:center; justify-content:center; color:var(--sage-accent); margin-bottom:14px; flex-shrink:0; }
.cc-icon svg{ width:24px; height:24px; }
.cc-kicker{ font-size:0.6rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--slate-faint); }
.cc h3{ font-size:1.15rem; margin:6px 0 8px; }
.cc-blurb{ font-size:0.86rem; color:var(--slate-mid); line-height:1.6; flex:1; }
.cc-prices{ display:flex; gap:22px; padding:14px 0 4px; border-top:1px solid var(--rule); margin-top:12px; }
.cc-price{ display:flex; flex-direction:column; font-family:var(--font-script); font-size:1.7rem; color:var(--slate); line-height:1.1; }
.cc-price .l{ font-family:var(--font-body); font-size:0.58rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--slate-faint); line-height:1; margin-bottom:3px; }
.cc-action{ margin-top:16px; }
.cc-sample{ display:block; text-align:center; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-mid); margin-top:12px; font-weight:700; }
.cc-sample:hover{ color:var(--slate); }

/* ── the upgrade credit ── */
.credit-note{ display:flex; align-items:center; gap:12px; background:var(--sage-light); border:1px solid var(--sage-accent); border-radius:var(--radius); padding:12px 16px; font-size:0.9rem; }
.credit-note svg{ width:20px; height:20px; stroke:var(--sage-accent); flex-shrink:0; }
.summary .li s{ color:var(--slate-faint); }

/* ── preview: other courses ── */
.pv-other-card{ display:flex; flex-direction:column; gap:6px; background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); padding:22px; transition:box-shadow var(--transition),transform var(--transition); }
.pv-other-card:hover{ box-shadow:0 8px 32px var(--shadow); transform:translateY(-2px); }
.pv-other-card strong{ font-size:0.98rem; line-height:1.3; }
.pv-other-cta{ margin-top:8px; font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--sage-accent); display:inline-flex; align-items:center; gap:6px; }
.pv-other-cta svg{ width:13px; height:13px; }

/* ── learn sidebar back link ── */
.ls-back{ display:inline-block; margin-top:12px; font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--sage-accent); }

@media (max-width:640px){ .cc-prices{ gap:16px; } .cc-price{ font-size:1.45rem; } }

/* ── FIX: prices were set in Sweet Belly Script, where a 9 reads as a 1 at
       small sizes, so £99 looked like £11 and £249 like £241. Prices now
       use Garet Heavy. The script face is kept for decorative figures. ── */
.cc-price,
.route .r-price,
.summary .tot .amt,
.course-card .price,
#c-price, #d-price, #pv-price{
  font-family:var(--font-body) !important;
  font-weight:700;
  letter-spacing:-0.015em;
}
.cc-price{ font-size:1.35rem; }
.route .r-price{ font-size:1.9rem; }
.summary .tot .amt{ font-size:1.7rem; }
.course-card .price{ font-size:1.5rem; }
#c-price, #d-price{ font-size:2.1rem !important; }
@media (max-width:640px){ .cc-price{ font-size:1.2rem; } }

/* ══════════════ RICH MODULE CONTENT ══════════════ */
.lesson-body .in-module{ font-size:0.88rem; line-height:1.7; color:var(--slate-mid); border-bottom:1px solid var(--rule); padding-bottom:14px; margin-bottom:22px; }
.lesson-body .in-module strong{ display:block; font-size:0.62rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage-accent); margin-bottom:5px; }

.lesson-body table{ width:100%; border-collapse:collapse; margin:14px 0 22px; font-size:0.9rem; display:block; overflow-x:auto; }
.lesson-body thead, .lesson-body tbody{ width:100%; }
.lesson-body th{ background:var(--sage); color:var(--slate); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; text-align:left; padding:11px 14px; font-weight:700; }
.lesson-body td{ padding:11px 14px; border-bottom:1px solid var(--rule); vertical-align:top; line-height:1.65; }
@media (min-width:641px){ .lesson-body td:first-child, .lesson-body th:first-child{ min-width:150px; } }
.lesson-body th, .lesson-body td{ overflow-wrap:anywhere; word-break:break-word; }
.lesson-body p, .lesson-body li, .lesson-body .callout, .lesson-body .do-now{ overflow-wrap:break-word; }
.lesson-body tbody tr:nth-child(even) td{ background:var(--sage-pale); }
.lesson-body td:first-child{ font-weight:700; }

.lesson-body .do-now{ background:var(--sage-pale); border-radius:var(--radius); padding:18px 22px; margin:26px 0 0; font-size:0.92rem; line-height:1.7; }
.lesson-body .do-now .h{ display:block; font-size:0.62rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
.lesson-body .do-now p{ margin:0; }

.lesson-body .compare{ margin:14px 0 20px; }
.lesson-body .compare p{ font-size:0.92rem; line-height:1.65; padding:13px 16px; border-radius:var(--radius); margin-bottom:8px; }
.lesson-body .compare p span{ display:block; font-size:0.6rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:4px; }
.lesson-body .compare .bad{ background:var(--amber-bg); } .lesson-body .compare .bad span{ color:var(--amber-ink); }
.lesson-body .compare .good{ background:var(--sage-light); } .lesson-body .compare .good span{ color:var(--sage-accent); }

/* ── a section inside a bunched module ──────────────────
   Closely related modules were joined so the contents list is not a
   mountain. Each keeps its own titled section, and this is that title:
   one level above the h3 headings inside it. */
.lesson-body h3.seg{ font-size:1.22rem; color:var(--slate); font-weight:700; line-height:1.3;
  margin:44px 0 14px; padding-top:26px; border-top:2px solid var(--sage); letter-spacing:-0.01em; }
.lesson-body h3.seg[data-first]{ margin-top:6px; padding-top:0; border-top:none; }
.lesson-body h3.seg + p{ margin-top:0; }
@media (max-width:640px){
  .lesson-body h3.seg{ font-size:1.08rem; margin:32px 0 12px; padding-top:20px; }
}

@media (max-width:640px){
  .lesson-body td:first-child{ min-width:110px; }
  .lesson-body .do-now{ padding:16px 18px; }
}

/* ── FIX: the module sidebar pushed past narrow screens (360px) because
       grid children default to min-width:auto. ── */
.learn > *{ min-width:0; }
.learn-side, .learn-main{ min-width:0; }
.lrow .lt{ min-width:0; overflow-wrap:break-word; }
.ls-head h3{ overflow-wrap:break-word; }

/* ── FIX: a few sections set their columns inline, so they never collapsed
       on very narrow screens. This forces a single column below 820px. ── */
@media (max-width:820px){
  .wide[style*="grid-template-columns"],
  .container[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
}

/* ── FIX: long button labels stayed on one line and pushed past very
       narrow screens. Buttons wrap below 400px. ── */
@media (max-width:400px){
  .btn{ white-space:normal; line-height:1.4; max-width:100%; }
  .hero .btn{ width:100%; justify-content:center; }
}

/* the featured catalogue card goes two column on a wide screen, so the
   blurb has room to breathe and the price sits beside it, not below it */
.cc-body{ display:flex; flex-direction:column; min-width:0; }
.cc-side{ min-width:0; }
@media(min-width:920px){
  .cc.featured{ display:grid; grid-template-columns:1fr 300px; column-gap:44px; align-items:start; }
  .cc.featured .cc-side{ border-left:1px solid var(--rule); padding-left:36px; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
  .cc.featured .cc-prices{ margin-top:0; }
}

/* ── the hero on a wide screen ──────────────────────
   The lead paragraph is capped at 640px for readability, which left the
   right half of every hero empty on a large monitor. Rather than stretch
   the text, the space now carries a panel that earns its place: the price
   ladder on the landing page, what is inside on the sample and course
   pages. It appears only above 1080px, so nothing below that changes. */
@media(min-width:1080px){
  .hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) clamp(320px,26vw,400px); gap:clamp(36px,4vw,64px); align-items:center; }
  .hero-grid > .hero-main{ min-width:0; }
  .hero-aside{ min-width:0; }
}
.hero-aside{ display:none; }
@media(min-width:1080px){ .hero-aside:not(:empty){ display:block; } }
.ha-card{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius);
  padding:26px 28px 24px; box-shadow:0 14px 44px var(--shadow); }
.ha-card .ha-kicker{ font-size:0.62rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--slate-faint); display:block; }
.ha-card h3{ font-size:1.02rem; margin:8px 0 14px; line-height:1.35; }
.ha-card .ha-rule{ height:1px; background:var(--rule); margin:0 0 14px; }
.ha-row{ display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--rule); font-size:0.86rem; }
.ha-row:last-of-type{ border-bottom:none; }
.ha-row .l{ color:var(--slate-mid); min-width:0; }
.ha-row .v{ font-family:var(--font-body); font-weight:700; white-space:nowrap; }
.ha-row .v.num{ font-size:0.98rem; }
.ha-note{ font-size:0.74rem; color:var(--slate-faint); line-height:1.6; margin-top:14px; }
.ha-card .btn{ margin-top:16px; }

/* ── the checkout consent ───────────────────────────── */
.co-consent{ margin:18px 0 4px; border-top:1px solid var(--rule); padding-top:16px; display:flex; flex-direction:column; gap:12px; }
.co-consent label{ display:flex; gap:10px; align-items:flex-start; font-size:0.8rem; line-height:1.6; color:var(--slate-mid); cursor:pointer; }
.co-consent input{ width:17px; height:17px; flex-shrink:0; margin-top:2px; accent-color:var(--sage-accent); cursor:pointer; }
.co-consent a{ color:var(--slate); font-weight:700; text-decoration:underline; }
.co-consent strong{ color:var(--slate); }
#co-action.gated{ opacity:0.4; pointer-events:none; }
#co-action.gated::after{ content:'Tick both boxes above to continue'; display:block; text-align:center;
  font-size:0.72rem; color:var(--slate-faint); margin-top:8px; }